A quick dive in to how to use Lighthouse,HTTPArchive and Chrome UX report to try and understand how users in a country might experience the web.

A quick dive in to how to use Lighthouse to try and understand how users in a country might experience the web.

Ruth John moved to Chrome OS (temporarily):

The first thing, and possibly the thing with the least amount of up to date information out there, was enabling Crostini. This runs Linux in a container on the Chromebook, something you pretty much want straight away after spending 15 minutes on it.

I have the most recent Pixel, the 256GB version. Here’s what you do.

• Go to settings.
• Click on the hamburger menu (top left) - right at the bottom it says ‘About Chrome OS’
• Open this and there’s an option to put your machine into dev mode
• It’ll restart and you’ll be in dev mode - this is much like running Canary over Chrome and possibly turning on a couple of flags. It may crash, but what the hell you’ll have Linux capabilities ��
• Now you can go back into Settings and in regular settings there’s a ‘Linux apps’ option. Turn this on. It’ll install Linux. Once this is complete you’ll have a terminal open for you. Perfect

Read full post.

Ruth has a great write-up of moving to Chrome OS because her main machine broke.

I moved to Chrome OS full-time 4 months ago (before Google I/O) and only moved to the Mac because I broke my PixelBook (now fixed).

For me it’s one of the best web development machines out there today. It’s the only device that I can test ‘true mobile’ on - you can install Chrome on Mobile on it, Firefox Mobile, Samsung Browser, Brave etc via the ARC platform. Crostini is also a game changer for Chrome OS as it brings a lot of the Linux App ecosystem to Chrome OS and it really starts to fill a huge app-gap for me on Chrome OS; I’ve got Firefox, vim, git, VS Code, Node, npm, all my build tools, GIMP and Inkscape… That’s not to say it has been perfect, Crostini could be faster, it’s not GPU accelerated yet and it could be more integrated with Filemanager etc, and finally the PixelBook really needs more physical ports - I can attach two 4k screens to it, but I can’t charge at the same time.

I think Ruth’s wrap up is also quite accurate, the PixelBook is an expensive machine, but I am very very excited to see this coming to more and more devices (especially those at vastly lower price points.)

Would I pay full price for it? I’m not sure I would pay full price for anything on the market right now. Point me in the direction of a system that will run my graphics software and makes a good dev machine (with minimal setup) and lasts more than 18 months, point me in the direction of a worthy investment and I will pay the money.

Yup.

PWA. Progressive Web Apps. Frances Berriman and Alex Russell coined the term “progressive web apps” in 2015 with what I think is a seminal post “Progressive Web Apps: Escaping Tabs Without Losing Our Soul”. 3 years later, we’ve come a long way. From a loose collection of technologies - Service Worker, Manifest, Add to Homescreen, Web Push - that were originally only implemented in one browser engine, to a brand that has started to stick across the industry with businesses and developers, and all of the major browser vendors implementing the majority of the ‘PWA’ stack.

Mustafa writes:

Tooling is complicated, we are a tooling focused industry, and they change so much. I have used maybe rough eight different tools, from Photoshop to Sketch. That’s before we add prototyping tools to the mix. This may be something we just have to accept. After all, type standards only really started to settle in the 90s, and typography is a 500-year-old discipline.

Designers are still finding it difficult to prove the importance of the process. I think this is something that we have to take on board: to learn how to educate and not just expect everyone to trust us by default. That takes time — perhaps using scenario-based design or design workshops like a design sprint would help. Getting non-designers to observe users while using a prototype they created is one of the best experiences I have seen in this field.

Cross-browser support is lacking crucial features. Designers need to understand developer tooling, to better scope out what is possible. I think using paired programming or the design process described above can help.

Responsive design is still challenging. I think this is in part due to the tools we use; I would love Chrome Design Tools that would help turn the browser into a creative tool. This space is where I think the next evolutionary step for site and web app creation is at. Mozilla is doing some fantastic work in this space, with their layout and shapes tooling.

All in all the challenges that we face seem to be all the age-old ones. Process, tools, and respect.

Read full post.

I found this a very interesting post that is also a complement to a post I wrote about the challenges for web developers. It’s not surprising that browser compat is an issue, but what is still a concern is that building for IE11 is still something that is holding the industry back. Likewise, Mustafa points out that there is still an issue with the tooling around Responsive Design and the emphasis on a single responsive solution always leads to the following (that is in Mustafa’s post):

Designing once and using everywhere is still hard to reach ambition.

