What tools do I need for frontend web development?

Just learn JavaScript
By
Published ~ 5 minutes read

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" src="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.

On a related note, here are some interesting articles.

Writing history by mistake

Writing history by mistake

Social media is the business of sharing ideas not worth doing but appealing to spread. Everyday there are some fantastic comments, ideas, and pieces of wisdom shared on social networks. These receive, in social metrics, tons of supporters.

Real Programmers.

Real Programmers.

When it comes to programming, there is no such thing as an expert. Well, there is one. Only one expert though, but that's beside the point. The field of programming evolves and changes, every day you have a new battle and you cope with the fact that you will not stick with the same routine for long. OK fine, his name is Jon Skeet and you can find him on Stackoverflow. So annoying...

A new framework won't solve the problem

A new framework won't solve the problem

One of the recurring tasks as a software developer is to fix bugs on tools that have been designed for an earlier time. You may get a project that was written in PHP 4, or a JavaScript tool that still tries to sniff for Netscape. It is easy to see how outdated the tools are and try to upgrade them. Most often than not, the task turns into a complete redesign rather than a bug fix and it ends up costing much more time than originally planned.

View all articles

Comments(2)

David :

There is a typo in the index.html srs="js/main.js" <-- should be src ?

Ibrahim :

Thanks David. I will update.

Let's hear your thoughts

For my eyes only