|
Microsoft’s Edge Browser Now Stable on Linux — After over a year in preview, the stable version of Edge for Linux is now available. Here's the official blog post from Microsoft covering the news. This release means Edge is now available on Windows, macOS, iOS, Android, and Linux. Tom Warren |
Web Performance Metrics Cheatsheet — A succinct, handy summary of web performance metrics (such as Time to First Byte, Largest Contentful Paint, Time to Interactive, etc). Also available as a PDF. Ire Aderinokun |
New Frontend Masters Course on CSS Grid & Flexbox — Learn essential layout techniques for building responsive, beautiful web apps. Get hands-on practice using CSS Grid for two-dimensional, grid-based layouts and Flexbox for styling one-directional flow. Frontend Masters sponsor |
How I Made Google’s Data Grid Scroll 10x Faster with One Line of CSS — If you're not familiar with the idea of CSS containment (now widely supported by browsers) and how it can improve the efficiency of a layout, this might be an eye opener. Johan Isaksson |
▶ Developer Tools Secrets That Shouldn’t Be Secrets — An Edge-focused look at console power tips, how to use browser developer tools outside the browser, and more. Christian Heilmann |
|
📙 Tutorials, Articles & Opinion |
CSS-ing Candy Ghost Buttons — Highlights a technique for creating outlined buttons with CSS. They look simple enough, but there’s a few things worth taking into consideration to get them looking right. Ana outlines the solutions. Ana Tudor |
Respecting Users’ Motion Preferences — The Michelle Barker |
Using CSS Variables for Reduced Motion on a Global Scale — How to use CSS Variable and the Silvestar Bistrović |
▶ Have Single-Page Apps 'Ruined' the Web? — An excellent, and clear talk from the creator of frontend framework Svelte talking about the often-valid criticisms lodged towards single-page apps and how ‘transitional apps’ may be a way forward. Rich Harris |
|
Put the “Flow” in Your Workflows with Shortcut — Shortcut is fast and intuitive project management built for developers. Delight the scrum gods and try it now. Shortcut (formerly Clubhouse.io) sponsor |
The Golden Ratio and User-Interface Design — Although traditionally used in art and architecture, the golden ratio can be referenced to design aesthetically pleasing interfaces. Kelley Gordon |
The Process of Building a CSS Framework — A behind-the-scenes look at making a CSS framework (specifically CodyFrame) and a tutorial on how to build a website with it. Claudia Romano |
Best Practices for Embedding Third-Party Web Widgets
|
Render Images Based on the Dark or Light Theme of the Client Device
|
|
🔧 Code, Tools and Resources |
Coding Font: A 'Game' to Find Your New Favorite Code Font — This is a fun idea. It throws over 25 popular developer-oriented fonts into a ‘tournament’ and you then pick your favorites until you’re left with a winner. (It was JetBrains Mono for me.) Typogram |
Fontfacer — Autogenerate CSS Font Rules from Font Files — Takes your uploaded font files and generates a list of CSS font rules for you to copy and paste into your codebase. Peter White |
Vizzu: A Library for Animated Data Visualizations and Data Stories — Vizzu is a little different to most data visualization libraries in the sense that animating the visualizations and transforming between different visualization types is the key focus. Vizzu |
Automate Domains, DNS, and SSL Certificates with This Special Offer 👀 DNSimple sponsor |
Lorem.space: An API for Placeholder Images — Two nice features for this one: You can choose from various categories (to match the type of website) and download binaries to serve the images yourself for local development. Pouya Saadeghi |
Ninja Keys: A Utility to Add a Keyboard Shortcuts Interface to a Website — Will display a ‘drawer’ with shortcut key options for the app/page, available in plain JS, Vue, React, and Svelte. Try it here. Sergei Sleptsov |
Hasty: A JavaScript Perfomance Tool — A quick, easy-to-use online tool that lets you test variations of a particular snippet to see which one performs best. Mads Cordes |
Core Web Vitals Checker — Check if your site meets the Core Web Vitals assessment in one click. Calibre |