--- title: "Photoshop in the browser is now a reality." publication: "Frontend Focus" issue: 514 published_at: "2021-10-27" canonical_url: "https://frontendfoc.us/issues/514" --- Plus, is 'component driven' design the future? | [![\](https://res.cloudinary.com/cpress/image/upload/v1602675575/hhmdxfk96fnbq3effjk1.png)](https://frontendfoc.us/) Frontend Focus #​514 — October 27, 2021 | [Read on the web](https://frontendfoc.us/issues/514) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1635261725/et7pugwcsesu5b5xt3hr.jpg)](https://www.smashingmagazine.com/2021/10/object-fit-background-size-css/) [A Deep Dive into `object-fit` and `background‑size` in CSS](https://www.smashingmagazine.com/2021/10/object-fit-background-size-css/) — Goes through just how `object-fit` and `background-size` work, when to use them, and why, along with some practical use cases and recommendations. Ahmad Shadeed [Photoshop's Journey to the Web](https://web.dev/ps-on-the-web/) — Just the idea of running software as complex as Photoshop _directly_ in the browser would have been hard to imagine even just a few years ago, but here we are: Thanks to new standardized web technologies, Adobe has now brought a public beta of Photoshop to the web. This opens up a lot of potential not just for Adobe but anyone with lofty browser-based ambitions. Thomas Nattestad & Nabeel Al-Shamma [![\](https://copm.s3.amazonaws.com/efa5c0e1.png)](https://www.telerik.com/blogs/diving-into-the-kendo-ui-grid-with-angular?utm_medium=cpm&utm_source=frontendfocus&utm_campaign=kendo-ui-angular&utm_content=blog-frontend-grid-deepdive) [Walkthrough of an Easy Angular Data Grid with Examples](https://www.telerik.com/blogs/diving-into-the-kendo-ui-grid-with-angular?utm_medium=cpm&utm_source=frontendfocus&utm_campaign=kendo-ui-angular&utm_content=blog-frontend-grid-deepdive) — You could write your own data grid, but why would you when this one already exists. See how easy it is to set up, bind data, group, sort, page, and more. Fiddle with the live samples or install it and try it for yourself, but don’t miss it. Progress Kendo UI for Angular sponsor [New HTTP Standards for Caching on the Modern Web](https://httptoolkit.tech/blog/status-targeted-caching-headers/) — Caching static content via a CDN or similar service is important, particularly for large sites, but can often be complicated and confusing. This post looks at new HTTP standards that are hoping to make this better, how they work, and why you should care. Tim Perry [The Start of a New Era for Responsive Web Design](https://uxdesign.cc/the-start-of-a-new-era-for-responsive-web-design-6658a6bbeb9b) — After designing for fixed screens, and then responsively, the author proposes we’re entering an era of ‘component driven’ design. Francois Brill [New WebKit Features in Safari 15](https://webkit.org/blog/11989/new-webkit-features-in-safari-15/) — A look at the new features available with the release of Safari 15.1, including `aspect-ratio`, CSS Grid Inspector, ES6 Modules in Workers and ServiceWorkers, WebGL2 and more. Jen Simmons **⚡️ Quick bits:** - The hugely valuable Wayback Machine project from the Internet Archive got started [20-years ago this week](https://www.webdesignmuseum.org/web-design-history/wayback-machine-2001). - Reminder: The [State of CSS survey for 2021](https://stateofcss.com) is now open and seeking your response. - [New material has been added](https://twitter.com/chromiumdev/status/1453096831668326400) to Google's Learn CSS course, including how to take advantage of CSS properties like `::marker` and `list-style`. - As [Lea Verou points out here](https://twitter.com/leaverou/status/1452571681839534082), the web probably needs its own emoji picker (or at least a way to invoke the OS native one). - A smart Web developer created a fake VS Code-esque Web page to [keep an eye on the cricket scores.](https://cric-code.pankajtanwar.in/) 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1635327997/stg0tzpvq0uhxfjxmhry.png)](https://ishadeed.com/article/prevent-scroll-chaining-overscroll-behavior/) [Prevent Scroll Chaining with Overscroll Behaviour](https://ishadeed.com/article/prevent-scroll-chaining-overscroll-behavior/) — Looks at the `overscroll-behavior` CSS property, what problem it solves, how it works, and where we can use it. Ahmad Shadeed [Building a Multi-Select Component](https://web.dev/building-a-multi-select-component/) — A foundational overview of how to build a responsive, adaptive, and accessible, multiselect component for sort and filter user experiences. Adam Argyle [How _Not_ To Create a Menu Burger Button](https://www.htmhell.dev/26-tasty-buttons/) — A collection of bad practices in HTML - looking at menu buttons patterns, copied from real websites. Manuel Matuzović [Why 'Outdated' jQuery Is Still the Dominant JavaScript Library](https://thenewstack.io/why-outdated-jquery-is-still-the-dominant-javascript-library/) — jQuery is one of the longest running and most influential JavaScript libraries on the web. How has it stood the test of time? Richard MacManus “_A staggering 78% of the top 1 million websites use jQuery in some way, according to BuiltWith._” ___ Richard MacManus ["Dark Mode" vs "Inverted"](https://bradfrost.com/blog/post/dark-mode-vs-inverted/) — An approach to help clarify the difference between “dark mode” and “components rendered on a dark background” within your design system. Brad Frost [Building An Effective Image Component](https://web.dev/image-component/) — An out-of-the-box solution to optimize images for Next.js. It optimizes loading, compression & responsiveness. Now with AVIF support in [Next.js 12](https://nextjs.org/blog/next-12). Sohoni, Erickson, Castle [Shortcut Puts the Agile in Agile and the “Can” in Kanban](https://shortcut.com/?utm_source=cooperFRONTEND&utm_medium=spon_nl&utm_campaign=prospecting&utm_content=kanban) Shortcut (formerly Clubhouse.io) sponsor [In-Page Filtered Search with Vanilla JavaScript](https://css-tricks.com/in-page-filtered-search-with-vanilla-javascript/) Hilman Ramadhan [100 Bytes of CSS to Look Great Everywhere](https://www.swyx.io/css-100-bytes/) Shaun Wang [Expandable Sections Within a CSS Grid](https://css-tricks.com/expandable-sections-within-a-css-grid/) Kev Bonett Jobs [Work From Anywhere in the World: Remote Sr. Front-End Engineer](https://grnh.se/561eefad3us) — B2B SaaS company seeks engineers who love building interactive data apps, being a part of a global community, and great hot sauce. Chili Piper [Find Frontend Engineering Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-frontendfocus%29&utm_content=find-your-next-job) — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers. Hired 🔧 **Code, Tools and Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1635333898/rwepc5uoexhhhmp1cra9.png)](https://huetone.ardov.me/) [Huetone: Use The LCH Color Space to Come Up with Predictable and Accessible Color Palettes](https://huetone.ardov.me/) — The creator explains the tool in detail [in this Twitter thread](https://twitter.com/ardovalexey/status/1447329411678806023). alexey ardov [Box Shadow Generator: A Visual Tool to Generate Code for CSS Box Shadows](https://box-shadow.art/) — You can choose from a gallery of predefined box shadow settings or create and customize your own. Andrei Surdu [Free Activity Feeds & Chat APIs for Qualifying Teams](https://getstream.io/blog/maker-account/?utm_source=frontend_focus&utm_medium=newsletter_content_ad&utm_content=developer&utm_campaign=FrontEndFocus_Oct2021_MakerAccount) — Unlock enterprise-grade features, functions, and UI components completely free for your startup or side project with the Maker Account from Stream. Stream sponsor [Blobity: Level Up Your Cursor Game](https://blobity.dev/) — This script and API lets you do all sorts of creative things with the user’s cursor, which the page itself demonstrates — _the demo is similar to how the cursor on iPad OS works_. Note that it’s free for open-source projects only. Georgy Marchuk [Image Compressor: Compress & Optimize JPEG and PNG Images](https://imagecompresser.com/) — Yet another option for doing manual image compression. This one lets you upload multiple images and includes optional tools for resizing, converting, and mirroring. NAZRUL ISLAM --- 🍓 Do you work with the [Jamstack](https://jamstack.org/what-is-jamstack/) (_that's a JavaScript, API and Markup architecture stack_)? If so, you may enjoy Brian Rinaldi's JAMstacked, it's a fortnightly round-up covering the growing and rapidly evolving Jamstack ecosystem. Here's a little taste of the sorts of things shared in [the latest issue](https://jamstack.email/issues/41): [![JAMstacked\](https://res.cloudinary.com/cpress/image/upload/v1606129218/tvgfsuez7iifxdxzxn1t.png)](https://jamstack.email/) Want to give it a try? **[Tap here to subscribe](https://jamstack.email)** - Matt Biilmann of Netlify [discusses some key concepts that will impact the future of Jamstack](https://www.youtube.com/watch?v=phC14xfwvjc&list=PL58Wk5g77lF-XaNacKxWk7yOKgeCMveAS&index=2) with folks like Evan You, Rich Harris and more - from the recent Jamstack Conf. - It's often assumed that Jamstack or a serverless architecture are basically one and the same. [This post from Colby Fayock](https://snipcart.com/blog/jamstack-serverless-backend) breaks down the difference and shows how both can be combined. - Raymond Camden looks at [the upgrade experience for Eleventy 1.0](https://www.raymondcamden.com/2021/10/08/eleventy-10-upgrading-experience) (still in beta). 📬 **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://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/peterc). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*)