I’ll make it short this week: Thank you so much for the great, constructive discussion last week1 about hiring people and web development basics. I took away some very interesting thoughts from it, and I hope you did so, too. Now, let’s go through the newest things I found.
- Front-End Performance Checklist 20173
- Getting Ready For HTTP/24
- Everything You Need To Know About AMP5
- This week, Firefox 44 has been released6 to the public. The new version offers better video support (VP9, WebM in addition to h.264) and adds support for Brotli compression (a new, better compression than gzip) for HTTPS connections. Service Workers are also supported now. Furthermore, the new Firefox requires add-ons to be signed and it doesn’t connect to sites anymore that allow RC4 ciphers in their HTTPS configuration.
- The new Chrome Beta channel build now includes a security panel in the developer tools7. This panel shows you how secure your site is, including details on HTTPS and mixed content warnings. Unfortunately, it’s not super detailed yet, and it also doesn’t provide information like HSTS, HKPK and other security details, but I’m excited to see this and bet that they’ll integrate more features over time.
- Francesco Iovine wrote down how you can make your web application installable8 on most mobile (and some Desktop) browsers and operating systems with the latest web standards.
Concepts & Design Link
- Most of the time, we see boring data visualizations. But they don’t have to be boring — instead, with inspiration from artists, we can make data very beautiful9 and enhance the user experience through it.
- If you already have your logo as an SVG file, you might want to optimize it not only for bright but also for dark backgrounds. With logomono12 you can now automate the process easily to get a great, reliable SVG that works on both types of backgrounds.
Web Performance Link
- Brad Frost has built a super-simple Performance Budget Builder13. You just need to enter your personal project goals to see if you match your performance budget or not.
- Since responsive images are a thing you can (and should) use now in production, we face the problem of resizing our images in various resolutions, sizes and qualities. There are some neat server integrations that help you with that, however, for many cases, it’s still a problem. Luckily, there’s now an open source tool you can use14, along with a guide on the whole topic15.
HTML / SVG Link
- Many people don’t know that the
hiddenHTML-attribute has quite decent browser support. Steve Faulkner explains how you can use it16 and also describes other attributes to properly hide elements.
- Adrian Roselli explains when we should use an
<button>, or an
<input type="submit">element for a clickable action item17 and why using a
<div>is never a valid option for such cases.
- When we see our development stack as an accessibility stack18 and follow some basic principles, we can easily build an accessible web solution that integrates all kind of users, no matter how they consume the content on the website.
- Firefox 44 also introduces the Web Push API21, and you can learn in this article how to use it to notify users about an incoming WebRTC call for example.
CSS / Sass Link
- Mikito Takada wrote a mini-book about CSS. Learn CSS Layout The Pedantic Way26 explains basic CSS properties in a very detailed, clear way so that no questions are left unanswered.
Work & Life Link
- As an industry, we have become accustomed to getting hundreds of hours of work and the benefit of years of hard-won knowledge for free. But we often forget that free software (OSS) is not entirely free, as it is paid for by people paying their time for it27.
Go beyond… Link
- Discussions about Uber need to go beyond the fact that they offer a cheaper ride. In fact, Uber challenges courts and politics, lawmakers and many other established systems28 and people. They try to circumvent existing laws, and while this offers a great chance for lawmakers to finally improve such laws, the issue is, that if Uber succeeds in a case, other companies will use the same strategy as well.
And with that, I’ll close for this week. If you like what I write each week, please support me with a donation29 or share this resource with other people. You can learn more about the costs of the project here30. It’s available via E-Mail, RSS and online.
Thanks and all the best,
- 1 https://www.smashingmagazine.com/2016/01/web-development-reading-list-121/#comments
- 2 https://www.smashingmagazine.com/2015/09/why-performance-matters-the-perception-of-time/#further-reading-on-smashing
- 3 https://www.smashingmagazine.com/2016/12/front-end-performance-checklist-2017-pdf-pages/
- 4 https://www.smashingmagazine.com/2016/02/getting-ready-for-http2/
- 5 https://www.smashingmagazine.com/2016/02/everything-about-google-accelerated-mobile-pages/
- 6 https://developer.mozilla.org/en-US/Firefox/Releases/44
- 7 https://blog.chromium.org/2016/01/introducing-security-panel-in-devtools.html
- 8 https://medium.com/@franciov/how-to-make-your-web-app-installable-8b71571605e
- 9 https://medium.com/accurat-studio/beautiful-reasons-c1c6926ab7d7
- 10 https://medium.com/accurat-studio/beautiful-reasons-c1c6926ab7d7
- 11 https://medium.com/accurat-studio/beautiful-reasons-c1c6926ab7d7
- 12 http://logomono.com/
- 13 http://bradfrost.com/blog/post/performance-budget-builder/
- 14 http://www.responsivebreakpoints.com/
- 15 https://www.smashingmagazine.com/2016/01/responsive-image-breakpoints-generation/
- 16 https://www.paciellogroup.com/blog/2016/01/the-state-of-hidden-content-support-in-2016/
- 17 http://adrianroselli.com/2016/01/links-buttons-submits-and-divs-oh-hell.html
- 18 http://simplyaccessible.com/article/the-accessibility-stack/
- 19 https://jakearchibald.com/2016/streams-ftw/
- 21 https://hacks.mozilla.org/2016/01/web-push-arrives-in-firefox-44/
- 22 https://jakearchibald.com/2016/streams-ftw/
- 23 https://jakearchibald.com/2016/streams-ftw/
- 24 http://thatemil.com/blog/2016/01/23/floating-label-no-js-pure-css/
- 25 https://medium.com/@_jh3y/how-to-pure-css-masonry-layouts-a8ede07ba31a
- 26 http://book.mixu.net/css/
- 27 http://alistapart.com/article/the-high-price-of-free
- 28 http://www.cbc.ca/beta/news/business/uber-canada-gig-economy-1.3414206
- 29 https://wdrl.info/donate
- 30 https://wdrl.info/costs/