Inside look at modern web browser

In this 4-part blog series, we’ll look inside the Chrome browser from high-level architecture to the specifics of the rendering pipeline. If you ever wondered how the browser turns your code into a functional website, or you are unsure why a specific technique is suggested for performance improvements, this series is for you.

Part 1: https://bit.ly/browsers-pt1

Part 2: https://bit.ly/browsers-pt2

Part 3: https://bit.ly/browsers-pt3

Part 4: https://bit.ly/browsers-pt4

The CSS Cascade

Or, How browsers resolve competing CSS styles.

https://wattenberger.com/blog/css-cascade

Tiny helpers

Minifying an SVG, extracting CSS from HTML, or checking your color palette for accessibility — we all know those moments when we need a little tool to help us complete a task quickly and efficiently. If you ever find yourself in such a situation again, Tiny Helpers might have just the tool you’re looking for.

https://tiny-helpers.dev/

web.dev

Explore our structured learning paths to discover everything you need to know about building for the modern web.

https://web.dev/

Life Of A Pixel

This talk is about how Chrome turns web content into pixels.  The entire process is called “rendering”. We’ll describe what we mean by content, and what we mean by pixels, and then we’ll explain the magic in between. 

bit.ly/lifeofapixel

Twelve Days of Front End Testing

There are so many different tests we need to be running on the front end, it’s hard to work out what your need to test for and where to start.

https://24ways.org/2019/twelve-days-of-front-end-testing/

Asynchronous vs Deferred JavaScript

JavaScript is considered a “parser blocking resource”. This means that the parsing of the HTML document itself is blocked by JavaScript. When the parser reaches a <script> tag, whether that be internal or external, it stops to fetch (if it is external) and run it.

https://bitsofco.de/async-vs-defer/

Today, the Trident Era Ends

Starting now, Microsoft will roll out their new Chromium-based Edge browser to their millions of Windows 10 users. And this will also mark the end of an era. The era of the Trident-Engine.

https://schepp.dev/posts/today-the-trident-era-ends/

You might not need a CSS framework

CSS frameworks have been around for a while and they have gotten extremely popular in the front-end development scene. These frameworks provide snippets of code you can just copy and paste in your website to craft the whole layout and UI.

You have already probably read a lot of articles about how they might be good for your projects, but here I would like to do the opposite: to highlight some of the drawbacks they might bring to your websites or applications, and how you can avoid or mitigate them.

You might not need a CSS framework

GitSheet

A dead simple git cheatsheet 

https://gitsheet.wtf/

Easy-To-Use CSS Gradients

Creating a CSS gradient from scratch can be intimidating. But, luckily, there’s a little helper out there that takes away the trouble and makes using gradients a simple act of copying and pasting. Say hello to Gradient Magic, a gallery of unique CSS gradients with everything ranging from standard gradients to angular, striped, checkered, and burst gradients. To find your favorite, you can browse the gallery by style and color. A great addition to any toolkit! 

https://www.gradientmagic.com/

How to do a code review

The pages in this section contain recommendations on the best way to do code reviews, based on long experience. All together they represent one complete document, broken up into many separate sections. You don’t have to read them all, but many people have found it very helpful to themselves and their team to read the entire set.

https://google.github.io/eng-practices/review/reviewer/

My favorite CSS hack

There is one CSS snippet that I have been copy-pasting for 5 years. It is meant to be used when you are working with layout. Different depth of nodes will use different colour allowing you to see the size of each element on the page, their margin and their padding. Now you can easily identify inconsistencies.

https://dev.to/gajus/my-favorite-css-hack-32g3

The cost of JavaScript in 2019

One large change to the cost of JavaScript over the last few years has been an improvement in how fast browsers can parse and compile script. In 2019, the dominant costs of processing scripts are now download and CPU execution time.

https://v8.dev/blog/cost-of-javascript-2019

Moving beyond console.log() — 8 Console Methods You Should Use When Debugging JavaScript and Node

Moving beyond console.log and learn the console functions you have never used for debugging!

https://levelup.gitconnected.com/moving-beyond-console-log-8-console-methods-you-should-use-when-debugging-javascript-and-node-25f6ac840ada

Usage Share of Internet Browsers 1996 – 2019

Usage Share of Internet Browsers 1996 – 2019 [OC] from dataisbeautiful

Can I email

A new place to check email clients support for HTML and CSS features.

https://www.caniemail.com/news/2019-09-09-introducing-caniemail/

How did MS-DOS decide that two seconds was the amount of time to keep the floppy disk cache valid?

MS-DOS 2.0 contained a disk read cache, but not a disk write cache. Disk read caches are important because they avoid having to re-read data from the disk. And you can invalidate the read cache when the volume is unmounted.

But wait, you don’t unmount floppy drives. You just take them out.

How did MS-DOS decide that two seconds was the amount of time to keep the floppy disk cache valid?

The boring technology behind a one-person Internet company

Listen Notes is a podcast search engine and database. The technology behind Listen Notes is actually very very boring. 

https://broadcast.listennotes.com/the-boring-technology-behind-listen-notes-56697c2e347b