2020-08-14a minute read (About 120 words)

How to make dynamic font size for UIButton

Issue #671

A Boolean that indicates whether the object automatically updates its font when the device’s content size category changes.

If you set this property to YES, the element adjusts for a new content size category on a UIContentSizeCategoryDidChangeNotification.

button.titleLabel?.adjustsFontForContentSizeCategory = true
button.backgroundColor = UIColor.green
button.titleLabel?.font = UIFont.preferredFont(forTextStyle: .title1)

label.adjustsFontForContentSizeCategory = true
label.backgroundColor = UIColor.yellow
label.font = UIFont.preferredFont(forTextStyle: .title1)

However it seems view (UIButton or UILabel) size is the same, just the inner text increases in size. A workaround is to put view inside UIStackView so UIButton or UILabel can automatically changes size.

2020-08-06a few seconds read (About 92 words)

How to test for view disappear in navigation controller

Issue #670

To test for viewWillDisappear during UINavigationController popViewController in unit test, we need to simulate UIWindow so view appearance works.

final class PopTests: XCTestCase {
    func testPop() {
        let window = UIWindow(frame: UIScreen.main.bounds)
        let navigationController = UINavigationController()
        window.rootViewController = navigationController
        let viewController = DetailViewController()

        navigationController.viewControllers = [
            UIViewController(),
            viewController
        ]

        window.makeKeyAndVisible()
        let expectation = XCTestExpectation()
        navigationController.popViewController(animated: false)
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
            XCTAssertTrue(viewController.wasDismissed)
            expectation.fulfill()
        }
        wait(for: [expectation], timeout: 1)
    }
}

class DetailViewController: UIViewController {
        override func viewWillDisappear(_ animated: Bool) {
            super.viewWillDisappear(animated)
            if isMovingFromParent {
                wasDismissed = true
            }
        }
}

2020-06-17a minute read (About 128 words)

How to use useEffect in React hook

Issue #669

Specify params as array [year, id], not object {year, id}

const { year, id } = props
useEffect(() => {
        const loadData = async () => {
            try {
                
            } catch (error) {
                console.log(error)
            }
        }

        listenChats()
    }, [year, id])
}

Hooks effect

By default, it runs both after the first render and after every update.

This requirement is common enough that it is built into the useEffect Hook API. You can tell React to skip applying an effect if certain values haven’t changed between re-renders. To do so, pass an array as an optional second argument to useEffect:

1
2
3

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes

2020-06-162 minutes read (About 251 words)

How to sign in with apple for web with firebase

Issue #668

Authenticate Using Apple with JavaScript

Use Firebase JS SDK

https://firebase.google.com/docs/auth/web/apple

https://help.apple.com/developer-account/#/dev1c0e25352

Go to Certificates, Identifiers & Profiles -> Identifier create 2 ids: App ID and Service ID

For example: I have App ID com.onmyway133.myapp and Service ID com.onmyway133.myweb

Remember that to view App ID or Service ID, there’s dropdown menu on the right

For App ID, enable

Associated Domains
Sign In with Apple: Enable it as Primary App ID

For Service ID, use firebase callback url

https://myweb.firebaseapp.com/__/auth/handler

Associate domain

Add apple-app-site-association in public folder

{
  "applinks": {
      "details": [
           {
             "appIDs": ["T78DK947F2.com.onmyway133.myapp"],
             "components": [
               {
                  "#": "no_universal_links",
                  "exclude": true,
                  "comment": "Matches any URL whose fragment equals no_universal_links and instructs the system not to open it as a universal link"
               }
             ]
           }
       ]
   },
   "webcredentials": {
      "apps": [ "T78DK947F2.com.onmyway133.myweb" ]
   }
}

Private key

Go to Keys and create new auth key. Configure that key with the primary App ID above

Configure in Firebase

Go to Sign in providers and enable Apple sign in.

Fill in

Service ID identifier (com.onmyway133.myweb)
OAuth code flow configuration: fill in your team id, key id and key secret content.

2020-06-14a minute read (About 136 words)

How to use firebase cloud functions

Issue #667

Use node 10

Edit package.json

1
2
3

"engines": {
    "node": "10"
},

Secret key

