Forem: Gaël Thomas

7 Tips To Become a Better Programmer

Gaël Thomas — Sat, 26 Aug 2023 13:52:07 +0000

Becoming a better programmer is a journey of continuous learning and growth. Here are 7 tips to help you level up your coding skills and thrive in the tech world:

1. Practice Consistently
Set aside regular time for coding practice. Consistency is critical to improving your skills. If you practice one hour daily, it's 30 hours of training at the end of the month and maybe one or a few projects built.

2. Learn by Doing
Apply what you learn by building projects. Hands-on experience solidifies concepts. When you tackle a new idea, build a mini-project using it (e.g., I'm learning CSS, I'll make a stylized version of my CV).

3. Read Code
Study other people's code, whether open-source projects or tutorials. It's always good to understand different coding styles and patterns. Everyone has a different approach to solving a problem, which will help you learn more.

4. Embrace Challenges
Don't shy away from complex problems. Tackling challenges helps you develop problem-solving skills. From my experience, I learned the most when I struggled. The main reason is that I spent a long time investigating the issue, which taught me many other concepts to solve my problem.

5. Use Version Control
Git and platforms like GitHub are essential. Learning version control helps you collaborate effectively. That's also a base skill when you want to work in a company. Everyone collaborates using these tools, and it's an efficient way to share code.

6. Stay Curious
Technology evolves quickly. Stay curious and keep exploring new languages, frameworks, and tools. Don't become obsessed by jumping on each new framework, but be aware of them. There are many YouTube channels, podcasts, and blogs that can help you to do that.

7. Seek Feedback
Share your code and projects for feedback. Constructive criticism helps you improve faster. That's also a mechanism enabled by Git with the review process (used in Open-Source and companies).

Anything to add? 🚀👇

Join me on Twitter for daily content to help you unlock your Web Development skills! 🚀 Let's learn & grow together! 📚

5 Not-So-Typical React Libraries for an Outstanding Project

Gaël Thomas — Fri, 04 Aug 2023 01:35:39 +0000

Hello, fellow web developers! 🚀

It's easy to get swamped with the vast sea of React libraries. While the React ecosystem has many UI component libraries (and don't get me wrong, they're great!), sometimes we want to find something different. That's why I gathered these five libraries.

And the best part? You can combine these libraries and build a project out of them. Dive in with me!

Note: For readability purposes, I split each library into three succinct sections: what is it, main functionality, a use-case example, and the link.

SlateJS

What is it?

SlateJS is your tool to craft delightful, rich text editors without a sweat.

Functionality

Build complex editors with custom formatting, embeds, and more.

Use-case example

Are you starting an online blog platform? With SlateJS, you can give your users an intuitive, customized text editor that makes crafting and editing blog posts more straightforward.

Links

Website: https://www.slatejs.org/examples/richtext

GitHub: https://github.com/ianstormtaylor/slate

React-PDF

What is it?

React-PDF is a lifesaver in rendering and styling PDFs right in the browser.

Functionality

Directly render PDFs in-browser without any backend. But it also allows you to generate PDFs from your backend using Node.js.

Use-case example

Are you creating an e-commerce site? React-PDF can help you generate stylish invoices or reports for each order, all on-the-fly and without a backend service.

Want a visual overview of React-PDF? Check out this overview video I created on Twitter (X 👀), where I share daily web dev magic! 🎩🪄

// Detect dark theme var iframe = document.getElementById('tweet-1684173469842567169-798'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1684173469842567169&theme=dark" }

Links

Website: https://react-pdf.org/

GitHub: https://github.com/diegomura/react-pdf

React-i18next

What is it?

React-i18next is the library to add international vibes to your app.

Functionality

Efficiently localize and cater to different languages. It'll enable you to translate each text making your website available in the wording of your choice.

Use-case example

Are you planning to launch a globally accessible educational platform? With React-i18next, provide lessons in multiple languages and make learning inclusive for everyone, everywhere.

Links

Website: https://react.i18next.com/

GitHub: https://github.com/i18next/react-i18next

Framer Motion

What is it?

Framer Motion helps you to bring fancy animations to your UI.

Functionality

Craft fluid animations and transitions for a dynamic user experience.

Use-case example

Are you building an interactive portfolio? Impress your visitors with Framer Motion's elegant animations as they navigate your projects and experiences.

Links

Website: https://www.framer.com/motion/

GitHub: https://github.com/framer/motion

Mantine

What is it?

Mantine is like having a Swiss army knife with high-quality components and hooks for your React apps.

Functionality

Fast-track development with top-notch components without sacrificing style.

Use-case example

