Together with  Progress Kendo UI for Angular

#​563 — October 12, 2022 | Read on the web

Now Decided: The Syntax for CSS Nesting — 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 — 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

11 Angular Training and Learning Resources — 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 — 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 — 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


📙 Tutorials, Articles & Opinion

▶  The Border Property You Never Knew You Needed — 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 — We shared part one 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 — 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 — 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 — 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 — 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 — 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
Adam Rackis

How to Safely Share Your Email Address on a Website
Lorenzo Bonannella

How to Build SVG Line Charts with React, SSR and Tailwind CSS
Paul Scanlon

🔧 Code, Tools & Resources

Dracula UI: A 'Dark Mode-First' Collection of UI Patterns and Components — 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' — 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 earlier in this issue :-)

Cory LaViska

Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut

Shortcut (formerly sponsor

Check HTML Links: A Fast Checker for Broken Links and References — 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

Vivian Guillen

Typography Combination Inspirations — 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) — We’ve built a product thousands of people love (see Trustpilot if you don’t believe us). We need your help with React & TypeScript.

Software Engineer (Security) — 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 — Join Ladies Get Paid, TopResume and Glassdoor for a collaborative panel discussion covering salary trends, negotiation and employer POV of salary comp packages.