DEV Community: Christophe Anfry

The hard part of learning programming

Christophe Anfry — Fri, 21 Jul 2023 12:21:07 +0000

Intro

To learn to code and to enter into this programming world is something very exciting that attracts a lot of people. The popularity of this sector and the good financial situation that it brings, motivate many people to try it out and sometimes to change life. There are many ways to reach this goal (University degree, Bootcamp, self-taught...). In this article, I'll talk about the self-taught part as it's the path I've chosen. It depends a lot on the personal situation of each one. I will point out the difficulties that I've faced and that I'm still facing, because you have to know, IT IS NOT EASY. I'll end this article with some recommendations, and the satisfaction reached that this world will bring you.

The most challenging parts

Where to start?

It's obvious but just before starting you're already challenged. Where do I go? Which sector (web development, data analysis, software development, gaming development...)? For some people, it can be hard to answer this question because they don't really know what they want to do.

Which programming language?

Once you've decided on your programming orientation, now you have to decide which language to choose. This is a very tricky part because nowadays you have a huge amount of languages, frameworks, and tools, that just make the decision very hard to take.

Which Youtuber to follow? Which book to buy...?

Depending on your choice of how to learn (following tutorials, reading books or blog articles), here again, the amount of resources is incredibly huge and you'll find different opinions or different ways to teach that will make you lost.

Tutorials hell!

Starting learning with tutorials can be a good option. Things are well explained (not always), and you follow building (the app, the game, the website...) on your computer ending up with a finished project, thinking that you understand everything. You can end up following tons of tutorials and have the impression to grow, but when it comes to being alone in front of your computer wanted to build something by yourself, you realize that you don't know anything and you don't even know where to get some help or to find answers.

Get into the community!

An important part that you'll hear or read, is to get into the community via social networks (Discord, Twitter, LinkedIn...). But you've just started, who's gonna follow you? Who's gonna answer you? You're a newbie and think that you have nothing to bring to the community.

Impostor syndrome

This is also something you will hear or read a lot. This is the fact that you don't feel good enough to answer someone who needs help, apply for a job or simply build a project. I think that every developer has been through it.

Failure, bugs, errors...

Maybe it's hard to believe at the beginning, but most coding is to fail. Don't imagine that engineers or experienced developers just write everything on the first try and it works perfectly. The purpose of programming is to solve issues or problems. You have to accept that most of the part will be to face errors and as a good developer, you'll have to solve them.

My personal experience

I feel comfortable talking about that because I've been through all the situations above and for some parts, still in it. I did all the possible mistakes that a beginner can make. I've learned different languages at the same time(php, python, swift), not finishing a course and jumping to another one, and stopped coding to go into the web design world. Of course with already 2 children and a third one on the way, you don't have a lot of time and you get lost and overwhelmed very quickly.

Then I decided that I only wanted to code. I thought I knew JavaScript enough to try React. Following tutorials you feel professional and you impress people around you. But one day I said “Now I’m gonna build something by myself”, and you guess it was a disaster. So I started learning a bit deeper JavaScript because that's what React is all about. Then I get some confidence but was still jumping too quickly into something else(too much passion, and a will to learn everything). So finally a few months ago I took the best decision of my life, to learn the principles of programming by taking the Harvard cs50 course (link down below). I’m finishing the course and doing my final project. You learn very low-level programming principles and languages such as C and you jump into Python and SQL. You can’t imagine the benefits I got doing that, even if I was learning new languages, it helps a lot to understand more JavaScript or React, state management, databases…

Now, I feel so comfortable when I re-use JavaScript, few days ago I’ve just refactored my website applying the data structure I’ve learned. In my final project, I’m still facing issues, but I can solve them by myself because I understand where they may come from and what I have to achieve to solve them.

Recommendations

Of course, there are a lot of things to learn. My first advice, no matter the language you choose or the support you use, learn the fundamentals first. This is something hard to assimilate when you start because you have the feeling that what you're learning is gonna be useless for what you want to do. But not!!! To learn the fundamentals and understand what programming is all about, is the best start. For web development, as was my case, learn HTML and CSS (if you want to do web development you must know them) or as I did very late, learn first a little bit of computer science, algorithms and data structure. Build some little projects and get confident using them. Then learn a programming language, Javascript or Python, at the beginning, are very solid choices. At this point knowing the fundamentals make it much easier to learn any programming language.

