Developer Tools

Editors and IDE

Visual Studio and Atom lead the way.

Visual Studio is an IDE (Integrated Development Environment) developed by Microsoft, popular for its support of multiple languages and debugging tools.
VS is quite a beast and better suited for large, complex projects.
Visual Studio is available on Windows and Mac OS alike.

The little brother of Visual Studio, is Visual Studio Code (or VSCode for short). While Visual Studio is an IDE, VSCode is simply an editor, much more light weight, free and open source.

Visual Studio Code

If you prefer not to buy into the Microsoft ecosystem, Atom is the best choice.
Loved by the tech community for its flexibility, Atom, the “hackable text editor for the 21st century” was developed by GitHub and is completely free and open source. Hundreds of packages and themes are developed every day by individual contributors so you can customize your dev editor as you like or build your own package.

Atom

Other tools worth mentioning are Sublime Text and JetBrains with their array of language-centric tools, such as Webstorm for JavaScript; it supports Angular, React, VueJS, NodeJS and Meteor. You can still achieve the same with Atom by installing the right packages.

Web Browsers

Chrome is the undisputed web browser for developers. If you’re programming any web app or building a website, Google Chrome is your go-to browser with a powerful console for debugging your code and thousands of Chrome Extensions, such as specific debuggers for Vue.js, Angular and React.

HTML & CSS

Making up the fundamental building blocks of any website or web app, all web developers have to work with HTML at some point in their lives. HTML5, the latest version of HTML, brings tons of improvements, such as semantic tags, like <article> or <section>, new attributes on form elements, like number, date and time; and multimedia elements, like <audio> and <video>. In general, it’s easier to learn HTML5 today more than ever before thanks to wide browser compatibility and easier syntax.

<section>
    <header>
        Your header
    </header>
    <p>
        Your content
    </p>
    <footer>
        Your footer
    </footer>
</section>

CSS3 is the latest evolution of the Cascading Style Sheets language and its purpose is to style web pages built with HTML, which would otherwise look dull and boring. CSS3 brings tons of long-waited novelties, like shadows, rounded corners, gradients and animations. If you’re learning CSS in 2019, consider yourself lucky, your life is already much easier than if you had to hack your way into making web apps look good only a few years ago. Properties like Flexbox and CSS Grid are now supported by all browsers, which means less headaches and time wasted for you.

.main {
    color: rgba(255, 0, 255, .5);
    border-radius: .6em;
    box-shadow: 2px 5px 0 0 rgba(44, 44, 44, 1);
    display: grid;
}

Responsive Layouts

Extending on HTML & CSS, responsive layouts are a must in 2019. If you’re developing any website or web app, you should consider making your layout look good and functional on mobile, tablet and desktop. With CSS3 media queries and client-side routes used in React, Angular and Vue.js it’s easier than ever to make your pages look good and load content fast without reloading the entire page, which improves the user experience especially on mobile devices.

Hosting

Once you’ve developed your web app or website, you’ll want to host it on a third-party server, so that the world can access it.

Currently, the most popular hosting platforms are AWS and Digital Ocean. AWS may seem a bit scary at first, as it provides thousands of different options to configure your server, and if you don’t know what you’re doing, you’ll be constantly worried you may break your app, but if you do know how to configure your server, you’ll gain on customization.
Digital Ocean is a better alternative if you want something that is ready to use with minimal configuration.
Heroku has been an all-time favorite for many web developers over the years, thanks to its easy to deploy system via git push, however it’s losing ground lately. Of the 3, Heroku is still the easiest to setup and launch if you’re new to web development.

For static pages, that don’t need to run a server, one of the best options in 2019 is Firebase, owned by Google, which is free, fast and easy to set up, you can launch your app or site with a single line of code: firebase deploy.
Static pages don’t necessarily mean .html pages of a website, you can run an entire dynamic app built with Angular, React or Vue.js on Firebase and make it talk to your server hosted on Digital Ocean or Heroku via REST API.
Furthermore, Firebase has a NoSQL database system and Cloud Functions which are well suited for small mobile apps or to store small amounts of data if you don’t want a separate hosting provider for your back-end code.

Another good option, if you want a git push system a la Heroku, is Netlify, which starts with a free plan.

Pre-Processors

Pre-Processors are here to make your life easier. They’re not mandatory but once you start using them, you can’t go back and if you haven’t used them yet, you’ll think “why haven’t I used this before?”.

For CSS, the most popular is Sass. Sass allows you to write quicker, more structured and more centralized CSS, like using variables. So, if you want to change let’s say the color of all your buttons on all your pages, instead of looking for that color in all your CSS files, you can simply change 1 line in your colors.sass file and you’re done. Partials, mixins, nesting, these are all features of Sass that give you superpowers.
Another common CSS preprocessor is Less, which works the same way.

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
    font-family: 100% $font-stack;
    color: $primary-color;
}

