This article is a sponsored by NetlifyIn the past, the web ecosystem moved at a very slow pace. Developers would go years without a new language feature or working around a weird browser quirk. This pushed our technical leaders to come up with creative solutions to circumvent the platforms shortcomings. We invented bundling, polyfills, and transformation steps to make things work everywhere with less of a hassle.Slowly, we moved towards some sort of consensus on what we need as an ecosystem. We now have TypeScript and Vite as clear preferencespushing the needle of what it means to build consistent experiences for the web. Application frameworks have built whole ecosystems on top of them: SolidStart, Nuxt, Remix, and Analog are examples of incredible tools built with such primitives. We can say that Vite and TypeScript are tooling primitives that empower the creation of others in diverse ecosystems.With bundling and transformation needs somewhat defined, it was only natural that framework authors would move their gaze to the next layer they needed to abstract: the server.Server PrimitivesThe UnJS folks have been consistently building agnostic tooling that can be reused in different ecosystems. Thanks to them, we now have frameworks and libraries such as H3 (a minimal Node.js server framework built with TypeScript), which enables Nitro (a whole server runtime powered by Vite, and H3), that in its own turn enabled Vinxi (an application bundler and server runtime that abstracts Nitro and Vite). Nitro is used already by three major frameworks: Nuxt, Analog, and SolidStart. While Vinxi is also used by SolidStart. This means that any platform which supports one of these, will definitely be able to support the others with zero additional effort.This is not about taking a bigger slice of the cake. But making the cake bigger for everyone.Frameworks, platforms, developers, and users benefit from it. We bet on our ecosystem together instead of working in silos with our monolithic solutions. Empowering our developer-users to gain transferable skills and truly choose the best tool for the job with less vendor lock-in than ever before.Serverless Rejoins ConversationSuch initiatives have probably been noticed by serverless platforms like Netlify. With Platform Primitives, frameworks can leverage agnostic solutions for common necessities such as Incremental Static Regeneration (ISR), Image Optimization, and key/value (kv) storage.As the name implies, Netlify Platform Primitives are a group of abstractions and helpers made available at a platform level for either frameworks or developers to leverage when using their applications. This brings additional functionality simultaneously to every framework. This is a big and powerful shift because, up until now, each framework would have to create its own solutions and backport such strategies to compatibility layers within each platform.Moreover, developers would have to wait for a feature to first land on a framework and subsequently for support to arrive in their platform of choice. Now, as long as theyre using Netlify, those primitives are available directly without any effort and time put in by the framework authors. This empowers every ecosystem in a single measure.Serverless means server infrastructure developers dont need to handle. Its not a misnomer, but a format of Infrastructure As A Service.As mentioned before, Netlify Platform Primitives are three different features:Image CDNA content delivery network for images. It can handle format transformation and size optimization via URL query strings.CachingBasic primitives for their server runtime that help manage the caching directives for browser, server, and CDN runtimes smoothly.BlobsA key/value (KV) storage option is automatically available to your project through their SDK.Lets take a quick dive into each of these features and explore how they can increase our productivity with a serverless fullstack experience.Image CDNEvery image in a /public can be served through a Netlify function. This means its possible to access it through a /.netlify/images path. So, without adding sharp or any image optimization package to your stack, deploying to Netlify allows us to serve our users with a better format without transforming assets at build-time. In a SolidStart, in a few lines of code, we could have an Image component that transforms other formats to .webp. import { type JSX } from "solid-js";const SITE_URL = "https://example.com";interface Props extends JSX.ImgHTMLAttributes<HTMLImageElement> { format?: "webp" | "jpeg" | "png" | "avif" | "preserve"; quality?: number | "preserve";}const getQuality = (quality: Props["quality"]) => { if (quality === "preserve") return""; return &q=${quality || "75"};};function getFormat(format: Props["format"]) { switch (format) { case "preserve": return" "; case "jpeg": return &fm=jpeg; case "png": return &fm=png; case "avif": return &fm=avif; case "webp": default: return &fm=webp; }}export function Image(props: Props) { return ( <img {...props} src={${SITE_URL}/.netlify/images?url=/${props.src}${getFormat( props.format )}${getQuality(props.quality)}} /> );}Notice the above component is even slightly more complex than bare essentials because were enforcing some default optimizations. Our getFormat method transforms images to .webp by default. Its a broadly supported format thats significantly smaller than the most common and without any loss in quality. Our get quality function reduces the image quality to 75% by default; as a rule of thumb, there isnt any perceivable loss in quality for large images while still providing a significant size optimization.Check our little component at play.Source code: SolidStart and Netlify Primitives.CachingBy default, Netlify caching is quite extensive for your regular artifacts - unless theres a new deployment or the cache is flushed manually, resources will last for 365 days. However, because server/edge functions are dynamic in nature, theres no default caching to prevent serving stale content to end-users. This means that if you have one of these functions in production, chances are theres some caching to be leveraged to reduce processing time (and expenses).By adding a cache-control header, you already have done 80% of the work in optimizing your resources for best serving users. Some commonly used cache control directives:{ "cache-control": "public, max-age=0, stale-while-revalidate=86400"}public: Store in a shared cache.max-age=0: resource is immediately stale.stale-while-revalidate=86400: if the cache is stale for less than 1 day, return the cached value and revalidate it in the background.{ "cache-control": "public, max-age=86400, must-revalidate"}public: Store in a shared cache.max-age=86400: resource is fresh for one day.must-revalidate: if a request arrives when the resource is already stale, the cache must be revalidated before a response is sent to the user.Note: For more extensive information about possible compositions of Cache-Control directives, check the mdn entry on Cache-Control.The cache is a type of key/value storage. So, once our responses are set with proper cache control, platforms have some heuristics to define what the key will be for our resource within the cache storage. The Web Platform has a second very powerful header that can dictate how our cache behaves.The Vary response header is composed of a list of headers that will affect the validity of the resource (method and the endpoint URL are always considered; no need to add them). This header allows platforms to define other headers defined by location, language, and other patterns that will define for how long a response can be considered fresh.The Vary response header is a foundational piece of a special header in Netlify Caching Primitive. The Netlify-Vary will take a set of instructions on which parts of the request a key should be based. It is possible to tune a response key not only by the header but also by the value of the header.query: vary by the value of some or all request query parameters.header: vary by the value of one or more request headers.language: vary by the languages from the Accept-Language header.country: vary by the country inferred from a GeoIP lookup on the request IP address.cookie: vary by the value of one or more request cookie keys.This header offers strong fine-control over how your resources are cached. Allowing for some creative strategies to optimize how your app will perform for specific users.Blob StorageThis is a highly-available key/value store, its ideal for frequent reads and infrequent writes. Theyre automatically available and provisioned for any Netlify Project.Its possible to write on a blob from your runtime or push data for a deployment-specific store. For example, this is how an Action Function would register a number of likes in store with SolidStart.import { getStore } from "@netlify/blobs";import { action } from "@solidjs/router";export const upVote = action(async (formData: FormData) => { "use server"; const postId = formData.get("id"); const postVotes = formData.get("votes"); if (typeof postId !== "string" || typeof postVotes !== "string") return; const store = getStore("posts"); const voteSum = Number(postVotes) + 1) await store.set(postId, String(voteSum); console.log("done"); return voteSum});Check @netlify/blobs API documentation for more examples and use-cases.Final ThoughtsWith high-quality primitives, we can enable library and framework creators to create thin integration layers and adapters. This way, instead of focusing on how any specific platform operates, it will be possible to focus on the actual user experience and practical use-cases for such features. Monoliths and deeply integrated tooling make sense to build platforms fast with strong vendor lock-in, but thats not what the community needs. Betting on the web platform is a more sensible and future-friendly way.Let me know in the comments what your take is about unbiased tooling versus opinionated setups!

