What does:
- How to achieve an image “blur up” effect using only about 20 characters
- A CSS section separator generator (?!)
- Tim Kadlec exploring the performance cost of using popular frameworks
- A compiler to convert React-like apps to VanillaJS
- Tania Rascia teaching us how to write an emulator in JavaScript
all have in common?
They are all included in this issue of Fredrik’s front-end quick read ofc!
BlurHash
Are you familiar with the “blur up” technique? The idea is that we’re lazy loading images, but rather than showing nothing before the image loads, you show a blurred version of the image you’re about to load. The blurred version being much, much smaller and less of a performance concern. This library makes the blurry images from only about 20 characters pre-saved and renders them to a <canvas>.
CSS Section Separator Generator
That’s a weird bunch of words to put together but it describes this website perfectly: you can use this CSS generator to quickly generate backgrounds if you want to make the bit between sections of your website more interesting:
The Cost of Javascript Frameworks
Using data from the HTTP Archive, Tim explores the performance cost of using various popular frameworks. Some good analysis here.
Vidact — A compiler to convert React-like apps to VanillaJS
Compiles pure React-compatible JavaScript (JSX) to vanilla JavaScript with no virtual DOM.. think similar to Svelte, but without introducing a new syntax. A curious idea.
Writing an Emulator in JavaScript
A wonderful article that shows how emulators work and that will teach you to actually write an emulator using JavaScript!
Thank you for reading and happy coding! ❤️