Images are critical. Whether it is marketing banners, product images or logos, it is impossible to imagine a website without images. Sadly though, images are often heavy files making them the single biggest contributor to the page bloat. According the HTTP Archive’s State of Images report, the median page size on desktops is 1511 KB and images account for nearly 45% (650 KB) of that total.

That said, it’s not like we can simply do away with images. They’re too important to the overall user experience. Instead, we need to make our web pages load really fast with them. In this guide, we will cover all of the ins and outs of

All browsers ship with a set of default styles that are applied to every web page in what is called the “user agent stylesheet”. Most of these stylesheets are open source so you can have a look through them:

A lot of styles are consistent across all user agent stylesheets. For example, I used to think that the <head> element was not visible due to some special feature, but it is actually hidden like any other element on a page, with display: none! You can see this same style in WebKit,

Firefox 64 is available today! Our new browser has a wealth of exciting developer additions both in terms of interface features and web platform features, and we can’t wait to tell you about them. You can find out all the news in the sections below — please check them out, have a play around, and let us know your feedback in the comment section below.

New Firefox interface features

We’re excited to introduce multiple tab selection, which makes it easier to manage windows with many open tabs. Simply hold Control (Windows, Linux) or Command (macOS) and click on tabs to select them.

Once selected, click and drag to move the tabs as a group — either within a given window, or out into a new window.

Microsoft's Edge web browser has seen little success since its debut on Windows 10 in 2015. Built from the ground up with a new rendering engine known as EdgeHTML, Microsoft Edge was designed to be fast, lightweight, and secure, but it launched with a plethora of issues that resulted in users rejecting it early on. Edge has since struggled to gain traction, thanks to its continued instability and lack of mindshare, from users and web developers.

Because of this, I'm told that Microsoft is throwing in the towel with EdgeHTML and is instead building a new web browser powered by Chromium, which uses a similar rendering engine first popularized by Google's Chrome browser known as

Sources claim that Microsoft is abandoning EdgeHTML and building a Blink/Chromium based browser. This might be a good business decision for Microsoft but it is a disastrous advancement for the Web. In this short post, I will make a case for why we’re losing the Web and how in a Blink, all we love about our Web will be owned and controlled by a single entity.

Browser engines are an endangered species

We used to have much more diversity in terms of browser engines years ago than we do today. This is easy to understand as the Web in 2018 is far more complex than it was in the early noughties. It is very costly to develop and maintain a Web engine and few companies have the necessary talent and cash to do it. Microsoft is one of those companies but the fact that it might be

We know that everyone's needs are different. That's why we're offering two package types and single weight options within each package. The Essential package contains the categories most commonly used for interface design. The Ultimate package contains... well, everything.

People have a misconception about WebAssembly. They think that the WebAssembly that landed in browsers back in 2017—which we called the minimum viable product (or MVP) of WebAssembly—is the final version of WebAssembly.

I can understand where that misconception comes from. The WebAssembly community group is really committed to backwards compatibility. This means that the WebAssembly that you create today will continue working on browsers into the future.

But that doesn’t mean that WebAssembly is feature complete. In fact, that’s far from the case. There are many features that are coming to WebAssembly which will fundamentally alter what you can do with WebAssembly.

With all the new properties related to CSS Grid Layout, one of the distinctions that always confused me was the difference between the grid-template-* and grid-auto-* properties. Specifically the difference between grid-template-rows/columns and grid-auto-rows/columns. Although I knew they were to do with the explicit and implicit grid systems, at face value they seemed to be doing almost the same thing. In actual fact, they have little in common and are used to achieve different things.

What are explicit and implicit grids?

To understand the difference between the grid-template-* and grid-auto-*

While effective bundling of resources on the web has received a great deal of mindshare in recent times, how we ship front-end resources to our users has remained pretty much the same. The average weight of JavaScript and style resources that a website ships with is rising — even though build tooling to optimize the website has never been better. With the marketshare of evergreen browsers rising fast and browsers launching support for new features in lockstep, is it time we rethink asset delivery for the modern web?