The web is no stranger to taking HTML elements and transforming them to look, act, and feel like something completely different. A common example of this is the switch, or toggle, component. We would hide a checkbox beneath several layers of styles, define the ARIA role as switch, and then ship. However, this approach posed certain usability issues around indeterminate states and always felt rather icky. After all, as the saying goes, the best ARIA is no ARIA.Well, there is new hope for a native HTML switch to catch on.Safari Technology Preview (TP) 185 and Safari 17.4 released with an under-the-radar feature, a native HTML switch control. It evolves from the hidden-checkbox approach and aims to make the accessibility and usability of the control more consistent.<!-- This will render a native checkbox --//><input type="checkbox" /><!-- Add the switch attribute to render a switch element --//><input type="checkbox" switch /><input type="checkbox" checked switch />Communication is one aspect of the controls accessibility. Earlier in 2024, there were issues where the switch would not adjust to page zoom levels properly, leading to poor or broken visibility of the control. However, at the time I am writing this, Safari looks to have resolved these issues. Zooming retains the visual cohesion of the switch.The switch attribute seems to take accessibility needs into consideration. However, this doesnt prevent us from using it in inaccessible and unusable ways. As mentioned, mixing the required and indeterminate properties between switches and checkboxes can cause unexpected behavior for people trying to navigate the controls. Once again, Adrian sums things up nicely:The switch role does not allow mixed states. Ensure your switch never gets set to a mixed state; otherwise, well, problems. Adrian RoselliInternationalization (I18N): Which Way Is On?Beyond the accessibility of the switch control, what happens when the switch interacts with different writing modes?When creating the switch, we had to ensure the use of logical CSS to support different writing modes and directions. This is because a switch being in its right-most position (or inline ending edge) doesnt mean on in some environments. In some languages e.g., those that are written right-to-left the left-most position (or inline starting edge) on the switch would likely imply the on state.While we should be writing logical CSS by default now, the new switch control removes that need. This is because the control will adapt to its nearest writing-mode and direction properties. This means that in left-to-right environments, the switchs right-most position will be its on state, and in right-to-left environments, its left-most position will be the on state.See the Pen Safari Switch Control - Styling [forked] by @DanielYuschick.Final ThoughtsAs we continue to push the web forward, its natural for our tools to evolve alongside us. The switch control is a welcome addition to HTML for eliminating the checkbox hacks weve been resorting to for years.That said, combining the checkbox and switch into a single input, while being convenient, does raise some concerns about potential markup combinations. Despite this, I believe this can ultimately be resolved with linters or by the browsers themselves under the hood. Ultimately, having a native approach to switch components can make the accessibility and usability of the control far more consistent assuming its ever supported and adopted for widespread use.

Naming is hard. As designers and developers, we often struggle finding the right name for a design token, colors, UI components, HTML classes, and variables. Sometimes, the names we choose are too generic, so its difficult to understand what exactly is meant. And sometimes they are too specific, leaving little room for flexibility and re-use.In this post, we want to get to the bottom of this and explore how we can make naming more straightforward. How do we choose the right names? And which naming conventions work best? Lets take a closer look.Inspiration For NamingIf youre looking for some inspiration for naming HTML classes, CSS properties, or JavaScript functions, Classnames is a wonderful resource jam-packed with ideas that get you thinking outside the box.The site provides thematically grouped lists of words perfect for naming. Youll find terms to describe different kinds of behavior, likeness between things, order, grouping, and association, but also themed collections of words that wouldnt instantly come to ones mind when it comes to code, among them words from nature, art, theater, music, architecture, fashion, and publishing.Naming ConventionsWhat makes a good name? Javier Cuello summarized a set of naming best practices that help you name your layers, groups and components in a consistent and scalable way.As Javier points out, a good name has a logical structure, is short, meaningful, and known by everyone, and not related to visual properties. He shares dos and donts to illustrate how to achieve that and also takes a closer look at all the fine little details you need to consider when naming sizes, colors, groups, layers, and components.Design Tokens Naming PlaybookHow do you name and manage design tokens? To enhance your design tokens naming skills, Romina Kavcic created an interactive Design Tokens Naming Playbook. It covers everything from different approaches to naming structure to creating searchable databases, running naming workshops, and automation.The playbook also features a naming playground where you can play with names simply by dragging and dropping. For more visual examples, also be sure to check out the Figma template. It includes components for all categories, allowing you to experiment with different naming structures.Flexible Design Token TaxonomyHow to build a flexible design token taxonomy that works across different products? That was the challenge that the team at Intuit faced. The parent company of products such as Mailchimp, Quickbooks, TurboTax, and Mint developed a flexible token system that goes beyond the brand theme to serve as the foundational system for a wide array of products.Nate Baldwin wrote a case study in which he shares valuable insights into the making of Intuits design token taxonomy. It dives deeper into the pain points of the old taxonomy system, the criteria they defined for the new system, and how it was created. Lots of takeaways for building your own robust and flexible token taxonomy are guaranteed.Naming ColorsWhen youre creating a color system, you need names for all its facets and uses. Names that everyone on the team can make sense of. But how to achieve that? How do you bring logic to a subjective topic like color? Jess Satell, Staff Content Designer for Adobes Spectrum Design System, shares how they master the challenge.As Jess explains, the Spectrum color nomenclature uses a combination of color family classifier (e.g., blue or gray) paired with an incremental brightness value scale (50900) to name colors in a way that is not only logical for everyone involved but also scalable and flexible as the system grows.Another handy little helper when it comes to naming colors is Color Parrot. The Twitter bot is capable of naming and identifying the colors in any given image. Just mention the bot in a reply, and it will respond with a color palette.Common Names For UI ComponentsLooking at what other people call similar things is a great way to start when youre struggling with naming. And what better source could there be than other design systems? Before you end up in the design system rabbit hole, Iain Bean did the research for you and created the Component Gallery.The Component Gallery is a collection of interface components from real-world design systems. It includes plenty of examples for more than 50 UI components from accordion to visually hidden and also lists other names that the UI components go by. A fantastic resource not only with regards to naming.Variables Taxonomy MapA wonderful example of naming guidelines for a complex multi-brand, multi-themed design system comes from the Vodafone UK Design System team. Their Variables Taxonomy Map breaks down the anatomy and categorization of a design token into a well-orchestrated system of collections.The map illustrates four collections required to support the system and connections between tokens from brand and primitives to semantics and pages. It builds on top of Nathan Curtis work on naming design tokens and enables everyone to gather insight about where a token is used and what it represents, just from its name.If you want to explore more approaches to naming design tokens, Vitaly compiled a list of useful Figma kits and resources that are worth checking out.Design Token Names InventoryRomina Kavcic created a handy little resource that is bound to give your design token naming workflow a power boost. The Design Token Names Inventory spreadsheet not only makes it easy to ensure consistent naming but also syncs directly to Figma.The spreadsheet has a simple structure with four levels to give you a birds-eye view of all your design tokens. You can easily add rows, themes, and modes without losing track and filter your tokens. And while the spreadsheet itself is already a great solution to keep everyone involved on the same page, it plays out its real strength in combination with the Google Spreadsheets plugin or the Kernel plugin. Once installed, the changes you make in the spreadsheet are reflected in Figma. A real timesaver!Want To Dive Deeper?We hope these resources will come in handy as you tackle naming. If youd like to dive deeper into design tokens, components, and design systems, we have a few friendly online workshops and SmashingConfs coming up:Design Token and UI Component Architecture with Nathan Curtis, June 614Creating and Maintaining Successful Design Systems with Brad Frost, Aug 27 Sept 10Figma Workflow Masterclass with Christina Vallaure, Nov 1422SmashingConf Freiburg 2024 The Web, Sep 911SmashingConf New York 2024 Front-End & UX, Oct 710SmashingConf Antwerp 2024 Design & UX, Oct 2831Wed be absolutely delighted to welcome you to one of our special Smashing experiences be it online or in person!