For HTML, the preferred pre-processor is Pug (formerly known as “Jade”). Pug is like magic for HTML, allowing you to write much less code. #mainturns into <div id=”main”></div>. But Pug is not only that, features like including other files, mixins andif statements, are all features that are simply not possible with regular HTML.
An alternative to Pug is Handlebars, which works in a similar way.

a(href='google.com') Google
include head.pug
each fruit in fruits
    li= fruit

JavaScript ES6

In 2019, JavaScript is the most popular programming language and a great place to start if you never learned any programming at all.
The reason why JavaScript is the most popular is mostly due to the fact that web browsers only understand 1 programming language: JavaScript. While you can use a multitude of languages on the back-end of your app, like PHP, Python or Java, in the browser you can only use JavaScript, therefore you will use it at some point or another working as a web developer.

With its recent developments and increase in popularity, JavaScript has been adopted not only by front-end web developers but by back-end developers alike with the release of NodeJS. Today, JavaScript is also used for IoT to program robots with Raspberry Pi and to create Artificial Intelligence / Machine Learning software with Brain.js

With its latest release, called ES6 or ECMAScript 6, JavaScript inherits new capabilities once only available in other languages, like the use of let, const, async and template strings, for a more structured syntax.

JSON

It used to be that most data shared between APIs was in the XML format. Today, JSON is the dominant format, by far. If you want to integrate with third party APIs, you have no way around learning the JSON format, which stands for “JavaScript Object Notation” (as you see, JavaScript is a recurring theme in the most adopted web technologies today). The way you’ll be sending and retrieving data to and from your client application and your server will most probably be in the JSON format and what comes out of NoSQL databases is also in a JSON-like format. So, learn JSON in 2019.

[
    {
        "name": "apple",
        "qty": 3
    },
    {
        "name": "cherry",
        "qty": 2
    }
]

CSS Frameworks

Knowing how to build your HTML and CSS layouts from scratch is very important, however, in cases where the layouts you’re building are very standard, nothing special, or you have time constrains, picking a CSS framework is a good idea. CSS Frameworks are not just for CSS, they include HTML and JavaScript; their job is to make your life easier as they come with pre-styled components like dropdown menus, a color palette and interactive elements like carousels.

The most populars are Bootstrap (developed by Twitter), Materialize (by Google) which makes everything look like the Android OS, and the less popular Semantic UI, which is worth mentioning as it comes with tons of ready JavaScript modules, like search and autocomplete, which would take you forever to build from scratch.

Twitter Bootstrap GUI

Compilers

Using all these super cool tools that give you superhuman abilities wouldn’t be able without compilers (or bundlers), since browsers, ultimately, only understand HTML, CSS and JavaScript. There are compilers for one specific language and those which are more multi-purpose.

The most popular multi-purpose ones are Gulp and Webpack. What they do is bundling and converting Sass into CSS, Pug into HTML and even compress images.

const gulp = require('gulp')
const pug = require('gulp-pug')

function html() {
    return src('client/templates/*.pug')
        .pipe(pug())
        .pipe(dest('build/html'))
}

JavaScript Frameworks

Since the release and growth of jQuery, it has become almost impossible to find a modern web application that doesn’t use a Framework and not plain JavaScript.

JavaScript Frameworks do an unbelievable job, things that may be too difficult or plain impossible for you to achieve without them.

Angular is a full MVC framework developed by Google. Its predecessor, AngularJS, was the most popular at its time, and replaced jQuery with new concepts such as 2-way data binding, components and client-side routing. With a couple of lines of code, you could now update your interface dynamically, navigate to a URL without reloading the page, and much more. Angular is a complete re-write of AngularJS and comes with lots of new features including a CLI (Command Line Interface), unfortunately Angular has lost a lot of what made its ancestor popular: simplicity. Therefore Angular seems to be used only in big projects by big companies today, where a full MVC framework is a better choice than a less-feature reach one.

<input type="text" [(ngModel)]="your_name">
<h1>Hello {{your_name}}</h1>
<div *ngFor="let fruit of fruits" (click)="delete(fruit)">
    {{fruit.name}}
</div>

React (by Facebook) is the most popular one, or at least the most trending in terms of job offers. Unlike Angular, React doesn’t come packed with features, React takes the opposite approach and only focuses on building dynamic user interfaces by default. You can extend React capabilities by adding packages developed by either Facebook or third-party developers. React is quite complex to learn and you’ll be stuck for a while before you can produce anything meaningful, especially if you’re not familiar with advanced JavaScript concepts like Classes. React also requires you to use JSX by default instead of HTML, so the challenge is even greater.

