Forem: Jen-Hsuan Hsieh

Day 56 of #100DaysOfCode: Avoid useless re-rendering with React.memo for the customized hooks

Jen-Hsuan Hsieh — Thu, 28 Jan 2021 11:19:00 +0000

1. Introduction

I create a React hook recently which is called use-react-monitor. It can help us to monitor endpoints for the specified interval and reset the interval when it changes.

We have to install the package in the first step

npm install use-react-monitor -S

We can use the hook for endpoints that we want to monitor to

import React from 'react';
import useMonitor from 'use-react-monitor';

const Tester = () => {
    const interval = 3000;
    const {results, status, lastTimes} = useMonitor(
        { urls:['http://rem-rest-api.herokuapp.com/api/users',
                'http://rem-rest-api.herokuapp.com/api/users'],
          freshRate: interval});

    return (
        <>
            {<Results results = {results} status = {status}/>}
        </>
    )
}

const Results = ({ results, status}) => {
    const refCount = React.useRef(0);
    refCount.current++;
    return (
        <div>
        <p>
       {`render time: ${refCount.current}`}
        </p>
        {results && results.map((result, i) =>{
            return (
                <>
                    <div key={`status-${i}`}>Status: {status && status[i]}</div>
                    <ul key={i}>
                        {result.data.map((r, index) => {
                            return (<li key={index}>{r.id} {r.firstName} {r.lastName}</li>)
                        })}
                    </ul>
                </>)
        })}
     </div>
    );
};

export default Tester

Then it can polling to fetch the resources from endpoints. Now we add useRef to check if the child was re-rendered even though the fetched result was unchanged.

const Results = ({ results, status}) => {
    const refCount = React.useRef(0);
    refCount.current++;
    return (
        <div>
        <p>
       {`render time: ${refCount.current}`}
        </p>
        ...
    )
};

We found that the child component was re-rendered whenever use-react-monitor return the value. However, what we expect is that the child component was re-rendered only when use-react-monitor return new values.

2. Avoid useless re-rendering with React.memo

React.memo is a HOC. We can pass our child component with the compare function and React.memo will perform shallow comparing.
The wrapped child component will only be re-rendered when use-react-monitor return new values.

Compare function

function monitoredPropsAreEqual(prevResults, nextResults){
    return JSON.stringify(prevResults) === JSON.stringify(nextResults);
}

Wrap the child component with React.memo

import React, {memo} from 'react';
const Tester = () => {
    const interval = 3000;
    const {results, status, lastTimes} = useMonitor(
        { urls:['http://rem-rest-api.herokuapp.com/api/users',
                'http://rem-rest-api.herokuapp.com/api/users'],
          freshRate: interval});

    return (
        <>
            {<MemorizedResults results = {results} status = {status}/>}
        </>
    )
}
const MemorizedResults = memo(Results, monitoredPropsAreEqual);

Result

That's it!

Side projects

There are some of my articles. Feel free to check if you like!

References

Day 55 of #100DaysOfCode: Learn Monkey C (Garmin Connect IQ)- Retrieve common data

Jen-Hsuan Hsieh — Fri, 15 Jan 2021 04:51:46 +0000

Introduction

We can use Monkey C and Connect IQ SDK to customize the appearance of Garmin devices. The article is the note for learning Monkey C.

Welcome to visit the following articles to learn Garmin Connect IQ developing

Day 10 of #100DaysOfCode: Learn Monkey C- create a menu for CIQ application

Start/Finish an activity

Click the right-top button

class ExampleDelegate extends Ui.BehaviorDelegate {
    function initialize() {
        BehaviorDelegate.initialize();
    }
    function onKey(evt) {
        var lastKey=evt.getKey();
        if(lastKey==Ui.KEY_ENTER || lastKey==Ui.KEY_START) {
        }
    }
}

Retrieve common data

1.ActivityInfo Common indicators

Usages

using Toybox.Activity;
class ExampleView extends Ui.View {
    function updateData() {
        var actInfo = Activity.getActivityInfo();
        Sys.println(actInfo.currentCadence);
        Sys.println(actInfo.currentHeartRate);
        Sys.println(actInfo.elapsedDistance);
        Sys.println(actInfo.elapsedTime);
    }
}

2.Running dynamics data Common indicators

Usages

using Toybox.System;
using Toybox.AntPlus;
using Toybox.System as Sys;

class RunDataProvider {
    var RD;

    function initialize() {
        var listener = new Toybox.AntPlus.RunningDynamicsListener();
        RD = new Toybox.AntPlus.RunningDynamics(listener);
    }

