|
|
|
When a Click is Not Just a Click — There are nuances to consider when listening for a click event (such as a ‘click’ sent from a keyboard versus one from a mouse). This post dives into how you can distinguish different types, and what opportunities arise from identifying them. Travis Almand |
|
RenderingNG: Ready for The Next Generation of Web Content — Chrome’s rendering lead outlines how work on the next-generation of rendering architecture for Chromium is nearing completion. They are hoping to “complete the process of designing, building and shipping this architecture” in 2021. Chris Harrelson |
Learn to Build Scalable React Apps — Brian Holt covers the latest tools in the React ecosystem like TypeScript, TailwindCSS, Redux, Jest, and more in this new and updated video course. Frontend Masters sponsor |
|
The Internet Is Rotting — Link rot and content drift is a massive growing issue for the web as a whole, and sadly too much has been lost already. Funnily enough, I remember reading Jakob Nielsen complaining about this problem 23 years ago too! Jonathan Zittrain |
|
A Complete Guide to Grid — This comprehensive guide to CSS Grid has recently been updated. It focuses on all the settings both for the grid parent container and the grid child elements. A valuable resource worth bookmarking. Chris House |
|
📙 Tutorials, Articles & Opinion |
|
|
▶ Building a Responsive Layout with CSS Grid and Container Queries — Watch along as Steph Eckles creates a layout that starts as a standard grid and gets additional styles (if the browser supports container queries). Alex Trost |
|
Improving Cumulative Layout Shift at Telegraph Media Group — How The Telegraph, a leading UK news website, managed to reduce their CLS scores by 250%. Chris Boakes |
|
Stop Using ‘Pop-up’ — When you say pop-up do you mean a new window, a browser dialog, a tool-tip, or maybe something else? Adrian pleads with us to choose a term that accurately describes the control you want. Adrian Roselli |
|
Monitor Lighthouse Scores and Core Web Vitals — DebugBear continuously monitors site speed and provides front-end developers with the data they need to improve it. DebugBear sponsor |
|
Experimenting with WebTransport — A new API offering low-latency, bidirectional, client-server messaging. Jeff Posnick |
|
Improving CSS Variables in WebKit
|
|
Adding Shadows to SVG Icons With CSS and SVG Filters
|
|
Creating A Scalable "Star Rating" Without JS (and No SVG/Image for the Star)
|
|
🔧 Code, Tools and Resources |
|
|
Introducing Flicking V4 with More Customization and UI Preserving — Here’s a major new version of Naver’s popular open source carousel library. Wood Neck |
GradientArt: An Advanced CSS Gradient Editor — This is a gorgeous visual gradient editor that lets you customize just about every aspect of a CSS gradient’s properties. You can even quickly scale, rotate, or reposition the gradient as needed before grabbing the CSS. Yoav Kadosh |
|
Typographic Scale Calculator: Choose The Right Font Size From A Harmonious Type Scale (Inspired by The Way Music Works) — Choose a base font size, ratio, and scale and the values are generated automatically. A similar tool is found here. Jean-Lou Désiré |
|
Milkdown: A Plugin-Driven WYSIWYG Markdown Editor — Built on top of CodeMirror, the plugin system lets you easily enable or disable features like tables, LaTex support, and slash commands. Try it out here. Saul Mirone |
|
margin-margin-revolution.css: A Game to Help You Never Forget the Order of Margins in CSS — Ha! It's a sort of plain text version of Dance Dance Revolution. Chris Johnson |
|
Free Chat/Messaging UI Kits for Your Website or App Stream sponsor |
|
Content Placeholder for Tailwind CSS — This Tailwind plugin adds utility classes for showing placeholders during a ‘loading’ state for your UI elements. Javis V. Pérez |
|
Instant Vitals: Tools to Track Core Web Vitals Metrics Instant Domain Search |
|