The goal of this application is to represent visually the services, processes, etc.

Image for post
Image for post
The project

We agreed to do a force-directed graph like this one http://visualdataweb.de/webvowl/#. But because there are more than 300 nodes to represent and for performance reasons, we chose canvas over SVG.

Image for post
Image for post
The demo

The purpose

We wanted to create an open-source project, therefore, it was obvious to find an open-source tool. D3.js matches well. Also this project needed a straightforward setup process.

Finally there is a config system to have an agnostic application.

The config

We decided to use React for the front-end and Go for the back-end.

We used react-create-app instead of setup the project ourselves. …


Image for post
Image for post
Illustration: https://www.pexels.com/@kevin-ku-92347

So you know the bases, you work with React, Vue, Angular, Node, VanillaJS … but sometimes you get stuck on your code and that’s frustrates you ?
Or maybe you want to be better in coding challenges. No matter the reason, these Github repositories will help you to be a better JavaScript developer anyway.

Algorithms / Computer Science

https://github.com/trekhleb/javascript-algorithms

You’ll find everything about algorithms and data-structure, it’s very complete, classed in two categories (Beginner/Advanced).
Of course, I advise you to start with the Beginner part.
There are informations about Big O notation and data structure operations / array sorting algorithms complexity.

Maths

https://github.com/Jam3/math-as-code

Okay, you can do some maths in the repository above. But with this one, you’ll see way more maths like Euclidean norm. Therefore, how math formulas are represented in JavaScript. …


Image for post
Image for post

Technological watch is good but can go a step further.

Automate everything you can

Image for post
Image for post

As a web developer, you have to be lazy. Every painful, repetitive task can be automated. Try doing a list to identify those repetitive tasks.

You don’t have a CLI in your project ? Create one. You can make a script that generates directories, files, specifically for your project.

If you are a Front-end Developer, try to use Node.js, make a little script or if you are interested in another language, it would be the opportunity to learn new things.

Know how things work under the hood

Image for post
Image for post

With platforms like Github, you can access to a large, free documentation. Be curious about how your modules work, especially the big ones. …


Image for post
Image for post

and deploy quickly with Netlify

VuePress is static site generator made by creator of VueJS. Vue-apollo, Vue-test-utils, etc. use this tool for their documentation. We are going to see how we can use it to create a nice documentation and how we can deploy with Netlify.

Read my article on Netlify :

Demo.

The code is here.

Let’s get started.

Setup

You need to add vuepress globally. Create a directory named tuto-vuepress. Go inside and create a README.md file.

# install globally
yarn global add vuepress # OR npm install -g vuepress
➜ tuto-vuepress echo ‘# VuePress tuto’ > README.md

Create a directory named docs and put inside a directory named .vuepress. Then create inside a file named config.js. In this file we will add the name of the app, the routes, etc. …


If you are a Front-end Developer looking for a tool to deploy your website with a few configs and extras like Continuous Delivery, but Devops world scares you, I recommend you to use Netlify. You can keep a familiar platform like Github, with just two inputs to fill in the interface and you can quickly send your website in production. After you can go further and for instance choose to set environment variables, specially if your website back-end is in Node.js.

Image for post
Image for post
You just has to fill build command and public directory

Pay attention to logs

Logs are helpful. Don’t hesitate to read all of it before ask for help. For instance the first time I tried to deploy, I had an issue. I thought the logs wasn’t helpful because I saw one “Error” at the bottom but no precision about it. But by reading all the logs, I understood that it was about Yarn. …

About

Assitan Koné

Front-end developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store