Someone could talk for days on end trying to answer that with some form of completeness. How deep will they go? Strictly for fun, I'm going to put my answer here. When I was asked this in an actual interview, I rambled on for a good 10 minutes before they stopped me. And then I kept remembering things I forgot to include even after the interview finished.

I'm going to keep this formatted as a wall of text because that's how it felt to answer this question in conversation.

When it was first introduced, responsive design was one of the most exciting web layout concepts since CSS replaced tables. The underlying technology uses media queries to determine the viewing device type, width, height, orientation, resolution, aspect ratio, and color depth to serve different stylesheets.

If you thought responsive design was reserved for CSS layouts only, you’ll be pleased to hear media queries can also be used in JavaScript, as this article will explain.

Media Queries in CSS

Watch Retrofit an Existing Site into Using Modern, Responsive Web Design Practices

JavaScript modules are now supported in all major browsers! This article explains how to use JS modules, how to deploy them responsibly, and how the Chrome team is working to make modules even better in the future.

What are JS modules?

JS modules (also known as “ES modules” or “ECMAScript modules”) are a major new feature, or rather a collection of new features. You may have used a userland JavaScript module system in the past. Maybe you used CommonJS like in Node.js, or maybe AMD, or maybe something else. All of these module systems have one thing in common: they allow you to import and export stuff.

Over the past few months, we’ve been working really hard on the next generation of Vue CLI, the standard build toolchain for Vue applications. Today we are thrilled to announce the release of Vue CLI 3.0 and all the exciting features that come with it.

Vue CLI 3 is a completely different beast from its previous version. The goal of the rewrite is two-fold:

At the core, Vue CLI provides a pre-configured build setup built on top of webpack 4. We aim to minimize the amount of configuration developers have to go through, so any Vue CLI 3 project comes with out-of-the-box support for:

Let's Encrypt announced yesterday that they are now directly trusted by all major root certificate programs including those from Microsoft, Google, Apple, Mozilla, Oracle, and Blackberry. With this announcement, Let's Encrypt is now directly trusted by all major browsers and operating systems.

While Let's Encrypt has already been trusted by almost all browsers, it was done so through intermediate certificate that were cross-signed by IdenTrust. As IdenTrust was directly trusted by all major browser vendors and operating systems, it also allowed Let's Encrypt to be trusted as well.

With Let's Encrypt now being directly trusted, if there is ever a problem with IdenTrust and they themselves become untrusted, Let's Encrypt users will still be able to function properly. Before anyone says this could never happen, just remember what happened with the Symantec certs being

You can think of a flex element as a parent container with display:flex. Elements placed inside this container are called items. Each container has a flex-start and flex-end point as shown in the diagram above.

While the list of items is provided in a linear way, Flex requires you to bemindful of rows and columns. For this reason, it has two coordinate axis. Thehorizontal axis is referred to as Main-Axis and the vertical is the Cross-Axis.

To control the behavior of the content’s width and gaps between it, and to enable it to stretch horizontally across the Main-Axis, you will use justify properties. To control the vertical behavior of items you will use align properties.

A little-known fact is that Uber builds a lot of web-based applications, hundreds of them and counting, in fact. Many of them are internal apps for managing various aspects of the business while others are public facing.

A more well-known fact is that web technologies change quickly and best practices are constantly evolving. Providing a high quality framework with modern features to hundreds of web engineers while keeping up with the dynamic nature of the web platform has historically been a challenge.

To address this challenge, Uber’s Web Platform team built Fusion.js, an open source web framework that makes web development easier and produces lightweight, high-performing apps.

Viewport units have always been controversial and some of that is because of how mobile browsers have made things more complicated by having their own opinions about how to implement them.

Case in point: should the scrollbar be taken into account for the vw unit? What about a site's navigation or page controls — should those count in the calculation? Then there are physical attributes of the devices themselves (hello, notch!) that can't be overlooked.

First, a little context

