August was a breeze, I’m not sure I have registered it in my 2021.

Everyone talks about how Safari is the new IE. Safari’s release cycles keep everyone on the web waiting for features and when they come they have some peculiarities that will need to be fixed or ironed out. This coming from a default browser on an OS that people actually use is disheartening. HTTP Toolkit delivered a comprehensive piece on the criticisms so far on their blog post - Safari isn’t protecting the web, it’s killing it.

Meanwhile the Chrome team put out an RFC to remove alert, prompt and confirm from the web and people delivered with criticism on point. Rich Harris (author Svelte) makes some great points on his blog post titled Stay Alert

Releases

• Shared Element Transition API - This API allows you to animate transitions on webpages or single page applications bringing more of native app beauties to the browser. The feature is now on original trial in Chrome.

• Firefox 91 - Enhanced Cookie Clearing - One of the major features of Firefox 91 is Enhanced Cookie Clearing which is build upon the Total Cookie Protection build in the last release.

  With Enhanced Cookie Clearing, if you clear site data for comfypants.com, the entire cookie jar is emptied, including any data facebook.com set while embedded in comfypants.com.

• Safari 15 Beta - There is the new redesigned tab groups and address bar. Safari now comes with ESM module support in Workers and Service Workers. Top Level await is another feature that has been on the waiting list for a while.

• SWR 1.0 - The library that got everyone talking about stale-while-revalidate is finally 1.0 with a host of new features and performance updates.

Tutorials

• Marianne Writes a Programming Language - Marianne Bellotti wants to understand how the people who design programming languages do what they do, so she’s jumping right in and giving it a shot by writing her own language.

• Efficient Infinite Utility Helpers Using Inline CSS Custom Properties and calc() - Sometimes when you change projects from the Tailwind world of things, you miss having the little helpers for padding, margin and so on. You could surely write these on your own, iterate over with JS or SCSS or some nifty PostCSS patterns, but this article shows you how using custom variables to build them in a couple of lines.

• Practical Uses of CSS Math Functions: calc, clamp, min, max - For the times you are wondering, I can calculate all this in my head, why use this math function, that too in CSS

• Modern JavaScript in Rails 7 without webpack - Rails is embracing ESM modules (now available in all major browsers) to ship modern JavaScript without Webpack. Rails also skips over the NPM modules part by relying on ESM module CDNs like Skypack and Unpkg, while this is the only path demoed, it would seem like Rails will have to support bundling node modules locally like vite or snowpack. The abstinence to webpack has also extended to Babel and writing JSX without transpiling which might be a bit too much for batteries included. Also check out Matthew Ballontoni’s article on filtering down Rails job posts to reach the conclusion React is now effectively part of the Rails stack

In the Spotlight 🔦

There are some interesting specs coming up in CSS.

Cascading Layers

The new feature of cascading layers allows authors to specify the order in which CSS stylesheets or styles themselves are cascaded. This means in place of cleverly adding hacks for arranging our stylesheets in particular orders, the @layer keyword allows you to specify the order beforehand. You just have to remember to add the layer to the stylesheet as well.

@layer bootstrap, bootstrap.theme, user.theme, override, utilities

This specifies the order in which the styles will be considered/cascaded whichever order they are included in. More details in the spec here

Current browser status:

• Chrome has announced they are building the feature and should be available behind a flag soon.

• Webkit tracking issue has been assigned to a developer

• Firefox has started work on it as well.

Nesting

You have probably used CSS nesting on one of the preprocessors or CSS-in-JS solutions before. But the feature is finally making it natively into CSS (currently in Draft). This is what that will look like:

table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

Where the & character denotes the parent selector. The native support will also come into help for supporting @layer tags that we discussed above.

More details in spec

You can use most of nesting today by transforming CSS with a tool like postcss-cssnext.

Do these changes replace preprocessors like SCSS?

PS: SCSS has a new JS API RFC

In Other News

• Repo Visualisation - Github is trying out new ways of repo visualisations.

• Tesla Bot - Elon Musk showed off their company’s plan to build a new humanoid robot at their AI Day (?). You can watch the short Tesla Bot presentation here and a Marques Brownlee explainer in case you are confused.

• How I experience web today - This site is a clever collection of patterns that we see on the web today - cookie notices, newsletter popups and so on and so forth.

• Official React survey - There is an officlal React team survey in town and it has terrible UI and UX.

• Horizon Workrooms: All you need to know about the VR meeting platform - Facebook launched a new Metaverse, in plans with their VR bet. We have seen Microsoft attempt the same with their Hololens headsets, but this seems to be the most refined approach put on stage.

Looking Ahead

• Wake me up when September ends