Are you designing a startup's landing page? Use Mantine to whip up a stylish, functional site in record time.

Links

Website: https://mantine.dev/ and https://ui.mantine.dev/

GitHub: https://github.com/mantinedev/mantine

Wrapping Up 😄

There you have it! Five libraries to supercharge your next React project. If you found this useful or want to chat, swing by my Twitter (I mean X 👀)!

I drop web development content daily and share my experience as a remote software engineer traveling in Asia. Let's ride the waves of web development together!

➡️ https://twitter.com/gaelgthomas

I hope this article inspires your React journey and also your next project. ✨ Happy coding! 🚀

Step up Your VSCode Game With These 10 Must-Have Extensions

Gaël Thomas — Mon, 06 Feb 2023 17:00:46 +0000

Are you looking to take your VSCode game to the next level? Look no further! In this article, we will explore 10 must-have extensions that will enhance your workflow, productivity and make your coding experience even more enjoyable.

Let's use this article as a place where everyone can discover powerful extensions. Feel free to share your favorite extensions in the comments below, and let's expand our VSCode toolkit together!

Project Manager 📁

Are you tired of constantly searching for your projects in different folders or repositories? If yes, this extension is for you!

Project Manager allows you to always keep track of your projects. With it, you can easily access and organize your projects, no matter where they are on your computer.

It comes with many features, such as the possibility to add tags to your repositories.

➡️ Download the "Project Manager" extension

GitLens — Git supercharged 🔎

Even if I use an external application to manage my Git repository, I like using GitLens because it brings Git insights right inside VSCode.

One of my favorite features is the ability to visualize code authorship. When working on a repository with other developers, GitLens makes it easy to see who wrote what and when which saves me time. And, if I need to compare a branch with another one, GitLens makes it a breeze.

But this extension has even more features than that, and I'm sure you'll love them!

➡️ Download the "GitLens" extension

Colorize 🎨

This extension makes colors more visual in your code by generating a colored background for each of them. I like to use it because it makes my IDE more colorful and easy to read.

Below, here's a demonstration coming from the extension page.

➡️ Download the "Colorize" extension

Better Comments 💬

Writing clear and concise comments in your code is essential as a developer. But sometimes, more than plain text comments are needed to communicate effectively with your team or future self. That's where the Better Comments extension comes in.

I mainly use Better comments to make my TODO comments stand out, but you can use it with many other annotations. For example, if you're adding an alert, making a query, creating a TODO, or highlighting important information.

Here's an example coming from their extension page.

➡️ Download the "Better Comments" extension

Code Spell Checker ✅

Do you want to ensure your code is always pretty and grammatically correct? I have an extension for you!

Code Spell Checker is a spellchecker for coders. It'll help you to catch spelling errors by highlighting them in your code.

➡️ Download the "Code Spell Checker" extension

Live Server 🎙️

In a few words, this extension allows you to launch a local development server with a live reload feature for static and dynamic pages.

For example, let's say you're working on a static website project; you can launch a server that will listen to the changes you make to the page and auto-reload accordingly (e.g., a portfolio, a simple HTML page, etc.).

It can also be helpful if you want to do some tests on a simple web codebase.

➡️ Download the "Live Server" extension

Prettier - Code formatter ✍️

As per its name, Prettier is a code formatter. If you're like me and like to have your code auto-formatted whenever you save your changes, this extension is for you!

It'll ensure that all code conforms to a consistent style.

➡️ Download the "Prettier" extension

ESLint 📘

This one is well-known and used by most projects in JavaScript! ✨

ESLint is a static code analysis tool. It helps you to catch potential errors and enforce consistent code styles in your projects. It ensures that your code adheres to a set of coding standards and improves the maintainability of your codebase.

Additionally, it'll help you catch common mistakes and potential problems early on.

Something handy is this tool is highly customizable. Indeed, you can configure it to match your specific coding style and the requirements of your project. For example, you can make your project follow the Airbnb style using ESLint.

➡️ Download the "ESLint" extension

Import Cost 💰

Here's what you can find on the Import Cost extension page: "This extension will display inline in the editor the size of the imported package.".

I love using it because it's a small package that can make you more conscious about the libraries you are importing. Also, it helps to catch non-optimized imports (e.g., with Lodash).

➡️ Download the "Import Cost" extension

Auto Rename Tag 🔖

This handy extension can effortlessly keep your HTML/XML tags in perfect harmony. It's like having a tag-renaming ninja right at your fingertips!

You won't have this kind of compilation problem anymore:

