Interviews

12 devs of Xmas, 2016: "Presents from your favourite browsers"

The blog 12 devs of Xmas reached out to me and other browser vendor representatives to get answers to the same questions. Our edited answers are published in their blog, and here are my unedited answers in their entirety:

To kick things off I wanted to ask what has been your the feature released this year that you feel is already making an impact on how we can build better experiences on the web?

Well, I'm torn between two things which are sort of complementary: Service Workers and Let's Encrypt.

Pardon the terrible comparison, but Service Workers are like eating the mushroom in Super Mario Bros. Suddenly you get all these new cool things you can do, while still being a jumping plumber. But if you do not eat the mushroom you can still be a plumber. Service Workers are like that, if your browser supports them, your website gets lots of additional features that make it better for users, but if the browser doesn't support them, users can still use the website.

Up until recently developers often ignored the 'network factor', and sort of assumed that everyone was browsing with a device which was connected to a fast, low latency network. The immense popularity of mobile devices confirms that people want to access websites on the go, but cellular data networks do not respond the same way as wired networks: there's more latency, transmissions are slower, and because users might be on the go, the network is totally unreliable. Yet people kept building websites that ignored those facts---be it because they didn't know better, or because the Web and the browsers weren't prepared to help them make things 'the right way'.

Service Workers help developers take the network factor into account, and build websites that can work faster and more reliably by caching content for later access, amongst other great features. Users can trust the Web again, and developers do not need to write three or four different native wrappers around WebViews that access the same API end point. Happy users, happy developers!

It was really exciting to see websites take advantage of Service Workers soon after we shipped the feature in Firefox. One day we barely saw any registered worker in our developer tools, and the next week there were lots! (if you're curious to see whether you've visited websites which use Service Workers, type about:debugging in Firefox's URL bar, and go to the 'Workers' tab).

And Let's Encrypt... granted, it was "launched" last year, but it was still in beta. This year has seen tremendous growth, and it is fantastic to see that. This service issues free SSL certificates, which makes delivering secure websites possible for everyone, and this is truly important because new features such as Service Workers only work when your code is delivered with https, for privacy reasons.

Developers had to spend money in a certificate in order to use https. And we want the Web to be secure, but we also do not want to limit access to the Web to just rich developers; that would be against the very principle of the Web! But Let's Encrypt changes this. People can now get certificates for free, and they will work for everyone, without rightfully scary warnings from browsers.

I'm really pleased to see adoption going through the roof. It's great!

At 12 Devs we always like to hear about the things that people are interested and excited about, with that in mind, what new feature has you excited about the web and why?

Well, it is not strictly a new feature, but a new browser engine: Servo! It is written in Rust, a new programming language, which has modern computing platforms in mind, and takes advantage of all the hardware in nowadays devices in the most efficient way: using multicores, using GPUs, paralellising as much as possible. This is great for speed, and also for energy consumption: using more cores but at slower speeds results in less consumption than one core at top speed. Energy is a huge factor for success in mobile platforms, and the future is mobile.

Unlike older browser engines, Servo is modular by design, which means that parts can be plugged in and out, and even reused elsewhere. This benefits the ecosystem way more than if you have a huge "Browser Monolithrepo" where all sources go to die: if you like one of these modules, you're free to use it. And Servo might even consume modules from the ecosystem as well, even if they have not been specifically written with a browser in mind. It's a more modern way to develop.

We don't want to wait until Servo is a feature complete browser, so we are taking parts of Servo and bringing them into Firefox already. We call this Quantum: https://wiki.mozilla.org/Quantum - if you downloaded Firefox sometime after August this year, you have already been running bits of Servo/Rust code in your machine, and there will be more of this in 2017.

I'm very proud that we've invested time and resources in building this solid foundation for the future. Even if the results have not been immediately visible, it makes existing websites more performant, enables new use cases, and helps us ensure the Web continues to be a successful platform, ready for all upcoming challenges.

Is there any more obscure feature you’ve stumbled upon by accident that others might not be aware of?

I'm always stumbling upon things and going all "WHOAAAA, I didn't know this existed"!!!

One of the latest is the currentColor keyword: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentColor_keyword - it is similar to a CSS variable in which you can use it wherever you would use a value. This is very helpful if you want to write modular CSS. I wrote a little post and demo about this feature: https://soledadpenades.com/2016/12/14/using-the-currentcolor-css-keyword/

I learnt about it from Glenn Maddern's talk at Cold Front last year in Copenhagen: https://youtu.be/XR6eM_5pAb0?t=23m13s

Not sure if this counts as 'by accident', though...

If there was one feature that you think developers should know about or be working with in 2017, what would it be?

I think it's time for people to shake off their fears, and embrace Flexbox to build layouts. Support is exceptionally good across browsers, and if you are building a new website you probably have no excuse to not use it.

If you are not building a new website, but working on a existing codebase, use every opportunity to see if you can replace old style potentially problematic code with Flexbox instead. You know, those definitions where sizes are essentially a collection of "magic numbers", like for example:

.terror { height: calc(100% - 195px - 0.7rem); }

You can often avoid writing this kind of rules by using flex and flex-grow. It will be simpler, easier to read and debug, and more maintainable on the long run.

I like this guide from CSS Tricks on Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ -- I use it all the time!

Finally, looking ahead to 2017 there’s already a lot of exciting looking features that are starting to make their way into stable browsers, like CSS Grid and even WebVR for instance. What’s the next feature you’re excited about seeing begin development and testing in 2017?

Grid is certainly one of the next big things. Firefox and Chrome just turned it on in the nightly browsers, and we even have support for debugging Grid on developer tools--we've worked hard to make sure developers can debug and inspect Grid from the start! And the feature should become available to stable browsers some time next year. Here's this article talking more about it: https://hacks.mozilla.org/2016/12/css-grid-and-grid-highlighter-now-in-firefox-developer-edition/

In the meantime, it's a great opportunity to learn and embrace good mark-up practices and Web design, in the sense that designs that take into account the diversity of browser support for various features are great designs.

You can use feature queries and @supports to enable conflicting parts of your CSS stylesheet depending on browser support, so you serve the same mark up code (HTML) and a stylesheet with various @support sections and different browsers will render it differently depending on what they can do. Here's an article explaining how to do this: https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/

And this is not a prediction, but a wish: I would really like to see Safari/iOS support Service Workers in 2017. This would be huge!