Danny Smith - blues music, training, design &c

Video

Sat, 02 Jun 2012 22:18:30 +0100

"If you would not be forgotten, as soon as you are dead and rotten, either write things worth..."

Sat, 02 Jun 2012 22:06:30 +0100

“If you would not be forgotten, as soon as you are dead and rotten, either write things worth reading, or do things worth writing.”

- Benjamin Franklin, Poor Richard’s Almanac. 1960 (via ingridrichter)

Video

Sat, 02 Jun 2012 22:05:25 +0100

Carnival float (Taken with instagram)

Sat, 02 Jun 2012 19:46:44 +0100

Carnival float (Taken with instagram)

Mobility scooter knight (Taken with instagram)

Sat, 02 Jun 2012 19:44:47 +0100

Mobility scooter knight (Taken with instagram)

Selector Engines: Right to Left

Sat, 02 Jun 2012 15:36:47 +0100

Selector Engines: Right to Left:

I knew this already, but it’s a useful reminder.

Photo

Thu, 31 May 2012 17:18:44 +0100

Photo

Thu, 31 May 2012 16:35:38 +0100

Test on Real Mobile Devices without Breaking the Bank

Thu, 24 May 2012 12:08:22 +0100

Test on Real Mobile Devices without Breaking the Bank:

Time to get hold of some other devices then?

Destinations - Albin Holmqvist

Thu, 24 May 2012 11:48:16 +0100

EF Destinations - Albin Holmqvist - via defgrip

tomnotes: (via Dieter Rams On Good Design As A Key Business...

Thu, 24 May 2012 11:40:59 +0100

tomnotes:

(via Dieter Rams On Good Design As A Key Business Advantage | Co.Design: business innovation design)

The best of s

Thu, 24 May 2012 10:42:00 +0100

The best of s:

It seems that the element has made it’s way back into the HTML5 spec, which is a good thing as I’ve been using it all along.

SlabText

Mon, 21 May 2012 22:36:39 +0100

SlabText:

A jQuery plugin for creating big, bold & responsive headlines.

Photo

Mon, 21 May 2012 19:33:28 +0100

Gridpak - The Responsive grid generator

Mon, 21 May 2012 18:58:25 +0100

Gridpak - The Responsive grid generator

Love this for some reason.

Mon, 21 May 2012 15:04:56 +0100

Love this for some reason.

Twitter Bootsrap-style syntax highlighting in a tumblr theme

Thu, 17 May 2012 22:08:41 +0100

I’ve just spent a bit of time adding syntax highlighting to this theme after seeing the code block in twitter bootstrap. Although I don’t post a lot of code on here, I do occasionally post snippets up and have always hated sites that don’t bother to display code nicely.

For starters I realised that the font-size and line-height I’ve been using on here make longer text posts quite difficult to read, so I reduced the font-size of text posts a bit and set the line-height to 1.61803399 (the golden ratio). If I ever find myself writing lots of text-heavy posts then I’ll put a bit more effort into the typography.

I started out by styling up the <code> element exactly as it is in the bootstrap CSS, although I removed the font-size rules so that they’d be inherited:

code,
pre {
  padding: 0 3px 2px;
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  color: #333333;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

code {
  padding: 2px 4px;
  color: #d14;
  background-color: #f7f7f9;
  border: 1px solid #e1e1e8;
}

I then uploaded the Google Code Prettify script to tumblr and included it in my theme. Rather than include another remote CSS file, I dropped the prettify CSS code from prettify.css, lang-css.css and lang-yaml.css directly into the theme and added the relevant CSS from bootsrap:

pre {
  display: block;
  padding: 8.5px;
  margin: 0 0 9px;
  font-size: 12.025px;
  line-height: 18px;
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre;
  white-space: pre-wrap;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

pre.prettyprint {
  margin-bottom: 18px;
}

.pre-scrollable {
  max-height: 340px;
  overflow-y: scroll;
}

This pretty much sorted things out, although things didn’t quite look the same as they did on the bootsrap demo website. After adding the following from bootstrap’s prettify.css, and adjusting some of the colours to fit better, everything was sorted.

Prettify allows you to specify the language too, so by applying prettyprint linenums language-ruby classes to the pre tag, we get line numbers and syntax-highlighting for Ruby:

#ruby.rb
include 'sinatra'

def some_method(arg)
  if (params[:somesym] == 56)
    bar = foo
  else
    bar = "A String"
  end
end

It’s worth noting that it only labels every fifth line by default and adds a different background for odd rows. You can fix this by removing

li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}

and

li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}

from the Pretify CSS respectively.

Although I find is slightly saddening that Twitter Bootsrap has become so prevalent and would avoid using it for everything bar quick-and-dirty app development and prototyping, it’s fantastically useful for achieving things like this in a fraction of the time it would take otherwise.

Love the new git site.

Mon, 14 May 2012 22:26:46 +0100

Love the new git site.

The Making of Octicons

Mon, 14 May 2012 22:21:50 +0100

The Making of Octicons

This is a fantastic comment on gun crime in the UK.

Fri, 11 May 2012 23:31:54 +0100

This is a fantastic comment on gun crime in the UK.