Using Chrome as the default webapp browser in Ubuntu

The way I generally use Twitter is via command line. I had been using TTYtter but have been trying out Rainbowstream. It’s always available to my in a Yakuake drop-down terminal. This is great, except for the fact that Ubuntu sees these applications as webapps. When I open a link from within these applications, it opens in the Ubuntu Web Browser, ignoring the defaults that I have set. This minimal browser is not where I want these links to open, but I had a hard time figuring out how to make it use Chrome instead.

You can uninstall webbrowser-app, but the next browser in line is Firefox.

Here’s how I fixed it:

Open /usr/share/applications/webbrowser-app.desktop in the editor of your choice
Locate the line that says Exec=webbrowser-app %u and replace it with Exec=google-chrome %u
Save the file and any links that would open with the Ubuntu web browser should now open in Chrome!

Multifactor Authentication

Clearly I’m not good at keeping up a blog. I’m now working at Lonely Planet, where I’ve recently published an article on Multifactor Authentication using Devise on the engineering blog.

DOM Manipulation with jQuery

Prior to my start at Nashville Software School, I had little knowledge of jQuery. I had taken a course on it at CodeSchool, but that was it. I’ve now been using jQuery for a couple months and am really getting a handle on it. I am no expert, but I feel like my ability to manipulate DOM elements has become pretty strong.

We just had a game project that involved elements moving randomly within a grid (in our case, the grid was a table). Instead of these elements just appearing in the new td and disappearing from the original, I wanted to make them float over to their new position. I figured the movement would make everything seem much better.
I did a search for animating an element from one div to another and found this http://stackoverflow.com/questions/907279/jquery-animate-moving-dom-element-to-new-parent

I changed the variables in the top answer to better fit my project, but it still didn’t work. So I messed around with it and learned a lot about how it worked. It’s still a bit glitchy, but it’s very close. Here is my code with comments:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function htmlAnimateMove($old, newPos) {
  // $old is the jQuery element that we want to move
  // newPos is the parent container we want to move $old to
 
  // the jQuery .offset() method retrieves the position of an element in relation to the document
  // instead of the closest positioned parent
  var newOffset = $(newPos).offset();
  // newOffset contains the positioning of newPos in relation to the document
 
  var oldOffset = $old.offset();
  // oldOffset contains the positioning of $old in relation to the document
 
  var $temp = $old.clone();
  $temp.appendTo('body').css('left', oldOffset.left).css('top', oldOffset.top).css('position', 'absolute');
  // we clone $old into $temp and append $temp to the body using the position in oldOffset
  // $temp should now be overlapping $old
 
  $old.hide();
  $(newPos).append($old.css('left', 0).css('top', 0));
  // hide $old and move it to the container defined in newPos
 
  // use jQuery .animate() method to move $temp to the position contained in newOffset
  $temp.animate( {'top': newOffset.top, 'left':newOffset.left}, 'slow', function(){
 
    // after that animation has completed, show $old and remove $temp
    $old.show();
    $temp.remove();
  });
}
function htmlAnimateMove($old, newPos) {
  // $old is the jQuery element that we want to move
  // newPos is the parent container we want to move $old to

  // the jQuery .offset() method retrieves the position of an element in relation to the document
  // instead of the closest positioned parent
  var newOffset = $(newPos).offset();
  // newOffset contains the positioning of newPos in relation to the document

  var oldOffset = $old.offset();
  // oldOffset contains the positioning of $old in relation to the document

  var $temp = $old.clone();
  $temp.appendTo('body').css('left', oldOffset.left).css('top', oldOffset.top).css('position', 'absolute');
  // we clone $old into $temp and append $temp to the body using the position in oldOffset
  // $temp should now be overlapping $old

  $old.hide();
  $(newPos).append($old.css('left', 0).css('top', 0));
  // hide $old and move it to the container defined in newPos

  // use jQuery .animate() method to move $temp to the position contained in newOffset
  $temp.animate( {'top': newOffset.top, 'left':newOffset.left}, 'slow', function(){

    // after that animation has completed, show $old and remove $temp
    $old.show();
    $temp.remove();
  });
}

It’s been really helpful to me to just go in and mess around and break things. It’s helped me understand how things actually work. I’m hoping that this explanation is helpful to others going through the same learning process.

JS-Pong

As I mentioned before, I’ve been working on a version of pong that is written in JavaScript. I’ve added the features I was wanting to add before release, but will continue to update it and add features.

Some of the things that I hope to be adding over time are the ability to play a one player game (will require basic AI) and powerups. This is supposed to be an extended educational project, so I welcome feature requests and will try to add them is as I’m able.