Establishing layouts in CSS is something that we, as developers, often delegate to whatever framework were most comfortable using. And even though its possible to configure a framework to get just what we need out of it, how often have you integrated an entire CSS library simply for its layout features? Im sure many of us have done it at some point, dating back to the days of 960.gs, Bootstrap, Susy, and Foundation.Modern CSS features have significantly cut the need to reach for a framework simply for its layout. Yet, I continue to see it happen. Or, I empathize with many of my colleagues who find themselves re-creating the same Grid or Flexbox layout over and over again.In this article, we will gain greater control over web layouts. Specifically, we will create four CSS classes that you will be able to take and use immediately on just about any project or place where you need a particular layout that can be configured to your needs.While the concepts we cover are key, the real thing I want you to take away from this is the confidence to use CSS for those things we tend to avoid doing ourselves. Layouts used to be a challenge on the same level of styling form controls. Certain creative layouts may still be difficult to pull off, but the way CSS is designed today solves the burdens of the established layout patterns weve been outsourcing and re-creating for many years.What Were MakingWere going to establish four CSS classes, each with a different layout approach. The idea is that if you need, say, a fluid layout based on Flexbox, you have it ready. The same goes for the three other classes were making.And what exactly are these classes? Two of them are Flexbox layouts, and the other two are Grid layouts, each for a specific purpose. Well even extend the Grid layouts to leverage CSS Subgrid for when thats needed.Within those two groups of Flexbox and Grid layouts are two utility classes: one that auto-fills the available space were calling these fluid layouts and another where we have greater control over the columns and rows were calling these repeating layouts.Finally, well integrate CSS Container Queries so that these layouts respond to their own size for responsive behavior rather than the size of the viewport. Where well start, though, is organizing our work into Cascade Layers, which further allow you to control the level of specificity and prevent style conflicts with your own CSS.Setup: Cascade Layers & CSS VariablesA technique that Ive used a few times is to define Cascade Layers at the start of a stylesheet. I like this idea not only because it keeps styles neat and organized but also because we can influence the specificity of the styles in each layer by organizing the layers in a specific order. All of this makes the utility classes were making easier to maintain and integrate into your own work without running into specificity battles.I think the following three layers are enough for this work:@layer reset, theme, layout;Notice the order because it really, really matters. The reset layer comes first, making it the least specific layer of the bunch. The layout layer comes in at the end, making it the most specific set of styles, giving them higher priority than the styles in the other two layers. If we add an unlayered style, that one would be added last and thus have the highest specificity.Related: Getting Started With Cascade Layers by Stephanie Eckles.Lets briefly cover how well use each layer in our work.Reset LayerThe reset layer will contain styles for any user agent styles we want to reset. You can add your own resets here, or if you already have a reset in your project, you can safely move on without this particular layer. However, do remember that un-layered styles will be read last, so wrap them in this layer if needed.Im just going to drop in the popular box-sizing declaration that ensures all elements are sized consistently by the border-box in accordance with the CSS Box Model.@layer reset { *, *::before, *::after { box-sizing: border-box; } body { margin: 0; }}Theme LayerThis layer provides variables scoped to the :root element. I like the idea of scoping variables this high up the chain because layout containers like the utility classes were creating are often wrappers around lots of other elements, and a global scope ensures that the variables are available anywhere we need them. That said, it is possible to scope these locally to another element if you need to.Now, whatever makes for good default values for the variables will absolutely depend on the project. Im going to set these with particular values, but do not assume for a moment that you have to stick with them this is very much a configurable system that you can adapt to your needs.Here are the only three variables we need for all four layouts:@layer theme { :root { --layout-fluid-min: 35ch; --layout-default-repeat: 3; --layout-default-gap: 3vmax; }}In order, these map to the following:Automatically-sized columns that are at least 35 characters wide,A layout with three repeated columns, andA gap between the layout items that is set to 3% of the largest side of the viewport.Notice: The variables are prefixed with layout-, which Im using as an identifier for layout-specific values. This is my personal preference for structuring this work, but please choose a naming convention that fits your mental model naming things can be hard!Layout LayerThis layer will hold our utility class rulesets, which is where all the magic happens. For the grid, we will include a fifth class specifically for using CSS Subgrid within a grid container for those possible use cases. @layer layout { .repeating-grid {} .repeating-flex {} .fluid-grid {} .fluid-flex {} .subgrid-rows {}}Now that all our layers are organized, variables are set, and rulesets are defined, we can begin working on the layouts themselves. We will start with the repeating layouts, one based on CSS Grid and the other using Flexbox.Repeating Grid And Flex LayoutsI think its a good idea to start with the simplest layout and scale up the complexity from there. So, well tackle the Repeating Grid layout first as an introduction to the overarching technique we will be using for the other layouts.Repeating GridIf we head into the @layout layer, thats where well find the .repeating-grid ruleset, where well write the styles for this specific layout. Essentially, we are setting this up as a grid container and applying the variables we created to it to establish layout columns and spacing between them..repeating-grid { display: grid; grid-template-columns: repeat(var(--layout-default-repeat), 1fr); gap: var(--layout-default-gap);}Its not too complicated so far, right? We now have a grid container with three equally sized columns that take up one fraction (1fr) of the available space with a gap between them.This is all fine and dandy, but we do want to take this a step further and turn this into a system where you can configure the number of columns and the size of the gap. Im going to introduce two new variables scoped to this grid:--_grid-repeat: The number of grid columns.--_repeating-grid-gap: The amount of space between grid items.Did you notice that Ive prefixed these variables with an underscore? This was actually a JavaScript convention to specify variables that are private or locally-scoped before we had const and let to help with that. Feel free to rename these however you see fit, but I wanted to note that up-front in case youre wondering why the underscore is there..repeating-grid { --_grid-repeat: var(--grid-repeat, var(--layout-default-repeat)); --_repeating-grid-gap: var(--grid-gap, var(--layout-default-gap)); display: grid; grid-template-columns: repeat(var(--layout-default-repeat), 1fr); gap: var(--layout-default-gap);}Notice: These variables are set to the variables in the @theme layer. I like the idea of assigning a global variable to a locally-scoped variable. This way, we get to leverage the default values we set in @theme but can easily override them without interfering anywhere else the global variables are used.Now lets put those variables to use on the style rules from before in the same .repeating-grid ruleset:.repeating-grid { --_grid-repeat: var(--grid-repeat, var(--layout-default-repeat)); --_repeating-grid-gap: var(--grid-gap, var(--layout-default-gap)); display: grid; grid-template-columns: repeat(var(--_grid-repeat), 1fr); gap: var(--_repeating-grid-gap);}What happens from here when we apply the .repeating-grid to an element in HTML? Lets imagine that we are working with the following simplified markup:<section class="repeating-grid"> <div></div> <div></div> <div></div></section>If we were to apply a background-color and height to those divs, we would get a nice set of boxes that are placed into three equally-sized columns, where any divs that do not fit on the first row automatically wrap to the next row.Time to put the process we established with the Repeating Grid layout to use in this Repeating Flex layout. This time, we jump straight to defining the private variables on the .repeating-flex ruleset in the @layout layer since we already know what were doing..repeating-flex { --_flex-repeat: var(--flex-repeat, var(--layout-default-repeat)); --_repeating-flex-gap: var(--flex-gap, var(--layout-default-gap));}Again, we have two locally-scoped variables used to override the default values assigned to the globally-scoped variables. Now, we apply them to the style declarations..repeating-flex { --_flex-repeat: var(--flex-repeat, var(--layout-default-repeat)); --_repeating-flex-gap: var(--flex-gap, var(--layout-default-gap)); display: flex; flex-wrap: wrap; gap: var(--_repeating-flex-gap);}Were only using one of the variables to set the gap size between flex items at the moment, but that will change in a bit. For now, the important thing to note is that we are using the flex-wrap property to tell Flexbox that its OK to let additional items in the layout wrap into multiple rows rather than trying to pack everything in a single row.But once we do that, we also have to configure how the flex items shrink or expand based on whatever amount of available space is remaining. Lets nest those styles inside the parent ruleset:.repeating-flex { --_flex-repeat: var(--flex-repeat, var(--layout-default-repeat)); --_repeating-flex-gap: var(--flex-gap, var(--layout-default-gap)); display: flex; flex-wrap: wrap; gap: var(--_repeating-flex-gap); > * { flex: 1 1 calc((100% / var(--_flex-repeat)) - var(--_gap-repeater-calc)); }}If youre wondering why Im using the universal selector (*), its because we cant assume that the layout items will always be divs. Perhaps they are <article> elements, <section>s, or something else entirely. The child combinator (>) ensures that were only selecting elements that are direct children of the utility class to prevent leakage into other ancestor styles.The flex shorthand property is one of those thats been around for many years now but still seems to mystify many of us. Before we unpack it, did you also notice that we have a new locally-scoped --_gap-repeater-calc variable that needs to be defined? Lets do this:.repeating-flex { --_flex-repeat: var(--flex-repeat, var(--layout-default-repeat)); --_repeating-flex-gap: var(--flex-gap, var(--layout-default-gap)); /* New variables */ --_gap-count: calc(var(--_flex-repeat) - 1); --_gap-repeater-calc: calc( var(--_repeating-flex-gap) / var(--_flex-repeat) * var(--_gap-count) ); display: flex; flex-wrap: wrap; gap: var(--_repeating-flex-gap); > * { flex: 1 1 calc((100% / var(--_flex-repeat)) - var(--_gap-repeater-calc)); }}Whoa, we actually created a second variable that --_gap-repeater-calc can use to properly calculate the third flex value, which corresponds to the flex-basis property, i.e., the ideal size we want the flex items to be.If we take out the variable abstractions from our code above, then this is what were looking at:.repeating-flex { display: flex; flex-wrap: wrap; gap: 3vmax > * { flex: 1 1 calc((100% / 3) - calc(3vmax / 3 * 2)); }}Hopefully, this will help you see what sort of math the browser has to do to size the flexible items in the layout. Of course, those values change if the variables values change. But, in short, elements that are direct children of the .repeating-flex utility class are allowed to grow (flex-grow: 1) and shrink (flex-shrink: 1) based on the amount of available space while we inform the browser that the initial size (i.e., flex-basis) of each flex item is equal to some calc()-ulated value.Because we had to introduce a couple of new variables to get here, Id like to at least explain what they do:--_gap-count: This stores the number of gaps between layout items by subtracting 1 from --_flex-repeat. Theres one less gap in the number of items because theres no gap before the first item or after the last item.--_gap-repeater-calc: This calculates the total gap size based on the individual items gap size and the total number of gaps between items.From there, we calculate the total gap size more efficiently with the following formula:calc(var(--_repeating-flex-gap) / var(--_flex-repeat) * var(--_gap-count))Lets break that down further because its an inception of variables referencing other variables. In this example, we already provided our repeat-counting private variable, which falls back to the default repeater by setting the --layout-default-repeat variable.This sets a gap, but were not done yet because, with flexible containers, we need to define the flex behavior of the containers direct children so that they grow (flex-grow: 1), shrink (flex-shrink: 1), and with a flex-basis value that is calculated by multiplying the repeater by the total number of gaps between items.Next, we divide the individual gap size (--_repeating-flex-gap) by the number of repetitions (--_flex-repeat)) to equally distribute the gap size between each item in the layout. Then, we multiply that gap size value by one minus the total number of gaps with the --_gap-count variable.And that concludes our repeating grids! Pretty fun, or at least interesting, right? I like a bit of math.Before we move to the final two layout utility classes were making, you might be wondering why we want so many abstractions of the same variable, as we start with one globally-scoped variable referenced by a locally-scoped variable which, in turn, can be referenced and overridden again by yet another variable that is locally scoped to another ruleset. We could simply work with the global variable the whole time, but Ive taken us through the extra steps of abstraction.I like it this way because of the following:I can peek at the HTML and instantly see which layout approach is in use: .repeating-grid or .repeating-flex.It maintains a certain separation of concerns that keeps styles in order without running into specificity conflicts.See how clear and understandable the markup is:<section class="repeating-flex footer-usps"> <div></div> <div></div> <div></div></section>The corresponding CSS is likely to be a slim ruleset for the semantic .footer-usps class that simply updates variable values:.footer-usps { --flex-repeat: 3; --flex-gap: 2rem;}This gives me all of the context I need: the type of layout, what it is used for, and where to find the variables. I think thats handy, but you certainly could get by without the added abstractions if youre looking to streamline things a bit.Fluid Grid And Flex LayoutsAll the repeating weve done until now is fun, and we can manipulate the number of repeats with container queries and media queries. But rather than repeating columns manually, lets make the browser do the work for us with fluid layouts that automatically fill whatever empty space is available in the layout container. We may sacrifice a small amount of control with these two utilities, but we get to leverage the browsers ability to intelligently place layout items with a few CSS hints.Fluid GridOnce again, were starting with the variables and working our way to the calculations and style rules. Specifically, were defining a variable called --_fluid-grid-min that manages a columns minimum width.Lets take a rather trivial example and say we want a grid column thats at least 400px wide with a 20px gap. In this situation, were essentially working with a two-column grid when the container is greater than 820px wide. If the container is narrower than 820px, the column stretches out to the containers full width.If we want to go for a three-column grid instead, the containers width should be about 1240px wide. Its all about controlling the minimum sizing values in the gap..fluid-grid { --_fluid-grid-min: var(--fluid-grid-min, var(--layout-fluid-min)); --_fluid-grid-gap: var(--grid-gap, var(--layout-default-gap));}That establishes the variables we need to calculate and set styles on the .fluid-grid layout. This is the full code we are unpacking: .fluid-grid { --_fluid-grid-min: var(--fluid-grid-min, var(--layout-fluid-min)); --_fluid-grid-gap: var(--grid-gap, var(--layout-default-gap)); display: grid; grid-template-columns: repeat( auto-fit, minmax(min(var(--_fluid-grid-min), 100%), 1fr) ); gap: var(--_fluid-grid-gap);}The display is set to grid, and the gap between items is based on the --fluid-grid-gap variable. The magic is taking place in the grid-template-columns declaration.This grid uses the repeat() function just as the .repeating-grid utility does. By declaring auto-fit in the function, the browser automatically packs in as many columns as it possibly can in the amount of available space in the layout container. Any columns that cant fit on a line simply wrap to the next line and occupy the full space that is available there.Then theres the minmax() function for setting the minimum and maximum width of the columns. Whats special here is that were nesting yet another function, min(), within minmax() (which, remember, is nested in the repeat() function). This a bit of extra logic that sets the minimum width value of each column somewhere in a range between --_fluid-grid-min and 100%, where 100% is a fallback for when --_fluid-grid-min is undefined or is less than 100%. In other words, each column is at least the full 100% width of the grid container.The max half of minmax() is set to 1fr to ensure that each column grows proportionally and maintains equally sized columns.See the Pen Fluid grid [forked] by utilitybend.Thats it for the Fluid Grid layout! That said, please do take note that this is a strong grid, particularly when it is combined with modern relative units, e.g. ch, as it produces a grid that only scales from one column to multiple columns based on the size of the content.Fluid FlexWe pretty much get to re-use all of the code we wrote for the Repeating Flex layout for the Fluid Flex layout, but only were setting the flex-basis of each column by its minimum size rather than the number of columns..fluid-flex { --_fluid-flex-min: var(--fluid-flex-min, var(--layout-fluid-min)); --_fluid-flex-gap: var(--flex-gap, var(--layout-default-gap)); display: flex; flex-wrap: wrap; gap: var(--_fluid-flex-gap); > * { flex: 1 1 var(--_fluid-flex-min); }}That completes the fourth and final layout utility but theres one bonus class we can create to use together with the Repeating Grid and Fluid Grid utilities for even more control over each layout.Optional: Subgrid UtilitySubgrid is handy because it turns any grid item into a grid container of its own that shares the parent containers track sizing to keep the two containers aligned without having to redefine tracks by hand. Its got full browser support and makes our layout system just that much more robust. Thats why we can set it up as a utility to use with the Repeating Grid and Fluid Grid layouts if we need any of the layout items to be grid containers for laying out any child elements they contain.Here we go:.subgrid-rows { > * { display: grid; gap: var(--subgrid-gap, 0); grid-row: auto / span var(--subgrid-rows, 4); grid-template-rows: subgrid; }}We have two new variables, of course:--subgrid-gap: The vertical gap between grid items.--subgrid-rows The number of grid rows defaulted to 4.We have a bit of a challenge: How do we control the subgrid items in the rows? I see two possible methods.Method 1: Inline StylesWe already have a variable that can technically be used directly in the HTML as an inline style:<section class="fluid-grid subgrid-rows" style="--subgrid-rows: 4;"> <!-- items --></section>This works like a charm since the variable informs the subgrid how much it can grow.Method 2: Using The :has() Pseudo-ClassThis approach leads to verbose CSS, but sacrificing brevity allows us to automate the layout so it handles practically anything we throw at it without having to update an inline style in the markup.Check this out:.subgrid-rows { &:has(> :nth-child(1):last-child) { --subgrid-rows: 1; } &:has(> :nth-child(2):last-child) { --subgrid-rows: 2; } &:has(> :nth-child(3):last-child) { --subgrid-rows: 3; } &:has(> :nth-child(4):last-child) { --subgrid-rows: 4; } &:has(> :nth-child(5):last-child) { --subgrid-rows: 5; } /* etc. */ > * { display: grid; gap: var(--subgrid-gap, 0); grid-row: auto / span var(--subgrid-rows, 5); grid-template-rows: subgrid; }}The :has() selector checks if a subgrid row is the last child item in the container when that item is either the first, second, third, fourth, fifth, and so on item. For example, the second declaration:&:has(> :nth-child(2):last-child) { --subgrid-rows: 2; }is pretty much saying, If this is the second subgrid item and it happens to be the last item in the container, then set the number of rows to 2.Whether this is too heavy-handed, I dont know; but I love that were able to do it in CSS.The final missing piece is to declare a container on our children. Lets give the columns a general class name, .grid-item, that we can override if we need to while setting each one as a container we can query for the sake of updating its layout when it is a certain size (as opposed to responding to the viewports size in a media query).:is(.fluid-grid:not(.subgrid-rows),.repeating-grid:not(.subgrid-rows),.repeating-flex, .fluid-flex) { > * { container: var(--grid-item-container, grid-item) / inline-size; }}Thats a wild-looking selector, but the verbosity is certainly kept to a minimum thanks to the :is() pseudo-class, which saves us from having to write this as a larger chain selector. It essentially selects the direct children of the other utilities without leaking into .subgrid-rows and inadvertently selecting its direct children.The container property is a shorthand that combines container-name and container-type into a single declaration separated by a forward slash (/). The name of the container is set to one of our variables, and the type is always its inline-size (i.e., width in a horizontal writing mode).The container-type property can only be applied to grid containers not grid items. This means were unable to combine it with the grid-template-rows: subgrid value, which is why we needed to write a more complex selector to exclude those instances.DemoCheck out the following demo to see how everything comes together.See the Pen Grid system playground [forked] by utilitybend.The demo is pulling in styles from another pen that contains the full CSS for everything we made together in this article. So, if you were to replace the .fluid-flex classname from the parent container in the HTML with another one of the layout utilities, the layout will update accordingly, allowing you to compare them.Those classes are the following:.repeating-grid,.repeating-flex,.fluid-grid,.fluid-flex.And, of course, you have the option of turning any grid items into grid containers using the optional .subgrid-rows class in combination with the .repeating-grid and .fluid-grid utilities.Conclusion: Write Once And RepurposeThis was quite a journey, wasnt it? It might seem like a lot of information, but we made something that we only need to write once and can use practically anywhere we need a certain type of layout using modern CSS approaches. I strongly believe these utilities can not only help you in a bunch of your work but also cut any reliance on CSS frameworks that you may be using simply for its layout configurations.This is a combination of many techniques Ive seen, one of them being a presentation Stephanie Eckles gave at CSS Day 2023. I love it when people handcraft modern CSS solutions for things we used to work around. Stephanies demonstration was clean from the start, which is refreshing as so many other areas of web development are becoming ever more complex.After learning a bunch from CSS Day 2023, I played with Subgrid on my own and published different ideas from my experiments. Thats all it took for me to realize how extensible modern CSS layout approaches are and inspired me to create a set of utilities I could rely on, perhaps for a long time.By no means am I trying to convince you or anyone else that these utilities are perfect and should be used everywhere or even that theyre better than <framework-du-jour>. One thing that I do know for certain is that by experimenting with the ideas we covered in this article, you will get a solid feel of how CSS is capable of making layout work much more convenient and robust than ever.Create something out of this, and share it in the comments if youre willing Im looking forward to seeing some fresh ideas!