Here are my best choices for free:

Harvard cs50 course to learn the principles of programming from the most prestigious University in the world. I'm finishing this course. I wish I started with it. Very difficult and challenging course, but it gives you a strong understanding before jumping into something more concrete.

Free Code Camp for almost anything (Html, Css, Javascript, Database, Data Analysis and so much more). A way to learn while doing on your own, and get final certification.

The Odin Project gives you very deep explanations of the concepts of web development, and multiple projects, that will fill your portfolio.

And a paid one:

Udemy where you can learn anything that you want.

Then, don't make the same mistake as I did to jump directly into tutorials that just give you the impression to understand and to be able to build something. Go to learn by doing. Doing that you just forget the tutorials hell. I don't say that you can't use tutorials, but follow them and make your own project alongside, with your own data and your own UI. Or choose ones that are beginners course with explanations. On YouTube, I recommend Traversy Media and Dave Gray.

Regarding social networks and the community in general, this is the best community I've ever known. You'll always find someone ready to help you, to encourage you, to promote you. I've used Twitter, selected my topics and started following what I was interested in. Share your experience day after day (what you're learning, what is your next step, what are the difficulties you're facing...) and you'll see that you'll be part of the community without any effort. Don't expect thousands of followers, go little by little. Discord is a good place also to find the topics that you want and you can chat with the community where you'll find help, advice and knowledge.

This is what you have to do in general, one step at a time, learn one thing at a time, and make little wins that will push you to continue. If your expectations are too big (at the beginning) and you're impatient, you're gonna fail.

