Frontend

A basic debounce 1 2 3 4 5 6 7 8 9 10 11 12 const _debounce = (fn, delay, immediate = false) => { let timer; return (...args) => { const callNow = immediate && !timer; clearTimeout(timer); timer = setTimeout(() => { timer = null; if (!immediate) fn(...args); }, delay); if (callNow) fn(...args); }; }; debounce with promise When debounce fires during mouse drag but the wrapped function calls an API and returns a Promise, you often want only the last call to run. Lodash’s debounce requires func to be a function: ...

A Basic debounce 1 2 3 4 5 6 7 8 9 10 11 12 const _debounce = (fn, delay, immediate = false) => { let timer; return (...args) => { const callNow = immediate && !timer; clearTimeout(timer); timer = setTimeout(() => { timer = null; if (!immediate) fn(...args); }, delay); if (callNow) fn(...args); }; }; debounce with promise If you trigger debounce while dragging the mouse, but the wrapped function calls an API and returns a Promise, you often want to run only the last invocation. How should debounce be written for that? ...

What Is WebAssembly? WebAssembly (Wasm) is a portable, compact, fast-loading binary format for the web. C, C++, Rust, Go, Java, C#, and other toolchains can compile to Wasm and ship it to the browser to complement JavaScript. Real-world uses include large games, Google Earth, Magnum, Blazor, and AutoCAD on the web — this post focuses on our AutoCAD case. Why WebAssembly? Mainly performance. JavaScript struggles with heavy CPU/memory work, drawing, and high concurrency. The platform has added pieces like SharedArrayBuffer, but limits remain. We used Emscripten and asm.js, later Binaryen, for roughly 12–15% overall speedup. ...

This is a webpack 4 frontend architecture series focused on building a frontend scaffold from scratch. It shows how to combine popular modern technologies—React, Redux, webpack 4, and related tooling. It also covers project essentials such as .gitignore, code formatting, per-environment configuration, hot reload, debugging setup, and similar topics. How React Interacts With Middleware Functional programming ideas Curried functions defer execution. Middleware built by repeated currying accumulates arguments; with compose, you get a pipeline-style data flow. Because of closures, after applyMiddleware finishes, every middleware sees the latest store. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 export default function applyMiddleware(...middlewares) { return (createStore) => (...args) => { const store = createStore(...args) let dispatch = store.dispatch let chain = [] const middlewareAPI = { getState: store.getState, dispatch: (...args) => dispatch(...args) } // Basically build an array of middleware runner functions and invoke each one chain = middlewares.map(middleware => middleware(middlewareAPI)) // Enhance dispatch by running it through the middleware chain // This example uses compose to run middleware in sequence dispatch = compose(...chain)(store.dispatch) return { ...store, dispatch } } } How it works Reading the source, applyMiddleware is essentially curry + compose to enhance dispatch. Quick review of curry and compose: ...

This is a webpack 4 frontend architecture series focused on building a frontend scaffold from scratch. It shows how to combine popular modern technologies—React, Redux, webpack 4, and related tooling. It also covers project essentials such as .gitignore, code formatting, per-environment configuration, hot reload, debugging setup, and similar topics. Webpack 4: Images and Fonts Code https://github.com/hyyfrank/webpack4 branch: feature/lesson7 Preparation What we need to do Support jpeg, jpg, gif, png, and similar formats ...