Issue #11 - HTTP header for responsible developers, TypeScript generic default values and JavaScript's infamous forgotten keyword
Take a look at how notion improved SEO and performance by migrating their marketing site to Next.js, how you can utilize generic default with TypeScript, compress and resize videos right in the browser and test your understanding of nullish coalescing operator.
Tip of the day
You can set default values for a type generic in TypeScript, allowing you to create variables with the default value without having to pass the generic type.
type Dictionary<T=string> = {
[key: string]: T;
}
// No need to pass the generic here, because string is the
// default value
const person: Dictionary = { name: "Scriptified" };
const car: Dictionary<number> = { price: 12000 };
Articles
Migrating Notion's marketing site to Next.js
Check out how notion migrated their marketing pages to Next.js, what motivated them to do it and how it helped them improve their SEO, performance, and overall lighthouse score.
by Cory Etzkorn
JavaScript's Forgotten Keyword (with)
Check out this interesting appendage from JavaScript's history, that's worth knowing about in case you see it. Also, understand why should avoid using this keyword in your code.
by Randall
Tools
Compress & resize videos in the browser with WebAssembly and FFMPEG.WASM. Works in Firefox & Chrome (SharedArrayBuffer).
by Addy Osmani
A fantastic resource for getting the typographic scale right with the ability to export to CSS!
by Jeremy Church
Tech Talks
HTTP headers for the responsible developer by Stefan Judis | JSConf EU 2019
Building for the web is not easy, developers have to consider a lot of things such as accessibility, performance, design, etc. In this talk, Stefan explores how some HTTP headers can have a direct impact on the user experience.
Quiz
What is the output of the following snippet?
const strongestAvenger = {
name: "Hulk",
characterstics: {
eyes: "green",
weight: "520 Kg"
},
strength: "Super-human strength",
weakness: "Being angry",
timesDefeated: 0
}
console.log(strongestAvenger.timesDefeated ?? "Unknown")
console.log(strongestAvenger.timesDefeated || "Unknown")
This week in GIF
Liked this issue? Share on Twitter or read previous issues.