hostmonster-Host Unlimited Domains on 1 Account   coolhandle offering reliable webhosting since 2001
Unlimited Hosting Space - FREE Site Builder   Smart Website Solutions for Your Small Business=

Web Dev. Reading List #124

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.

News Link

  • Announced in December, Adobe Animate CC is finally here2. It replaces Edge Animate and Flash Professional and is now the new tool for web animation.
  • Firefox changed the behavior of the Cache API3, 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 changed4 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

  • Here are five great and ten useful tips for working in Sketch6 to make you more productive with the tool.
  • Sketch tips7
    Fifteen tips8 make you more efficient and productive with Sketch.
  • Do you write Bash scripts? In case you do, Bash Infinity9 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 Rollup10. 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: spritesh11.
  • 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 Networks12 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 Networks13
    Figma’s innovative Vector Networks14 concept could save you a lot of time when creating vector shapes.
  • Samantha Geitz wrote a great article on how you can use Webpack to create an easy build process15, not only for your JavaScript but also your CSS and images. For simple projects, it might even replace Gulp or Grunt.

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 images17 and probably also the current mp4-instead-of-gif hackery used on many websites to save data.

Accessibility Link

  • Sometimes you have an image that is only presentational but included with an img element. In such cases, instead of not providing an alt-attribute at all (which causes screenreaders to assume an alternative text from the file name), you can add an empty alt="" and screen readers will omit the element18.

JavaScript Link

CSS / Sass Link

Work Life Link

Going beyond… Link

And with that, I’ll close for this week. If you like what I write each week, please support me with a donation29 or share this resource with other people. You can learn more about the costs of the project here30. 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://blogs.adobe.com/animate/animate-cc-is-here/
  3. 3 https://www.fxsitecompat.com/en-CA/docs/2016/cache-api-now-rejects-unsuccessful-responses/
  4. 4 http://www.quirksmode.org/blog/archives/2016/02/chrome_change_b.html
  5. 5 http://www.andybudd.com/archives/2016/02/we_won_the_moral_argument_but_did_we_los/
  6. 6 https://medium.com/sketch-app-sources/5-very-special-10-sketch-tips-3d63802280bc
  7. 7 https://medium.com/sketch-app-sources/5-very-special-10-sketch-tips-3d63802280bc
  8. 8 https://medium.com/sketch-app-sources/5-very-special-10-sketch-tips-3d63802280bc
  9. 9 https://invent.life/project/bash-infinity-framework/
  10. 10 http://javascriptplayground.com/blog/2016/02/better-bundles-rollup
  11. 11 http://dev.edenspiekermann.com/2016/02/10/introducing-spritesh/
  12. 12 https://medium.com/figma-design/introducing-vector-networks-3b877d2b864f
  13. 13 https://medium.com/figma-design/introducing-vector-networks-3b877d2b864f
  14. 14 https://medium.com/figma-design/introducing-vector-networks-3b877d2b864f
  15. 15 http://blog.tighten.co/unpacking-webpack
  16. 16 https://www.deepdotweb.com/2016/02/11/turning-your-phone-on-is-consenting-to-being-tracked/
  17. 17 http://eek.stfi.re/why-bpg-will-replace-gifs-and-not-only/
  18. 18 https://www.paciellogroup.com/blog/2016/02/short-note-on-use-of-alt-and-the-title-attribute/
  19. 19 http://nolanlawson.com/2016/02/08/how-to-think-about-databases/
  20. 20 http://www.2ality.com/2016/02/js-fatigue-fatigue.html
  21. 21 https://github.com/samccone/The-cost-of-transpiling-es2015-in-2016
  22. 22 http://tink.uk/flexbox-the-keyboard-navigation-disconnect/
  23. 23 https://www.netguru.co/blog/10-commandments-of-running-a-remote-team
  24. 24 https://www.ncdc.noaa.gov/sotc/global/201513
  25. 25 http://eric.ed.gov/?id=EJ962881
  26. 26 http://web.extension.illinois.edu/cook/downloads/42013.pdf
  27. 27 https://www.youtube.com/watch?v=XvK4tK99WQg
  28. 28 http://www.theregister.co.uk/2016/02/10/surreal_world_of_the_ttip/?mt=1455173994705
  29. 29 https://wdrl.info/donate
  30. 30 https://wdrl.info/costs/
SmashingConf Oxford

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 Oxford, on March 15—16, with smart design patterns and front-end techniques.

↑ Back to top
Tweet itShare on Facebook

Article source: https://www.smashingmagazine.com/2016/02/web-development-reading-list-124/

Tags:


Submit a Review




If you want a picture to show with your review, go get a Gravatar.

Web Dev. Reading List #124

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.