Without further ado, here is JS-Pong.
You can view the project at https://github.com/mkunkel/js-pong

Switched to WordPress

I started this blog with Chyrp. That decision was made after trying out many options that were more lightweight than WordPress. It seemed like a really nice, simple option. However, after having lived with it for a bit, I found that it had enough shortcomings that I really needed to switch before I added too much content. There were weird errors and too many things that needed to be edited through manually editing theme files instead of using a control panel. When things don’t work, the Chyrp community is relatively small and answers aren’t readily available. I don’t think I was prepared to put in as much additional effort as was required by Chyrp, I wanted it to just work.

My intent here remains the same. I don’t intend to just go with whatever theme, I intend to make it my own over time.

Pong

For some time now, I’ve wanted to work on an extended project just for my own practice. I went ahead and started on one this weekend, which was pong. I’ve written a basic pong game before in python. I decided to do it over in javascript. My goal is to go beyond creating the basic game and keep adding features and re-factoring. Hopefully I’ll end up maintaining a more complex codebase than what I’ve been working with in class.

Yesterday I put in a few hours and produced a Minimum Viable Product. It’s not even a good implementation yet, but it is functional. The ball bounces off of the top and bottom of the screen, as well as off of paddles. If the ball hits the side where there is no paddle, the player on the opposite side scores a point and the ball re-spawns. What it doesn’t do is increase the ball speed over time or adjust the ball angle based on how a paddle hits it. Also, it’s too fine of a line between hitting the ball with the edge of a paddle and missing entirely. These are the tweaks I intend to work on next. After I get that set up, I’ll get it uploaded and linked from this site.

More on Haml

I came across two things that are in relation to my previous post on Haml. The first is that Emmet does support Haml, you just have to add |haml to the end of your string.

The other thing was a blog post that I just randomly came across that much more eloquently explains my thoughts on Haml. I Heart Sass, But Haml, I’m Just Not That In To You

Creating files with dates

I mentioned in my previous entry that we are using some pretty tedious directory names, like 2013-09-26-Restaurant-Menu. We are frequently copying a template folder that has a similar name. Even with a wildcard to reference the template folder, copying it to a new folder with the specified format and then changing into that directory is a pain. I wrote my very first shell script to get around this issue. Here’s how you can do the same.

In your terminal, check to see if ~/bin exists. If not, create it, cd into it and then create a file called dcp
Add the following text to dcp:

1
2
3
4
5
6
7
8
#!/bin/bash
# This will copy a directory, adding the date to the beginning
# of the file name and cd into the new directory
# Date format: 2013-10-01-
 
nowDate=$(date +%Y-%m-%d-)
fileName=$nowDate$2
cp -rv $1 $fileName && cd $fileName
#!/bin/bash
# This will copy a directory, adding the date to the beginning
# of the file name and cd into the new directory
# Date format: 2013-10-01-

nowDate=$(date +%Y-%m-%d-)
fileName=$nowDate$2
cp -rv $1 $fileName && cd $fileName

Now you need to create an alias. Edit your ~/.bash_profile to add the following line:

1
alias dcp='. ~/bin/dcp'
alias dcp='. ~/bin/dcp'

You can change the alias to whatever you want, but I chose dcp for Date Copy.
Now restart your terminal and you can use the dcp command as follows (using a directory called “test” as an example):

1
dcp test testnew
dcp test testnew

Which should display the following result

1
‘test’ ->2013-10-01-testnew’
‘test’ -> ‘2013-10-01-testnew’

In addition to creating the directory, the new directory will now be your current working directory. 
Our current template is 2013-09-27-QUnit-Template, so here is how you would create a new project using wildcards:

1
dcp *QUnit* New-Project
dcp *QUnit* New-Project

Enjoy!

Tips for others

I found out today that there are several other students at Nashville Software School that are reading this blog. I figure that means this is a good opportunity to throw some general tips out there for others that are starting out.

I tend to find shortcuts for many things and we certainly won’t be covering them all in class. So, for those enterprising enough to be reading another classmate’s blog, here are some of the things that I use to speed up my workflow:

We’ll start with some basics:
Alt+Tab – This is a very well known keyboard shortcut to switch between open applications. Hold down Alt and press Tab repeatedly to select the application you wish to work in. Add shift to move in the opposite direction.
Ctrl+Tab – This does the same thing as Alt+Tab, but for windows within an application. This is very helpful for switching between files in Sublime.
F5 – Refresh your browser window.
Alt+D – Put the cursor in the address bar of your browser. It should highlight the entire address as well.