The best advice I can give you is to not be ashamed of your skills and don't be afraid to ask when you don't know, no one is gonna judge you as a beginner. Believe in yourself, and show your projects, your determination, and your points of view. The best way to grow and learn is to build, share and teach(I say teach because it's the best way to be sure that you know something, explaining or teaching to someone). And this redirects me to the wonderful community I've met, following James Q Quick and his Discord server LearnBuildTeach. Without this community, I would have probably quit, but they give me inspiration, motivation and also a goal to achieve. That’s also why I’ve created this blog, to share my experience and maybe I can help someone find his way as a developer. It’s all about learning learning learning, building building building and teaching teaching teaching.

Don’t lose your passion and your motivation, we’re and we’ve all been in the same situation. But the rewards and the personal satisfaction are priceless.

Wish you the best in your process, let’s connect together and make this community bigger and stronger.

STYLING YOUR PROJECTS

Christophe Anfry — Thu, 06 Apr 2023 07:12:10 +0000

Intro

CSS, What is CSS? If HTML is the skeleton of the human body, CSS is the skin, the color of the eyes, the haircut... You can't pretend to build websites or apps without knowing CSS. But there are many different ways to add styles to your project (writing vanilla CSS, using SASS which is an extension of CSS, or using frameworks like Tailwindcss). You can compile your CSS with Postcss (for example in your webpack project), or you can use libraries like Bootstrap, ChakraUi, Mantine etc... In this article, we're going to talk about using vanilla CSS, SASS and Tailwindcss. Why only those 3? Because there are my most used ones. Keep in mind that you'll have to start anyway with CSS all the other options will bring you more flexibility or options but will work if you understand CSS.

CSS

First of all, if you are a beginner with CSS and want to learn it, here are some links to great ressources:

What I like about CSS and I also strongly recommend to you, is the possibility to name your classes and/or your ids with a very clear and descriptive name. You can’t be lost if you clearly describe what the class or the id is for:

Here we have a very clear description of what these elements are for. It becomes easier when you are in your CSS files to style them.

How do I start my CSS files ?

Like in every language or framework or tool, you have some conventions or/and best practices, that help you, to learn and get used to applying, sharing your work or understanding the work from other developers. It doesn’t mean that THIS IS the way to do it, but it’s the one used by convention as I said, that you’ll see a lot in different articles or tutorials. For example I like to start my CSS file like that:

@import url('https://fonts.googleapis.com/css2?family=Chivo:wght@300;400;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Note that the ‘@import’ must always be at the top of the file. Here I use it to import my font from Google Fonts. Then I select all the elements and get rid of the margin and the padding, so I can apply them myself without any default value from the browser (even without specifying the margin, the browser always have a small default one). Finally I put the box-sizing to border-box, so my width and height will include any borders or padding of an element, instead of adding them.

Variables

You can use variables so you don’t have to copy the same properties over and over, and when you want to change a color, for example, you only have to change it once:

:root {
  --primary-color: hsl(140, 55%, 60%);
}

button {
  background-color: var(--primary-color);
}

Animations/Effects

CSS is very powerful and maybe sometimes underrated. For example, with css, you can create animations, effects, and style almost anything that you want. You will be amazed to see how Kevin Powell can animate everything that he wants only with CSS. Most of the times you don’t even need Javascript for your animation, few lines of CSS can be enough.

.button {
  animation: fade 0.9s ease-in-out;
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

In this example the button will start at 0 opacity and fade in (during 0.9s) to opacity 1.

But you can also set it up like this:

.button {
  animation: fade 0.9s ease-in-out;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

For the effects, it’s the same thing you can almost do whatever you want. Target your inputs or links as follow and add styles for a better user experience:

input:hover
input:focus
link:active or button:active

You can animate borders, svg paths, scrolls, pages, blocks of elements, images, box shadows, opacity… You can scale, rotate, transform, move (left, right, up, down), use blending modes…

And the most important thing is that CSS is responsible of the responsiveness of your projects using the @media tag:

@media screen(min-width: 1024px) {
  h1 {
    font-size: 4rem;
  }
}

Finally 2 features that I advice you to keep in mind are the calc() method and the flex-grow property. Most of the time you will have a header in your project, and you want your main section to take all the available space without having to scroll (100vh). In this case you have you have these 2 options:

Using calc() method:

header {
  height: 160px;
}

main {
  height: calc(100vh - 160px);
}

In this situation I define always a height for my header so my main, with the calc() method, will have the height of a 100vh(all the window height), but subtracting the header, and so, no scroll bar will appear. If you don’t do it the size of your page will be 100vh + 160px of the header.

Using flex-grow property:

.container {
    display: flex;
    flex-direction: column:
    height: 100vh;
}

header {
    height: 160px;
}

main {
    flex-grow: 1;
}

In this case, I added a container that wrapped the header and the main with a display set to “flex” and “flex-column”. So, it doesn’t matter the size of the header, the main tag set to “flex-grow: 1” will take automatically the available space that is available to fill the full window.

Conclusion

My conclusion will be like an advise. Go deep into CSS and all of its possibilities, and take the time to discover and learn what it’s capable of. I don’t say that you have to know everything because it’s impossible, but be curious and just be aware of what CSS offers you. You have a ton of resources on the web to find all the informaiton needed. More you’re gonna know CSS and more you’re gonna enjoy using other CSS tools or frameworks, to make your website or apps unique and with an amazing user experience.

SASS

SASS is CSS version 2.0 or as it’s said on their website it’s CSS with superpowers. At first glance it looks the same, I mean you can write full vanilla css in a sass file without any problem. The difference is that sass compile your css before being able to apply it. You have different ways to compile your sass file, for development I simply use the VsCode extension “Live Sass Compiler”. If you use frameworks, check out their respective documentation on how to implement Sass.

I like to use Sass when I have designed a project first. It helps you prepare your Css in advance and keep it well-organized before even jumping to the code. It’s a bit of boilerplate work but when you have it set up your styling will go much faster. It will also give you an easy way to share design within and across projects.

This is an exemple of what the Sass folder structure looks like. You can be scared seing that but, let’s explain it. First you create a style.scss file, and when it’s compile (following the different options to compile) your output (in this case the output i’ve choosen from the VsCode extension) will be in a folder called css and the file will be style.css with a map file. The map file is very useful and I really recommend it as it tells you in which scss file you have an error. The style.css is the one you link in your html file (not the scss one).

I like to separate my different styles with the categories of above:

“globals”: some generics styles like the _boilerplate one (in order to export and import your files you have to write them with the underscore '_'):

@use '../util' as u;

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: u.$bg-color;
  font-family: u.$font;
}

So here I can import everything that I want with @use and can call it as I want “as u”.

“layouts”: here you can define your generic styles for flex or in this exmple grid:

@use '../util' as u;

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: u.rem(40);
  width: min(100%, u.rem(1000));
  margin-inline: auto;

“util”: used to put functions, colors, font styles, breakpoints…:

@use 'functions' as f;

// Create SASS map
// Breakpoints: 700px, 900px, 1440px

$breakpoints-up: (
  'medium': f.em(700),
  'large': f.em(900),
  'xlarge': f.em(1440),
);

// Create Mixin. Mixins allow you to define styles that can be re-used throughout your stylesheet
@mixin breakpoint-up($size) {
  @media (min-width: map-get($breakpoints-up, $size)) {
    @content;
  }
}

// breakpoints: 699.98px, 899.98px, 1439,98px
$breakpoints-down: (
  'small': f.em(699.98),
  'medium': f.em(899.98),
  'large': f.em(1439.98),
);

Here I create breakpoints functions so I can use them in all my shtylesheets. You will see what “functions” is in an example below. So from there I can re-use my breakpoints in my “_typography” file:

@use '../util';

p {
  @include util.breakpoint-up(medium) {
    font-size: util.rem(20);
  }
}

Another very important part, is to define a function that will convert pixels into rem or em units. But why? A lot of people are concerned with some visual disease and in order to see correctly on screens they bump the default font size up or down (not zoom).

They literally change it from the browser setting. If your units are with pixels they won’t be affected by this change (for example if your font-size is 16px, it will remain at a fixed 16px even the default browser font-size has changed). That’s why (it’s my opinion) you must define your sizes with rem or em units (also in CSS or any other frameworks) for these people to have a correct scale of all the elements when they bump it up or down. In Sass you have built-in modules to make things easier and create useful funcitons:

// In util/_functions.scss
// Here I import the 'math' module
@use 'sass:math';

@function rem($pixel) {
  // If $pixel has no unit, Divide $pixel by 16 to return rems
  @if math.is-unitless($pixel) {
    @return math.div($pixel, 16) + rem;
  } @else {
    // Else, throw error
    @error 'value should be without unit, only numbers';
  }
}

Here we can see that I don’t have to specify any units, I just put the pixel value and it will turn it into rem units. If I make a mistake I will have an error and with the .map file, I know exactly where the error is. Now to use it, I add @forward in an index.scss (in the same folder) and I can import it anywhere else using @use:

// In util/_index.scss
@forward 'functions';

// In globals/_typography.scss
@use '../util';

font-size: util.rem(18);

The last thing I want to show is nesting. Very simple instead of using:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}

I can simply do:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
  }
}

