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.
- This week, Firefox 44 has been released2 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 tools3. 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 installable4 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 beautiful5 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 logomono8 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 Builder9. 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 use10, along with a guide on the whole topic11.
HTML / SVG Link
Many people don’t know that the
hiddenHTML-attribute has quite decent browser support. Steve Faulkner explains how you can use it12 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 item13 and why using a
<div>is never a valid option for such cases.
- When we see our development stack as an accessibility stack14 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 API17, 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 Way22 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 it23.
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 systems24 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 donation25 or share this resource with other people. You can learn more about the costs of the project here26. 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://developer.mozilla.org/en-US/Firefox/Releases/44
- 3 https://blog.chromium.org/2016/01/introducing-security-panel-in-devtools.html
- 4 https://medium.com/@franciov/how-to-make-your-web-app-installable-8b71571605e
- 5 https://medium.com/accurat-studio/beautiful-reasons-c1c6926ab7d7
- 6 https://medium.com/accurat-studio/beautiful-reasons-c1c6926ab7d7
- 7 https://medium.com/accurat-studio/beautiful-reasons-c1c6926ab7d7
- 8 http://logomono.com/
- 9 http://bradfrost.com/blog/post/performance-budget-builder/
- 10 http://www.responsivebreakpoints.com/
- 11 https://www.smashingmagazine.com/2016/01/responsive-image-breakpoints-generation/
- 12 https://www.paciellogroup.com/blog/2016/01/the-state-of-hidden-content-support-in-2016/
- 13 http://adrianroselli.com/2016/01/links-buttons-submits-and-divs-oh-hell.html
- 14 http://simplyaccessible.com/article/the-accessibility-stack/
- 15 https://jakearchibald.com/2016/streams-ftw/
- 17 https://hacks.mozilla.org/2016/01/web-push-arrives-in-firefox-44/
- 18 https://jakearchibald.com/2016/streams-ftw/
- 19 https://jakearchibald.com/2016/streams-ftw/
- 20 http://thatemil.com/blog/2016/01/23/floating-label-no-js-pure-css/
- 21 https://medium.com/@_jh3y/how-to-pure-css-masonry-layouts-a8ede07ba31a
- 22 http://book.mixu.net/css/
- 23 http://alistapart.com/article/the-high-price-of-free
- 24 http://www.cbc.ca/beta/news/business/uber-canada-gig-economy-1.3414206
- 25 https://wdrl.info/donate
- 26 https://wdrl.info/costs/
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.