DEV Community: Rémy Hidra

Discover my method to become a Web developer in less than 2 months !

Rémy Hidra — Thu, 16 Dec 2021 12:49:27 +0000

How do people learn foreign languages fast ?

Basically, they combine two principles :

You do not need to know everything about a subject to be confortable with it.

You will remember only what you practice.

Well, you can apply those principles to learn Web dev very efficiently ! First, you need to prioritize and eliminate everything that is not absolutely necessary to know. Then, everytime you encounter a new topic, you must practice it, ideally in a complex project.

Here is my method to start from scratch and efficiently become a Web developper in less than 2 months, by practicing !

HTML & CSS ⇒ To make an attractive website

Learn the basics of HTML and CSS through one of the billions of free courses that already exist. It should not take you more than a week or two, especially if you know your way around computers 😉 !

More importantly, because this topic is quite boring, practice every new thing you learn through a portfolio, which you can later use to show your work.

This portfolio should act as a sandbox environment for you to experiment every new piece of information you encounter. It does not matter if it is not professional or clean looking, but it does matter that you have fun while making it !

Vanilla JS ⇒ To add little interactions

Use Javascript to add basic interactions to your portfolio. If it is your first programming language, take your time to assimilate every concept, two weeks is not too much to do that. Remember, your portfolio is a fun experiment field, so add fun interactions !

A list of possible simple interactions :

A dark mode switch
A tab system for a section of your portfolio
A fun and dum little chatbot
A collapsable animated component
A secret page that requires password to access 🔒

Git ⇒ To fix your own mistakes

No need to learn Git very deeply, simply spend a day or two to be confortable with the CLI. Setup Git with your portfolio. Learn the role and how to make commits, pull requests and branches. Try to understand how Git can help you roll back to previous versions of your code.

Put your project online on Github, and setup a Github Pages. Now you can share it with the world ! So send it to your friends and see what they think !

React/VueJS ⇒ To easily make incredibly complex apps

Time to learn a front-end framework ! You can learn React or VueJS, both do the same kind of stuff, but once you start with one, you should stick with it. Do your own research to see what you would prefer. If your programming basics are good, you should not need more than a week.

For both frameworks, the original documentation is very good and well maintained, so start with that. For React, make sure to learn hooks and the functional way of writing components.

As always, practice by making a small project. Maybe you are sick of your old portfolio now ? Good, because you should do something a bit more interactive.

Try a ToDo app or reproduce any kind of simple app you use daily.

Stay away from advanced features like authentication or database. You will need a backend for that. Focus on learning the frontend framework as fast as possible. Use the local storage if you need to.

Node + Express + SQL ⇒ To learn back-end and understand how 90% of apps work

This is a big one, so try to not get drown under too much information. Focus on that for only 1 or 2 weeks.

Make a small backend to store data for your frontend app. Don't waste too much time to connect both apps together, use a tool like Postman. Try to understand the role of every element you are manipulating.

First setup a Node/Express server that can receive various HTTP request from Postman. Play with the HTTP protocol, try to understand the REST paradigm.

Then, setup a SQL database, connect it to your Node backend, and use Postman to perform operation on your database. Try to store data, and get it back.

If you still have time, try to connect your API to your front-end app. But don't waste too much time on that.

Improve your stack ⇒ To build your dream project !

There is so many cool and interesting frameworks, libraries and tools in the Web ecosystem, but you don't have time to learn all of them. And a company cannot ask you to know everything. What you need however, is a deep understanding of the basics, and know what kind of tool you need for the right problem.

So it's time to have fun ! Imagine a cool and more original project, something that you would be proud of. Try to solve a problem in you and your friends' life. Scroll through public APIs and find a cool way to use some.

You don't think you can build it ? Good ! That's what everybody think at first.

Now, plan how to build it, research online some tech you may need, and finally, once you have a global overview of your project, start coding. The total process may take some time, depending on your ambition, spend at least a week or two, but maybe more if you want. Either way, you will learn a lot.

