~frontendfocus | Bookmarks (299)

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.

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.

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”.

Try KendoReact Free, npm-Install Available! — 50+ robust KendoReact components, including React Data Grid, DatePicker and DropDownList. No sign-ups, trials, or licenses required - you can use KendoReact Free in production, to experiment, or to quickly see what it's all about!

HTML5 Elements You Didn't Know You Need — If you read MDN on the regular, you might not need this article, but roundups like this are always popular nonetheless. Max digs into dialog, details, summary, meter, output and other elements here.

How to Move a Modal In On a… shape() — Making a modal open and then come flying into view along a defined shape, the modern way. It’s a neat effect.

ForesightJS: Predictive Mouse Intent Library — An interesting concept, with the entire page acting as a demo of sorts. The idea is to decrease latency by prefetching data or pages as soon as you think a user might be heading in that direction. Your mileage may vary and it’s less useful for touch devices.

Ruffle: A Flash Player Emulator — Built in Rust, Ruffle targets both desktop and the web using WebAssembly. It’s a retro idea, but if you have old Flash content to bring back to life, it’s an option. There are some demos to enjoy.

Docusaurus 3.8: The Docs-Oriented Static Site Generator — The popular React-powered site generator offers a variety of build performance enhancements but, most notably, ‘future flags’, a way to opt-in to forthcoming Docusaurus v4 changes ahead of time to be more prepared for the future (or at least test if you are).

Ways to Ensure Your Content Performs Well in Google's AI Experiences on Search — This is a rather new area to think about, but Google has been showing how keen it is to introduce more AI into its Search product, so a sort of modern variant of SEO is beginning to emerge. These guidelines are simple, but this is a growing area to keep...