SEO !! + little bit meaningful first rendering
SSR is larger concept to react. If we take about SSR only, it need to compare with SPA not React.
While when using react to do the SSR. Very basic thought is like every route is SPA. How about write react only and make it become a SSR? Nextjs coming in.
make page alive
each route send full html and react and hydration function
This Blog explain fiber from fundamental of js.
React Fiber is the core of modern React rendering, enabling incremental rendering, time slicing, and high-performance updates. In this blog, we will explore:
A Fiber node is a unit of work in React’s incremental rendering. It contains:
“Concurrent Features” is a set of rendering capabilities introduced to make React apps more responsive. Instead of blocking the browser until all rendering is done, React can pause, resume, and even abandon a render in progress.
This allows React to:
The underlying mechanism is cooperative scheduling — React voluntarily yields control back to the browser when time is up, and continues work later.
Function run synchronously means code is running as same as your writing.
But in real situation, some code may need time to running (like fetch). If synchronously run all code, program will be block and wait this time consuming part finish and continue.
In the most of the time, You code logic need wait to continue but you don’t want to block all progress. Maybe UI rendering or some other total unrelated code. Unfortunately, JS is single thread langrage and concurrency is not exist. Therefore, you need some technique to some part running asynchronously,
Reference: https://www.30secondsofcode.org/js/s/get-scrollbar-width/
const getScrollbarWidth = () =>
window.innerWidth - document.documentElement.clientWidth;
getScrollbarWidth();const getScrollbarWidth = (el) => {
const leftBorder = parseInt(
getComputedStyle(el).getPropertyValue('border-left-width'),
10
);
const rightBorder = parseInt(
getComputedStyle(el).getPropertyValue('border-right-width'),
10
);
return el.offsetWidth - el.clientWidth - leftBorder - rightBorder;
};
getScrollbarWidth(el);el.getBoundingClientRect() will return: left, top, right, bottom, x, y, width, and height.
To make a generic type optional, you have to assign the void as the default value.
const fetchData = <T = void>(url: string): T => {
const res: T = fetch(url);
return res;
};https://garbagevalue.com/blog/optional-generic-typescript#quick-solutions-make-generic-type-optional
The main difference is that type [string, ...string[]] at least have one element. [] will alert error. string[] could be empty. [] is ok.
This is a test blog post written in Markdown. It demonstrates common features used in blog writing.
test
// Simple JavaScript function
function greet(name) {
return `Hello, ${name}!`;
}Clean formatting Blockquotes for every section Inline links like OpenAI Quoted links: 👉 Visit Example Site
https://fireship.io/lessons/ffmpeg-useful-techniques/
https://www.npmjs.com/package/fluent-ffmpeg
ffmpeg -f concat -i vids.txt -c copy out.mp4
vids.txt:
file 'name1.mov'
file 'name2.mov'
file 'name3.mov'ffmpeg -i in.mp4 out.mov
ffmpeg -i in.mp4 out.gif
It very common to reduce size of output file. Change scale usually the common and efficient way to do so.
const createDataBaseClass = (dbName: DBOption) => {
switch (dbName) {
case 'InMemo':
return InMemoryDataBase;
case 'SQL':
return SQL_DB;
// ...
// you can add anything else
default:
break;
}
};The Singleton Pattern limits the number of instances of a particular object to just one. This single instance is called the singleton.
export const createDataBase = <T extends BaseRecord>() => {
const db = new InMemoryDataBase<T>();
return db;
};
const pokemonDB = createDataBase<Pokemon>();
pokemonDB.set({
id: 'Bulbasaur',
attack: 59,
defense: 10,
});
console.log(pokemonDB.get('Bulbasaur'));const createDataBase2 = <T extends BaseRecord>() => {
class InMemoryDataBase2 implements DataBase<T> {
private db: Record<string, T> = {};
static instance: InMemoryDataBase2 = new InMemoryDataBase2();
private constructor() {} // private constructor is necessary
public set(newValue: T): void {
this.db[newValue.id] = newValue;
}
public get(id: string): T | undefined {
return this.db[id];
}
}
return InMemoryDataBase2;
};
const PokemonDB2 = createDataBase2<Pokemon>();
PokemonDB2.instance.set({
id: 'Bulbasaur',
attack: 59,
defense: 10,
});const createObserver = <EventType>(): ({
subscribe: (listener: listenerType<EventType>) => () => void, // take listener and return an unsubscribe function
publish: (event: EventType) => void,
}) => {
let listeners: listenerType<EventType>[] = [];
return {
subscribe: (listener: listenerType<EventType>): (() => void) => {
listeners.push(listener);
return () => {
listeners = listeners.filter((l) => l !== listener);
};
},
publish: (event: EventType) => {
listeners.forEach((l) => l(event));
},
};
};interface BeforeAddValueEvent<T> {
newValue: T;
value: T;
}
interface AfterAddValueEvent<T> {
value: T;
}
class InMemoryDBWithObserver<T extends BaseRecord> extends InMemoryDataBase<T> {
public set(newValue: T): void {
this.BeforeAddValueObserver.publish({
newValue,
value: this.db[newValue.id],
});
this.db[newValue.id] = newValue;
this.AfterAddValueObserver.publish({
value: newValue,
});
}
public get(id: string): T | undefined {
return this.db[id];
}
// observer
private BeforeAddValueObserver = createObserver<BeforeAddValueEvent<T>>();
private AfterAddValueObserver = createObserver<AfterAddValueEvent<T>>();
onBeforeAddValue(listener: listenerType<BeforeAddValueEvent<T>>): () => void {
return this.BeforeAddValueObserver.subscribe(listener);
}
onAfterAddValue(listener: listenerType<AfterAddValueEvent<T>>): () => void {
return this.AfterAddValueObserver.subscribe(listener);
}
// visiter pattern
visit(visitor: (item: T) => void): void {
Object.values(this.db).forEach(visitor);
}
// strategy pattern
getBest(strategy: (item: T) => number): T {
let findRes: { max: number; res: T | null } = {
max: -Infinity,
res: null,
};
return Object.values(this.db).reduce((prev, cur) => {
let score = strategy(cur);
if (prev.max < score) return { max: score, res: cur };
return prev;
}, findRes).res;
}
}
const pokemonDB = new InMemoryDBWithObserver<Pokemon>();
pokemonDB.onBeforeAddValue((event) => {
console.log('Before add value');
console.log(event);
});
const unsubscribe = pokemonDB.onAfterAddValue((event) => {
console.log('After ADD A Value');
console.log(event);
});
pokemonDB.onAfterAddValue((event) => {
console.log('-----------');
});
pokemonDB.set({
id: 'Bulbasaur',
attack: 59,
defense: 10,
});
pokemonDB.set({
id: 'Bulbasaur',
attack: 20,
defense: 30,
});
unsubscribe();
pokemonDB.set({
id: 'Spinpsaur',
attack: 159,
defense: 110,
});
console.log('Visit pattern:');
pokemonDB.visit((item) => console.log(item));
console.log('strategy pattern:');
console.log(pokemonDB.getBest((item) => item.defense));Class dbProxy () {
constructor() {
this.db = new DB();
this.dbCache = new Map();
}
get(key){
if(this.dbCache.has(key)) return dbCache.get(key);
const res = db.get(key);
dbCache.set(key, res);
return res;
}
}
let db = new dbProxy();
db.get('a');
db.get('a'); // cache
db.get('a'); // cache
const add = (
a: number | string,
b: number | string,
type?: 'number' | 'string'
): number | string => {
if (type === 'string') {
return a.toString() + b.toString();
} else return +a + +b;
};
console.log(add(1, 2));type Book = {
id: string;
name: string;
};
let books: Book[] = [];let test1: unknown;
let test2: string;
test1 = 'xyz'; // ok
// test2 = test1; // error
function f1(a: any) {
a.b(); // OK
}
function f2(a: unknown) {
a.b(); //error
// Object is of type 'unknown'.
}type listenerType<EventType> = (event: EventType) => void;type Primitive = bigint | boolean | null | number | string | symbol | undefined;
type PlainObject = Record<string, Primitive>;
const obj1: PlainObject = { a: 1 }; //✅
const obj2: PlainObject = { a: 1 }; //❌
const obj3: PlainObject = new myClass(); //❌
type Primitive = bigint | boolean | null | number | string | symbol | undefined;
type JSONValue = Primitive | JSONObject | JSONArray;
interface JSONObject {
[key: string]: JSONValue;
}
interface JSONArray extends Array<JSONValue> {}
const obj1: PlainObject = { a: 1 }; //✅
const obj2: PlainObject = { a: { b: { c: 3 } } }; //✅
const obj3: PlainObject = new myClass(); //❌
export const useFetchAPI = <T extends unknown>(
url: string,
method: 'POST' | 'GET',
body?: string | JSONObject
): [string, T | null] => {
const [fetchStatus, setFetchStatus] = useState('error');
const [fetchResult, setFetchResult] = useState<T | null>(null);
useEffect(() => {
const apiMockFetch: () => Promise<{
status: string;
requestId: string;
result: T | null;
}> = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(someData);
}, 1000);
});
};
const fetchData = async () => {
const { status, result } = await apiMockFetch();
setFetchStatus(status);
if (result !== undefined) {
setFetchResult(result);
}
};
if (fetchStatus !== 'success') fetchData();
}, [url, method, body, fetchStatus]);
return [fetchStatus, fetchResult];
};type Book = {
id: string;
name: string;
};
interface Book {
id: string;
name: string;
}