Bookmarks (196)

:where() :is() :has()? New CSS Selectors That Make Your Life Easier — An approachable look at these three new CSS selectors, how to use them, and the current levels of browser support for each.

Rethinking Server-Timing as a Critical Monitoring Tool — Server-Timing is uniquely powerful as the only HTTP response header that supports setting free-form values for a specific resource and making them accessible via a browser API separate from the Request/Response references themselves.

Syntax Highlighting (and More) with Prism on a Static Site — This post will show you how to implement syntax highlighting on a Next.js blog with the popular Prism.js library.

Theoretical Foundations for Server-Side Rendering and Static-Rendering — A research paper and proposal regarding rendering. It ultimately concludes that the distinction between pre-rendering (static) and SSR is somewhat blurry and proposes an API implementation wherein the framework chooses whether to serve up an existing pre-render or a server-rendered page without the developer needing to specify in advance.

Tweetic: Convert Tweets to Static HTML — Useful to preserve the look of a tweet longterm or possibly in HTML email. Also gives you the option to use plain CSS or Tailwind for the styling.

Shrink.media: An Online Tool to Reduce the Size of Images — There are certainly lots of similar tools, but this one has a nice UI where you can visually compare the images and use sliders to reduce the quality and physical size.

On Ordering CSS Declarations Alphabetically — Jim is sold on the idea of ordering CSS declarations alphabetically, not because it’s more organized but because it actually forces you to take more care.

Free Chat/Messaging UI Kits for Your Website or App — Unlock enterprise-grade features, functions, and UI components completely free for your startup or side project with the Maker Account from Stream.

Designing a Better Language Selector — Language selectors are common on sites with worldwide audiences but there are so many different approaches. Vitaly looks at a lot of options here and narrows in on what’s really essential to get right.

A Dive into Text Wrapping and Word Breaking on the Web — A look at ways to control how text wraps (or doesn’t wrap) on a page.

▶  Discussing Front-End Testing with Lucas Da Costa — The author of Testing JavaScript Applications (published by Manning) talks about the role of testing in front-end projects and what tools are at your disposal. (38 minutes.)

▶  Serverless for Frontend Engineers with Swizec Teller — Swizec does courses in using React alongside serverless technologies and speaks with Jeremy and Rebecca here about approaching serverless as a frontend engineer, JavaScript, and troublesome tutorials.

How To Build a Modal Dialog as a Web Component — “Write once and run everywhere, so to speak, or at least that was my lofty aspiration. Good news. It is indeed possible to build a modal with rich interaction that only requires authoring HTML to use.”

Useful Tools for Creating AVIF Images — AVIF (AV1 Image File Format) is a modern image file format which offer space and efficiency benefits over legacy alternatives. Its support is good in Firefox and Chrome but Safari has yet to get on board.

CSS Gradient Generator — A great web tool for creating “beautiful, lush gradients”. Nice options to play around with here, and the CSS output can be copied in one click.

CSS Accordion Slider Generator — An online tool for creating basic collapsing content areas (a.k.a. ‘accordions’) with CSS and HTML you can copy and paste into your project.

Scrollex: A Library to Build Beautiful Scroll Experiences with Minimal Code — Definitely not for every project but you can check out some really cool examples of what’s possible on the demo page.

MockRTC: A Powerful WebRTC Mock Peer and Proxy — A tool for building automated tests for WebRTC traffic or otherwise debugging WebRTC related work you’re doing.

A Drop-in Minimal CSS Framework Previewer — There are a lot of ‘minimal’ CSS frameworks, such as new.css and Primer CSS but it can be hard to trawl through them for something you’d like. Enter this ‘minimal CSS framework switcher’ where you get to preview lots of minimal CSS frameworks on a single page.

Porting Zelda Classic to the Web — A fascinating write up of an amazing piece of work.. and there’s not a single line of JavaScript. It’s pretty amazing what the browser, WebAssembly, and compiler toolchains can do now and this shows it all off pretty well. If you prefer playing to reading, though, the end result is here.

Figma for Developers — Join Steve Kinney to learn how to confidently use Figma for creating user interface prototypes. You’ll also learn how to create reusable styles, typography, and components to create prototypes to show colleagues or customers before you build an entire application.

Babylon.js 5.0: A Powerful 3D Web Rendering Engine — Babylon is a powerful framework you can use as the basis for games, visualizations, and other 3D and AR experiences running both natively and on the Web. As usual, they have a release video showing it off too or hit the playground to get playing with a basic example in seconds.

Building a Musical Instrument with the Web Audio API — One of our favorite writers in the frontend space is back with an easy to follow walkthrough of how she built Keyboard Accordion, a Web based diatonic accordion (which I struggle to play in any coherent fashion at all but it sounds great).

'Please, Stop Disabling Zoom' — OK, sometimes there might be a good reason, but 9 times out of 10, you’re probably going to be causing someone some accessibility problems on mobile, so don’t just do it without consideration.