The 2016 Almanac

Each year in the web development industry is quite busy. And so has been 2016. This Almanac collects the most important articles and tricks of the year for you to review. 2016 brought WDRL 119 to 164, meaning I’ve written 47 editions in this year.

What happened in “News” in 2016? #

Along with the big topic HTTPS, this shaped the first quarter of 2016 quite a bit. HTTPS usage increased a lot in 2016, mainly due to the availability of Let’s Encrypt that offers free TLS-certificates for everyone. Browsers now restrict a lot of APIs to HTTPS-contexts only to push the adoption of HTTPS and to protect user data (i.e. Geolocation). But SSL doesn’t make everything better, it also introduces new problems: WoSign and StartCom certificates have been untrusted by major browsers after it’s been revealed that they created and validated backdated certificates.

But what else happened? jQuery version 3 was published, Angular 1.6 and 2.0, React.js v15, and a lot of other new JavaScript frameworks such as vue.js and libraries as well. Node.js v6 and v7 was released, Docker now works fine on Macs, and the git client Tower is now on Windows as well.

Now some fun fact: In 2016, Amazon Web Services’ Cloudfront service finally got support for gzip.

Getting back to browsers, Chrome supports preload as, has support for CSS hyphens again, and will no longer execute document.write on 2G network connections. Safari 10 is out, with CSP2 support, Internationalisation API, WOFF2 and Safari Technology Preview is available for developers. Firefox introduced -webkit- prefix to fix the web, and supports VP9, WebM, Brotli now.

For JavaScript, ESLint is now the standard way to lint your code, and JSCS has been merged into it. I’m glad that some consolidation happened and we now have a great tool that we can use without needing to compare all the tools for each project.

What happened in “Generic” in 2016? #

The Generic section contains articles that don’t really fit into any other category and therefore we will see very various topics.

In late 2015, Maciej Ceglowski held a talk about the “Website Obesity Crisis”—a talk that the community took serious. A talk about the always growing page size of websites, a talk about the bloat of websites. Mandy Brown took up this talk and elaborated on the importance of hyperlinks and the importance of redirecting and preserving URLs, since they are the key successors of websites.

To err is human, Stephen Hay realized and gave the advice that sometimes we should be more pragmatic and less idealistic. Sometimes, the reality is messy, and not all people can spend days optimizing the smallest details.

Aaron Gustafson shared a piece on why Progressive Enhancement is not an anti-JavaScript concept that pretty much finished all the previous discussion about whether Progressive Enhancement is bad.

For those who love to read technical books, Eric Elliot, author of some great JavaScript articles and books, has built an enormous collection of the best books for people who love code.

Another timeless topic gained attraction in 2016 again: HTTP status codes are a thing that we neglect so very often. And instead of serving the proper status codes as response to a request, we just use generic ones. And this while not only you but also your logging, the remote logging service or the user could benefit a lot from a 402 Payment Required status instead of getting a generic 403 forbidden response.

Then, at some point I stumbled over an article that showed me how fragile our whole Internet architecture has become. Up to 70% of the internet traffic go through a datacenter in Virginia. It’s AWS’ main datacenter and routes the majority of websites and applications. Of course this might have already changed again a bit and now might be distributed a bit more equal between Microsoft’s, Google’s and Amazon’s cloud but it’s impressive that we rely on one company, on one location so much.

And finally, Zach Leatherman wrote a comprehensive guide to font loading strategies.

What happened in “UI/UX” in 2016? #

2016 had a couple of interesting concepts and design principles to talk about. For example, it’s incredibly useful to start a project by doing an UX-kickoff meeting. But while this sounds very easy, there are things to consider for such meetings. Robert Hoekman Jr. wrote this up in a great summary for you, so you can use this guide for every kick-off meeting from now on.

Some articles took a focus on how to put data and analytics into perspective. And while one thing is to show data correctly and not interpolating it to avoid false visual numbers, the other important finding was that it’s important to acknowledge that data is incomplete. That data you get from Google Analytics is not reflecting or indicating what decision you should make.

Design guides, living styleguides have become a thing in the past. Now that we have a clue that it’s doable, we start to realize that it’s important to add documentation on animations in your design systems, or to build inclusive design patterns.

