Frontend Briefly - News and insights from the world of frontend development #8

1. Bun - new JavaScript runtime

Bun.js is a new JavaScript runtime similar to Node.js or Deno. It is a complete tool with which you can work on JavaScript & TypeScript projects without having to install a bundler, transpiler, TypeScript...

• Bun.js implements Web API e.g. fetch, WebSocket, ReadableStream, etc.,
• ~90% of Node-API functions e.g. fs, path, Buffer, etc.,
• npm packages, you can install as you are used to,
• native support for TypeScript & JSX,
• Bun automatically loads environment variables from .env files. On require("dotenv").config() you can forget it exists,
• and many other useful functions…

And the best at the end. Bun.js is much faster than Node or Deno. According to the author, Bun.js is 3x faster compared to Node or Deno, and you can install packages 20x faster than yarn. Bun aims to replace Node and Deno and also tools such as Webpack. Bun runs on WebKit's JavaScriptCore engine, unlike Node.js or Deno, which are built on the V8 engine and written in the Zig language.

2. Defensive CSS

When creating the page layout, we also have to think about edge cases. For example, we can spoil the layout of the page with a long text that we did not expect. That's why Ahmad Shadeed's guide was created to help you write defensive CSS. Thanks to this, you will write CSS that will be bug-free and ready for the future even for unexpected situations. You will find 24 tips in the guide so far, but the content will gradually increase.

3. Storybook Community Showcase #2

Storybook is constantly gaining popularity. That is why this article was created, where you will find an overview of the news that was created in his community, for example:

• What's new in the recently released version of Storybook 6.5,
• Encyclopedia of components,
• Figma plugin,
• Story Explorer for VSCode,
• New additions to Storybook,
• Many learning resources.
• etc…

4. Overview of state management approaches in React

In React, it is not strictly defined how to manage global state. Therefore, a number of approaches and libraries have been created that solve this problem. It is then difficult for us developers to choose the right solution and we often choose the currently most popular one. In the article, The new wave of React state management, you will learn more about the problems solved by libraries such as Redux, Recoil, Jotai etc… Each of these libraries has its own advantages and disadvantages. After reading this article, you will have a better understanding of which library is the best fit for your application.

‍

5. Radix UI v1

Radix UI is a React UI library with unstyled components. Thanks to this, you can write your own styles very easily, without having to overload the default CSS. Radix UI will solve all the dirty work with logic for you (e.g. opening/closing modals) and what's really cool is that all components are accessible. You can leave focus management, keyboard control or screen reader support (that is, things you never have time for) to this library.

• Radix UI currently offers 26 components,
• Support for SSR in React 18,
• You can install individual components separately, thanks to which you save the size of the bundle,
• Support for CSS-in-JS (e.g. styled-components, emotion, stitches...) together with animation libraries,
• etc…

I personally tried Radix UI on a project and I have to admit that I had a great time working with it. I believe this library has great potential.

6. Vite 3

Vite is a build tool that significantly improves the development environment for frontend developers. You can use Vite to setup a development environment for frameworks such as Vue or React, but also for native JavaScript.

Vite solves problems such as:

• Slow start of the dev server thanks to esbuild and native ES modules,
• Slow updates and subsequent reload of the website after editing the file,
• Native support for transpiling TypeScript and JSX files,
• Many other useful functions such as importing static files, JSONs, etc. You can read more in the documentation

You can read all the news that came in the new version on the official blog.

Articles worth reading

• Technical Writing for Developers - In addition to coding, developers must be able to document new functionality, write comments or communicate within the team... In the article you will find several tips on how to move to a new level in technical writing.
• How to Use Next.js Middleware - What are Next.js middleware functions and how to use them with useful examples.
• Avoiding <img> layout shifts: aspect-ratio vs width & height attributes - Finally, we have two simple techniques to avoid layout shifts.

A few articles about accessibility

• <article> vs. <section>: How To Choose The Right One - In the article you will learn when to use <article> or <section> and also how content grouping affects accessibility.
• Introduction to keyboard accessibility - Watch the lecture where they cover the basics of keyboard accessibility and how to test it on the web.
• With :focus-visible, you can have focus styles when it makes sense - Many developers reset styles for :focus because it indicates focus even on mouse clicks. You can fix this behavior using :focus-visible, which sets the focus state only when it makes sense.

Conclusion

If you liked the news overview, don't forget to subscribe to our newsletter. You can also read the news from last month, which we brought in the June Frontend Briefly.