Welcome back, this is Lesson 1.3 Notepad Plus Plus ~ Sublime Text Editor ~ What’s Atom? We’re going to be talking about IDE’s and text editors in this lesson. You will learn about Notepad++, Sublime Text 3, and Atom Text Editor. Here is your chance to find out if they’re all the same? In this lesson, you will discover what’re the differences between the many source code editors? We are going to start off with, what is a text editor?
What is a Text Editor?
Most noteworthy, text editors are programming tool specifically designed to be used by developers for writing and manipulating sources code. What is source code? Nice try, I will create a separate lesson all about source code, but today is all about text editors and IDE’s.
Web Designer Vs An Artist What’s the Difference?
When it comes to creating art the tools an artist uses is only as good as the user who’s using them. You do understand that, right? Most people see it differently.
For example, you buy cheap paint brushes and your masterpiece looks more like a disaster piece, right? It must have been the cheap brushes fault, that’s it. Who would want to buy such a mess?
No, as matter of fact, it’s quite the opposite. An artist, I am talking about the great ones who can use a toothpick, shoestrings, or even a rock as a paintbrush and produce themselves a masterpiece.
To/ma/toes To/mar/toes Vs Po/ta/toes Po/tar/toes
Why Does it matter?
Here’s another example. Mona never spends more than $3.87 on her 12-piece nylon-hair paint brushes made by US Art Supply. But Lisa, on the other hand, spends $32 on her 24 piece nylon-hair paint brushes from Thornton’s Art Supply. Both artists produce a Frida Kahlo.
I bet the hardest part for both of these ladies was trying to decide on what to draw next. It comes down to being a matter of preference.
Just because Mike likes using Brackets while coding, and Div prefers coding with Sublime Text 3, but Leo, he uses regular plain old notepad, that doesn’t make anyone of them more or less good than each other. It’s the amount of effect and hard work that each puts into creating their perfect masterpiece.
Notepad Plus Plus (Notepad++) Which is Right?
The text editor you use is all up to you. Atom, Brackets, Sublime, Notepad Plus Plus, regular Notepad, and Microsoft Visual Studio Code all have something to bring to the table. They all help a web developer as far as developing their artistic skills and being more productive. Even a boring striped down notepad, (not ++) can help a coder achieve success.
Here’s the Real Story ~ Handling the Truth
The real question is; What text editor are you using to bring you next masterpiece to the showroom? That’s the truth and I hope you can handle it. I’m using Atom today, tomorrow I may try a different one. I guess it all depends on what kind of project I’m working on.
Text editors are made from the developer’s style and point of view. Meaning, they put their stamp on creating it. Just keep that in your mind. They are all different but have the end user on their mind. Some are made only to be used on a Mac system. While others are developed just for Windows. You also have some that’s cross platform.
I recommend using a cross platform text editor because it will make you job a lot easier when you have an on-site job. It will keep you from having to remember which key to press, (CTRL on PC or CMD on Mac) and I’m not sure what it is on any other systems, I should probably find that out. If you know, please leave a comment, share your knowledge 🙂
Popular Text Editors
You reached the best part of this tutorial. The step-by-step guide. In this section, we’re going to address some of the most popular text editors used by developers. Like Atom, Brackets, Notepad Plus Plus, Visual Studio Code, and, Sublime 3. I’m only going to break down two of them and show you how to use the best parts. These editors are all free and open source, so let go learn about some of the most popular text editors.
Up Next Atom
Atom is a hack able, free open source, cross platform text editor, that’s designed and maintained by GitHub. You can download Atom for free. This text editor is hackable down to the very core. I’m putting it to the test and it’s passing with fly colors.
After you download and install Atom, it’s ready to be used right out of the box. You’ll be able to customize it to your liking or start writing code for your websites, application and more.
To you beginner coders, it only looks Intimidating, don’t let it fool you. I’m going to explain a lot about Atom for you in this section of the tutorial.
Atom Text Editor Crosses Platform
Atom Text Editor Makes You Productive
Looking to get more coding completed in the shortest amount of time? With Multiply Line Selection, Minimap, Auto-completion for HTML, CSS, and Snippets you will be able to take on more coding assignments and get more done. Atoms Got more.
Need a spell-checker? Atom gots one.
I recommend reading through the welcome information when you open Atom for the first time. The guide will explain how to set Atom up and how to use the editor’s features a little more than I can or willing to in this tutorial 🙂
Customize Atom Text Editor to Your Personal Preferences
Using the setting you can style Atom to your preference. With Custom Key Bindings, Themes, and Packages, you make this editor look pretty much any way you wish. Would you like to have a step-by-step walk through showing how to set up Atom with your preferences?
Look Here’s the Real Deal ~ You Got Style
The images below are areas some people have gotten hung up at while setting their preferences in Atom. I hope it helps you get through the process smoothly. If you need help remember to ask me. If you mess up and can’t correct it on you own, you are to stop what you’re doing and ask for help right away. Follow the steps in the order shown below. I’m setting it up to my desire, you can follow my example or set it to your preferences. Let’s go set up our preferences; I inserted a Picture Gallery as a guide to help you understand the areas I’m talking about.
Atom Core Settings
- Click on the File link located on the top left-hand corner on Atom Welcome screen.
- Find the Setting link and click on it. This will take you to Atom Core Setting screen.
- In the right side panel look for Audio Beep and make sure its box is checked. You will see a blue box with a check mark when it’s on. This will give you a warning when something is not right with you code.
- Now look for Automatic Update and make sure it’s activated. This feature will update Atom for you when a new update comes out. Updates come out several times a year or whenever the developer fixes a bug. Keeping your system updated is always good for security reasons. I will be creating a tutorial on protecting your system.
- Restore the Previous Window on Start I say no. This will open the last window you had open when you closed Atom. The default is yes.
I put no on step number five because one time when I opened Atom I was called away from my normal routine. When I returned, I just jump right in and started working on a project. Not thinking to check the file I had opened up earlier, I started editing the wrong file. Bad news. I remember this one time in band camp, I’ll tell you about it later.
Atom Editor Setting
- Click on Auto Indent. This will automatically add an indentation when you insert a new line for coding. This is a cool feature because it helps to keep your documents neat, clean, and readable for you or the next person who has to clean up your coding.
- Right under auto indent, you will find Auto Indent On Paste, go ahead and turn this option on. You will benefit by using this feature. You can now copy and paste snippets from other sources and insert them right into your code and not worry about you coding looking sloppy or messy. Atom fixes the indentation when you paste you copied code. Neat right?
- Find Font Family and change it to the font of your choice. I like to use Roboto Mono which is a popular style here in America. What’s your favorite font to use?
- Font Size in Atom is set to 14 as the default. I don’t know about you but to me that kind of small text for my old eyes. I usually set my font somewhere between 16 and 18. This will make it easier to see the colon(:) semi-colon (;) and any other hard to see punctuation marks. Especially good for when you are trying to find that period(.) you left out.<==Double click
- Now scroll down until you see the Scroll Past End option and turn it on. How will this help you? It’s imagination time. You’re typing up an article and it a big one. You typed so much that you ended up at the bottom of the page with eye rolling up the top of your head. That’s because you are trying to follow the page past the end of your screen. It’s the same look we people with bifocals have when we’re looking over the bridge of our glasses.
- Show Indent Guide is a great way to keep your document organized. If you get around to learning Jade, the indent guide is good for when you are nesting code. Also, more complex programming languages will be easier to read. No need to elaborate on what this feature will do for you. Let’s see what’s next.
- Show line number is great for people like me who like to validate their code. Usually, when you validate your code you’ll get a cheat sheet detailing where the error is located in your code. (by a line number) Go right to the line number inside of Atom text editor and get it fixed.
- Tab Length is another feature that will help you keep you document organizer. I leave the default setting at 2, but some people like to have four spaces of a tab when indenting their code. I would go any more than 4 tabs when choosing your preference on this option.
Atom System Setting
My Preferences for Atom System Setting is the default setting, but you may like other options, of which you only have three. The setting allows Atom to integrate with your operating system. A good example would be the file association modal window that pops up. It’s asking what program would you like to set as default and always use it to open the file extension you are trying to open.
By now you’re starting to see a pattern with Atom. You know how important it is to write clean readable code. Also, you know if the box is blue and has a check mark in it, it’s on. You can see I’m quite thorough in my work and fastidious about it being correct.
Atom Packages Setting
Packages are opens source coding that makes you more productive while using Atom. Packages allow you to write more code in a shorter time. Included are 79 core packages that you can install. You don’t have to use or download third party plugins with this text editor. Well anyway, I’m going to tell you about my favorite Atom Packages. Let me know what yours are in the comments down below.
Atom Emmet Package
Emmit allows a web developer to write complicated strings of codes and make it expandable. Using Emmet package while you code will help you become more productive save time, and take on more projects. Take a look at the string examples I left down below.
Explaining the above example ~ When you hit the (ctrl+e) key on your keyboard, after typing out the code into your editor, the complex string will expand to make an HTML structure. In this case, the above string tells the editor to expand this HTML structure by:
The Emmet Above Becomes The HTML Structure Below
I highlight the section in the example. We will learn about the rest of the HTML code in another tutorial. I’m showing you how to use Emmet today.
- Create a div and give it an ID (#) page,
- Inside of the page, div create another div with the class (.) logo
- plus (+) place a ul (unordered list) with the ID (#) of nav right under the logo div.
- And inside of the ul create list items (li or line item) five times (*) with anchor text (a) and give the text of Item and number them 1-5.
<div class=”logo”>Logo Goes Here</div>
<li><a href=””>Item 1</a></li>
<li><a href=””>Item 2</a></li>
<li><a href=””>Item 3</a></li>
<li><a href=””>Item 4</a></li>
<li><a href=””>Item 5</a></li>
Terminal Plus Package
Terminal Plus is built right into the text editor and sit at the bottom of your screen while you work on your projects. You’ll become a more productive developer. Allows you to open and create new directories or file, also delete items from inside of the file you’re working on.
Atom Bootstrap4 Package
This package will add expandable snippets to the Atom library. Bootstrap classes like button (btn) or navigation(nav) can be created with ease.
Atom Script Package
- Go to File
- Click on Setting
- Now Click on Install
- Search for Script
- Locate the right Script to install. There several Script packages to choose from. You are looking for the one with the user name of rgbkrk. It’s usually at the top and shows the most installs. As of the posting of this tutorial version, 3.15.0 is the current one in use. Once you find it click the blue install button.
- Enjoy the Script Package with over 100 languages of support.
Atom Theme Setting
- Click on Theme and a pane will open on the right allowing you to choose your theme options.
- Do you see the UI Theme Options and below that is the Syntax Theme options? I’m not going to tell you what you need to do here because it’s obvious. You either like a dark or light color for your theme. You pick one from the drop down menu and Atom will do the rest. Simple enough.
12 theme total ships with Atom and you can download more if you wish. In UI Theme there are four. (two light and two dark) UI is your user interface. Or as I like to say, in the face. These items are your tabs, status bar, drop down menus and such items.
There are 8 Syntax Themes for you to choose from. Syntax styles you text editor Text? This is easy stuff, right? Let’s keep moving along, and look at another text editor. You’re almost to the end of this tutorial. I hope you’re getting some out of it. Remember, if you have any questions or need help, please ask.
Up Next Sublime Text 3
Sublime Text 3
Sublime Text Editors is still a free to download software. We may evaluate the editor for an unspecified amount of time. But, the developer of Sublime asked that if we like the text editor, we should purchase it. (not open source, but we may evaluate the product)
This text editor is cross platform meaning it will work on a Linux, Windows, or Mac system. It can support a lot of languages.
Installation: Sublime Text 3 Package Control
After you have downloaded Sublime on to your computer system, you’ll first need to install the Packages Control package. I believe this is a requirement for properly using the editor. Package Control is the way Sublime manages the plugins and packages you may have installed on you text editor. The Command Palette will keep you editor organized making it easier for you to find what you’re looking for. Also, it will keep your plugins updated.
There are a couple of ways to do this requirement. I will show you how. You need to copy and paste a code into you Sublime text editor. Don’t worry I will walk you step by step using the simple installation method that I use. I will show you how to perform an install for the Windows operating system only. Let’s go do this.
Auto Install: Step-by-step Instructions For Windows Users
- Open you Sublime Text Editor.
- Click on View which is on the navigational bar at the top of your editor.
- Drop down and click on Show Console.
- Now we must visit Sublime Test Editor Package Control and copy the code that’s there.
- On the Package Control website, and on the left the side of the page located and click on the Sublime 3 tab.
- We need to copy the code that’s inside of the box and bring it over to you Sublime text editor. I highlighted in the image below so that you will be able to find it easier.
- Go back to your text editor and scroll down to the bottom of the editor.
- Locate the narrow text box located under the terminal window. This is where we’re going to paste our code.
- To paste our code, you first click on the inside of the narrow box under the terminal window.
- Now right click on your mouse and click on paste.
- Press enter and wait for the install to complete. You will see text populate the terminal, indicated that it’ loaded.
- Close Sublime and restart it to complete the installation of you package control.
- Check the installation (The step-by-step instruction are after the Manual install)
Manual Install: Step-by-step Instructions For Windows Users
- Manually install Sublime text editor by visiting this page.
- On the right side of the page is an ordered list. Click on the link to download the package file to your computer. You are looking for a link that says Package Control.sublime-package.
- Locate the package control file you downloaded and copy it.
- Now go back to Sublime text editor and click on the preference tab, it’s located at the top of the editor.
- Click on browse packages to open the Packages Properties folder on your computer.
- Look at the Package Properties folder. Do you see Sublime Text 3 located in the breadcrumbs (Navigation bar) near the top of the folder? Click on it. To help you find the area I’m talking about, I’ve inserted an image of it.
- Open the Install Packaged folder by double clicking it. (single or double will depend on how you set your computer up)
- Now paste the file from step number 3 into this folder.
- Now close the file Command Palette.
- Close Sublime and restart it to complete the installation of you package control.
- Check the installation.
Checking Installation & Using Package Control
I would like to check the installation and make sure it’s working properly. Just because it shows us it was a successful install, doesn’t mean that it was. By checking that it is working you are also learning how to use the package control. What a cool deal.
Checking Install Step-by-step Instructions
- Press down CTRL+SHIFT+P. A Menu will open up. This is how you will launch (open) the package control. This means that you have successfully installed a package. You are really doing this on your own.
- Type Package into the search box. A list of options will pop up, showing you the selections you have installed for package control.
- Click on Package Control: List Packages. These are the packages that you now have installed in you Sublime text editor. You did it again, successfully installed package control.
Using View In Browser Step-by-step Instruction
The View in Browser feature in Sublime text 3 allows you to do just what it implies. With this text editor, you can view your development work in the same kind of web browser you would view others website on. The only difference is, you see it live as you develop your website. Let’s see how to use the package control to install View in Browser or any package you choose. Any questions, please ask.
- Hold down the Ctrl+Shift+P on your keyboard. Your Command Palette will pop up just like before. I created a Keyboard Shortcut list or sometimes called Hot Keys and placed it under these step-by-step instructions. Please use it until you can remember them by hard. Bookmark this page for faster reference.
- Search for Install Package. As you are typing, notice how the Command Palette starts to fill up showing you options. Also, notice at the bottom of the text editor the little bars moving back and forth, this mean it’s installing. Just wait, a selection box will appear.
- When the options appear you will be looking at all you installed packages on Sublime. This is how you find and pick which item to plugin into the editor. Type View in the search field and another list of option appears.
- To view your project in a browser hold down Ctrl+Alt+V. How does it look? Great right? Any question? Let’s go learn some hot keys. (keyboard shortcuts)
Keyboard Shortcuts are going to allow you to become more productive writing code faster.
Opens the Command Palette menu allowing you to select packages and plugins. There is a lot you can do with command. You should play around with it and discover all it has to offer. I may create tutorial just on Sublime Ctrl+Shift+P as a stand alone.
- Opens a menu option of you most recently visited files. Use the up and down arrow keys on your keyboard to view the files in the list, without having to actually open them. This feature helps you find files faster so you can get in more coding time. All you do is hold down Ctrl+P and start typing in the file name. Before you even finish typing, the file will show in the options list.
- Go a step further with you search by typing in any symbol like @, #, &, or (^) and have the text editor find them in your document faster. This is known as syntax highlighting and it’s great for locating pieces of code fast.
Uses the colon in the search, you follow it with a number and hit enter. The editor will take you to that line number. For example, if I insert:777 into the search, and pressed enter, Sublime will take me to line 777 in that document. This is great for when you validate your code. With you code validation reporting the line numbers that has an error, you can save time finding and fixing them.
Will get that annoying sidebar out of your way until you call it back. I don’t know about you, but I like having a lot of windows space to work on my projects.
Ctrl+Shift up or down
Will move a line(s) of code up or down your document, This is great when you need to move a single of code a few spaces. No copy or pasting just hit the keyboard shortcut hot keys and move up or down a few lines to where you want them.
Will delete whole words at a time. No need to keep hitting the backspace removing one letter at a time, use the shortcut and get it done faster.
Will allow you to remove a complete line without having to highlight it. Just active the keyboard shortcut and watch it as it disappears. Are you starting to see how efficient Sublime can be?
Will bring back a line of code you accidentally deleted like it never happened. I once deleted a whole sheet of code, but like magic, it was back.
That’s control+shift+dee and that’s how you duplicate a line of code. Would you like me to repeat that?
You’re Hot on The Right Side of The Learning Curve
You just learned how to install the Sublime package control. Now you are able to manage you Sublime text editor packages and plugins. You should take a break, call a friend or family member and share your good news with them. Great Job! You’re Hot on The Right Side of The Learning Curve keep it up!
Just think, you thought that web designing and application development, along with continuous learning was going to be hard stuff. I tell you the truth, it is. Read this article I wrote about how I plan to make it easier for anyone willing to put their heart into their pursuit of happiness. (Happyness 🙂 Click Here.
What, what you say? The links not working, you clicked on it right? Wow! Thank you, for telling me about this. I bet you I know just what the problem is; You see…
I’ve been writing about it through out this here website. It the story of my pursuit to achieve a higher standard of living. The problem is that it doesn’t just include me. You’re in on this as well. Some people may think I got it all wrong, but they’re only partially right.
I’m creating these tutorials not only for the money to pay my bills and live a little happier than I have in my past. Who’s not trying to reach the same conclusion? But, I’m also in it to help people learn how to drive after dreams. I love to see people reach their goals and to be a part of it.
I do this from my heart not because I have, but because I want to. (I’m still working on my logo) OK, breaks over.
Sublimes Full of Benefits
Multiple Selection ~ Do you have multiple lines of text you need to change in your code? Sublime multiple text selection is a feature you will like using. Using your mouse’s cursors to select and change more than one line of text at a time will make you more productive as a web designer.
You’ll save time when ever you use multiple text selection. You can have it find the next occurrences of a word and change them all at the stroke of your fingers. You’ll be able to write more code, fix the same repeated mistakes you keep making line after line easier and faster. It may even help reduce coders related stress.
Auto Completion ~ will provide auto completion for HTML classes, CSS, data attributes, and more. As you start to type out your code, auto complete will pop up and you choose from the list which item to complete.
Up Next Notepad Plus Plus Notepad++
Notepad Plus Plus A Little More and A Lot Less Emission
Notepad Plus Plus is a free open source text editor that was developed by Don Ho. He wrote it using C++ and Scintilla and released it November 2003. Notepad Plus Plus became the replacement for Notepad. Downloads for the latest version (v7.4.2) of Notepad Plus Plus is available for the 32-bit x86 or 64-bit x64 Windows operating system ONLY. Visit Notepad-Plus-Plus.org to download the latest version.
After you download go ahead and install the application onto your Windows system. Setup will walk you through the process. Notepad++ downloads fast and the file size is only 8.4mb. Therefore, you’ll be ready to start writing coding, because Notepad Plus Plus only takes seconds to work.
The Auto-Updater will download and install the latest version updates automatically on you Window system. The updates happen in the background so you can keep working on any of your projects.
Notepad Plus Plus is working on being a product that is more environmentally friendly. Designed to consume less CPU power by optimizing its files and in return putting out fewer carbon emissions.
Lightweight but Efficient Notepad Plus Plus
Win32 (API) Windows Application Programming Interface is Microsoft’s core set Windows operating system. Win32 API is a set of functions, routines, and sub programs sometimes called a procedure that is used for building applications. In the case of Notepad Plus Plus, this application is a text editor that’s built to increase performance and with fewer files to do the job.
Notepad Plus Plus uses (TDI) which are an acronym for Tabbed Document Interface. Bacisly, all that means is that Notepad Plus Plus supports multiple panels and document, which allows you to work with a split screen. You can be working in your CSS file on the left pane while your HTML document is opened in the same window but on the right side.
Notepad Plus Plus Can Handle The Heat
Notepad Plus Plus will open any file from Windows Explorer. It comes installed with over 20 themes styles to choose from and has the availability to install your language.
Other features included with Notepad Plus Plus are Syntax highlighting and Auto-save. You will not lose your place while coding and never worry about losing your work because of something going terribly wrong. With Notepad Plus Plus auto saves your work is safely filed away. Did I mention multiple selections for manipulation of several lines of text at once? How about keyboard shortcuts.
Notepad Plus Plus Multiple Selections Setup
- Start with clicking on settings to make it drop-down, then click on preference.
- Click on the Editing button located on the left side of the text editor.
- Find and click on Multi Editing Settings.
- Click on close Multi editing is set up.
- To use Multiple Selections hold down the CTRL key and place your cursor in the locations you want to select and left click on the mouse.
You can select as many lines as you wish, just remember press and hold down the CTRL key while making your selections. If you don’t hold the CTRL down while making you selections, any selection you made will be reset and you will have to start again. Not cool.
Have you had enough 🙂 Want More?
While Notepad Plus Plus may not be at the top of web developer’s list, it can still get the job done. I found this editor easy to use and I’m sure you will as well. This is a great text editor for a web designer who just texting the water. Do you have time for one more source code editor? Do you have questions?
Notepad Plus Plus: Lesson 1.3 Conclusion
This will conclude lesson 1.3 of Notepad Plus Plus ~ Sublime Text Editor ~ What’s Atom? When we come back, we’re going to jump right into lesson 1.4 How to Install git on Windows. We’ll be learning about setting up a Git account for version control. Also, we will be creating our first web page using HTML5. Are you ready to start writing in code? Good, because first, we will learn the fundamentals of writing your first code while learning how to build a website from scratch.
Start Lesson 1.4 How to Install git on Windows
That’s all for now. If you like this post, kindly hit the like button and share it with anyone you can think of that will benefit from it. If you have any questions, opinion, comments, or feedback, please leave them in the comment section down below. Thank you and God bless you.
My true feeling about creating a website by hand coding it; It’s like a Thanksgiving meal. Not just any kind of turkey day dinner. More like the kind grand mom’s cook; Make it from scratch she used to tell us. You’ll put more love into a home-cooked meal she would say. I guess I’m kind of old spirited and like creating things the old fashion way. Build them to last a life time. ~ LeNard’s View ~