Menu Search
Jump to the content X X
Smashing Conf Barcelona

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 Barcelona, dedicated to smart front-end techniques and design patterns.

Monthly Web Development Update 09/2017: Functional CSS, Android 8 And iOS 11

Editor’s Note: Welcome to this month’s web development update. It’s actually the first one that we publish, and from now on, Anselm will summarize the most important things that happened over the past month in one handy list for you. So that you’re always up to date with what’s going on in the web community. Enjoy!

Today, I’d like to begin this update with a question I’m asking myself quite often, and that was fueled by the things I read lately: Where do we see our responsibility, where do we see other people’s responsibilities? And how do companies fit in here?

With governments needing to make rules for how autonomous cars should behave in case of an incident1, we can see how technological progress takes these questions to an entirely new dimension. Or take the Diesel gate affair that has been in the news all over the world these weeks. With software developers facing charges for their work, it showed us how important it is for employees to make their own decisions and to stand up for what’s right instead of blindly doing everything their bosses demand. Of course, this requires us to find our own position, our own path, and to stay true to it. An important thing we should reflect on more often if we want to make a change — not only in our work, but also in our community, and our lives.

News Link

  • Google Chrome 612 brings ECMAScript Modules, navigator.share, the WebUSB API, 8-digit alpha transparency hex-color codes, the CSS scroll-behavior property, and the Visual Viewport API to the browser.
  • Android 8, named “Oreo”, is now available and comes with picture-in-picture support, a system-wide autofill feature, and much more. But, unfortunately, it seems that the new version also brings along quite some issues for us web developers, especially problems with Progressive Web Apps3, as Maximiliano Firtman points out.
  • The latest update of Adobe XD ships with some new features4. There’s a new “reuse styles and assets” feature, and character styles created in Photoshop, Illustrator or other Creative Cloud applications can be reused in XD, too. The new version also comes with common UI resources for iOS, Google Material, and Windows.
  • Federico Viticci discovered that Apple removed Google AMP versions of a link5 in iOS 11 and redirects users to the original source URL instead if they are using iMessage or Apple’s Reading List feature. A very interesting step that could be a reaction to users having trouble with AMP URLs or maybe Apple wants to avoid using a third-party proxy that could disappear any time or even change the content of the original URLs.
  • At this year’s developer event, Microsoft announced what’s coming in Edge 166: Updated CSS Grid Layout, object-fit and object-position, support for the Payment Request API, Service Workers, and WebVR.
Adobe XD UI resources7
The new Adobe XD update8 makes designing for iOS, Windows, and Material Design even easier thanks to platform-specific UI components. (Image source9)

UI/UX Link

Feather Icons13
Simple and minimalistic — that’s the open-source Feather Icon Set14. (Image source15)

Tooling Link

JavaScript Link

CSS Link

Understanding the WebView Viewport in iOS 1123
How should we deal with fixed position header bars in combination with the new viewport that the iPhone X introduced? Darryl Pogue sheds some light into the dark24. (Image source25)

Web Performance Link

Accessibility Link

Security Link

  • Some researchers found a way to control voice assistants29 from Apple, Google, Amazon, Microsoft, Samsung, and Huawei. And this does not only affect the smart home boxes but also every iPhone, MacBook, Windows 10 PC, or Samsung Galaxy phone. By using ultrasonic frequencies, they could control the devices and call people, open websites, and even re-route a navigation system of an Audi Q3 car.
  • Stéphane Bortzmeyer shares the observations made during a technical attack against the WikiLeaks platform last week. This is a good example of how DNS attacks work30.
  • Benjamin Caudill introduces CFire, a script to evade Cloudflare’s “Cloud Security Protections”31. The article also shares some very interesting details of how Cloudflare’s security system works.

Privacy Link

Invisible Manipulation35.
Invisible Manipulation. Privacy International shares ten examples of how our data is being used against us36 without us knowing. (Image source37)

Work & Life Link

We hope you’ve enjoyed this first monthly Web Development Update. The next one is scheduled for October 13th. Stay tuned!

