DEV Community: Victor de la Fouchardière

👑 Create a secure Chat Application with React Hooks, Firebase and Seald 🔐

Victor de la Fouchardière — Mon, 31 Aug 2020 21:03:11 +0000

Hello guys ! 👋

Today, let's discover a small chat application developed with React Hooks, Firebase and a new package named Seald! 🔥

The goal of this article is to introduce you the Seald SDK and how this little package can be very effective in terms of security for your apps!

Created with meme-studio.io

End-to-end encryption of unstructured data can be complex and expensive to redevelop, essential to protect the confidential data your applications handle. With Seald SDK, we perform end-to-end encryption on data stored, produced or received by your applications.

Let's take an example with a chat application ! 💪

Structure of our chat app 🧰

React + Firebase + Seald

Above is a demo of our chat app in React, with an end-to-end encryption system, including several features:

🟢 Create a room
🟢 Add/Remove users from a room
🟢 Modify a room
🟢 Registration / Login
🟢 User status
🟢 Encrypting and decrypting a message

The main tools used are:

Firebase, a ready-to-use framework which allows us to create a persistent authentication system, save our encrypted messages in a database and receive them instantly when a user posts a new message.

React which will be our frontend library to perform and design simple views for each state in our application.

Seald, the turnkey library we will use to bring end-2-end encryption 🔐 to the chat.

Auth system 👨‍💻

Router with 3 routes

Only 3 routes for our chat application with authentication. Registration, login and room management.

We define if the routes are allowed for authenticated users or not.

Password derivation 🔏

Normally, we would send Firebase the password in cleartext, and then Firebase would derive it with a secure function such as SCRYPT in order to avoid having it in the database.

In our case, we want to prevent Firebase from ever being able to read the password, even if it’s not stored, because we’re going to use it for protecting the Seald identity end-2-end (even from Firebase).

In order to do that, we just do the same operation Firebase does, but before giving it to Firebase : we derive the password with a secure function (SCRYPT) and then use it as a password.

Password derivation before giving it to Firebase

Sign up 👤

In order to create a user in this application, a simple form containing 3 fields is enough:

Nothing very complicated in the code. We ask Firebase to create an authentication via an email and a password provided by the user.

And also add some informations about the user, like the name and a photo URL.

Then, we add the Seald application layer to create our future
encrypted messages.

Sign in 👤

Then, the login. A classic form (email / password) in order to access the rooms and be able to chat with other users.

Same as on the registration. We retrieve the Firebase authentication of the user and his Seald account.

Rooms 👨‍👩‍👦‍👦

That's where the interesting part comes from.

On this application, it is possible to chat in 1 to 1 with an another user, but also to chat with a group of users in a custom room.

Create a room 🧸

Create a room

Let's detail this code together:

First, we send the form data to Firebase. The name of the room and the selected users are required.
Then we create an encrypted session using the Seald SDK. This will allow to encrypt and decrypt a message for this room.
And finally, we want to send the first encrypted message to welcome the users of this room.

Our first room!

Send encrypted messages 🔏

Now, let's chat ! But, remember, we want an End-To-End encryption for the messages.

Before each created message, we need to check if we have an authenticated Seald session. If not, create that session with the SDK 🔒.

Then, the session allows us to encrypt a string, which is our message.

Alice 👩 sends a message to Bob 👨

"Hello my friend"

We call the method encrypt for our message above:

The message will become

"{\"sessionId\":\"NazDAYyuRw2lDKS0VaianA\",\"data\":\"8RwaOppCD3uIJVFv2LoP3XGXpomj0xsMv4qmMVy30Vdqor2w0+DVCXu3j13PEyN2KfJm6SiSrWDRMDziiiOUjQ==\"}"

🔴 Before decrypting messages

Now, Bob 👨(and others users of the room) need to decrypt the message of Alice 👩. How can we do that ?

Decrypted messages 🔐

Now that we know how to send an encrypted message, let's see how to retrieve a message instantly and decrypt it for other users.

We use the value event to read our messages, as they existed at the time of the event. This method is triggered once when the listener is attached and again every time the data, including children, changes.

Read more about reading and writing Data with Firebase 📂

We retrieve our message list every time a message is added. So an encrypted message is displayed, but now we need to be able to decrypt it:

Bob 👨 actually sees:

"{\"sessionId\":\"NazDAYyuRw2lDKS0VaianA\",\"data\":\"8RwaOppCD3uIJVFv2LoP3XGXpomj0xsMv4qmMVy30Vdqor2w0+DVCXu3j13PEyN2KfJm6SiSrWDRMDziiiOUjQ==\"}"

We call the method decrypt for our encrypted message above:

Bob 👨 will now see:

"Hello my friend"

🟢 After decrypting messages

We now have a real time chat with an end-to-end encryption system 💪

Note: To use the Seald SDK, go to seald.io.

Voilà

Cheers 🍻 🍻 🍻

If you enjoyed this article you can follow me on Twitter or here on dev.to where I regularly post bite size tips relating to HTML, CSS and JavaScript.

🤝 Promise.allSettled() VS Promise.all() in JavaScript 🍭

Victor de la Fouchardière ・ Aug 16 '20

#javascript #node #webdev #beginners

📦 GitHub Profile: The RIGHT Way to Show your latest DEV articles + BONUS 🎁

