Adaptive components, Firefox 79, and improving legibility with CSS

Designing Adaptive Components, Beyond Responsive Breakpoints — Thoughts on designing systems of reusable components that adapt to responsive layouts, containers, work with different content states and adapt to user needs, behaviour and context.

Stéphanie Walter

A New Beta Version of 'Can I Use' —Can I Use is a fantastic resource for checking browser compatibility for modern Web Platform features and a redesign is on the way with performance improvements, better visual accessibility, nicer URLs, dark mode support, and several more new features .

Can I Use

Faster CI/CD for All Your Software Projects Using Buildkite :rocket: — See how Shopify scaled from 300 to 1800 engineers while keeping their build times under 5 minutes.

Buildkite sponsor

Modern CSS Techniques To Improve Legibility — Advice and tips on how to improve website legibility using things such as variable fonts, contrast, spacing, etc.

Edoardo Cavazza

Happy Birthday Web Fonts — It has been a decade since the then newly-formed WebFonts Working Group published a First Public Working Draft of the Web Open Font Format (WOFF).

Vladimir Levantovsky

Florian Scholz, Chris Mills, Harald Kirschner (Mozilla)

Introducing the Microsoft Edge Enterprise Roadmap and Release Schedule — A new Microsoft Edgerelease schedule for both the Beta and Stable channel releases.

Microsoft Edge Team

:computer: Jobs

One Application, Hundreds of Hiring Managers — Use Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery

Frontend Developer at X-Team (Remote) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

:orange_book: Tutorials & Opinion

▶   HTML: How to Make Loveliness — How much do you know about HTML’s semantics? In this 20-minute talk one of the co-editors of the HTML5.3 spec will bring you up to speed, showing you how to use HTML to make sites that work better, are faster and include more people.

Bruce Lawson

Understanding CSS Multiple Backgrounds — A detailed visual explainer of the background-image property, and how best to use it to stack multiple backgrounds.

Ahmad Shadeed

A Fetch API Tutorial for Beginners — A fairly gentle intro to using Fetch, the replacement for Ajax-based XMLHttpRequest techniques, along with a little bit of coverage of Promises.

Louis Lazaris

Over 500M End-Users Depend on Our Scalable Chat & Activity Feed APIs — Build real-time chat in less time. Rapidly ship in-app messaging with our highly reliable chat infrastructure.

Stream sponsor

Introspecting CSS via the CSS OM — Some interesting digging around by Lea. You’re unlikely to need to do this yourself but it shows how you can interrogate the browser for supported CSS properties and whether or not certain properties are shorthand forms of others. Clever stuff.

Lea Verou

Webwaste — Just what is the environmental impact of bloated websites and unnecessary assets? Gerry McGovern examines in this extract from his book World Wide Waste .

A List Apart

Natively Formatting JavaScript Dates and Times

Elijah Manor

Lazy Loading Images in Svelte

Donovan Hutchinson

:wrench: Code, Tools and Resources

css-sweeper: MineSweeper Implemented in CSS + HTML (No JavaScript) —Play it here. The CSS interestingly uses a combination of CSS variables (using a technique called ‘space toggle’) along with HTML checkboxes.

PropJockey

Tailzilla: Components and Online Code Editor for Tailwind CSS — This is a collection of responsive components, templates, and starter kits based on Tailwind CSS. Each component offers a split screen live preview and editable code.

Tailzilla

Formbutton: A Simple, Customizable Pop-up Form — This adds one of those bottom-corner fly-out forms that users can use to quickly communicate or add feedback.

Formspree

webcompat: Bug Reporting for the Web — An initiative by various volunteers supported by Mozilla that aims to document bugs that create inconsistent experiences across browsers.

webcompat

Water Droplets Created with SVG Filters and CSS Shadows — A very impressive end result.

Oscar Salazar codepen