--- title: "How Photoshop uses browser tech to the limits" publication: "Frontend Focus" issue: 612 published_at: "2023-10-04" canonical_url: "https://frontendfoc.us/issues/612" --- Plus W3C gets a new CEO, and how you can contribute to Interop 2024. | Together with [![Bosch\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_1280,h_443/e_make_transparent/co_white,e_outline:10/udmp5biufp3th3c4xz0n.png)](https://www.bosch.com/careers/?utm_campaignid=frontend&utm_source=cooperpress&utm_medium=cpc&utm_campaign=wlab&utm_term=primary&utm_content=recognition) 🚀 Frontend **Focus** #​612 — October 4, 2023 | [Read on the web](https://frontendfoc.us/issues/612) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1696423384/fvgvpxhlgtxpyggyvghh.png)](https://csswizardry.com/2023/09/the-ultimate-lqip-lcp-technique/) [The Ultimate Low-Quality Image Placeholder Technique](https://csswizardry.com/2023/09/the-ultimate-lqip-lcp-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 aware of, along with how best to implement a solution. Harry Roberts [How Photoshop is Now on the Web](https://medium.com/@addyosmani/photoshop-is-now-on-the-web-38d70954365a) — Getting Photoshop onto the Web (where it has been for a little while now – we first covered [Photoshop's journey to the Web](https://web.dev/ps-on-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. Addy Osmani [![\](https://copm.s3.amazonaws.com/57426d88.png)](https://www.bosch.com/careers/?utm_campaignid=frontend&utm_source=cooperpress&utm_medium=cpc&utm_campaign=wlab&utm_term=primary&utm_content=recognition) [Feel the Power of More Than 420,000 Teammates and Work #LikeABosch](https://www.bosch.com/careers/?utm_campaignid=frontend&utm_source=cooperpress&utm_medium=cpc&utm_campaign=wlab&utm_term=primary&utm_content=recognition) — 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](https://www.bosch.com/careers/?utm_campaignid=frontend&utm_source=cooperpress&utm_medium=cpc&utm_campaign=wlab&utm_term=primary&utm_content=recognition). Bosch sponsor [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1696411104/lutcv4pqhgjoc2eegwyk.png)](https://flexboxfroggy.com/) [Flexbox Froggy: A Game for Learning CSS Flexbox](https://flexboxfroggy.com/) — 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. Codepip [Chrome Now Shows Each Active Tab’s Memory Usage](https://medium.com/@addyosmani/chrome-now-shows-each-active-tabs-memory-usage-4f74876538e6) — Chrome Canary has neat new hover cards that show the memory usage for each open tab. Addy Osmani **⚡️ IN BRIEF** - [Satya Nadella isn't thrilled](https://www.theregister.com/2023/10/03/microsoft_ceo_complains_about_googles/) about Google's defeault search deals. - The [CSS directionality `:dir()` pseudo-class](https://chromestatus.com/feature/5751531651465216) is set to ship in Chrome 120. [Here's the spec](https://www.w3.org/TR/selectors-4/#the-dir-pseudo). - Seth Dobbs is [the next CEO of W3C](https://www.w3.org/news/2023/w3c-announces-seth-dobbs-as-ceo/). - [AR One Sans](https://fonts.google.com/specimen/AR+One+Sans) is a new font on Google Fonts [designed for AR environments](https://twitter.com/googlefonts/status/1709220364876730419). - [Vivaldi now has a browser on iOS](https://www.theregister.com/2023/09/28/vivaldi_browser_ios/). WebKit-powered, too. - Search engine [DuckDuckGo has celebrated its 15th birthday](https://spreadprivacy.com/15-years-of-duckduckgo). 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1696411917/gid7pmhyliu7g5gd7mgm.png)](https://webkit.org/blog/14633/get-ready-for-interop-2024/) [Get Ready for Interop 2024](https://webkit.org/blog/14633/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. Jen Simmons (WebKit) ▶[What’s New in DevTools - Chrome 118](https://www.youtube.com/watch?v=-dOYxJnRhxQ&list=PLNYkxOF6rcIBDSojZWBv4QJNoT4GNYzQD&index=3) — 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. Chrome for Developers [Product For Engineers: A Newsletter Helping Flex Your Product Muscle](https://newsletter.posthog.com/) — Subscribe to get curated advice on building great products, lessons from PostHog, and best practices of top startups. Posthog sponsor [Upgrading Frontend Dependencies with Confidence](https://docusaurus.io/blog/upgrading-frontend-dependencies-with-confidence-using-visual-regression-testing) — 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](https://docusaurus.io/), shares a workflow based on GitHub Actions, Playwright, and Argos that's suitable for this task. Sébastien Lorber [From WebGL to WebGPU](https://developer.chrome.com/blog/from-webgl-to-webgpu/) — Some tips for WebGL developers who are migrating to WebGPU. François Beaufort François Beaufort also shares what's new in [WebGPU for Chrome 118](https://developer.chrome.com/blog/new-in-webgpu-118/). [Using The `Intl` Segmenter API](https://polypane.app/blog/using-the-intl-segmenter-api/) — Kilian [shared on Twitter](https://twitter.com/kilianvalkhof/status/1709211997663904033) that he lost some time “_trying to detect words in non-western language strings_” but then learnt about the [Intl.segmenter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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. Kilian Valkhof [Animating Multi-Page Navigations with Browser View Transitions and Astro](https://tympanus.net/codrops/2023/10/03/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](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) paired with Astro for a smoother navigation experience. Igor Penaque [Misconceptions Can Kill Accessibility Momentum](https://yatil.net/blog/misconceptions-can-kill-accessibility-momentum) — Reflecting on accessibility misconceptions and how new standards and technologies can inadvertently add to them. Eric Eggert [Making a Website is for Everyone](https://blog.jim-nielsen.com/2023/websites-are-for-normies/) — “_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._” Jim Nielsen [Websites in the Dock](https://adactio.com/journal/20520) — Did you know you can now launch web apps as standalone apps in (the newest version of) macOS? Jeremy Keith [The Angular Renaissance: Why Frontend Devs Should Revisit It](https://thenewstack.io/the-angular-renaissance-why-frontend-devs-should-revisit-it/) Loraine Lawson (The New Stack) 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/jycvvis1egjnzgebaybw.jpg)](https://simonwep.github.io/selection/) [Viselect: Let Users Visually Select DOM Elements](https://simonwep.github.io/selection/) — 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. Simon Reinisch [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto,b_white/v1696424312/lf5wxme1wzjtgdma8lwi.png)](https://github.com/addyosmani/critical) [Critical 6.0: Extracts and Inlines Critical Path CSS from HTML](https://github.com/addyosmani/critical) — A Node powered tool for when you want to optimize a page’s rendering to the max by inlining above-the-fold CSS. Addy Osmani [Add Figma Like Collaborative Features in a Few Lines of Code](https://www.ably.com/spaces) — Create collaborative features, from live cursors to avatar stacks with Spaces, our in-app collaboration SDK. Ably sponsor [blog-cells: Add Runnable, Interactive Code Snippets on Pages](https://github.com/rameshvarun/blog-cells) — 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](https://rameshvarun.github.io/blog-cells/). Varun Ramesh [MiniSim: A Native Mac Menubar App for Launching iOS and Android Emulators](https://www.minisim.app/) — It’s [open source](https://github.com/okwasniewski/minisim), includes various configuration settings for a handy mobile testing solution. Oskar Kwaśniewski [Sprite Your SVGs: Paste SVG Code to Generate an Optimized Sprite](https://sprite-your-svgs.vercel.app/) — 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. José Donato [Atrament.js: A Library for Smooth Drawing on HTML Canvas](https://github.com/jakubfiala/atrament.js) — [Demo.](https://www.fiala.space/atrament.js/demo/) Jakub Fiala 📬 **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://mastodon.social/@brandrick) & [Peter Cooper](https://twitter.com/cooperx86). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) [Ipx.](https://frontendfoc.us/open/612/*|UID|*?ipx=t)