Victor de la Fouchardière ・ Aug 5 '20

#github #markdown #showdev #productivity

🍿 Publish your own ESLint / Prettier config for React Projects on NPM 📦

Victor de la Fouchardière — Mon, 24 Aug 2020 09:23:08 +0000

Hello guys! 👨‍💻

You probably know ESLint and Prettier, but do you have your own configuration for your React projects? 💪

VS Code + Prettier + ESLint

A quick reminder 🧠

ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code. You can configure ESLint to fix all the problems in a file when this file is saved.

Prettier is an opinionated code formatter that supports a lot of different programming languages, like: JavaScript; JSON; JSX; CSS; Markdown. Prettier will make your code look good without you ever having to dabble in the formatting. I estimate the time saved thanks to Prettier at about 1 hour a day.

In this article, we will see how to create your own ESLint + Prettier configuration in order to reuse it in your own React apps ! 🔥

Example : https://github.com/viclafouch/eslint-config-viclafouch

1. Create the repository ✏️

First of all, I advise you to create a repository in order to save your configuration and to modify your rules when you want.

By convention, the module name begins with eslint-config-, such as eslint-config-foo. For example eslint-config-viclafouch (it's my username) or eslint-config-react.

Create the repository

Then, clone the new repository into your local disk.

git clone https://github.com/$USERNAME/eslint-config-$USERNAME.git

2. Create an ESLint configuration 🧰

Let's start our configuration for our React projects.

First, add your ESLint dependencies 💪. The packages below will change according of what you want.

babel-eslint
eslint
prettier
eslint-config-prettier
eslint-plugin-prettier
eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-jsx-a11y

Just copy/past 🗒 the following command:

npm install -D eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y babel-eslint

ℹ️ The documentation mentions that if your shareable config depends on a plugin, you should also specify it as a peerDependency (plugins will be loaded relative to the end user's project, so the end user is required to install the plugins they need).

Your package.json should now look like this:

ESLint config 🔹

Next, let's create a .eslintrc.js file and add the ESLint plugins that apply certain rules (for React, React Hooks, ...) to our configuration.

Prettier config 🔸

Then, to custom your Prettier configuration, just add an object representing options to your custom rules. These options will be passed into prettier.

Example of my Prettier config

You can find a simple example of my configuration here: https://github.com/viclafouch/eslint-config-viclafouch

Export your config 💡

The next step is to create an index.js file to export your configuration to your React applications.

Publish your config on NPM 🚀

Before publishing your configuration, make sure to give good metadata like the name, keywords, description ...

Example with my own config

If everything looks fine, you can publish to the NPM registry 🥳

npm publish

Import your config into your React Apps 🎉

First, we need to install everything needed by the config:

Example with my own config:

npx install-peerdeps --dev @viclafouch/eslint-config-viclafouch

Then, create a .eslintrc.js file in the root of your project's directory. My .eslintrc.js file looks like this (be sure to extend with your own configuration):

Example with my own config

Finally, you can add two scripts to your package.json to lint and/or fix your code:

Now you have your own config available on NPM, ready to be used in your React projects, and editable at any time!

viclafouch / eslint-config-viclafouch

🛠 These are my settings for TypeScript / ESLint / Prettier in a project

Voilàà

Cheers 🍻 🍻 🍻

If you enjoyed this article you can follow me on Twitter or here on dev.to where I regularly post bite size tips relating to HTML, CSS and JavaScript.

🤝 Promise.allSettled() VS Promise.all() in JavaScript 🍭

Victor de la Fouchardière ・ Aug 16 '20

#javascript #node #webdev #beginners

📦 GitHub Profile: The RIGHT Way to Show your latest DEV articles + BONUS 🎁

Victor de la Fouchardière ・ Aug 5 '20

#github #markdown #showdev #productivity

🤝 Promise.allSettled() VS Promise.all() in JavaScript 🍭

Victor de la Fouchardière — Sun, 16 Aug 2020 17:17:18 +0000

Hello ! 🧑‍🌾

Promises are available since ES2015 to simplify the handling of asynchronous operations.

Let's discover 2 Promises and their differences:

Both of them take an iterable and return an array containing the fulfilled Promises.

❓ So, what is the difference between them?

Promise.all() 🧠

The Promise.all() method takes an iterable of promises as an input, and returns a single Promise that resolves to an array of the results of the input promises.

All resolved

As you can see, we are passing an array to Promise.all. And when all three promises get resolved, Promise.all resolves and the output is consoled.

Now, let's see if one promise is not resolved, and so, if this one is reject. What was the output ? 🛑

1 failed

Promise.all is rejected if at least one of the elements are rejected. For example, we pass 2 promises that resolve and one promise that rejects immediately, then Promise.all will reject immediately.

Promise.allSettled() 🦷

Since ES2020 you can use Promise.allSettled. It returns a promise that always resolves after all of the given promises have either fulfilled or rejected, with an array of objects that each describes the outcome of each promise.

For each outcome object, a status string is present :

fulfilled ✅
rejected ❌

The value (or reason) reflects what value each promise was fulfilled (or rejected) with.

Have a close look at following properties (status, value, reason) of resulting array.

Differences 👬

Promise.all will reject as soon as one of the Promises in the array rejects.
Promise.allSettled will never reject, it will resolve once all Promises in the array have either rejected or resolved.

Supported Browsers 🚸

The browsers supported by JavaScript Promise.allSettled() and Promise.all() methods are listed below:

Google Chrome
Microsoft Edge
Mozilla Firefox
Apple Safari
Opera

Cheers 🍻 🍻 🍻

If you enjoyed this article you can follow me on Twitter or here on dev.to where I regularly post bite size tips relating to HTML, CSS and JavaScript.

📦 GitHub Profile: The RIGHT Way to Show your latest DEV articles + BONUS 🎁

Victor de la Fouchardière ・ Aug 5 '20

#github #markdown #showdev #productivity

🍦 Cancel Properly HTTP Requests in React Hooks and avoid Memory Leaks 🚨

Victor de la Fouchardière ・ Jul 29 '20

#react #javascript #tutorial #showdev

Share your Portfolio here 📣

Victor de la Fouchardière — Mon, 10 Aug 2020 16:38:30 +0000

Hello there ! 👋

I would like to know more about this community ! 🤗

Created with meme-studio.io

I have 1 question for you :

What is your portfolio URL ? And how is your portfolio site built (`React.js`? `Vanilla`? `ROR`? ...)

This array below will be updated every hours !

Name	Tech	URL
@viclafouch	Next.js on Vercel	https://www.victor-de-la-fouchardiere.fr
@gradam	Gatsby on GH pages	https://semik.dev
@michaelgee22	Next.js on Vercel	https://michaelgee.com
@giselamd	Gatsby with Netlify CMS	http://giselamirandadifini.com
@ehsan	Static Vanilla JS on GH pages	https://www.ehsanazizi.me
@aliahsan07	Gatsby on Netlify	https://aliahsan.tech
@imshravan	Static Vanilla JS	http://www.ohmyscript.com
@daviddalbusco	Gatsby, GitHub Actions and Firebase hosting	https://daviddalbusco.com
@ixartz	Eleventy.js on Vercel	https://creativedesignsguru.com
@hougesen	Static Vanilla JS	https://mhouge.dk
@ryansmith	Gatsby	https://ryansmith.tech
@djaidri_oussama	Gridsome, Tailwindcss on Netlify	https://xenodochial-yonath-b7c6a8.netlify.app
@eudds	Vanilla JS	https://ericudlis.com
@pedropcruz	Nuxt + bulma on Netlify	http://www.pedropcruz.pt
@jeffjadulco	Gatsby + Tailwind CSS on Vercel	https://jeffjadulco.com
@laasrinadiaa	Gatsby on Netlify	https://nadialaasri.me
@corentinbettiol	PHP, MariaDB and Vanilla JS	https://l3m.in
@sanchezdav	Ruby on Rails	https://codeando.dev
@juandamartn	Vanilla JS	https://juandamartinez.com
@adamgreenough	Wordpress	https://adamgreenough.me
@elvessousa	Next.js with Typescript on Vercel	https://elvessousa.com.br
@jetleebruce	Gatsbyjs, Tailwind on Netlify	https://modinsv.netlify.app
@chuksokwuenu	PHP, Javascript and MySql	http://chuksokwuenu.com
--------	--------	--------
share yours!!

READY ? Let's go ! 📣

📦 GitHub Profile: The RIGHT Way to Show your latest DEV articles + BONUS 🎁

Victor de la Fouchardière — Wed, 05 Aug 2020 15:18:35 +0000

Hello there ! 👋

1 week ➡️ 1 article ! #followMe

We just hit 1250 followers ! Thank you very much ! 🥰

As you may have noticed, it is now possible to display a GitHub profile. 🧑‍🌾

If you don't already have one, I recommend that you create one using this link below:

How To Create A GitHub Profile README

Monica Powell ・ Jul 11 '20

#github #branding #markdown

Here, I'm going to show you how in 2 minutes it is possible to show your latest blog posts directly to your GitHub profile in an automated way.

Example of GitHub Profile

Before to begin, be sure to have a Github Profile 💪

To get a profile on GitHub, follow these 3 steps below, if you have already one, you can skip this part.

1️⃣ Create a new repository with the same name (including casing) as your GitHub username.
2️⃣ Create a README.md file inside the new repo and add your content you want to show.
3️⃣ Commit and push your new README file!

Show your last 3/5/10 DEV articles 🔥

@gautamkrishnar whom we thank 😙, has created a small package allowing us to automate the retrieval of articles on different websites (Dev.to, Medium, Stackoverflow, ...) and to show the result into your README file.

gautamkrishnar / blog-post-workflow

Show your latest blog posts from any sources or StackOverflow activity or Youtube Videos on your GitHub profile/project readme automatically using the RSS feed

Step 1: Edit your README.md 📝

Just add these 2 little Markdown lines to your README.md file. You can of course add your own content to the file, but these 2 lines are required for the tutorial.

<!-- BLOG-POST-LIST:START -->
<!-- BLOG-POST-LIST:END -->

Copy the code above and paste it into your README.md.

For example on my GitHub profile, I placed my DEV articles at the end of my file like that:

🚸 CODE

🚸 WILL RENDER AFTER STEP 2

Step 2: Create a simple bot 🤖

Now, we have to create a GitHub workflow. The goal 🎯 is to replace these 2 lines of markdown code by your DEV articles!

A workflow is a configurable automated process made up of one or more jobs. You must create a YAML file to define your workflow configuration. Understanding the GitHub flow

To create a workflow 👇

Go to the Actions tab of your repository.

Go to github.com/$USERNAME/$USERNAME/actions/new (replace $USERNAME by your GitHub username.

e.g: github.com/viclafouch/viclafouch/actions/new

Then, select the simple workflow in order to start with the minimum necessary structure.

Rename the blank.yml file to blog-post-workflow.yml and simply insert this code below:

name: Latest blog post workflow
on:
  workflow_dispatch:
  schedule:
    # Runs every hour
    - cron: '0 * * * *'

jobs:
  update-readme-with-blog:
    name: Update this repo's README with latest blog posts
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: gautamkrishnar/blog-post-workflow@master
        with:
          # Your RSS feed url
          feed_list: "https://dev.to/feed/viclafouch"
          # Maximum number of posts you want
          max_post_count: 3

Here my blog-post-workflow.yml file if you need help.

2 important parameters ❗️

feed_list which is required! It's your RSS feed url.
max_post_count which is the maximum number of posts you want to show on your readme file. Default value is 5.

You can find all parameters at gautamkrishnar/blog-post-workflow#options.

And finally, confirm the creation of the workflow.

Now, the workflow works by itself and will retrieve every hour your DEV articles and will commit and push the result to your README.md file.

Note: In order to avoid waiting 1 hour to see the first change appear, you can manually trigger the workflow.

BEFORE / AFTER

BONUS 🏆

Want to show your latest Medium articles into your Github profile, or your StackOverflow activity, your blog articles or even your YouTube videos automatically ?

Following are the list of some popular blogging platforms and their RSS feed urls:

Name	Feed URL
Dev.to	`https://dev.to/feed/username`
Wordpress	`https://www.example.com/feed/`
Medium	`https://medium.com/feed/@username`
Stackoverflow	`https://stackoverflow.com/feeds/user/userid`
Ghost	`https://www.example.com/rss/`
Drupal	`https://www.example.com/rss.xml`
YouTube Playlists	`https://www.youtube.com/feeds/videos.xml?playlist_id=playlist_id`
YouTube Videos	`https://www.youtube.com/feeds/videos.xml?channel_id=channelId`

You can find an example here: https://github.com/viclafouch.

Do not hesitate to share your GitHub Profile in order to show the way you have displayed your DEV articles! 😉

Cheers 🍻 🍻 🍻

If you enjoyed this article you can follow me on Twitter or here on dev.to where I regularly post bite size tips relating to HTML, CSS and JavaScript.

🍦 Cancel Properly HTTP Requests in React Hooks and avoid Memory Leaks 🚨

Victor de la Fouchardière ・ Jul 29 '20

#react #javascript #tutorial #showdev

🚜 Improve your productivity with Snippets of JavaScript on the Chrome DevTools 🍄

Victor de la Fouchardière ・ Jul 22 '20

#javascript #productivity #chrome #tutorial

🍦 Cancel Properly HTTP Requests in React Hooks and avoid Memory Leaks 🚨

Victor de la Fouchardière — Wed, 29 Jul 2020 16:50:33 +0000

Hello guys ! 👋

Today, let's take a look at cancelling a web request with fetch and Abort Controller in React Hooks! 🤗

When we work with Fetch to manage data, we sometimes want to cancel the request (e.g. when we leave the current page, when we leave a modal, ...).

In the example below 👇, we fetch the data to display when switching route. But, we leave the route/page before the fetch is completed.

🚸 Demo 1/2

🚸 Source code 2/2

We just saw a memory leak in action! 💪🏼 Let’s see why this error occurred, and what it exactly means.

❓ WHY A MEMORY LEAK?: We have a component that performs an asynchronous fetch(url) task, then updates the state of the component to display the elements, BUT we unmount the component before the request is even completed. The state of the unmounted component is updated (e.g. setUsers, setState), which follows a memory leak.

🚀 Let's use the new AbortController API !

Abort Controller allows you to subscribe to one or more Web Requests with the ability to cancel them. 🔥

Basics of AbortController

First of all, let's create a new AbortController object instance.

Now, we can access to controller.signal.

"The signal read-only property of the AbortController interface returns an AbortSignal object instance, which can be used to communicate with/abort a DOM request as desired." MDN Source

Let's see how to use it 💪

And finally, if we want to cancel the current request, just call abort(). Also, you can get controller.signal.aborted which is a Boolean that indicates whether the request(s) the signal is communicating with is/are aborted (true) or not (false).

❗️ Note: When abort() is called, the fetch() promise rejects with a DOMException named AbortError.

Yeah, you just learned how to cancel a Web Request natively! 👏

🤩 Let's do this with React Hooks !

❌ BEFORE

Below is an example of a component that retrieves data in order to display them:

If I leave the page too fast and the request is not finished: MEMORY LEAK

✅ AFTER

So let's useEffect to subscribe to our fetch request and to avoid memory leaks. We use the clean method of useEffect for calling abort() when our component unmount.

Now, no more memory leaks! 😍

As always, feel free to reach out to me! 😉

You can check this demo on abort-with-react-hooks.vercel.app.
Also, here the source code of this article in this gist.

Cheers 🍻 🍻 🍻

If you enjoyed this article you can follow me on Twitter or here on dev.to where I regularly post bite size tips relating to HTML, CSS and JavaScript.

🚜 Improve your productivity with Snippets of JavaScript on the Chrome DevTools 🍄

Victor de la Fouchardière ・ Jul 22 '20

#javascript #productivity #chrome #tutorial

📱 5 Best Places to find free SVG/CSS icons for your websites 🪐

Victor de la Fouchardière ・ Jul 15 '20

#html #css #ux #beginners

🚜 Improve your productivity with Snippets of JavaScript on the Chrome DevTools 🍄

Victor de la Fouchardière — Wed, 22 Jul 2020 14:12:28 +0000

Hello guys! 👋

Sometimes you may write the same code in your console over and over again. Why not save this piece of code directly in your web browser? Use the Snippets!

Snippets have access to the JavaScript context of the page, which means that you can interact with document or window of any web page. It can become very effective during your work.

Note: Next week, I will show you the 5 best snippets so be sure to follow me 😉

Create a snippet

To create a snippet, nothing could be simpler: Open the developer console, go to the "Sources" tab and in the panels, click on "Snippets".

On the left of this panel are all your snippets. You can create, modify, delete and run a snippet in all tabs/pages.

Sources > Snippets

You can also go to the snippets panel by using the shortcut Control+Shift+P or Command+Shift+P (Mac) to open the Command Menu.

Control+Shift+P or Command+Shift+P

Run a snippet

Open the Snippets panel.
Click the name of the Snippet that you want to run.
Click Run Snippet, or press Control+Enter or Command+Enter (Mac).

Press Control+o or Command+o (Mac) to open the Command Menu.
Type the !NameOfTheSnippet

Control+o or Command+o

Rename a Snippet

Right-click on the snippet name and select Rename.

Delete a Snippet

Right-click on the snippet name and select Remove.

An example of snippets

Design Mode is a tiny snippet which puts Chrome into edit mode, allowing you to edit entire pages as though you were in an HTML editor.

This is very useful when you want to debug your website.

You can find the source code of the snippet in this gist.

Another example

In the snippet bellow, I get all images and display their informations (height, width, alt, lazy-loading, etc...). Very useful!

Voilaaaaa 👏👏

Next week, I will show you 5 very nice snippets to improve your productivity!

Cheers 🍻 🍻 🍻

📱 5 Best Places to find free SVG/CSS icons for your websites 🪐

Victor de la Fouchardière ・ Jul 15 '20

#html #css #ux #beginners

🚀 7 amazing CSS tips and tricks for linting your HTML 🔥

Victor de la Fouchardière ・ Jul 8 '20

#css #html #beginners #showdev

📱 5 Best Places to find free SVG/CSS icons for your websites 🪐

Victor de la Fouchardière — Wed, 15 Jul 2020 13:55:53 +0000

Hello! 🤗

1 week 👉 1 article published ! #FollowMe

Here a list of 5 websites that will make you change your life about icons. They are not the best, but they are the ones who I think are among the best.

The 5 websites below are open source and no registration is required.

Quick message: if you know about other great libraries, feel free to mention it in a reply.

1. Tabler icons

Licence: MIT
Website: tabler-icons.io
Made by: @codecalm

Get more than 550+ Customizable free SVG icons with Tabler icons!

A large icon set, with the possibility of customizing the stroke, color and size, being super handy if we are making wireframes or testing icons.

2. CSS.gg

Licence: MIT
Website: css.gg
Made by: @AstritMalsija

An amazing icon library with +700 free icons in pure #CSS.

css.gg offers a library of icons made in CSS completely free. They are of very good quality and the choice is quite consequent. You should be able to find everything you want.

Also available in SVG, SVG Sprite, styled components, Figma and Adobe Xd formats.

3. Feather Icons

Licence: MIT
Website: feathericons.com
Made by: @colebemis

Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and flexibility.

4. unDraw

Licence: MIT
Website: undraw.co
Made by: @NinaLimpi

The website undraw.co offers a collection of 600 illustrations in SVG format for free. A search engine allows you to display images corresponding to your search. For an entire search or on a selected image, it is possible to customize the color via the tool at the top right.

5. Heroicons

Licence: MIT
Website: heroicons.dev
Made by: @steveschoger @adamwathan @username_ZAYDEK

A list of SVG icons made by the creators of @tailwindcss! +170 icons currently, more to come in the future. To use these icons, simply copy the source for the icon you need.

Voilaaa!

You using another site that deserves to be shared? Indicate it in the comments below!

Cheers 🍻 🍻 🍻

🚀 7 amazing CSS tips and tricks for linting your HTML 🔥

Victor de la Fouchardière ・ Jul 8 '20

#css #html #beginners #showdev

🦄 How to scope your CSS/SCSS in React JS ⚡️

Victor de la Fouchardière ・ Jul 1 '20

#react #showdev #javascript #css

🚀 7 amazing CSS tips and tricks for linting your HTML 🔥

Victor de la Fouchardière — Wed, 08 Jul 2020 14:45:38 +0000

Hello guys !

Last week we learned How to scope our CSS/SCSS in React JS.

Today, let's discover 7 tips for linting our CSS.

CSS, for cascading stylesheet, is a language that will allow you to define the form to give to your document. In javascript, you probably use eslint to check your code for errors of any kind. But in css, how can we debug our style and see the possible mistakes ?

No prerequisites are required to use these tips. No package is also required.

Let's lint our CSS

1. Check `[alt]` attribute for img

Debug images without alt attribute with CSS. [alt] must be present on all images, although it can remain empty (for purely decorative images).

2. Relation between inputs and labels

Be sure to explicit relation between an input and its label. Use id and for attributes to do so.

3. Check the order of titles

The HTML <h1> - <h6> elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.

You should avoid skipping heading levels.

h2 above h1 🔴
h3 above h4 🟢
h6 above h5 🔴
h6 above h2 🔴

So check if our titles is out of order.

NOTE : Let's use the new :is pseudo class !

4. No `div` inside inline elements

This selector hunts for <div> inside of inline elements like a <span> or a <label>.

You can see the usage of :is selector to lint html and keep semantic.

5. Lang in the html document

html tag accepts lang attribute that is, according to MDN, very important for accessibility and accessible technologies like screen readers.

Why? Screenreaders take into account the language declared to adjust the pronunciation of words. A document without languages would be mispronounced.

6. Prevent malicious issues for anchors

When you link to a page on another site using the target="_blank" attribute, you can expose your site to performance and security issues:

The other page may run on the same process as your page. If the other page is running a lot of JavaScript, your page's performance may suffer.
The other page can access your window object with the window.opener property. This may allow the other page to redirect your page to a malicious URL.

Adding rel="noopener" or rel="noreferrer" to your target="_blank" links avoids these issues.

7. `picture` element must have a `.webp` source

According to Google, the WebP format reduces the size of images by 19 to 64%. This translates into websites that load faster and consume less bandwidth.

So let’s optimize performances with .webp images.

Here, I hope that these little tips will help you write your HTML better!

You can find all the css codes in this following gist.

Most of these tips can be found on the #lintHTMLwithCSS on Twitter

Cheers 🍻 🍻 🍻

🦄 How to scope your CSS/SCSS in React JS ⚡️

Victor de la Fouchardière ・ Jul 1 '20

#react #showdev #javascript #css

🔧 Build a complete Modal Component with React Hooks 🌈

Victor de la Fouchardière ・ Jun 24 '20

#react #javascript #showdev

🦄 How to scope your CSS/SCSS in React JS ⚡️

Victor de la Fouchardière — Wed, 01 Jul 2020 13:41:50 +0000

Hi guys ! 🤗

Next article about React JS! Last week we talked about How to build a complete Modal Component with React Hooks.

This week, let's discover a little trick that will allow you to scope your css/scss/sass in your React JS application.

In order to solve the problem of css encapsulation, there are two main approaches, css-modules and CSS-in-JS.
However, both of them have a very very big problem. The developer experience is not good, by which I mean you often have to write more code than you expect to achieve a simple style.

Created with meme-studio.io

With react-scoped-css created by @gaoxiaoliangz, you can just write the normal css you know, while having the advantage of css encapsulation!

React Scoped CSS

How does it work ?

Usually, you import your global style file in your React application, or you use a css file by component if like me you like to be rigorous. But the problem with this second approach is that your style is not scoped.

The scoped CSS allows you to targets a specific element and its children without any impact on other component.

Installation:

With create-react-app

Since create-react-app doesn't allow you to change webpack and babel config. So in this scenario, you have to use craco to override webpack config. Luckily you don't have to do it manually, just use a simple craco plugin.

Setup craco following this guide

# npm i craco-plugin-scoped-css --dev

Then, create a craco.config.js in your project root and add this code:

module.exports = {
  plugins: [
    {
      plugin: require('craco-plugin-scoped-css')
    }
  ]
}

Without create-react-app

You have to add one babel plugin and one webpack loader.

# npm i babel-plugin-react-scoped-css --dev

And in your babel config:

plugins: ["babel-plugin-react-scoped-css"]

Usage:

Just create your component and import your stylesheet. The css filename must be like [name].scoped.css (or .scss/.sass). But you can define your own matching rule (.scoped.css, .local.scss, ...) in the plugin configuration.

Your css (or scss/sass):

Result

As you can see in the html above, component with scoped css file imported has a unique data-v-<hash> attribute.

The css selector also has a corresponding hash like selector[data-v-<hash>]. So all the styles in home.scoped.css are scoped to Home.jsx.

Architecture

One common way to structure projects is to locate CSS, JS, and tests together inside folders grouped by feature or route. So here, let's group our JS and scoped css in a folder for one component!

Example of one of my projects

Voilaaa

You can find the Github Repo here: https://github.com/gaoxiaoliangz/react-scoped-css

Today, I use it on most of my projects and I encourage you to try it!

Cheers 🍻 🍻 🍻

🔧 Build a complete Modal Component with React Hooks 🌈

Victor de la Fouchardière ・ Jun 24 '20

#react #javascript #showdev

⚖️ 5 Useful and Modern Custom Hooks for your React App 🌟

Victor de la Fouchardière ・ Jun 17 '20

#react #javascript #productivity #showdev

🔧 Build a complete Modal Component with React Hooks 🌈

Victor de la Fouchardière — Wed, 24 Jun 2020 13:34:10 +0000

Hi guys !

Last week, we talked about 5 Customs React Hooks ! Many of you have shared this article. So this week, let's continue with React and the implementation of a Modal component without installing any packages!

A Modal component from scratch

Before starting, here are the elements we will use during this tutorial:

React Hooks
Portals from ReactDOM
A little bit of CSS

Let's start with our modal.jsx (or modal.js) file !

Our component:

Let's start with the basics: the creation of our function component. The goal is to include any content to the modal and to manage the opening and closing of the component.

Secondly, what we want is a modal that is independent of our application. We don't want to have any z-index concerns in css or any overflow concerns. So let's insert this component into a different location in the DOM. But how?

Let's introduce the Portals from ReactDOM !

Portals provide a way to render children in a DOM node that exists outside of the DOM component hierarchy, that is, outside of the #root or #app div of your React application.

First, let's add a new div to our html and give it a 'modal-app' ID. React does not create a new div, but displays the children in that modal-app div.

Note that the #modal-app can be any valid element of the DOM (div, section, span...), regardless of its position.

And for our component to be inserted in this #modal-app div, let's use the createPortal() method offered by ReactDOM.

Even though a portal can be anywhere in the DOM tree, it behaves like a normal React child in every other way. Features like context work exactly the same regardless of whether the child is a portal, as the portal still exists in the React tree regardless of position in the DOM tree.

Source : Portals - React

So let's include this method for our component like this:

Open the Modal

Logically, it will be the parent component that will ask the modal to open. But how could we proceed?

First of all, let's add a local state to our Modal component in order to know if the modal is open or not.

useState allows us to create our state with a boolean value. A defaultOpened prop will tell us if we want to open the modal directly on create. false is the default value.

isOpen true === Modal opened
isOpen false === Modal closed

We use the conditionally rendering with the JavaScript conditional operator.

Then, in order for the parent to change this local state, you'll have to call up the "refs".

This is where useRef, useImperativeHandle and forwardRef come in.

To call setIsOpen from the parent component, we need to attach a reference to our Modal.

useRef is used to attach a reference to our modal.
forwardRef is used to forward the reference to the Modal component.
useImperativeHandle is used to expose methods to the parent component.

Close the Modal

Then, there are several ways to leave a modal.

By clicking outside the content of the modal.
By using the small cross (x) of our content.
By using the ESCAP key of the keyboard.

First, let's capture the keydown event and check if the user use the ESCAP key of his keyboard.

useEffect allowing us to create a listener on the keydown event ONLY if the modal is open. If the user uses the ESCAP key on his keyboard, then the modal closes.

The result is:

The CSS !

You can find the css code here.

Usage

Demo: https://react-modal.viclafouch.vercel.app
Source code: https://gist.github.com/viclafouch/6ee36b2cb7d28484d20f05e68b3433f9

Voilaaa ! Feel free to add your own modifications !

Cheers

⚖️ 5 Useful and Modern Custom Hooks for your React App 🌟

Victor de la Fouchardière ・ Jun 17 '20

#react #javascript #productivity #showdev

🎭 A Full-stack Meme Generator with React Hooks + Express 🪐

Victor de la Fouchardière ・ Jun 2 '20

#showdev #webdev #react

⚖️ 5 Useful and Modern Custom Hooks for your React App 🌟

Victor de la Fouchardière — Wed, 17 Jun 2020 13:13:00 +0000

Hey guys 😃

Since the introduction of Hooks in React, you may have used the same repetitive and redundant state logic inside several components. But with the Hooks, we can do it in a much simpler and cleaner way, thanks to Custom React Hooks.

The different hooks shared in this article are simple and avoid code repetition.

5 Custom hooks for you !

You will find below several custom Hooks without the need to download packages on npm or yarn.

Created with meme-studio.io

This will allow you to modify them as you wish.

A custom Hook is a JavaScript function whose name starts with use and that may call other Hooks. For example, useTheme below is our first custom Hook.

Your version of React must be at least 16.8.

`useTheme`:

Let's start with a simple custom React Hook to help you implement a "light/dark mode" component for your application. The user setting persists to localStorage and the default value is the prefers-color-schema value if this one is supported.

This hook makes it easy to dynamically change the appearance of your app using CSS variables.

The hook:

And for the CSS, just use the data-theme attribute and the power of CSS variables to create our themes.

`useViewport`:

The hook will allow you to easily manage the viewport of the user's device. You will be able to retrieve the width of the screen but also to know if the screen size corresponds to a mobile, a tablet or a desktop.

The hook

How to use it:

Your components may be different depending on the width of the screen, but here is an idea of how to use this custom React hook.

`useClipboardApi`:

Do you want to copy a text or an image and read the content from the clipboard ? Well here is a custom Hook using the new Clipboard API.

Feel free to read this article How to Copy an Image or a Text to Clipboard in Javascript I wrote to understand how this API works and the browsers that support it.

In this hook, two important things:

Reading and writing to the clipboard are asynchronous.
2 permissions are required to use the read and write methods of the clipboard.

The hook:

How to use it:

A very popular feature on websites is the ability to copy an element to your clipboard by a single click to a button. Let's copy a dynamic text value!

`usePageVisibility` :

Have you ever wondered if the tabs/windows are using precious CPU time? Thanks to the Page Visibility API, we can detect when users are not viewing or interacting with our website, saving them valuable resources.

The visibility API allows a developer to know when a page has lost the focus. The API sends a visibilitychange event of the visibility of the page.

So it can be used for things like:

Pause a video when the page has lost user focus.
Change the page title.
Stop an HTML5 canvas animation when a user is not on the page.
Display a notification to the user only when the page is active.
Stop the movement of a carousel.

The hook:

How to use it:

Let's change the title of the page if the user is not viewing the page.

`useScroll`:

With this hook, you'll be able to control the scroll y of the page and to go back to the top/bottom with a smooth scroll. This can allow you to create an infinity scroll (fetch() when isAtBottom is true).

The hook:

How to use it:

Let's show a newsletter popup if the user has scrolled to the bottom of the page.

Voilaaa !

Feel free to use these modern hooks ! The links to the gists associated with this article can be found below:

Cheers !

🎭 A Full-stack Meme Generator with React Hooks + Express 🪐

Victor de la Fouchardière ・ Jun 2 '20

#showdev #webdev #react

🎉 How to Copy an Image or a Text to Clipboard in Javascript (2022) ☘️

Victor de la Fouchardière ・ Jun 11 '20

#javascript #news #webdev #tutorial

DEV Community: Victor de la Fouchardière

👑 Create a secure Chat Application with React Hooks, Firebase and Seald 🔐

Structure of our chat app 🧰

The main tools used are:

Auth system 👨‍💻

Password derivation 🔏

Sign up 👤

Sign in 👤

Rooms 👨‍👩‍👦‍👦

Create a room 🧸

Send encrypted messages 🔏

Decrypted messages 🔐

🤝 Promise.allSettled() VS Promise.all() in JavaScript 🍭

Victor de la Fouchardière ・ Aug 16 '20

📦 GitHub Profile: The RIGHT Way to Show your latest DEV articles + BONUS 🎁

Victor de la Fouchardière ・ Aug 5 '20

🍿 Publish your own ESLint / Prettier config for React Projects on NPM 📦

A quick reminder 🧠

1. Create the repository ✏️

2. Create an ESLint configuration 🧰

ESLint config 🔹

Prettier config 🔸

Export your config 💡

Publish your config on NPM 🚀

Import your config into your React Apps 🎉

viclafouch / eslint-config-viclafouch

🛠 These are my settings for TypeScript / ESLint / Prettier in a project

🤝 Promise.allSettled() VS Promise.all() in JavaScript 🍭

Victor de la Fouchardière ・ Aug 16 '20

📦 GitHub Profile: The RIGHT Way to Show your latest DEV articles + BONUS 🎁

Victor de la Fouchardière ・ Aug 5 '20

🤝 Promise.allSettled() VS Promise.all() in JavaScript 🍭

Promise.all() 🧠

Promise.allSettled() 🦷

Differences 👬

Supported Browsers 🚸

📦 GitHub Profile: The RIGHT Way to Show your latest DEV articles + BONUS 🎁

Victor de la Fouchardière ・ Aug 5 '20

🍦 Cancel Properly HTTP Requests in React Hooks and avoid Memory Leaks 🚨

Victor de la Fouchardière ・ Jul 29 '20

Share your Portfolio here 📣

What is your portfolio URL ? And how is your portfolio site built (React.js? Vanilla? ROR? ...)

📦 GitHub Profile: The RIGHT Way to Show your latest DEV articles + BONUS 🎁

How To Create A GitHub Profile README

Monica Powell ・ Jul 11 '20

Before to begin, be sure to have a Github Profile 💪

Show your last 3/5/10 DEV articles 🔥

gautamkrishnar / blog-post-workflow

Show your latest blog posts from any sources or StackOverflow activity or Youtube Videos on your GitHub profile/project readme automatically using the RSS feed

Step 1: Edit your README.md 📝

Step 2: Create a simple bot 🤖

BONUS 🏆

🍦 Cancel Properly HTTP Requests in React Hooks and avoid Memory Leaks 🚨

Victor de la Fouchardière ・ Jul 29 '20

🚜 Improve your productivity with Snippets of JavaScript on the Chrome DevTools 🍄

Victor de la Fouchardière ・ Jul 22 '20

🍦 Cancel Properly HTTP Requests in React Hooks and avoid Memory Leaks 🚨

🚀 Let's use the new AbortController API !

Basics of AbortController

🤩 Let's do this with React Hooks !

❌ BEFORE

✅ AFTER

🚜 Improve your productivity with Snippets of JavaScript on the Chrome DevTools 🍄

Victor de la Fouchardière ・ Jul 22 '20

📱 5 Best Places to find free SVG/CSS icons for your websites 🪐

Victor de la Fouchardière ・ Jul 15 '20

🚜 Improve your productivity with Snippets of JavaScript on the Chrome DevTools 🍄

Create a snippet

Run a snippet

Rename a Snippet

Delete a Snippet

An example of snippets

Another example

📱 5 Best Places to find free SVG/CSS icons for your websites 🪐

Victor de la Fouchardière ・ Jul 15 '20

🚀 7 amazing CSS tips and tricks for linting your HTML 🔥

Victor de la Fouchardière ・ Jul 8 '20

📱 5 Best Places to find free SVG/CSS icons for your websites 🪐

1. Tabler icons

2. CSS.gg

What is your portfolio URL ? And how is your portfolio site built (`React.js`? `Vanilla`? `ROR`? ...)

1. Check `[alt]` attribute for img

4. No `div` inside inline elements

7. `picture` element must have a `.webp` source

`useTheme`:

`useViewport`:

`useClipboardApi`:

`usePageVisibility` :

`useScroll`: