Pluralsight Logo
Author avatar

Shannon Duncan

Author badge Author

Text Editors For Beginners - 15 Ways To Rule The World.

Shannon Duncan

Author BadgeAuthor
  • Jul 29, 2016
  • 18 Min read
  • 4,265 Views
  • Jul 29, 2016
  • 18 Min read
  • 4,265 Views
Software Engineering Best Practices

Introduction

If you are just starting out as a programmer or are looking to start, then you are going to need a text editor. There are a lot of options out there as far as text editor goes, but I’m going to help you traverse the wide landscape of editors.

We are going to focus on four types of editors for you to use. The first type of editors are going to be desktop applications. The second set will cover cloud based editors that allow you to code on the go. The third set of editors will be web based code snippet editors. These editors are to be used for a single concept or small snippets of code. The fourth set of editors and my least favorite are mobile editors.

Now before we get started let’s talk about what you need in an editor. The only two features you truly need in an editor is the ability to write text, and the ability to save that text to a file. Beyond that it becomes purely preference as to what type of editor you chose. I am going to go off of my preferences, and that may not fit everyone. However, my outline here should help you find what you are looking for.

When dealing with editors there are a lot of features that can be compared. However most of the editors of today boast the same features with just a slightly different attitude towards each one. There are small differences in features that make the editors claim their niche audiences.

Lingo

If you are a beginner you may not understand everything that is going on in an editor so I’ll do my best to layout the basics for you:

Syntax Highlighting

The first thing you will see when working with a file is the syntax highlighting. Syntax highlighting is used to help you see different types of data, tags, and information easily on a document. It allows you to read and understand the document a lot easier than just plain text.

Preprocessors

Some editors natively work with something called preprocessors. These are just a more powerful way to work with style sheets (CSS). The editors that are built to work with these natively are geared towards web development.

Open Source

There is also an ecosystem of coding out there that is called open source. Open source coding is typically community lead and results in the underlying code used to be open and usable in other projects. Open source software tends to be free and sometimes are hosted for you commercially for a premium price.

Stacks

When you get into development you might hear the word stacks thrown around. This refers to the combination of software you use to build your application. Most often for web development the base stack is HTML, CSS, and JavaScript. However you will see that with PHP , NodeJS, Ruby, etc added to it to create custom stacks.

Section 1: The Desktop Applications

I’m going to start with my favorite desktop editor of all time. Now I am going to try to cover editors that are cross platform compatible (Meaning you can use it on any operating system such as Windows or Mac).

Atom Editor

This is the latest editor that I have added to my toolset, and probably the most powerful one for the desktop class of editors. The biggest features of this text editor are that it is open source, extendable, and has a huge community backing.

Atom Editor

You are able to install new features to the editor without ever having to download specific files and install them manually, and without ever leaving the editor itself. To do so you can just go to the settings and search the marketplace and install the new features with a click of a button. It is very similar to downloading an app to your smartphone from an app store. The features come in the form of either packages or themes. Packages add functionality like color pickers and live preview while themes add visual pizzazz to the editor like syntax highlighting, file icons, and more!

I think Atom is a great choice for beginners because it’s base configuration is very easy to use.

Brackets

Brackets is another big open source editor, however this editor is built specifically for website design. The biggest feature you are going to see with this editor is the ability to open and extract style information from a photoshop file (PSD). This makes going from a PSD to HTML very easy and doable for the average web developer. Brackets also has the ability to extend it and new features, however I haven’t noticed as big of a push or focus on that as I have with Atom.

Brackets Editor

There are two other big features of Brackets which include live preview and inline editing. Live preview allows you to see the changes of your html code live in a browser. This is great when you have dual monitors because you don’t have to leave the editor to see the changes. Inline editing allows you to access the css of a class without actually changing the file you are looking at. Thus you can edit css quickly for an element and move on.

Sublime Text

Sublime Text is the power user text editor. It’s extremely fast, and has a ton of commands and shortcuts to make workflows faster. Using the built in commands and shortcuts you can navigate quickly to specific parts and functions within files. On top of that it’s multi cursor mode is sleek and powerful, allowing you to edit CSV files with ease.

Sublime Text

Sublime also lets you customize the editor, however it isn’t as straightforward as with Atom or Brackets. There is a well known feature of the editor called unlimited trial. This means you can use the editor for free forever in a trial period, however if you are going to actually use it for a project then you should go ahead and fork out the $70 USD to get it.

