2021 week 43—Story of VSCode.dev, How Web Browser works, and several tips on web development

Hi there,

This is Thomas Mak from Macao. This week, we have links on css absolute position, drawing with CSS, how web browser works, and performance tips and tools.

→ Editor / VSCode in browser to access local folder
https://vscode.dev/

The editor: https://vscode.dev/

And the story behind: https://code.visualstudio.com/blogs/2021/10/20/vscode-dev

Bringing VS Code to the browser is the realization of the original vision for the product. It is also the start of a completely new one. An ephemeral editor that is available to anyone with a browser and an internet connection is the foundation for a future where we can truly edit anything from anywhere.

→ CSS / Less Absolute Positioning With Modern CSS
https://ishadeed.com/article/less-absolute-positioning-modern-css/

A post on how we can use CSS grid to archive what was used to be done via absolute position.

→ CSS / Web illustrations in a single div with Lynn Fisher
https://blog.codepen.io/2021/10/20/338-with-lynn-fisher/

A podcast episode on drawing illustration with a single div.

→ Browser / Web Browser Engineering
https://browser.engineering/

A web book explaining how web browser works. It covers broad topics from downloading, rendering, laying out, handinling user interaction, to sending requests back to servers.

→ iOS Dev / Apple Tech Talks 2021
https://developer.apple.com/tech-talks/

This is like the WWDC 2.0. It is starting tomorrow.

→ DB / Redis Anti-Patterns Every Developer Should Avoid
https://developer.redis.com/howtos/antipatterns/

Using anti-patterns in NoSQL can results in very slow performance or even leads to re-writing the project. Here are 12 things to avoid.

→ Performance / The art of deception, Lighthouse score edition
https://www.zachleat.com/web/lighthouse-deception/

Please don’t game your Lighthouse score.

→ Tool / HTML Size Analyzer
https://www.debugbear.com/html-size-analyzer

Analyze HTML size and catch bloat like inline images, large React hydration state, or code duplication.

→ ML / Neual Networks from scratch
https://aegeorge42.github.io/

I enjoy the slides very much! Especially the sandbox layers visualization.

Until next week,
Thomas Mak