Illustrated.dev explains web development through illustration

Illustrated.dev holds a collection of awesome illustrations on Web Development by Maggie Appleton: Most of these explainers are about JavaScript fundamentals. Because those never go out of style. But I’ve also made a few on newer tools like React, Babel, and D3. I make these because the front-end world is overflowing with confounding things to […]

Native image lazy-loading for the web with [loading="lazy"]

Addy Osmani, on an upcoming web feature which is about to land in Chrome 75: The loading attribute allows a browser to defer loading offscreen images and iframes until users scroll near them. loading supports three values: lazy: is a good candidate for lazy loading. eager: is not a good candidate for lazy loading. Load […]

pika/web – A Future Without Webpack

Interesting take on bundlers: Over the last several years, JavaScript bundling has morphed from a production-only optimization into a required build step for most web applications. Whether you love this or hate it, it’s hard to deny that bundlers have added a ton of new complexity to web development – a field of development that […]

Building Better Forms™ by not taking away affordances

Don’t fiddle too much with your forms‘ look and feel. A small innocent-looking piece of CSS, even when combined with semantically correct HTML, could leave you with a degraded User Experience and make your forms less Accessible. Yesterday I went to see Girl at Kinepolis. Whilst ordering tickets I ran into an issue though: after […]

Styling the select element

Scott Jehl, from Filament Group: The select element has long been difficult to style consistently across browsers. To avoid its shortcomings in the past, we have used workarounds like styling a parent element, adding pseudo-elements, and even using JavaScript to construct a select-like control out of different elements that are easier to style. But workarounds […]

10x Performance Increases: Optimizing a Static Site

Use case by JonLuca De Caro in which he optimised the page load speed of a static site. Before optimisation the site weighed 1MB (at 20 requests) with DOMContentLoaded at 3.74s. After optimisation the site weighed only 267kB (at 9 requests) with DOMContentLoaded at 197ms. 10x Performance Increases: Optimizing a Static Site →

ngrok – Public URLs for exposing your local web server

To make a local server available to the outside world you could use a service like xip.io. Only problem is that xip.io doesn’t play that nice with firewalls and stuff like that. Recently I used ngrok to solve just that. When started the app creates a tunnel to the ngrok servers, and makes your local […]

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