~frontendfocus | Issue 695 - CSS 'if' functions start to roll out (17)

Exploring the OKLCH Ecosystem and Its Tools — A solid overview of why you may want to start using OKLCH color (for which browser support is now very good), what the essential tools you need to know about are, and what best practices you need to be aware of. There’s an interesting related talk titled ‘▶️ Programmable Colors: Bridging Design and Code’ that’s worth...

WebStatus.dev: Now with More Data, Deeper Insights, and a Clearer Path to Baseline — The open-source Web Platform Status site allows us to query and track various features and what browsers they play nice with. It’s had a notable update recently, with expanded feature coverage, usage timelines, mobile data, and more. Handy!

AG Charts: The Best JavaScript Charting Library In The World — Create beautiful JavaScript Charts in minutes with our open-source library. Built by AG Grid, AG Charts has an intuitive, flexible API, 20+ series types and advanced features, including Financial Charts. Supports React, Angular & Vue. Try for free.

▶  CSS if() Functions & reading-flow (in Chrome 137) — A solid and straightforward demo of what we can do with the if function (in just Chrome and Edge for now). Powerful stuff. The new reading-flow property is also quickly explained here.

Getting Creative with HTML Dialog — As you can see above, Andy shares how to spruce up generic looking dialogue boxes with CSS — via animations, the backdrop-filter property, and more.

IE6, AI, and The Future of Browsing the Web — A new series on how AI is changing the web. This first entry posits that “Chrome is the next IE6”, and explores how Google’s supposed “retreat from web standards signals a new era of browser stagnation”.

Introducing Hope AI - Architecture Agent for Developers — Compose high-quality professional software with AI for simplicity, speed and control. By Bit.

▶  The Three Ways JavaScript Frameworks Render the DOM — The creator of the SolidJS framework looks at the different approaches frameworks take to render what they produce. A good look under the hood that isn’t too complex. (16 minutes.)

CSS Spotlight Effect — Because we can feed the current mouse position to CSS with a few lines of JavaScript we can build some neat interaction patterns. Amit highlights (pun intended) one such effect here “that’s easy to create, simple to customize, and looks surprisingly slick”.

Better CSS Shapes Using shape(): More on Arcs — Temani continues spelunking into all things CSS shapes, this time exploring the arc command in detail.

Beachpatrol: A CLI Tool to Automate Your Everyday Web Browser — A higher level way to use Playwright on macOS or Linux to control a regular non-headless browser instance. It’s essentially an approach where you still want a visible browser you can use in a normal way but with added automation possibilities.

🔐 Login Is Just the Start. Protect Your Flow from Real Threats — AuthKit provides a flexible login UI. Add WorkOS Radar to stop brute force, free trial abuse, and leaked credentials.

Smooothy: A Smooth, Extensible Slider/Carousel Component — Try out some demos here, which include customizations for keyboard control, parallax, speed, and there are implementations for React and Vue.

Glow Icons: 440+ Open Source SVG Icons Made for Interfaces — Searchable and available in outline and solid formats. You can also download the icons as Figma files.

MiNi PhotoEditor: An Online WebGL Photo Editor with Effects, Filters, and Cropping — Includes some neat features like the before/after slider, lots of filter effects, and the ability to save/load some of the effects as ‘recipes’. Repo here.

Bits UI: Headless Svelte Components to Build Your Own Component Library — Includes 40+ open source, unstyled, and accessible components along with utilities, helpers, and lots of good documentation for implementation.

Font Generator: Generate Fancy Text with Unicode Characters — Type some text and this tool will generate endless fancy font options in plain Unicode that you can copy and paste. Examples: 𝔽𝕣𝕠𝕟𝕥𝕖𝕟𝕕 𝔽𝕠𝕔𝕦𝕤, snɔoℲ puǝʇuoɹℲ, F͜͡r͜͡o͜͡n͜͡t͜͡e͜͡n͜͡d͜͡ F͜͡o͜͡c͜͡u͜͡s͜͡, etc. However, it's worth exercising caution over accessibility and how certain devices (like screen readers) will handle this.