Tag: vanilla JavaScript

Lazy loading images with Intersection Observer

Images play a huge role in loading performance. Websites loading tons of images upfront can be paying a high price in terms of user experience. Based on google’s research 53% of mobile users abandon a site if it does not load in 3 seconds.

To avoid this issue, I am going to show you how to implement lazy loading in only a few lines of code!

Continue reading “Lazy loading images with Intersection Observer” →

Weekly Digest #1

  • Best practices on JavaScript modularity: when to use named exports, how to group code and what to avoid. Check JavaScript Module Best Practices.
  • Understanding the proxy pattern and adding that to your toolbox is super useful. In the past I have used proxies for multiple purposes (logging, performance, caching results). Learn more about JavaScript proxy in JavaScript Proxy Object Explained post.
  • Have you read “JavaScript: the good parts”? Check this article on The Magic Behind JavaScript Sintaxis Shortcuts to learn more about not so good practices (well except maybe ternary operator)
  • Planning to try all this out? Check this article on best online IDEs: 12+ Best Online Code Editors for Web Developers. I recommend Stack blitz (it is vs code online)
  • Let’s finish with some js basics. Here’s an article that quickly explains how to declare variables: JavaScript Variables: var and let and const. I tend to agree with the statements made in the article, const is your ally but there is one caveat that you need to understand. A value declared in a const cannot be mutated, but objects or arrays are always mutable constructs, so while you can declare an object or an array as a const it is possible to mutate its properties/items. It only won’t be posible to assign something else to that const!

Enjoy!!!