    function getRunningData() {
        return RD.getRunningDynamics();
    }
}


using Toybox.Activity;
class ExampleView extends Ui.View {
    var mRunDataProvider = null;
    function initialize() {
        View.initialize();
        mRunningDataProvider = new $.RunningDataProvider();
    }

    function updateData() {
        var runningData = mRunDataProvider.getRunningData();
        Sys.println(runningData.stepLength);
        Sys.println(runningData.verticalOscillation);
        Sys.println(runningData.groundContactTime);
        Sys.println(runningData.groundContactBalance);
    }
}

Heart rate zones

Usages


using Toybox.UserProfile;
module ExampleModule {
var heartRateZone = "";
    function getMyHeartRateZone(){
        heartRateZone = "";
        var hrz = UserProfile.getHeartRateZones(UserProfile.HR_ZONE_SPORT_GENERIC);
        for(var i = 0; i < 5; i++){
            heartRateZone += hrz[i] + ",";
        }
        heartRateZone += hrz[5];
    }
}


using Toybox.Timer;
class ExampleView extends Ui.View {
    var _refresher = new Timer.Timer();
    function initialize() {
        View.initialize();
        Ui.requestUpdate();
        _refresher.start(method(:onTimer), 1000, true);
    }
    function onTimer(){
        Sys.println(JapanWearableExpo2020.heartRateZone());
    }
}

That's it!

Articles

There are some of my articles. Feel free to check if you like!

My blog-posts for software developing: https://medium.com/a-layman
My web resume: https://jenhsuan.github.io/ALayman/cover.html
Facebook page: https://www.facebook.com/imalayman
My website

Day 54 of #100DaysOfCode: Review CSS- display

Jen-Hsuan Hsieh — Thu, 31 Dec 2020 14:45:23 +0000

Introduction

The Review CSS series is the note for some common CSS usages. Three are three types of CSS position: block, inline, inline-block.

1. display: block

Properties

Everything is respected
The elements don’t sit side by side

Demo

Code

<div class="outer">
  <span class="inner">
    inner
  </span>
  <span class="inner">
    inner
  </span>
</div>

.outer {
  position:relative;
  color:green;
  border: 3px solid green;
  height: 400px;
  width: 500px;
}

.inner {
  display:block;
  padding:2%;
  margin: 2%;
  color: blue;
  border: 3px solid blue; 
  text-align:center;
  font-size: 30px;
  height: 100px;
  width: 200px;
  top:50%;
}

2. display: inline

Properties

Width and height are not respected
Top and bottom margins are not respected

Demo

Code

<div class="outer">
  <span class="inner">
    inner
  </span>
  <span class="inner">
    inner
  </span>
</div>

.outer {
  position:relative;
  color:green;
  border: 3px solid green;
  height: 400px;
  width: 500px;
}

.inner {
  display:inline;
  padding:2%;
  margin: 2%;
  color: blue;
  border: 3px solid blue; 
  text-align:center;
  font-size: 30px;
  height: 100px;
  width: 200px;
  top:50%;
}

3. display: inline-block

Properties

Width and height are respected
Top and bottom margins are respected
The elements sit side by side

Demo

Code

<div class="outer">
  <span class="inner">
    inner
  </span>
  <span class="inner">
    inner
  </span>
</div>

.outer {
  position:relative;
  color:green;
  border: 3px solid green;
  height: 400px;
  width: 500px;
}

.inner {
  display:inline-block;
  padding:2%;
  margin: 2%;
  color: blue;
  border: 3px solid blue; 
  text-align:center;
  font-size: 30px;
  height: 100px;
  width: 200px;
  top:50%;
}

That's it!

Articles

There are some of my articles. Feel free to check if you like!

My blog-posts for software developing: https://medium.com/a-layman
My web resume: https://jenhsuan.github.io/ALayman/cover.html
Facebook page: https://www.facebook.com/imalayman
My website

Day 53 of #100DaysOfCode: How to Publish an npx Command to Improve productivity?

Jen-Hsuan Hsieh — Sat, 19 Dec 2020 11:56:39 +0000

Introduction

Blog posting is kind of my knowledge base. I can review and apply knowledge from those posts to my new projects.
Building tools is another efficient way to create a new project without recalls or a few manual works. To integrate the knowledge,

I create an npx tool to create a new project with Next.js, Redux, and Styled Components with default folders and files.
This article introduces the following topics.

Steps to push a new npx command
Other useful commands to manage npm packages

Details

Please refer to my article

Porfolios

There are some of my articles and released projects. Feel free to check if you like!