Go to settings/serviceaccounts/adminsdk, download secret key in form of json and place it in lib/config.json

const serviceAccount = require('./config.json')

admin.initializeApp({
    credential: admin.credential.cert(serviceAccount),
    databaseURL: "https://my-app-4b968.firebaseio.com"
})

Local serve

This builds and spins up emulator to test

1	npm run serve

CORS

1	response.set('Access-Control-Allow-Origin', '*');

var cors = require('cors');

// my function
var helloFn = function helloFn(req, res) {
    res.status(200)
        .send('Hello, Functions\n');
};

// CORS and Cloud Functions export logic
exports.hello = function hello(req, res) {
    var corsFn = cors();
    corsFn(req, res, function() {
        helloFn(req, res);
    });
}

2020-06-14a few seconds read (About 48 words)

How to deploy with create react app

Issue #666

Direct url

200.html

https://stackoverflow.com/questions/44491184/react-router-does-not-work-in-production-and-surge-deployments

Support for client-side routing:

https://create-react-app.dev/docs/deployment/#netlify

1	/* /index.html 200

Serving the Same Build from Different Paths

1	"homepage": ".",

2020-06-13a few seconds read (About 49 words)

How to go back to home in React

Issue #665

Usually in header we have logo that takes user back to the home page

// index.js
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from 'react-router-dom'

<Router>
    <Switch>
        <Route exact path="/">
            <Home />
        </Route>
</Router>

// Header.js

import { useHistory } from 'react-router-dom'
const history = useHistory()

<a class="navbar-item" onClick={() => {
    history.push('/')
}}>

2020-06-13a few seconds read (About 46 words)

How to format date in certain timezone with momentjs

Issue #664

Use moment-timezone https://momentjs.com/timezone/docs/

npm install moment-timezone

// public/index.html
<script src="moment.js"></script>
<script src="moment-timezone-with-data.js"></script>

Need to import from moment-timezone, not moment

1
2
3

import moment from 'moment-timezone'

moment(startAt).tz('America/Los_Angeles').format('MMMM Do YYYY')

2020-06-12a few seconds read (About 111 words)

How to style video js

Issue #663

/** @jsx jsx */
import { css, jsx } from '@emotion/core'
import React from 'react';
import videojs from 'video.js'

export default class VideoPlayer extends React.Component {
    componentDidMount() {
        // instantiate Video.js
        this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
            console.log('onPlayerReady', this)
        });
    }

    // destroy player on unmount
    componentWillUnmount() {
        if (this.player) {
            this.player.dispose()
        }
    }

    // wrap the player in a div with a `data-vjs-player` attribute
    // so videojs won't create additional wrapper in the DOM
    // see https://github.com/videojs/video.js/pull/3856
    render() {
        return (
            <div>
                <div data-vjs-player css={css`
                    
                `}>
                    <video 
                        ref={node => this.videoNode = node} 
                        className="video-js vjs-big-play-centered" 
                        data-setup='{ "playbackRates": [0.5, 1, 1.5, 2] }'
                        css={css`
                        width: auto;
                        height: 400px;
                    `}>

                    </video>
                </div>
            </div>
        )
    }
}

2020-06-12a few seconds read (About 32 words)

How to use setState in React

Issue #662

Use spread operator

import React, { Component, useState, useEffect } from 'react';

const [state, setState] = useState({
        message: '',
        chats: [],
        sending: false
})

setState(prevState => ({ 
    ...prevState,
    message: '',
    sending: false
}))

2020-06-12a few seconds read (About 23 words)

How to handle evens in put with React

Issue #661

Use Bulma css

<input
    class="input is-rounded"
    type="text"
    placeholder="Say something"
    value={value}
    onChange={(e) => { onValueChange(e.target.value) }}
    onKeyDown={(e) => {
        if (e.key === 'Enter') {
            onSend(e)
        }
    }}
/>

2020-06-12a few seconds read (About 23 words)

How to handle events for input with React

Issue #661

Use Bulma css

<input
    class="input is-rounded"
    type="text"
    placeholder="Say something"
    value={value}
    onChange={(e) => { onValueChange(e.target.value) }}
    onKeyDown={(e) => {
        if (e.key === 'Enter') {
            onSend(e)
        }
    }}
/>

