One of the most common mistakes I noticed by reviewing websites is that many people don't optimize their images.
Let's take a look and why should you optimize them and how you can do it efficiently.
Let's start! 🧵
Images are one the most important parts of a website. But unoptimized images file's size is often very big.
One simple image could be 2MB, imagine if you have 10 of them. Now imagine someone with really slow internet trying to access your website. It will take forever.
Let's put an example of how we can optimize it.
This is a screenshot of my new portfolio (still under construction), when I take the screenshot, it's a .png file and the size is 539KB.
Now we need to convert it to .webp.
What's a .webp file? Webp is a file format developed by Google to reduce the size of images without having to sacrifice quality for storage space.
One other option in this last website is changing the size, the image is too big. Let's imagine the maximum width that is gonna show on our website is 700px, so let's change the size on the options.
(I'm using the original image here)
So... what's the result?
The image file size is now... 17.12KB!
Quite a big difference from the 539.97 KB we started with.
Now imagine half a megabyte for each image of your website. Think of how much load time you can save.
If you want to check if your images are optimized, you can use PageSpeed insights.
Some people believe that you need to be a JavaScript master before starting learning React, and that couldn't be further from the truth.
You should know some fundamentals, and I want to tell you exactly which ones.
Let's begin 🧵
let and const.
This is the ES6 way of assigning variables, it replaces "var".
"let" is for variables that are gonna be reassigned in the future.
"const" is for variables that are not gonna change, you define them and you use them, but they have a "constant" value.
imports and exports.
A big part of React is reusability. You create a component (like a button), export it, and then import it on your other components without having to write it out again.
Git is a version-control system for tracking changes.
This allows you to save different versions of your projects and come back to them when necessary.
This also allows you to work in a team in a much better, organized way. ⬇
⭐ First steps.
On your project, your first command should be:
git init
This will initialize a new repository, this repository is a hidden folder called .git that tracks the changes made to files in your project and builds a history over time. ⬇