Editor's Pick
Accessibility
So you’ve been publicly accessibility-shamed
If you’ve been publicly shamed for anything, what matters most is how you respond next. You can double-down on defensiveness and self-preservation (the wrong answer) or you can approach it with a growth mindset and funnel that energy in a positive direction.
CSS
CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code
A complete collection of web safe CSS font stacks.
How Bear does analytics with CSS
One of my constraints for Bear is to not use client-side javascript. This applies to the analytics system as well. Client-side javascript can be tweaked to determine the authenticity of traffic to a page and determine (partially) whether it is bot traffic or not, which is very useful for analytics. The main downside, however, is that most adblockers block analytics scripts. And not just the bad ones, like Google Analytics. Even Fathom and Plausible analytics struggle with logging activity on adblocked browsers.
So instead of using server logs, I trigger a read with CSS. Here's my slightly boutique analytics system.
Clever, but looks to be basically a "pixel tracker" (without an img), which has been used for decades. Not entirely sure if body:hover is triggered on mobile scrolls (or rather where it is, where it isn't) and this wouldn't work for keyboard/assistive tech users.
Seamless CSS Page Transitions Examples
From fading illusions to dazzling spins, CSS transitions take web experiences from “meh” to “mind-blown.” So, if you’ve ever wanted to jazz up your site and give your visitors a show, stick around.
Carousel's are pretty played out, but the Split 3D Carousel is pretty neat.
HTML
LDRS : UI Ball
Free, open-source loading animations. Available as copy/paste HTML or drop-in web components. Compatible with every modern framework.
JavaScript
Rhymepass
Rhymepass is a simple Javascript library to build random literary passphrases, including rhyming ones. For example, you can generate passphrases like HelpfulLayerFilmedPlayer.
Note: this is more a fun idea than anything else.
reveal.js 5.0
reveal.js 5.0 comes with a groundbreaking new feature: scroll view.
Slide decks are a great format for giving presentations, but scrollable web pages are easier for viewers to read on their own. The scroll view gives you the best of both worlds—without any extra effort. Present in the format best suited for presenting, share in the format best suited for consumption.
There is a video on the page showing what it looks like in action, or you can explore the demo yourself.
Easyblocks - a visual building framework
Easyblocks is a React toolkit for building completely customised visual page builders.
It can help you build intuitive visual editors like those in Shopify (for e-commerce), Mailchimp (landing pages), Splash (event pages) or Carrd (one pagers). It can handle any visual building experience that outputs HTML/CSS or a React component tree - from landing pages to dashboards.
Why Stack Overflow is embracing Svelte
Giamir Buoncristiani, tech lead for the Stacks design system at Stack Overflow, joins Ryan for a conversation about all things front end, including how he joined Stack with a mandate to modernize the front-end user interface and why Stack Overflow developers are such big fans of Svelte.