Browsers

How to Edit Source Files Directly in Chrome — SitePoint – Website Design Article

This popular article was updated in 2020. A web developer’s typical day involves creating HTML web pages with associated CSS and JavaScript in their favorite editor. The workflow: Open the locally hosted page in a browser. Swear. Open DevTools to investigate the layout and functionality problems. Tweak the HTML elements, CSS properties, and JavaScript code to fix the issues. Copy those changes back into the editor and return to step #1. While tools such as live reloading have made this…

Read More

Caching Strategies in the Age of PWAs – A List Apart – Website Design Article

Once upon a time, we relied on browsers to handle caching for us; as developers in those days, we had very little control. But then came Progressive Web Apps (PWAs), Service Workers, and the Cache API—and suddenly we have expansive power over what gets put in the cache and how it gets put there. We can now cache everything we want to… and therein lies a potential problem. Article Continues Below Media files—especially images—make up the bulk of average page…

Read More

Firefox Kiosk Mode – Website Design Article

As someone who loves the HTML and web APIs, I want to see them used in all different types of devices and mediums. Being that I work for the amazing Mozilla Corporation, seeing Firefox and the gecko web engine thrive in those spaces is important to me. Firefox was recently featured in the Firefox OS phone, Firefox OS TV, and a host of IoT devices. I was pleased to see our platform team recently created a new mode for launching…

Read More

designMode – Website Design Article

Every once in a while I stumble upon an API or browser setting that I can’t believe ever existed. Such examples can be seen in the numerous String.prototype properties such as bold, italics, and even blink, which wrap given string text in their representative HTML tags. Bizarre. It was recently brought to my attention the document.designMode API: an on|off switch that acts almost like a contentEdible attribute for the entire document. You can toggle designMode by simply changing the setting:…

Read More

Part II – A List Apart – Website Design Article

You and the rest of the dev team lobbied enthusiastically for a total re-architecture of the company’s aging website. Your pleas were heard by management—even up to the C-suite—who gave the green light. Elated, you and the team started working with the design, copy, and IA teams. Before long, you were banging out new code. Article Continues Below It started out innocently enough with an npm install here and an npm install there. Before you knew it, though, you were…

Read More

Server to Client – A List Apart – Website Design Article

Before anything can happen in a browser, it must first know where to go. There are multiple ways to get somewhere: entering a URL in the address bar, clicking (or tapping) on a link on a page or in another app, or clicking on a favorite. No matter the case, these all result in what’s called a navigation. A navigation is the very first step in any web interaction, as it kicks off a chain reaction of events that culminates…

Read More

From URL to Interactive – A List Apart – Website Design Article

Imagine, if you will, that you’re behind the wheel of a gorgeous 1957 Chevy Bel Air convertible, making your way across the desert on a wide open highway. The sun is setting, so you’ve got the top down, naturally. The breeze caresses your cheek like a warm hand as your nose catches a faint whiff of … What was that? Article Continues Below The car lurches and chokes before losing all power. You coast, ever more slowly, to a stop.…

Read More

Tags to DOM – A List Apart – Website Design Article

In our previous segment, “Server to Client,” we saw how a URL is requested from a server and learned all about the many conditions and caches that help optimize delivery of the associated resource. Once the browser engine finally gets the resource, it needs to start turning it into a rendered web page. In this segment, we focus primarily on HTML resources, and how the tags of HTML are transformed into the building blocks for what will eventually be presented…

Read More

Braces to Pixels – A List Apart – Website Design Article

Doesn’t CSS seem like magic? Well, in this third installment of “URL to Interactive” we’ll look at the journey that your browser goes through to take your CSS from braces to pixels. As a bonus, we’ll also quickly touch on how end-user interaction affects this process. We have a lot of ground to cover, so grab a cup of <insert your favorite drink’s name here>, and let’s get going. Article Continues Below Similar to what we learned about HTML in…

Read More

var to JIT – A List Apart – Website Design Article

