List of Editors and Tips for Writing Code

Introduction and Tips

As a web developer you'll need tools. What kinds of tools would you need ? Text editors and IDEs ! Editing code in a plain text pad and even on the forums is a bad idea. Why ? Regular plain text pads don't provide you with syntax highlighting ( the stuff that makes code pretty ), indentation guidelines and memory, auto-completion of code, etc ..! Editing on the forums is an even worse idea, because forumotion's editors constantly mess up indentation which makes the code unreadable, the javascript editor totally lacks syntax highlighting, and sometimes you may just accidentally reload or close the page losing all your progress !

To efficiently write and read your code you should follow these 2 important rules :

1. ALWAYS use a text editing program that supports syntax highlighting. Syntax highlighting colors the code, making it easier for you to read and identify certain keywords and phrases.
   
   
2. INDENT your code for nested tags and statements, and separate large code blocks by an empty line break. Proper indentation ( 2 or 4 spaces ) helps make your code easier to read, allowing you to know what's inside what ! Click the spoiler below to reveal the indentation examples.
   

   Click to view examples:

   
   Below are some links which explain style guides for each language.
   
   HTML : http://www.w3schools.com/html/html5_syntax.asp
   HTML / CSS : https://google.github.io/styleguide/htmlcssguide.xml
   JavaScript : http://www.w3schools.com/js/js_conventions.asp
   

If you follow these two important rules, you'll be able to understand what you're writing with no problem ! See the next section for tools that you can use to write your code.

Editors

Below is a list of free programs and online editors that you can edit and test your code with. I highly recommend using at least one of these editors to edit and test your code with.

1. Atom (atom.io)
   Atom is a text editor + IDE and one of my personal favorite programs for editing code. It's free, open source, and highly customizable. Most of all it comes with tons of features to assist you in coding, such as multiple editing panes, smart auto-completion, file system browser, etc..
   
   
2. Brackets (brackets.io)
   It is a lightweight but modern text editor. It has live preview mode, many extensions. - @RyanPham
   
   
3. Notepad++ (notepad-plus-plus.org)
   Notepad++ is another good text editor that I used regularly before finding Atom. It provides a number of tools and supported code types for editing, and is an all round good tool to have for writing code.
   
   
4. JSFiddle (jsfiddle.net)
   JSFiddle is an excellent online editor for writing, testing, previewing, and sharing code as well as collaborating with other users.
   
   
5. CodePen (codepen.io)
   CodePen is another online editor that allows you to write, test, preview, and share your code online.
   

That's all for now ! If you have any questions or want to add something to the list above just leave a reply below. Good luck !

Currently using the Atom you recommended though, I like the theme and the highlights of code. The only thing lacking coming from them is only if they allow a live demo or version of the coded template similar to weaver.

@Jazeon I never thought of that before.. I searched and they have a package for it :
https://atom.io/packages/atom-html-preview

You can install it via Settings ( CTRL+, or File > Settings ) > Install > Search "live preview" > Click packages ( should be the first result ) > Install

I tested it so far and it works niiiiiiice with HTML files. *-* You have to press CTRL+SHIFT+H while editing the html file to bring up the preview pane. Pretty awesome, I wonder why I didn't think of looking for something like this sooner.

Ange Tuteur wrote:@Jazeon I never thought of that before.. I searched and they have a package for it :
https://atom.io/packages/atom-html-preview

You can install it via Settings ( CTRL+, or File > Settings ) > Install > Search "live preview" > Click packages ( should be the first result ) > Install

I tested it so far and it works niiiiiiice with HTML files. *-* You have to press CTRL+SHIFT+H while editing the html file to bring up the preview pane. Pretty awesome, I wonder why I didn't think of looking for something like this sooner.

Okay this is definitely something now which I could list as a free program on par with Weaver, knowing now that they offer for free, a feature to do live previews on coding, But I guess a minor downside would be that you have to keep on pressing that combination keys to preview, while on Dreamweaver, you are absolutely doing both live preview and coding.

Yep, there's a lot of user-created packages for Atom. So if you're thinking of something, someone may have already made it. Just gotta search their packages to find out. ^^ That's the only problem with the preview, but once you open the side panel you don't need to press the keys again because it'll auto-update. I noticed the auto-updates are a little delayed though.

LOL did you see this one ? I'm gonna try that out. xD

sometimes bad indentation is in order to make it difficult to read or not?

@Ange Tuteur

"CodePen is like JSFiddle" psh please

Shouldn't that be the other way around... CodePen is the best and has always been my favorite (unless I can get that power code stuff to work on Atom sheesh).

^ Yeah it should, it could go both ways since they do the same thing though. Maybe I should hack that part off

Did you install the package into Atom ? Press ctrl+, to open settings > go to install > search "activate power mode" and click Enter. Should be the first package by JoelBesada. You should also get the HTML preview package too.

Ch@lo Valdez wrote:sometimes bad indentation is in order to make it difficult to read or not?

Bad indentation is a no-no for code that's supposed to be read. If the code is optimized for performance ( minified ) then it's understandable.

Ange Tuteur wrote:^ Yeah it should, it could go both ways since they do the same thing though. Maybe I should hack that part off

Did you install the package into Atom ? Press ctrl+, to open settings > go to install > search "activate power mode" and click Enter. Should be the first package by JoelBesada. You should also get the HTML preview package too.

Not really. JSFiddle you gotta click "Run" but on CP, it runs the code if you stop editing it

PLUS it autosaves AND has preprocessors. JSFiddle can't really compete.

And I'll try that when I get on my laptop.

Ah yeah that does get annoying having to click "run" every time.

Does it now ? I'll have to give some of those JS preprocessors a try on CP.

Righto ! Lemme know how it goes.

@Ange Tuteur I got power mode and the html preview but how did you get the little sparks to fly out of the text...

Oh by default the particles start showing at combo 50. You can modify the settings to show them at combo 1, or disable the combo mode entirely. Go to Settings ( CTRL+, ) > Packages > Activate Power Mode > Settings > Combo Mode - Activation Threshold

Oh okay. I was only at 40 and I was like WTF waiting for some sparkles. Thank you.

And quick question: Do you use Atom to test your tutorials out before you use them? Because it's kinda weird working with the SCEditor in Atom (two editors usually pop up when I save an HTML page).

I usually test my stuff directly on the forum.

1. Sometimes I'll do it via console for certain scripts.
F12 ( CTRL+SHIFT+I ) > Console tab > Paste my code > Hit enter

2. Other times I go on my test forum and test the code there.

I've actually never used previews too much while writing my code. I do find the HTML previewer convenient for edit HTML files though. I wonder why there's two editors popping up ? o_O

I have no clue.

Like Press Ctrl + S while viewing a topic and open the HTML file after you save it.

You'll see what I mean.

Try deleting the script tag whose source ends with "instance-sceditor.js" -- might have .download on the end too.

I'll try it later and let you know what happens.

Alright lemme know. It worked on my end when I tested it. I think it was invoking a second instance of the editor, hence the two sceditors.

I've tested Notepad++
and in my oppinion is a good option like you said in the first post.

The highlight of the codes is good, but I think it is a matter of taste, because my sometimes I get tired and lose ground ..

I usually do codes with reliable Notepad and since I'm not a frequent programmer, for what I'm doing well hehe

Yeees ^^ notepad++ is an all round good editor for editing code. I still keep it on my computer because I use it from time to time.

Well, I'm using Brackets
It is a lightweight but modern text editor. It has live preview mode, many extensions. I really enjoy coding in Brackets