Together with  Buildkite

#​595 — May 31, 2023 | Read on the web

▶  21 Awesome Web Features You’re Not Using Yet? — Runs through some of the “game changing new features” that have landed on the web platform of late. It’s a good high-level run through of things delivered in a light-hearted, yet informative style. (8 minutes and a sense of humor required.)

Fireship

300ms Faster: Reducing Wikipedia's Total Blocking Time (TBT) — TBT is the sum of the blocking portion of long tasks on the main thread between First Contentful Paint (FCP) and Time to Interactive (TTI) — so lower is always better. The author got Wikipedia’s TBT down by 300ms through small, targeted optimizations like removing an unnecessary JS call and using event delegation.

Nicholas Ray

Your CI, Secured — Build your dream CI/CD workflows without sharing your secrets or source code.

Buildkite sponsor

SupportsCSS: Feature Detection for Modern CSS — Inspired by Modernizr, this little script expands on the capabilities of CSS’s @supports feature by adding classes to your HTML and exposing a results object so you can run custom tests live in the browser.

Stephanie Eckles

▶  New in Chrome 114: text-wrap:balance, CHIPS, Popover API and More — Version 114 of Chrome is rolling out now and it has a few notable new features to be aware of, including text-wrap: balance (more on that here), the popover API, and changes to cookies. This quick five minute video runs through what you need to know.

Adriana Jara (Google Chrome Developers)

⚡️ IN BRIEF

📙 Tutorials, Articles & Opinion

Mastering CSS Blend Modes — CSS mix blend modes provide an easy, yet powerful way to create visually interesting designs, as explained here with clear cat-inspired visuals.

Koding Kitty

Announcing the Second 'Compute Pressure' Origin Trial — This new origin trial from Chrome allows web developers to monitor compute pressure (how hard the system is being worked to render the content on the current page) via the Computer Pressure API.

Christiansen & Mandy (Intel)

How to Scale a Complex React Native App? — Discover how to optimize development efficiency with super apps.

Callstack sponsor

How to Draw Any Regular Shape with Just One JavaScript Function — Mozilla/MDN has a (relatively) new blog — here they share how to use JavaScript to draw any regular shape to a HTML canvas with a single function, and how to modify it to draw multiple shapes.

Ruth John

A Brief Note on Popovers with Dialogs — When it comes to popovers and dialogs Adrian sees a potential issue for users “when developers mix and match the patterns”.

Adrian Roselli

An FYI — display: contents Considered Harmful — “The erratic nature of how the declaration actually functions [in practice] represents a very real, very serious risk of critical accessibility issues being introduced into your website or web app in a way that you have no control over”.

Eric Bailey

Error-Message Guidelines — Sound advice for designing effective error messages that deliver high visibility, provide constructive communication, and respect user effort.

Neusesser & Sunwall (NNG)

Two Things That are Not Great About OKLCH — Color manipulation is.. tricky.
Chris Coyier

Creating a 'Shine Effect' on a Card with Tailwind CSS
Julien Thibeaut

Wishlist: Single Line Comments in CSS
Jim Nielsen

🧑‍💻 JOBS

Find Frontend Engineering Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.
Hired

🔧 Code, Tools & Resources

BlockNote: A 'Notion-Like' Block-Based Text Editor — Flexible and presents an extensive API so you can integrate it with whatever you want to do. You can drag and drop blocks, add real-time collaboration, add customizable ‘slash command’ menus, and more. Builds on top of ProseMirror and TipTap.

TypeCell

Color Names: Large List of Handpicked Color Names — This goes beyond just the obvious choices like the named colors in HTML (💜 rebeccapurple) — you'll actually find over 30,000 colors here with a delightful array of names and uses.

David Aerne

React Authentication — Without Complexity — Userfront streamlines authentication & access control so engineers can focus on their core business. Read the docs now.

Userfront sponsor

Inkline 4.0: A Customizable Vue.js 3 UI/UX Library — A design system and numerous customizable components designed for mobile-first (but desktop friendly) and built with accessibility in mind.

Alex Grozav

ls-lint 2.0: A Fast File and Directory Name Linter — Written in Go but aimed at JS/front-end dev use cases, ls-lint provides a way to enforce rules for file naming and directory structures.

Lucas Löffel

Bootstrap 5.3.0: The Reponsive Sass-Based Frontend Toolkit — “a monumental effort to revamp our codebase for CSS variables and color modes” – including first class support for dark mode.

Mark Otto

Scroll-Driven Animation Examples — There’s a bunch of neat demos here to show off scroll-driven animations in action that may get you thinking about how you can implement them.

Bramus Van Damme

Ipx.