<!DOCTYPE html>
<html>
  <head>
    <title>Fix my tag!</title>
  </head>
  <body>
    <!-- Without Auto Rename Tag -->
    <p>
      You need to edit the tag twice
    </span>

    <!-- With Auto Rename Tag -->
    <p>
      You need to edit the tag once
    </p>
  </body>
</html>

➡️ Download the "Auto Rename Tag" extension

Bonus: Bracket Pair Colorizer 🖌️

I could not have finished this article without a bonus! 🎁

Previous Bracket Pair Colorizer was an extension, but in a recent release, VSCode integrated this as a setting in the IDE. If like me, you're coding in JavaScript, you probably got lost in the indentation of parenthesis and brackets.

Thanks to this, you'll not meet the issue anymore. Indeed, this setting will highlight your parenthesis and brackets by pair. Here's an example from the Bracket Pair Colorized page:

As you can see, the first {} are pink, and the second {} are blue. It becomes even more helpful in more complex operations.

If you want to enable this option, you need to add these instructions in your VSCode settings.json:

{
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs":"active"
}

That’s a Wrap!

I hope this article has introduced you to some new and useful extensions you can add to your VSCode setup. If you have any favorites that aren't on this list, please share them in the comments section! 👀

As we kick off the new year, I want to share one of my new goals with you. My focus for this year is to be consistent and deliver daily educational content on my Twitter that can help you unlock your web development skills. 🚀 From tips to tutorials, I'll share everything I know to help you grow and succeed in your coding journey. 📚

If you're looking for a supportive place, I invite you to join me on Twitter. Let's learn and grow together! 🤝📬

10 GitHub Repositories You Should Know as a JavaScript Developer

Gaël Thomas — Fri, 27 Jan 2023 17:55:53 +0000

As a developer, we all want to improve our programming skills. Today, I'll share not 5, not 7, but 10 GitHub repositories that can help you grow as a JavaScript developer!

Grab your favorite tea, and let's start to navigate these resources.

Node Best Practices

Node JS is one of the most used technologies in the industry. The repository below regroups an up-to-date list of best practices for you to follow.

Each best practice is supported with an example, and the repository is translated into +7 languages. You don't have any excuse for not checking it!

+81.7k ⭐ ️=> https://github.com/goldbergyoni/nodebestpractices

JavaScript Algorithms

I heard you need to implement an algorithm in JavaScript? This repository is for you.

It provides an extensive list of algorithms and data structures in JavaScript with explanations and examples. The content is classified by experience: B (beginners) and A (advanced).

+151k ⭐ ️=> https://github.com/trekhleb/javascript-algorithms

33 JS Concepts

The repository describes: "33 JavaScript concepts every developer should know". References, videos, articles, or books back these concepts.

+51.8k ⭐ ️=> https://github.com/leonardomso/33-js-concepts

You Don't Know JS (Yet)

I don't know if I still have to share about this repository. Can we call this article a JavaScript repository list without including it?

This repository is an initiative by Kyle Simpson (aka Getify), author of the "You Don't Know JS (Yet)" book series. These books dive deep into the core mechanisms of the JavaScript language.

The author shares the numeric version of these books in the repository for free.

Note: You can buy the books to support the author and have a paperback version.

+159k ⭐ ️=> https://github.com/getify/You-Dont-Know-JS

Clean Code JavaScript

The programming world has a famous book called "Clean Code". This repository is an adaption of these clean code concepts but for JavaScript.

The presentation is straightforward:

a practice (sometimes with a short description)
a bad example
a good example

+73k ⭐ ️=> https://github.com/ryanmcdermott/clean-code-javascript

Awesome NodeJS

This GitHub repository curates a list of tools, packages, tutorials, articles, videos, and even more for your next Node project.

All packages are categorized: logging, parsing, compression, etc. You should find the answer to most of your problems here!

+46.9k ⭐ ️=> https://github.com/sindresorhus/awesome-nodejs

30 Days Of JavaScript

Do you want to learn JavaScript in "30" days? There you go!

This repository's concept guides you step-by-step in your JavaScript journey. Indeed, you'll have one notion per day for 30 days.

Each day, you'll have resources, exercises, and sometimes projects.

Note: As mentioned in the repository, even if the repository name is "30 days", it may take way more time. The key to learning successfully is to do it at your own pace.

+27.8k ⭐ => https://github.com/Asabeneh/30-Days-Of-JavaScript

Modern JS Cheatsheet

For this repository, here's the author's description:

"This document is a cheatsheet for JavaScript you will frequently encounter in modern projects and most contemporary sample code.This guide is not intended to teach you JavaScript from the ground up, but to help developers with basic knowledge who may struggle to get familiar with modern codebases (or let's say to learn React for instance) because of the JavaScript concepts used.Besides, I will sometimes provide personal tips that may be debatable but will take care to mention that it's a personal recommendation when I do so."

