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.

Web Dev. Reading List #124

I often think about our responsibility as web developers. I compare our job to a health worker, to a craftsman, and I realize that we have a pretty easy job in most cases. Usually, nobody’s life will be affected if a website is not available for a couple of minutes or hours.

But there are some cases where this could happen. People start coding app interfaces for health application with web technologies, people start connecting health services to the web, and people also rely on websites for their own safety. And that’s why I think we should feel responsible for our users. And by making choices that are ethical and user-centered, we create a better web for everyone1.

Further Reading on SmashingMag:

News Link

  • Announced in December, Adobe Animate CC is finally here6. It replaces Edge Animate and Flash Professional and is now the new tool for web animation.
  • Firefox changed the behavior of the Cache API7, following a specification change to fix confusion about the API storing 4xx and 5xx responses from fetch(). This is no longer the case, and, starting from Firefox 46, only responses with a 2xx code are cached now.
  • It seems that the behavior of the JavaScript function window.innerWidth/Height has changed8 in Chrome 48. This is especially interesting because Chrome now behaves differently than all other browsers: it’s now reporting back the dimensions of the layout viewport instead of the dimensions of the visual viewport, making it a copy of document.documentElement.clientWidth/Height.

General Link

Tools Link

Sketch tips11

Fifteen tips12 make you more efficient and productive with Sketch.
    • Do you write Bash scripts? In case you do, Bash Infinity13 is a modern boilerplate for bash that you can use if you have complex scripts and want some helper utilities.
    • Jack Franklin explores how we can build better JavaScript bundles with Rollup14. Rather than excluding dead code, it includes only live code (aka ‘tree-shaking’). That’s only possible when using ES6 modules, though.
    • I’m a big fan of using SVG via a spritesheet and the <use> element. Now Hugo Giraudel published a simple Bash script that stacks your SVG symbol files into a spritesheet you can use: spritesh15.
    • Creating vector shapes can sometimes be a pain with common tools like Illustrator, Sketch, or Inkscape. Now Figma, a new app coming out soon, introduces a feature called Vector Networks16 and, well, it’s amazing. It basically provides a mesh for each shape and maintains the shape in a clever way while you move parts of it. A real time-saver.
Vector Networks17

Figma’s innovative Vector Networks18 concept could save you a lot of time when creating vector shapes.

Privacy Link

Web Performance Link

  • I’ve already mentioned BPG here. Radu-S. Amarie now explores the possibilities of the image format in a blog post. He shares why BPG could and should replace gif images21 and probably also the current mp4-instead-of-gif hackery used on many websites to save data.

Accessibility Link

JavaScript Link

CSS / Sass Link

  • While Flexbox is great26 for many things and even gives us the possibility to change the visual order of items, the feature also comes with a few issues. One of them is that not all browsers treat accessibility for screen reading the same way for this feature. Also, if you do not take care of it, the keyboard and focus order will be broken as well. Léonie Watson explains how you can fix keyboard navigation and accessibility while reodering with Flexbox27.

Work & Life Link

Going beyond… Link

  • You know, we’ve been talking a lot about the weather last year. Now we have an analysis and a world map of the warmth of 201529. And in fact, it was the hottest year since the recording of weather data.
  • While it’s not a new study, it’s interesting to read this research paper30 tackling the question if kids are too busy31 (PDF) and face stress due to discretionary activities, overscheduling, and packed after-school patterns. The result? Kids want to decide on activities with their parents, kids spending a lot of time in front of a screen ask for more free time (because screen time is not), and a lot of homework creates a lot of stress. Maybe it’s not the worst idea to spend more quality time with kids at home or outside but not in front of a screen.
  • James Victore runs a great video series on YouTube and as its episodes are usually pretty short it might be worth subscribing to them. This one answers a question by a young student asking how to do meaningful work that helps other people: How to Change the World32.
  • Germany achieved something unique this month: The U.S. granted permission to build a room where representatives from the German parliament can gain an insight into the TTIP documents33. The fun thing about it? They need to sign a statement that they will not share anything they read in that locked(!) room without internet access. There is no way that anything of the documents’ content will leak to the public, which again makes me worried about the agreement — there likely is a good reason why no one else is supposed to read it.

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

Thanks and all the best,
Anselm

Footnotes Link

  1. 1 https://ethicalweb.org/
  2. 2 https://www.smashingmagazine.com/2016/07/conversational-interfaces-where-are-we-today-where-are-we-heading/
  3. 3 https://www.smashingmagazine.com/2014/07/how-do-you-design-interaction/
  4. 4 https://www.smashingmagazine.com/2011/06/useful-ideas-and-guidelines-for-good-web-form-design/
  5. 5 https://www.smashingmagazine.com/2010/03/forms-on-mobile-devices-modern-solutions/
  6. 6 https://blogs.adobe.com/animate/animate-cc-is-here/
  7. 7 https://www.fxsitecompat.com/en-CA/docs/2016/cache-api-now-rejects-unsuccessful-responses/
  8. 8 http://www.quirksmode.org/blog/archives/2016/02/chrome_change_b.html
  9. 9 http://www.andybudd.com/archives/2016/02/we_won_the_moral_argument_but_did_we_los/
  10. 10 https://medium.com/sketch-app-sources/5-very-special-10-sketch-tips-3d63802280bc
  11. 11 https://medium.com/sketch-app-sources/5-very-special-10-sketch-tips-3d63802280bc
  12. 12 https://medium.com/sketch-app-sources/5-very-special-10-sketch-tips-3d63802280bc
  13. 13 https://invent.life/project/bash-infinity-framework/
  14. 14 http://javascriptplayground.com/blog/2016/02/better-bundles-rollup
  15. 15 http://dev.edenspiekermann.com/2016/02/10/introducing-spritesh/
  16. 16 https://medium.com/figma-design/introducing-vector-networks-3b877d2b864f
  17. 17 https://medium.com/figma-design/introducing-vector-networks-3b877d2b864f
  18. 18 https://medium.com/figma-design/introducing-vector-networks-3b877d2b864f
  19. 19 http://blog.tighten.co/unpacking-webpack
  20. 20 https://www.deepdotweb.com/2016/02/11/turning-your-phone-on-is-consenting-to-being-tracked/
  21. 21 http://eek.stfi.re/why-bpg-will-replace-gifs-and-not-only/
  22. 22 https://www.paciellogroup.com/blog/2016/02/short-note-on-use-of-alt-and-the-title-attribute/
  23. 23 http://nolanlawson.com/2016/02/08/how-to-think-about-databases/
  24. 24 http://www.2ality.com/2016/02/js-fatigue-fatigue.html
  25. 25 https://github.com/samccone/The-cost-of-transpiling-es2015-in-2016
  26. 26 https://www.smashingmagazine.com/2013/05/centering-elements-with-flexbox/
  27. 27 http://tink.uk/flexbox-the-keyboard-navigation-disconnect/
  28. 28 https://www.netguru.co/blog/10-commandments-of-running-a-remote-team
  29. 29 https://www.ncdc.noaa.gov/sotc/global/201513
  30. 30 http://eric.ed.gov/?id=EJ962881
  31. 31 http://web.extension.illinois.edu/cook/downloads/42013.pdf
  32. 32 https://www.youtube.com/watch?v=XvK4tK99WQg
  33. 33 http://www.theregister.co.uk/2016/02/10/surreal_world_of_the_ttip/?mt=1455173994705
  34. 34 https://wdrl.info/donate
  35. 35 https://wdrl.info/costs/

↑ 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.

Comments are closed.

↑ Back to top