2020-06-10a few seconds read (About 27 words)

How to set text color for UIDatePicker

Issue #660

Apply tintColor does not seem to have effect.

1 2	datePicker.setValue(UIColor.label, forKeyPath: "textColor") datePicker.setValue(false, forKey: "highlightsToday")

2020-06-04a few seconds read (About 57 words)

How to auto scroll to top in react router 5

Issue #659

Use useLocation https://reacttraining.com/react-router/web/guides/scroll-restoration

import React, { useEffect } from 'react';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
    useLocation,
    withRouter
} from 'react-router-dom'

function _ScrollToTop(props) {
    const { pathname } = useLocation();

    useEffect(() => {
        window.scrollTo(0, 0);
    }, [pathname]);

    return props.children
}

const ScrollToTop = withRouter(_ScrollToTop)

function App() {
    return (
        <div>
            <Router>
                <ScrollToTop>
                    <Header />
                     <Content />
                    <Footer />
                </ScrollToTop>
            </Router>
        </div>
    )
}

2020-06-03a minute read (About 140 words)

How to use dynamic route in react router 5

Issue #658

Declare routes, use exact to match exact path as finding route is from top to bottom. For dynamic route, I find that we need to use render and pass the props manually.

Declare Router as the rooter with Header, Content and Footer. Inside Content there is the Switch, so header and footer stay the same across pages

import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from 'react-router-dom'

function Content() {
    return (
            <Switch>
                <Route exact path="/about">
                    <About />
                </Route>
                <Route exact path="/">
                    <Home />
                </Route>
                <Route path='/book/:id' render={(props) => {
                    return ( <BookDetail {...props } /> )
                }} />
                <Route>
                    <NotFound />
                </Route>
            </Switch>
    )
}

function App() {
    return (
        <div>
            <Router>
                <Header />
                <Content />
                <Footer />
            </Router>
        </div>
    )
}

To trigger route request, use useHistory hook. Note that we need to declare variable, and not use useHistory().push directly

import { useHistory } from 'react-router-dom'

const history = useHistory()

<a onClick={() => {
    history.push(`/book/${uuid}`)
}} >

To get parameters, use match

export default function BookDetail(props) {
    const [ state, setState ] = useState({
        book: null
    })

    const { match } = props
   // match.params.id
}

2020-06-01a few seconds read (About 65 words)

How to use folder as local npm package

Issue #657

Add library folder src/library

src
    library
        res.js
    screens
        Home
            index.js
package.json

Declare package.json in library folder

{
    "name": "library",
    "version": "0.0.1"
}

Declare library as dependency in root package.json

1
2
3

"dependencies": {
    "library": "file:src/library"
},

Now import like normal, for example in src/screens/Home/index.js

1	import res from 'library/res'

2020-05-222 minutes read (About 243 words)

How to make switch statement in SwiftUI

Issue #656

Lately I’ve been challenging myself to declare switch statement in SwiftUI, or in a more generalized way, execute any anonymous function that can return a View

Use Switch and Case views

Note that this approach does not work yet, as TupeView should support variadic number of contents, and also T.RawValue needs to conform to Equatable in order to check the cases.

Also in Switch statement, Content can’t be inferred

struct Case<T: RawRepresentable, Content: View>: View {
    let value: T
    let content: Content

    init(_ value: T, @ViewBuilder content: () -> Content) {
        self.value = value
        self.content = content()
    }

    var body: some View {
        content
    }
}

struct Switch<T: RawRepresentable, Content: View>: View {
    let value: T
    let cases: TupleView<Case<T, Content>>

    init(_ value: T, @ViewBuilder cases: () -> TupleView<Case<T, Content>>) {
        self.value = value
        self.cases = cases()
    }

    var body: some View {
        makeBody()
    }

    private func makeBody() -> some View {
        // TODO: Logic here
        cases
    }
}

struct UseSwitchStatement {
    let animal: Animal = .cat

    var body: some View {
        VStack {
            Switch(animal) {
                Case(Animal.cat) {
                    Text("cat")
                }
                Case(Animal.dog) {
                    Text("dog")
                }
                Case(Animal.mouse) {
                    Text("mouse")
                }
            }
        }
    }
}

Use MakeView

