Frontendies logo

#2 Safari of love

2/28/2023
Hero image for the second issue with a big number two in the center.

Hello πŸ‘‹πŸΌ frontendies! It's our second issue this year, I mean EVER, and I'm thrilled to have every single one of you on board - there are eleven (yes, 11) of us already - I call it a very exclusive and prestigious club! We're still accepting, so don't be afraid to send a link to your friends πŸ˜‰. Now, let's get back to business!

February is all about love... and Safari's team decided to use their passion to roll out a year's worth of features this month! Maybe Safari will shake off the "new IE" name at some point πŸ€·πŸΌβ€β™‚οΈ Either way, great features and improvements are much appreciated! Other than that, some tailwind tools and courses, new stuff from TC39, TypeScript beta, Eleventy v2, and much more - happy reading!

Platform

TC39 update tweet with a list of moved proposals

What TC39 is cooking for us

Lots of new and fascinating stuff is coming our way in the JavaScript world - some of them, like "Change Array by copy" are in stage 4. However, I'm mostly excited by 'with' so I can finally replace items in one line without resolving to index πŸ‘ŒπŸΌ What is your favorite feature?

Read more
Caniuse support chart for container queries

Container queries stable in all browsers

We celebrated container queries last month, with Firefox finally moving them to beta, but this time around, we got a lovely valentines day's gift from Mozilla - Firefox v110 stable release with holly grail Container Queries πŸŽ‰

Read more
Example of masonry layout

Masonry layout

Entirely unexpected development but nonetheless quite welcome - Safari introduced a masonry layout in their latest technology preview! There is a chance we'll be able to create beautiful photo galleries with 2 lines of CSS soon! 🎨

Read more

TypeScript v5 beta!

TypeScript is approaching its new major release! Version number 5 is almost ready and got to the beta phase. Lots of new features and changes. Go check out the detailed announcement on Microsoft's dev blog.

Read more

Element internals

Custom elements are the way to o go in 2023, but something that will hit you right away is how hard it is to make them fully accessible - especially anything around forms. Element internals is something that is supposed to address these issues. It allows you to build custom elements treated by a browser more like native elements rather than some weird thing in between. Safari was the last major browser to implement ElementInternals API, so happy coding!

Read more

Animate Display

Around the end of last year, the CSS Working group finally decided it was worth animating display property. It took little time for Chrome's team to implement this feature, and it looks like there will soon be no need to resolve to visibility/zero-width/timers hacks!

Read more
iPhone with web push notification on lock screen

Web Push for PWAs!

The beta release of iOS 16.4 brings tons of Safari upgrades (still quite a shame that Safari is tied to iOS releases) and one that undoubtedly stands out - Web Push support for PWAs! I still need to create PWA, but this is big news for anyone in that space - Safari was one of the last blockers in the broader adoption of this approach.

Read more

Social

Protailwind home page thumbnail

Pro Tailwind

New project straight from a former member of the Tailwind team: Pro Tailwind - Advanced Tailwind CSS Concepts & Patterns! Simon just released the first multi-theme strategy workshop, which looks very promising!

Read more
Liveblocks homepage page thumbnail

liveblocks.io

Yet another linear-inspired website, but this time it's quite unique - I love all the lovely interactive details like these clickable dots at the top of the page and the nice grainy textures used throughout the design. Performance on my M1 is excellent, but lighthouse doesn't agree - 54 points for performance and 88 for accessibility on mobile 😬. Design top-notch - implementation… I guess you can do better than that.

Read more

Tools

Sandpack announcement page thumbnail

Sandpack 2.0 and Nodebox

A fascinating tool from one of the most popular live code/snippet/playground platforms, codesandbox.io, that allows you to run almost any nodejs code in the browser! Imagine you can run Vitejs or any other build tool in your client! Endless possibilities!

Read more

Tailwind Variants

You can do this with a simple object map, but Tailwind Variants brings a few little features that are hard to resist. It's a popular approach you may want to use, especially for building reusable components - now you have a tool for it!

Read more
11ty v2.0  announcement page thumbnail

Eleventy v2

One of my favorite static site generators finally got another major release, and it's smaller and faster than before! On top of that, it brings support for WebC - single file web components!

Read more

Worth reading

The (extremely) loud minority

An interesting perspective from Andy Bell on what you see on social media and how any opinion can be amplified, good or bad. Loud does not necessarily mean right. Also, WordPress is still responsible for 43% of the internet!

Read more

Vuejs about signals

There is a lot of talk about signals in modern frameworks, and the Vuejs team decided to find a place for a quick explanation of how it relates to their tool in their documentation.

Read more
The Key To Good Component Design Is Selfishness article page thumbnail

The Key To Good Component Design Is Selfishness

Good article on how to approach building reusable and extensible components. Designing components interface is not easy, and mistakes are often quite expensive - give this article 5 minutes and save yourself some pain.

Read more

Want updates like that every month?

Sign up for our newsletter!

One e-maile, once a month!