Together with  Imagekit

#​590 — April 26, 2023 | Read on the web

CSS Blend Modes — An excellent look at what CSS blend modes are and how to use them with the background-blend-mode and mix-blend-mode properties. Lots of code and great interactive examples. The best thing? All major browsers support this feature.

Brad Woods

Opera One: Browsing Reinvented — Currently in an early-access developer version, this is a new ‘reimagining’ of the Opera browser, with plans for it to replace Opera’s current flagship browser by the end of the year. If you like some of the stuff Arc is doing, then this is likely worth a look.

Opera

Simplify Your Video Uploads with ImageKit’s Video Upload API — Looking to simplify and accelerate your video upload process? ImageKit's video upload API can help.

ImageKit sponsor

Web Accessibility: A Reference to Creating Inclusive Websites — This solid guide covers some of the key principles and best practices to follow in order to create an inclusive user-friendly online experience for everyone.

Alex Ivanovs

Container Query Units and Fluid Typography — Explores the behaviors of container query units, specifically by looking at three ways to create dynamic fluid typography rules by leveraging these units along with CSS custom properties. You’ll learn more about creating mixins using custom properties, max(), min(), calc() and clamp(), :is() and :where(), and more.

Stephanie Eckles

⚡️ IN BRIEF

📙 Tutorials, Articles & Opinion

The Potentially Dangerous Non-Accessibility of Cookie Notices — A Web Content Accessibility Guidelines (WCAG) auditor shares some cookie banner error patterns that can massively hurt a page’s overall conformance.

Marcus Herrmann

CSS Custom Properties Beyond the :root — “Everybody just seems to define most of their global custom properties (aka CSS variables) on the :root selector without giving it a second thought – and so am I”. — But why?

Matthias Ott

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

Buildkite sponsor

When is :focus-visible Visible? — Guidelines for when user agents determine that the :focus-visible CSS pseudo-class should apply, and how to properly use it.

Ire Aderinokun

Exploring the Potential of Web Workers for Multithreading — Looks at the importance of Web Workers for multithreading on the web, including the limitations and considerations of using them and the strategies for mitigating potential issues associated with them.

Sarah Oke Okolo

A Richer Install UIs for PWAs Now in Chrome — Gives progressive web app developers an extended opportunity to encourage users to install their app.

Adriana Jara (Chrome Developers)

▶  Hot Takes on the Web — In this half-hour talk the creator of Svelte shares his insights and thoughts on various frontend trends.

Rich Harris

🔧 Code, Tools & Resources

List.js: Add Search, Sort, Filters, and More to Tables and Lists — A handy library for adding search, sort, filters and flexibility to tables, lists or other HTML elements. Want an example? Why, of course.

Jonny Strömberg

A Pure CSS Table Tennis Game — CSS artist Ben shares an impressive working game of table tennis that’s made with no images or JavaScript. There’s ▶️ a video showing the process behind how it was made.

Ben Evans Codepen

SurveyJS: A Self-Hosted Form Builder Tool for Your JavaScript App — No-code drag-and-drop form creation right in Your App: configure forms in a WYSIWYG editor and store survey data on-prem.

SurveyJS sponsor

Pico.css: A Minimal CSS Framework for Semantic HTML — The focus is more on styling native HTML elements, rather than littering your HTML with classes. Includes dark and light mode themes out-of-the-box.

Lucas Larroche

Simple Light: A Tailwind CSS & React Landing Page Template — Designed to provide all the basic components you need to create a landing page for SaaS products, online services, etc.

Cruip

Ark UI: A Headless Library of Customizable, Accessible, and Unstyled UI Components — Compatible with React, Vue, and Solid and powered by Zag.js. All components are built with accessibility standards and are easy to theme in line with your own design system.

Chakra Systems

Tailwind Variants: A First-Class Variant API Library for Tailwind CSS — Features include zero-runtime, tree-shakeable, fully typed, frame-agnostic, and will efficiently merge conflicting Tailwind styles.

NextUI

Editable: An Extensible Rich Text Editor Framework — Currently depends on React with future plans for a plain JavaScript version. Its primary feature is that it avoids using the contenteditable attribute for better interoperability. Try it in this playground.

Editable

🧑‍💻 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

Ipx.