Issue #12 - Files based routing with React router, improve type safety with readonly and hone your flexbox skills

Learn how you can bundle non-JavaScript assets in your projects with JavaScript, take a look at a tiny React library that lets you achieve cool reveal on-hover effects, hone your TailwindCSS flexbox skills with this cute game and check out how Netlify applies experimental thinking to design

Tip of the day

For the TypeScript functions that take an array as an argument you can use the readonly keyword to prevent accidentally modifying the provided array.

function doSomethingWithArray(value: readonly number[]): void {
  // This will show a type error
  value.reverse();
  // Something awesome...
}

Articles

Bundling non-JavaScript resources

Bundling JavaScript modules is an essential part of modern web development, but more often than not you also have to deal with all sorts of other resources like WebAssesmbly, StyleSheets, fonts, etc. Explore with Ingvar how you can bundle these with resources with JavaScript.

by Ingvar Stepanyan

File-based routing with React Router

Learn how you can enable Next.js like file-based routing using React Router with Vite for client side applications with just 30 lines of code

by Omar Elhawary

Tools

react-xray

A React component to reveal images on user interaction, written with TypeScript + React.

• Super customizable (a zoom version!)
• Keyboard accessible + touchscreen friendly
• Tiny (3kb gzipped)

by Nik

Knights of the Flexbox Table

A programming game to help hone your flexbox skills with Tailwind CSS

by Beyond Code

Tech Talks

Design Like a Scientist

Quiz

What will be the output of typeof a and typeof b in the following snippet:

function foo() {
  let a = b = 'bar';
  a = 4;
  return a;
}

foo();
typeof a; // => ???
typeof b; // => ???

This week in GIF

Liked this issue? Share on Twitter or read previous issues.