Getting set up for web development – part 1: choosing an editor

Foreword

Getting started with web development can seem overwhelming at first, as there are so many choices, for everything. This article is the first of a series that I plan to write on getting started with web development on Windows. The topics covered will be:

  1. Choosing an editor
  2. Tooling: node, bower, yeoman, etc.
  3. Useful libraries
  4. JavaScript supersets/TypeScript
  5. CSS preprocessors: LESS/SASS

Through these articles, I will try to share my experience with web development so far, show different options and explain the choices I made.

The big jump

So you decided to start web development? Great! You have an idea, and would like to see it become a reality. You know some basic html/css/javascript, but would like to start building a web site in a more structured manner.

Through this article I will try to give some paths to help you set up a convenient environment to start developing web sites.

The focus of this article is not to give training on the technologies. There are a lot of excellent resources on the web; if you wish to get a structured training, I strongly suggest that you visit Pluralsight.

Where do I put my code?

As you will have to type your code, you will need some kind of a text editor. This editor can take many forms, from the simplest to the most complex, online or offline.

Online editors

One of the great things about web development is that a lot of things are available directly online. If you just want to try yourself out, an online editor can do the job. As for everything related to web development, you will soon discover that you have options. Here are some online editors:

  • plnkr: quickly get started, reference external libraries, add files, etc. My favourite.
  • jsfiddle: very practical user interface.
  • jsbin: quickly get started. Also allows you to actually create sites outside of an iframe.
  • CodePen: front-end oriented. Great for browsing exisitng projects.
  • tributary: data visualization oriented, with embeded reference to d3js

Online editors offer the great advantage that you do not need to install anything on your computer. You just get there and BAM! you’re good to go.

Desktop editors

Once you will get into more complex scenarii, you will most likely want to have your files at hand, structure things, or you will want to be able to work while offline. Here again, you have the choice between different interfaces:

  • Notepad: as all files are pure text, an editor as simple as Notepad can do the job. Embedded directly in Windows. This is just to mention, don’t even.
  • Notepad++: for a more advanced experience, Notepad++ provides syntax highlighting, code completion and IntelliSense. It also allows you to work with projects. It is not a web-specific interface, and does thus not provide all functionalities that other offer.
  • Brackets: Lightweight, free, open-source IDE (Integrated development environment) for the web. Depends on node.js. Has a very wide library of plugins. Can be extended at will. My second favourite.
  • Atom: free, open-source IDE for the web. Tried it for a while, but was not convinced
  • Sublime Text: IDE for the web. Pretty popular in the community. Never used it myself. Free for testing, $70 for continued use.
  • WebStorm: IDE for the web. Very popular in the community (I mean, I must be the only one not using it). Never used it myself. Free 30-day trial period, €49 for continued use for individual developer
  • Visual Studio: global IDE. Provides tools for web development, but also C/C++/C#/VB.NET and many more support. Has a wide library of plugins. Heavy due to the fact that it does a lot of things, but very powerful. Free editions (go for community)  as well as purchasing one. My favourite despite its weight *sigh*. Only available for Windows
  • Visual Studio Code: brand new cross-platform editor from Microsoft. Just installed it, I will elaborate on it after testing.

Being a Windows-only user, I did not mention other possibilities such as Emacs or vim, which, though available, are less popular.

You can find an explanation about editors and IDEs on John Papa’s blog.

Summary

As can be seen, selecting an editor is a first hard choice. Whether you want to quickly get started or want to invest more time, all kinds of possibilities are offered, and there is always a match to suit your needs. Your choice can also be guided by the amount of money you want to invest. This vast choice is a constant in the world of web development, as you will discover.

My personal favourites are:

  • plnkr for online editing/interaction with stack overflow
  • Brackets for quick code review/reading code pulled from github/contributing to external projects (check John Papa’s blog article for a list of useful Bracket extensions)
  • Visual Studio for my personal work/projects

My best advice would be that you take a look at those different options and choose the one that suits you better. Also, try to learn as much as you can from the editor you choose, so that you can improve your productivity. Whatever the editor, mastering it will matter more than the editor itself.

In the next article of this series, I will talk about the surrounding tooling for web development (node, bower, yeoman, etc.).

Advertisements
Leave a comment

2 Comments

  1. Getting set up for web development – part 2: the tools | Wandering in the community
  2. Creating a chart with D3 and TypeScript – part 1 | Wandering in the community

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: