Integrate CodePen with Ubuntu Unity Launcher

Like CodePen? Use Ubuntu? Would you like to combine the two in a far more integrated way? Then read on!

As I have written about in an earlier post I quite like Codepen. In many ways I find it easier to code with than just Gedit. I can see the changes I make in real-time without flicking between my editor and my browser. All I felt it was missing was a bit of desktop integration.

Workspace 1_012

Thankfully, using Ubuntu’s WebApp and a custom launcher I can fix that problem! Using a customised .desktop file and adding in a few extra actions I can save myself time and make codepen feel like it is part of my desktop. This is one of the great things about Linux generally – everything is customizable. You just need to know how to do it!

First up, if you’ve not already – sign up for a free CodePen account. Choose a memorable username if you can. You’ll be using it later in this tutorial.

Next you need a .desktop file and a fitting icon to go with. I have included a zip file for download at the end of this post but I will go over the contents of the .desktop file so you know what you’re getting. You can of course use any icon you like for this, I’ve just included one to get you started.

So, first up the codepen.desktop file looks like this:

[Desktop Entry]
Version=1.0
Name=CodePen
Comment=Code with CodePen
GenericName=Online Coder
Keywords=Internet;WWW;Code;Web;Developer
Exec=webbrowser-app http://codepen.io
Terminal=false
X-MultipleArgs=false
Type=Application
Icon=/usr/share/pixmaps/codepen.png
Categories=GNOME;GTK;WebBrowser;Dev;
StartupNotify=true
Actions=MyProfile;NewPen;

[Desktop Action MyProfile]
Name=View Your Profile
Exec=webbrowser-app http://codepen.io/bendavis
OnlyShowIn=Unity;

[Desktop Action NewPen]
Name=Start a new pen
Exec=webbrowser-app http://codepen.io/pen
OnlyShowIn=Unity;

The first block of 13 lines is pretty standard stuff for a desktop icon. These lines set the name and description of the link as well as a few extra bits and bobs. The fourteenth line is where it gets interesting.

This is where we declare the extra actions so that when you right-click on the icon in your launcher you get an extra menu of (in this case two) extra things you can do with the icon – as shown below:

Selection_010

Before you can use your .desktop file though you will need to edit it.. But not much – don’t panic! The only part you need to change is the username in the My Profile action.

[Desktop Action MyProfile]
Name=View Your Profile
Exec=webbrowser-app http://codepen.io/[insert your username here]
OnlyShowIn=Unity;

Essentially delete everything passed that last / and replace it with your username.
Save and you’re done.

Now we need to put these files where Ubuntu can find them. The easiest one is the desktop file. You need to copy that to ~/.local/share/applications/ (the little ~ symbol at the beginning is the shortcode for your home directory. Since my username is benjy that points to /home/benjy/). You can do this with the file manager.

Open up your file manager and go to your home directory. Then press CTRL + H to show hidden files:

Home_013

Go into the .local folder then navigate to share then applications. All you have to do now is paste your edited codepen.desktop file into the applications folder.

Putting the icon file into the right place is a little trickier because it needs to go into the pixmaps folder in /usr/share/pixmaps. It’s trickier because this folder is not ‘owned’ by you the user so you need to do this with sudo in a terminal.

Firstly, find your downloaded icon file I will assume it is in your Download folder. If it is elsewhere change the first location in the following code. Open up a Terminal (a quick keyboard shortcut for this is CTRL + ALT + T) and copy and paste the following:

sudo cp ~/Downloads/codepen.png /usr/share/pixmaps/codepen.png

After you have pasted (in the terminal by pressing CTRL + SHIFT + V this press enter and you will be prompted to type your password. Press enter again and it should copy the icon to where it needs to be.

When this is done, you should be able to open your dash (start button) and search for codepen you should see this:

Workspace 1_014

Just click the icon to launch it for the first time and login in the window that comes up.

Before you close the window be sure to right-click the launcher icon and lock it to the launcher, also click your other action files – New Pen and My Profile to make sure they work.

Now you’re done – custom webapp for CodePen to make using their service that bit easier!

Download the files you need for this below:

[wpdm_file id=1]


Edit – Extra Options

Of course, you don’t have to use the Ubuntu WebApp browser. Since it is (currently) not fully functioning in Desktop mode (it works.. but it is designed for touch devices) you can just as easily use the chromium browser.

If you’ve not installed it already fire up the Terminal and type in the following:

sudo apt-get install chromium-browser

Enter your password and let that install, once finished you can change your codepen.desktop file to use the chromium browser instead, in app mode, by replacing all instances of:

Exec=webbrowser-app http://whatever...

With:

Exec=chromium-browser --app=http://whatever...

Now your launcher icon uses chromium instead!

Leave a Reply

Proudly powered by WordPress | Theme: Baskerville 2 by Anders Noren.

Up ↑