I gave a introduction talk to Node.js at Chippewa Valley Code Camp last weekend. It was fun and had a great turnout. I found a neat idea from Esa-Matti Suuronen called geekslides where he used socket.io in conjunction with Node to have a remote controlled slidedeck. I expanded on the idea and learned a bit from the process that I wanted to share.

I think my favorite part about presenting is that it motivates me to dive into the subject matter even deeper and wrestle with how to explain so it’s simple to understand. Prepping for a talk also gives me a chance to code around with technologies I haven’t played with much in my day to day work and to have an avenue to explore them and learn myself.

I hadn’t dived into any of the lightweight MVC client-side frameworks yet, namely Backbone and Spine. My MVC framework experience has been mostly with ExtJS which is definitely not a lightweight. I ended up using Backbone for the presentation which was rather pleasant, simple, and produced some nice readable code.

socket.io has been a hit for many coming into the Node community. Many Node Knockout competitors used socket.io in some form.

So the final product is on GitHub, called node-slides and you can view it live here. Feel free to play around and run it, fork it and use it for your own presentations.

Updated: 10/13/12: I still use Gnome Shell but switched to Arch Linux for a disto over Ubuntu.

Some heat has been around Gnome 3/Shell spurned mostly by some comments Linus Torvalds had in opposition to the updated desktop environment. This post really hasn’t much to do with Linus however (I like Linus, I use his operating system and version control system daily)

I like Gnome 3/Shell a lot and, like the Vim article I wrote, it was an adjustment from what I was used to but I think its heading in the right direction (although not perfectly). I’m not really here to convince you of a my stance though. I just want to tell you what I like about it:

The Desktop

Above is my desktop (I bumped my resolution so things are easier to spot). What I love is everything is out of the way. It is very clean. Time/Calendar is right there in the middle, extra widgets are on the right. I love that notifications pop on the bottom, attention grabbing enough but stay out of your way (although this isn’t perfect yet). I actually like that there is nothing on the desktop, I didn’t at first but I found that I can manage files much better using Nautilus w/ the extra features like split pane (BTW you can get icons back on the desktop with the Gnome Tweak Tool)

Activities

This is one of the most genious features I think in Gnome Shell. Hover your mouse over the Activities button or press ALT-F1 (or Super/Windows key) and boom you get an overview of what’s happening in your current workspace with the ability to launch new applications, organize your workspaces, close apps. It’s beautiful and arguably better designed than MacOS Lion’s new Mission Control. I personally map my CAPS LOCK key as a Super/Windows Key to make it even easier to switch back and forth.

Another thing I have used for quite a long time is a launcher application so I can just type an app I want and hit ENTER and booya! Gnome Shell has this built in and in a clever way. Just start typing in the Activities view and results are filtered for you. Just hit ENTER on the top match and it will either launch the window or switch to it if its already open.

Note that it doesn’t open a new instance of an application if its already open. This one was one of the issues Linus offered up in his comments, namely how to open more than one terminal this way. For me, I mapped Super-T to open a new terminal and it works great. However, I hope this behavior becomes more configurable in the future.

Themes/Extensions

It’s probably not a secret but like JavaScript and CSS and the rest of the open web technologies. Gnome Shell is embracing this. Its written using JavaScript and CSS. Themes for the shell are made with CSS. Extensions are JavaScript/CSS (and perhaps other langs but not sure). Gnome is embracing these platforms because they lower the barrier of entry (not saying JS/CSS people are dumb, but that there are a lot of us), plus they are good, solid technologies.

Conclusions

I think Gnome is building some good foundations, it’s not all the customization you get with Gnome 2 but seriously, its just a baby, it has to start somewhere and more goodness is on the way.

My Configuration

If you are interested in my setup. I use the Aldabra Theme and the Adwaita themes for both Firefox and Chrome to get a consitent look with legacy apps and non-GTK apps. Icon set is Faenza Darker and I use latest Zeitgeist to get Recent Items in the Applications view. Themes, icons, and more can be adjusted using the Gnome Tweak Tool.

What about Ubuntu Unity?

I like Ubuntu a lot, its my favorite distro by far for desktop and server environments. I will most likely stick with them as they will support Gnome Shell and Unity. I think Unity is half-baked at the moment and I don’t really care for it but some people like it.

I used to be a die-hard Windows guy. In fact, in Middle School, I remember advocating (e.g. doing class presentations) that Windows was indeed better than Mac. Kinda funny now since I’d take a Mac over Windows… but ultimately I choose Linux over both. At the moment it is ArchLinux. All that to say, things change! Like OSes, I’ve changed my tune with what I use to write code.

NetBeans

When finally got a real programming job, the IDE I was indoctrinated into was NetBeans. I came from an Eclipse world in college so NetBeans wasn’t a far stretch and I kinda liked it better from a GUI perspective. I was the front-end guy and at the time, there wasn’t much good support for JavaScript, CSS, or HTML as web applications were kind of a newer way to work with JAVA. Thankfully, now all those technologies are much better supported in recent versions of NetBeans.

gedit