You should know how to make a front-end interface, usable on desktop and mobile, how to make it widely interactive, and how to connect that to a back-end, which can handle a database and storing any kind of data.

You will probably need an authentication system (Passport, JWT, Okta, ...), a nice design CSS framework (SASS, Tailwind, Bootstrap), or a third-party API. But if you made it this far, you should be able to gather all the necessary information to decide what you should do.

Use the community, because sometimes you will be really stuck...

Nowadays, you can very easily find communities. If you found this post, you probably are already in some of those. You can participate there and plenty of people will be very happy to help you !

Stackoverflow, Twitter, Reddit, ... have amazing communities for self taught learners, use them well !

Just remember to give back to the community you are in. Answer to other beginner questions, it could start a conversation and you could end up learning even more !

You are done with your big dream project ?

Great ! Now polish it as much as possible. Show it to one or two people. See how they react, and fix your project accordingly.

And now share it with the rest of the world !

To put it online, if you are feeling adventurous, you can try to use Docker and CI/CD pipeline tools.

And don't forget to put it in your precious portfolio.

Oh and... one more thing... Congrats on becoming a Web developer ! 😲 🥳

💡 Feel free to follow me on Twitter (@remyhidra), to get more articles and tutorial about Web development. I just started writing blog posts and I am trying to build a small audience from it, so there will be plenty of content coming soon ! 😄

Build a real-time leaderboard with D3.js and React !

Rémy Hidra — Tue, 14 Dec 2021 09:13:54 +0000

As web apps are more suited for real-time data processing, we need more and more data visualization solutions for real-time data, with a responsive layout.

In this article, I show you how to make this simple leaderboard, using D3.js and React.

D3.js is one of the standard library for front-end data visualization rendering. It a declarative system to build an underlying complex SVG.

To bring life to your leaderboard, I will show you how to make simple animations. They will make real-time more readable and interesting for the user.

Lastly, we will make sure to have a responsive leaderboard, which should adapt to any size of input data, while staying readable on a smaller screen.

💡 You already want to check out the end result ? Look at it here !

Are you ready ? Then let's get started !! 🤩

Setup the project and libraries

To follow along with this tutorial, you can either setup the article's project in a few commands, or you can adapt it directly in your project.

We are going to use 3 libraries : D3.js and React, of course, but also react-use-measure, a small librairy to easily measure React components. This will be useful to have a flexible and responsive SVG component.

Using the tutorial project

To follow along the article, you download the article's React project using these simple commands.

# Cloning the starter project
git clone -b setup git@github.com:rhidra/d3js-leaderboard.git
cd d3js-leaderboard

# Install dependancies
npm i

For your own project

Install D3.js.

npm i d3

Install a small React library to measure components. This will be useful when we try to make our leaderboard responsive.

npm i react-use-measure

Overview of the initial setup

If you look in the App.jsx file

<div className="app">
  <div className="leaderboard-container">
    <Leaderboard
      data={data}
    />
  </div>

  <div className="button">
    <button onClick={() => refreshData()}>Refresh Data</button>
  </div>
</div>

We have two blocks, one with our future leaderboard, and one with a button. If you look at the rest of the file you can see that the button will update the data passed to the leaderboard in the data variable.

Basically, we give some data to the leaderboard. This data may come from the frontend, as it is now, but it may also come from a backend, using an asynchronous function.

The goal of the leaderboard is to update the data in real-time, without refreshing the page. So, in the Leaderboard component, we must consider possible changes to the data input.

Now let's take a look at the Leaderboard.jsx file.

import { useRef, useState, useEffect } from 'react';
import * as d3 from 'd3';

function Leaderboard({data}) {
  const d3Ref = useRef(null);

  useEffect(() => {
    /***
    Write D3.js code here !
    ***/
  }, [d3Ref, data]);

  return (
    <svg
      ref={d3Ref}
    />
  );
}

export default Leaderboard;

In the useEffect(), you will write all the D3.js code. The Leaderboard component is basically just made of a <svg> component. In the following sections, we are going to connect it to D3.js. Then, we will use the framework to draw shapes and text on the SVG canvas.