These are some few examples of a huge amount of possibilities that Sass offers you. If you want to learn Sass I highly recommend 2 Youtube Channels:

*I took example from her amazing tutorials to write this part of the article.

Conclusion

Sass is an amazing and very powerful Css extension that prepares everything you need before starting to code a single HTML line. What I like about using this extension it’s when I write HTML I can already see all the styles displayed correctly and responsive. Sass can be very useful, for example, if you working with a designer, and little by little you can prepare the styles for the project (get all sizes of the buttons, the headings, the different breakpoints, the displays, the fonts, the colors…), you don’t have to wait the design to be finished to start coding, you’ll have a well-organized folder and style structure.

Tailwindcss

Now let’s talk about my favorite one: Tailwindcss. To install it follow These instructions

Tailwindcss is an amazing css framework, that makes your developer experience faster and easier. We’re gonna talk about 4 different topics:

Syntax
Tips and tricks (including VsCode extensions)
The dark mode
tailwindcss/typography plugin

Syntax

Tailwindcss works with classes that you have to add to your HTML tags. The classes are named to understand easily the CSS property. For example

align-items: center;

becomes:

items-center

All these different classes only have to be separated by a space:

class='font-bold text-white py-4 align-center'

In this example my font is bold, my text is color white, the padding on the y-axis is 16px (1 unit in tailwind is 4px), and my text is aligned to the center.