This is a problem that I think we all still wrestle with. On one hand we want everyone to build a responsive solution that can serve everyone on every device form-factor, on the other hand user context is important and often the user will only be willing to perform certain actions at certain times; we see this a lot in the retail and commerce industry: people will browse on mobile, and complete on desktop, and the question then becomes do you cater for this multi-modal model more or build a consistent experience across all devices… I suspect the answer is ‘it depends’, but either way it’s a hard problem for everyone from product teams to engineering teams.

Philip Walton has an awesome deep dive into a new API the Chrome team has been working on to give you (the developer) control over how to respond when the browser unloads your tabs.

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.

On the web, there has historically been no such lifecycle, and apps can be kept alive indefinitely. With large numbers of web pages running, critical system resources such as memory, CPU, battery, and network can be oversubscribed, leading to a bad end-user experience.

While the web platform has long had events that related to lifecycle states — like load, unload, and visibilitychange — these events only allow developers to respond to user-initiated lifecycle state changes. For the web to work reliably on low-powered devices (and be more resource conscious in general on all platforms) browsers need a way to proactively reclaim and re-allocate system resources.

In fact, browsers today already do take active measures to conserve resources for pages in background tabs, and many browsers (especially Chrome) would like to do a lot more of this — to lessen their overall resource footprint.

The problem is developers currently have no way to prepare for these types of system-initiated interventions or even know that they’re happening. This means browsers need to be conservative or risk breaking web pages.

The Page Lifecycle API attempts to solve this problem by:

• Introducing and standardizing the concept of lifecycle states on the web.
• Defining new, system-initiated states that allow browsers to limit the resources that can be consumed by hidden or inactive tabs.
• Creating new APIs and events that allow web developers to respond to transitions to and from these new system-initiated states.
• This solution provides the predictability web developers need to build applications resilient to system interventions, and it allows browsers to more aggressively optimize system resources, ultimately benefiting all web users.

The rest of this post will introduce the new Page Lifecycle features shipping in Chrome 68 and explore how they relate to all the existing web platform states and events. It will also give recommendations and best-practices for the types of work developers should (and should not) be doing in each state.

Read full post.

My first comment is that you should read Philips post. It’s incredible.

On mobile, Chrome can be pretty aggressive at backgrounding (freezing or discarding) the page to conserve resources when the user is not using it (for example, when you swap tabs or move from the Chrome app on Android), when the browser backgrounds your page as a developer you traditionally have no knowledge of when this happens so you can’t easily persist state or even close down open resources and just as importantly when you’re app is back re-hydrate the state cleanly. When developers have control they can make more informed choices, which also means that the browser can be more aggressive in conserving resources in the future without severely impacting user or developer experience.

Finally, the below diagram explains it all pretty darn well.

Pete LePage writes about important changes to Add to Homescreen in Chrome

Add to Home Screen changes

If your site meets the add to home screen criteria, Chrome will no longer show the add to home screen banner. Instead, you’re in control over when and how to prompt the user.

To prompt the user, listen for the beforeinstallprompt event, then, save the event and add a button or other UI element to your app to indicate it can be installed.

Read full post.

I had mixed feelings about this originally because so many people don’t handle the beforeinstallprompt event it meant that all of a sudden the number of installs of Web APK’s would drop quite significantly, but I think it’s actually the right thing to do.

The goal is to reduce the number of annoying prompts happening on the web, and the last thing that we need in the industry is for a relatively large prompt to appear when we think the user might want to install a PWA, instead you now need to think about where and when you want to prompt for an install and you have to do it in response to a user-gesture.

The neat thing is that we (Chrome) are introducing more ambient ways of letting the user know that an experience is able to be installed, right now it’s the small bottom bar that appears on the first load, and hopefully in the future we can explore more subtle ways of letting the user know they can take action.

A great overview of Pinterest’s PWA

The verdict

Now for the part you’ve all been waiting for: the numbers. Weekly active users on mobile web have increased 103 percent year-over-year overall, with a 156 percent increase in Brazil and 312 percent increase in India. On the engagement side, session length increased by 296 percent, the number of Pins seen increased by 401 percent and people were 295 percent more likely to save a Pin to a board. Those are amazing in and of themselves, but the growth front is where things really shined. Logins increased by 370 percent and new signups increased by 843 percent year-over-year. Since we shipped the new experience, mobile web has become the top platform for new signups. And for fun, in less than 6 months since fully shipping, we already have 800 thousand weekly users using our PWA like a native app (from their homescreen).

