Latest Post

Getting Started With Visual Studio 2012

Posted by ⋅

Ok, so I’m really late to the game here, since Visual Studio 2012 was released about 9 months ago.  However I have been working with a client who was not ready to upgrade yet and since I’m sure there are many people like me who have still yet to install the latest version, I thought … Continue reading »

Leave a Comment Software Development
  • The theme of Prairie Dev Con 2013 was JavaScript and HTML5, which enticed me to re-discover JavaScript after a two year break from it. I started thinking about a good project to dive into, but soon was overwhelmed with the variety of development environments, libraries, samples, APIs, documentation, etc. Not wanting to give up so easily, I decided to take a step back, and instead focus on setting up an environment to develop in. Text Editors Like most developers, I spend the majority of my time in an IDE reading and writing code. For years I've been a happy user of Visual Studio, building software for clients in .NET. More recently I've been working with clients who use IntelliJ IDEA for Java and Scala development. While both VS and IntelliJ may be perfectly suitable for JavaScript development, they are far from ideal. Both suffer from visual bloat, general slowness, and aren't truly targeted for HTML/JS development. My all time favorite text editor is Sublime Text, and it is by far the single best text editor I've ever used (no offense to vi/emacs folks, I've never had the patience to learn either). Sublime offers extremely fast performance, extensibility through a rich base of community plugins, easy customization, affordability, and many other great features. What exactly makes Sublime Text so great? Here's a quick list of tasks I regularly use it for: Multiple Cursors/Selections: Ctrl+F, enter text to find, press Alt+Enter to select every instance of text in current file. Replace selected text, or move cursor to another place in line. Ctrl+F, enter text to find, Ctrl+D to select next instance of the word. Ctrl+D until all sequential instances selected. Place cursor on word, Ctrl+D to select the word. Ctrl+D to select next instances as above. Goto Anything: Ctrl+P to open Goto Anything window. Type file name to open file in current project. File searches are fuzzy, meaning any part of a filename entered will match SublimeText instantly opens a file preview window for currently selected file, and closes it when next file is selected or Goto window is closed. Ctrl+P to open Goto Anything window, @ to go to a symbol in file (method names, headers, etc.). Use : to go to line number. Both can be combined with file name to directly jump to a symbol/line number in a specific file. Command Palette: Ctrl+Shift+P to open Command Palette. Start typing name of command to filter list of commands. Commands include every single menu item available in text editor. Plugins: Install manually, usually by cloning git repositories or downloading a zip Use Package Installer plugin to manage installed plugins Theming and customization: Choose from a number of built-in themes, install a third party theme, or easily customize your own Shortcut and UI customization available by editing config file. Instant config reload as soon as file is saved. ... and many other great features that someone could write a book about. What makes my workflow in Sublime Text so efficient is the use of keyboard shortcuts to accomplish almost any common task. Mouse use is minimized, which decreases the amount of time I waste every day switching between using a keyboard and a mouse. I've always found the repeated movement between the mouse and the keyboard to feel unnatural, so I welcome the ability to accomplish tasks quickly with the keyboard. Common Sublime Text extensions Here's a list of a few extensions (called packages in Sublime Text) I currently have installed: Sublime Package Control - the easiest way to install and manage packages. Markdown Preview - allows quick previews and copying of generated HTML from markdown. I wrote this blog entry in markdown, then copied the generated HTML into Wordpress. Far more efficient than editing through the browser. Sublime Linter - I've only used it with JavaScript so far, though support for other languages is present. Highlights JavaScript errors as soon as the file is saved, reducing compilation and some other common errors. Soda Theme - dark UI theme for sidebar and tabs. Must-have if using a dark color scheme. Console Replacement Next on the list of development environment tools is a replacement to cmd.exe. The default windows console is barely useable - intelligent tab completion is absent, colors are not supported, there is no possibility of extensions, and you cannot resize the window easily. Microsoft provides a better alternative in the form of PowerShell, but it still feels clunky, and does not offer much in terms of improvement, though it is very scriptable. I've also tried using Console2 and MinTTY, though again, neither quite worked perfectly. ConEmu is the best console replacement I've managed to find. It is quite extensible, offers the ability to add tasks it can launch on startup, and supports tabs. ConEmu isn't perfect however, as I have found it uses more CPU than other consoles, and the ability to select all and copy all text is missing. ConEmu is actively developed, so new features are being added regularly, and bugs are being addressed relatively quickly. It is important to remember though that ConEmu is not a shell - it is a console emulator, and by default it will use cmd.exe as the shell. Zsh I've tried bash as an alternative shell, and while it is good, there are better alternatives. Recently I've discovered the power of zsh, and I've grown to like it. Zsh can be installed through Cygwin on Windows. When using Cygwin, changing the current directory to root drive becomes a bit quirky as there is no longer the concept of C:\; instead, root becomes /cygdrive/c/. I've using a custom ConEmu task, and set up Zsh to start in /cygdrive/c/ by default, so I typically don't need to worry about remember to type the full path. One of the two biggest draws for me was it's extremely smart tab completion. If I need to switch to a directory several levels deep, I would typically type out the full path: cd projects/JavaScript/demo.js/scripts/views/, which is quite cumbersome. Zsh is smart enough to allow shorten of the path: cd proj/j/d/s/v + Tab. Assuming zsh finds the path without any duplicates, it will expand it to the proper path. In case zsh finds duplicates, it will give you the choice of which to choose. If you mis-spell the command or path, it may even be nice enough to prompt you with the correct alternative! It's smart tab completion is by far the best I've used so far. Extensibility of zsh The second draw to zsh for me was ability to extend the shell. Oh-my-zsh is a framework for managing zsh themes and plugins, and once installed, gives the ability to use one of dozens different user contributed scripts to set up zsh visuals, command prompt, etc. I haven't had much of a chance to try out the different plugins, but I use a custom dark theme, combined with a pretty git prompt to end up with a prompt that reads: ➜ Agent-Service git:(development) ✘. Interpreting the prompt is easy - the starting arrow indicates it is a command I type, and helps distinguish between commands I type and command results that get printed out. Next is the directory, namely Agent-Service. Since I am currently in a git repository, my current branch (development) and status (✘ meaning I have outstanding commits) are printed. In addition to plugins and themes, zsh also allows for easy creation of aliases. I've set up a few so far that reduce long commands I frequently type to much shorter versions: Launch Sublime Text 2: alias subl2='"/cygdrive/c/Program Files/Sublime Text 2/sublime_text.exe"' Switch to my project directory: alias cdagent='cd "/cygdrive/c/Working/PDS/Agent-Service"' Version Control Not much to be said about version control. I've used several before, most notably CVS, SVN, TFS, and Git, and by far the one I liked the most has been git. Git is very easy to learn, though I do recommend spending time to learn branching/merging (far less scary than in SVN/TFS), and using the command line in general to truly understand what git is doing under the coveres. As mentioned earlier, oh-my-zsh provides git plugins and custom git prompts that enhance git command line useability. HTTP Server For JavaScript/HTML development, using your local file system instead of an HTTP server may be fine, or at least will be fine until the day the application is hosted from an HTTP server. You will likely find broken links, scripts, images, etc. as soon as the application is migrated to a web server. Instead, I suggest starting with hosting in an HTTP server right from the beginning. There are many choices, including the standard Windows IIS, Apache, etc. For most web development without the need for custom server-side code, all those are overkill. If you installed Sublime Text, you are guaranteed to have Python installed. And if you have Python installed, you have an HTTP server installed. Python comes with a simple HTTP server that can be started quickly in any directory. Python 2.7 Launching an HTTP Server in Python 2.7 is simple - cd to root directory containing the web project, and type python -m SimpleHTTPServer 8080 (note: port is optional, 8080 is the default). As long as the Python process is running, so will the HTTP server. It can be accessed by browsing to http://127.0.0.1:8080 or the local/public IP of computer. If I've convinced you to try zsh, go ahead and set up an alias: alias server='python -m SimpleHTTPServer' Python 3.0 In Python 3.0, the SimpleHTTPServer module has been moved to http.server, so starting the server is slightly different: python3 -m http.server (port optional) Final Words The above tools can be used to get a start on developing JavaScript/HTML applications, or can be used to get ideas on improving the current development environment. There are many more useful tools, Sublime packages, browser environments, automated and cloud testing solutions, etc. that can be used, however I will leave those for future posts. I hope the information has been useful to those that have managed to make it this far. If there is one piece of advice I would give to a developer, it would be to download Sublime Text. Right now, just go and download it!
Follow

Get every new post delivered to your Inbox.