~frontendfocus | Bookmarks (291)

Sprite Your SVGs: Paste SVG Code to Generate an Optimized Sprite — CSS sprites aren’t so much of a thing nowadays, but if you have a use case for an SVG sprite, this helps with the code generation.

Add Figma Like Collaborative Features in a Few Lines of Code — Create collaborative features, from live cursors to avatar stacks with Spaces, our in-app collaboration SDK.

blog-cells: Add Runnable, Interactive Code Snippets on Pages — Like embedding a JSFiddle or Codepen, but these are a cleaner and minimal solution that work well in tutorials and in SSGs like Jekyll or Hugo. Try some examples here.

MiniSim: A Native Mac Menubar App for Launching iOS and Android Emulators — It’s open source, includes various configuration settings for a handy mobile testing solution.

The Ultimate Low-Quality Image Placeholder Technique — Harry notes the importance in offering a reasonably pleasant experience for users who find themselves waiting for images to load, explaining how Low-Quality Image Placeholders (LQIP) are one such possible answer. The problem however is they don’t particularly play nice with Core Web Vitals and Largest Contentful Paint (LCP). This post goes into any nuances to be...

How Photoshop is Now on the Web — Getting Photoshop onto the Web (where it has been for a little while now – we first covered Photoshop's journey to the Web in 2021) was the result of both a lot of collaboration and a myriad of modern browser technologies (WebAssembly, Web Components + Lit, Service Workers & more) that Addy covers in this post.

Feel the Power of More Than 420,000 Teammates and Work #LikeABosch — At Bosch, we shape the future with high-quality technologies and services to inspire people and improve their lives. And it’s our people who make us remarkable. Our success is your success. Let’s celebrate together. Learn more.

Flexbox Froggy: A Game for Learning CSS Flexbox — We first linked this eight years ago but this is still a neat introduction to flexible box layout which is now, at least, supported by basically every visual browser going.

Chrome Now Shows Each Active Tab’s Memory Usage — Chrome Canary has neat new hover cards that show the memory usage for each open tab.

Get Ready for Interop 2024 — What you need to know about the cross-browser effort so far, what the plan is for Interop 2024, and how you can contribute to what’s included for next year.

▶  What’s New in DevTools - Chrome 118 — Jecelyn Yeen runs through the DevTools updates we can now find in Chrome 118, including the ability inspect the CSS @ property in the Styles pane, being able to emulate prefers-reduced-transparency and more.

Product For Engineers: A Newsletter Helping Flex Your Product Muscle — Subscribe to get curated advice on building great products, lessons from PostHog, and best practices of top startups.

Upgrading Frontend Dependencies with Confidence — Tests can provide a way to see if our app logic isn’t working the way we expect, but what if a frontend component is rendering incorrectly? We can turn to visual regression testing. Sébastien, known for his work on Docusaurus, shares a workflow based on GitHub Actions, Playwright, and Argos that's suitable for this task.

Using The Intl Segmenter API — Kilian shared on Twitter that he lost some time “trying to detect words in non-western language strings” but then learnt about the Intl.segmenter browser API. It has a ton of functionality for editing and formatting of text and numbers. This post shows us how to use it.

Animating Multi-Page Navigations with Browser View Transitions and Astro — A beginner-friendly guide, with demos and code, that walks you through the use of the Browser View Transitions API paired with Astro for a smoother navigation experience.

Misconceptions Can Kill Accessibility Momentum — Reflecting on accessibility misconceptions and how new standards and technologies can inadvertently add to them.

Making a Website is for Everyone — “The web’s low barrier to entry led me to a career that has been a boon for my life. I hope it can do the same for others.”

Websites in the Dock — Did you know you can now launch web apps as standalone apps in (the newest version of) macOS?

Viselect: Let Users Visually Select DOM Elements — If you’ve got a variety of elements and you want users to be able to select them in groups, individually, or even in multiple groups, this lets you offer that functionality easily. Can be used in a vanilla fashion or with integrations for React or Vue.js.

Critical 6.0: Extracts and Inlines Critical Path CSS from HTML — A Node powered tool for when you want to optimize a page’s rendering to the max by inlining above-the-fold CSS.

Cloudflare Fonts: Enhancing Web Font Privacy and Speed — A new one-click service coming to Cloudflare users that means sites using Google Fonts will be able to load the fonts from their own domain rather than from Google and reduce the number of round trips from eight to one.

The Design System Ecosystem — This post goes deep into the weeds on a ‘layer-cake approach’ to creating robust, mature design systems. Of course, the advice isn’t one size fits all, but there’s plenty of good takeaways here.

Take the State of HTML 2023 Survey (and Change the Web) — A new survey from the folks behind State of JavaScript and State of CSS. This is a natural companion to the other two surveys and should result in a more complete overview of the web platform as a whole. We encourage everyone to fill it out as answers submitted by October 1 will...