Editor’s Note: Our dear friend Anselm Hannemann summarizes what happened in the web community in the past few weeks in one handy list, so that you can catch up on everything new and important. Enjoy!
Welcome back to our monthly reading list. Before we dive right into all the amazing content I stumbled upon — admittedly, this one is going to be quite a long update — I want to make a personal announcement. This week I launched a personal project called Colloq1, a new conference and event service for users and organizers. If you’re going to events or are organizing one or if you’re interested in the recorded content of conferences, this could be for you. So if you like, go ahead and check it out.
In this issue, we’ll focus on some usually rather underaddressed things, such as numerals in web typography, variable fonts, or the image
async attribute that’s coming to Chrome soon. So without further ado, let’s get started.
- WebKit just got support for the Touch Bar Web API2 that will make use of the
menuitem. It’s still in WebKit trunk currently and likely to land in Safari next year at the earliest.
- Chrome 62 was released this week3 with some important updates to the Network Information API that now reflects the actual connection type even when tethering. Support for OpenType Variable Fonts and Media Capture from DOM elements also landed in the new version. Notably, Chrome 62 on iOS got support for the Payment Request API which is interesting because the iOS WebKit doesn’t support it yet in stable channel. It seems that they used a custom extension to support this feature. Might get interesting to see what else could be supported this way.
- This week’s Safari Technology Preview 424 brings along
font-displayloading behaviors and
- With the new Windows 10 fall update, Edge 16 is pushed to customers5 — with full CSS Grid support,
object-position, the Payment Request API, Service Worker preview behind flags, and Motion Controllers in WebVR.
- Kailash Ahirwar has created essential cheat sheets for machine learning and deep learning engineers9. A massive resource and very recommended if you’re working with any of these engines.
- David Yates’ plea for “RSS: there’s nothing better10” is a thoughtful column that praises the idea of the good old RSS over the siloed, algorithm-driven feeds of social media services.
- Right-to-left development is quite hard already but designing for mobile design is a challenge11.
- Inter UI12 is a nice, completely free to use open-source font family optimized for screen readability.
- Adobe announced the first stable version of their screen design tool XD13 at this year’s MAX conference. Besides a lot of smaller improvements, XD now supports sharing, as well as first-class integrations of third-party tools like Zeplin and Sympli. Apart from that, Adobe provided major updates for nearly all their software products during the event.
- InVision had a big announcement to make this week: They are going to bring a new screen design tool called “Studio1614” to the market in January and now invite beta testers to preview it.
Web Performance Link
- Vlad Krasnov got the chance to compare the newest server processors at Cloudflare. The results are pretty interesting: Qualcomm achieves a similar performance as the fastest Intel processors, but it needs about 30% less power18, sometimes even less. So while newer Qualcomm chips might have some issues with software incompatibilities, it’s going to be interesting what will happen on the server market. Especially with large data centers in mind where saving energy is quite important — not only because our planet benefits from less power consumption but also because it’s cheaper.
- David Jonathan Ross compared the file sizes of normal web fonts to a variable font file19. Depending on how many font styles are used on a website, you can save 44% with a variable font.
- Nikita Prokopov shares how one single option that Chrome promoted ruined the performance of his web application20.
- Andrew Betts summed up his knowledge about a great HTTP feature in the article “Understanding The Vary Header21”.
- Chrome is implementing an
asyncattribute for HTMLImageElement and SVGImageElement22. It’ll have two states: “On” will indicate that the developer prefers responsiveness and performance over the atomic presentation of image and non-image content, while “off” will indicate that the developer prefers atomic presentation of content over responsiveness.
- Alexey Ivanov shares how to optimize web servers for high throughput and low latency23. But please note: These are small, fine-tuning methods that can be very useful but we should apply them one after another, measure them and then decide if they are useful for the project or not. A thoughtful post that gives us insights into how the Dropbox team improves their edge network servers.
- This week, the “KRACK”-attack28 was widely discussed. It’s effectively breaking WPA2 encryption on most WiFi hardware. But vendors aren’t sleeping, some already updated their systems and offer software updates for the devices which you should patch as soon as possible. One thing to note here is that websites that use HSTS preloading aren’t affected by the issue, which reminds us that we should consider adding this header to our websites.
- We know targeted ads can be a bit frightening sometimes when they show up and are incredibly accurate. With mobile ads, it’s even worse: Andy Greenberg shares a study that shows that it takes only $1000 to track someone’s location using mobile ads29.
- Scott Vinkle explains how we can create accessible React apps30.
- Laura Kalbag wrote a book called “Accessibility for Everyone31”. Here’s a short excerpt32 explaining how to plan for accessibility.
- Vincent De Oliveira wrote about the amazing CSS
element()function33 which is only available in Firefox currently (but that might change). Actually, it’s not even a new function, but it allows us to use images from the HTML DOM in our CSS, e.g. for a background-image.
- Richard Rutter wrote a guide about how to use old-style numerals on the web34 with the
font-variant-numericCSS property, if available. Proper sub- and superscripts are explained, too, and we can learn when to use which feature for a specific purpose.
- Lea Verou shares how we can use different remote and local resource URLs with Service Workers39.
- Dustin Driver explains the fundamentals of the Firefox Debugger and how to go beyond
- Jake Archibald wrote about Netflix removing client-side React41 and why this step makes the site more robust while still benefiting from the advantages of React.
altattribute, links without labels and similar accessibility errors.
Work & Life Link
Going Beyond… Link
- The Guardian recently published an interesting article called “Ashamed to work in Silicon Valley: how techies became the new bankers44”. Seeing that working at tech giants like Facebook is considered negatively by a growing number of people is something I didn’t expect. The article also shares that employees at such companies are even ashamed of their jobs — an interesting change when you remember how most people craved to land a job at one of these companies only until this year.
- It’s a common question that I’ve asked myself quite often in the past that now has been answered: Electric cars emit significantly fewer greenhouse gases over their lifetimes45 as diesel engines, as a new study found out. Even when they are powered by the most carbon-intensive energy.
- A chatbot called DoNotPay has saved motorists millions in parking fines — without charging a cent. Its next target: divorce law46. And airlines, landlords, and telemarketers will follow, too, in the future.
We hope you enjoyed this Web Development Update. The next one is scheduled for December 15th. Stay tuned!
- 1 https://colloq.io/
- 2 https://trac.webkit.org/changeset/224457/webkit/
- 3 https://developers.google.com/web/updates/2017/10/nic62
- 4 https://webkit.org/blog/8001/release-notes-for-safari-technology-preview-42/
- 5 https://blogs.windows.com/msedgedev/2017/10/17/edgehtml-16-fall-creators-update/
- 6 https://blogs.windows.com/msedgedev/2017/10/17/edgehtml-16-fall-creators-update/
- 7 https://blogs.windows.com/msedgedev/2017/10/17/edgehtml-16-fall-creators-update/
- 8 https://blogs.windows.com/msedgedev/2017/10/17/edgehtml-16-fall-creators-update/
- 9 https://startupsventurecapital.com/essential-cheat-sheets-for-machine-learning-and-deep-learning-researchers-efb6a8ebd2e5
- 10 https://davidyat.es/2017/05/18/rss-nothing-better/
- 11 https://www.smashingmagazine.com/2017/11/right-to-left-mobile-design/
- 12 https://rsms.me/inter/
- 13 https://blogs.adobe.com/creativecloud/whats-next-for-adobe-xd-cc/
- 14 https://www.invisionapp.com/studio
- 15 https://www.invisionapp.com/studio
- 16 https://www.invisionapp.com/studio
- 17 https://www.invisionapp.com/studio
- 18 https://blog.cloudflare.com/arm-takes-wing/
- 19 http://stuff.djr.com/gimlet-vf-size-test/
- 20 http://tonsky.me/blog/chrome-intervention/
- 21 https://www.smashingmagazine.com/2017/11/understanding-vary-header/
- 22 https://www.chromestatus.com/feature/4897260684967936
- 23 https://blogs.dropbox.com/tech/2017/09/optimizing-web-servers-for-high-throughput-and-low-latency/
- 24 http://webpackmonitor.com/
- 25 http://webpackmonitor.com/
- 26 http://webpackmonitor.com/
- 27 http://webpackmonitor.com/
- 28 https://www.krackattacks.com/
- 29 https://www.wired.com/story/track-location-with-mobile-ads-1000-dollars-study
- 30 http://simplyaccessible.com/article/react-a11y/
- 31 https://abookapart.com/products/accessibility-for-everyone
- 32 https://alistapart.com/article/planning-for-accessibility
- 33 https://iamvdo.me/en/blog/css-element-function
- 34 https://alistapart.com/article/web-typography-numerals
- 35 https://alistapart.com/article/web-typography-numerals
- 36 https://alistapart.com/article/web-typography-numerals
- 37 http://www.e-codices.unifr.ch/en/sbe/0172/20
- 38 https://alistapart.com/article/web-typography-numerals
- 39 http://lea.verou.me/2017/10/different-remote-and-local-resource-urls-with-service-workers/
- 40 https://hacks.mozilla.org/2017/11/go-beyond-console-log-with-the-firefox-debugger/
- 41 https://jakearchibald.com/2017/netflix-and-react/
- 42 https://github.com/github/accessibilityjs
- 43 https://medium.freecodecamp.org/200-universities-just-launched-560-free-online-courses-heres-the-full-list-d9dd13600b04
- 44 https://www.theguardian.com/technology/2017/nov/08/ashamed-to-work-in-silicon-valley-how-techies-became-the-new-bankers
- 45 https://www.theguardian.com/environment/2017/oct/25/electric-cars-emit-50-less-greenhouse-gas-than-diesel-study-finds
- 46 https://www.wsj.com/articles/this-robot-will-handle-your-divorce-free-of-charge-1509022800