Forem: St3l

GatsbyJs: Pros and Cons

St3l — Tue, 05 May 2020 15:48:51 +0000

Hello everybody,

I'll soon start to work on a static website project using Strapi for the back-end. But I wonder if working with Gatsby for the front-end is relevant. That's why I'm looking for people's opinion/experience of Gatsby because I can't figure it out by myself...
So, if you could help me to make my choice, it would be great :D

Cheers!

A glance at...

St3l — Thu, 30 Apr 2020 20:02:48 +0000

Not so long ago I started to code...

One of the main issues I had was to find short posts with simple examples, just to have a general idea of what I was trying to learn.

Knowing that my learning process is understanding the general idea of a concept and practising first, then diving deeper into it,I was often confronted with long and too complex posts. I'm not saying they weren't good, but they were too advanced for my level and made me raise too much questions instead of resolving the few I had - which usually were 'What is this concept ?', 'How does this concept works ?', 'How can I use it ?'.

This is why the posts 'A glance at...' will try to answer at these questions, with simple examples, hoping it will help some beginners :)

A glance at...

...useEffect

✌️

A glance at useEffect

St3l — Thu, 30 Apr 2020 19:57:24 +0000

What's useEffect for ?

useEffect is a hook you'll need if you want to handle side effects in a functional component.

Side effects are code running after React has updated the DOM.

An example please ?!

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [count, setCount] = useState(0);
  const [style, setStyle] = useState("#A5CE86");

  const change = () => {
    setCount(count + 1);
  }

  const color = "#F98E72";

  useEffect(() => {
    setTimeout(() => {
      setStyle(color);
    }, 2000);
  }, [color]);

  return (
    <div>
      <h1 style={{ color: `${style}` }}>{count}</h1>
      <button onClick={change}>Change!</button>
    </div>
  );
}

Ok... what do we have here ?

This code shows a counter. Each time you click on the button, the count will increase by 1. And there's a little color changing side effect...

1.The component is shown to me for the first time:

2.After the DOM is rendered, my component run the side effect... :

useEffect(() => {
    setTimeout(() => {
      setStyle(color);
    }, 2000);
  }, [color]);

3.... and change the value of my style state:

4.I click on the button:

 <button onClick={change}>Change!</button>

5.It increases my state count by +1:

 const change = () => {
   setCount(count + 1);
 }

6.React update the DOM :

7.After the DOM is updated, my component does't run the side effect because I told him to run it only if color changed, by adding a dependencies to useEffect:

  useEffect(() => {
    setTimeout(() => {
      setStyle(color);
    }, 2000);
  }, [color]); //my dependency

You can add a console.log into the setTimeout() method and run the code. You will see that React run the side effect only one time thanks to the dependency. Now try to remove it, and you will see the side effect is running every time my component is updated.

What now ?

It was a glance at useEffect. To dive deeper into this concept have a look at:

Hope you enjoyed this post and will close this window with a better understanding of useEffect.

✌️

Self-taught? Your strengths and weaknesses

St3l — Mon, 26 Nov 2018 15:27:38 +0000

Hello everyone !

Today I was thinking about an update of my resumé and I started to ask myself, as a full self-taught, what are my three strong points and my three weak points. I am curious to know if you share with me the same strengths and weaknesses :

⭐️ For those who are self-taught, what are your strong/weak points ?
⭐️ And for those who worked with self-taught, what was their strong/weak points ?

And if you are an employer, if you have two similar candidates, which one would you prefer ? The academic one or the self-taught ?

My strong points :

Fast (and good?!) learner : I don't know if it's because I am self-taught that I learn fast but I know that helped me a lot. When I started my first job I didn't coded a lot with JS and I had to learn how to code with React JS within two months.
Independent : Being self-taught helps you to learn to find informations, documentations, and answers to your problems by yourself.
Being self-taught shows your motivation and curiosity : It is obvious that you are motivated and curious, otherwise you would not be here ;)

My weak points :

Not being surrounded by a large community of developer : It is complicated (not unrealizable at all!) to find a community of developer to exchange.
Not having the good vocabulary : Sometimes when I speak with another developers, they asked me if I know about this or that and I say "no". But when they explain me what it is, I realize I know this concept/subject but I didn't know how to name it. I think this is because when you learn by yourself you don't communicate enough about what you learned, you don't memorize correctly all the vocabulary (having few years of professional experience help to naming correctly things).
Independent : This is also a weak point. Indeed, you are used to do everything by yourself and you forget that sometimes, asking for help it is essential to be productive and to improve your knowledge...

What did you have to learn ?

St3l — Wed, 21 Nov 2018 12:25:34 +0000

What did you have to learn for your job but did not interest you? How did you learn it ? Do you enjoy this knowledge now ?

A little trick to left align last row's items with Flexbox

St3l — Tue, 20 Nov 2018 21:29:13 +0000

For my first article here I wanted to share with you a little trick I have learned few months ago.

For those who, like me, loves working with Flexbox, you have probably encountered in the past the problem of items in the last row who don't behave quite well. Meaning by that, they don't have a left align :

Very unsatisfying isn't it ?

Well, there is a very simple way to have a perfect left alignment with a simple html property: aria-hidden

This property will indicate that the element as well as its children will not be visible nor perceivable by the user or the reader. For more informations you can go on the W3 website .

So here some simple html to create those beautiful blue squares up there :

As you can see I have six empty divs to create the squares and below three <i> tags with the aria-hidden property sets to "true".

These <i> tags correspond to the square elements I might need to complete the last row. To be clearer, my rows are made up of four elements. If you don't know how many elements you will have in your rows, you can however know that you will have at least one element in the last row. So, you'll need as many <i> tags as there is places in your row, minus one.

Now, we need some css :

Here, I gave to the container of my rows different Flexbox properties including justify-content: center. But this trick works with others values like space-between or space-around.

Look at my items. I gave them a width and an height of 250px as well as margins of 20px.

The important thing here is that you have to give to your <i> tags the same width, height and margins as your items.

And finally, TADAAA!!! A perfect left align ;)

I am also an art historian. Ask Me Anything!

St3l — Tue, 20 Nov 2018 12:15:02 +0000

I started my adult life with Art History. I am now a front-end developer. And guess what ?! Those two worlds are not as different as we think ;)