Another solution is to use a MakeView view, this is more generic as it can execute any functions

enum Animal: String {
    case cat
    case dog
    case mouse
}

struct MakeView: View {
    let make: () -> AnyView

    var body: some View {
        make()
    }
}

struct UseMakeView: View {
    let animal: Animal = .cat

    var body: some View {
        MakeView {
            switch self.animal {
            case .cat:
                return Text("cat").erase()
            case .dog:
                return Text("dog").erase()
            case .mouse:
                return Text("mouse").erase()
            }
        }
    }
}

2020-05-08a few seconds read (About 55 words)

How to update multiple state properties with React hooks

Issue #655

Declare state and setState

export default function Showcase(props) {
    const factory = props.factory
    const [state, setState] = useState(
        {
            factory,
            selectedFilter: { name: '' }
        }
    )

    const onFilterClick = (filter) => {
        setState({
            selectedFilter: filter,
            factory: factory.filter((app) => {
                return app.showcase.platforms.includes(filter.name)
            }) 
        })
    }

    let cards = state.factory.map((app, index) => {
        return (
            <Card app={app} key={app.slug} />
        )
    })

    return (
        <div>
            <FilterBar onClick={onFilterClick} />
            <div css={css`
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: flex-start;
                margin: 0 auto;
                padding: 0 8vw;
            `}>
                {cards}
            </div>
        </div>

    )
}

2020-05-07a few seconds read (About 96 words)

How to make white label React app

Issue #654

Use shelljs to execute shell commands, and fs to read and write. In public/index.html specify some placeholder and we will replace those in our script

const fs = require('fs');
const shell = require('shelljs')

let indexHtml = fs.readFileSync(publicIndexHtmlPath, 'utf8')
indexHtml = indexHtml
    .replace('CONSTANT_HTML_TITLE', `${app.name} - ${app.headline.title}`)
    .replace('CONSTANT_HTML_META_DESCRIPTION', app.headline.text)

fs.writeFileSync(publicIndexHtmlPath, indexHtml)

// build
shell.cd('projects/my_react_app')
shell.exec('npm run build')

// copy
shell.exec(`cp -a projects/my_react_app web_server/public`)

2020-05-0711 minutes read (About 1577 words)

How to make white label React app for landing pages

Issue #654

A good landing page is one of the most crucial part of a successful launch. Recently I started creating landing pages for my apps, I was lazy that I ended creating a white label React app as a landing template and then write a script to build multiple similar pages.

Here are a few examples, at first the pages share same look and feel, but we can add more configuration parameters later on. The cool thing with this approach is fixing bugs and adding features become easier, as they will all be deployed with the generator script.

Here are how it looks in my apps PastePal and PushHero, look at how the footer parts are so consistent.

Create a landing page in pure html and javascript

The first version that I built is with pure html and javascript. It has a lot of boilerplate and I need to deal with Webpack eventually to obfuscate my code.