It can be difficult to get used to it at the beginning, but after a few tries you understand that you can go directly to the value that you want, quickly, because no CSS syntax, and without changing files, it’s directly on the HTML tag you want to target.

You’ll find a lot of built-in classes, but you can still use arbitrary values and it works like that:

class='text-[16px] max-w-[90%] p-[2rem]'

Tips and tricks

As you can imagine an HTML element can contain a lot of classes and sometimes it becomes very difficult to read. Thanks to a wonderful VsCode extension you can hide the classes for better readability. It is called Inline fold. Download it and start using it.

If you use Tailwind you must also use the the Tailwind IntelliSense Extension, to help you auto-complete your class when start typing.

In Tailwind, you can customize everything you want. For example, the screen size, you can define your breakpoints. I personally like to change the medium breakpoint (md). It can be useful if you work with a designer, and who has slightly different breakpoints than the Tailwind default configuration, which you can find here.

To change the configuration go to the tailwind.config.js file in your project and add the screens object with the values that you want:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
    screens: {
      sm: '640px',
      md: '803px',
      lg: '1024px',
      xl: '1280px',
    },
  },
  plugins: [],
};

Another useful tip is when you want to combine a class with the conditional statement and built-in class in the same tag. I’m using it every time when set up dark mode for example, which I’m gonna talk about later:

className={`h-full ${isDarkMode === true ? 'dark' : ''}`}

Here my tag has a height of 100% but also a conditional statement that if isDarkMode is set to true it will have the class of dark, if set to false no class will be assigned.

My final tip will be that you can specify opacity when defining colors in Tailwind:

class='bg-slate-800/80'

In this example i’m using a built-in color but I’m adding an opacity of 80%.

Dark Mode

As you’ve already probably seen almost everywhere the possibility to toggle a dark or light theme has become very popular, to give a better user experience. It can be a bit tricky to set it up with CSS, that’s why Tailwind allows us to make it so easy. And with the conditional statement you’ve just seen above, I'm pretty sure you’re gonna use it almost every time (can be very nice for your clients, to tell them that you can add this feature if they haven’t asked you already).

You have different ways to set it up:

Adding directly the class “dark” variant in your tags and will automatically toggle the dark mode following the system preference theme:

class='dark:bg-slate-900'

Toggle it manually. That’s the one I use so the client can decide to toggle it itself, when he wants. For that you just have to add the following line in your tailwind.config.js:

module.exports = {
  darkmode: 'class', // ...
;
}

Then define the variant as the first method:

class='bg-blue-300 dark:bg-slate-800'

How easy it is? And this is what I love about tailwind, is the set of amazing features or different syntax that make your developer experience so enjoyable.

Tailwindcss/typography plugin

And now to finish this article I would like to talk about a fantastic Tailwind plugin for those who are working on markdown files. When I start using markdown files, my question was, how do I style them? Must it be always black text color on a white background? So again, tailwind makes it so easy with tailwindcss/typography plugin.

Let’s set it up:

npm install -D @tailwindcss/typography

Then you have to add it to your tailwind.config.js file:

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

Finally just add the “prose” class to your tag that will display your mardown file. This is the example I’ve used for this blog using Astro:

<article
      class='prose prose-base md:prose-lg lg:prose-xl prose-a:text-cyan-500
prose-headings:text-white prose-p:text-gray-300 hover:prose-a:text-cyan-600
prose-strong:bg-cyan-100 prose-strong:text-gray-900 my-24
prose-pre:bg-white max-w-none h-full'
    >
      <slot />
    </article>

In the same way as the tailwind syntax, you can make your article responsive with the “md:prose-lg”, which means that on a larger screen, my font size will be large.

If you want to learn Tailwind, I strongly recommend the FreeCodeCamp tutorial by Guillaume Duhan

Conclusion

Tailwind is by far (it’s of course my opinion, with my needs and my personal preference), the most powerful tool to style your projects. Easy to use, fully customizable, well documented and a huge community. It also has all the VsCode extensions or plugins to let you adapt what you need and make your work faster and easier.

Outro