News Link

  • Announced in December, Adobe Animate CC is finally here2. It replaces Edge Animate and Flash Professional and is now the new tool for web animation.
  • Firefox changed the behavior of the Cache API3, 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 changed4 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

  • Here are five great and ten useful tips for working in Sketch6 to make you more productive with the tool.
  • Sketch tips7
    Fifteen tips8 make you more efficient and productive with Sketch.
  • Do you write Bash scripts? In case you do, Bash Infinity9 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 Rollup10. 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: spritesh11.
  • 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 Networks12 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 Networks13
    Figma’s innovative Vector Networks14 concept could save you a lot of time when creating vector shapes.
  • Samantha Geitz wrote a great article on how you can use Webpack to create an easy build process15, not only for your JavaScript but also your CSS and images. For simple projects, it might even replace Gulp or Grunt.

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 images17 and probably also the current mp4-instead-of-gif hackery used on many websites to save data.

Accessibility Link

  • Sometimes you have an image that is only presentational but included with an img element. In such cases, instead of not providing an alt-attribute at all (which causes screenreaders to assume an alternative text from the file name), you can add an empty alt="" and screen readers will omit the element18.

JavaScript Link

CSS / Sass Link

Work Life Link

Going beyond… Link

And with that, I’ll close for this week. If you like what I write each week, please support me with a donation29 or share this resource with other people. You can learn more about the costs of the project here30. 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://blogs.adobe.com/animate/animate-cc-is-here/
  3. 3 https://www.fxsitecompat.com/en-CA/docs/2016/cache-api-now-rejects-unsuccessful-responses/
  4. 4 http://www.quirksmode.org/blog/archives/2016/02/chrome_change_b.html
  5. 5 http://www.andybudd.com/archives/2016/02/we_won_the_moral_argument_but_did_we_los/
  6. 6 https://medium.com/sketch-app-sources/5-very-special-10-sketch-tips-3d63802280bc
  7. 7 https://medium.com/sketch-app-sources/5-very-special-10-sketch-tips-3d63802280bc
  8. 8 https://medium.com/sketch-app-sources/5-very-special-10-sketch-tips-3d63802280bc
  9. 9 https://invent.life/project/bash-infinity-framework/
  10. 10 http://javascriptplayground.com/blog/2016/02/better-bundles-rollup
  11. 11 http://dev.edenspiekermann.com/2016/02/10/introducing-spritesh/
  12. 12 https://medium.com/figma-design/introducing-vector-networks-3b877d2b864f
  13. 13 https://medium.com/figma-design/introducing-vector-networks-3b877d2b864f
  14. 14 https://medium.com/figma-design/introducing-vector-networks-3b877d2b864f
  15. 15 http://blog.tighten.co/unpacking-webpack
  16. 16 https://www.deepdotweb.com/2016/02/11/turning-your-phone-on-is-consenting-to-being-tracked/
  17. 17 http://eek.stfi.re/why-bpg-will-replace-gifs-and-not-only/
  18. 18 https://www.paciellogroup.com/blog/2016/02/short-note-on-use-of-alt-and-the-title-attribute/
  19. 19 http://nolanlawson.com/2016/02/08/how-to-think-about-databases/
  20. 20 http://www.2ality.com/2016/02/js-fatigue-fatigue.html
  21. 21 https://github.com/samccone/The-cost-of-transpiling-es2015-in-2016
  22. 22 http://tink.uk/flexbox-the-keyboard-navigation-disconnect/
  23. 23 https://www.netguru.co/blog/10-commandments-of-running-a-remote-team
  24. 24 https://www.ncdc.noaa.gov/sotc/global/201513
  25. 25 http://eric.ed.gov/?id=EJ962881
  26. 26 http://web.extension.illinois.edu/cook/downloads/42013.pdf
  27. 27 https://www.youtube.com/watch?v=XvK4tK99WQg
  28. 28 http://www.theregister.co.uk/2016/02/10/surreal_world_of_the_ttip/?mt=1455173994705
  29. 29 https://wdrl.info/donate
  30. 30 https://wdrl.info/costs/
SmashingConf Oxford

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 Oxford, on March 15—16, with smart design patterns and front-end techniques.

↑ Back to top
Tweet itShare on Facebook

Article source: https://www.smashingmagazine.com/2016/02/web-development-reading-list-124/

Tags:


Submit a Review




If you want a picture to show with your review, go get a Gravatar.

1&1 has shared hosting and dedicated hosting solutions for every budget and free domains with all hosting packages!  StartLogic - Affordable hosting: Free setup/domain, unlimited emails, PHP, mySQL, CGI, FrontPage. As low as $3.95/month
Cloud ecommerce platform delivers more traffic, higher conversion and unmatched performance

© Copyright 2008 Tyconia International, Inc. All Rights Reserved.