Just as it sits between burgundy and maroon, so too does Melbourne-based creative practice Articolo Studios situate itself alongside Gucci and Loewe as a design house harnessing the power of the supersaturated, seemingly supernatural, seductive hue that is oxblood. Helmed by Australian designer Nicci Kavals their recent showcase, aptly titled Accents of Oxblood, marks the studios first foray into color, and notably, the release of Rolo, a robust 12-piece lighting collection comprising wall sconces, pendants, and lamps. The survey also highlights some key elements from the new Articolo Home, a furniture collection that debuted this year to great reception.Left to Right: Rolo Wall Sconce Facing Backward; Large Table Lamp; Slip Stool; Fin Tall Side Table; Fin Short Side TableI have always wanted to do color but wasnt excited because I thought it would take away from the sophistication of the natural materials, Kavals admits. However, given its breadth and variation across models, the rich burgundy is very impressive and Im thrilled with the result.Left to Right: Flare Tall Side Table, Rolo Mini Table Lamp; Flare Short and Tall Side Tables; Rolo Wall Sconce Facing BackwardTaking visual cues from 1980s Milanese design fused with the precision of haute couture and dignity imbued by hand-construction Rolos rounded light fixtures strut their stuff boasting bold forms and fluid silhouettes that look in vogue as much as they evoke nostalgia for Europes future-retro furnishings. Simple geometries are made exquisite through venerable materials including mouth-blown glass in a pale snow finish, sophisticated powder coating options, and fine metal detailing available in brass, mid bronze, and satin nickel.Rolo Large Table LampWhats more, lamp cords are available in both subtle neutrals as well as the now-signature oxblood tone. The large family of lighting offers options for a variety of home styles and sizes to accommodate interior spaces from the intimate to expansive, and in some cases, even exteriors in need of accentuation. Options are aplenty as Kavals explores 12 permutations with one globe through the stacking, flipping, inverting, and doubling down of form to deliver such solutions.Left to Right: Rolo Large Table Lamp; Slip Stool; Rolo Medium Table LampIn conjunction with Rolos release comes Articolo Home, which extends the studios atelier-like approach to craft a capsule collection of furnishings. Each highly tailored object encapsulates quality, craftsmanship, and contemporary design all communicated through tactility.Left to Right: Rolo Wall Sconce Facing Backward; Rolo Medium Table LampThe Slip side table and stool, also available as a simple circular tray, distills a dynamic moment mid-shear as its cylindrical body is sliced at an angle leaving the seat to hang in tension. Flare is equally as elegant but much more industrial in expression. An octagonal base column intersects a flared form of the same kind to create a larger surface exposed upward. Material finish and a multifaceted design conspire when activated by light for a rigid sculpture that has a completely different relationship with its surroundings. The tables from both series will feature the new oxblood leather finish in addition to the existing earthen palette of latte, olive, and camel.Rolo Mini Table LampIn sum, Accents of Oxblood is a significant departure from the comparatively muted quiet luxury and practical chic of the brands past, indicating its sultry forward trajectory. It is a natural progression in Articolo Studios evolution, Kavals adds. And one that were really excited about launching and adding to in the future.Rolo Wall Sconce Facing ForwardDesigner Nicci Kavals of Articolo Studios with Slip StoolTo learn more about the latest from Articolo Studios and peruse existing artifacts, visit articolostudios.com.Photography by Thomas De Bruyne.

