Web Development Reading List #145: Font Loading Strategies, Scaling SVGs And Infinite Scrolling Done Right

Web Development Reading List #145: Font Loading Strategies, Scaling SVGs And Infinite Scrolling Done Right

I love articles that specifically focus on tiny little details within web development. For example, this week I stumbled upon an article featuring all the fine details about scheduling in requestAnimationFrame. Another gem I discovered is a widely unknown but very practical SVG attribute to preserve stroke widths while scaling an illustration. All of these little details can make such a huge difference in our projects, so I’m particularly thankful for having discovered these articles to share with you this week. Let’s dive in.

News Link

  • The beloved Git Tower app is coming to Windows1. I’m pretty sure that the pricing will be the same as for the Mac app and it’s great to see that this useful Mac app will soon be available to Windows users as well.

Generic Link

Tools & Workflows Link

  • Mango3 is a new tool that uses git as it was thought: in a decentralized, distributed way. They achieve that by baking in IPFS4 to store git objects. I’m happy this is available now and I’ll be sure to try it with an upcoming project.
5
Introducing the IPFS Alpha: it includes a fully functioning ipfs node, a unique style command line interface, an importable library, a json api for controlling the node programmatically, a gateway for exposing ipfs to regular web browsers, and a webui for managing your node. (Image credit6)

HTML & SVG Link

  • All people say using links and buttons is very easy in web development. The truth is, I don’t think that’s true, especially since the decision makes a huge difference when it comes to accessibility for which the semantic choice can make a huge difference. Marcy Sutton tries to give real-world hints how you can figure out if an element visually looking like a button should be a button or a link instead7.
  • Nick Salloum shares how you can scale SVG graphics without scaling their borders8. This is very useful for outline icons which you want to homogeneously display in various sizes altogether. The effect is achieved through the widely unknown vector-effect attribute, which for example can have the non-scaling-stroke value.
Nick Salloum shows us how a SVG attribute can help us scale SVGs without scaling their strokes.9
Nick Salloum shows us how a SVG attribute can help us scale SVGs without scaling their strokes. (Check out the demo10)

JavaScript Link

An Android lock screen at the beginning of our EU referendum experiment.16
An Android lock screen at the beginning of our EU referendum experiment. (Image credit17)

Work & Life Link

  • “When you change your location, it’s a lot easier to wash away a lot of bad habits. That’s not to say if you move somewhere, you’ll become a different person, but you have a greater opportunity to make dramatic changes in your identity. […] This process, done over and over, makes you a more robust person. You not only become more adaptable, you gain increasing confidence and self-assurance that who you are is congruent with who you want to be.”—Taylor Pearson in “Change your location, change your life18”.
  • When you work on a project that is complex, it’s not easy to turn into a workflow where your team is able to ship small features fast19. Vanja Mimic shares how you can turn a project and deliver much faster.
  • Chen Hui Jing wrote a piece on Strategies for Healthier Dev20. It’s an important article about doing something about your fitness, including strategies for lazy people who don’t like pain and suffering, and things you can do with nearly zero effort.

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

– Anselm

Footnotes Link

  1. 1 https://www.git-tower.com/p/windows-beta
  2. 2 https://www.zachleat.com/web/comprehensive-webfonts/
  3. 3 https://medium.com/@alexberegszaszi/mango-git-completely-decentralised-7aef8bcbcfe6
  4. 4 https://ipfs.io/
  5. 5 https://ipfs.io/
  6. 6 https://ipfs.io/
  7. 7 https://marcysutton.com/links-vs-buttons-in-modern-web-applications/
  8. 8 http://callmenick.com/post/svg-vector-effects
  9. 9 http://callmenick.com/post/svg-vector-effects
  10. 10 http://codepen.io/callmenick/full/jryOjN/
  11. 11 https://github.com/TalAter/awesome-service-workers
  12. 12 https://developers.google.com/web/updates/2016/07/infinite-scroller
  13. 13 https://philipwalton.com/articles/learning-how-to-set-up-automated-cross-browser-javascript-unit-testing/
  14. 14 https://medium.com/@paul_irish/requestanimationframe-scheduling-for-nerds-9c57f7438ef4
  15. 15 https://medium.com/the-guardian-mobile-innovation-lab/web-notifications-introduction-news-on-lock-screens-ba0d685cb4e2#.y60mm017q
  16. 16 https://medium.com/the-guardian-mobile-innovation-lab/web-notifications-introduction-news-on-lock-screens-ba0d685cb4e2#.wyd7o6jbz
  17. 17 https://medium.com/the-guardian-mobile-innovation-lab/web-notifications-introduction-news-on-lock-screens-ba0d685cb4e2#.wyd7o6jbz
  18. 18 http://taylorpearson.me/change-your-location-change-your-life/
  19. 19 https://www.smashingmagazine.com/2016/07/how-we-started-releasing-features-twice-as-fast-a-case-study/
  20. 20 https://www.chenhuijing.com/blog/healthier-dev/
  21. 21 https://wdrl.info/donate
  22. 22 https://wdrl.info/costs/
SmashingConf New York

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 Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to topTweet itShare on Facebook

(Visited 1 times, 1 visits today)