Looking back over one full year since we started rebuilding our mobile web, we’re so proud of the experience we’ve created for our users. Not only is it significantly faster, it’s also our first platform to support right-to-left languages and “night mode.” Investing in a full-featured PWA has exceeded our expectations. And we’re just getting started.

Read full post.

This is a really great post show the benefits of building high-quality, fast and engaging sites. It’s great to also see that the ‘App’ part of PWA, specifically ‘Add to Homescreen’ installability is being used by lots of users. Reading the broader post it’s good to see that they were focusing on a great website experience, that is focus on fast loading sites that have repeatable and predictable performance via code-splitting to reduce the initial load and also good architecture that they can share across the team. Then once you have the base experience you can layer on features like push notifications for the users that want them.

By default Hugo doesn’t serve .mjs files with the correct content type. In fact it wasn’t until recently that hugo could serve more than one file extension per mime-type. It looks like with v0.43 this has been fixed.

[mediaTypes] [mediaTypes.“text/javascript”] suffixes = [“js”, “mjs”]

Read full post.

The above code lets me serve mjs files for ES Modules with the correct mime-type (note modules need to be served with ‘text/javascript’). This is only needed for local testing, hosting is another issue :)

I’ve got thoughts on the post I did yesterday about ES Modules

I needed a quick way import a simple module get-urls into my project. The module is well tested and it does what I needed … ignore the fact that it’s pretty easy to implement in a couple of lines of JavaScript. The problem I had is that my project is built in ES6, uses modules and I didn’t want to have to bundle up using CommonJS (require).

I couldn’t find a lot of guidance on what to do here, so I went to experiement and this solution is the solution I came across:

1. Create a file that imports the npm module I needed. module.exports = require(‘get-urls’); This module will be what’s converted to ES6 style.
2. Create a rollup config that
   1. Imports the node globals, and builtins.
   2. Resolves all npm modules required for my usage of this module.
   3. Pass the results through the commonjs plugin so that it’s now in JavaScript module format.
   4. Compress the output, because it’s huge :
3. Include the bundled file in your project and rejoice.

Read full post.

One of the things that I wanted to try and articulate in the original article but I decided to pull out is that there is a huge amount of code in the Node ecosystem that is not really that specific to Node per se but has been tightly coupled with Node via Common JS and other very specific Node API’s (Buffer, old URL etc etc) that it’s going to take a lot of effort to pull ourselves up and thus the change be required to make ES Modules ubiquitous will be potentially quite painful, and until the ecosystem changes we are going to need to use a lot of conversion tools and bundlers to be able to cleanly share code across multiple platforms (web/server).

We are where we are, there wasn’t an importing story on the web, we didn’t have a heap of the primitives that Node introduced and are now what many would now consider de-facto platform requirements, so I hope that this is more of an acknowledgement of the situation than a criticism.

There is also a move to use ‘.mjs’ as a file extension that is standard across both node and the web. I feel totally comfortable with this, however .msj is not a file that any infrastructure yet recognises as ‘text/javascript’ and I’m looking forward to this just being sorted so that it’s automatically inferred by every web server on the planet, so I don’t have to deploy yet more configuration changes to my serving infrastructure.

Lots of fun times ahead, I for one am looking forward to being able to bring a lot more functionality to the web.

I’ve been working on a way to make it easier to push content into my static site and it’s been a fun little exercise that I will share more in another post. In this post I want to share the rollup config that I used to import nearly any npm module in to a frontend project using JavaScript modules. I needed a quick way import a simple module get-urls into my project.

Tracy Lee from This Dot organised a rather neat live-stream that brought in many of the browser vendors to give an overview of what they are working on:

Browser representatives from Brave, Beaker, Edge, Chrome, & Mozilla get together to talk about recent updates and the state of browsers.

Featured Speakers:

• Brendan Eich -  Creator of Javascript, Co-founder & CEO at Brave Software
• Paul Frazee - Works on Beaker Browser
• Matthew Claypotch - Developer Advocate at Mozilla
• Paul Kinlan - Senior Developer Advocate at Google
• Patrick Kettner - Edge at Microsoft
• Amal Hussein - Senior Open Web Engineer at Bocoup
• Tracy Lee - GDE, RxJs Core Team, This Dot Co-founder

Read full post.

I thoroughly enjoyed the live stream and it was great to hear what everyone is up to. I also love the vision that Beaker Browser has for a distributed web, they’ve done a lot of work since the last time that we met.