Benni Allan, founding director of EBBA, takes an investigative approach to every aspect of his practice. Born and raised in Spain, the architect was surrounded by exceptional design, but it was a visit to fellow countryman Santiago Calatravas City of Arts and Sciences in Valencia when he was 12 years old that made a lasting impression. The park is organized around large pools of water, with buildings interspersed around them that look like dystopian structures made of concrete, steel, and glass, Allan says. I was so taken aback, and I remember thinking that it was something I would end up doing.Benni Allan \\\ Photo: Salva LpezBased in London, Allan strives to reflect poetic material qualities, whether envisioning a retail store or crafting furniture. Every piece and structure is formed to have an emotional impact, much like the rhythms that serve as inspiration for him. Producing is very architectural in the way tracks are composed, he adds. If I had the opportunity, I would dedicate time to developing ways to make and play live, which is essentially creating music in real time.Today, Benni Allan joins us for Friday Five!Photo:Devon Turnbull, courtesy Lisson Gallery1. Devon Turnbull at Lisson GalleryAs someone who enjoys music and has spent most of my life going to gigs, I am very aware of the importance of the quality of sound. Theres been a major shift in the world of listening experiences, and this really came to the fore in an exhibition by Devon Turnbull at Lisson Gallery. The listening room he created was decked out with his own crafted speakers and a setup that offered an almost meditative experience.Photo: Joshua White, courtesy Carpenters Workshop Gallery2. Vincenzo De Cotiis at Carpenters Workshop GalleryI am drawn to work that explores materiality, and especially ways in which a ubiquitous material can be transformed into something so beautiful. In the work of Vincenzo De Cotiis, which was shown at the Carpenters Workshop Gallery in New York, I enjoyed the layering and texture of the material to create natural forms made entirely through an industrial process.Photo: Courtesy of Marjan van Aubel Studio3. Sunne by Marjan van AubelThe Sunne light by Marjan van Aubel is powered entirely by solar energy. Not only a functional piece, this elegant object makes us think about our impact on the world. The light was included in an exhibition at Vitra called Transform!: Designing the Future of Energy, which looked at renewable sources of energy and design responses to the climate issues of today.Photo: Courtesy Silverlens Galleries4. Nicole Coson at SilverlensI was blown away when I first saw a painting of Nicoles a couple of years back, as it reminded me of the shutters on the windows in Spain that block out the sun at the height of the day. Nicole takes common everyday objects and uses them to create intricate prints. In March she had her first solo show with Silverlens New York, titled In Passing.Photo: John Marshall for JMEnternational5. Artist Rachel JonesI was struck by Rachel Jones when I first experienced her work at a show dedicated to contemporary painters at the Hayward Gallery in London. It is no surprise that her beautifully textured forms have really seen her shine recently, including as the designer of this years BRIT Awards trophy.Works by Benni Allan:WatchHouse \ Drawing inspiration from the modernist architectural features of lobbies found in civic buildings, the project is rooted in an approach to craft an inviting, unique space whilst establishing a sense of connection to the broader building. \\\ Photo: Stle EriksenLow Collection is a series of furniture designed by EBBAs director, Benni Allan, as part of an investigation into what it means to sit and how every culture has a different relationship to the act of resting. \\\ Photo: Nina Lilli HoldenBelsize Lane \ EBBA have been appointed to work on the restoration of Belsize Lane, the house designed and lived-in by the unsung female architect Georgie Wolton. The works will involved a careful investigation into the existing structure and the overall fabric in order to bring the building back to life. The ambition is to make a building that is highly sustainable, benefiting from natural cooling and ventilation while making a home fit for the future. \\\ Photo: Riba Pix Archive & James RetiefRotaro \ Working within the unique spaces of Liberty we have created a project focused around ideas of circularity, both in terms of materials and spatial ideas. The environmental response towards fashion is a key message that translates into the overall concept for the space. \\\ James Retief

