Day out in Dublin

in me

I had a crap week, so I hopped on the bus to Eadaoin last night. Thanks for the magic of my new cellphone I photographed today’s wander around Dublin:

Eadaoin on Sunday morningEadaoin photographing trees at Trinity College

We walked from Eadaoin’s house over to the UCD campus at Belfield, got trapped by heavy rain and took a bus into town to the Science Gallery, where our friend Sinead is helping Tog hackerspace at the Science Gallery’s exhibiton on lifelogging.

Sinead recorded Eadaoin’s brain waves over ten minutes using a Linux-powered USB recorder (open source hooooo \o/). This was a pretty amazing exhibition; not only did it give a slice into the life of those who record every moment of it, but Tog had great outreach by allowing you to record and print a model of your brain waves.

Eadaoin and I wandered over to Avoca after, and then home. I worked on a client site while she napped. Great lazy day, a++, would do again.


‘I hate Internet Explorer’ and other pearls of freelance wisdom

in me

Testing a site in /all/ of the browsers!

I hate proverbial Internet Explorer-whatever the shit browser that happens to cross my path and raise my ire, because I am easily rankled.

As of now, March, I have been self-employed for seven months. There have been ups and down. I have experienced all of the thrills and spills, the joy of the paycheque and the pain of the grind, and it seems to be traditional at this point in time to reflect on it and talk about things, so:

Be prepared to appreciate what you meet
I’m a whore for Frank Herbert quotes. Every single day is going to throw weird and random shit out of you. Learn to appreciate it. They aren’t stubborn asshole clients; they are life experiences.

Just last night I took on a small copywriting job from a sick friend: I had to write one thousand words on plastic bags for some generic website, trash bags that are all pretty much identical to one another outside of colour. My job was to make them all different and stand out without copying and pasting descriptions, because the client wanted to add a bit more life to their site.

I turned the cape-swishing to 11; I invoked national pride, childhood nostalgia, the Space Race of the 1960’s, arts, craft. These aren’t plastic bags, motherfucker, hell no; these are all-American man-portable refuse solution facilitators.

The mental gymnastics were intense and fun was had. Never, not once, had I ever conceived of that as fun, and yet here we are.

Make plans
As a developer or administrator, you need to leave yourself a fallback if Things Explode (and by Crom, they will). As a freelancer you need to schedule your week and plan your actions ahead of time.

Don’t make plans
Just do it, whatever it may be. Don’t be afraid to to just jump. The worst that can happen is Something Interesting.

Discipline > motivation
Motivation makes you climb a mountain at the weekend while discipline gets you out of bed every day of the work week. You don’t need motivation to do your job on time, you need the discipline to ignore everything and just work.

Being able to learn matters more than what you already know I have to learn and apply new concepts and techniques every single day of the week. This week alone I’ve picked up some very valuable lore on CSS3, cross-browser compatibility, Internet Explorer’s awful bug tracker (say and pray) and the importance of consistent coding practices. While what I already knew was invaluable in helping me to understand and digest new information, my desire to learn and love of it drove me to learn these things in the first place. Far too many people go through life without ever one looking up. Don’t do that.

KISS
I spent like a week trying to successfully apply complex centering using CSS3 flexbox before I discovered that Internet Epxlorer’s implementation is literally bugged and Mobile Safari has an incomplete implementation (read: it is bugged to shit too in Mobile Safari, except Apple had the good grace to put up “road under construction” signs). Flexbox works great so long as you stay the fuck away vertical centering in those two browsers. Ten hours in I gave up and fell back to absolute positioning combined with x and y transforms.

OS X is probably the best OS for web development
I feel pained to admit this because OS X has truly shit window management. The operating system is not friendly to power users like me, but it does have iOS device emulation through the Xcode tools. While Chrome and Firefox can emulate any screen size or user agent, they use a different engine than Safari Mobile. And, if you need Internet Explorer (you will), you can download a Windows 8 VM from Microsoft that runs the latest version of the browser.

0S X also has a native Bourne shell and access to most of the same shell tools that you will have under Linux. There are a huge number of teeny, tiny differences in Apple’s implementation that will break all of your existing scripts, but you still have both the tools and familiar Unix filesystem.

Freedom is great
No boss and your own schedule. You decide where your workplace might be. Want a day off? Take a day off! You have creative freedom-you get to make all the creative project choices!

Freedom is awful
No boss and your own schedule. You decide where your workplace might be. Want a day off? Take a day off! Make it up somewhere, or maybe at 11pm. No support infrastructure and no help if anything explodes. No insurance, no paid holiday time. No job perks. You have creative freedom-you get to make all the creative project choices!

It’s been a fun, interesting seven months. I’m not sure I will stick at this, but this has turned into the perfect way to get back on my feet, skill up, make money and build connections while I bootstrap myself into a better job.




Operation: Break the Site III

in the website

A less-bad home page

Between my last post and today I admittedly did piss-all with the site and left a good chunk of it in a woefully broken state. I sat down today and got a huge chunk of work done:

  • I added a new comment layout (see here).
  • Returned all meta content to post footers.
  • Re-enabled comment input and display.
  • Changed header menus into dynamic WordPress menus.
  • Rewrote pagination, commentform, related posts and header to all use flex-based display.
  • Updated partials and mixin files.
  • Changed related posts to fetch random recent posts to fill out roster if there’s a lack.
  • Rewrote header nav menu to dynamically change colour based on window scroll state.
  • Header will now dynamically output post title.
  • Fixed site title display.
  • Added flexbox container for side-by-side post image display.
  • …and more!

TODO:

  • Add new code highlighter.
  • Expand on site title display.
  • Searchform and search results display.
  • General archives template for tags, dates and categories.

As always, you can pull the theme from GitHub.


Automatically add vendor prefixes to properties and values in Sass

in code

I came up with this myself and discovered after that other developers came to exactly the same solution for the problem of vendor prefixes. CSS3’s flexbox is the newest greatest thing in my life. It makes incredible sense and lets me do things like:

  1. Vertically center child elements and other content without having to use hacks like one-line-of-content-with-a-huge-line-height or absolute positioning coupled with matrix transforms.
  2. Dynamically add columns to a container without having to individually resize each column.
  3. No more fucking floats.
  4. Evenly space content, period.

It’s great, and support for it is still incomplete. When I worked on the new Ouro site last week I ran into the problem that content collapsed or looked strange on Eadaoin’s borrowed (thank you!) iPhone and iPad. In mobile Safari, even on iOS 8, flex-related properties and some rules* still require vendor prefixes, so I wrote a pair of Sass mixins to add those prefixes for me:

@mixin prefix($property, $value) {
    // Automatically add vendor prefixes to a CSS property.
    // Mozilla Firefox.
    -moz-#{$property}: $value;
    // Microsoft Internet Explorer.
    -ms-#{$property}: $value;
    // Webkit Browsers (Chrome, Safari);
    -webkit-#{$property}: $value;
    #{$property}: $value;
}
@mixin prefix_value($property, $value) {
    // Automatically add vendor prefixes to a CSS value.
    // Mozilla Firefox.
    #{$property}: -moz-#{$value};
    // Microsoft Internet Explorer.
    #{$property}: -ms-#{$value};
    // Webkit Browsers (Chrome, Safari);
    #{$property}: -webkit-#{$value};
    #{$property}: $value;
}

The output CSS can be a bit messy, and so if performance of your CSS is a concern then you will need to add browser detection and then write a separate set of rules for mobile Safari.

* This was a strange one, but apparently other such cases exist. Where with other rules I had to prefix the property (before the colon), with display: flex I had to prefix the value, after the colon, to be display: -webkit-flex;.