Hi there, I'm Alberto,

a Front-End developer building cool websites and apps as contractor for Avallain and Warner Music Spain.

Front-End / UI developer with more than 15 years of experience. Expertise with CSS, JavaScript, React, GatsbyJS, JamStack, Headless WordPress and theme developing from scratch…

Blog posts (19)

Fito & Fitipaldis new landing page

As Warner Music Spain collaborator I have the chance to develop Fito&Fitipaldis new LP "Cada vez Cadáver" landing page (the design is not…

Higher-Order Components

A Higher-Order Components is a technique to reuse components, it's just a pattern to do a normal component but specificaly made to reuse…

Basic react Hooks

Hooks are a new addition in React 16.8. and allows us to write functional programming (with function component) instead of class oriented…

Composition vs Inheritance

React has a powerful composition model, and the React Team recommends to use composition instead of inheritance to reuse code between…

JavaScript Closures in 2 minutes

A variable in javascript can be global or local. A global variable can be done private using a closure. Closure can seems a difficult…

React Refs in a glance

React Refs provide a way to access DOM nodes or React elements created in the render method. In the regular dataflow, props are the way that…

Class component's lifecycle

The React lifecycle (based on v16.4.2) is divided in three main areas: mounting, updating, and unmounting. Mounting. The mounting phase…

Conditional rendering and List rendering

A quick answer in a interview would be something like: In ReactJS you can create components that renders different code depends on the state…

What is Prop drilling? and how to solve it using Context API

As we know, the props are the data we pass -or can access- from the top-level components to its child components. And, also we know that…

Diferences between function based and class based components in React JS

According to the official ReactJS documentation we can define React components in two ways: As a function or as a EC6 Class A function…

Showing the before pseudo-class of a hidden div.

Today I had to do figure out a way to show an automatic message on a hidden div (which had display: hidden), so the idea was that the user…

How to do a Progressive Web App with Gatsby

This 7th Challenge is about turning our Gatsby site in a RealProgressive Web APP. “Progressive web app” (PWA) is both a general term for a…

How to add a form in your Gatsby React site..

This Challenge is about learning to add React components to your Gatsby sites, and specifically adding a contact form with the Formik React…

How to use Gatsby Image API with markdown and static files.

Third Challenge on #100DaysOfGatsby Challenge is about performance: Auto-Optimize Images on Your Gatsby Site. You can just follow Gatsby…

How to make a list of tags in a Gatsby JS blog

This is a basic tutorial belongs to #100DaysOfGatsby Challenge. Problem: We have a Markdown basic blog system under GatsbyJS. We want to do…

Code block highlights for Gatsby ReactJS blogs

If you are using Gatsby as static website or blog, probably you are a developer. In that case, you will need code syntax highlighting to the…

100 days of Gatsby Challenge

Starting at 1st Jan, 2020 a Worldwide coding Challenge started: #100DaysOfGatsby Challenge. TO DO

Hello World

This is my first MD post file. I will do a new blog based in Gatsby and Markdown served via Github. This is an exercise based in…

Sorting a GatsbyJS-blog posts list with GraphQL

Problem. We have a list of .md pages to display in a page, and we want to show them in a certain order, usually, date. To show them, a basic…

2006 - 2021 Alberto Fortes. Coded with React JavaScript, GatsbyJS, HTML5, CSS / SASS, Grunt. | Cookies