const cards = Array.from(apps).map((app) => {
    const a = document.createElement('a')
    container.appendChild(a)

    const card = document.createElement('div')
    card.className = 'card'
    a.appendChild(card)

    // top
    const imageContainer = document.createElement('div')
    imageContainer.className = 'image-container'
    card.appendChild(imageContainer)
    if (app.background !== undefined) {
        imageContainer.style.backgroundColor = app.background
    } else {
        imageContainer.style.backgroundColor = 'rgba(200, 200, 200, 1.0)'
    }

    const image = document.createElement('img')
    image.src = `../${app.slug}/icon.png`
    imageContainer.appendChild(image)

Since they are in pure html and javascript, everyone can just open browser and view source code, which is not ideal, so I need to fiddle with Webpack and other uglify and minimize tools to obfuscate the code, like How to use webpack to bundle html css js

npm init
npm install webpack webpack-cli --save-dev
npm install babel-minify-webpack-plugin --save-dev
npm install html-webpack-plugin --save-dev

const MinifyPlugin = require('babel-minify-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: "./index.js",
    mode: 'production',
    output: {
        filename: "./index.js"
    },
    plugins: [
        new MinifyPlugin(),
        new HtmlWebpackPlugin({
            template: 'index.html',
            filename: 'index.html',
            minify: {
                collapseWhitespace: true
            }
        })
    ]
}

And with external css sheets, finding and renaming class list names take some time.

Create a landing page in React

I use create-react-app to generate my React app as it sets up JSX, Babel, Webpack, hot reloading and development server for me.

Inline css

I like js, css and html be part of the same component file, so I prefer inline css. I tried styled-components before but then I found emotion to be much easier to use and close to css. I also don’t like declaring unnecessary local variables style in styled-components.

Here is a good comparison between the 2 styled-components-vs-emotion

// styled-components
// CSS syntax in tagged template literal
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`
render(<Title>Hiya!</Title>)

// Object syntax
const button = styled.button({
  fontSize: '1.5em',
  textAlign: 'center',
  color: 'palevioletred'
});

// emotion
// CSS syntax in tagged template literal
render(
  <h1
    className={css`
      font-size: 1.5em;
      text-align: center;
      color: palevioletred;
    `}
  >
    Hiya!
  </h1>
)

// Object syntax
const titleStyles = css({
  fontSize: '1.5em',
  textAlign: 'center',
  color: 'palevioletred'
})

render(<h1 className={titleStyles}>Hiya!</h1>)

Use emotion for inline css

I detail here How to use emotion for inline css in React

Emotion has core and styled styles. I usually use the css inline syntax, so I can just install the core

1	npm i @emotion/core

Note that we have to declare jsx directive at the top of every file.

// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement
/** @jsx jsx */
import { css, jsx } from '@emotion/core'

const color = 'white'

render(
  <div
    css={css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
      border-radius: 4px;
      &:hover {
        color: ${color};
      }
    `}
  >
    Hover to change color.
  </div>
)

One cool thing with inline css is they are just javascript code so it’s pretty easy to apply logic code, like in How to conditionally apply css in emotion js

const shadowCss = feature.shadow ? css`
        border-radius: 5px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    ` : css``

Components based

When a component gets too big, I extract it to small components, in the end I have a bunch of them

import Footer from './components/Footer'
import Download from './components/Download'
import ProductHunt from './components/ProductHunt'
import Header from './components/Header'
import Headline from './components/Headline'
import Features from './components/Features

and I stack them vertically, using flexbox and css grid

Responsiveness with flexbox and css grid

I used flexbox mostly at first, but then I gradually convert some of them to css grid when I see fit. To stack vertically with flexbox, I use flex-direction

1 2	display: flex; flex-direction: column

where as in css grid items are stacked vertically by default, if we want multiple columns, specify grid-template-columns

1 2	display: grid; grid-template-columns: 1fr 1fr;

I use flex-wrap: wrap in some places to wrap content, but in some places I see specifying media query and changing columns in css grid is more easier and predictable

display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 8vw;
align-items: center;

@media (max-width: 500px) {
    grid-template-columns: 1fr; 
}

Audit with Lighthouse

Google Lighthouse is the most popular tool to audit website for performance and SEO. I use it to reduce image size, add correct html attributes and make it more SEO friendly.

Prepare a list of app

I have my list of apps in 1 javascript file, called factory.js, for example here with PastePal

