What tools do I need for frontend web development?

Just learn JavaScript

Every year there are new tools to help you get started with web development. And every year they pile up and make it harder for someone new to get started. It's easy for a veteran programmer to recommend a bunch of tools and libraries to get started, but they forget the fact that they had spent years learning about their tooling. But if you are new, do you start with React? Or is it Angular? Do you learn jQuery? Or do you go straight to Vue? Can you do anything if you don't have npm installed?

It's impossible to keep up. Before you master one particular tool, a new version will come out and you'll have to relearn. I was learning meteorJS for a project that I was supposed to work on but I was diverted into a more urgent project. Few months later, things settled down and I came back only to find that the developers had switched to EmberJS. To write this post, I tried to re-acquaint myself meteor js only to find that the 2018 version has almost nothing to do with what I learned in 2014.

So out of all the tools that exist today and are constantly changing, what is the best tool you can learn and which of them will be future proof?

The answer is JavaScript.

We have created so many tools around JavaScript that we have forgotten all about JavaScript. When I ask a new developer to create a page and I see them looking for npm packages, I cringe. To do web development, at the basis you only need HTML, CSS, and JavaScript. In fact, let's create an example right now. Create this folder structure below:

project/
   |___css/
   |___js/

Create an HTML file called index.html under project and add this content.

<!doctype html>
<html>
<head>
    <title>2 minute page</title>
    <link href="css/main.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" srs="js/main.js"></script>
</head>
<body>
<header class="page-header">
    <h1>Quick Two minute page</h1>
</header>

<div class="page-content">
    <h2 class="page-title">Text Editor</h2>
    <div class="box">
        <div class="box-left">
            <textarea id="text">Hello</textarea>
        </div>
        <div class="box-preview" id="preview">
            Hello
        </div>
    </div>
</div>

<footer class="page-footer">
    <p>Made by Ibrahim Diallo 2018 - CC0 - Public domain</p>
</footer>
</body>
</html>

Create a css file called main.css under the css folder and add the following content:

body{
    padding:0;
    margin:0;
}
.page-header {
    text-align: center;
    background-color:#f0f0f0;
    color:#333;
}
.page-header h1 {
    margin:0;
    padding:24px 0;
}
.page-footer {
    height:48px;
    position:fixed;
    bottom:0;
    background-color:#333;
    color:#f0f0f0;
    width: 100%;
    text-align: center;
    padding:0 6px;
}
.page-content {
    background-color:#fafafa;
    padding-bottom: 48px;
}
.page-title {
    margin:0;
    padding:6px 12px;
    line-height: 1.35em;
    font-family: Arial;
    text-align: center;
}
.box {
    max-width: 1024px;
    margin:0 auto;
    padding:;
}
.box::after {
    clear:both;
    content:" ";
    display: block;
}
.box-left, .box-preview {
    float:left;
    width:40%;
    margin:12px 2.5%;
}
.box-left textarea {
    width:100%;
    padding:6px;
    border-radius: 4px;
    min-height: 300px;
}
.box-preview {
    position:relative;
    padding:6px;
    border-radius: 4px;
    background-color:#fff;
    box-shadow: 0 2px 2px rgba(0,0,0,.16);
    min-height: 300px;
}
.box-preview::before {
    content:"Preview";
    position: absolute;
    top:-16px;
    right:0;
    color:#aaa;
}

Create a js file called main.js under the js folder and add the following content:

var Editor = {
    input:null,
    preview:null,
    init:function(){
        this.input = document.getElementById("text");
        this.preview = document.getElementById("preview");

        this.input.onkeyup = function(){
            Editor.preview.innerHTML = this.value;
        }
    }
};
window.onload = function(){
    Editor.init();
}

Save this files, double click on the index.html file and you should see it open on the browser right away. You didn't have to add any tools or libraries to create your web page. In a few minutes you have something going without having to install a single piece of software. This doesn't mean you will not add any external libraries to your project, but it helps you get started without having to create complex things you won't understand.

If you had to start with React or redux, or typescript, chances are you will give up very early in your career. But start with simple tools and you will give yourself room to grow.

Here is an example of something I created using these 3 simple tools: ibrahimdiallo.com

ibrahim diallo

Next year there will be new JavaScript frameworks and they will be popular. You will see their name in every job application and you will feel left behind because you don't have time to learn them all. But if you have mastered JavaScript, no new framework will scare you because after all they are all written in JavaScript. Study JavaScript, most importantly use it, and you will be ahead of the majority.


Comments

There are no comments added yet.

Let's hear your thoughts

For my eyes only