Day 52 of #100DaysOfCode: Root component of Next.js: custom App

Jen-Hsuan Hsieh — Fri, 18 Dec 2020 00:03:05 +0000

Introduction

We can overwrite _app.js to control the page initialization in Next.js. We can do things like:

Inject additional data into the page (Get initial props)
Connect to the Redux provider
Add global CSS/connect to Styled-Component provider

1.Inject additional data into the page (Get initial props)

SSR (Will disable Automatica Static Optimization)

The page will be SSR(server-side rendering)
App currently does not support Next.js Data Fetching methods like getStaticProps or getServerSideProps.


const apiCall = () => {
    return new Promise(() => {
        setTimeout(() => {
            res({testData: 'test'})
        }, 1000);
    })
};

const page1 = (props) => {
    return (
        <>
            {props.testData}
        </>
    )
}

page1.getInitialProps = async() => {
    const data = await apiCall();
    return {..data}
}

export default page1;


import App from 'next/app'

const AppPage = ({Component, pageProps}) => {
    return (
        {pageProps.add}
        <Component {...pageProps}/>
    )
}

AppPage.getInitialProps = async (context) => {
    const initialProps = App.getInitialProps && await App.getInitialProps(context)
    return {pageProps: {add: 'add'}, ...initialProps.pageProps}
}


export default App

What if we would like to use getStaticProps to enable Automatica Static Optimization?


const apiCall = () => {
    return new Promise(() => {
        setTimeout(() => {
            res({testData: 'test'})
        }, 1000);
    })
};

const page1 = (props) => {
    return (
        <>
            {props.testData}
        </>
    )
}

export async function getStaticProps(){
    const data = awiat apiCall();
    return {
        props: {
            ...data
        },
  };
}

export default page1;

server-side or client-side execution

getInitialProps may execute on the server-side the client-side, it depends on how the page is rendered.

It will execute on the client-side if the page is rendered by Next/Link | Next/Router
It will execute on the server-side if the page is rendered by other methods

2.Theme provider (Connect to Styled-Component)


import { ThemeProvider } from 'styled-components';
import Theme from '../components/themes/Theme';

const AppPage = ({Component, pageProps}) => {
    return (
        <ThemeProvider theme={Theme}>
            <Component {...pageProps}/>
        </ThemeProvider>
    )
}

export default App

3.Redux provider


import store from "../components/store/store";
import { Provider } from 'react-redux';

const AppPage = ({Component, pageProps}) => {
    return (
        <Provider store={store}>
            <Component {...pageProps}/>
        </Provider>
    )
}

export default App

Articles

There are some of my articles and released projects. Feel free to check if you like!

Day 51 of #100DaysOfCode: Create the Chrome Extension to Improve Productivity for bloggers

Jen-Hsuan Hsieh — Mon, 30 Nov 2020 14:53:37 +0000

Introduction

People who work as developers or bloggers usually open a lot of Chrome tabs to collect information or references and turn them into markdown syntax. This kind of job is so messy that I believe that it’s worthy to solve.

There are two reasons for me to decide to create a utility with a Chrome extension.

We can copy contents, turn them into markdown syntax, and paste them without switch tabs or extra monitor
We don’t have to leave tabs for content that we haven’t read yet

I will only record a rough overview of this article. It will introduce the following sections.

The basis of Chrome Extensions
Introduction of Storage APIs
ContextMenus (Right-click menu)

Details

Please refer to my article

Articles

There are some of my articles and released projects. Feel free to check if you like!

Day 50 of #100DaysOfCode: General strategies for optimizing critical render path

Jen-Hsuan Hsieh — Mon, 23 Nov 2020 12:12:15 +0000

<html lang="en">
    <head>
        <link rel="stylesheet" href="css/style.css" type="text/css"></link>
    </head>
    <body>
        <div><img src="photo.jpg"></div>
        <script src="js/app.js"></script>
    </body>
</html>

What are the critical resources, critical path length, total size for the above example?

3 number of critical resources
11 total critical KB
2 minimum critical path length(roundtrips)

Tip 1. Minify, compress, cache (for HTML, CSS, JavaScript)

(1) Minimize bytes
(2) Reduce critical resources
(3) Shortten CRP length

Tip 2. Minimize use of render blocking resources (for CSS)

(1) Use Media queries on link to unblock rensering

printer.css

@media print {
    ...
}

HTML

<link rel="stylesheet" media="print" href="printer.css" />

(2) Use inline CSS

Tip 3. Minimize use of parser blocking resources (for JavaScript)

We can use async, defer, and module to avoid blocking.

