Frontendies logo

#6 CSS Config and pancake layouts!

6/30/2023

Hello 👋🏼 frontendies! Welcome to the sixth issue of our newsletter!

This month was mainly a continuation of conference season with some excellent ones like CSSDay and Figma's Config - you'll find selected materials below! Beyond that, we have a couple platform updates, articles worth reading, and a very long list of new or updated tools worth checking out. Happy scrolling!

By the way, summer is here already - have you made your summer break plans yet? 😎

Platform

WWDC23 - What's new in CSS

Safari's team worked hard last year, pushing over 140 new features our way. But they seem to have no intention of slowing down! In this video, Jen Simmons presents already shipped and upcoming CSS features around layouts, colors, selectors, and typography.

Read more

New CSS color spaces

CSS now supports new color spaces and functions in all major engines, allowing us to access vibrant HD colors on the web.

Read more

@property: giving superpowers to CSS variables

Firefox, the last vendor, finally pulled the trigger and pushed @property to the nightly build! With this API, you can write semantic CSS within CSS itself that can, i.e., enable smooth transitions between gradient values. It's been a while since this feature surfaced for the first time (over 3 years!), but now it's a great time to refresh your memory and familiarize yourself with it. Firefox plans to push this to production with v116 in early/mid-July.

Read more

Social

The Deconstructed Pancake 🥞

A quick walkthrough of flexbox stretching with a pancake layout as an example. Is there anything that doesn't go well with pancakes? I guess not!

Read more

The Future of Responsive Design

Twitter thread summarizing Adam and Una's talk presented at Figma's conference - Config 2023. Many aspects of responsive design like HDR colors, adaptive layout with container queries, font sizing, and more. The thread also has a link to the video, so you can pick your format.

Read more

Tools

New W3C website deployed

The W3C has deployed a new website, redesigned with a cleaner and more elegant design. Redesigning a website that has been up since 1994 is not easy - look at the W3C blog post announcement and "working in the open" page made and maintained by Studio 24 (the agency responsible for that redesign) to learn more details.

Read more

react.gg

React.gg is the interactive way to master modern React, with reading sections, Leetcode-style practice problems, and enjoyable videos. If you're looking into learning React, this may be something for you. The landing page is also nice and worth checking out!

Read more

Framer

This is something that everyone has to experience on their own - AI-generated website design and implementation. Obviously, they are very repetitive and markups may not be award-worthy. Still, if you need to set up something real quick, i.e., a prototype - nothing is easier than writing a prompt, adjusting some text, and hitting a Publish button!

Read more

Svelte 4

The Svelte team just announced the stable release of Svelte 4, with improved performance and developer experience. This time, v4 is a transitionary version, which sets the ground for improvements and features coming with v5. An iterative approach like that sounds much better than rewriting the whole codebase for months due to tons of breaking changes. More in the official announcement.

Read more

Vitest v0.32.0

Vitest just released v0.32.0 with breaking changes, new features, and bug fixes. Check it out and see what's new!

Read more

React Native 0.72

React Native 0.72 is here with symlink support, better error handling, and other developer experience improvements. Check out the list of needed changes in the upgrade guide, or read the blog post for more info.

Read more

VineJS

VineJS is a form data validation library for Node.js that provides both runtime and static type safety. It has an extensive suite of 50+ validation rules and 12 schema types and is 5x-10x faster than other validation libraries. This one is obviously dedicated to the backend, but form validation is so close to frontendies hearts that I could not skip this one.

Read more

London Underground dot matrix typeface

Dot matrix fonts in the style of London's Underground arrivals board. Perfect for adding a unique touch to your projects!

Read more

Vituum

Vituum is a fast prototyping tool for Vite that adds various plugins and template engines to help you quickly create statically generated websites and email templates. I like that the author doesn't try to compete with Astro or 11ty but instead positions itself as a quick and easy prototyping tool within the Vite ecosystem.

Read more

Worth reading

CSS Day

CSSDay 2023 brought many great speakers from around the world, like Una Kravets, Adam Argyle, and Jhey Tompkins - they never disappoint! Go find a topic that interests you, and check the video out!

Read more

Is React Having An Angular.js Moment?

Interesting perspective on the recent push for Server Components in react ecosystem. Are traditional React apps safe, or should we prepare for significant rewrites as we had between Angular.js and Angular v2?

Read more

The Next Phase of Eleventy: Return of the Side Project

Eleventy is transitioning from full-time development and returning to its roots as a side project. Zach explains the move a bit and asks for help from the community to inform decisions on which plugins to prioritize or deprecate.

Read more

Want updates like that every month?

Sign up for our newsletter!

One e-maile, once a month!