Embark - A hyper minimalistic new tab page for Chrome

The new tab page in your browser is something you look at hundreds of times each week but you probably don’t put much thought into what appears there; most of the time it acts an interstitial page that flashes up briefly before you stick a URL or search term in the address bar and navigate away.

There’s quite a few new tab page extensions that replace the default out there already for Chrome. I’ve tried most of the popular ones but they all suffer from similar problems:

  • Feature overload Do you really need to check your stocks, weather, todo list and news feeds from your new tab page? Don’t even get me started on the saccharine motivational quotes.
  • Speed Your new tab page should be fast to load and not get in the way of you using your browser. Due to the previous point this is usually not the case.
  • Bad imagery I don’t want to see cheesy, overprocessed (and sometimes 3D rendered) images every time I hit that new tab button.

Frustrated with the bloat, lack of customisation, poor photography and slow loading speeds of similar new tab extensions I’ve built my own.

Screenshot of Embark

Embark replaces Chrome’s default new tab page with a pared back design and beautiful photography. It’s a gentle reminder throughout the day of the current time and some nice eye candy before you set off into the Internet.

I’ve just released version 0.4 and you can grab it right now from the Chrome Web Store.

Screenshot of Embark

There’s deliberately just a small selection of features at the moment but each one is highly customisable through the options page. I’ve really focused on ensuring Embark loads blazingly fast and uses as little system resources as possible.

If you install it and like it please leave a good review on the Chrome Store.

James Moss

I’m a freelance full-stack engineer with over 15 years experience. Currently taking on new React based opportunities, drop me a line 👋

Support for Markdown in OSX QuickLook

QuickLook is an indispensable feature in OSX that I use many times every day. Highlight a file in Finder and tap space to see a preview of the file without having to open it in an editor.

Recently I’ve been writing more and more documents in Markdown using Mou (including this blog post). Frustratingly, out of the box QuickLook doesn’t support Markdown, you’ll just see a larger version of the file icon.

There’s an easy fix however in form of Phil Toland’s QLMarkdown. Installing it is easy:

  1. Download the latest release by clicking here.
  2. Extract it somewhere temporarily and copy the QLMarkdown.qlgenerator file into ~/Library/QuickLook (you may need to create this directory).
  3. Relaunch Finder by alt+right-clicking on the icon in the dock and selecting the option at the bottom.

Boom. Markdown in QuickLook.

James Moss

I’m a freelance full-stack engineer with over 15 years experience. Currently taking on new React based opportunities, drop me a line 👋

Save time with SSH aliases

If you’re a developer you probably find yourself connecting to servers over ssh several times each day. Remembering the server address, port, user and password can be hard - but it doesn’t have to be.

You might find yourself needing to use the following to get into a server:

$ ssh -p 3241 james@somehost-532242.long.example.org

Then you have to remember (or maybe even lookup) the password. It’s pretty tedious and time consuming. You could create a bash alias for each server but it’s not ideal; there’s a better way.

~/.ssh/config

Within this file you can define the hostname, user and port of a server and associate it to a short name like mainserver.

The syntax us fairly straightforward, here’s an alias based on the previous example.

host mainserver
  hostname somehost-532242.long.example.org
  user james
  port 3241

Now if you want to connect, you just need to type:

$ ssh mainserver

Much easier to remember. As an added bonus, scp also observes the alias so transferring files is now pretty simple.

# transfers access.log from the server to the current directory
$ scp mainserver:/var/log/access.log .

ssh-alias

I’ve put together a set of ruby scripts which makes it easy to add, delete and list the aliases in ~/.ssh/config.

Installation is simple:

1
2
3
$ git clone git://github.com/jamesmoss/ssh-alias.git
$ cd ssh-alias
$ chmod +x ./*

You’ll also obviously need ruby installed. It comes with OS X by default.

To add a host run ./ssh-alias-new.rb and follow the prompts. The script also takes care of transferring your public key to the server so you won’t have to re-enter your password every time you connect.

If you want to remove an alias use ./ssh-alias-delete.rb and follow the prompts. ./ssh-alias-list.rb will print a list of every alias you’ve got setup.

The code is up on github if you want to fork or send a pull request. This is my first proper ruby project, so go easy on me.

James Moss

I’m a freelance full-stack engineer with over 15 years experience. Currently taking on new React based opportunities, drop me a line 👋

Blog redesign

What you’re looking at here is the new version of my blog.

I’ve decided to pare back the design to make the content really stand out, focusing on clean typography (from TypeKit), vertical rhythm and minimalism. There’s one full post per page (no read more links) and comments are only visible on the permalink pages.

Under the hood

The changes aren’t purely cosmetic. I’ve been using WordPress for the last few years, and it’s served me well, but I’ve become increasingly unhappy with how complex it makes writing blog posts. The process and distractions of logging in, messing around with the HTML in a WYSIWYG editor (it always needs manual fixing) and publishing it puts up a barrier which stops me from blogging as much as I’d like to.

Jekyll

To that end I’ve been looking for something a lot simpler. I started looking into writing something lightweight with Silex but didn’t have the time to build and test anything substantial.

In the end I came across Jekyll, written in Ruby, which is a “blog-aware, static site generator”. You feed it some content and a HTML layout and it combines the two, generating the final flat pages to be served to your visitors.

Content can be written in Markdown, Textile or plain ole’ HTML. A snippet of YAML Front Matter at the top of each post can set metadata such as categories or tags. I’ve decided to use Markdown, it generates clean semantic HTML with the least amount of effort. A range of importers makes migrating content from another blogging platform super easy.

I don’t get to use Ruby as much as I’d like to so I’m hoping Jekyll will give me a chance to do some hacking, I’ve already thought of a few ideas for plugins.

Code highlighting

I want to start using this blog to post more code snippets and review other open source projects. I’ve enabled Pygments within Jekyll which automatically highlights my code snippets. I’m using the monokai theme (as I do in my usual code editor) which contrasts well against the rest of the page:

class Employee < Person
  def initialize(fname, lname, position)
    super(fname,lname)
    @position = position
  end
  def to_s
     super + ", #@position"
  end
  attr_writer :position
  def etype
     if @position == "CEO" || @position == "CFO"
         "executive"
     else
         "staff"
     end
  end

Pygments is brilliant. It’s got support for all the popular languages (and some less popular ones). I particularly like how I can display shell commands:

$ chmod 664 myfile
$ ls -l myfile
$ grep -v apple fruitlist.txt

Finally I’ve added some inline code styles to make distinguishing them from the rest of the body text easier.

Hosting

The beauty of having flat HTML files is that you can host your site literally anywhere, there’s no need to install and configure complex web servers (I’m looking at you Apache). Because of this I’ve decided to host the site with GitHub.

GitHub Pages allows you to publish content to the web by simply pushing content to one of your hosted repos. It’s also got support for Jeykll baked in (no surprise, the author of Jeykll is also a GitHub co-founder). It’s free, which should cut my hosting costs every month, and leverages GitHub’s scalability and reliability.

The Future

I particularly like the open-source nature of my new blog, you can see all my source code and commit history on GitHub. This is just the start of more planned changes too, I’ve got a lot more work to do over the next few months to get the site to the point where I’m happy. I’m hoping this change to simpler blogging software will spur me to publish better content, a lot more often.

James Moss

I’m a freelance full-stack engineer with over 15 years experience. Currently taking on new React based opportunities, drop me a line 👋

Checkboxes in Chrome DevTools CSS inspector

After being an avid Firefox fan for the past five years I’ve recently decided to switch to Google Chrome as my main browser for both development and general usage. It’s matured over the last few years to become a great browser; fast, light on resources and with a brilliant plugin system.

When using Firefox, the Firebug extension has become an invaluable tool for debugging, diagnosing and investigating front end HTML, Javascript and CSS issues. Chrome has an equivalent feature built right into the browser and its great, except for one thing; The checkboxes used to toggle properties in the CSS inspector are the on wrong side.

The problem

Here’s the CSS inspector in Firebug:

image

Notice how the button to toggle the CSS properties on and off is right next to the property name itself. This close proximity makes it easy for the brain to associate it to the height property. Now lets look at the equivalent feature in Chrome developer tools:

image2

The button to toggle the property is now a tiny checkbox placed way out on the right hand side. The distance between the checkbox and the CSS property means that its difficult to work out which checkbox applies to which property. Paul Fitts would be having a fit.

The fix

After 2 minutes of playing around I realised the DevTools in Chrome are actually plain old HTML, CSS and JavaScript. The CSS file is located at chrome-devtools://devtools/devTools.css, I didn’t want to find this file in the application package and directly edit it as my changes would get overwritten on each upgrade.

I started looking into plugins such as Stylish which let you inject custom CSS in any page you like. However Chrome plugins are only loaded in pages using http://, https:// or ftp:// protocols (and file://, if given permission by the user). Eventually I came across the Custom.css which is Chrome’s equivalent to Firefox’s userContent.css. Custom.css gets injected to all pages in Chrome, even the extension management page, user preferences and of course DevTools.

Updating Custom.CSS

On OS X you can find your Custom.css file in ~/Library/Google/Chrome/Default/User StyleSheets/. If that folder is empty just create the file yourself. I don’t use Windows but I’m sure the file will be in a similar place. Place the following CSS in the file and save.

That’s all there is to it. You don’t even need to restart Chrome.

I’m not sure if this will ever get properly fixed. It’s been raised as an issue in the Chromium project but it’s been marked as an external dependancy issue within the WebKit engine. The WebKit team don’t seem to be in any hurry to fix it either, it’s been sitting as an issue in their bug tracker for over a year with no real activity.

James Moss

I’m a freelance full-stack engineer with over 15 years experience. Currently taking on new React based opportunities, drop me a line 👋