Google is making it easier to follow the rules of the roador at least know when you should pay extra attention to them. New traffic-tracking features are coming to Maps and Waze, including the ability to report police presence in Maps and keep up with events like the Olympics in Waze.Borrowing a feature from Waze, the iOS, Android, and in-car versions of the Google Maps app now let users report where police are stationed, building on an existing feature that lets you track car crashes and speed traps. Like those features, users can let the app know when theyve seen a cop, and drivers passing through the same area will then be asked to confirm it. So long as people keep confirming police presence, others will keep getting warned about it.Of course, thats a lot of poking around to be doing on your touch screen while youre driving, so Googles also making the report buttons larger.Even within the Maps app, alerts can come from both Maps and Waze users, to give you the widest dataset possible. Waze is also getting some exclusive new features, like the ability to report traffic lights that also track your speed. In addition to user reports, Waze will also use publicly available data to mark up its maps. Waze is also getting the ability to see turn-by-turn directions and other navigation instructions on the lock screen, which will come to Android this month and iOS in the fall.Already rolling out to Waze is the traffic events feature, which collects event-related traffic closures and detours on a single page. Commuters who regularly drive through impacted areas will automatically get a warning from the app once the event has started, which theyll then be able to share with others. Traffic events is live right now for the Paris Olympics.Back to Google Maps: Once youre at your destination, youll be able to get in the building a bit more easily. In the coming weeks, Google Maps will enable Destination Guidance, which will highlight your specific destination building in red and shows entrances to the building in green. The app will also light up nearby parking lots. Destination Guidance will work on all versions of the Google Maps app.