Now some helpful Sublime shortcuts:
Ctrl+/ – Comment/uncomment current line. You can also highlight specific text before doing this to comment only that text (doesn’t work in all types of files).
Ctrl+L – Select entire current line and places cursor at the beginning of the next line. Keep hitting it to select lines below it. If you hit delete, the remaining lines collapse against each other.

Multi-Line editing in Sublime:
This is one of the most unbelievable timesavers. Say you have to write the same thing in many places. Or maybe you decided to change a variable name and want to change all instances of the previous variable name. There are a couple ways that you can do this.
Hold Ctrl and click everywhere that you want a cursor. That’s right, you can have dozens of cursors and whatever you type will show up everywhere you placed a cursor. Every time you hit backspace, every cursor will delete a character. Where it gets really interesting is that you can hit Home or End and every cursor will go to either end of their respective lines, regardless of length. That allows you to easily nest strings inside methods on multiple lines. Additionally, each cursor has it’s own clipboard, so you could potentially copy and paste a dozen different things all at once.
Another way to use this is to highlight some text that occurs everywhere that you want a cursor. Then every time you hit Ctrl+D, the next place that text appears will be selected and a cursor placed there. Use Alt+F3 to select all instances.
Using either method, use Esc to get back to a single cursor. The cursor closest to the top of the document will become your single cursor.

Terminal:
In class, we’ve been naming our project folders like 2013-09-26-Restaurant-Menu. It’s really descriptive, but can make navigating to various directories in terminal really tedious. For these things, it’s really important to remember the wildcard operator *

cd *Menu
is the same as
cd 2013-09-26-Restaurant-Menu

Also, we now have our Haml/Sass/JS template. That folder name is 2013-09-23-HAML-SASS-JS-Template, which you don’t really want to type in every time that we need to copy that folder for a new project. So what I’ve been doing is the following:

cp -r *JS* 2013-09-26-Restaurant-Menu

I should note that if there are multiple directories that match the bit of text that you specify, it will simply pick the first one it comes to. So make sure that you use text that is unique to the directory that you really want to access or copy.

Do you find yourself making a directory and then needing to go into it, like this?
mkdir New-Directory
cd New-Directory

You can do that all in one command, just add the following to your ~/.bash_profile file:
alias mkcd=’_(){ mkdir $1; cd $1; }; _’

That will allow you to do the above lines like this:
mkcd New-Directory

Most of these are things that I find myself using every day and almost take for granted. Hopefully everyone at NSS who reads this will be able to get some use out of these easy methods for speeding up your workflow.

Living in Ubuntu

As a computer enthusiast, I have tried out Linux many times over the years. I’ve tried Mandrake, Corel, Ubuntu, Mint, Arch and a few others. I was never able to stay in Linux very long, though, so I always ended up just going back to Windows. For the past year, I’ve been running Ubuntu on my work computer, but ran Windows in VM,  so I would be able to do AutoCAD work. I also started running Ubuntu on my laptop. All that said, I never got super comfortable in Ubuntu.

When I got my new laptop for my classes, it came with Windows 8. I developed a program for PDF file creation for a roller derby tournament that I was Tournament Head Referee for. My desktop development skills are limited to VB.NET, so I left Windows 8 on there for the tournament. As soon as I came back, I set up the laptop to dual boot with Ubuntu 13.04. I have been basically living in it since and have grown to absolutely love it. There are still some things that I think could be easier, but I’m learning.

One of my recent discoveries that has helped me enjoy Ubuntu even more is one that has been a part of Linux distros for as long as I can remember. It’s also one that I have always thought was just plain dumb. That feature is workspaces. Workspaces had always served to do nothing other than create confusing situations. I would occasionally not be able to find a program that I had open, because I had somehow managed to open it in another workspace. I’ve recently realized that my confusion was only because I was never actually using workspaces.

I had always been under the impression that multiple workspaces was the poor man’s multiple monitors. What I had never heard anyone say specifically is what workspaces do that multiple monitors can’t. Applications in one workspace don’t show up in the Alt+Tab list on another workspace. That means being able to have applications running all the time that can be accessed quickly (Ctrl+Alt+arrow keys), while not cluttering up your Alt+Tab list.

Here’s how I’m using it: I operate most everything in workspace 1, but have two terminal applications that I am running constantly. One terminal window watches for updates to Haml files and does the conversion to HTML automatically and another does the same for Sass files. Those make it difficult to select a terminal window in my main workspace, so I have them on workspace 2. I also have my IRC client running on workspace 3. That allows me to access those applications very quickly and keep my main working environment clean.

In some ways that is even better than multiple monitors.