|
|
|
Using Everyone seems to be tinkering with the new “This feels like a revolution in how we will write CSS selectors, opening up a world of possibilities previously either impossible or often not worth the effort.” → webkit.org/blog/13096/css-has-pseudo-class JEN SIMMONS |
Render Notification Tests Across All Channels [Sandbox] — Too many engineering resources are wasted on notification template building and routing rules. Pass this on to Product, Support, and Security. Heck, even if the engineers want to quickly assemble templates: use our UI or JSON based syntax, Elemental. Courier.com sponsor |
|
Can Browsers Optimize the Loading of Third-Party Resources? — Highlights the impact of third party resources, and the proposed approach the Chrome team is hoping to take at the browser level to protect the user experience from their potentially detrimental impact, “without reducing their business value to site owners”. Addy Osmani (Chrome Developers) |
|
What Makes a Great Toggle Button? — The first in a two-part case-study analyzing the characteristics of effective toggle buttons, what makes them error-proof, and how to use them whilst preventing confusion for users. Eduard Kuric |
|
📙 Tutorials, Articles & Opinion |
|
Meet the Top Layer: A Solution to Jhey Tompkins (Chrome Developers) |
|
An Introduction to Constraint Based Design Systems — “Constructed and maintained with a foundation of proactive and informed communication, design systems become an incredibly powerful organizational asset.” Cole Peters |
|
▶ Ben Callahan on the Value of a Design System — A ~50-minute discussion exploring how to go about proving the value of a Design System and how you can pitch it effectively to stakeholders. Smashing Magazine podcast |
|
Build Real-Time Chat Messaging in Less Time — Explore Stream’s Chat API, SDKs, and UI by activating your free account. Stream sponsor |
|
How to Skew Benchmarks in Your Favor — Looks at how accidental bias are often introduced into framework benchmarks. “Always double check that you’re measuring what you think you are measuring.” Marvin Hagemeister |
|
Inclusive User Research: Recruiting Participants — Some advice on when and how to recruit folks with disabilities for your usability tests. Ela Gorla |
|
When Do You Use CSS Columns? — Geoff points out that this isn’t a rhetorical question. What are some great real-world use cases for CSS multi-column layouts? Geoff Graham |
|
▶ How to Lower the Opacity of a Background Image with CSS
|
|
Creating Custom SVG Cursors with an Interactive Emitter Effect
|
|
🔧 Code, Tools & Resources |
|
|
Heroicons: Beautiful Hand-Crafted SVG Icons by the Makers of Tailwind CSS — Yup, we’ve shared this great icon set with you before, but the collection has just hit 2.0, now sporting a fresh look, a thinner stroke option, and a new 24px solid set. Heroicons |
|
Tota11y! — A browser utility to visualize the most common web accessibility errors on a site in a clear, understandable way. (This builds upon the original toolkit from Khan Academy) Babylon Health |
|
InAppBrowser: See What JavaScript Commands Get Injected Through an In-App Browser — Read the explainer here, which also has instructions on how to use the tool. Felix Krause |
|
With Retool, Ship Apps Fast with 90+ Production-Ready UI Components Retool sponsor |
|
Gradientify: A Web Based All-in-One Gradient Editor — Includes a gallery of 100+ hand-crafted gradients that you can customize or use for inspiration. Lets you save gradients in the web app, copy the CSS, or download as PNG. Nitin Singh and Friends |
|
Tailwindhelper: A Tool for Visualizing Tailwind Classes, Converting Units, and Finding Colors — This can be used as a reference but seems to be more useful for those just getting started with Tailwind and want to convert regular CSS to Tailwind’s utility classes. Sebastien Graf |
|
Puppertino: A CSS Framework Based on Human Guidelines from Apple — Compatible with most other CSS frameworks, and you can view the very Apple-like examples here. It doesn't feel quite right to us yet, but a good start. Edgar Pérez |