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.
Further Reading on SmashingMag:
- Why Coding Style Matters4
- The beloved Git Tower app is coming to Windows5. 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.
- A Comprehensive Guide to Font Loading Strategies6 by Zach Leatherman is the current best pocket guide on how to load fonts.
Tools & Workflows Link
- Mango7 is a new tool that uses git as it was thought: in a decentralized, distributed way. They achieve that by baking in IPFS8 to store git objects. I’m happy this is available now and I’ll be sure to try it with an upcoming project.
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 instead11.
- Nick Salloum shares how you can scale SVG graphics without scaling their borders12. 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-effectattribute, which for example can have the
- I already shared a couple of Service Worker resources but which one to choose when you want to use it? Likely the best option is to search for the suitable use-case in the Awesome Service Workers list15.
- A lot of projects nowadays have an infinite scrolling implemented. But most of these implementations lack certain details such as DOM recycling or scroll anchoring. The tutorial “Complexities of an infinite scroller16” shows you how to build this with solid code.
- Paul Irish shares quite interesting details on requestAnimationFrame Scheduling18.
- In a multi-part story about Web Notifications19, developers from The Guardian Mobile Innovation Lab share their experience and findings of implementing notifications into their news site. For each individual step, they explain what you need to do, can do and what can still be improved.
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 life22”.
- 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 fast23. Vanja Mimic shares how you can turn a project and deliver much faster.
- Chen Hui Jing wrote a piece on Strategies for Healthier Dev24. 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 donation25 or share this resource with other people. You can learn more about the costs of the project here26. It’s available via email, RSS and online.
- 4 https://www.smashingmagazine.com/2012/10/why-coding-style-matters/
- 5 https://www.git-tower.com/p/windows-beta
- 6 https://www.zachleat.com/web/comprehensive-webfonts/
- 7 https://medium.com/@alexberegszaszi/mango-git-completely-decentralised-7aef8bcbcfe6
- 8 https://ipfs.io/
- 9 https://ipfs.io/
- 10 https://ipfs.io/
- 11 https://marcysutton.com/links-vs-buttons-in-modern-web-applications/
- 12 http://callmenick.com/post/svg-vector-effects
- 13 http://callmenick.com/post/svg-vector-effects
- 14 http://codepen.io/callmenick/full/jryOjN/
- 15 https://github.com/TalAter/awesome-service-workers
- 16 https://developers.google.com/web/updates/2016/07/infinite-scroller
- 18 https://medium.com/@paul_irish/requestanimationframe-scheduling-for-nerds-9c57f7438ef4
- 19 https://medium.com/the-guardian-mobile-innovation-lab/web-notifications-introduction-news-on-lock-screens-ba0d685cb4e2#.y60mm017q
- 20 https://medium.com/the-guardian-mobile-innovation-lab/web-notifications-introduction-news-on-lock-screens-ba0d685cb4e2#.wyd7o6jbz
- 21 https://medium.com/the-guardian-mobile-innovation-lab/web-notifications-introduction-news-on-lock-screens-ba0d685cb4e2#.wyd7o6jbz
- 22 http://taylorpearson.me/change-your-location-change-your-life/
- 23 https://www.smashingmagazine.com/2016/07/how-we-started-releasing-features-twice-as-fast-a-case-study/
- 24 https://www.chenhuijing.com/blog/healthier-dev/
- 25 https://wdrl.info/donate
- 26 https://wdrl.info/costs/