In our previous article we described how the browser uses CSS to render beautiful pixels to the user’s screen. Although modern CSS can (and should!) be used to create highly interactive user experiences, for the last mile of interactivity, we need to dynamically update the HTML document. For that, we’re going to need JavaScript. Article Continues Below For a modern web application, the JavaScript that the browser first sees will typically not be the JavaScript written by a developer. Instead,…

Read More

Semantics to Screen Readers – A List Apart – Website Design Article

As a child of the ’90s, one of my favorite movie quotes is from Harriet the Spy: “there are as many ways to live as there are people in this world, and each one deserves a closer look.” Likewise, there as many ways to browse the web as there are people online. We each bring unique context to our web experience based on our values, technologies, environments, minds, and bodies. Article Continues Below Assistive technologies (ATs), which are hardware and…

Read More

Semantics to Screen Readers · An A List Apart Article – Website Design Article

As a child of the ’90s, one of my favorite movie quotes is from Harriet the Spy: “there are as many ways to live as there are people in this world, and each one deserves a closer look.” Likewise, there as many ways to browse the web as there are people online. We each bring unique context to our web experience based on our values, technologies, environments,  minds, and bodies. Article Continues Below Become a patron Assistive technologies (ATs), which…

Read More

Responsive Images · An A List Apart Article – Website Design Article

I come here not to bury img, but to praise it. Article Continues Below 14 comments Become a patron Well, mostly. Historically, I like img just fine. It’s refreshingly uncomplicated, on the surface: it fires off a request for the file in its src attribute, renders the contents of that file, and provides assistive technologies with an alternative narration. It does so quickly, efficiently, and seamlessly. For most of the web’s life, that’s all img has ever had to do—and…

Read More

Server to Client · An A List Apart Article – Website Design Article

Before anything can happen in a browser, it must first know where to go. There are multiple ways to get somewhere: entering a URL in the address bar, clicking (or tapping) on a link on a page or in another app, or clicking on a favorite. No matter the case, these all result in what’s called a navigation. A navigation is the very first step in any web interaction, as it kicks off a chain reaction of events that culminates…

Read More

From URL to Interactive · An A List Apart Article – Website Design Article

Imagine, if you will, that you’re behind the wheel of a gorgeous 1957 Chevy Bel Air convertible, making your way across the desert on a wide open highway. The sun is setting, so you’ve got the top down, naturally. The breeze caresses your cheek like a warm hand as your nose catches a faint whiff of … What was that? Article Continues Below no comments Become a patron The car lurches and chokes before losing all power. You coast, ever…

Read More

Tags to DOM · An A List Apart Article – Website Design Article

In our previous segment, “Server to Client,” we saw how a URL is requested from a server and learned all about the many conditions and caches that help optimize delivery of the associated resource. Once the browser engine finally gets the resource, it needs to start turning it into a rendered web page. In this segment, we focus primarily on HTML resources, and how the tags of HTML are transformed into the building blocks for what will eventually be presented…

Read More

Braces to Pixels · An A List Apart Article – Website Design Article

Doesn’t CSS seem like magic? Well, in this third installment of “URL to Interactive” we’ll look at the journey that your browser goes through to take your CSS from braces to pixels. As a bonus, we’ll also quickly touch on how end-user interaction affects this process. We have a lot of ground to cover, so grab a cup of <insert your favorite drink’s name here>, and let’s get going. Parsing Article Continues Below 4 comments Become a patron Similar to…

Read More

var to JIT · An A List Apart Article – Website Design Article

In our previous article we described how the browser uses CSS to render beautiful pixels to the user’s screen. Although modern CSS can (and should!) be used to create highly interactive user experiences, for the last mile of interactivity, we need to dynamically update the HTML document. For that, we’re going to need JavaScript. Bundle to bytecode Article Continues Below 1 comment Become a patron For a modern web application, the JavaScript that the browser first sees will typically not…

Read More