News Articles Elsewhere

Dock Life: Using Docker for All The Things!

Interesting take by the folks at nystudio107: instead of installing things such as Node locally, why not run ‘m all in containers with aliases linked to them? Instead of installing all of the tools & pack­ages you’re used to using, we use Dock­er images that some­one else has cre­at­ed that con­tain these tools & packages. […]

tldraw — A tiny little drawing app

The past few weeks/months Steve Ruiz has been teasing a lot of the work he has been doing on tldraw, an app to draw diagrams. never too late for a second pass on the UI — Steve Ruiz (@steveruizok) November 2, 2021 About two weeks ago he released it, and also made the source code […]

The State Of The Web

Great talk by Jeremy Keith which was the opening presentation from An Event Apart Spring Summit held online in April 2021. In true Jeremy-style it starts off with space and the early days of the web, to bring us to the present day. Watch this talk (or read the transcript). And then watch it again. […]

Render styleable Markdown in your HTML with <md-block>

To render Markdown on web pages, Lea Verou created <md-block>. It’s a zero-dependency Custom Element that, unlike other solutions, renders the content in the light DOM which allows you to style the output easily. There are many web components these days to render Markdown to HTML. However, all render the resulting Markdown in Shadow DOM, […]

Dynamic Color Manipulation with CSS Relative Colors

In Michelle’s recent Guide To Modern CSS Colors, I only found one thing missing: CSS Relative Colors. Plugging that hole is this post by Jim Nielsen. CSS relative colors enable the dynamic color manipulation I’ve always wanted in vanilla CSS since Sass’ color functions first came on the scene (darken(), lighten(), etc.). Allow me to […]

Radix UI

Unstyled, accessible components for building high‑quality design systems and web apps in React. Comes with components such as Dialog, Popover, Dropdown Menu, Toggle, … import * as Popover from '@radix-ui/react-popover'; function App() { return ( <Popover.Root> <Popover.Trigger>…</Popover.Trigger> <Popover.Content>…</Popover.Content> </Popover.Root> ); } Installation per NPM: npm install @radix-ui/react-popover Radix UI → Related: Headless UI — Completely […]

My Custom CSS Reset

Josh W. Comeau shares (and explains) his CSS Reset. /* Josh’s Custom CSS Reset */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html, body { height: 100%; } body { line-height: 1.5; -webkit-font-smoothing: antialiased; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, […]

ECMAScript Proposals Overview

Saad Quadri created a handy website that lists all ECMAScript Proposals. On one single page you can get a quick glimpse of all proposals and the current stage they are in. Great to see that the various stages of the TC39 Development Process themselves —something I always mention in my ever-evolving talk on ESNext— get […]

Chromium Eye Dropper Browser Extension

Leveraging Chromium’s built-in EyeDroper API —which I wrote about earlier this year— Patrick Brosset created an extension for Chromium that allows you to pick a color from anywhere on your screen. In an accompanying blogpost he also explains how he built it: Back when I worked on the [EyeDroper API] article, I got interested in […]

Automatically skip sponsored segments in YouTube videos with SponsorBlock

SponsorBlock is an open-source crowdsourced browser extension and open API for skipping sponsor segments in YouTube videos. Users submit when a sponsor happens from the extension, and the extension automatically skips sponsors it knows about using a privacy preserving query system. It also supports skipping other categories, such as intros, outros and reminders to subscribe, […]

Scroll-Linked Animations With the Web Animations API (WAAPI) and ScrollTimeline

Just before I left on holiday, the 2nd article I wrote for CSS-Tricks got published. In it, I take a look at the JavaScript side of the Scroll-Linked Animations specification. The typical progress-bar as you scroll can be code like this: const myScrollTimeline = new ScrollTimeline({ source: document.scrollingElement, orientation: 'block', scrollOffsets: [ new CSSUnitValue(0, 'percent'), […]

A Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH

Michelle Barker shares advice on the not-so-obvious things you have to keep in mind when handling colors in CSS today. There’s more to color on the web than meets the eye, and it’s about to get a lot more interesting! Today, we’ll take a look at the best ways to use colors in a design […]

Yes, we use a Joy-Con to change slides. Here’s how… | HTTP 203

In this episode of HTTP 203 Jake and Surma go over the code that’s needed to use a Joy-Con (a Nintendo Switch Controller) on the web. As mentioned it’s not possible to get the orientation of the Joy-Con via (the current version of) the Gamepad API. To get the orientation today, you can use the […]

PHP 8.1 in 8 code blocks

Brent gives a good overview of the additions that will land in PHP 8.1: Enums Readonly Properties New in initalizers (yes!) Fibers Array unpacking while retaining keys First class callables Pure intersection types The new array_is_list function PHP 8.1 in 8 code blocks → Source: Bram Van Damme

EAS: Expo Application Services

The folks at Expo have made it really easy to build (and publish!) your React Native applications on their infrastructure, with their Expo Application Services (EAS) offering: You can build your app with EAS Build and automatically submit to app stores with EAS Submit in minutes or less, thanks to automatically managed app signing credentials, […]

The Gap between UX/Design and Development: The Design Engineer

Egor Kloos on closing the gap between design and development: I have never worked anywhere where there wasn’t someone trying to close the gap. This role is often filled in accidentally, and companies are totally unaware of the need. Recruiters have never heard of it, and IT consultancies don’t have the capability in their roster. […]

RenderingNG: The next-generation rendering architecture for Chrome

RenderingNG is a re-architecture of the entire rendering pipeline of Chrome, for greatly improved reliability, scalability and extensibility. Listen in to find out how it works and why it makes the web better. Thanks to these advancements we get better rendering of tables, container queries support, features like Scroll-Linked Animations, etc. Related: RenderingNG — Ready […]

Curves and Surfaces From fonts to animated movies, curves and surfaces constitute fundamental building blocks of many geometrical designs. We’ll see how complex surfaces are a natural extension of plain two dimensional curves. Throughout this article I’ll keep jumping back and forth between curves and surfaces to highlight how the ideas we develop for wiggly lines can […]

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.