đď¸ In an attempt to see some sunshine, the newsletter is taking a break next week â I'll be back in your inbox on Wednesday, August 30. Catch you then! |
|
|
How to Make Lists Accessible â This guide covers why accessible lists and tables matter, how to make them accessible, and how to fix inaccessible lists and tables. Whitney Lewis |
Testing Your Refresh Rate with a CSS Trick? â This is a fascinating way to show users the refresh rate of their screen by spinning a specially designed zoetrope-like disc graphic at speed. As it spins, the numbers representing the viewerâs refresh rate should remain visually stable unlike surrounding numbers. Luna on cohost |
Bryntum Grid - A Lightning Fast JavaScript Data Grid â Try a professional JS data grid component which lets you edit, sort, group and filter datasets with fantastic UX & performance. Includes a TreeGrid, API docs and lots of demos. Seamlessly integrates with React, Angular & Vue apps. Bryntum Grid sponsor |
Alt Text Hall of Fame: Celebrating Well-Written Image Descriptions â Why is alt text important? This site goes some way to explain via a showcase of good examples. Stefan Bohacek |
'Itâs Time to End Damaging Website Design Practices That May Harm Your Users' â The UKâs Information Commissionerâs Office (ICO) along with the Competition & Markets Authority (CMA) have released a joint paper on harmful design in digital markets. PDFÂ here. Almond and Hayter |
|
đ Tutorials, Articles & Opinion |
Four New CSS Features for Smooth Entry and Exit Animations â This is a solid look at new capabilities found in Chrome 116 and 117 that enable smooth animations and transitions for discrete properties. Lots of good visuals and code examples. Kravets and Arhar (Chrome Developers) |
An Overview of CSS Sizing Units â Explore the four broad categories of CSS sizing units, how to apply them in your layouts, and how to choose the best ones in each scenario. Tiffany Brown |
Chrome Extension Maker Tells of Pressure to Sell Out â A popular Chrome extension creator has received more than 130 solicitations to monetize their browser tool over the years. âAnyone with sizable audience in this surveillance economy is invited to stuff their add-ons with tracking and adsâ. Thomas Claburn interview |
The Future of Open Source: SaaS, the Final Frontier â Software has moved to the cloud ⌠and open source is moving with it. Join SaaS leaders for the discussion on Sept 7. Sentry sponsor |
A Fancy Hover Effect For Your Avatar â A quick look at how to create a neat âpop outâ hover effect using CSS. Temani Afif |
User-Adaptive Interfaces with Ollie Williams |
Bringing Sharp to WebAssembly and WebContainers â A look at how itâs possible to bring Sharp, a popular Node.js image manipulation module, into the browser. This is futuristic stuff. Ingvar Stepanyan |
âśÂ  Drawing a Cute Character with CSS â In roughly ten minutes Alvaro shows us how to create an Anime-style character using just CSS. The effort took around an hour and twenty minutes, but we get to watch along via a time-lapse. Alvaro Montoro |
Prepare Your Firefox Desktop Extension for the Upcoming Android Release â âFirefox will become the only major Android browser to support an open extension ecosystem.â Scott DeVaney (Mozilla) |
Introducing the Energy Saving Concept of Lower Carbon Graphics â This article is focused specifically on TVs and saving energy based on what colors are shown on screen, but the findings may be of interest to us frontend devs â who often make a lot of decisions about what ends up on many a variety of screen. Colin Warhurst (BBC) |
âśÂ  Create Direction-Aware Effects using Modern CSS
|
How to Use the CSS Grid |
Tailwind, and the 'Death of Web Craftsmanship'
|
'It's Pretty Rude of OpenAI to Make Their Use of Your Content OptâOut'
|
|
đ§ Code, Tools & Resources |
OddContrast â A straightforward color contrast checker with Oklch, Oklab, Display P3, and more â results all meet WCAG 2 accessibility standards. OddBird |
Iconbuddy: An Icon Search Engine with 180K+ Open Source Icons â You can search for an icon collection or individual icon (SVG, PNG, etc.), or create an account to manage your collections. Any icon you select can be edited and customized before exporting. Iconbuddy |
React Authentication â Without Complexity â Userfront streamlines authentication & access control so engineers can focus on their core business. Read the docs now. Userfront sponsor |
Primo â A visual CMS that generates a static site. Primo itself is a SvelteKit application using Supabase as a backend. Primo |
twentyhq/favicon: Fetch Favicons From Any Website â Itâs an API that lets you grab a websiteâs favicon/logo via a URL like the following for Apple's site: Twenty |
LangUI: An Library of 60+ Tailwind Components for AI and GPT Projects â The components are fairly generic, so not necessarily restricted to use for AI/GPT, as advertised. But theyâre nice and include dark and light modes, which you can try out live in the docs. Ahmad Bilal |
|
đ ..and finally |
Flying Toasters Screensaver â After Dark in CSS â ..remember this? Itâs a CSS recreation of the iconic Flying Toasters screensaver from the After Dark collection (which was sold on CD in the late 80s / early 90s). Bryan has been busy recreating a handful of them - a lovely little blast of nostalgia. Bryan Braun |