Footnotes Link

  1. 1 https://thenextweb.com/cars/2017/08/24/germanys-self-driving-car-solution-kill-animals-damage-property-protect-humans/#.tnw_gEstLoIw
  2. 2 https://developers.google.com/web/updates/2017/09/nic61
  3. 3 https://medium.com/@firt/android-oreo-takes-a-bite-out-of-progressive-web-apps-30b7e854648f
  4. 4 https://blogs.adobe.com/creativecloud/august-update-of-adobe-xd/
  5. 5 https://mobile.twitter.com/viticci/status/900396684844433409
  6. 6 https://docs.microsoft.com/en-us/microsoft-edge/dev-guide/whats-new/edgehtml-16
  7. 7 https://blogs.adobe.com/creativecloud/august-update-of-adobe-xd/
  8. 8 https://blogs.adobe.com/creativecloud/august-update-of-adobe-xd/
  9. 9 https://blogs.adobe.com/creativecloud/august-update-of-adobe-xd/
  10. 10 https://m.signalvnoise.com/new-in-basecamp-3-an-all-new-schedule-design-ad1bbf8e57f0
  11. 11 https://feathericons.com/
  12. 12 https://blog.prototypr.io/you-hate-comic-sans-you-dont-know-anything-about-typography-5133fbd4c8c4
  13. 13 https://feathericons.com/
  14. 14 https://feathericons.com/
  15. 15 https://feathericons.com/
  16. 16 https://developer.mozilla.org/en-US/Firefox/Headless_mode
  17. 17 https://www.npmjs.com/package/subfont
  18. 18 https://github.com/assetgraph/assetgraph/releases/tag/v3.8.0
  19. 19 https://blog.phantombuster.com/web-scraping-in-2017-headless-chrome-tips-tricks-4d6521d695e8
  20. 20 https://medium.com/@daspinola/javascript-from-callbacks-to-async-await-1cc090ddad99
  21. 21 https://adamwathan.me/css-utility-classes-and-separation-of-concerns/
  22. 22 https://ayogo.com/blog/ios11-viewport/
  23. 23 https://ayogo.com/blog/ios11-viewport/
  24. 24 https://ayogo.com/blog/ios11-viewport/
  25. 25 https://ayogo.com/blog/ios11-viewport/
  26. 26 https://unwttng.com/compression-decompressed
  27. 27 http://adrianroselli.com/2017/08/whats-new-in-wcag-2-1.html
  28. 28 https://www.slideshare.net/maxdesign/building-an-accessible-autocomplete
  29. 29 https://www.fastcodesign.com/90139019/a-simple-design-flaw-makes-it-astoundingly-easy-to-hack-siri-and-alexa
  30. 30 http://www.bortzmeyer.org/observations-wikileaks.html
  31. 31 https://rhinosecuritylabs.com/cloud-security/cloudflare-bypassing-cloud-security/
  32. 32 https://mobile.twitter.com/bcrypt/status/903724091143630848
  33. 33 https://dev.twitter.com/web/overview/privacy#what-privacy-options-do-website-publishers-have
  34. 34 https://medium.com/@privacyint/invisible-manipulation-efb4243011ca
  35. 35 https://medium.com/@privacyint/invisible-manipulation-efb4243011ca
  36. 36 https://medium.com/@privacyint/invisible-manipulation-efb4243011ca
  37. 37 https://medium.com/@privacyint/invisible-manipulation-efb4243011ca
  38. 38 https://mobile.twitter.com/tedneward/status/901135785969074177
  39. 39 https://www.washingtonpost.com/news/parenting/wp/2017/08/24/melinda-gates-i-spent-my-career-in-technology-i-wasnt-prepared-for-its-effect-on-my-kids/
  40. 40 https://www.smashingmagazine.com/2017/09/importance-project-retrospectives-part-1/
  41. 41 https://www.nytimes.com/2017/09/03/upshot/to-understand-rising-inequality-consider-the-janitors-at-two-top-companies-then-and-now.html

↑ Back to top Tweet itShare on Facebook

is a freelance front-end developer who cares about sustainable front-end experiences and ethical choices in life. He writes the WDRL, and is co-founder of the event platform Colloq.

  1. 1

    It is good to know about the evolution of JS. Finally modules on browser. Now, it is the turn of NodeJS.
    Thanks ;)

    1
  2. 3

    Michał Sadowski

    September 19, 2017 3:20 pm

    There’s still one question for me: Why the hell would anybody call their product “XD”?

    1
  3. 4

    Interesting – no mention of WebRTC in iOS 11. We can finally have cross-platform web Augmented Reality using something like AR.js.

    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