Definitely the kind of repository you can bookmark and refer to later when you feel the need.

+23.5k ⭐ => https://github.com/mbeaudru/modern-js-cheatsheet

JavaScript Testing Best Practices

An updated comprehensive list of best practices to write tests in JavaScript and Node JS.

Indeed, writing good tests is an essential skill for a developer. Thanks to this repository, I hope you'll find many tips about that topics and improve your testing strategy.

+19.1k ⭐ => https://github.com/goldbergyoni/javascript-testing-best-practices

ES6 Cheatsheet

Similarly to the modern JS cheatsheet presented earlier, here's a repository containing tips, tricks, best practices, and code snippets in JavaScript.

Feel free to bookmark it and refer to it when you need it.

+12.9k ⭐ => https://github.com/DrkSephy/es6-cheatsheet

Do you know some others?

I hope you enjoyed this list and will benefit your career as a JavaScript developer! If you know some others, let me know on Twitter 😉.

PS: I wrote this article from a Bangkok coffee ☕️🙏.

Join me on Twitter for daily doses of educational content to help you Unlock your Web Development skills! 🚀 From tips to tutorials, let's learn & grow together! 📚 DMs are open, let's connect! 🤝📬

Get Yesterday Date in JavaScript

Gaël Thomas — Thu, 29 Dec 2022 13:19:40 +0000

Learn to remove one day-to-date in JavaScript using the native date object.

How to Get Yesterday Date in JavaScript?

The best way to get yesterday’s date in JavaScript is by using the Date object. On an existing Date, you can use the getDate function to get the day (between 1 and 31), subtract 1 to this number, then use setDate to update the date. Here's a short example: date.setDate(date.getDate() - 1).

Using the JavaScript Date Object

In JavaScript, you’ll often manipulate the Date object to do diverse operations (e.g., subtract days from a date, format a date, etc.).

If you want to get yesterday’s date in JavaScript, you can use a combination of these two Date functions:

