Prince William, Duke of Cambridge, may or may not be the co-creator of Styled Components

Angular releases v11.0

Genesis 2:1

Make a wish… At 11:11 on 11/11 we made a wish that all Enterprise-Scale Web Application Developers™ would feel loved. Later in the day Angular 11 was released.

This release doesn’t include many big, flashy changes, but it does come with a laundry list of smaller features and improvements. Here are 3 big things you should know about the AngEl release. (Angular Eleven => AngEl.)

(Just hire us to run your branding already, Google.)

1. CLI Updates: Lots of speed and usability improvements here. Automatic font inlining (for Google Fonts, at least) to speed up your app’s first contentful paint. New CLI support for Hot Module Refresh (HMR) to instantly update your running app with your latest changes in development. Updates to the CLI output to make the logs and reports a lot prettier and actually readable.

2. Component Test Harnesses: This test suite was available for a few Angular Material Components back in v9, but now it’s available for all components. There’s also a new parallel function that lets you run multiple async interactions in parallel, which should make it a lot easier to test these components.

3. Experimental support for Webpack 5: For now, you’re only able to experiment with module federation. But support for incremental builds and other Webpack 5 features are in the works and are expected to come in near-future releases.

Other notable v11 features/improvements include stricter types, faster builds, updated linting, and the ability to use translation strings outside of Angular.

The Bottom Line

In the highly scientific field of numerology, the number 11 is supposed to represent “something intuitive and spiritual.” Intuitive and spiritual? That does sound exactly like Angular.

---

Babylon.js 4.2 — A powerful game engine

Y’all wanna system link sometime?

Babylon.js is an open-source 3D rendering engine that’s built on JavaScript and web standards. It’s mostly used by game developers who appreciate it for the simplicity it offers when trying to build cross-platform games and experiences for the web.

Last week Babylon released v4.2 (AKA v420-blaze-it), which doubles down on the “powerful but simple” idea with a robust set of new tools and features.

We’ll cover a few of the cool ones and include links to the appropriate section of the Babylon Playground where you can play around and pretend to be the artsy creative developer we all wish we we could be (deep down).

New Particle Editor: Lets you create, edit, and shape particle systems with or without writing code (depending on if you want to use the clickable editor or not).

Skeleton Viewer: A new debugging tool that can render bones and joints, visualize skin weights, and more so that it’s easier to catch texture issues in your 3D images.

Physically Based Rendering (PBR) Support in the Node Material Editor: Another new, clickable editor that lets you create and modify your own PBR materials in dozens of ways.

Babylon React Native: A system for building native apps with the same code used for Bablyon web apps that “takes the power of React Native and combines it with the power and simplicity of Babylon.js to create some truly amazing cross-platform experiences.”

The Bottom Line

It’ll be interesting to see how projects like Babylon evolve as 3D rendering continues to expand beyond gaming and into spaces like AR, ecommerce, prototyping, logistics, and more.

---

Spot the Bug

Spot the bug in this Tweet. (❤️ you Jon!)

---

Cool Bits

1. Rob wrote about his 10 Insights from Adopting TypeScript at Scale.

2. Bede wrote a dominant Mancala bot in JavaScript. Now he’s pitching Netflix on his mini-series: “Queen’s Gambit 2 - but with Mancala and Software”. Gonna need to workshop that title.

3. Yonatan Kra gave a 30-minute talk on the Event Loop at (virtual) WarsawJS.

4. Igor created Harold — a CLI tool that compares frontend project bundle sizes..

5. Phosphor is a free, flexible icon family with 3,500+ icons. A “flexible family” with over 3,500 members definitely sounds like a cult. (“You have more fun as a follower, but you make more money as a leader” -Creed from The Office)

6. CKC made a tutorial on the well-known marching squares algorithm and by well-known we mean “you vaguely remember it if you have a computer science degree”

7. Windups is a typewriter effect library for React that’s perfect for giving your web app that Jack-Kerouac-beat-writer aesthetic. Just add speed!

8. Mermaid lets you create well-designed flowcharts and diagrams using “markdown-inspired” syntax. Not to be confused with Mer-man.

---

Spot the Bug - Answer

const options = ["jersey mikes", "firehouse", "subway"]

options[Math.floor((Math.random() * 3) + 1)]

By adding 1 to the result of Math.random() * 3, it will always be greater than 1 which means jersey mikes will never be chosen.

const options = ["jersey mikes", "firehouse", "subway"]

options[Math.floor((Math.random() * 3))]

The bigger problem though is why Jon would include Subway on this list…

---

This week on ui.dev

• Programmatically navigate with React Router v5

• Customizing your own Link component with React Router v5

• Recursive paths with React Router v5

---