Blog
- APIs2
- Analytics1
- CSS4
- Gatsby1
- Interview Questions1
- Javascript14
- NPM2
- Performance4
- React9
- Retrospective1
- Testing4
- Typescript4
- UX1
Testing with a Custom Render
January 13, 2021It's been quite some time for me using @testing-library/react that I can already get a sense of what's right to do and what's not. If you have used RTL before, you probably know that it exposes a render method. import { render } from '@testing-library/react' This method takes... Read more →
2020 in review
January 5, 20212020 hasn't been a great year in general. We have been stuck at home and we haven't been able to gather with people we care for or travel as we normally do. > This is why I want to start off this post by saying that I'm sorry for all the people who have lost loved ones. > Also... Read more →
Make Google Fonts faster
January 1, 2021Has it happened to you that when you load a website for a small period of time (in good network conditions) don't see any text? That's a really bad experience right? Fonts providers like Google Fonts have adopted the latest CSS good practices by applying font-display: swap; to... Read more →
React Testing Setup
September 6, 2020Testing your code is like having a lifesaver, everyone should have one. Here, I'm going to set up an environment of safety, one that will you the confidence you need to ship your React code in the best shape possible. > Let's assume you already have your React project setup and... Read more →
Animate SVGs with CSS
July 11, 2020I recently had to work around animating an SVG in a project I'm working on, and you know what? I really liked it, so I thought I would share it with you all. In the future, I will post the actual page where I worked on the animation, but at the moment it's secret 🤫. Let's sta... Read more →
Mocking HTTP requests with Mock Service Worker
June 12, 2020There is a lot of talk these days about if when you are testing your API integration you should be mocking your client (fetch/axios...etc.) or not. To answer your question, we want our tests to be as reliable as possible, so if they work as closes as they will do in real life,... Read more →
Understanding NPM Scripts
April 12, 2020Have you ever thought about creating your own command line tool? Well, here is your chance to create one for your project. What are NPM Scripts? NPM scripts is a simple solution to automate any repetitive tasks. For example, building your project, starting a server, minifying... Read more →
Using Google Spreadsheets as an API
March 26, 2020Sometimes getting a small side project up and running is difficult. Building your own database, backend and frontend takes a lot of time. I'm going to show you how you can make this journey easier and faster with Google Spreadsheets and its built in API, so you don't have to ca... Read more →
Mocking a Server Error with cypress
February 18, 2020When doing cypress end-to-end tests, it is very tempting to only be testing the happy path most of the time. The happy path, is the one we think users will follow, the ideal journey that will take a user from state A to B. But users have unexpected behaviour, or even worse, thi... Read more →
CSS Box Model
February 10, 2020When I do interviews for Frontend positions, I find myself very often asking the same question. > Can you tell me what the CSS Box Model is? And most of the time, I get either a wrong answer or a very confusing one. I feel like CSS Box Model is something every Frontend develo... Read more →
Detect color scheme with CSS
February 4, 2020Dark and Light modes are becoming increasingly popular. Today, many websites implement a switch that changes the color scheme from a light to a darker one and the other way around. Giving your users this option is very beneficial for accessibility, as some people experience he... Read more →
Tracking custom events with Google Analytics
February 3, 2020Google Analytics is the "to go" tool everytime we want to be aware of how many users are browsing our websites today. It's just what we are used to use, and it does its job pretty well. Analytics will show you tons of good metrics like page view, bounce rate, audience per locat... Read more →
Refactor your Gatsby website to use Typescript
February 2, 2020If you are a big fan of Typescript (like me 🙋♂️), and you have a Gatsby website, then you are in the right place. Here, I want to show you how to refactor your Gastby website to use Typescript. If you just want to see code, it's fair. Here is the change I made for this websi... Read more →
Avoiding complexity with Compound Components
December 3, 2019Over the years, the way we consume and create our React Components have changed considerably. I'm pretty sure, at some point this thought got on your mind when creating a component. > I'm going to create this generic component that we will reuse. And then as you add features t... Read more →
Use media queries with React hooks
November 24, 2019Using media queries with React is pretty easy nowadays. There are a lot of solutions out there, but the most popular one is react-media by the ReactTraining people. But today everyone wants to use hooks, so I'm going to show you how to recreate some of the react-media (they do... Read more →
How to break the rules, with conditional hooks
November 22, 2019If you have been working with hooks for a while now, you probably know there are some rules around it. One of them is, hooks cannot be conditional or called inside loops, neither inside nested functions. They need to be on the top level function scope. In this post, I'm going t... Read more →
Route to Next.js
November 15, 2019Tell me this never happen. You have a new idea of project, and then you start coding straight away. You need all sorts of things, Server Side Rendering because you want Google to pick up your content. Also, you want it to be fast, so you start to code split code, dealing with we... Read more →
useEffect and useLayoutEffect
October 28, 2019From React's 16.8 release, there has been quite a change in the way we use to write React components. In this version, the React team introduced Hooks, allowing you to share your component logic and not write a single class anymore. People reacted very well to this change and st... Read more →
Code splitting
October 18, 2019We live in a world where there are plenty of devices. They have different sizes, memory, cpu or even screen resolutions. Some are faster than others. But they all have something in common, they want to access the web and they want to do it everywhere. At home or outside, your us... Read more →
Understanding Optional Chaining
October 15, 2019Great News! Optional Chaining is a thing! But... are you ready for it? Do you know what does it mean? Do you know how to use it? If that's a no, hopefully, at the end of this post, you will perfectly know how to answer all these questions. What is Optional Chaining? Optional... Read more →
How to create your own Typescript library
October 12, 2019Creating my own Typescript library is being my life for the last months, so I wanted share my experience and the steps you should follow to create your very own. From my point of view, there are a lot of missing points on the Internet when you just want to start writing your co... Read more →
React performance with CSS
October 9, 2019There are a lot of different ways to do CSS with React, and the library itself is not opinionated on how you do so, instead, it’s you, the developer, who decides what to use. Reality is, that if you look for “Stying a React App” in google, it will come up with hundreds of artic... Read more →
Intersection Observer in action
October 25, 2017Intersection Observer? Whaaat!? That sounds scary! In this post I want to explain my journey through and use case for using Intersection Observer. I will also give you a brief overview of how you can get started. As the specification says… > The Intersection Observer API provi... Read more →
