hongkheng

https://www.bram.us/2016/05/02/prevent-overscroll-bounce-in-ios-mobilesafari-pure-css/

hongkheng

import { useState, useEffect } from 'react'

export const useLocalStorage = (key, value = undefined) => {
  const [storeValue, setStoreValue] = useState(() => {
    // get value if exists in localStorage
    const item = window.localStorage.getItem(key)
    return item
  })

  useEffect(() => {

hongkheng

import { useState, useEffect } from 'react'

export const useLocalStorage = (key, value = undefined) => {
  const [storeValue, setStoreValue] = useState(() => {
    // get value if exists in localStorage
    const item = window.localStorage.getItem(key)
    return item
  })

  useEffect(() => {

hongkheng

To resolve errors from jest test such as:

Error: Not implemented: navigation (except hash changes)
 at module.exports (/Users/pyhk329d/workspace/sppower-projects/lighthouse-web/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)
at navigateFetch (/Users/pyhk329d/workspace/sppower-projects/lighthouse-web/node_modules/jsdom/lib/jsdom/living/window/navigation.js:77:3)
 at exports.navigate (/Users/pyhk329d/workspace/sppower-projects/lighthouse-web/node_modules/jsdom/lib/jsdom/living/window/navigation.js:55:3)
 at Timeout._onTimeout (/Users/pyhk329d/workspace/sppower-projects/lighthouse-web/node_modules/jsdom/lib/jsdom/living/nodes/HTMLHyperlinkElementUtils-impl.js:81:7)
at listOnTimeout (internal/timers.js:549:17)
 at processTimers (internal/timers.js:492:7) undefined

hongkheng

// HOC FactoryFactory method
function HOCFactoryFactory (...params) {
  console.log('params', params)
  return function HOCFactory (WrappedComponent) {
    return class withHOCFactory extends React.Component {
      render () {
        return <WrappedComponent {...this.props} />
      }
    }
  }

hongkheng

// Bind class methods that would be call externally by when executing `new Foo()`
// context to `this` for the current class context will be lost when assigning the method to another object 
// e.g

// Binding a method as an instance property
class Bar {
  constructor() {
    //this.bar = this.bar.bind(this); // <-- this line is required when obj reference is being passed around such that the context of `this` is lost
    this.counter = 0
  }

hongkheng

// Show how to setup and create a simple Jest manual mocks

// Beginning of the example... custom.test.js

// Assume your Custom ES module and import it
import Custom from './Custom';

// Has to be after it is imported, use the file path where the module is located
jest.mock('./Custom', () => {
  const mockMethod1= jest.fn()

hongkheng

System font methods

https://css-tricks.com/snippets/css/system-font-stack/

https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/

Method 1:

https://github.com/jonathantneal/system-font-css

hongkheng

// Variables consistency

var defaultZero int // always contain 0
var defaultEmpty string // always be ""
// https://play.golang.org/p/xD_6ghgB7wm

// struct types
/**
 Compiler does not do implicit type conversion for named type.
 For literal type, compiler does implicit type conversion, for type = literal type

hongkheng

/*
  This gist explains the several ways to define a React component
 */

// Functional components that has no life cycle methods tied to itself
// Using the function
function SimpleFunction(props) {
  // passing in the props that is given by React by default
  return (
    <div>