yourDate.getDate(): get the day of the month (you'll get a number between 1 and 31)
yourDate.setDate(): update the day of the date to the number passed as a parameter

In practice, let’s say you have this date: 15/11/2022. The getDate() function will return 15. Then you can subtract one day to this number 15 - 1 = 14. Finally, use setDate() to update the day of the month for your current date object.

Here’s a commented example:

// Create a date
const todayDate = new Date()

// Before subtracting 1 day
console.log(todayDate.toString())
// Output: "Tue Nov 15 2022 13:37:12 GMT+0100 (Central European Standard Time)"

// Subtract one day to the current date
todayDate.setDate(todayDate.getDate() - 1)

// After removing 1 day
console.log(todayDate.toString())
// Output: "Mon Nov 14 2022 13:37:12 GMT+0100 (Central European Standard Time)"

Now that you know how to subtract days from a date, you can learn how to add one day to date in JavaScript.

Bonus: Create a Function to Get Yesterday Date

Now you know how to remove days to a date, let’s make your code fancy!

One way to do that is to create a function that takes a date as a parameter, subtracts one day, and returns it.

Following what we did in the last part, here’s how:

// Create a function to make the logic generic
const removeOneDayToDate = (date) => {
  date.setDate(date.getDate() - 1)

  return date
}

// Get the current date
const date = new Date()

// Before removing 1 day
console.log(date.toString())
// Output: "Tue Nov 15 2022 13:37:12 GMT+0100 (Central European Standard Time)"

// Call `removeOneDayToDate` with the current date
// and assign the result to a new variable called `yesterdayDate`
const yesterdayDate = removeOneDayToDate(date);

// After subtracting 1 day
console.log(yesterdayDate.toString());
// Output: "Mon Nov 14 2022 13:37:12 GMT+0100 (Central European Standard Time)"

Thanks for reading. Let’s connect!

➡️ I help you grow into Web Development, and I share my journey as a Nomad Software Engineer. Join me on Twitter for more. 🚀🎒

Add One Day to Date in JavaScript

Gaël Thomas — Wed, 21 Dec 2022 21:13:31 +0000

Learn how to add one day to date in JavaScript using the native date object.

How to Add 1 Day to Date in JavaScript?

The best way to add 1 day to a JavaScript date is by using the Date object. On an existing Date, you can use the getDate function to get the day (between 1 and 31), add 1 to this number, then use setDate to update the date. Here's a short example: date.setDate(date.getDate() + 1).

Using the JavaScript Date Object

In JavaScript, you’ll often manipulate the Date object to do diverse operations (e.g., add days to a date, format a date, etc.).

If you want to add one day to date, you can use a combination of these two Date functions:

yourDate.getDate(): get the day of the month (you'll get a number between 1 and 31)
yourDate.setDate(): update the day of the date to the number passed as a parameter

In practice, let’s say you have this date: 05/12/2022. The getDate() function will return 5. Then you can add one day to this number 5 + 1 = 6. Finally, use setDate() to update the day of the month for your current date object.

Here’s a commented example:

// Create a date
const todayDate = new Date()

// Before adding 1 day
console.log(todayDate.toString())
// Output: "Wed Dec 21 2022 18:19:23 GMT+0100 (Central European Standard Time)"

// Add one day to the current date
todayDate.setDate(todayDate.getDate() + 1)

// After adding 1 day
console.log(todayDate.toString())
// Output: "Thu Dec 22 2022 18:19:23 GMT+0100 (Central European Standard Time)"Bonus: Create a Function to One Day to Date

Now you know how to add days to a date, let’s make your code fancy!

One way to do that is to create a function that takes a date as a parameter, adds one day, and returns it.

Following what we did in the last part, here’s how:

// Create a function to make the logic generic
const addOneDayToDate = (date) => {
  date.setDate(date.getDate() + 1)

  return date
}

// Get the current date
const date = new Date()

// Before adding 1 day
console.log(date.toString())
// Output: "Wed Dec 21 2022 18:24:38 GMT+0100 (Central European Standard Time)"

// Call `addOneDayToDate` with the current date
// and assign the result to a new variable called `tomorrowDate`
const tomorrowDate = addOneDayToDate(date);

// After adding 1 day
console.log(tomorrowDate.toString());
// Output: "Thu Dec 22 2022 18:24:38 GMT+0100 (Central European Standard Time)"

Thanks for reading. Let’s connect!

➡️ I help you grow into Web Development, and I share my journey as a Nomad Software Engineer. Join me on Twitter for more. 🚀🎒

React Router — Redirect to an External URL

Gaël Thomas — Sat, 24 Sep 2022 10:57:43 +0000

Discover how to use React Router to link to an external URL, thanks to the Link component or an HTML anchor tag (<a>).

How to Add an External Link With React Router?

You can use the Link component or an HTML anchor tag if you want to redirect to an external link with React Router. Using the <Link> component, you can do it thanks to the pathname and target parameters. It will redirect the user to the specified URL.

Using React Router

In React, React Router is the most used library to manage your application routing (multi-pages application). Thanks to a set of functions and components provided by them, you can build a lot of features.

If you use this library to redirect to an external URL, you can use the <Link /> component with the pathname and target property.

Let’s discover how to open the HereWeCode homepage in a new tab:



import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom"
import "./styles.css";

export default function App() {
  return (
    <Router>
      <Switch>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  )
}

function Home() {
  return (
    <div>
      <Link to={{ pathname: "https://herewecode.io/" }} target="_blank">Click to open HereWeCode (new tab)</Link>
    </div>
  )
}

As you can see above, when you pass an external URL to the React Router Link component and combine it with a target="_blank" property, the link will open a new tab with the URL of your choice.

Note: Unfortunately, it's impossible to open an external URL in the same tab using React Router. If you don't provide the target property, the router will append the URL to your current website URL (e.g., https://my-website.com/https://herewecode.io/). In the next section, I'll show you how to open an external link in the current tab.

Using an Anchor Tag ()

If you want to open an external link to the current tab, the most straightforward way is to use the native anchor tag in HTML (<a>).

Here’s how to do it:



import React from "react"

export default function App() {
  return (
    <div>
      <p>
        <a href="https://herewecode.io/">
          Click to open HereWeCode (current tab)
        </a>
      </p>
      <p>
        <a href="https://herewecode.io/" target="_blank">
          Click to open HereWeCode (new tab)
        </a>
      </p>
    </div>
  )
}

As you notice, we pass the external link to the href property. If no target="_blank" property is given, the link will open in the current tab; otherwise, in a new tab.

If you want to learn more about React, here’s an article on how to get URL params in React (with React Router V5/V6 and without).

Thanks for reading. Let’s connect!

➡️ I help you grow into Web Development, and I share my journey as a Nomad Software Engineer. Join me on Twitter for more. 🚀🎒

Get URL Params in React

Gaël Thomas — Mon, 19 Sep 2022 17:44:59 +0000

This article will show you three ways to get URL params in React (with React Router V5, V6, and without).

How to Get URL Parameters in React?

The best way to get URL parameters in React is to use the library “React Router”. Thanks to a set of functions, it helps you manage your application’s routes. But, if you have a simple application without routing, you can use the built-in URLSearchParams interface to fetch the query parameters.

URL structure

Before deep-diving into how to get URL params in your React application, let’s quickly go through the URL parts.

Let’s use this URL as an example: "https://my-website.com?type=cat&name=oscar". The different URL parts are:

Protocol: "https://"
Domain name: "mywebsite.com"
Query parameter 1:
- name: "type"
- value: "cat"
Query parameter 2:
- name: "name"
- value: "oscar"

In the following sections, you’ll discover how to fetch the query parameters type and name.

With URLSearchParams

In this first example, we get the React URL params for a simple application without any routers. It means what you’ll discover below can work for all your React projects without any additional libraries (nothing to install).

To make it work, we need to use your browser’s Window interface and the URLSearchParams interface.

Here’s a working example:



import React from "react"

export default function App() {
  const queryParameters = new URLSearchParams(window.location.search)
  const type = queryParameters.get("type")
  const name = queryParameters.get("name")

  return (
    <div>
      <p>Type: {type}</p>
      <p>Name: {name}</p>
    </div>
  )
}

As you can see above, we initialize a queryParameters variable by creating a new URLSearchParams instance with the current window.location.search as a parameter.

URLSearchParams extracts the queries from the parameter passed at construction (window.location.search) and provides a set of functionalities (get, getAll, has, etc.).
window.location.search corresponds to the query parameters part of your URL (?type=cat&name=oscar).

In the rendering part of our application, we display the two React URL params, type, and name, thanks to the get() function from the URLSearchParams object.

With React Router V6

If you have a more complex application in React with many pages, you’re probably using React Router to manage your routes. This library is the most popular solution and has many features to manage your website URLs.

In this section, we’ll focus on version 6 of React Router. If you’re still using version 5, you can scroll down to the next section because the solution differs.

Below, you can find an example:



import React from "react"
import {
  Routes,
  Route,
  useSearchParams,
  BrowserRouter
} from "react-router-dom"

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  )
}

function Home() {
  const [queryParameters] = useSearchParams()

  return (
    <div>
      <p>Type: {queryParameters.get("type")}</p>
      <p>Name: {queryParameters.get("name")}</p>
    </div>
  )
}

In this version of React Router, all the window and URLSearchParams code have been wrapped into a custom hook called useSearchParams.

You don’t have to worry about doing the implementation by yourself, and you can focus on calling the hook and extracting the query parameters from it (const [queryParameters] = useSearchParams()).

Then, you can fetch the URL parameter values in the same way as in the previous example.

With React Router V5

In this last section of the article, I’ll show you how to deal with URL params with React Router V5. As mentioned before, the code will slightly differ between the V5 and V6.

Here’s how to get the URL params with React Router V5:



import React from "react"
import {
  BrowserRouter as Router,
  Switch,
  Route,
  useLocation
} from "react-router-dom"

export default function App() {
  return (
    <Router>
      <Switch>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  )
}

function Home() {
  const location = useLocation()
  const queryParameters = new URLSearchParams(location.search)

  return (
    <div>
      <p>Type: {queryParameters.get("type")}</p>
      <p>Name: {queryParameters.get("name")}</p>
    </div>
  )
}

As you can see above, this last example is a mix of the first approach with window and URLSearchParams and the second approach with React Router only.

To succeed in getting the URL params with the V5, you need to:

get the current location object using useLocation.
extract the query parameters from your URL with location.search (?type=cat&name=oscar).
pass the URL query params to URLSearchParams.

Note: You may have noticed that the output of location.search is the same as window.location.search. It's because both are coming from the Window interface (window.location), and, more precisely, the Location interface.

Thanks for reading. Let’s connect!

➡️ I help you grow into Web Development, and I share my journey as a Nomad Software Engineer. Join me on Twitter for more. 🚀🎒

Array to String Without Commas in JavaScript

Gaël Thomas — Sun, 18 Sep 2022 11:06:32 +0000

In this article, you’ll discover how to convert an array to a string without commas. By no commas, I mean no separator between your array elements (words) or a separator different than a comma.

How to Convert Array to String Without Commas

In JavaScript, all arrays have a built-in method called join(). You can use it to convert an array to a string without commas. You can call the join method with an empty string as a parameter (join("")). The method will return a string with all the array elements concatenated.

Concrete Example: Join Array to String

Without Commas

As mentioned in the above paragraph, you can use the join method to create a string without commas from your array.

This method works on an Array and takes up to one parameter:

no parameter: your array will be joined with commas (["hello", "world"].join())
with parameter: your array will be joined with the string provided as a parameter (["hello", "world"].join("-"))

Let me give you an example without commas:

const helloMagicWorldArray = ["Hello", "Magic", "World"]
const helloMagicWorldString = helloMagicWorldArray.join("")

console.log(helloMagicWorldString)
// Output: "HelloMagicWorld"

With Separator

I suppose you start the get the idea! If you want to join your array with something different than commas, you can pass the separator of your choice.

const helloMagicWorldArray = ["Hello", "Magic", "World"]

console.log(helloMagicWorldArray.join("/"))
// Output: "Hello/Magic/World"

console.log(helloMagicWorldArray.join(" - "))
// Output: "Hello - Magic - World"

If you want to go further, you can learn how to:

Thanks for reading. Let’s connect!

➡️ I help you grow into Web Development, and I share my journey as a Nomad Software Engineer. Join me on Twitter for more. 🚀🎒

Remove Null Values From Array in JavaScript

Gaël Thomas — Sat, 17 Sep 2022 10:22:36 +0000

Here’s how you can remove null values from an array in JavaScript. I will show you two methods, the first one with pure JavaScript and the array filter method and the second one with Lodash.

Remove Null Values from Array With Pure JavaScript

I recommend this method over the one with Lodash because you don’t have to use an external library. All you have to do is use the Array.prototype.filter() implemented in JavaScript. This built-in method creates a shallow copy of your array based on the filter condition you provide.

Here’s how it’s working:

const whatIsLife = ["Life", "is", null, "beautiful", null, "!"]

const thisIsLife = whatIsLife.filter(element => element !== null)

console.log(thisIsLife)
// Output: ["Life", "is", "beautiful", "!"]

As you can see above, our whatIsLife array contains null values. By using the filter method, we specify that we want to keep only elements that are different than null (yes, because life is beautiful!).

If you print the new thisIsLife array, you'll have an array with non-null values.

Here’s a shortened version of the above example:

const whatIsLife = ["Life", "is", null, "beautiful", null, "!"]

// Returning `element` will only return values if they
// are non-null
const thisIsLife = whatIsLife.filter(element => element)

console.log(thisIsLife)
// Output: ["Life", "is", "beautiful", "!"]

With Lodash

Even if I recommend the first method, it’s always interesting to discover other ways of removing null values from an array. This time, let’s learn how to do it with Lodash, a JavaScript library.

You’ll notice the syntax will differ a little, but the function we’ll use is the same as the one built-in in JavaScript. Indeed, the Lodash function is called filter.

It’s time for an example!

import _ from "lodash"

const whatIsLife = ["Life", "is", null, "beautiful", null, "!"]

const thisIsLife = _.filter(whatIsLife, (element) => element !== null)

console.log(thisIsLife)
// Output: ["Life", "is", "beautiful", "!"]

Now you know how to remove null values in a JavaScript array, you can learn how to remove an element from an array.

Thanks for reading. Let's connect!

➡️ I help you grow into Web Development, and I share my journey as a Nomad Software Engineer. Join me on Twitter for more. 🚀🎒

How to Update a Package With NPM

Gaël Thomas — Sun, 27 Feb 2022 17:03:16 +0000

A short tutorial about how to update one package with NPM.

Nowadays, most JavaScript projects use dependencies. They can be delivered through different package managers, but in this article, we'll focus on NPM.

As a computer, it's essential to keep your project dependencies up to date. It's needed to get the latest security fixes, bugs fixes, improvements, and features.

How to know if an NPM package is outdated

Before going further in the update process, you'll need to figure out if your NPM package is outdated or not.
To know about that, there are two possibilities:

keep yourself updated about the package news and changelog (ex: read about a React major update)
use the npm outdated command in your project root repository

Let's use the npm outdated command in the project of your choice. If there are packages to update, the output should look as below:

Package                          Current   Wanted    Latest    Location                      Depended by
react-i18next                    11.15.3   11.15.5   11.15.5   node_modules/react-i18next    my-repo
tailwindcss                      3.0.12    3.0.23    3.0.23    node_modules/tailwindcss      my-repo
[...]

If you don't see anything, good news! It means that your project is up to date.

How to update one package with NPM

Now that you know more about which package needs to be updated in your project. Let's pick one of them and update it.

Based on the list in the previous part, I'll pick tailwindcss because I noticed that the current version in my project is 3.0.12, but the wanted is the 3.0.23.

To do so, NPM is providing an update command that works as follows: npm update [package_name].

As an example, in my case, I would do:

$ npm update tailwindcss

Note: When running the npm update command, the package will update to the "Wanted" version (ref. output of npm outdated). This security is here to avoid breaking your code with major releases.

Update package to the latest version

This part will teach you to update your package to its latest version and major release. It's a typical case when you need one new feature available in the above version.

Let's imagine you have an output that looks like this:

Package                          Current   Wanted    Latest    Location                      Depended by
tailwindcss                      2.2.19    2.2.19    3.0.23    node_modules/tailwindcss      my-repo
[...]

As you can notice, the current version of tailwindcss is 2.2.19, but there is a major update 3.0.23.

To update the NPM package to the latest version, you must type npm install tailwindcss@latest.

Note: Doing a major NPM update may break your code due to significant changes in the corresponding library. I recommend you check your package website. They provide an upgrade guide or helpful information to update your code most of the time. For example, TailwindCSS provided an upgrade guide from V2 to V3.

Wrapping up and recommendation

I hope this article helped you to update one package of your project!

One last recommendation for your project health, don't forget to test your website and/or run your test suite if you have one. It's essential to check if everything is still working after a package update. 📦🚀

➡️ I regularly deliver content about web development, personal growth as a developer, and my journey as an aspiring digital nomad and remote software engineer. If you don't want to miss them, I invite you to follow me on Twitter. 🚀

How to Enable and Disable a Button in JavaScript 🔴🟢

Gaël Thomas — Wed, 12 Jan 2022 15:34:05 +0000

Learn how to enable and disable a button in JavaScript.

While creating user interfaces, you may probably want to make them more dynamic and enable or disable a button programmatically.

Before starting, you need to know that all HTML buttons have a property disabled. Thanks to it, you can enable or disable a button.

<button id-"mainButton">I'm an enabled button!</button>
<button id-"mainButton" disabled>I'm a disabled button!</button>

This article will manipulate the disabled property using a short JavaScript code.

Let me show you how to do that!

1. Create a button in your HTML

The first step is to create a button in your HTML with an id property. It will allow you to select it later in the tutorial.

<button id="mainButton">Can you click me?</button>

You can also create this button programmatically in JavaScript if you prefer!

2. Select your button using JavaScript

The first step in your code is to select the button you want to update. You can do it using the querySelector function, but we will use the getElementById native function because of its simplicity.

It will allow you to target an HTML element based on its id property.

// Select the button element in your HTML code
const button = document.getElementById('mainButton')

3. Disable button in JavaScript

As mentioned previously in this article, all HTML buttons have a disabled property that you can use to disable or enable a button.

By default, a button's disabled property is set to false. It means that by default, a button is active.

If you want to disable a button using JavaScript, you can switch this value to true once you have created and selected the button (steps 1 and 2).

// Disable a button in JavaScript
button.disabled = true // <- Button is disabled

4. Enable button in JavaScript

Now you know how to disable a button, you can enable it by reverting the true value to false.

// Enable a button in JavaScript
button.disabled = false // <- Button is not disabled

Bonus: How to Disable a Button in JavaScript Based on Condition

Let's go further and create some code that disables the button only if its text matches a condition.

Here is what you will need to know:

create a button in HTML
disable a button in JavaScript
write a condition using JavaScript
get a button text in JavaScript (you will use the innerText property, but don't worry you will see how to use it below!)

To do so, you can come back to step 1, 2, and 3, except that we disable the button only if the button text is "Can you click me?".

// Select the button element in your HTML code
const button = document.getElementById('mainButton')

// Disable the selected button in JavaScript based on a condition
// If the button text is 'Can you click me?'
if (button.innerText === 'Can you click me?') {
  button.disabled = true
}

If you execute this code in your browser, the button should be disabled. Now, let's change the condition to another text. For example: button.innerText === "Click here!", refresh your browser, and the button should be enabled.

Full code to enable and disable a button in JS 👇

<html>
  <head>
    <title>Enable and Disable a Button in JavaScript</title>
  </head>

  <body>
    <button id="mainButton">Can you click me?</button>

    <script>
      // Select the button element in your HTML code
      const button = document.getElementById('mainButton')

      // Disable the selected button in JavaScript based on a condition
      // If the button text is 'Can you click me?'
      if (button.innerText === 'Can you click me?') {
        button.disabled = true
      }

      // If you want to enable the button using JavaScript
      // you can switch back the `disabled` property to `false`
      // button.disabled = false
    </script>
  </body>
</html>

➡️ I'm starting to tweet more consistently. If you want to get more tips and resources about web development, developer tips, and my journey as a Full-stack Engineer -> Find me on my Twitter 🐦