~frontendfocus | Bookmarks (247)

Emoji-Fallback.js: Provide Support for Emojis on All Browsers — Replaces emoji characters with emoji images on devices that don't have emoji support.

📊  The State of CSS 2024 Survey Results — Sacha Greif notes how 2024 may go down as something of a turning point between classic CSS and ‘new CSS’ — what with the many new features and tooling introduced in recent years now reaching a level of widespread browser support, and more importantly, usage. Lots of interesting data points to dig into here (shoutout...

So, Your CMS Blew Up. Any Decent WordPress Alternatives Out There? — No matter which side of the debate you find yourself, I think it’s fair to say the mess with WordPress has been universally frustrating in some way or another. As such, Ernie — in his typical engaging style — outlines some CMS alternatives that you may at least have on your radar if...

Help Choose the Final Syntax for Masonry in CSS — The WebKit team shares a detailed update on where the CSS Working Group is at with the planned introduction of masonry-style layout support in CSS. A lengthy post that highlights design principles, performance considerations, complexity concerns, and more (plus how you can share your thoughts).

Prompt, Run, Edit, and Deploy Full-Stack Web Apps with bolt.new — StackBlitz recently released in-browser AI web development agent: bolt.new! Give it a try today.

Smarter than 'Ctrl+F': Linking Directly to Web Page Content — A powerful feature of the modern web platform that allows for precise linking to specific text within a web page without the need to add an anchor.

CSS min() All The Things — Experimentations with the CSS min() function, exploring its flexibility with different units to determine “if it is the be-all, end-all for responsiveness”.

Hyper-Responsive Web Components — Dives into the nuance of getting an embeddable call-to-action sign up component working in as many places as possible (any position, and viewport, any amount of content).

Khoshnus: A Library to 'Bring Life' to SVG Text — A library for ‘bringing life to static text in an artistic way.’ Essentially it takes SVG text and animates it into existence on your page.

CSS Spring Easing Generator: Make Generating Spring Easings More Intuitive — The tool allows you to customize two main settings: perceptual duration (in milliseconds) and bounce (%). You an also select from three presets and the code is generated as CSS variables for use with CSS animations.

HEX·P3: Quickly Convert HEX Colors to the Display P3 Color Space — The resulting code uses the relatively new CSS color() function with the display-p3, which according to the spec, ‘enables more vibrant greens and reds than the sRGB color gamut’.

Possible Future CSS: Tree-Counting Functions and Random Values — A look at two possible CSS features (tree counting functions and randomness) from the Level 5 spec, how we can prototype them now, and a look at what their use cases may be — via interactive demos.

How Should <selectedoption> Work? — A new HTML element! We’re getting a way to style and customize <select> elements in certain situations, via <selectedoption>. But there are concerns on sync and state issues, and Jake seeks feedback on the practicalities of the intended behavior.

Build a Daily Workout Tracker with Clerk, Convex, and Expo — "Daily Reps" is a workout tracker app to set daily goals & track progress, resetting daily. Built with React Native & Expo, it uses Clerk for user management & Convex for real-time data, offering a powerful cross-platform fitness tracking solution.

HTML for People — An approachable, friendly set of teachings around creating HTML pages, going from the basics, to adding style, getting things online, and exploring reusable components too. It’s a well presented, understandable starter guide of sorts — a good one to share with any beginner.

Announcing Gitpod Flex — Gitpod Flex automates your full dev environment—yes, including tools and secrets. Speed up work, boost productivity, and collaborate securely with zero-trust security whether coding locally, in the cloud, or on-prem.

'I’ve Been Doing Blockquotes Wrong' — If you skipped past HTML for People above because you’re an HTML expert, Michelle’s moment of reflection around the blockquote element might make you pause for thought. HTML is hard, she notes, not least because it’s both easy and relatively safe to write bad HTML (unlike with bad JavaScript).

Why GOV.UK’s 'Exit This Page' Component Doesn’t Use the 'Escape' Key — The considerations behind a relatively straightforward component: a big red button that sticks to the top of the screen. If you click it, you’re quickly taken away from the page you’re viewing to something inconspicuous.

Build a Static RSS Reader to Fight Your Inner FOMO — A look at creating a basic daily updating RSS feed reader with Astro.

fast-grid: The 'World's Most Performant' DOM-Based Web Table — A bold claim for sure, but you can see for yourself using the online demo, which lets you filter, sort, and scroll simultaneously for a true test.

balloons-js: An Animated Balloons Effect for Your Site — Try it here. Definitely needs a plugin that lets you “pop” the balloons with mouse clicks!

STDF: Mobile Web Component Library Built with Svelte & Tailwind — Based on the standard Web Components API and includes various components for layout, navigation, data-based, info display, feedback, and some other typical options.

Color Thief: Grab Color Palettes from Images in JavaScript — Given an image, this uses canvas to return a list of the dominant colors.

The Proposed Interop 2025 Focus Areas — A few weeks back we mentioned how ideas and proposals were being sought for Interop 2025. You can now look over all of the ideas put forward, share your feedback, and upvote those you like the look of. Here's how the full proposal selection process works, with the chosen priorities announced next February.