The unseen performance costs of modern CSS-in-JS libraries in React apps

Aggelos Arvanitakis, writing for the Web Performance Calendar 2019 edition: Besides some of the great advantages CSS-in-JS boasts over traditional CSS, it may still create performance issues in certain apps. In this article, I will attempt to demystify the high-level strategies of the most popular CSS-in-JS libraries, discuss the performance issues they may introduce on […]

The State of JavaScript 2019

Last week the State of JavaScript 2019 got released, showing the results of a survey taken amongst some 20K JavaScript Devevelopers, asking them about their favorite JavaScript features, front-end frameworks and back-end frameworks. Although the group of participants is quite limited (both in numbers and locations), they’re all fond of React and Vue, TypeScript, Arrow […]

Handling JavaScript events with Web Workers

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, […]

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 5 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 […]

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(); }); […]