NotePad++

Notepad++ has been around for a very long time. It is free, open source, and quite frankly a little clunky in my opinion. It is stable, has a lot of syntax highlighting support as well as code folding. It is more minimalistic approach to a full code editor than the previous editors. I’m not going to spend a lot of time talking about this one, but thought it was worth mentioning.

Notepad++ Editor

It is important to note that notepad++ only runs on Windows which puts it at a disadvantage to the other editors in my opinion. That is pure preference, but if you are Mac user then you are out of luck.

Section 2: Cloud Based Editors

If you are going to get serious about any level of coding you should highly consider looking at a cloud IDE. These editors go above and beyond the scope of the desktop based editors we just discussed. They more closely resemble something like Eclipse or Visual Studio for the desktop… However they are so handy that I think they deserve a place in this article.

Cloud9 IDE

Cloud9 (c9) is probably one of the biggest contenders out there in terms of cloud based editors. C9 gives you the power to do your complete line of development from the server side to front-end all in one environment. Even more awesome is the ability to use it in almost any web browser on any computer. Your workspace just became mobile, and accessible from anywhere with a decent internet connection (Yes I have programmed while tethered to my iPhone, and it is doable).

Cloud9 IDE

The biggest feature of c9 is that it is completely free to use. For most projects you can use their free containers to build and prototype your application/website. It has a full console, with your own VM in it to do as you wish. Full editing, debug, preview, and file browsing. And it also has real-time collaboration to pair program with other people. Live chat can help you hash out ideas and really make the best of your experience. This is my goto editor, and I use this more than I do a desktop editor.

Koding

Koding is a relatively new online IDE environment. It was designed to give you full control of your container, and to be a “pretty” environment. It has an extremely strong global development community, and has similar features to c9. The VM’s inside is use Ubuntu running on Amazon Web Services. Every Time you spin up a new vm it uses docker to make it quickly and efficiently. Meaning you can create and blow up the VM as much as you want.

Koding IDE

The free plan is pretty good, but in order to get an always on VM (Meaning you can run a website full time on it) you are going to have to fork over at least $10 per month on an yearly contract. Koding hosts a very popular hackathon each year, and this year's grand prize is $100,000 USD. Not too shabby.

Code Anywhere

Code Anywhere is the first IDE that boast the real power to literally code from any device. They offer a web browser IDE for the desktop, and native apps for both iOS and Android devices. Code Anywhere also handles project management a little differently. Instead of splitting projects out into different workspaces you have separate VM's that you can build and destroy on the fly. This can all be done without leaving the editor which can give a slight boost to productivity. The do offer pair programming in their beta version, but I haven’t had a chance to try it yet.

CodeAnywhere IDE

Their free plan is pretty limited like Koding is, however they have a very cheap paid plan that does everything you need it to do. Plus all dev boxes are 100% private unlike cloud9 where you only get 1 free private box and unlimited public boxes.

Nitrous.io

Nitrous.io is a popular choice as well. They are a little on the pricey side and don’t seem to offer a free plan but are packed with features. The big advantage of Nitrous over the other cloud IDE’s is that it has some of the power of Sublime Text baked into it. It allows you to jump between files and code with just simple keystrokes.

Nitrous.io IDE

Nitrous also has a larger library of projects stacks to use for your development needs. Where as most have about 10 different stacks to choose from it seems that Nitrous offers a lot more than that. The IDE for Nitrous is also pretty minimalistic and distraction free which is nice when you really get into those hackathon coding sessions.

Honorable mentions would include Codebox, and CodeEnvy.

Section 3: Web Based Editors

Less powerful than a cloud based IDE, these editors are great for working with a single concept, page, or code snippet. They allow you to build thoughts out quickly and share them with people you care (or don’t care) about.

JsFiddle

JsFiddle seems to be the biggest and baddest out there as most links you see posted on Stack Overflow go to JsFiddle. This editor allows you to easily separate your HTML/CSS/JavaScript for developing small ideas and concepts. You can run the code and see a preview of your code. (Most of the time to see how terribly you just failed at completing a task). The additional options and live collaboration really add to the experience.

JsFiddle

