Menu Search
Jump to the content X X
Smashing Conf New York

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

Web Development Reading List #179: Firefox 53, The Top Web Browsers, And Vue.js Authentication

Bots and Artificial Intelligence are probably the most hyped concepts right now. And while some people praise the existing technologies, others claim they don’t fear AI at all, citing examples where it fails horribly. Examples of Facebook or Amazon advertising (both claim to use machine learning) that don’t match our interests at all are quite common today.

But what happens if we look at autonomous cars, trains or planes that have the very same machine learning technologies in place? How about the military using AI for its actions? While we’re still experimenting with these capable technologies, we also need to consider the possible consequences, the responsibilities that we have as developers and how all of this might affect the people the technology is being served to.

Further Reading on SmashingMag: Link

News Link

  • This week, Firefox 53 rolled out5 to end users, shipping performance benefits, positioned CSS Masks, and the new display: flow-root value that effectively replaces our common clearfix methods6. The update also comes with a revamped media player design. Finally, this is the first Firefox version without Windows XP and Vista support, so if you rely on one of these operating systems, consider switching to the ESR version of Firefox and upgrade to a newer system as soon as possible (the OS are not supported by Microsoft anymore).
  • Chrome 587 comes with support for IndexedDB 2.0, fullscreen support for progressive web apps, and improvements for sandboxed iframes. Alongside Firefox 53, the new Chrome is the second browser to support display: flow-root, the new clearfix replacement8. There’s also PointerEvents.getCoalescedEvents() as a new method to give you access to all input events that took place since the last time a PointerEvent was delivered — a useful feature for drawing applications but also quite risky when we look at it from a privacy and user tracking perspective.
  • Mozilla finally simplified the developer experience and got rid of the Firefox Developer Edition9. If you still use it, switch to the Firefox Nightly Edition10. While there’s still a beta channel, I recommend Nightly as it’s relatively free of bugs that impact the general usage while supporting the latest features, deprecations and development tools already weeks or even months ahead of public launch. This is great as you have more time to adjust code on live sites when something breaks in the Nightly channel. I use WebKit Nightly and Chrome Canary similarly.

General Link

  • Peter O’Shaughnessy challenges us to estimate which web browsers have the most users11. And as you can probably assume, our existing idea of Chrome, Firefox, Safari, and IE leading the field isn’t up to date anymore. Instead, we need to acknowledge that UC Browser has an impressive market share, Opera Mini still does, too, Yandex in certain regions and Samsung Internet usage grows fast as more devices are shipped with it. And Google Analytics isn’t telling us the truth anyway — big parts of “Chrome” might actually be Samsung Internet.
Browser usage on mobile12
Browser usage13 on mobile as of February 2017. Not as you would have expected, right? (Image credit14)

Concept & Design Link

Tools & Workflows Link

  • Google Chrome can now be run in headless mode, replacing PhantomJS or SlimerJS. Jim Cummins explains how to set it up on Mac OS16. For Windows and Linux it should be similar using bash and a few adaptions to the local commands.

Security Link

Privacy Link

  • Jeremy Thomas experimented with browsers and tried to disable cookies entirely19. Read about how successful he was with it and what challenges he faced with modern web applications.
Browsing Soundcloud with cookies disabled isn’t possible20
What happens when you disable cookies completely21? Well, some sites don’t even load, on others, basic interactions aren’t possible anymore. (Image credit22)

Accessibility Link

JavaScript Link

And with that, I’ll close for this week. If you like what I write each week, please support me with a donation26 or share this resource with other people. You can learn more about the costs of the project here27. It’s available via email, RSS and online.

— Anselm

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2016/06/the-current-state-of-authentication-we-have-a-password-problem/
  2. 2 https://www.smashingmagazine.com/2016/12/conversational-design-essentials-tips-for-building-a-chatbot/
  3. 3 https://www.smashingmagazine.com/2016/09/how-to-design-error-states-for-mobile-apps/
  4. 4 https://www.smashingmagazine.com/2016/02/writing-next-generation-reusable-javascript-modules/
  5. 5 https://hacks.mozilla.org/2017/04/firefox-53-quantum-compositor-compact-themes-css-masks-and-more/
  6. 6 https://helloanselm.com/2017/flow-root-supports/
  7. 7 https://developers.google.com/web/updates/2017/04/nic58
  8. 8 https://helloanselm.com/2017/flow-root-supports/
  9. 9 https://hacks.mozilla.org/2017/04/simplifying-firefox-release-channels/
  10. 10 https://nightly.mozilla.org/
  11. 11 https://medium.com/samsung-internet-dev/think-you-know-the-top-web-browsers-458a0a070175
  12. 12 https://medium.com/samsung-internet-dev/think-you-know-the-top-web-browsers-458a0a070175
  13. 13 https://medium.com/samsung-internet-dev/think-you-know-the-top-web-browsers-458a0a070175
  14. 14 https://medium.com/samsung-internet-dev/think-you-know-the-top-web-browsers-458a0a070175
  15. 15 https://simpleicons.org/
  16. 16 https://objectpartners.com/2017/04/13/how-to-install-and-use-headless-chrome-on-osx/
  17. 17 http://www.martinvigo.com/design-flaws-lastpass-2fa-implementation/
  18. 18 https://auth0.com/blog/vuejs2-authentication-tutorial/
  19. 19 http://jgthms.com/browsing-the-web-with-cookies-disabled.html
  20. 20 http://jgthms.com/browsing-the-web-with-cookies-disabled.html
  21. 21 http://jgthms.com/browsing-the-web-with-cookies-disabled.html
  22. 22 http://jgthms.com/browsing-the-web-with-cookies-disabled.html
  23. 23 https://hiddedevries.nl/en/blog/2017-04-04-how-to-make-error-messages-accessible
  24. 24 http://meulta.com/en/2017/04/17/bot-framework-web-chat-and-push-notifications/
  25. 25 https://www.contentful.com/blog/2017/04/04/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling/
  26. 26 https://wdrl.info/donate
  27. 27 https://wdrl.info/costs/

↑ Back to top Tweet itShare on Facebook

is a freelance front-end developer and architect and cares about sustainable front-end experiences and ethical choices in life. He curates the WDRL, a weekly handcrafted web development newsletter that thousands of developers love, subscribe to, and donate for.

  1. 1

    Martin Niggemann

    April 21, 2017 3:00 pm

    Anselm, the dev edition of Firefox continues to exist, of course — it’s merely based on the beta channel now, instead of aurora.

    2
  2. 3

    I love your articles on accessibility!

    1
  3. 4

    Phoenix Pop Productions

    April 21, 2017 6:54 pm

    Margraff’s article is a gold mine for endless possibilities with chat bots. Thanks for the share.

    1
  4. 5

    display: flow-root sounds interesting, but wouldn’t it be favourable to just use flexbox instead?

    0
    • 6

      Raine Luntta

      April 26, 2017 5:51 am

      While display: flex; and display: grid; solves many problems we’ve had for decades, we still have to worry about the flow of the content on a website. You wouldn’t use flexbox to float an image to either side of a paragraph, you use floats for that. So what happens when we want to reset the flow? We use display: flow-root;. At least that’s how I see it. Flexbox and grid for layout, floats for rich text content.

      0

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top