class HelloMessage extends React.Component {
    render() {
        return (
            <div>
                Hello {this.props.name}
            </div>
        )
    }
}

ReactDOM.render(
    <HelloMessage name="Apple" />,
    document.getElementById('hello-example')
)

Vue.js is the newest on the list and it’s gaining popularity thanks to its simplicity and shallow learning curve. Vue retains a lot of what AngularJS used to offer, such as data-binding and templating, plain HTML instead of new paradigms, and getting results in a few lines. However, Vue added concepts from React to its framework too. Files are saved in a .vue format and each file contains separate blocks for html, css and javascript, making components much more modular and self-contained. Within JavaScript, you have a block for data, one for regular functions and one for user-triggered functions, among others, again a great way to separate and modularize your app. Vue follows React in that it only comes with the basics by default and you can extend it with packages.

const app = new Vue({
    el: '#app',
    data: {
        name: 'Apple'
    },
    methods: {
        say_hello: () => {
            return `Hello ${this.name}`
        }
    }
})

Worth mentioning is also Meteor, which unlike the other 3, is a full-stack framework, including front-end, back-end, UI and database. Easy to use and learn, great for small applications.

Server-side Development

Continuing on the JavaScript path, Node.js is your natural next step after learning JavaScript in the browser and perhaps some frameworks. Node.js is a dream come true for all front-end developers and for those who are new to web development alike. Node.js brings JavaScript to the server, no need to learn a whole new language from scratch just to write back-end code, authentication, talk to your database or build a REST API. Simply write JavaScript.

const express = require('express')
const app = express()
app.get('/', (req, res) => {
    res.send('Hello World')
})
app.listen(3000)

Node.js gained its popularity thanks to NPM, the Node Package Manager where developers share thousands of packages for Node.js (and now for JavaScript in general) to extend its capability. The community is strong and passionate, Node.js is a safe bet for 2019 and years to come.

PHP had its glory as king of the web and is still used by millions of platforms, including Wordpress, but is in steep decline as it gets overthrown by other languages. Few projects that start today are written in PHP, so PHP is mostly used to maintain older projects.

Python is the black sheep of languages, unlike other languages that have come and gone with trends over the decades, Python, first released in 1991 doesn’t seem to go out of fashion. Python is better suited for math, data analysis and machine learning, and is the obvious choice for hardcode back-end programmers rather than building a simple REST API server.

Server Frameworks

For Node.js, Express is the king of frameworks. Just like in front-end frameworks, server frameworks are not mandatory but they do a lot of the heavy lifting which you would have to write from scratch otherwise.

// input
$ express --view=pug myapp

// output
create: myapp
create: myapp/package.json
create: myapp/app.js
create: myapp/public
create: myapp/public/javascripts
create: myapp/public/images
create: myapp/public/stylesheets
create: myapp/public/stylesheets/style.css
create: myapp/routes
create: myapp/routes/index.js
create: myapp/routes/users.js
create: myapp/views
create: myapp/views/index.pug
create: myapp/views/layout.pug
create: myapp/views/error.pug
create: myapp/bin
create: myapp/bin/www

Other frameworks for Node.js worth mentioning are Koa, Hapi, Adonis and Sails, however none comes even close to the popularity of Express.

One Node.js framework that stands out and is worth learning in 2019 is LoopBack, which does even more than Express and has a user-friendly, step by step CLI to build models and more.

Database

If you’re already familiar with JavaScript, Node.js and the JSON format, the obvious choice for a database is MongoDB, the most popular NoSQL database in 2019. MongoDB allows you to nest data within documents, as you can see in the example below, eliminating the need for complex queries on multiple collections and writing joins as you traditionally would in SQL. Wring code for MongoDB is really just JavaScript and JSON, so if you already know both, theres’s not much more to learn before you can write real database code.

const products = db.collection('products').find({
    description: 'water'
})
SELECT *
FROM products
WHERE description = "water"

That said, MongoDB is still relatively new compared to MySQL, which has dominated the market for decades, and if you’re looking for a developer job in 2019 or if you’re simply working on a project that already has a database and you have no choice, you’ll have to learn the SQL syntax as you’ll see a lot of MySQL around. The complexity of SQL is the separation of data into multiple tables instead of nesting, which then need to be looked up, brought together and composed in the desired format, then exposed via API.

PostgreSQL is a MySQL challenger that does a few things better, like data consistency, such as not storing anything if you pass “apple” in a boolean field instead of 0, like MySQL would.

Conclusion

Learning web development and learning the JavaScript stack in 2019 is easier than ever, especially if you choose Node.js and MongoDB, with a single language you can become a full-stack developer. If you’d like to learn, build projects and start your career as a web developer, checkout Tortuga Coders, a web development bootcamp that will take you from zero to a full-stack developer in 9 intense weeks.

Learn to Code in Paradise