Eddy Chang eyesofkids

layout	author	title	revision	version	description
default	mattmc3	Modern SQL Style Guide	2019-01-17	1.0.1	A guide to writing clean, clear, and consistent SQL.

Modern SQL Style Guide

How to create an HTTPS certificate for localhost domains

This focuses on generating the certificates for loading local virtual hosts hosted on your computer, for development only.

Do not use self-signed certificates in production ! For online certificates, use Let's Encrypt instead (tutorial).

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

Don't like Next? Here's how to do the same in Gatsby.

MySQL Backup for macOS

This shell script creates daily backups of all MySQL databases on macOS. Currently the script uses [email protected], installed by homebrew.

Daily backups are kept for a week.
Weekly backups are kept for a month.
Monthly backups are kept for a year.

Setup

Findings: React is by far the most popular front-end framework/library (and continues to grow faster). In addition, React is more loved and "wanted" than other front-end frameworks (although it is more used: satisfaction tends to decrease with popularity).

Charts are from different sources and thus colors are inconsistent, please carefully read the chart's legends.

Like this? Check React Native vs Flutter: https://gist.github.com/tkrotoff/93f5278a4e8df7e5f6928eff98684979

Stack Overflow trends

https://insights.stackoverflow.com/trends?tags=reactjs%2Cvue.js%2Cangular%2Csvelte%2Cangularjs

React recently introduced an experimental profiler API. This page gives instructions on how to use this API in a production release of your app.

Table of Contents

Profiling in production
- Create React App
- Webpack 4

Profiling in production

React DOM automatically supports profiling in development mode for v16.5+, but since profiling adds some small additional overhead it is opt-in for production mode. This gist explains how to opt-in.

標題

<有關你的API呼叫的附加資訊。試著使用符合要求(request)類型(獲取 vs 更動)與多數(單數vs複數)的動詞.>

URL

<URL的結構(只需要用路徑，不需要root url)>
Method(方法):

	import type { NextApiRequest, NextApiResponse } from "next";

	type HttpMethod = "GET" \| "POST" \| "PUT" \| "DELETE";

	export const CrudRouteHandler = async <T>(
	request: NextApiRequest,
	response: NextApiResponse,
	service: ICrudService<T>
	) => {
	const id = request.query.id as string;

	export interface ICrudService<T> {
	getAll: () => Promise<T[]>;
	getOne: (id: string) => Promise<T \| null>;
	create: (data: T) => Promise<T>;
	update: (id: string, data: T) => Promise<T>;
	delete: (id: string) => Promise<T>;
	}

	import { useState } from 'react'
	import TWZipCode from './TWZipCode'

	function Demo() {
	const [data, setData] = useState({
	country: '高雄市',
	township: '鳳山區',
	postcode: '830',
	})