Alex MacArthur: The advantages of Web Workers are many, but things really clicked for me when it came to the several DOM event listeners in any given application. These all necessarily live on the browser’s main thread, and if that thread is congested by a long-running process, the responsiveness of those listeners begins to suffer, […]
Tag Archives: javascript
How to add Dark Mode to a JavaScript App (React / Angular / Vue / etc)
In this post I’ll cover how to add Dark Mode to a JavaScript App. All major frameworks (React, Angular, Vue, etc.) are covered!
ESNext: Relatively format time with Intl.RelativeTimeFormat
An ECMAScript Language Feature that just moved to Stage-4, and thus will be part of ES2020, is Intl.RelativeTimeFormat. It’s a way to format time in a relative manner – such as “10 minutes ago” or “in 3 quarters” – while also keeping a language into account. Stage-4? 💁♂️ The TC39 Committee has a 4 stage […]
mermaid – Generation of diagram and flowchart from text in a similar manner as markdown
Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs. The code for the sequence diagram at the top is this: sequenceDiagram Alice ->> Bob: Hello Bob, how are you? Bob–>>John: How about you John? Bob–x Alice: I am good thanks! Bob-x John: I am good thanks! Note right of John: […]
Use a Github repository branch or commit as a dependency in package.json
Recently I needed to test a branch of a forked GitHub repository inside a project. Instead of cloning the fork and symlinking the package locally, I installed the remote dependency directly into the project. To achieve I used the following command: Using NPM: npm install user/repo.git#branchname Using Yarn: yarn add ssh://[email protected]:user/repo.git#branchname 💡 If you’re targeting […]
Blocks UI – A JSX-based page builder
A JSX-based page builder for creating beautiful websites without writing code. Blocks comes with built-in components that are carefully designed and implemented with Theme UI. Blocks UI →
react-native-v8 – Opt-in V8 runtime for React Native Android
The aim of this project is to support V8 runtime for React Native. Designed as opt-in package, it should easy to integrate with existing React Native projects. After installing it, you’ll need to adjust your build.gradle files so that it includes the new runtime — a/android/app/build.gradle +++ b/android/app/build.gradle @@ -161,11 +161,18 @@ android { } […]
How to Implement Redux in 24 Lines of JavaScript
90% convention, 10% library In this post Yazeed Bzadough walks you through creating your own Redux implementation. // simplified createStore function const createStore = (yourReducer) => { let listeners = []; let currentState = yourReducer(undefined, {}); return { getState: () => currentState, dispatch: (action) => { currentState = yourReducer(currentState, action); listeners.forEach((listener) => { listener(); }); […]
glcheck – A testing framework for WebGL
glcheck is a WebGL-focused testing framework. It runs unit and render tests using puppeteer which allows it to run automated tests and generate coverage reports for both WebGL 1 and 2 applications. glcheck (GitHub) →
Passing Elements as Props in React
I like this nuanced post by David Barral in which he goes over all the options on how to configure a Confirm component: what exactly do you pass in as props. In this story we are going to see a simple technique that allows you to write friendly customizable components with simple APIs, just by […]