Members' Choice Winners
Add Reply
New Topic

 Guide To Programmer
.coffee > #Domo { display: inline; }
Posts: 4067
Joined: 23-August 10
Gender: He/Him/His
Points: Ð 45
Awards: 1

   Jul 4 2012, 05:25 PM
Programmer's Notepad
A quick and easy guide for the lay coder.

We've all done it. Whether we are skinning or creating our own templates, we've all forgotten a tag of some sort. Or used a non-existent code without even realizing it until it's too late. Well no longer, I have the solution to all of those problems and many more...
Introducing the Programmer's Notepad! (PN), an editing software for coders.

PN is honestly an advanced version of Microsoft's Notepad but....FOR CODERS! Which makes it so much better because it does things Notepad could only wish it could. For example, it recognizes bad codes and highlights them for you in red. It automatically adds a closing tag and it color codes everything. Literally, everything, whether that's a comment in HTML to brackets, semicolons, to errant ampersands in HTML. It makes sure you see them and can recognize them.

I was first introduced to PN in high school during a computer science course when we were learning how to code in HTML and C++, and only recently rediscovered it when I learned how to create skins. Now, I'm dependant on it because it's so helpful especially when correcting templates for errant and incorrect coding. This tutorial will only cover the basics of it though because really that's as far as most of us will go.


When you first open PN, you are greeted with a standard, blank screen:

You notice I have highlighted two things in particular: a drop down menu that says "plain text" and at the bottom, a series of buttons. The two of these will prove to be handy for this tutorial. Let's start with at the top however.
user posted image

When you click on the "Plain Text" this is what should drop down. It's a listing of the various coding languages PN supports. In there you will notice three very important ones: Javascript, CSS, and HTML. All of which are three we run into very frequently in our RPs. Depending on the type of coding you are doing, you can select any of them and the program will help you with it. For this tutorial, I selected HTML.

Now turning our attention to the bottom, the little buttons at the base of your notepad, we see there are six of them.
user posted image

These six control very basic functions in your notepad, one of them being very critical, or what I view as critical. Going in order from left to right the buttons are as follows:
  1. Syntax highlighting: This button is what sets PN apart from notepad: this is what enables to program to highlight and colour code the code you are writing.
  2. Word wrap: Much like in Notepad and Word, this function starts a new line when you reach the window edge and disables the horizontal scroll.
  3. Number line display: This displays the number of lines you are using for your code.This is rather handy if you are editing code with a partner and helping them find errors in their own code or they in yours. When paired with word wrap, the program doesn't count the wrapped parts. Only when your start a new line or skip a line does it count them.
  4. Whitespace characters: When using this function, it will display small dots where you have hit the spacebar.
  5. Visible end-line characters: This feature displays a character (or pair of characters) at the end of a line when you have reached the end of the line. This feature is much like the paragraph mark/character in Word.
  6. Write Protect: I will be honest and say I have no idea what this feature does. I would assume it protects whatever code you create however, I'm not sure.
Now that we know what those buttons do, the rest of this tutorial will be more discover and learn as you go. I'm just going to explain a couple of the features before letting you go on your own and have fun with it. For this, I'll be using the announcement template from WAS because it's short and sweet and it has both CSS and HTML coding.
user posted image

Looking at the code, we notice two things (I have the numbered lines and word wrap engaged if you were wondering).

First, for the first style tag, there is a bracket thing to the left. When you click on the top it automatically minimizes it so it's no longer in your way. This feature also shows up with any multi-line tag you use. This feature does not work with CSS, however with other languages as Javascript it does. This is very handy so you know whether or not you've closed a tag properly, just follow the line and see if it ends where it should.

Second, there are colours. Not many but there are colours. This is the Syntax Highlighting from earlier. A rough key is as follows, i apologize in advance for not knowing the exact colours they're using though:
  • Blue identifies your tags. Those tags that require closers such as b, div, center, style, etc. Thes coincidentally also accompany the brackets on the left of the page.
  • Green identifies comments regardless of language.
  • Purple identifies values of your attributes. So in HTML, it's usually whatever follows the equals sign and that is in quotes. In CSS, this would be following the colon and ending at the semicolon.
  • Teal is a colour that only appears in HTML and identifies attributes.
  • Red is reserved for codes that are incorrect or non-existent, as I mentioned earlier. This applies to every language they support and that we use most often.
  • Pink is a similar vein as Red in that it appears when you are missing a quotation mark for your attribute in HTML. Except unlike the others, it actually highlights it and makes it apparent.
  • Finally, black is reserved for one of two groups: Language that is not recognized as code (such as CSS in the above image) or the actual text that is going to be affected by your code.
So now that we understand the colours and the screen, let's actually start to code. Start with any code that you want to and notice what happens after you finish the first tag, a matching close automatically appears. No longer will you have to worry about non-matched and unclosed tags! PN automatically does all the work for you! Well, typically. This works only with such basic attributes as <b>, <i>, <html>, <p>, etc.. Also notice what happens when you highlight a code or attribute:
user posted image

What does it do? It finds all of the same codes and highlights them too. It's a great way to double check the codes you have as well. You're able to find the matching ones, especially if you run into bad ones, such as <width:400>. You can go through and find all the matching ones through out the document. However, it doesn't work for more than a single code at a time.

From here on out, I'll let you play with the software some more to get a feel for how it works, what else it does, and how awesome it is. One final note though,
user posted image

This bar is a lifesaver. Particularly the options to save either the current workspace or all of the workspaces at once (the multiple disks icon). When saving your files, make sure to add the appropriate file designation when you do so. For example, if you're saving an html document, save it with an .html ending. This way when you open it again, it will open it with the corrent language ready to go. This also applies to .css (css), .js (javascript), and .xml.

Well there you have it. A very quick rundown of the software I use when creating skins and templates. Have fun using it, and hopefully you'll reduce the number of errors you make in your submissions from here on out. Feel free to shoot me a PM or post in here with any questions you might have!


1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

Topic Options
Add Reply
Fast Reply
New Topic