const factory = [
    {
        name: 'PastePal',
        slug: 'pastepal',
        header: {
            background: '#5488E5'
        },
        headline: {
            title: 'Your next favorite pasteboard manager',
            text: 'Never miss what you just type. PastePal is a native Mac application that manages your pasteboard history with a variety of file types support like text and images. It also comes with a nifty note and shortcut manager.',
            image: 'banner.png',
        },

In my package.json for my landing page, I declare a property called currentApp. This is to specify which app I’m currently work on. Later in the generator script, we can just update this for every app that we build.

{
  "name": "landing",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "currentApp": "pastepal",

Here is how to read that value from my landing app

import factory from './apps/factory'
import pkg from '../package.json'

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }

    componentWillMount() {
        let key = pkg.currentApp
        if (key === undefined) {
            key = 'pastepal'
        }

        const app = factory.filter((app) => { return app.slug === key })[0]
        this.setState(app)
    }

    render() {
        return (
            <div>
                <Page app={this.state} />
            </div>
        )
    }
}

Deployment

One thing with create-react-app is that built assets are relative to the root, not your index.html

npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main..js are served with the contents of the /static/js/main..js file. For more information see the production build section.

If you are not using the HTML5 pushState history API or not using client-side routing at all, it is unnecessary to specify the URL from which your app will be served. Instead, you can put this in your package.json:

1	"homepage": ".",

This will make sure that all the asset paths are relative to index.html. You will then be able to move your app from http://mywebsite.com to http://mywebsite.com/relativepath or even http://mywebsite.com/relative/path without having to rebuild it.

Build a generator script to generate many landing pages

I make another nodejs project called generator, it will use my landing project as template, changes a few parameters and build each app defined in factory.js.

My factory use export default syntax, so I need to use Babel in my node app to import that, see How to use babel 7 in node project

npm init generator
npm install @babel/core
npm install @babel/cli
npm install @babel/preset-env

1
2
3

{
  "presets": ["@babel/preset-env"]
}

Update currentApp

I use sync methods of fs to not have to deal with asynchrony.

const pkPath = `/Users/khoa/projects/anding/package.json`
const json = JSON.parse(fs.readFileSync(pkPath, 'utf8'))
json.currentApp = app.slug
fs.writeFileSync(pkPath, JSON.stringify(json, null, 2))

Execute shell command

I use shelljs to execute shell commands, and fs to read and write. In public/index.html specify some placeholder and we will replace those in our script.

In landing app, the public/index.html acts as the shell when building the app, so I have a few placeholder called CONSTANTS, these will be replaced at generation time in my node app.

const fs = require('fs');
const shell = require('shelljs')

let indexHtml = fs.readFileSync(publicIndexHtmlPath, 'utf8')
indexHtml = indexHtml
    .replace('CONSTANT_HTML_TITLE', `${app.name} - ${app.headline.title}`)
    .replace('CONSTANT_HTML_META_DESCRIPTION', app.headline.text)

fs.writeFileSync(publicIndexHtmlPath, indexHtml)

// build
shell.cd('projects/my_react_app')
shell.exec('npm run build')

// copy
shell.exec(`cp -a projects/my_react_app web_server/public`)

2020-05-07a few seconds read (About 77 words)

How to show lightbox in React

Issue #653

Use https://github.com/biati-digital/glightbox

Configure css. Specify class='glightbox for html elements

1	<link rel="stylesheet" href="css/blueimp-gallery.min.css" />

Install package

1 2	npm install glightbox import GLightbox from 'glightbox'

const lbElements = features.map((feature) => {
    return {
        'href': require(`../apps/${app.slug}/${feature.image}`),
        'type': 'image',
        'title': feature.title,
        'description': feature.texts[0],
    }
})

const openLb = () => {
    const lightbox = GLightbox({
        touchNavigation: true,
        loop: true,
        autoplayVideos: true,
        onOpen: () => {},
        beforeSlideLoad: (slide, data) => {}
    });
    
    const myGallery = GLightbox({
        elements: lbElements,
        autoplayVideos: false,
    });
    myGallery.open()
}}

2020-05-07a few seconds read (About 29 words)

How to animate on scroll in React

Issue #652

Use https://github.com/michalsnik/aos

Add link to head

1
2
3

<head>
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>

Jus before closing body tag

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
    AOS.init();
</script>

Specify data-aos

1
2
3

<div data-aos="fade-up">

</div>

2020-05-07a few seconds read (About 66 words)

How to copy folder in nodej

Issue #651

Use shelljs

1	npm install shelljs

1 2	const shell = require('shelljs') shell.exec(`cp -a source_path/. destination_path`)

The -a option is an improved recursive option, that preserve all file attributes, and also preserve symlinks.

The . at end of the source path is a specific cp syntax that allow to copy all files and folders, included hidden ones.

2020-05-07a few seconds read (About 74 words)

How to use babel 7 in node project

Issue #650

Install

1
2
3

npm install @babel/core
npm install @babel/cli
npm install @babel/preset-env

Configure .babelrc

1
2
3

{
  "presets": ["@babel/preset-env"]
}

In package.json, transpile using npx babel then node dist/index.js

1	"start": "cp ../landing/src/apps/factory.js copied/factory.js && npx babel index.js --out-file dist/index.js && npx babel copied/factory.js --out-file dist/factory.js && node dist/index.js"

