Working with Houdini’s new CSS Typed Object Model (Typed OM)

Chrome 66 will add support for Houdini’s Typed OM. Eric Bidelman from Google has documented how we can use this. CSS now has a proper object-based API for working with values in JavaScript. The days of concatenating strings and subtle bugs are over! The example shown above merely defines a value and is quite a …

Using the new Async Clipboard API

Shipping with Chrome 66 is an implementation of the new Async Clipboard API. Its asynchronous nature makes it the preferred way – over document.execCommand – to perform copy-paste operations in the browser. // Write Text to the Clipboard (e.g. copy) navigator.clipboard.writeText(‘Text to be copied’) .then(() => { console.log(‘Text copied to clipboard’); }) .catch(err => { …

V8 internals for JavaScript developers: Arrays

This presentation demonstrates how learning just a little bit about JavaScript engine internals can help you improve the run-time performance of your JavaScript code — not just in V8 specifically, but across all JavaScript engines! A written version is also available.

Making a Deep Copy of an Object in JavaScript

In JavaScript, when cloning an object via Object.assign({}, obj) or by destructuring it (e.g.{…obj}, only shallow copies are created. Surma has explored some unusual ways – other than JSON.parse(JSON.stringify(obj)); to create an actual deep copy: MessageChannel History API Notification API (told you they were unusual ;)) Deep-copying in JavaScript →

Run your tests using Jest & Puppeteer with jest-puppeteer

With jest-puppeteer – and its included expect-puppeteer assertion library – it’s possible to use Puppeteer within your Jest tests. Writing integration test can be done using Puppeteer API but it can be complicated and hard because API is not designed for testing. To make it simpler, an expectPage() is automatically installed and available, it provides …

What’s next for React? Beyond React 16

Dan Abramov – of Redux fame – just spoke at JSConf Iceland 2018 previewing two new features that will make it in a future version of React. The first demo shows time slicing, which can be translated to async rendering: “We’ve built a generic way to ensure that high-priority updates don’t get blocked by a …

React’s new context (React 16.3.0)

One of the new things in React 16.3.0 is a new context API: Typically, data in a React application is passed top-down (parent to child) via props. But sometimes it’s useful to pass values through multiple levels of abstraction without involving each intermediate. Examples include a locale, or a UI theme. Context in React provides …

WTFJS with Math (or why 0.1 + 0.2 results in 0.30000000000000004)

A few fun little Math-related wtfjs examples. A classic one is adding an empty Array and an empty Object: [] + {} // ‘[object Object]’ {} + [] // 0 If you’re looking for a hint: Coercion. JS WTF with Math →0.30000000000000004.com →

Jake Archibald: “In The Loop” — Taking a close look into the browser’s Event Loop

Talk by Jake Archibald, as brought at JSConf.Asia 2018, taking a close look into the browser’s Event Loop: This talk looks at the browser’s event loop, the thing that orchestrates the main thread of the browser, which includes JavaScript, events, and rendering. We’ll look at the difference between tasks, microtasks, requestAnimationFrame, requestIdleCallback, and where events …