As the cost of higher education continues to soar, many families find themselves grappling with the daunting task of saving for their children's future academic endeavors. 529 plans are a popularand potentially powerfuloption for college savings. Put simply, 529 plans are tax-advantaged education savings vehicles, where the funds are for college only. However, like any financial instrument, 529 plans come with their own set of advantages and limitations. How 529 plans workA parent, grandparent, or any other individual can open a 529 account and name a beneficiary (usually a child or grandchild). The account owner can contribute money to the 529 plan. Usually states offer tax deductions or credits for contributions, though this varies by state.The money in the account is invested in mutual funds, exchange-traded funds (ETFs), or other investment portfolios. Most 529 plans offer age-based options that automatically adjust the investment mix to become more conservative as the beneficiary approaches college age. The investments in the account grow tax-free at the federal level, and in most cases, at the state level as well.When it's time for college, money can be withdrawn tax-free for qualified education expenses. These typically include tuition, fees, books, supplies, and room and board at eligible educational institutions.If the original beneficiary doesn't need all the funds (e.g., they get a scholarship), the beneficiary can be changed to another qualifying family member without penalty.However, if money is withdrawn for non-qualified expenses, the earnings portion of the withdrawal is subject to income tax and typically a 10% penalty. While there are no annual contribution limits set by the federal government, states may set lifetime contribution limits, which are typically quite high (often around $500,000 per beneficiary).Starting this year, unused funds from a 529 plan can be rolled over into a Roth IRA for the accounts beneficiary without penalty. This new tax-free rollover rulea part of SECURE 2.0means you dont have to worry about the current 10% penalty on the earnings if you end up with money left over.529 plans owned by parents have a relatively small impact on federal financial aid eligibility compared to other types of assets.Finally, it's worth noting that there are two types of 529 plans: savings plans (as described above) and prepaid tuition plans. Prepaid tuition plans allow you to pay for future tuition at today's rates at participating colleges, but they're less common and have different rules.Pros of 529 plansThe primary advantage of 529 plans lies in their tax benefits. David Johnston, CFP and managing partner of Amwell Ridge Wealth Management, emphasizes that the tax-deferred growth and tax-free withdrawals are "massive benefits which magnify the longer the money is invested." This tax-advantaged growth can significantly boost the value of your education savings over time.Additionally, 529 plans offer a unique benefit for scholarship recipients. As Johnston notes, "funds equal to scholarships received can be withdrawn penalty-free." This provision ensures that families aren't penalized for their children's academic achievements.Plus, Johnston notes that recent changes have expanded their utility: "Several years ago, provisions were added to use up to $10,000 annually on non-post-secondary education costs, like grammar school or high school." Johnston explains further: "In addition to two- and four-year colleges and universities, funds can also be used towards accredited trade schools." This broadens the potential applications of 529 funds beyond traditional four-year institutions.Another lesser-known feature is the ability to change beneficiaries. Johnston states, "People also aren't broadly aware beneficiaries can be changed (i.e. funds from Child 1 can be moved into Child 2's account)." This flexibility can be particularly useful for families with multiple children.Cons and limitations of 529 plansWhile 529 plans offer substantial benefits, they do have potential drawbacks. Johnston addresses a common concern: "The worst-case scenario is there are funds left overyou saved too much." In this case, there will be that 10% penalty explained above, plus your ordinary income tax on the gains.However, he also offers alternatives to mitigate this issue: "You could hold on to the money for your grandkids, or use some of it to learn something new at a local community college." This highlights the long-term flexibility of 529 plans, even if immediate educational needs are met.Making the most of 529 plansWith rising tuition costs, strategic planning is crucial. Johnston advises, "Various calculators are available to help you determine the future cost of education, which varies greatly by in-state, out-of-state, state institution, or private school."Timing is also a critical factor: "Obviously the sooner you begin, the more you're able to take advantage of compounding." It's important to start to save early, allowing more time for investments to grow.The bottom line529 prepaid college tuition plans offer significant advantages for families saving for education, primarily through tax-advantaged growth and flexibility. However, it's important to carefully consider your family's specific circumstances and future educational needs when deciding how much to contribute. If youre a parent and are looking to set up this college savings vehicle, start looking at online tools can help you compare different plans state-by-state offerings. Heres our guide to opening a 529 for your kid.