I encourage you to watch the linked video, Edge has had a huge amount of updates including full Service Worker support, variable fonts and also they are introducing WebP. Mozilla have a huge focus on Web Assembly and developer tooling, Beaker is doing amazing things with dat: and distributed computing and Brave has been moving along alot on BAT.

I focused on the work that our team is doing at the moment, and it’s broadly around Discovery, Speed and Reliability, UI Responsiveness, UX - Get stuff done, Security and Privacy. A little more concretely:

• Discovery - we really need to make it easier for developers to build sites with JS that render in headless services such as indexers and embedders. That means we need to focus on educating developers in how indexers work and how to test against them, and also how to build good solid SSR experiences.
• Speed and Reliability - All sites should have a TTI < 5s on 3g network on the Median device (a MotoG ⁴⁄₅) and you should optimize your FID (first input delay). FID is a new metric, so it’s important to understand that it’s meant to represent how your users experience your site in the wild, where TTI has been hard to measure, FID should be easier. There is a polyfill here that you can use to test FID
• UI Responsiveness - We would like the web to be 60fps everywhere and make it easier for developers to achieve, so we are working on making ‘FLIP’ easier to understand, building out Houdini so we can give developers a lot more control over the rendering enging and finally trying to move as much work as possible ‘off-main-thread’ via things like img.decode and tools like comlink to making workers easier to use.
• UX - Get stuff done - We really want to change the way that we talk about new features coming to the platform, specifically we would like to make show where technology should be effectively used to improve users experiences to help them get their work done quickly with as little interruption as possible.
• Security and Privacy - I think Apple’s Intelligent Tracking prevention is going to have a long term impact on the web and developers need to start to think more about building privacy supporting web experiences. If anything GDPR is making the web an ‘interesting’ experience in the EU.

Finally, it was humbling and heart-warming to hear that everyone wants to bring back Web Intents :)

Sam Thorogood from our team writes:

You’ve designed a webapp, built its code and service worker, and finally added the Web App Manifest to describe how it should behave when ‘installed’ on a user’s device. This includes things like high-resolution icons to use for e.g. a mobile phone’s launcher or app switcher, or how your webapp should start when opened from the user’s home screen.

And while many browsers will respect the Web App Manifest, not every browser will load or respect every value you specify. Enter PWACompat, a library that takes your Web App Manifest and automatically inserts relevant meta or link tags for icons of different sizes, the favicon, startup mode, colors etc.

Read full post.

I was amazed by this library, and I’m glad to see it getting a bit more attention. It was the first time I actually saw the Splash Screen on iOS work in the last 5 years and he generates them in a really neat way - he generates the image on the fly based on the exact screen size of the device and base64 encodes the image… it also fills in a lot of the rest of the gaps in the Safari Add To Homescreen story.

If you’re building a PWA I would include it.

Font Playground is built for three groups of audiences.

The first group of audience is typographers and designers, who would like to play with fonts that are built with the latest font technologies, such as variable font. It is a playground to fully explore what these new font technologies can offer and how they can be beneficial to your creative workflow.

The second group of audience is me, as a Type Tool’s UI/UX designer. This is a playground for me to test UI experiments for variable fonts and other new upcoming font technologies. One of the key points to the success of new font technology is adoption by design tools, and furthermore, designers. How can design tool present variable fonts in a way that is useful but not too complicated to handle? I hope to find the answers with this playground.

The third group of audience is the type designers and foundries. This is a place to showcase the work-in-progress, cutting-edge font creations. It is a playground to see how fonts are being presented and used in future design tools. How fonts are used can also inform how fonts are made, and what standard should be defined.

Read full post.

This is a great introduction to variable fonts and it’s a great playground to quickly see everything that you can vary in action. Adding multiple text lines looks like it will be landing soon.

Note: I believe this doesn’t work yet in Firefox because they don’t fully support Variable Fonts.

Patrick writes about Did.txt

Time flies by when you’re learning how to code. Its super important to take a second every once in a while to simple write down what you did during the past mental sprint. Writing down what you learned solidifies the knowledge.

Read full post.

This is not a million miles away from what we do internally, where we have a concept of ‘snippets’. It’s up to you how you manage it, but it’s a great way of keeping track of what you did, but also shared across your team you get a nice picture of what your peers, managers and reports are also doing.

The model I like is to split each weekly summary into a ‘what I did’ and ‘what intend to do this week’. It helps me reflect and plan at the same time.

Atishay Jain on CSS Tricks writes about an area close to my heart, linking:

Hyperlinks are the oldest and the most popular feature of the web. The word hypertext (which is the ht in http/s) means text having hyperlinks. The ability to link to other people’s hypertext made the web, a web — a set of connected pages. This fundamental feature has made the web a very powerful platform and it is obvious that the world of apps needs this feature. All modern platforms support a way for apps to register a URI (custom protocol) and also have universal links (handling web links in an app).

Let’s see why we’d want to take advantage of this feature and how to do it.

Read full post.

This was a great article that covers all the different types of hyperlinking available to apps and sites. I’ve been doing a lot of research into this space ever since Web Intents and the state of advanced linking on the web leaves a lot to be desired, imo.

One of the reasons why I love the web, is that behind a link is direct access to the resource, I don’t know any other platform that can combine the link and the actual resource in the same way, but it could be soooo much more. The standard link provides essentially a VIEW intent that contains state (the url) and context (text between the anchors), and you can hack about with it custom protocols but we need to go a lot further.

• We need to expand the vocabulary to registerProtocolHandler to all more access to more native schemes
• Anything registered with the protocol handler needs to be system wide.
• We need to be able to have web-sites to be able to handle opening a range of content types and have pages available to be registered as a system file handler.
• We need to have higher order actions available to developers, VIEW is great, we need an agreed upon set of core actions such as PICK, SAVE, EDIT so that we can more effectively understand a site’s or app’s capabilities, and the ability to extend them with higher-order semantics. Android has this, Siri is getting it, both using ‘Intents’, the Web should have it too.

This is one of the reasons why I’m so excited about messaging abstractions such as Comlink that remove the burden of the postMessage madness and let you think about exposing function to other apps, and then once you expose function you need to more easily enable the discovery of that function… and that’s what links enable.

Dan from Redfin has a great post about prioritising web speed:

JavaScript Is the Web’s CO2

As a web developer, I find that most problems can be solved with just a little more JavaScript. Without someone or something to force the industry to cut back, web developers will continue to make web sites that only load “fast enough” via wifi on a fast laptop.

The browser vendors can’t save us. Every time they make the web faster, web developers “take advantage” of the change by using more JavaScript.

Our industry needs Google to take a principled stand, to significantly prioritize fast-loading sites over slow-loading sites

Read full post.

It’s not just us (Google) that can do this. I look at our team (Web and Chrome DevRel) being able to provide the tools and the guidance to help you start fast and then stay fast, but after that the industry has to recognise that performance is a feature and not an after thought.

I wrote in challenges for web developers that there are still many reasons that developers don’t prioritize performance (tools, guidance and clear business incentives), I don’t think Google asserting as written in Dan’s article post is the answer for the long term health of the web, it needs to come from businesses seeing performance convert better.

This project is a musical experience built with WebGL and WebVR.

Inspired by the music track, we created an ever-changing environment composed of various geometrical shapes. These were generated procedurally in Houdini and exported to Three.js.

All visual elements are randomized differently on each viewing.

Read full post.

I don’t have much to add, it’s absolutely amazing. Check it out.

Dean Hume’s been doing a lot great work with PWA’s recently, and he’s also been exploring a lot of the new platform API’s, in this case the Generic Sensor API:

The Ambient Light Sensor API provides developers with the means to determine ambient light levels as detected by the device’s main light detector. This information is available to developers in terms of lux units. If you are building a Progressive Web App and you want to style it differently depending on the light levels in the room, then this could be the feature for you. There are a number of use cases for this feature, such as a web application that provides input for a smart home system to control lighting, a “Kindle” style reading app, or even a web app that calculates settings for a camera with manual controls (aperture, shutter speed, ISO, etc.).

Read full post.

I spoke about the Generic Sensor API at Chrome Dev Summit 2016, so it’s certainly taken a while for it to land in Chrome (I think it is still behind a flag) and it looks like it has landed in Edge first. The Ambient light sensor is one of many API’s that is built on top of Generic Sensors — there are more such as gyro and magnetometers — and it allows you to get information about the ambient light levels around the user opening up use-cases such as automatic adjustment of brightness or even offering the user to switch to a dark-mode theme. It’s certainly going to be interesting to see what the base Generic Sensor API will bring to web experiences.

Jonathan Fulton, Videoblocks:

The basic architecture concepts I wish I knew when I was getting started as a web developer

Read full post.

This is an amazing article that gives a really great overview of a relatively standard stack that is designed to scale many web apps. It also shows why a lot of developers also like Platform as a Service tools like Heroku, Firebase or AppEngine that can abstract a lot of the complexity at the expense of cost.