a minute read (About 128 words)

How to use useEffect in React hook

Issue #669

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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
2 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

Configure Sign in with Apple for the web

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

Screenshot 2020-06-16 at 09 20 34

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

Screenshot 2020-06-16 at 09 21 20

For App ID, enable

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

For Service ID, use firebase callback url

Associate domain

Add apple-app-site-association in public folder

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "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

Screenshot 2020-06-16 at 09 24 05

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.
Screenshot 2020-06-16 at 09 25 23
a 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

1
2
3
4
5
6
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', '*');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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);
    });
}
a 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// index.js
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from 'react-router-dom'

<Router>
    <Switch>
        <Route exact path="/">
            <Home />
        </Route>
</Router>
1
2
3
4
5
6
7
8
// Header.js

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

<a class="navbar-item" onClick={() => {
    history.push('/')
}}>
a few seconds read (About 111 words)

How to style video js

Issue #663

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
/** @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>
        )
    }
}
a few seconds read (About 32 words)

How to use setState in React

Issue #662

Use spread operator

1
2
3
4
5
6
7
8
9
10
11
12
13
import React, { Component, useState, useEffect } from 'react';

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

setState(prevState => ({ 
    ...prevState,
    message: '',
    sending: false
}))
a few seconds read (About 23 words)

How to handle events for input with React

Issue #661

Use Bulma css

1
2
3
4
5
6
7
8
9
10
11
12
<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)
        }
    }}
/>
a few seconds read (About 23 words)

How to handle evens in put with React

Issue #661

Use Bulma css

1
2
3
4
5
6
7
8
9
10
11
12
<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)
        }
    }}
/>
a 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")
a 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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>
    )
}
a 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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

1
2
3
4
5
6
7
import { useHistory } from 'react-router-dom'

const history = useHistory()

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

To get parameters, use match

1
2
3
4
5
6
7
8
export default function BookDetail(props) {
    const [ state, setState ] = useState({
        book: null
    })

    const { match } = props
   // match.params.id
}
a few seconds read (About 65 words)

How to use folder as local npm package

Issue #657

Add library folder src/library

1
2
3
4
5
6
7
src
    library
        res.js
    screens
        Home
            index.js
package.json

Declare package.json in library folder

1
2
3
4
{
    "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'
2 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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()
            }
        }
    }
}
a few seconds read (About 55 words)

How to update multiple state properties with React hooks

Issue #655

Declare state and setState

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
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>

    )
}
11 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.

Screenshot 2020-05-14 at 05 47 28 Screenshot 2020-05-14 at 05 48 01 Screenshot 2020-05-14 at 05 47 45

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 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'
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 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

1
2
3
4
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

1
2
3
4
5
6
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

1
2
3
4
5
6
7
8
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

1
2
3
4
5
6
7
8
9
10
11
12
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.

1
2
3
4
5
6
{
  "name": "landing",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "currentApp": "pastepal",

Here is how to read that value from my landing app

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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

1
2
3
4
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.

1
2
3
4
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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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`)
a 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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`)
a 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'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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()
}}
a 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

1
2
3
4
<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>
a 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.

a 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"
a few seconds read (About 34 words)

How to conditionally apply css in emotion js

Issue #649

Check flag then define css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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>
    )
}
a 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

1
2
3
4
5
6
7
8
9
10
11
<a
    href='#features'
    onClick={() => {
        const options = {
            behavior: 'smooth'
        }
        document.getElementById('features-section').scrollIntoView(options)
    }}
>
    Features
</a>
a 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 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>
)
a 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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()
    }
}
a 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
1
2
3
4
5
6
7
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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

a few seconds read (About 54 words)

How to assert asynchronously in XCTest

Issue #644

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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)
    }
}
a minute read (About 195 words)

How to make simple filter menu in css

Issue #643

Use material icons

1
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
div#filter-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10%;
    height: 60px;
}

div#filter-items {
    display: inline-flex;
    
    background-color: #fff;
    box-shadow: 0 0 1px 0 rgba(52, 46, 173, 0.25), 0 15px 30px 0 rgba(52, 46, 173, 0.1);
    border-radius: 12px;
    overflow: hidden;
    padding: 10px;
}

a.filter-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100px;
    text-decoration: none;
    padding: 10px;
}

a.filter-item:hover {
    background-color: rgb(239, 240, 241);
    border-radius: 10px;
}

a.filter-item:active {
    transform: scale(0.9);
}

a.filter-item.selected {
    background-color: rgb(239, 240, 241);
    border-radius: 10px;
}

span.material-icons {
	font-family: "Material Icons";
	display: block;
	margin-bottom: 4px;
	font-size: 26px;
	color: mix(#fff, #342ead, 60%);
	transition: 0.25s ease;
}

span.name {
	display: block;
	font-size: 13px;
	color: mix(#fff, #342ead, 70%);
    transition: 0.25s ease;
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
filters.forEach((filter) => {
    const item = document.createElement('a')
    item.href = '#'
    item.className = 'filter-item'
    container.appendChild(item)

    const icon = document.createElement('span')
    icon.className = 'material-icons'
    icon.innerText = filter.icon
    item.appendChild(icon)

    const name = document.createElement('span')
    name.className = 'name'
    name.innerText = filter.name
    item.appendChild(name)

    item.onclick = () => {
        handleFilterClick(item, filter)
    }
})
a few seconds read (About 79 words)

How to make simple grid gallery in css

Issue #642

Specify container with flex-wrap and justify-content, and item with float: left

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
div.cards {
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 10%;
}

div.card {
  overflow: hidden;
  float: left;
  width: 220px;
  color: #232330;
  text-align: center;
  border-radius: 10px;
  border-color: silver;
  box-shadow: 1px 8px 8px rgba(10, 10, 10, 0.2);
  font-family: 'Open Sans', sans-serif;
  margin: 16px;
  transition: all .2s ease-in-out;
}

div.card:hover {
  transform: scale(1.2);
}
Follow

Links

Recent

Archives

Tags

algorithm1
android34
apple script3
catalyst1
ci3
cloud2
cocoapods4
combine5
core data2
csharp1
css5
dart4
database2
design2
electron4
firebase7
flutter4
git3
github5
go2
google1
iOS158
javascript47
kotlin25
layout4
life10
links9
macOS97
machine learning2
maps4
networking1
node11
objc2
react21
react native14
realm1
rx3
script2
spm5
swift271
swiftUI50
tech15
terminal9
testing14
tool1
unity1
voip4
watchOS11
web5
work1
wwdc1
xcode23

Subscribe to Updates

You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.
×