--- title: "Progressively-enhanced Single Page Apps - the future?" publication: "Frontend Focus" issue: 563 published_at: "2022-10-12" canonical_url: "https://frontendfoc.us/issues/563" --- Plus the syntax for CSS nesting has been decided, and how to set a performance budget. | Together with [![Progress Kendo UI for Angular\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_480,h_50/e_make_transparent/co_white,e_outline:7/unqewzs6uvnqy4ehhxfi.png)](https://www.telerik.com/blogs/top-11-angular-training-learning-resources-beginners?utm_medium=cpm&utm_source=fefocus&utm_campaign=kendo-ui-angular-awareness-general&utm_content=blog-11-angular-training-learning-resources-beginners) #​563 — October 12, 2022 | [Read on the web](https://frontendfoc.us/issues/563) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/qkkt9je0gkcyk7mpist6.jpg)](https://developer.chrome.com/en/blog/help-css-nesting-results/) [Now Decided: The Syntax for CSS Nesting](https://developer.chrome.com/en/blog/help-css-nesting-results/) — If you were one of the 7,590 developers who responded to a recent survey helping to direct the CSSWG in picking a syntax to go with for standard CSS nesting support, give yourself a hearty pat on the back – a decision has now been made. _“Such a large split was not estimated but is relieving to the discussions.”_ Adam Argyle [The Web’s Next Transition](https://www.epicweb.dev/the-webs-next-transition) — The web is made up of technologies and architectures that got started over 25 years ago and, to a large extent, have organically grown over time. Now, Kent takes a detailed look at the transition to new and improved architectures (progressively enhanced SPAs) for building web applications, and how changes to multi-page apps are coming about. Kent C. Dodds [![\](https://copm.s3.amazonaws.com/f72c9659.png)](https://www.telerik.com/blogs/top-11-angular-training-learning-resources-beginners?utm_medium=cpm&utm_source=fefocus&utm_campaign=kendo-ui-angular-awareness-general&utm_content=blog-11-angular-training-learning-resources-beginners) [11 Angular Training and Learning Resources](https://www.telerik.com/blogs/top-11-angular-training-learning-resources-beginners?utm_medium=cpm&utm_source=fefocus&utm_campaign=kendo-ui-angular-awareness-general&utm_content=blog-11-angular-training-learning-resources-beginners) — Angular has one of the best communities out there. So if you want to get started, it’s easy to find quality training resources. Here are 11 of the best! Progress Kendo UI for Angular sponsor [Performance Budgets: The Easiest Way to a Faster Site](https://calibreapp.com/blog/performance-budgets) — Until you set specific goals, it’s not clear what metrics you want to improve, or how you’ll do it. This post looks at just how to set performance budgets in order to meet and maintain speed goals. Karolina Szczur [Sustainable Web Development Strategies Within an Organization](https://www.smashingmagazine.com/2022/10/sustainable-web-development-strategies-organization/) — Climate change and sustainability are increasing concerns for those working in tech — this article explores some of the ways to raise awareness and effect change within an organization, to create a more positive environmental impact. Michelle Barker **⚡️ IN BRIEF** - 📅 Smashing Magazine is hosting a free online [event next month covering Design Systems](https://smashingconf.com/meets-design-systems), looking at how they work, what they can do for your teams, and how to manage them. - Mozilla has taken steps to [significantly improve the responsiveness of Firefox](https://hacks.mozilla.org/2022/10/improving-firefox-responsiveness-on-macos/) on macOS from version 103 onwards. ![](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/jl19didy5e7wznvdrtbh.jpg) - ↑ You can now [see CSS Authoring Hints in Chrome's Dev Tools](https://twitter.com/bramus/status/1580098656136355840) style pane. - [Here are the release notes for Safari Technology Preview 155](https://webkit.org/blog/13338/release-notes-for-safari-technology-preview-155/) with updates to Web Inspector, Rendering, Scroll to Text Fragment, the Web API & more. 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/cdhpstrndzspnhjwx5x0.jpg)](https://www.youtube.com/watch?v=ypstT5UfCsk) ▶[The Border Property You Never Knew You Needed](https://www.youtube.com/watch?v=ypstT5UfCsk) — The `border-image` property isn’t anything new, but Kevin shows us how it can be used with more modern styling techniques for fun gradient effects. Kevin Powell [Delightful UI Animations with the Shared Element Transitions API](https://www.smashingmagazine.com/2022/10/ui-animations-shared-element-transitions-api-part2/) — We shared [part one](https://www.smashingmagazine.com/2022/10/ui-animations-shared-element-transitions-api-part1/) of this two-parter last week. This time Adrian shows us how to create same-document page transitions for Single Page Apps and their future potential for creating cross-document transitions in _Multi-Page_ apps. Adrian Bece [Layout Breakouts with CSS Grid](https://ryanmulligan.dev/blog/layout-breakouts/) — Extending elements _beyond_ the content area with CSS Grid and named grid lines. Ryan Mulligan [Register for Unblock 2022 - A CI/CD Conference by Buildkite](http://buildkite.com/unblock?utm_campaign=CPress&utm_source=ppc&utm_medium=Q4-FrontEndFocus&utm_term=Sign-Up-Unblock) — A free 2-day virtual conference featuring industry experts from companies like Retool & Twilio who are defining the future of how we continuously deliver software. Buildkite sponsor ▶[Animating Triangles with Three.js](https://www.youtube.com/watch?v=frgmk0Wu76A) — A 90-minute live coding session covering the creation of a striking animation of a whirlwind of dissolving triangles. You have to see it to get it, but I learn a lot from seeing how other people approach projects like this. Yuri Artiukh [New Patterns for Amazing (Web) Apps](https://web.dev/new-patterns-for-amazing-apps/) — This blog post announces a new collection of patterns for apps, including clipboard patterns, file patterns, and advanced app patterns. Thomas Steiner [Practical Uses of the `:has()` Relational Pseudo Class](https://utilitybend.com/blog/practical-uses-of-the-has-relational-pseudo-class) — Demos of what you can do with the `:has()` pseudo class (which lets you select elements with children matching a supplied sub-selector) from grid layouts to validating forms. Brecht De Ruyte [Introducing Shoelace, a Framework-Independent Component-Based UX Library](https://css-tricks.com/shoelace-component-frameowrk-introduction/) Adam Rackis [How to Safely Share Your Email Address on a Website](https://css-tricks.com/how-to-safely-share-your-email-address-on-a-website/) Lorenzo Bonannella [How to Build SVG Line Charts with React, SSR and Tailwind CSS](https://thenewstack.io/how-to-build-svg-line-charts-with-react-ssr-and-tailwind-css/) Paul Scanlon 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1665577986/ylyjvxt1v4bstbpfeiis.jpg)](https://ui.draculatheme.com/) [Dracula UI: A 'Dark Mode-First' Collection of UI Patterns and Components](https://ui.draculatheme.com/) — The components are built for dark mode, available in HTML and React, and can be used for prototyping via a configurable design system and using VS Code snippets. Netto Farah & Zeno Rocha [Shoelace: 'A Forward-Thinking Library of Web Components'](https://shoelace.style/) — A collection of well designed every day UI components (buttons, drawers, inputs, menus, color pickers, and more) built in a framework agnostic way. We linked to [a handy introduction to Shoelace](https://css-tricks.com/shoelace-component-frameowrk-introduction/) earlier in this issue :-) Cory LaViska [Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut](https://shortcut.com/?utm_source=cooperFRONTEND&utm_medium=spon_nl&utm_campaign=prospecting&utm_content=fourletter) Shortcut (formerly Clubhouse.io) sponsor [Check HTML Links: A Fast Checker for Broken Links and References](https://github.com/modernweb-dev/rocket/tree/main/packages/check-html-links) — An npm package you can run on static pages to find broken links in `href`, `src`, and `srcset`, and can process 500-1000 (local) documents in just a few seconds. If you already have `npm` installed, you could try it with `npx check-html-links .` from a folder of HTML files. Modern Web [Tailwind CSS Hyphens: Plugin That Adds Support for the `hyphens` Property](https://github.com/vivgui/tailwindcss-hyphens) Vivian Guillen [Typography Combination Inspirations](https://shapeless.dev/foundations/typography) — Here’s a large collection of the font combinations used across some of the biggest sites on the web. Jesco Wüster 🧑‍💻 JOBS [Senior Frontend Engineer (EU Remote or Relocate to Berlin)](https://feather-insurance.com/careers/senior-frontend-engineer?channel_id=921910) — We’ve built a product thousands of people love (see Trustpilot if you don’t believe us). We need your help with **React & TypeScript**. Feather [Software Engineer (Security)](https://www.stickermule.com/career/2482befb-4aa7-4372-98d7-042aaf774315) — Join our "kick ass" team. Our software team operates from 17 countries and we're looking for more exceptional engineers to join our Security team. Sticker Mule [Attend Our October 20th 2022 State of Tech Salaries Panel Discussion](https://2022stateoftechsalaries.splashthat.com/Newsletters) — Join Ladies Get Paid, TopResume and Glassdoor for a collaborative panel discussion covering salary trends, negotiation and employer POV of salary comp packages. 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/563/*|UID|*?ipx=t)