--- title: "Here's why you shouldn't make viewport assumptions" publication: "Frontend Focus" issue: 607 published_at: "2023-08-30" canonical_url: "https://frontendfoc.us/issues/607" --- Plus the State of CSS survey results are out. | 👋 **Hey!** After a week off, we're back with more frontend updates. _Let's get to it!_ __ _[Chris Brandrick](https://twitter.com/chrisbrandrick), Editor_ Together with [![SurrealDB\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,e_trim,w_800,h_172/e_make_transparent/co_white,e_outline:9/ghzyk8gpuceqb3mpcbrm.png)](https://sdb.li/frontend-focus) 🚀 Frontend Focus #​607 — August 30, 2023 | [Read on the web](https://frontendfoc.us/issues/607) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1693313670/lvt6ckpruvxfzhszc1ka.png)](https://viewports.fyi/) [The Ideal Viewport Doesn’t Exist](https://viewports.fyi/) — In an attempt to answer the question “_how fragmented are viewport sizes?_” a group of developers collated over 120,000 datapoints with over 2,300 unique viewport sizes and has presented it superbly here. The takeaway is that “_you simply do not know how users are going to visit your website or web app_”. Leanne Renard, Liridon Hasani and Andy Bell ℹ️ A caveat to be aware of: _the data mainly comes from users in the USA and Europe_. [Use Web Components for What They’re Good At](https://nolanlawson.com/2023/08/23/use-web-components-for-what-theyre-good-at/) — Nolan weighs in on a recent debate around the use of Web Components, highlighting the tradeoffs to consider when using them. Nolan Lawson [![\](https://copm.s3.amazonaws.com/c5995e63.png)](https://sdb.li/frontend-focus) [Join Us at SurrealDB World - The Future Database for Cloud-Native Applications](https://sdb.li/frontend-focus) — Join SurrealDB World Online on September 13th, 2023 at 10:00 AM BST as we unveil SurrealDB 1.0.0 alongside some exciting announcements that will undoubtedly shape the future of the database industry. SurrealDB sponsor [⭐️ The _State of CSS 2023_ Survey Results](https://2023.stateofcss.com/en-US/) — Over the past few years not only have we seen an uptick in new CSS features, but we’ve also seen browsers adopting these new capabilities at a much faster pace. As such the key takeaway from this year’s survey seems to be that usage of CSS frameworks are now on something of a downward slope. As ever, there is a ton of stuff to dig into here — a real lay of the land for all things CSS. Devographics **⚡️ IN BRIEF** - Support for CSS Nesting is now in Firefox 117, meaning browser support is now widespread. Wes Bos shows us [🐦 how it works in this Twitter/X thread](https://twitter.com/wesbos/status/1696201171587809761). - The handy [WebGlossary.info](https://webglossary.info) explains over 3,500 web development terms and concepts. One to bookmark. - We're seeing more and more of this around the World: [Child safety bills are reshaping the internet](https://www.theverge.com/2023/8/29/23849375/kosa-child-safety-free-speech-louisiana-utah-parental-consent) for everyone. - What's the best way to write `alt` text for code snippet images shared on social? [Ben Myers has given it some thought](https://benmyers.dev/blog/code-snippet-alt-text/). 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1693312546/pnzahzhyabpkrpmnwlsc.png)](https://blog.richardekwonye.com/bezier-curves) [Bézier Curves and the Logic Behind Them](https://blog.richardekwonye.com/bezier-curves) — A superb dive into the logic behind bézier curves as used in CSS animations and visual elements. Really well documented, with excellent visual explainers. Richard Ekwonyé [Falling For Oklch: A Love Story of Color Spaces, Gamuts, and CSS](https://www.smashingmagazine.com/2023/08/oklch-color-spaces-gamuts-css/) — An exploration of the Oklch color space and how we can start using it in CSS today. Geoff Graham (Smashing Magazine) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1693390815/oogua2oofxaf6selmv2t.png)](https://maximmcnair.com/webgl-image-processing) [WebGL Image Processing](https://maximmcnair.com/webgl-image-processing) — Explorations of several image processing techniques using GPU shaders in the browser, covering color correction, blend modes, dithering, and more. Maxim McNair [Create a Culture of Code Coverage with Codecov](https://about.codecov.io/codecov-free-trial?utm_medium=paid-community&utm_source=frontendfocus&utm_campaign=codecov-fy24q3&utm_content=newsletter-codecov-trycodecov) — Identify untested code to help you find bugs before they ever get pushed to production. Get started today. Codecov by Sentry sponsor [A Few Interesting Ways To Use CSS Shadows (For More Than Depth)](https://www.smashingmagazine.com/2023/08/interesting-ways-use-css-shadows/) — A few experiments with different shadow effects (using two CSS properties and a filter) to make interesting hover effects, different text styles, and even casting shadows _on other shadows._ Preethi Sam [How to Make Next-Level Figma Plugins: Auth, Routing, Storage, and More](https://evilmartians.com/chronicles/how-to-make-next-level-figma-plugins-auth-routing-storage-and-more) — A look at building full-featured, frontend-app-style Figma plugin, with storage, auth, routing, and more, with tool recommendations and other tips. Rita Klubochkina [How to Create Isometric Diagrams using SVG](https://www.jointjs.com/blog/isometric-diagrams) — A good introduction to the principles of isometric drawing. Artur Khokhlov ▶[Debugging Interaction to Next Paint](https://www.youtube.com/watch?v=nQByr5Yyclw) Brian Ramirez [Why Tailwind CSS 'Won'](https://matt-rickard.com/why-tailwind-css-won) Matt Rickard 🧑‍💻 JOBS [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) — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now. Hired 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1693313985/vivl1lzxggrh7xcmpi2n.png)](https://tezumie.github.io/Image-to-Pixel/) [Image-To-Pixel: An Editor to Convert Photos to Pixel Art](https://tezumie.github.io/Image-to-Pixel/) — Built with p5.js, you can customize the pixelation by choosing a dither amount, dither style, posterize level, and you can even upload your own color palette for the dithering. [GitHub repo](https://github.com/Tezumie/Image-to-Pixel). Tezumie [Peaks.js 3.0: View and Interact with Audio Waveforms](https://waveform.prototyping.bbc.co.uk/) — A JavaScript component for browser-based audio waveform visualization that comes from the BBC’s R&D department. There’s a live example on the homepage. [GitHub repo.](https://github.com/bbc/peaks.js) BBC [React Authentication — Without Complexity](https://userfront.com/tutorials/react-authentication?&utm_source=frontendfocus&utm_medium=newsletter&utm_campaign=sponsored_link&utm_content=react_authentication) — Userfront streamlines authentication & access control so engineers can focus on their core business. Read the docs now. Userfront sponsor [Better Select: A Web Component for a Better Select Element](https://github.com/siit-dev/better-select) — Will fallback to a regular select, or optionally a native select on mobile devices, and has keyboard support. Try some demos [here](https://siit-dev.github.io/better-select/vanilla/). Smart Impact IT [SnippetBuilder: Create Pretty Screenshots of Code](https://snippetbuilder.com/) — This kind of tool isn’t unique but this one has some unique features, like the ability to add multiple “editors” to the screenshot, drag and drop tech logos, and a variety of pre-made gradients for the background. Sachin Chaurasiya 💡 [Chalk.ist](https://chalk.ist/) is another code-to-image tool we particularly like. [Default Composer: Tiny JavaScript Utility to Set Default Values for Nested Objects](https://github.com/aralroca/default-composer) — It will replace empty strings, arrays, objects, and null/undefined, with default values that you set, to simplify the process of filling empty slots in various objects in your code. Aral Roca Gomez [Toools.design: An Archive of 1000+ Design Resources](https://www.toools.design/) — A well presented directory divided into 18 categories (icons, typography, stock photos, design tools, podcasts, etc.), where you can find a variety of products, tools and resources. Pascal Strasche 📬 **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/607/*|UID|*?ipx=t)