Friday Issue Nr. 96 | 19/1/2024

This week came with loads of posts. Fantastic collection of CodePens, typesafe route handler for the NextJS, htmx, Astro 4.2 is out, Vue 3 component library Element Plus, CSS has() property with excellent examples and fun story about IE content rating system.

JavaScript News

Top 100 Most Popular CodePens in 2023

Some of them are real art.

https://codepen.io/2023/popular/pens/10

Typed route handler for the NextJS

This library gives a type safety for API.

https://github.com/venables/typed-route-handler

Is htmx Just Another JavaScript Framework?

htmx is getting quite popular in trends. Here is a post on how htmx sees themselves.

https://htmx.org/essays/is-htmx-another-javascript-framework/

Also, here is a 10-minute video on how to build a simple application with pagination and search.

https://www.youtube.com/watch?v=r0XBULqzsT0

Astro 4.2 is now available

This release includes accessibility rules, the ability to remark plugins to customise image optimisation in Markdown, reworked routing priority for injected routes and more.

https://astro.build/blog/astro-420/

Annoyed at React

It looks like there is a trend of complaining about React lately. Definitely, I agree with some of the points.

https://blog.cassidoo.co/post/annoyed-at-react/

React is a bit weird nowadays. It is a standalone library, but using it with frameworks like Nextjs is recommended. It is actively developed but has had no releases since 2022. More on that in this 8-minute video:

https://www.youtube.com/watch?v=oQiEZ8adag0

However, at the same time, React is still the market's most popular choice (2023); it is used in many projects and works well. Also, I’m grateful that React moved JS into a functional paradigm by introducing hooks.

Element Plus

A Vue 3-based component library for designers and developers

https://element-plus.org/en-US/

Power of PWA

What PWA can do today is impressive. Before jumping into building a Native App, you might want to consider what you can achieve with a simple Web App.

https://whatpwacando.today/

document.designMode

This might be a handy tool for adjusting a website copy to test how some of the edge cases would look. All you have to do is open the dev tools in Chrome and type this command: document.designMode = 'on'

https://developer.mozilla.org/en-US/docs/Web/API/Document/designMode

CSS News

Another set of “most important” 5 CSS snippets

Excellent overview of :has() selector with good examples, followed by Subgrid, Nest CSS, Container query units and really good one - balanced | pretty headlines.

https://web.dev/articles/5-css-snippets-every-front-end-developer-should-know-in-2024

Mixed News

A dedicated scratchpad for developers

It is like built-in Webstorm Scratches but on steroids.

https://heynote.com/

This is a fun article about IE’s crazy content rating system

You might want to scroll down to see an example of how you can create your rating schema.

https://www.devever.net/~hl/pics