Finally, we can take a quick look at the data. It comes from the data.js file and is made of a unique ID, a label and a value.

const data = [
    ...
    { "id":15, "value":33, "label":"Indonesia" },
  { "id":16, "value":14, "label":"China" },
  { "id":21, "value":7, "label":"Germany" },
  { "id":22, "value":12, "label":"China" },
  { "id":23, "value":38, "label":"Argentina" },
  { "id":24, "value":58, "label":"China" },
    ...
];

Setting a fixed width and height

First of all, because we want a flexible and responsive design, we should not use the SVG viewBox parameter. Because of this, we must specify a fixed width and height for the SVG component.

Since we will know the height of one row of the leaderboard, we can easily compute the total height. We can also include some margin and padding, if we want to.

Because we want a vertical leaderboard, which should take all the horizontal space, the CSS width should be 100%. Unfortunately, we cannot write <svg width="100%"/>, we must use a value in pixel. A solution is to measure the child component from the parent. In App.jsx, you will measure the width of the Leaderboard child. Then, you can pass it its width as a parameter.

Here is the new Leaderboard.

function Leaderboard({data, width}) {
    // ...

    // Constant (in px)
    const rowHeight = 60;

    // Total height of the leaderboard
    const [height, setHeight] = useState(rowHeight * data.length ?? 0);

    useEffect(() => {
        // Update total height, to use the most up-to-date value 
        setHeight(rowHeight * data.length);
      const height = rowHeight * data.length;

        // ...
    }, [d3Ref, data, width]);


    return (
        <svg
          width={width}
          height={height}
          ref={d3Ref}
        />
      );
}

For App, there is no easy, one-line solution to easily measure the size of a component. So instead, we will use a React library, react-use-measure. It is quite popular and very easy to use.

This makes our App look like this.

import useMeasure from 'react-use-measure';

// ...

// Use React-use-measure to measure the Leaderboard component
const [ref, {width: leaderboardWidth}] = useMeasure({debounce: 100});

return (
    // ...
    <div className="leaderboard-container" ref={ref}>
      <Leaderboard
        data={data}
        width={leaderboardWidth}
      />
    </div>
    // ...
);

One last important thing : do not forget to set a constant max-width and width: 100% in the CSS, so that the leaderboard component does not extends its width indefinitely, and it looks good on smaller devices !

Let's draw some SVG !

Now that the boring stuff is done, time to have some fun 🥳 !

