--- title: "When should you use infinite scrolling?" publication: "Frontend Focus" issue: 558 published_at: "2022-09-07" canonical_url: "https://frontendfoc.us/issues/558" --- Plus did you know you can access a user's camera with just HTML? | #​558 — September 7, 2022 | [Read on the web](https://frontendfoc.us/issues/558) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1662551481/qg4qxttunbvtuubdixcr.jpg)](https://csswizardry.com/2022/09/critical-css-not-so-fast/) [Critical CSS? Not So Fast!](https://csswizardry.com/2022/09/critical-css-not-so-fast/) — Considered thoughts from Harry here on the 'Critical CSS' pattern, and how it often falls short in real world usage, being an “_expensive technique to implement, which seldom provides the benefits that many developers expect_”. The takeaway is that this approach has benefits, but the implementation matters, and retrofitting is a no-go. Harry Roberts [Infinite Scrolling: When to Use It, When to Avoid It](https://www.nngroup.com/articles/infinite-scrolling-tips/) — “_Infinite scrolling minimizes interaction costs and increases user engagement, but it isn’t a good fit for every website. For some, pagination or a Load More button will be a better solution._” You would be forgiven for screaming "never!" at this question.. ;-) Tim Neusesser (Nielsen Norman Group) [![\](https://copm.s3.amazonaws.com/cf8729a4.png)](https://www.datadoghq.com/dg/real-user-monitoring/ux-monitoring/?utm_source=advertisement&utm_medium=newsletter&utm_campaign=dg-cooperpress-applications-ww-frontend-p-uxmonitoring) [Simplify Front-End Performance Monitoring by Analyzing UX Data](https://www.datadoghq.com/dg/real-user-monitoring/ux-monitoring/?utm_source=advertisement&utm_medium=newsletter&utm_campaign=dg-cooperpress-applications-ww-frontend-p-uxmonitoring) — Utilize critical performance data to understand how users experience your applications with Datadog Real User Monitoring. Analyze user errors in real-time and resolve front-end issues fast. Datadog sponsor [Is it `:modal`?](https://web.dev/is-it-modal/) — This CSS pseudo-selector (available in Chrome 105, and already in Firefox and Safari) gives you a way to select elements that are “modal”, avoiding the need to manage classes in JavaScript. Jhey Tompkins (Chrome Developers) **⚡️ IN BRIEF** - The source code of [the WebKit project is now managed on GitHub](https://webkit.org/blog/13140/webkit-on-github/). - Font Awesome has a [new 'sharp' icon style](https://blog.fontawesome.com/introducing-font-awesome-sharp/). - Tech policy expert and open web advocate Heather Burns has a new book on the way [covering data privacy and how to understand it](https://www.smashingmagazine.com/2022/09/understanding-privacy-pre-release/). - Here's a list of [some of the best YouTube channels for front-end devs](https://dailydevlinks.com/best-youtube-channels-for-front-end-developers-2022/). 📙 **Tutorials, Articles & Opinion** [You Can Access A User's Camera with Just HTML](https://austingil.com/html-capture-attribute/) — Did you know about the HTML capture attribute? It’s a neat way to add a nicer user experience if you know that your mobile users are going to be taking a picture or a video or a voice recording at the time of upload. Austin Gil [How to Use `localStorage`: An Easy Guide](https://blog.bitsrc.io/how-to-use-localstorage-in-javascript-an-easy-guide-91aad566e4de) — The API called Web Storage provides two basic mechanisms for storing information in the user’s browser: `sessionStorage` and `localStorage`. Justin Graysen ▶[Stack Overflow Podcast: Exploring the Art & Practice of Programming](https://stackoverflow.blog/podcast/?utm_source=FEFocus&utm_medium=newsletter&utm_campaign=editaudio) — Your home for weekly conversations with fascinating guests about how technology is made and where it’s headed. Stack Overflow sponsorpodcast [![\](https://res.cloudinary.com/cpress/image/upload/w_420,e_sharpen:60/v1662552577/io5ksjfgrxvsd13s3o8u.jpg)](https://css-tricks.com/hacking-css-animation-state-and-playback-time/) [Hacking CSS Animation State and Playback Time](https://css-tricks.com/hacking-css-animation-state-and-playback-time/) — You may have spotted [this CSS-only Wolfenstein project](https://codepen.io/coolwanglu/full/VwXyavg) a few weeks ago — well the author explains that in a nutshell, the project is “_nothing but a carefully scripted long CSS animation_”. This post looks at some of the how-to behind it, and the behavior of animation properties. Lu Wang [So Your Designer Wants Stuff to Overlap…](https://chenhuijing.com/blog/so-your-designer-wants-stuff-to-overlap/) — Explores the solutions available to us now when implementing layered layouts, noting the new options in our ever-evolving CSS toolbox that are well-suited to handle specific ‘overlapping’ use-cases. Hui Jing [HTML Markup Tips for Accessible Websites](https://thenewstack.io/html-markup-tips-for-developing-accessible-websites/) — Improving HTML markup can make websites more accessible for assisted technology and help developers with automated testing. Loraine Lawson [Parents Counting Children in CSS](https://www.matuzo.at/blog/2022/counting-children/) — Using `:has()` to select parent elements that have a specific number of children. Manuel Matuzović [Making a Morphing 3D Sphere with Three.js](https://fjolt.com/article/javascript-three-js-morphing-sphere) — A striking, modern effect for the Web. CodePen demo included. Johnny Simpson [Flutter for Front-End Developers](https://css-tricks.com/flutter-for-front-end-web-developers/) Obumuneme Nwabude ✏️ Web Font of the Week [Monocraft](https://github.com/IdreesInc/Monocraft) — This fan-project programming font is perfect for those devs who like Minecraft _a bit too much_ — it's based on the typeface used in the popular game. [![\](https://res.cloudinary.com/cpress/image/upload/w_600,e_sharpen:60/v1662543771/jbxpvj6a5bnbubwjcqqp.jpg)](https://github.com/IdreesInc/Monocraft) 🔧 **Code, Tools & Resources** [Beacon: Calculate the Environmental Impact of a Page](https://digitalbeacon.co/) — Enter a URL or use the Chrome or Firefox extension. Generates a breakdown of the website’s carbon footprint, similar to what you’d find in a typical web perf analysis. aline [Loading Disco: An Alternative to the Loading Spinner](https://joebell.co.uk/sketches/loading-disco) — Neat demo, though more subtle and less disco-y than I was expecting (perhaps to your relief) :-) Joe has used a neat technique and he invites you to _“copy, remix and improve to your heart’s content.”_ [GitHub repo.](https://github.com/joe-bell/loading-disco) Joe Bell [Move Past Job Titles and Do More of What You Love](https://www.polywork.com/?utm_source=newsletter&utm_medium=cooperpress&utm_campaign=front3) Polywork sponsor [JSON Hero: A Beautiful JSON Viewer](https://jsonhero.io/) — Paste in some JSON or enter a URL to a JSON file and this tool provides a clean and beautiful UI packed with features. API Hero [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1662543374/szkwtitsesn7gannodfw.png)](https://www.cssgradienttext.com/) [Gradient Text Generator: Generate CSS for Gradient Backgrounds on Text](https://www.cssgradienttext.com/) — Two drawbacks to this: Requires use of vendor prefixes, and you need to add `!important` to the `-webkit-background-clip` property (apparently to override browser styles?). Seems to work in all modern browsers though. Ejad Solutions [JSON Crack: A Simple Visualization Tool for JSON Data](https://jsonvisio.com/) — The interface is nice and allows you to auto-format and display the visual representation of your JSON data in a few different ways. Aykut Saraç [Create Tailwind: A CLI to Scaffold Tailwind-Ready Projects](https://github.com/AndrejJurkin/create-tw) Andrej Jurkin [Font Awesome 6.2](https://github.com/FortAwesome/Font-Awesome) ↳ Popular SVG, font, and CSS toolkit. This version [adds a new 'Sharp' icon set](https://blog.fontawesome.com/introducing-font-awesome-sharp/). [web-vitals 3.0.1](https://github.com/GoogleChrome/web-vitals) ↳ Google's web metric measuring library. [styled-jsx 5.0.6](https://github.com/vercel/styled-jsx) ↳ Full, scoped and component-friendly CSS support for JSX. [pandas-profiling 3.3](https://github.com/ydataai/pandas-profiling) ↳ Create HTML profiling reports. [Full changelog.](https://pandas-profiling.ydata.ai/docs/master/pages/reference/changelog.html?highlight=change+log) 🧑‍💻 JOBS [Software Engineers](https://www.stickermule.com/careers) — Sticker Mule is the Internet's most "kick ass" brand. Our software team operates from 17 countries, and we're always looking for more exceptional engineers. Sticker mule [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 📬 **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/cooperx86). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) [Ipx.](https://frontendfoc.us/open/558/*|UID|*?ipx=t)