|
|
|
Creating Generative Patterns with the CSS Paint API — A detailed look at how to use the Paint API to create three generative patterns that could be used to add a touch of character to a range of websites/apps. The results here are rather lovely. George Francis |
|
Videos From the 'State of the Browser 2021' Event — All of the videos from last week’s State of the Browser event are now online, including Rachel Andrew’s talk on how CSS has evolved and what’s coming next. London Web Standards |
Put the “Flow” in Your Workflows with Shortcut — Whether you're a startup that iterates quickly by giving engineers a free pallet of Red Bull, or a large org that has strict ship dates to hit, Shortcut is the ideal solution for task management, bug tracking, iteration planning, and reporting. Shortcut sponsor |
|
Modern CSS in a Nutshell — If you (or someone you know) are feeling a bit out of touch with modern CSS development then this is brief, high-level overview of the current state of CSS is worth checking. You may be surprised at how much you can now do with vanilla CSS. Scott Vandehey |
|
What's New in DevTools in Chrome 97 — This update (now in Canary) has a new Recorder panel in which you can record, replay and audit user flows, the ability to refresh the device list in Device Mode, Autocomplete during Edit as HTML, and more. Chrome Developers |
|
📙 Tutorials, Articles & Opinion |
|
A Handy Little System for Animated Entrances in CSS — Neale has created a set of CSS utilities for animating elements as they enter into view. This post explains how the animations work, and how to apply them whilst respecting user preferences. Neale Van Fleet |
|
▶ Bringing Bounce and Elastic Easing to CSS — Animating with CSS is neat, but achieving a bouncing or elastic easings effect isn’t easy. In this video Jake and Surma look at a new proposal that allows you to define all kinds of easings. Google Chrome Developers |
|
Switching from Interaction Design Tools to SwiftUI — Learn interaction prototyping and up your skills with SwiftUI, Apple’s declarative approach for building interfaces. Stream sponsor |
|
▶ Smashing Podcast: Is The Web Dead? — Obviously not, but have changes to best practises negatively impacted the web? Drew McLellan talks to expert Chris Ferdinandi to try and find out. Drew McLellan podcast |
|
'Firefox is the Only Alternative' — “As it stands today we have a browser duopoly (Chrome and Safari) and pretty much a monopoly outside of Apple’s walled garden”. Bozhidar Batsov opinion |
|
When Is It “Right” to Reach for |
|
94% of the Largest E-Commerce Sites Are Not Accessibility Compliant
|
|
🔧 Code, Tools and Resources |
|
|
Project Wallace: An Online CSS Analyzer — The main product isn’t free, but this CSS analyzer is free to use. Just enter a URL and this tool will show you various stats on the page’s CSS (lines, selectors, declarations, complexity, etc). Bart Veneman |
|
▶ Three Awesome Tools for a Better Front-End Dev Experience — Kevin takes a look at tools out there to make your developer life a little bit easier. Kevin Powell |
|
Want to Transfer a Domain with No Downtime? 👀 Our Handy Checklist 👉 DNSimple sponsor |
|
30 Seconds of Knowledge: A Chrome Extension That Shows Programming Tips on Your New Tab Page Stefan Petrovic |
|
Tiny UI Toggle: A JS/CSS Utility to Build Toggle-able Page Components — See examples here. Lets you build a wide variety of UI components including dropdowns, dialogs, tabs, accordions, and more. Nigel O Toole |
|
|
Atmos: Create UI Color Palettes with Ease — Lets you select a palette randomly, by color family, or by “Meaning”, which allows you to select generate the palette from a few category keywords. It's free whilst in beta. Vojtěch Vidra |
|
Xtend UI: A Library of Tailwind Components Enhanced by Vanilla JavaScript — Sort of like Bootstrap’s interactive components, but for Tailwind. Includes lots of components and themes under various categories, along with React versions of each. Riccardo Caroli |