Ruby on Rails ruined me for Windows because lets be honest, the command line sucks, and many operations required it, plus Ruby windows support is meh, so I tried out Linux. Oddly enough, I never continued to dive more into Ruby but I did stick with Linux. I was doing PHP more than JAVA and NetBeans was bulky, simple operations just took long. The overall IDE was sluggish.

Enter gedit: the stock Gnome text editor with a some very powerful features, unlike your stock Windows text editor :). I also was utilizing git more and writing bash scripts so having a terminal window along with my editor was more and more important. Thankfully, gedit had a built-in embedded terminal plugin and some great community plugins enhancing it to include many features TextMate users have come to love. After setting it up, I was far more productive than in NetBeans. What I liked better was:

• Removal of a lot of cruft.
• Fast.
• Embedded Terminal.
• Great Community Plugins (themes, autocomplete, snippets, quick loading, syntax support, easy to write syntax files)

vim

So there comes this point when I just really want to switch things up. I knew Vim was really powerful as a text editor but I just didn’t get why. It was the most awkward experience just getting used to it the first time…

How to I just type something! How do I quit! Nothing is familiar here!

Plus the fact that it was all… well… terminalish. I wanted to use the mouse man! I wanted it to look pretty!

Thankfully there was some help for people like me and the fact that there was a GUI version bundled in (GVim). Getting that setup brought some warm fuzzies but really I had to bite the bullet. This meant I had to remove Gedit (my safe place) and force myself to only use Vim for a couple weeks to give it a fair shot (I highly recommend this). And note, I was not productive like I was before. I had to be OK with being slow and awkward for a while.

I went through vimtutor and started watching video tutorials. I even had an iPhone app w/ Vim flashcards to memorize the key-mappings. I also read a lot of the Vim help (:h) which is quite readable and informative.

The result… I absolutely love it and would not go back, why?:

Modal Editing

Modal editing makes so much sense once you get used to it, you not only get to use your whole keyboard to insert text, you get to use it also to manipulate text. For example. Say you want to select everything within double quotes and replace it. This happens more than you think when dealing with strings. How would you do this normally? Here’s one way:

Select the text with your mouse, clicking the start and dragging to the end of the text and then hitting delete. Seems easy enough right but look at what actually is happening from an efficiency standpoint. You remove your hand from the keyboard to grab your mouse, you click and hold the mouse making sure you clicked the right spot and then you drag your mouse making sure you land on the other spot correctly. Then, you remove your hand from the mouse, find home row (or don’t), and type backspace.

Or if you are more keyboard savvy, you may do put your cursor on the starting letter, hold down shift and cursor over to the ending word and hit backspace but its awkward and requires many keystrokes. The point is, most editors have only one mode, insert, and all your keys are used only for that purpose.

In Vim, you can do this task really easy. In normal mode, if your cursor is anywhere within the quoted string, just type ci" which is pneumonic for ‘change inside double quotes’. Vim will delete all everything in the quotes, put you in insert mode, and you can start typing your replacement.

This is just one example of many where time is saved on common tasks because of modal editing.

Community

Vim has a great community and rich set of plugins. I am not about to write a tutorial so I will stop myself from going into other features I love. If you are interested, feel free to checkout out my vim config. It is mostly setup for JavaScript/CoffeeScript and NodeJS development.

So Long GUI

I’ve sinced moved out of the GVim and run vim strictly in the terminal in conjunction with tmux.

What’s Next, Emacs?

I have asked myself this question. I do like Emacs for some of the features is offers like Org-mode (which actually has a nice Vim port now) and I can agree it has a more powerful extension system with ELisp but frankly at this point, Vim’s killer feature that sets it apart is modal editing. I’ve tried Viper Mode but its just not the same IMO.

How do you do JAVA development in vim?

Although my JAVA development is not much these days, I have searched for a way to completely dump an IDE for JAVA development and I haven’t found one yet. However, NetBeans has some great file watching and recompiling facilities built in which is nice. What I do is open the project in NetBeans in the background and use Vim and just have NetBeans watching and deploying on changes.

What about you?

What is your text editing story? What do you use and why? Feel free to leave it in the comments.

I gave a introduction talk to NodeJS at Twin Cities Code Camp earlier this year but never posted it. It had a great turnout with a great audience which made it fun as a speaker. If you are interested, below is the slidedeck for that talk:

We did go through some code samples as well which are up on GitHub.

They took some interviews of the speakers as well about their talks and put them up on YouTube. Here was my interview:

The comma operator in JavaScript was a long time mystery to me but once I started using it I found it can be quite handy in certain situations. In this example, picking the next color out of the available six.

1
2
3
4
5
6

var colorIndex = 0
var colors = ["FF0000","008000","FF0086","A2FF00","0000FF","800080"]

function selectNextColor(){
  return colors[colorIndex++] || colors[colorIndex = 0, colorIndex++]
}

So what’s this all about:

1

colors[colorIndex++] || colors[colorIndex = 0, colorIndex++]

So if the current index exists in the array use that and if not, reset the array to index 0 and then grab the current index (which is now 0). The mystery of the comma operator is that only the last expression is returned and used by the array and the expression colorIndex = 0 gets evaluated first but the result is not used.

Further Reading

Angus Croll, who has an excellent JavaScript blog mentions this technique in his comma operator article.