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 #10: On Remix, Snowpack, Rome and Web-vitals

The never ending flow of innovation is what I love about the web. There are so many great ideas! In the past few months a lot of innovation happened and in this weekly digest I want to share all those new projects that I am tracking. 

Continue reading “Weekly Digest #10: On Remix, Snowpack, Rome and Web-vitals”

Learning Path: Getting started with React

Not long ago I started learning React. I have more than 10 years of experience using JS and before React I was actively coding in first wave generation web frameworks (like knockoutJS) and starting to get a grasp on components architecture (but using KO components + web components). Today I am coding entirely in React (both at work and for personal projects) and it’s been great. I love the community, there are a lot of projects & learning resources and I also found React to be a fast way of creating web applications. 

In this post I want to share some resources that helped me learn React and I hope they are useful for anyone starting out there. 

Continue reading “Learning Path: Getting started with React”

Weekly Digest #9: Everything you need to know about Deno

TL;DR: Deno is a new ECMAScript based runtime (like NodeJS) created by Ryan Dahl (who also created NodeJS). It brings a lot of improvements to nodeJS: secure by default, TS default support and built-in utilities (dependency inspector, code formatting, bundler, etc).

Deno 1.0 was recently released and today I will give you all the resources you need to get yourself started.

Continue reading “Weekly Digest #9: Everything you need to know about Deno”

Tip: list NPM scripts

NPM scripts are super popular these days and they are usually the main way of executing tasks in any JS repo. The challenge is that there is no standard and every project will have different options. In this quick-tip I will show you how to list scripts from the terminal.

Continue reading “Tip: list NPM scripts”

Debugging IE11 with VirtualBox

IE11 is still alive and a lot of us have to maintain support for it in our web apps. There are 2 things I never like about issues in IE:

  1. It is hard to setup an environment.
  2. The dev tools are not as friendly!

I don’t have a solution for item #2 but today I will share how I use VirtualBox to always have a setup available! It removes the friction and helps with my predisposition to fix this edge (no pun intended) cases.

Continue reading “Debugging IE11 with VirtualBox”

Weekly Digest #8: On building games

It has been always in the back of my head to develop some games. A while back I developed an android game called Drink or Dare with some friends, but that’s about it.

Today, I want to share a list of resources I have been bookmarking to help me develop games.

Continue reading “Weekly Digest #8: On building games”

Testing VSCode Extensions with Cypress and code-server

Recently I started working on a Visual Studio extension: a dependency visualizer for js/ts projects (still in early alpha). While working on it I started digging on how to test extensions.

Visual Studio has a nice setup to do unit testing but I was looking to go further. I wanted to do some BDD and define test cases closer to my acceptance criteria.

So, I ended up playing with Cypress and setting up a way to test extensions E2E. There are 4 steps involved in this setup and I’ll explain in detail how to do it.

vscode e2e
Continue reading “Testing VSCode Extensions with Cypress and code-server”

Weekly Digest #7: On Javascript books

Whether you are learning JS from scratch or have been working with it for a while now, I believe you will find great value on the following list of books.

js-books

I have read lots of them and some are still in my backlog but every-time I learned something new out of them.

Here is the list:

Continue reading “Weekly Digest #7: On Javascript books”

Create Quick & Stunning graphs

As software developers communication is a key skill. We not only communicate with code, but also we document, share and present ideas on a daily basis.

Personally I take pride in preparing documents, diagrams and presentations to share architectures, processes, designs and ideas. I sometimes tend to spend more time than needed 🙂

I want to share with you my favorite tool I use to help me create these assets.

Continue reading “Create Quick & Stunning graphs”