The spec is pretty vague about how viewport units should be calculated. With mobile devices, we're often concerned with the vertical height, so let's look specifically at viewport height (

Modern browsers today will sometimes suspend pages or discard them entirely when system resources are constrained. In the future, browsers want to do this proactively, so they consume less power and memory. The Page Lifecycle API, shipping in Chrome 68, provides lifecycle hooks so your pages can safely handle these browser interventions without affecting the user experience. Take a look at the API to see whether you should be implementing these features in your application.

Background

Application lifecycle is a key way that modern operating systems manage resources. On Android, iOS, and recent Windows versions, apps can be started and stopped at any time by the OS. This allows these platforms to streamline and reallocate resources where they best benefit the user.

As mentioned when discussing clicks, only hyperlinks and buttons should respond to clicks, since this maintains an honest and transparent interaction with a visitor. To maintain a truth to materials, it follows that the appearance of these elements should also be honest and clear.

A hyperlink has no analog in the real world. Since the dawn of the web, convention dictates a hyperlink use an underline to reveal its existence (which is a wonderful solution, since underlining has no place in modern typesetting). Because of this convention, there is no clearer indicator of more content than a bit of underlined text.

The following is a guest post by Jack Doyle, author of the GreenSock Animation Platform (GSAP). Jack does a lot of work with animations in the browser and has discovered that the generic opinion that "CSS is faster" just isn't true. It's more than that, as well. I'll let him explain.

Once upon a time, most developers used jQuery to animate things in the browser. Fade this, expand that; simple stuff. As interactive projects got more aggressive and mobile devices burst onto the scene, performance became increasingly important. Flash faded away and talented animators pressed HTML5 to do things it had never done before. They needed better tools for complex sequencing and top-notch performance. jQuery simply wasn't designed for that. Browsers matured and started offering solutions.

Images are one of the most fundamental types of content that is served on the web. They say an image is worth a thousand words, but it can also be worth quite a few megabytes too if you’re not careful.

So although web images need to be clear and crisp, they must also be delivered at manageable sizes so that load times are kept small and data use is kept at acceptable levels.

On my website, I noticed that the page weight of my homepage was over 1.1 MB and images added up to 88% of that weight. I also realised that I was serving images that were larger than they needed to be (in terms of resolution). Clearly, there was a lot of room for improvement.

Once upon a time, I might have had to begrudgingly tell a designer this type of layout wouldn’t work well on a responsive web page which needs to function across a range of screen sizes, but not anymore!

With CSS grid now available in all popular browsers it’s possible to reliably define the rows and columns that make up any kind of grid, I’m pretty excited about this and you should be too. In this article I’m going to detail how I achieved the designed layout using CSS grid without any silly workarounds or javascript magic necessary.

I am excited to say, that it is finally possible to run face recognition in the browser! With this article I am introducing face-api.js, a javascript module, built on top of tensorflow.js core, which implements three types of CNNs (Convolutional Neural Networks) to solve face detection, face recognition and face landmark detection.

As always we will look into a simple code example, that will get you started immediately with the package in just a few lines of code. Let’s dive into it!

At first, I did not expect there being such a high demand for a face recognition package in the javascript community. For a lot of people face-recognition.js seems to be a decent free to use and open source alternative to paid services for face recognition, as provided by Microsoft or Amazon for example. But I also have been asked a lot, whether it is possible to run the full face recognition pipeline entirely in the browser.

PSPDFKit’s mission is to provide the best way to view, annotate, and fill out forms in PDF documents on any platform. In late 2016, we released the first version of our Web SDK, which relies on a server component to render documents. Only a few months later, we released an updated version of PSPDFKit for Web — one that doesn’t require a server component and instead uses WebAssembly (Wasm, WA) to render documents directly in the browser. This was a big achievement for us as a company, and being able to provide a browser-only solution that doesn’t require any backend infrastructure lowers the barrier to entry for our customers.

When using any new CSS, the question of browser support has to be addressed. This is even more of a consideration when new CSS is used for layout as with Flexbox and CSS Grid, rather than things we might consider an enhancement.

In fact, both Chrome and Firefox have tough security. Both include sandboxing, which isolates processes of the browser so a harmful website doesn’t infect other parts of your machine. So if you loaded a website with malicious code, it would be contained within the webpage so it couldn’t infect your files, webcam and microphone.

Google said there was one thing it could do better on: the inclusion of privacy settings to block tracking technology, similar to the tools that Firefox includes.

“I think that’s something that we can improve on,” Ms. Tabriz said. “Firefox has some settings that we’re also exploring.”