If you find yourself on the side of the road with a flat tire, your first move is probably to pull out the spare and change it outor call someone to help you with the switch. Your car's spare may be a smaller space-saving tire meant only to get you to the shop so you can get your full-size tire repaired, but if you drive a newer vehicle, you should check whether you even have a spare on board at all. According to Consumer Reports, about 40% of cars sold today aren't equipped with any type of spare tireeven a temporary onelikely due to manufacturers' desire to increase fuel economy and decrease costs. Some vehicles don't even come with the tools needed to seal or repair a flat. If you discover that your car is one of the 40% that lacks a spare, here's how to prepare for the possibility of a flat tire ahead of time.Learn how to use an emergency repair kitIf your vehicle is without a spare, it may instead have come with emergency repair supplies to repair a deflated tire that has been puncturedthis may include tire sealant and CO2 cartridges. Take the time to familiarize yourself with the tools and read any instructions that explain how to apply sealant (which can actually be more straightforward than a tire change). If you don't have any emergency supplies on hand, you can purchase the stuff yourself, including just packets of sealant or full repair kits. A portable air compressor can also come in handy for inflating sealed flats or low-pressure tires on the go. Repair kits provide a temporary fix, and you shouldn't drive faster than 50 miles per hour or distances longer than 100 miles before getting your tire inspected. Note that tire sealant is ineffective for sidewall tears or severe flat damage, and when used, it may cost extra to be removed during the repair process. Buy a temporary spare or used tireEven if your vehicle doesn't come with a spare, it may have space to store one. You can purchase a space-saving temporary tire that fits your vehicle's make and model or consider buying a used (refurbished) full-size spare online. (Check to make sure a full-sized wheel will fit in your spare wheel well first.) Ensure you also have the tools required to change a flat, including a jack and lug wrench. Check your roadside assistance benefitsWhether or not you choose to add a spare to your vehicle, you should know how to call roadside assistance when you need it. Newer vehicles purchased from a dealership may include complimentary roadside assistance as part of the warranty or service benefits, so check before you pay for an additional subscription. Otherwise, you can add roadside assistance to your auto insurance plan or sign up for AAA.

In a recent update, Netflix retired its dedicated Windows app, and now offers a web app instead. This new "app," however is essentially a shortcut to open the Netflix website, and, as a result, you lose an important feature: downloads.The ability to download videos and watch them offline is critical for many streaming services, since it's not possible to stream your content all the time. I always have a couple episodes or movies downloaded on my devices if I want to watch something when the internet is down, or when I'm traveling without a connection.While Netflix still has downloads on iPhone, iPad, and Android, it dropped download support for Windows. It's not clear why, but you're not out of luck if you travel with your PC. As it turns out, there is a workaround to continue downloading content on Netflix for Windows.How to download movies on Netflix for Windows Credit: Pranay Parab Instead of using Netflix's official "web app," try downloading an older version of the Netflix app, as highlighted by this post on Reddit. This version still has the downloads feature in tact, so you can keep downloading your content as usual. Remember that this is only a temporary fix. Netflix could stop supporting the older version of its app anytime, rendering this workaround ineffective. However, as of this article, it appears to be working. Here's what you need to do:If your PC has already updated Netflix for Windows, you should uninstall it. Go to Settings > Apps > Installed Apps, click the three-dots next to Netflix, and select Uninstall.Next, you should turn off automatic updates on the Microsoft Store in order to stop Netflix from updating to the newest version, which, of course, removes the downloads feature. Open the Microsoft Store and click the profile icon. Go to Settings and turn off App updates.Install the older version of Netflix. To download it directly from Microsoft, go to this Adguard store page and paste Netflix's app link. When you click the checkmark, you'll see a bunch of results, but you want to download version 6.99.5 from the list. Alternatively, the Reddit thread lists download links hosted on Dropbox and Google Drive, but downloading directly from Microsoft is the preferred method.Once the app is downloaded, open Terminal on your PC and paste this command: Add-AppxPackage .Downloads4DF9E0F8.Netflix_6.99.5.0_neutral_~_mcm4njqhnhss8.AppxBundleThis will install the old version of Netflix on your PC, and you will be able to download movies and TV shows as always. Note that the Terminal command assumes that you downloaded the Netflix app package to the Downloads folder on your PC. Feel free to alter the path if it's saved elsewhere. It's also worth noting that even if you disable automatic app updates, Microsoft Store can sometimes try to update all apps on your PC. You can avoid this problem by manually cancelling the download or by keeping the Microsoft Store closed.