2020-05-06a few seconds read (About 34 words)

How to conditionally apply css in emotion js

Issue #649

Check flag then define css

const Picture = (feature) => {
    const shadowCss = feature.shadow ? css`
        border-radius: 5px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    ` : css``

    return (
        <div css={css`
            width: 40vw;
            @media (max-width: 420px) {
                width: 98vw;
            }
        `}>
            <div css={shadowCss}>
                <img css={css`
                max-width: 100%;
                height: auto;
            `}
                    src={require(`../apps/${feature.image}`)}
                />
            </div>
        </div>
    )
}

2020-05-06a few seconds read (About 38 words)

How to scroll to element in React

Issue #648

In a similar fashion to plain old javascript, note that href needs to have valid hash tag, like #features

<a
    href='#features'
    onClick={() => {
        const options = {
            behavior: 'smooth'
        }
        document.getElementById('features-section').scrollIntoView(options)
    }}
>
    Features
</a>

2020-05-02a few seconds read (About 94 words)

How to use emotion for inline css in React

Issue #647

emotion can be used in framework agnostic or with React. To use with React, follow https://emotion.sh/docs/introduction#react

1	npm i @emotion/core

Note that you must have /** @jsx jsx */ at the top of the file, and the unused jsx in import is a directive for JSX to work properly

// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement
/** @jsx jsx */
import { css, jsx } from '@emotion/core'

const color = 'white'

render(
  <div
    css={css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
      border-radius: 4px;
      &:hover {
        color: ${color};
      }
    `}
  >
    Hover to change color.
  </div>
)

2020-04-29a few seconds read (About 81 words)

How to test DispatchQueue in Swift

Issue #646

Sync the DispatchQueue

Pass DispatchQueue and call queue.sync to sync all async works before asserting

Use mock

Use DispatchQueueType and in mock, call the work immediately

import Foundation

public protocol DispatchQueueType {
    func async(execute work: @escaping @convention(block) () -> Void)
}

extension DispatchQueue: DispatchQueueType {
    public func async(execute work: @escaping @convention(block) () -> Void) {
        async(group: nil, qos: .unspecified, flags: [], execute: work)
    }
}

final class MockDispatchQueue: DispatchQueueType {
    func async(execute work: @escaping @convention(block) () -> Void) {
        work()
    }
}

2020-04-28a minute read (About 142 words)

How to use webpack to bundle html css js

Issue #645

Install webpack

1
2
3

npm init
npm install webpack webpack-cli --save-dev
vim webpack.config.js

module.exports = {
    entry: "./index.js",
    mode: 'production',
    output: {
        filename: "./index.js"
    }
}

To invoke webpack, run below. Your output is dist/index.js

1	npx webpack

Minify js

1	npm install babel-minify-webpack-plugin --save-dev

Minify html

1	npm install html-webpack-plugin --save-dev

const MinifyPlugin = require('babel-minify-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: "./index.js",
    mode: 'production',
    output: {
        filename: "./index.js"
    },
    plugins: [
        new MinifyPlugin(),
        new HtmlWebpackPlugin({
            template: 'index.html',
            filename: 'index.html',
            minify: {
                collapseWhitespace: true
            }
        })
    ]
}

Minify css

TBD

Copy files

Copy files from dist to public folder so we can use

1	npm install copyfiles -g

Then in package.json

1
2
3

"scripts": {
    "copy": "copyfiles -u 1 dist/* ../apps/ && copyfiles *.css ../apps"
}

Then run npm run copy

2020-04-28a few seconds read (About 54 words)

How to assert asynchronously in XCTest

Issue #644

import XCTest

extension XCTestCase {
    /// Asynchronously assertion
    func XCTAssertWait(
        timeout: TimeInterval = 1,
        _ expression: @escaping () -> Void,
        _: String = "",
        file _: StaticString = #file,
        line _: UInt = #line
    ) {
        let expectation = self.expectation(description: #function)
        DispatchQueue.main.asyncAfter(deadline: .now() + timeout) {
            expression()
            expectation.fulfill()
        }

        let waiter = XCTWaiter()
        XCTAssertTrue(waiter.wait(for: [expectation], timeout: timeout + 1) == .completed)
    }
}