javascript

Issue #914 Use react-markdown to parse markdown content, react-syntax-highlighter to highlight code, and rehype-raw to parse raw html import ReactMarkdown from "react-markdown" import { Prism as SyntaxHighlighter } from "react-syntax-highlighter" import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism" import rehypeRaw from "rehype-raw" type Props = { content: string } export default (props: Props) => { return ( <div className="markdown-body"> <ReactMarkdown children={props.content} rehypePlugins={[rehypeRaw]} components={{ code({ node, inline, className, children, ...props }) { const match = /language-(\w+)/....

Issue #751 Declare data/package.json to make it into node module { "name": "data", "version": "0.1.0", "private": true, "homepage": ".", "main": "main.js" } Then in landing/package.json, use file { "name": "landing", "version": "0.1.0", "private": true, "homepage": ".", "dependencies": { "@emotion/core": "^10.0.28", "react": "^16.13.1", "react-dom": "^16.13.1", "react-image": "^2.4.0", "react-scripts": "3.4.1", "data": "file:../data" },

Issue #705 Supposed we have date in format ISO8601 and we want to get rid of T and millisecond and timezone Z const date = new Date() date.toDateString() // "Sat Dec 05 2020" date.toString() // "Sat Dec 05 2020 06:58:19 GMT+0100 (Central European Standard Time)" date.toISOString() // "2020-12-05T05:58:19.081Z" We can use toISOString, then split base on the dot . then remove character T date .toISOString() .split('.')[0] .replace('T', ' ')

Issue #699 Use term ZStack like in SwiftUI, we declare container as relative position. For now it uses only 2 items from props.children but can be tweaked to support mutiple class App extends React.Component { render() { return ( <ZStack> <Header /> <div css={css` padding-top: 50px; `}> <Showcase factory={factory} /> <Footer /> </div> </ZStack> ) } } /** @jsx jsx */ import React from 'react'; import { css, jsx } from '@emotion/core' export default function ZStack(props) { return ( <div css={css` position: relative; border: 1px solid red; `}> <div css={css` position: absolute; top: 0; left: 0; width: 100%; z-index: -1; `}> {props....

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 https://reactjs.org/docs/hooks-effect.html https://reactjs.org/docs/hooks-reference.html#useeffect 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....

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 import moment from 'moment-timezone' moment(startAt).tz('America/Los_Angeles').format('MMMM Do YYYY')

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) } }} />

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) } }} /> Updated at 2020-06-16 07:30:52

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> ) } Updated at 2020-06-04 05:58:47

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 {....

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 "dependencies": { "library": "file:src/library" }, Now import like normal, for example in src/screens/Home/index.js import res from 'library/res'

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> Updated at 2020-05-06 08:36:21

Issue #643 Use material icons <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 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....

Issue #641 Create a new page hexo new page mydemo Remove index.md and create index.html, you can reference external css and js in this index.html. Hexo has hexo new page mydemo --slug but it does not support page hierarchy Specify no layout so it is independent page. --- layout: false ---

Issue #640 async function useCache( collectionName: string, key: string, response: functions.Response<any>, fetch: () => Promise<any> ): Promise<any> { const existing = await db.collection(collectionName).doc(key).get() if (existing.exists) { response.send(existing.data()) return } const object = await fetch() const json = Object.assign({}, object) await db.collection(collectionName).doc(key).set(json) response.send(object) } useCache( "books", key, response, async () => { const service = new Service() return await service.doSomething(key) } )

Issue #552 type Components = { day: number, month: number, year: number } export default class DateFormatter { // 2018-11-11T00:00:00 static ISOStringWithoutTimeZone = (date: Date): string => { const components = DateFormatter.format(DateFormatter.components(date)) return `${components.year}-${components.month}-${components.day}T00:00:00` } static format = (components: Components) => { return { day: `${components.day}`.padStart(2, '0'), month: `${components.month}`.padStart(2, '0'), year: components.year } } static components = (date: Date): Components => { return { day: date.getDate(), month: date.getMonth() + 1, year: date....

Issue #492 Suppose we have a base Localizable.strings "open" = "Open"; "closed" = "Closed"; After sending that file for translations, we get translated versions. "open" = "Åpen"; "closed" = "Stengt"; Searching and copy pasting these to our Localizable.strings is tedious and time consuming. We can write a script to apply that. Remember that we need to be aware of smart and dump quotes .replace(/\"/g, '') .replace(/\"/g, '') const fs = require('fs') const originalFile = 'MyApp/Resources/nb....

Issue #476 React Native comes with a default React library, and most CocoaPods libraries for React Native has React as a dependency pod, which causes the conflict https://github.com/react-native-community/react-native-svg/issues/621 https://stackoverflow.com/questions/45296994/difference-between-react-native-link-and-cocoapods https://github.com/onmyway133/notes/issues/486 https://github.com/facebook/react-native/pull/23563

Issue #430 Use electron builder npm install electron-builder@latest --save-dev Prefer electron-builder over electron-packager Configuration https://www.electron.build/configuration/configuration package.json { "name": "icon_generator", "version": "1.3.0", "description": "A macOS app to generate app icons", "main": "babel/main.js", "repository": "https://github.com/onmyway133/IconGenerator", "author": "Khoa Pham", "license": "MIT", "scripts": { "start": "npm run babel && electron .", "babel": "babel ./src --out-dir ./babel --copy-files", "dist": "npm run babel && electron-builder" }, "build": { "appId": "com.onmyway133.IconGenerator", "buildVersion": "20", "productName": "Icon Generator", "icon": "....

Issue #423 In DNS settings Add 4 A records A @ 185.199.110.153 A @ 185.199.111.153 A @ 185.199.108.153 A @ 185.199.109.153 and 1 CNAME record CNAME www learntalks.github.io In GitHub Select custom domain and type learntalks.com In source public/CNAME learntalks.com