Styling is a huge world on its own. The possibilities are tremendous, let your imagination talk, and there will be a solution to make it real on your projects. There is no better tool or framework, it only depends on what you like and what you need. If your method makes you turn projects to life that’s fine, don’t feel like you have to use a framework if you just love CSS. The exact thing is that you must know CSS before using a framework of any kind, as I said earlier in this article, taking the time to read a lot about CSS, through documentation or articles, is the only way to reach the goal when the user experience is enjoyable. You can be a very good programmer if your project doesn’t look good, the client won’t be satisfied and the users won’t enjoy it. I conclude with a last advice, simple things are most of the time the better ones. Don’t try to put all the CSS features in one project, be subtle and keep it cleaned-looked.

PRESENTATION

Christophe Anfry — Thu, 06 Apr 2023 07:03:12 +0000

Intro

Hello everybody, welcome to my blog.
This is my first real full project in order to become a front-end developer. I know that starting this career is tricky and requires a lot of dedication.
Along the way, we will discuss all the topics we're gonna find (Frameworks, GitHub, resources...). First, let's talk about this project.

First, I wanted to create a blog using Nextjs, but after failing so much trying to render my markdown files into HTML, I've chosen to use Astro.
Following Youtubers or reading articles I saw that markdown files are very popular for static sites (more specifically blogs). And Astro gives an amazing built-in implementation of markdown files(.md, .mdx).

This is the best way for me, and probably for you, to check my skills and my knowledge, and get used finding the answers to my issues, doing things, creating content, and not following a tutorial. Tutorials are really good to check for specific topics, and if you follow a full tutorial (a full project of several hours) make sure to follow with the documentation opened, so you can try on your own before watching the solution.

I really want to grow with your support and your feedbacks, so you can grow with me, learning new things and creating more advanced sites or apps.
I'm very excited about this challenge and this goal, and I hope you are too.

Let's jump into the project

What I use ?

Terminal

You will see a lot of different manners to use a terminal (the default one on your machine, IDE's integrated terminal, 3rd party terminal...). I prefer to use my default terminal because it does exactly the same thing so why do I need another one? If you're not familiar with the terminal (or Command-Line-Interface or CLI), I advise you to get used to working with it, because it's a fast and useful tool. Brad Traversy has a very nice video on this topic, here.

Visual Studio Code

For me the best code editor on the market, maybe the most popular one. From Microsoft, this free code editor gives you the possibility to work in the best condition. Very customizable and with an infinite number of extensions and settings, to let you work as you want and in the language that you want. Easy to install, easy to use and has a huge community around so you will always find the help you need. Check out the documentation. A lot of resources available regarding VScode (James Q Quick, codeSTACKr and much more)

Astro

Astro, is an amazing framework to build faster websites. Different from the other popular SPA (Single Page Application) frameworks like Reactjs or Vuejs, with his island architecture. Everything happens on the server as much as possible, as a MPA (Multiple Page Application). I let you discover the deep explanation of these concepts, here. Want to try? From your terminal in the folder of your choice, you just have to type:

npm create astro@latest
# or
yarn create astro
# or
pnpm create astro@latest

Then you start the application:

npm run dev
# or
yarn dev

Congratulation! you've just run your first Astro app.

Taildwindcss

A wonderful and popular CSS framework. I love CSS and Sass because I like to target my tags with descriptive names (you'll have to know CSS before jumping into a framework), but when you try tailwind you just love it because it saves you a lot of time and at the same time you can really customize everything. I admit that it can be a mess because your HTML tags can contain so many classes, but you get used to it and it works fine. What I love is how easy is to make your site responsive in just one line. See the exemple:

"className='text-base md:text-xl lg:text-2xl"

In this example, the text in my main element will start with a size of base (16px) on small screens. When my screen reaches the size md: (768px) my text grows to reach xl (20px), and finally at lg: (1024px) my font-size is 2xl(24px). How easy it is !!👌. Check their documentation.

What's next ?

From now on, I'll post articles on specific topics and not-so-general ones so we can go deeper into them and be more precise.
This first article was an introduction (of course it's the title), but I hope you've found it helpful anyway with the will to see more.

"Always code with love and passion"

Follow me on Twitter, Check my GitHub.