The following figure shows the difference between the async and the defer. The order is async/blocking, HTML parsing, defer.

In the following code, the order should be test.js, inline script, inline module, test2.js.

//3
<script type="module">   
    addTextToBody("Inline module executed"); 
</script>
//1
<script src="test1.js"></script>
//4
<script defer src="test2.js"></script>
//2
<script defer>   
    console.log("Inline script executed"); 
</script>

(1) Defer JavaScript execution

The browser renders and downloads JavaScript files at the same time. (non-blocking)
The browser will execute JavaScript code after rendering.
The inline script will ignore defer. For the following code, For the following code, the order should be inline script, test.js

<script defer src="test.js"></script>

The following optimized template is the code I found from the internet with dns-prefetch, preload, and defer.

<!DOCTYPE HTML>
<html>
       <head>
          <meta charset="utf-8">
          <link rel="dns-prefetch" href="//cdn1.com/">
          <link rel="preload" href="//js.cdn1.com/test.js" as="script">
       </head>
       <body>
           <script type="text/javascript" src="//js.cdn1.com/test.js" defer></script>
       </body>
</html>

(2) Use async attribute on script

The browser renders and downloads JavaScript files at the same time. (non-blocking)
The browser will execute JavaScript code before rendering.

<script async src="test.js"></script>

Articles

There are some of my articles and released projects. Feel free to check if you like!

References

Udacity course

Day 49 of #100DaysOfCode: Review session-based authentication and token-based authentication (same origin)

Jen-Hsuan Hsieh — Fri, 20 Nov 2020 13:34:08 +0000

Session-based authentication (sessions + cookies)

Procedures

The browser send the request with the user name and the password
The server verifies the credential with the database
The server generates the session for the user
The server set the cookie with the session ID
The browser send the request with the session ID
The server verifies the session with the database
The server destroy the session and clear the cookie when the user log outs

Features

Used for: SSR web apps, frameworks (Spring, Rails), scripting langs (PHP)
Stateful in the server-side: session is stored server-side and linked by session ID

Pros

session IDs are no meaningful data

Cons

server must store each user session in memory
horizontal scaling is challenging: need sticky sessions with load balancing

Token-based login (stateful JWT: JWT + cookies)

I think that it's safer to use JWT by Double tokens policy: HttpOnly Cookie + CSRF token which is called stateful JWT. It can keep several
advantages for storing JWT in cookies.

HttpOnly: avoid being manipulated by JavaScript (XSS)
Secure: cookie can only be sent to the server by HTTPS

Procedures

The browser send the request with the user name and the password
The server verifies the credential with the database
The server generates the JWT for the user
The server set the cookie(HttpOnly, Secure) with the JWT
The browser send the request with the JWT
The server verifies the JWT

Features

Used for: SPA (CSR), web APIs, mobile maps
Stateless: session is not stored server-side
Self-contained: carries all required user data in the payload. Reduces databases lookup

Pros

FE and BE architecture is decoupled, can be used with mobile apps

Cons

The server still has to maintain a blacklist of revoked tokens
When scaling, the secret must be shared between servers

That's it!

Articles

There are some of my articles and released projects. Feel free to check if you like!

References

Day 48 of #100DaysOfCode: Dependency Injection in ASP.NET MVC5 using Ninject

Jen-Hsuan Hsieh — Wed, 18 Nov 2020 12:09:15 +0000

Introduction

The controller is tied to concrete implementation of service because the constructor of the HomeController has to create the instance of service.

public HomeController()
{
    _messageService = new MessageService();
}

public ActionResult About()
{
    ViewBag.Message = _messageService.GetWelcomeMessage();
    return View();
}

There are a few advantages If we can decouple the controller with others.

It'll be easier to test the controller when we want to mock the service.
It'll ensure the single responsibility principle. It means that we only have to concern that how do we retrieving the data and not the concrete implementation.

Ninject is a Dependency Injection framework to break applications into loosely-coupled, highly-cohesive components, and then glue them back together.

Steps

1. Create a ASP.NET MVC project

2. Install packages

Install-Package Ninject -Version 3.3.4
Install-Package Ninject.MVC5 -Version 3.3.0
Install-Package Ninject.Web.Common.WebHost -Version 3.3.2

3. Create an interface

public interface IMessageService
{
    string GetWelcomeMessage();
}

4. Create a service implemented that interface

public class MessageService : IMessageService
{
    public string GetWelcomeMessage()
    {
        return "Welcome to Ninject MVC5 Example";
    }
}

5. Edit App_Start/NinjectWebCommon.cs