useEffect(() => {
    // ...

    // Select the root SVG tag
  const svg = d3.select(d3Ref.current);

    // Scales
    // Get the biggest value in the set,
    // to draw all other relative to the maximum value.
  const maxValue = d3.max(data.map(d => +d.value)) ?? 1;
  const x = d3.scaleLinear().domain([0, maxValue]).range([5, width]);
  const y = d3.scaleLinear().domain([0, data.length]).range([0, height]);

    // Join the data
    // We use the ID of a row to distinguish identical elements.
    const g = svg.selectAll('g').data(data, d => d.id);

First, we select the root SVG component, and we draw <g> elements, one for each data row. In SVG, a <g> element is just a group of other elements.

We also define a few scaling utility functions x and y, using the maximum value of the dataset.

On the last line, we are telling D3.js to use the ID of a row to look for identical rows. Note that our code will be executed every time we change the data or the screen size, so rows may already be drawn. Maybe the value will be the same, but the order may not, so we must move it. Therefore, using D3.js, we can easily decide what to do whether we are creating, updating or deleting a row.

To recap a bit, first we are going to define rows at creation, then how each one should be updated (the newly created, but also previously modified rows), and finally we will define a small animation before removing the row.

Create the rows

At the initialization, we will simply define the skeleton of the SVG, i.e. creating the tags with as much static information as possible. The g.enter() function isolate the rows that needs to be created.

// Initialization
const gEnter = g.enter()
  .append('g')
    .attr('transform', `translate(0, ${y(data.length) + 500})`);

First, we define the <g> element of our row, and we give it a transformation. This transform instructions moves the group vertically to y(data.length) + 500 . In other words, it moves the row beyond the bottom of the leaderboard, to not be in sight. This will allow us to make a small enter animation for when new rows are added.

// More constants !
const fontSize = '1.1rem';
const textColor = 'black';
const bgColor = '#d4d8df'; // Background bar color (grey)
const barColor = '#3d76c1'; // Main bar color (blue)
const barHeight = 10;
const marginText = 2; // Margin between the text and the bars

// Append background rect as child
gEnter
  .append('rect')
    .attr('class', 'bg')
    .attr('fill', bgColor)
    .attr('x', 0).attr('y', marginText)
    .attr('rx', 5).attr('ry', 5)
    .attr('height', barHeight);

// Append main rect as child
gEnter
  .append('rect')
    .attr('class', 'main')
    .attr('fill', barColor)
    .attr('x', 0).attr('y', marginText)
    .attr('rx', 5).attr('ry', 5) // Rectangle border radius
    .attr('height', barHeight);

// Append label text as child
gEnter
  .append('text')
    .attr('class', 'label')
    .attr('font-size', fontSize)
    .attr('fill', textColor)
    .attr('x', 0)
    .attr('y', -5)
    .text(d => d.label);

// Append value text as child
gEnter
  .append('text')
    .attr('class', 'value')
    .attr('text-anchor', 'end')
    .attr('fill', textColor)
    .attr('font-size', fontSize)
    .attr('y', -5);

Our row is made up of four elements :

The background bar in grey, which should always have the same shape.
The main bar, above the background bar, which has a variable width and a color.
The label, with a constant value found in the row data.
The value text, with a variable value.

The lines are quite self-explanatory, we siply set color, size and position attribute to the four elements.

Update the rows

Now that we created each necessary row, we can take care of updating them, if they need to.

// Update each g row, when data changes
const gUpdate = g.merge(gEnter);
gUpdate
  .transition()
    .ease(d3.easePoly)
    .duration(500)
    .attr('transform', (d, i) => `translate(0, ${y(i) + 30})`);

Because we use a parent <g>, we can simply update its transform attribute to move the row to the right position. You can see that we display the rows in order, which is why we use the i index parameter instead of the value d.value.

You can also see that we use a transition animation. If you remove it, you will see an ugly snap of all the row at their positions.

// Update rect bg
gUpdate
  .select('rect.bg')
  .attr('width', x(maxValue));

// Update rect main
gUpdate
  .select('rect.main')
  .transition()
    .ease(d3.easePolyOut)
    .duration(1000)
    .attr('width', d => x(d.value));

// Update value text
gUpdate
  .select('text.value')
  .text(d => d.value)
  .attr('x', x(maxValue));

Here we update the rest of the elements. We set the correct width to the rectangles, also by using a transition animation. And we also update the text value. As you can see, since the label is constant, we do not need to update it. If you don't have a constant label for a same ID, you will probably need to update like here.

Remove the rows

Some rows won't be present in the dataset after an update, so we must remove them. To do that, we use the g.exit() function, which isolate rows which should be removed.

// Exit animation
g.exit()
    .attr('opacity', 1)
  .transition()
    .ease(d3.easeLinear)
    .duration(200)
    .attr('transform', (d, i) => `translate(-50, ${y(i)})`)
    .attr('opacity', 0)
  .remove();

To remove them, we simply move them 50 pixels left smoothly, and we reduce slowly their opacity to 0. You can tweak the .duration(200) if you are not happy with the exit animation duration.

And... That's it ?

Yup ! That's it ! 😁

You can try it with a smaller screen size, and change the data input. It probably does not look exactly as you want for your project, so you can add more properties and tweak the parameters in the D3.js code.

You can check out the full project source code, and a live demo of the leaderboard 📊.

💡 Feel free to follow me on Twitter (@remyhidra), to get more articles and tutorial about Web development. I just started writing blog posts and I am trying to build a small audience from it, so there will be plenty of content coming soon ! 😄

Additionaly, tell me in the comments, what other kind of data visualization would you like to build ?