You can sign up for an account to maintain a list of your saved fiddles, but JsFiddle can be used and shared completely for free. It seems to be pretty solid, and I have never had any issues with it.

CodePen

CodePen is the next kid on the block. There are a lot of fancy concepts and ideas hosted on CodePen for you to open and play with. It’s pretty easy to use, and I personally like the layout of the editor better. With the larger preview area you can see full width websites easily. The one drawback I have found is that CodePen is significantly slower when rendering the preview than JsFiddle.

CodePen

CodePen also has a neat list of curated posts, collections, and ideas/concepts for you to look at. It is a lot easier to find a neat concept on CodePen than many of the other sites out there.

Thimble

Now Thimble is a neat addition to the online editors. It is the first one here to do live preview really well. As you type in your code section the preview window updates automagically. On top of that you can work with multiple files and are not limited to a single concept/idea. Theoretically you could build your whole website in this editor for free.

Mozilla Thimble

Mozilla seems to have created Thimble with the idea of education in mind. They strongly recommend using it to help teach others in classroom settings how to code and use HTML/CSS/JavaScript.

Section 4: Mobile Editors

The world is using mobile more and more, and mobile devices are becoming ever more powerful. While the editors on mobile devices haven’t quite gotten up to speed with the web and desktop counterparts, it is not going to be very long until they do. Here is a small line up of editors for both iOS and Android.

Code Anywhere

Do you remember Code Anywhere from the cloud editor section? Well you should! Code Anywhere is one of the few editors out there that allows you to access it easily on a mobile device. You can open up and edit your files through their app on both Android and iOS. However you will notice that the editor does not have all the fancy features of the full fledged web editor. Also the support for it seems pretty lacking.

CodeAnywhere APP

It is free to use if you have an account with Code Anywhere, and works on both phones and tablets. You are able to access your code and edit it, but at the time of this article you are not able to access the console and run commands.

Touchqode

Touchqode is an up and coming editor that looks pretty promising. It is only available on Android right now, but has some very neat context menus for mobile editing. The say that they are going release an iOS version in the future. It is complete with syntax highlighting, code suggestions, and can even FTP to your server to pull code and edit it.

Touchqode App

Touchqode is available for free on the google play store.

Textastic

Textastic is my personal favorite when it comes to mobile editors, and I have used it on the iPad a lot! Unfortunately it is only available for iOS devices, but if you have one and are willing to fork out the money for it ($9.99) then you will not be disappointed. It has a lot of features that bigger text editors for the desktop has, and a couple of neat online integration's. The context menus and custom keyboard layouts come in handy time after time.

Textastic APP

Textastic can connect to cloud drives, ftp, and more. It’s extremely fast for being on the mobile device and looks very beautiful on the iPad Retina screen.

Quick Comparisons

NamePriceOperating SystemKey Features
AtomFree / Open SourceWIN/MAC/LINUXPackages, Themes
BracketsFree / Open SourceWIN/MAC/LINUXPSD Extract
Sublime TextPaid / $70 USDWIN/MAC/LINUXPower User, Commands
Notepad++Free / Open SourceWindowsEasy
Cloud9Free / Paid $0-$79 per monthBrowserEasy, Unlimited Free Containers, Free Always On
KodingFree / Paid $0-$50 per monthBrowserStrong, Private
Code AnywhereFree / Paid $0-$50 per monthBrowserPrivate, Multiplatform
Nitrous.ioPaid $19-$100 per monthBrowserLots of Stacks, Clean UI
JsFiddleFreeBrowserEasy Share
CodePenFreeBrowserCurated Content
Mozilla ThimbleFreeBrowserLive Preview, Education Focus
CodeAnywhere APPFree with MembershipiOS/AndroidMobile editing of web containers
TouchqodeFreeAndroidContext Menus
Textastic$9.99iOSKeyboard, FTP

Closing Remarks

That about does it for the editors I included in this article. I do want to point out that if you are just getting into coding and are looking for a good place to start then you should probably start with a desktop based editor such as Atom or Brackets. You need to learn how to manage files, preview them, and work with your operating system.

Do you use any of these editors? Are there some that you think deserve to be mentioned? Discuss this and more in the comments section below!

About The Author

Shannon Duncan is the Founder and Author at Unrestricted Coding. He mentors and teaches people of all ages how to code and enjoy the art of programming. Find him on twitter, linked-in, and github.

1