Text Editors For Beginners - 15 Ways To Rule The World
Are you a beginner programmer? Get started with basic desktop editors, cloud based editors, code snippet editors and mobile editors in this tutorial.
Jan 10, 2019 • 17 Minute Read
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 by Github
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.
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 by Adobe
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.
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 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.
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).
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.
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.
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 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.
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 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 by Mozilla
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 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 (Android & iOS)
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.
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 (Android & Future iOS)
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 is available for free on the google play store.
Textastic (iOS )
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 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
Name | Price | Operating System | Key Features |
---|---|---|---|
Atom | Free / Open Source | WIN/MAC/LINUX | Packages, Themes |
Brackets | Free / Open Source | WIN/MAC/LINUX | PSD Extract |
Sublime Text | Paid / $70 USD | WIN/MAC/LINUX | Power User, Commands |
Notepad++ | Free / Open Source | Windows | Easy |
Cloud9 | Free / Paid $0-$79 per month | Browser | Easy, Unlimited Free Containers, Free Always On |
Koding | Free / Paid $0-$50 per month | Browser | Strong, Private |
Code Anywhere | Free / Paid $0-$50 per month | Browser | Private, Multiplatform |
Nitrous.io | Paid $19-$100 per month | Browser | Lots of Stacks, Clean UI |
JsFiddle | Free | Browser | Easy Share |
CodePen | Free | Browser | Curated Content |
Mozilla Thimble | Free | Browser | Live Preview, Education Focus |
CodeAnywhere APP | Free with Membership | iOS/Android | Mobile editing of web containers |
Touchqode | Free | Android | Context Menus |
Textastic | $9.99 | iOS | Keyboard, 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.