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

1. GitHub Universe 2022

Watch the recording of the GitHub Universe 2022 conference. The topics were varied:

• AI (GitHub Copilot)
• GitHub Codespaces
• GitHub Cloud
• Software security
• etc…

You can also find an overview of all the news on the blog or watch the recording of the conference on YouTube.

2. News in the ecosystem of libs and frameworks

Over the past two months, a bag of news has literally burst open:

2.1 Next 13.1

Next in the new version 13.1 brings several new features for (stable) pages/, but also (beta) app/ folder:

• app Directory (Beta): Improved stability and performance
• Built-in module transpilation using next-transpile-modules
• Edge Runtime (Stable): Simplified Node.js runtime for Edge. You can read more about Edge Runtime in this article: Vercel Edge Functions are now generally available
• Turbopack Update: Support for Tailwind CSS, next/image, next/font, etc.
• Improved Middleware
• You can read more news on the blog

2.2 Ant Design 5.0

The new major version of UI link Ant Design v5.0 brought several new components, Design Token Model, improved component customization options, etc.

2.3 New features in TypeScript 4.9

• satisfies operator.
• Support for auto-accessors in an upcoming version of ECMAScript.
• Better performance
• You can read more on their blog.

2.4 Deno 1.28

The biggest change in Deno 1.28 is support for npm. This means that you can start using more than 1.3 million npm packages, e.g. Prisma, MySQL, frontend libraries like React, Vue, etc.

2.5 TanStack Router

Modern and scalable routing, although only a beta version so far:

• 100% Typesafe.
• Independent of a specific framework.
• Built-in caching
• Size only 10 KB.
• You can find more on their website.

2.6 SWR 2.0

Library solves data fetching (similar to Fetch API), but adds the possibility to cache requests and other useful functions. By far the biggest new feature in SWR 2.0 is the support for mutations, as without it this lib wasn't very useful.

2.7 Vite 4.0

Some new features in Vite 4.0:

• Upgrade to Rollup v3.
• @vitejs/plugin-react-swc plugin: application build is provided by esbuild, and during development, Babel is replaced by SWC.
• You can find more news on the blog.

2.8 tRPC v10

Communication between frontend and backend was and still is problematic. tRPC library serves to create a typesafe API that uses the full potential of TypeScript. It's definitely an interesting alternative to REST API or GraphQL without having to generate code or use a schema. You can find more about the new version of tRPC on the blog and you can also read why they stopped using GrapQL in Echobind and switched to tRPC instead.

3. Will AI take developer's jobs?

I certainly don't need to introduce WebGPT or GitHub Copilot anymore. Should we (not only) developers start worrying about jobs because we will be replaced by AI? Read Jason Warner's interesting take on Twitter:

4. The State of CSS 2022

The State of CSS 2022 survey results are now available. Here you will learn about current and future trends in CSS. 14,310 developers participated in the survey, and these results may also influence the future direction of CSS.

5. New viewport units

Existing units like vw or vh work fine on computers. However, on mobile devices, these units did not work reliably, because the screen size is affected by the presence or absence of dynamic panels with URL address, buttons, etc... Therefore, new viewport units are coming, such as dvh (dynamic viewport), lvh (small viewport) or lvh (large viewport). Details can be found in the article The large, small, and dynamic viewport units and also Prepare for viewport resize behavior changes.

Other articles worth reading

• What does CSR, SSR, SSG and ISR means and why should you care? – An overview of the methods by which Next generates pages.
• Minimal TypeScript Crash Course For React – A summary of the most commonly used types in React.
• Working with Zustand -A better alternative to Redux?
• Getting the most from GitHub Copilot – A few tips for lazy programmers to make their work easier.
• Data Fetching: FETCH API Approach vs SWR Approach – When the ordinary Fetch API is not enough, but we should rather use library.
• Color Formats in CSS – A large overview of CSS color formats and instructions on how to choose the right one.
• An Interactive Guide to Flexbox – Instructions on how to use flexbox to the fullest.
• Is React going anywhere? – React has been with us for almost 10 years. Is it time to replace it?

Modern procedures for optimizing web performance

• Prerender pages in Chrome for instant page navigations –Speculation Rules API that comes in new versions of Chrome.
• Optimizing Web Fonts in Next.js 13 – In the new version of Next, there was an improved way to optimize font loading.
• Optimize Interaction to Next Paint – How to optimize Core Web Vitals Interaction to Next Paint metric.

A few articles about accessibility

• 7 tactics that benefit both accessibility and SEO –Several techniques to improve SEO and website accessibility at the same time.
• Progress Over Perfection: A Better Way to Accessibility – Even small changes can make a big difference.
• Using Automated Test Results To Improve Accessibility – How to work with automated accessibility testing results.
• WCAG 3.0: are we there yet? – What is the state of the new WCAG standard?

Conclusion

If you liked the news overview, don't forget to subscribe to our newsletter. You can also read the news from the November Frontend Briefly.