From URL to interactive

Posted by: Web Development Services

Imagine if you want you to be behind the wheel of a beautiful Chevrolet convertible from 1957, which makes your way across the desert on a wide-open highway. The sun goes down, so of course you have the top, of course. The breeze caresses your cheek like a warm hand while your nose catches a hint of air ... What was that?

The car pendulum and chokes before it loses all its power. You coast, more and more slowly, to a halt. Steam comes out of the hood. Oh jeez. What happened by chance?

You reach down to open the hood and open the door. When you get off, you run to the front of the car. As you release the latch and raise the bonnet, you get even more steam in your face. You hope it just water.

If you look around, it is clear that the engine is overheated, but you have no idea what you are looking at. Back home you have a guy who is great with these old engines, but you fell in love with the luxurious curves, the fins, the soft interior, the allure of the open road.

A tumbleweed rolls past. A buzzard screams in the distance.

What happens under the bonnet?

Years ago, my colleague Molly Ohlschlager used a variant of this story to explain the importance of understanding our tools. When it comes to complex machines such as cars, knowing how they work can really get you out of trouble if something goes wrong. Do not understand how they work and you might end up, well, eat buzzard.

Molly and I tried to convince people at that time that learning HTML, CSS and JavaScript was more important than learning Dreamweaver. Like many similar tools, Dreamweaver allowed you to focus on the look of a website without having to worry about how the HTML, CSS, and JavaScript that produced it really worked. This analogy still applies today, although perhaps more for frameworks than WYSIWYG design tools.

When you think about it, our entire industry depends on our belief in a handful of 'black boxes' that few of us fully understand: browsers. We transfer our HTML, CSS, JavaScript, images etc. and cross our fingers and hope that they show the experience we have in our heads. But how do browsers do what they do? How do they take our users from a URL to a fully rendered and interactive page?

In order to get from URL to interactive, we have compiled a handful of incredibly knowledgeable authors who can act as our guides. This journey will take place in four different legs, delivered in the course of a few weeks. Each gives you details that will help you do your job better.

Lay 1: Server to Client

Ali Albas understands the ins and outs of networks and he starts this journey with a discussion of how our code comes first to the browser. He discusses how server connections are made, caching and how service employees contribute to the request and reaction process. He also discusses the "origin model" and how performance can be improved with the help of HTTP2, customer tips and more. If you understand this aspect of how browsers work, this will undoubtedly help to make your pages download faster.

Capture 2: tags for DOM

In the second episode, Travis Leitha, a former editor of the HTML specification of the W3C, takes us through the process of parsing HTML. He treats how browsers make trees (like the DOM tree) and how those trees become element collections that you can access through JavaScript. And when it comes to JavaScript, he will even discuss how the DOM responds to manipulation and events, including touch and click. Armed with this information, you can make smarter decisions about how and when you touch the DOM, how to shorten Time to Interactive (TTI) and prevent unintentional reflux.

Leg 3: braces to pixels

Greg Whitworth has spent much of his career in the weed of CSS mechanics of browsers, and he is here to tell us how they do what they do. He explains how CSS is parsed, how values ​​are calculated and how the cascade actually works. Then he delves into a discussion about layout, painting and composition. He joins with details on how hit tests and input are managed. Understanding how CSS works under the hood is crucial for building resilient, high-performing and beautiful websites.