Veerle Pieters tweeted an article about how web design is just so hard again again with a link to Frank Chimero’s Essay Everything Easy Is Hard Again, and how whatever I could do 20 years ago counts for nothing…

The king is dead. Long live the king!

I too have been faffing around with Node, npm and Grunt and now Gulp, and Foundation and Bootstrap and a bit of HTML 5 Boilerplate and even UIKit.

I’ve had to make friends with the command line and remind myself of how to put down the mouse and create and open directories again. I’ve also had to update Ruby on my Mac using Homebrew and Ruby gems too (For Compass to use Sass).

I’ve even had to learn how to figure out how to configure a package.json file and and gulp file.js. Oh, and GitHub for cloning code repositories, too.

…And none of it has been anything to do with actual design and build of websites, but is rather the collection of the biggest toolkit known to man to prepare to build something!

I was motivated to post on the Textpattern forum

I was further motivated to reply to a post here, too:

Thank you for this article in response to Death of Dean. I too have been grappling with the impermanence of web stuff, and am sad that my creative outputs of 10-20 years ago has all been deleted. I did some nice stuff once, but might as well have been an accountant for all that’s survived (Every year, the set of accounts is started anew, and nothing is kept beyond what’s necessary for tax returns).

I too am increasingly drawn to the real-world hold-in-your-hands book idea, especially since it’s either easier or I’m getting the hang of it better to actually publish stuff. I recently made a book of a hand-written journal my uncle wrote (to be read!) dating from 1963, which was of great comfort to family members after he died. By going back to paper and pages that turn by hand, the tyranny of browser version or display resolution was deftly side-stepped. (I’ve used Lulu and Blurb for my experiments so far.)

Slightly weird maybe, but I was looking for demo videos at some of the Ju Jitsu throws I’ve been learning recently, in preparation for my next grading: not BJJ either, although there are massive overlaps with that and Judo too. I mean Japanese Ju Jitsu

Anyway, without exception every video seems to start with

Hello, My name is blah blah blah and I’m going to talk about blah blah blah and then talk about blah blah blah some more and then talk about one small bit of blah blah blah

…but not actually dive straight in to the thing I was looking for zzzzz

When I trained as a rowing coach (over 20 years ago!), we had a session on correct ‘clean’ lifting technique from a bloke from BAWLA (British Amateur Weight Lifting Association) and he was light years ahead of the YouTube rabble!

When demonstrating, his technique was to do the lift then do the lift and name the lift and only then go into endless flannel about do this bit and watch out for this and don’t do this. And he advised us to teach it to our rowers in the exactly the same way. Do the demonstration first. Twice.


I don’t know why school teachers and have to keep peddling this particular old chestnut… especially when the people who say it seem to be the people from whom I least believe it! Please stop!

How about:

  • Maths is useful
  • Maths isn’t all that hard
  • Maths is easier with practice

No one ever says brushing your teeth is fun. Useful, yes, and a good habit to get into… but this whole fun thing seems to be as useful as products labelled lite are at helping with weight loss.

This one at Mashable is a bit old, but got me thinking

If not Foundation, what else?

I know I’d prefer SASS over LESS because of my already burgeoning back-of-a-postage-stamp background knowledge

And so we reach Gumby (And the inevitable YouTube videos oh and tutorial like this at developerdrive)

Responsiveboilerplate sounded fine until I saw LESS

Important Tools

  • npm online repository for the publishing Node.js projects_and_ a command-line utility for interacting with this
  • bower a package manager for the web

Anyway, here’s the ‘go’ button

bower install gumby


The default txp theme on Github has a lot of partials

, _helpers.scss,
_code-prettify.scss ... etc.

…to adjust the gradients it’s all in /sass/core/_settings.scss

// text colours
$color-text: #333333;
$color-text-footnote: #888888;
$color-link: #114eb1;
$color-link-hover: #0066ff;
$color-link-visited: #183082;
// default gradients
$color-gradient-from: #eeeeee;
$color-gradient-to: darken($color-gradient-from, 6.5%);
$color-gradient-border: darken($color-gradient-from, 13.5%);

No overrides, just rewrite this lot : -)

NB config.rb is where input and output folders are specified

sass_path = "sass"
css_path = "css"
images_dir = "img"
fonts_dir = "fonts"

Categories ,

I was looking for yet another way to embed Flickr photos, not least because I have previously used a Flash-based widget. Anyway, there’s FlickrBomb from Zurb

<img src="flickr://Kevin Bacon" width="175px" height="175px">

except it won’t work :-(

<script src="/js/jquery.js"></script>
<script src="/js/flickrbomb-min.js"></script>
<script src="/js/app.js"></script>
<script src="/js/backbone.js"></script>
<script src="/js/underscore.js"></script>

All in before the closing body tag…

Anyway, meanwhile from flickrslidr


Nice tool to generate from an image at cssdrive

So, in the SCSS these exist as

// $primary-color: #008CBA;
// $secondary-color: #e7e7e7;
// $alert-color: #f04124;
// $success-color: #43AC6A;
// $warning-color: #f08a24;
// $info-color: #a0d3e8;

And can therefore be overwritten in _overrides.scss and ‘watched’ with Compass as per the forum

So this site can swap primary color blue for green like this

$primary-color: #706E55 !default;

Top bar can be changed too, from

$topbar-bg: #556888;


$topbar-bg: #4A4F49;

Anyway, a quick CD into the site root and two words

compass watch

…and nearly 8000 lines of CSS are automatically massaged (okay, so I’ve got the super verbose output). Even better is the compact style

compass watch -s compact

…and nearly 3000 lines of CSS are carefully updated

Categories ,