And while accessibility has its own section in the WDRL, it’s important that you start thinking about accessibility not only from a technical implementation side but right from the beginning of a project. Accessibility affects your content strategy, the design and the user experience of your project and therefore has to be considered by every person on the project.

What happened in “Tooling” in 2016? #

Tooling and Tools—one of the biggest discussions and changes to front-end development in the past years. And while we still struggle to find the proper tool-set and workflow automation tools, we had some pretty amazing tools coming out in 2016 and also great articles how to use the tools.

Addy Osmani for example, shared how you can use many features of npm offline, including offline installation of dependency packages. Speaking of npm, there’s now yarn, a pretty decent alternative client to npm’s default client that solves a lot of the issues that people experience with npm.

Una Kravets created a simple but effective visual diff-checker using CSS blend-modes, we can now compare image differences in an even better way using Butteraugli.

Now, let’s have a look at the important things as developers: our workflow tools. With rollup.js, there’s a great bundler that does tree-shaking to reduce the size of the bundle and this can result in a way smaller filesize than with a default bundler. Webpack 2 has a way to support code splitting into modules so that we can load the modules on a page only when they’re needed and not all everywhere. And after a decade, Firebug is now officially dead and users are advised to use native Developer Tools instead now.

2016 was also the year when Bash landed in Windows, when Jenkins CI server 2.0 was published, when GitLab released Gitlab Pages, a CI runner and therefore is now a strong self-hosted competitor to Github.

When you deal a lot with remote SSH connections, you might know the situation when the connection breaks and your CLI stops working in the same window. We learned how to properly close such interrupted connections by entering [enter], then ~, followed by a ..
For smaller client-projects, GitFTP-Deploy might be a handy tool to automate the deployment without having a CI/CD service in place.
And with a global host file you can block ads and trackers easily from sending data to companies.

What happened in “Security” in 2016? #

With several high-class security breaches and innumerable vulnerabilities found in web software, 2016 has been a year of both, struggle and big improvements to security in the web. With the broad availability of free HTTPS certificates through Let’s Encrypt, the number of websites using HTTPS doubled. With technologies like HSTS, HPKP and CSP2.0, and SRI developers got the tools to improve security effectively for our users. A common answer to how to add HTTPS to your website is “use Cloudflare”. It’s free and easy to set up; however, it’s also giving a false sense of security to users and might cause issues for users that visit with a proxy browser or Tor browser.

But we’ve also been shown how the shift towards more complex technology and logic in JavaScript can result in a security-risks. With Mario Heiderich showing off how to do XSS attacks in Angular, or showing why static HTML, DOMPurify, and Security in the DOM is all needed, we realized that we’re building upon a fragile system when using such frameworks to build entire front-end applications. Research has shown that browsers print out way too much information about a user’s system via JavaScript and that Service Workers make it relatively easy to install a backdoor into a foreign website, since SW are allowed to be installed via iframe.

If you use target="_blank" for links, did you know this can be a security issue? Fortunately it’s as easy to prevent this as adding rel="noopener" to these links. And for external resources, it’s recommended to use Sub Resource Integrity to ensure an external source hasn’t been modified or intercepted. This can be a great way to prevent third-party script vulnerabilities. By the way, this year a postMessage vulnerability has been detected in a social network widget that exposed a XSS-issue to million of sites.

If you run a Node.js application on a server, I’d highly recommend to monitor and fix security issues with Snyk.

In the end, we need to follow the best practices for security that are available as a comprehensive checklist and take care of user data, which doesn’t mean we only need to hash passwords with the latest methods such as Argon2 but protect other sensible data such as email addresses and personal data as well, if possible.

What happened in “Privacy” in 2016? #

Privacy is a term that is easily getting mixed up and misunderstood. In a society where we have most personal information and data online and connected to several companies, we tend to forget what can happen to our data. 2016 was marked by privacy discussions. As predicted in late 2015, with the availability of Content Blockers for iOS we saw a big rise of ad and privacy blockers in 2016. As logical follow-up, several companies and publishers have built ad-blocker blockers, which then were blocked by the blockers again. Another result is that the BatteryStatus API will be deprecated after various websites misused it for tracking people or even to change pricing when the phone battery is low. On the other hand, Disqus changed its business plan to now focus on gathering data. But then, we shouldn’t forget that Apple has fought to protect users’ privacy in court and succeeded and also gathered a lot of other companies that supported protecting privacy.

