~frontendfocus | Bookmarks (242)

Frontend Practice: A Practice Ground for Improving Frontend Skills — A collection of real sites each with a spec sheet that you can use to recreate the project to improve your skills.

Tailwind Gradient Generator: Create CSS Gradients for Tailwind Projects — Select to preview any of the existing gradients in the gallery and customize the ‘direction’ of the gradient. You can also preview the gradient on text (as seen above) or just as a regular background.

Loadership: An Interactive Tool to Build and Customize Pure CSS Loading Animations — Click any of the dozen or so prebuilt loaders (which are unique!) and you can customize them to your liking (color, speed, size, etc).

Enhance: Enhance and Upscale Your Images Using AI — Yet another single-purpose image editing tool from Addy Osmani, this one is a simple AI-powered image upscaler/enhancer that you can try out online here.

svg2pdf.js: SVG to PDF Conversion in the Browser — There’s an online playground to give you a feel for what it can do.

shiki-stream: Generate "Streaming" Syntax Highlighted Code — Based on the popular Shiki syntax highlighter, this will reveal the selected code line by line (i.e. in a “stream”), which you can play with here.

A Deep Dive into the Inline Background Overlap Problem — If you want to get a semi-transparent background behind some inline text with nice padding you’ll likely face an overlap problem. Ana goes deep into exploring the solution along with some of the more complex variations of the issue that we could face.

Introducing command and commandfor — Chrome 135 (and preview versions of Firefox and Safari) add support for two new HTML attributes, command and commandfor. They’re for adding declarative actions to HTML buttons without directly requiring JavaScript.

New: Secure In-Person Payments for Mobile Apps — Square's new Mobile Payments SDK is PCI-compliant, free to integrate, and has no API usage costs. With support for a diverse range of hardware, our in-person payment solution is reliable whether on the move, at a kiosk, or over the counter. Try it now.

🕵️‍♂️ Buying Browser Extensions for Fun and Profit — An interesting look into the shadowy world of how browser extensions, with hundreds of thousands of users, can be easily bought — potentially by malicious proprietors.

Styling Counters in CSS — A guide to styling counters, going from the most basic ways to style lists directly in HTML to advanced customization techniques that are even capable of making things that aren’t lists look like lists.

Self Gap — Some thinking on how best to control a custom gap between some flex or grid elements. As ever, Ahmad has code examples and solid demos to help explain the approaches considered.

Breadcrumbs are 'Dead' in Web Design — Once a clear staple in web design, the author argues that they’ve now become somewhat obsolete in “today’s non-linear, context-driven web, where dynamic and personalized navigation systems take precedence”.

Design Systems Need a Color Space — “Software developers and designers have been able to ignore colour spaces for a long time, but it’s about to become required knowledge.”

Chilled Out Text Underlines — Shares a nice treatment for styling underlines. Worth keeping in mind accessibility considerations though.

Styling an HTML Dialog Modal to Take the Full Height of the Viewport — Simon encountered an issue with an unwanted gap appearing when using the dialog element. Here’s how it was solved.

Web Components vs. Framework Components: What’s the Difference? — A comprehensive comparison between Web Components and framework components, discussing their definitions, strengths, weaknesses, and various performance considerations.

Use Cases for the Document Picture-in-Picture API — A way to open a floating, always-on-top window (‘picture-in-picture’) that can display arbitrary HTML content. Chrome only, though.

But How to Get to That European Cloud? — A thoughtful take on a pressing need for an increase in geographically diverse web infrastructure. Touches on broader political considerations that, naturally, not everyone may see the same way — but, ‘don’t put all your eggs in one basket’ is generally good advice.

Cool Native HTML Elements You Should Already Be Using — Even experienced developers can be dazzled by all the new things added to HTML over the years. Harrison helps you catch up with any blind spots here with a look at numerous lesser-used options.

How to Do Thoughtful Code Reviews? — Good code reviews start with empathy and clear communication. Keep PRs small, focus on collaboration over criticism, and be specific in your feedback. Automate the repetitive checks to let humans focus on what matters. Read more.

Super 'Crispy' SVG Icons — This is a solid and meticulous look at the various design considerations and techniques that go into creating clear, purposeful SVG icongraphy — think size, style, paths, optimizations, etc.

View Transitions Applied: Smoothly Animating a border-radius with a View Transition — Bramus shows us how to smoothly animate properties like border-radius during View Transitions. There’s also a related video talk if you want to get up to speed on all things View Transitions.

CSS Relative Colors — Another excellent guide from Ahmad exploring the syntax behind CSS relative color. This comprehensive, interactive explainer shares how we can now dynamically generate and modify colors based on existing ones directly in CSS (without the need of a pre-processor). Looks at practical use cases, fallbacks, contrast ratio, and more.