It will generate NinjectWebCommon.cs after installing packages automatically. Add the following code in CreateKernel()

private static IKernel CreateKernel()
{
    var kernel = new StandardKernel();
    try
    {
        kernel.Bind<Func<IKernel>>().ToMethod(ctx => () => new Bootstrapper().Kernel);
        kernel.Bind<IHttpModule>().To<HttpApplicationInitializationHttpModule>();
        kernel.Bind<IMessageService>().To<MessageService>();
        DependencyResolver.SetResolver(new NinjectDependencyResolver(kernel));
        RegisterServices(kernel);
        return kernel;
    }
    catch
    {
        kernel.Dispose();
        throw;
    }
}

6. Edit Controllers/HomeController.cs

Now We can use dependency injection instead of creating instances in the controller.

public class HomeController : Controller
{
    private readonly IMessageService _messageService;
    public HomeController(IMessageService messageService)
    {
        _messageService = messageService;
    }
    ...
    public ActionResult About()
    {
        ViewBag.Message = _messageService.GetWelcomeMessage();

        return View();
    }
    ...
}

That's it!

Articles

There are some of my articles and released projects. Feel free to check if you like!

References

Day 47 of #100DaysOfCode:Review ES6 Generators & Iterators

Jen-Hsuan Hsieh — Tue, 17 Nov 2020 13:28:48 +0000

Introduction

Generators is a new feature from ES6 which can help us to maintain the internal state (pause and resume)

The Iterator Protocol

The iterator protocol means a process for defining how an object will iterate.This is done through implementing the .next() method.

const list = [0, 1, 2, 3, 4, 5];
const arrayIterator = list[Symbol.iterator]();

console.log(arrayIterator.next());
console.log(arrayIterator.next());
console.log(arrayIterator.next());
/*
will print:
Object {value: 0, done: false}
Object {value: 1, done: false}
Object {value: 2, done: false}
*/

value: represent the next value in the sequence
done: represent if the iterator is done ging through the sequence

Pausable Functions

When a generator is invoked, it doesn't actually run any of the code inside the function. Instead, it creates and returns an iterator.
The function will be transformed to a pausable function if we put asterisk after the function keyword.
yield is the keyword that causes the generator to pause
The state machine(Generators) will transform the state: initial state -> resume -> pause (state 1) -> resume -> pause (state 2) -> resume -> .... -> end (state N)

Sending data into/out of a Generator

yield is used to send data outside the generator
.next() method is used to send data inside the generator

function* gen3() {
    for (let i = 0; i< 10; i++) {
        let value = yield i
        console.log(`sending data into generator: ${value}`)
    }
}


var g = gen3()
console.log(`sending data out of generator: ${g.next().value}`)
console.log(`sending data out of generator: ${g.next(10).value}`)
console.log(`sending data out of generator: ${g.next(20).value}`)
/*
will print:
sending data out of generator: 0
sending data into generator: 10
sending data out of generator: 1
sending data into generator: 20
sending data out of generator: 2
*/

Articles

There are some of my articles and released projects. Feel free to check if you like!

References

Day 46 of #100DaysOfCode: Images Lazy Loading with IntersectionObserver and React Hooks

Jen-Hsuan Hsieh — Mon, 16 Nov 2020 08:15:40 +0000

Introduction

The website with Image lazy loading loads off-screen images after all critical resources have finished loading to lower Time to Interactive (TTI). The user can avoid wasting money on large data and processing time for decoding the downloaded contents.

The TTI score is a comparison of your page’s TTI and the TTI for real websites, based on data from the HTTP Archive. Developers can measure TTI from Lighthouse

This article introduces the following topics.

What is Lazy Loading?
Implement Images Lazy Loading with IntersectionObserver for React Components

Details

Please refer to my article

Articles

There are some of my articles and released projects. Feel free to check if you like!

Day 45 of #100DaysOfCode: Python Web Crawler for Beginners: Parse Data from the Static Website

Jen-Hsuan Hsieh — Sun, 08 Nov 2020 13:36:16 +0000

Introduction

The web crawler is an efficient way to get the data if we don’t have REST APIs or libraries to retrieved data.

What we the most want to do with web crawlers is retrieving data in real-time. In a program of a web crawler, it usually sends a request to the target website as a flight company, EC website, or galleries of products. Then parse the response from the website and extract the information we expect.

We can present data in different ways as web pages, APIs, or an executable file. There are some cases I used web crawling to solve.

This article introduces the following topics.

Introduction
Implement a web crawler program for static websites

Details

Please refer to my article

Articles

There are some of my articles and released projects. Feel free to check if you like!