And while the big bad internet companies Google, Facebook, et al. extended their tracking of users massively, there is clear evidence that users are more and more aware of this and try to hide their information from these services. Facebook sees this in a decline of personal posts, and those companies have been enforced by user-demand to provide end-to-end encryption in their messengers. We acknowledged it but still know that they have more than enough meta-data to track users and do targeted advertising. Spying organizations and surveillance companies can use these data to easily get data without the need of intercepting a specific cable.

As web developers, we’ve been provided with official guidelines on how we can comply with a user’s request to “Do not track” and how to implement privacy features for your users.

What happened in “Web Performance” in 2016? #

With more and more real-time communication, data to transfer and varying network conditions, we all want to make sure we can deliver the best performance to our users. Unfortunately, this is easier said than done in real projects, especially if you take all the circumstances and technological decisions into account.

In 2016, we learned that serving content via HTTPS is in fact not slower than via HTTP, and since effectively HTTP/2 is only available in browsers if you serve via HTTPS, it’s now advised to provide HTTPS by default for your sites.

One of the biggest threads for your website’s performance are third-party scripts. If they are loaded in a blocking manner, they can take down your entire website. This means, we want to load external resources always in an asynchronous way to avoid them being the bottleneck and you want to design for load failure. Especially since content blockers have are used by many people, you should always remind yourself that any tracker or third-party might never load in the user’s browser.

And while we talk a lot about performance optimization by shifting resources to a CDN, and similar micro-optimizations, we definitely needed the reminder by Jake Archibald about Caching best practices. He shared how to properly cache your resources and how this, combined with Service Workers, can be one of the biggest performance benefit you can do on a website.

Speaking of Service Workers, we sorted out that they’re mainly not for offline availability of a website but to provide a reliable performance of a web application regardless of the network state.

Finally, in times where building a project on Amazon Web Services is super easy, we got reminded about how to not waste hundreds of Dollars for unnecessary hosting but to build a high-performance application by having a solid and scaling technical concept. Even for quickly built MVPs this is very important.

What happened in “HTML & SVG” in 2016? #

While HTML sound pretty boring in 2016 to most developers, I realized that there is quite a lot to learn still. And since we have SVG in this section covered as well, I promise you that you can learn a lot from the articles shared in that year.

First, before we use SVG-files on a web project, we should optimize it for web usage, similar to what we should do with JPEG/PNG files as well. Andreas Larsen wrote a 3-part series about how to create small SVG files and how to optimize assets.

If you display country flags, they’re most likely some gif or png files. Instead, you can include them as SVG now since there’s an open-source set of country-flags available. This does not only improve the page performance but is vector-based, so it provides high-resolution support and scaling.

With the Boxy Editor we now have an in-browser SVG graphics editor.

Switching back to HTML now, Jason Grigsby shares how you should mark up a form to support auto-filling the fields. Due to different browser implementations, it’s a bit more complicated than you might think but in the end, you can do very cool things like a “scan credit card”-feature on iOS, a generate password feature in Chrome and Safari and many more cool things that make filling out forms for the user a lot easier.

And while we talk about HTML, many developers tend to forget setting one of the most important attributes of a HTML-document: The lang-attribute. It’s usually set on the <html> element itself and indicated the document’s main language, so please don’t forget to set this in your projects.

There’s confusion about how to mark up buttons and links nowadays, especially if you control the action via JavaScript. Thankfully, Marcy Sutton wrote a definitive guide on what to use in modern web applications and websites.

Back to SVG, you might have already implemented icons or shapes for a website that should scale and then realized that the stroke-width scales as well. Nick Salloum has found a way to prevent this and while scaling an element, preserving the stroke-width via the vector-effect attribute and its non-scaling-stroke value.

What happened in “Accessibility” in 2016? #

As already written in the introductions, I have the feeling that 2016 was a big year for accessibility. The awareness has grown massively, the push towards accessible modules, widgets, solutions is definitely there. Google’s team put accessibility high on their priority list for their video tutorials, and we saw quite a couple of new helper tools and libraries that help you build an accessible web project.

We’ve seen people writing how to test for accessibility with a screenreader, we saw lists of tools and helpers, how to comply with WCAG2.0, and how to create better accessible content. Iconfont systems like Fontawesome have added new accesssibility guidelines to ensure that such icons are recognizable and make sense to people who cannot see them.

A lot of good primers have been written about why alt="" is perfectly valid and advised if you don’t want to give any context to an image, about patterns for accessible web chats and much more. And a couple of nice libraries have been published, such as a11y.js to help controlling the focus behavior in your application, and a11y-toggle or a11y-modal that gives you a simple but powerful accessible modal and toggle-widget on your website.

With Web Components and Custom Elements we not only got powerful tools to create our own elements but we also got the responsibility of taking care of all accessibility of the element ourselves. This is often neglected but so important that there are several articles on how to make custom elements accessible.

And finally, not only our HTML needs to be accessible but our SVGs as well. But fortunately, smart people like Heather Migliorisi write about such things as well. Last but not least, Microsoft presented that their Artificial Intelligence system called Caption Bot is able to analyze images and automatically provide useful captions for it.

What happened in “JavaScript” in 2016? #

Let’s start this with a basic thing, that we’ve neglected over the last years. While in the earlier years of web development we always included <noscript> elements for all our content where we used JavaScript but knew not every client has JavaScript enabled, it’s rarely seen nowadays. But especially since we now have entire applications based on JavaScript that fail to display anything when JavaScript is disabled for whatever reason, it’s important to be reminded about this useful fallback element again.

Going a bit deeper into the scripting now, ECMAScript has evolved a lot again. We’re still all struggling to understand the whole variety of new features that have been added in ES6 and many people wrote very useful guidelines, tutorials, screencasts about it so that you understand it better.

Todd Motto has wrapped up JavaScript’s powerful scoping feature again, and classic performance improvement techniques like debouncing and throttling for event listenters are still a topic if you look into most websites and realize that most don’t use it.

Promises are a great way to replace the ugly Callback hell, but as powerful and neat as they are, they can be quite tricky and confusing as well. To avoid this confusion, we now have plenty of articles, tutorials, wizards and tools to check JavaScript promises.

Besides language-specific news, we also got a couple of great new scripts in 2016: An leight-weight, accessible video player that also works with YouTube and Vimeo, a script that reduces the CPU usage in JavaScript and more.

We learned how to use Service Workers, how to build efficient infinite scrollers, how to use web notifications and how to improve the performance of onscroll event listeners.

And in late 2016, the WebShare API has been introduced which hopefully will reduce the amount of JavaScript third-party widgets on websites.

What happened in “CSS” in 2016? #

What happened in “Work & Life” in 2016? #

Work and Life. Two words, so much interpretation, so much different opinions behind it. But what we can see is that remote teams are growing, that remote work is more popular than ever before, and with that, problems arise and solutions are found. I’m pretty happy that I can be part of this phase that revolutionizes the way we work.

And while it’s important to be productive at work, we’re slowly figuring out that this cannot be achieved by working more hours but by working less and more focused. By having stronger workflows, by reducing stress, by making work enjoyable and by embracing people’s lives. This means we need to take care of ourselves, of our team mates.

What happened in “Go beyond…” in 2016? #

You probably already know that this section contains topics beyond web development. 2016 brought us mixed feeling in all the various topics, so let’s summarize it a bit here.

Great news cam from China at the beginning of the year: They announced to stop approving new coal mining licenses, which is a great thing for the climate and fresh air in Asia.

Not so great news are fake news, of which we saw way more this year and unfortunately, more and more people aren’t able to determine if news are fake or real. Also, the news business still relies on the concept of “fear sells” and brought us so many bad news that a lot of people got depressed and sad. A study revealed that when we read/watch too much bad news, our brain is directly affected and we not only get depressive but less productive and sad. So keep in mind to always have a balance of news, appreciate the good ones and don’t get afraid of other people and the world because of bad news. Because if we look at the world and human population overall, we can see that the world in fact is becoming a better place. It’s just that this is a slow process and often overseen.

Researchers found out how to produce improved solar panels that are incredibly thin, or can look like a real terracotta roof (Tesla), or ones that can store water. We see that cars get safer with technology that helps to prevent car crashes and we can now already buy the first Artificial Intelligence consumer products.