Garrett Winder (@gw)

EECI EU 2012 - Illegally good front-end

2012-06-08T11:00:14+00:00

Best practices for breaking our websites down into scalable, reusable components.

Last week I got the chance to go back to Leiden for EECI and spoke about "Illegally good front-end". The presentation covered topics such as the anatomy of a website, our front-end workflow and how it can be constantly improved. Below is a link to the presentation as well as a few other relevant links.

Resources

Illegally good front-end presentation (on Speaker Deck)
The Ultimate Package (Erskine's baseline front-end framework)
The Ultimate Package wiki (Erskine's front-end documentation)
Typographic styling with SCSS
Planning and documenting front-end components

You can find other articles on this topic around my site as well as on Erskine Labs. As usual, if you'd like the original keynote presentation just shoot me an email at gw [at] garrettwinder [dot] com.

→ Permalink

Calculating EMs with SCSS

2012-05-08T11:00:24+00:00

I've posted an article over on Erskine Labs titled Calculating EMs with SCSS. It's an overview of how we are doing EM calculations at Erskine and how it has evolved over the last few months since we started using SCSS.

Here's a short little excerpt:

Earlier this year Erskine made the switch to SCSS and I’ve really loved what its done to our front-end workflow. One thing I’m particularly fond of is how SCSS has improved how we’re calculating EMs.

Calculating EMs with SCSS

→ Permalink

Typographic styling with SCSS

2012-03-03T10:59:29+00:00

Friday, right after Erskine's end-of-week pub rituals, Phil and I went back to the office with hopes of building a website. At the beginning of last week we got fairly obsessed with typographic styling, so this would be a good time to experiment with that process a bit more.

We fired up Sublime, fetched the Ultimate Package and jumped in. We started with a simple page including kitchen sink-ish html for headings, paragraphs, links and all the other elements that get me going.

We chose a base font-size, Phil created a baseline.png file and I ate two American style hotdogs. We got keyboard shortcuts for toggling the baseline plugged in and cranked up Lynyrd Skynyrd. It was time to make Instapaper for cats.

Typography + SCSS = love

What I love about SCSS, besides variables, is its most dangerous feature: nesting. When used smartly, nesting can make your stylesheets much more modulular, reusable and maintanable. Lets take a look at the standard workflow of styling typography and how it can be applied with SCSS.

Standard workflow

Setup default font-size, line-height and margin to be inherited by generic elements and ensure they're inline with the baseline.
Put an h1 at the top of the page, give it some line-height and margin so everything is still inline with the baseline.
Do the same with h2 through h6, but also ensure p + h(n) has proper margin and doesn't break the baseline.
Ensure h2 + h3, etc., has proper margin and doesn't break the baseline.
Lastly, do the same for blockquote, table and ALL THE OTHER THINGS.

That list isn't too daunting, but it takes about 2 hours of pair brogramming to get right, 4-6 if you're me and Phil. With SCSS, we can modularise this process by creating a little typographic skeleton. This doesn't exactly speed up the process, but it's a good example of how we can use SCSS to clean up our development.

Typographic skeleton with SCSS

First, we setup the defaults to be inherited by all of our generic elements. I know this is standard practise but for the sake of the case study I'll include it:

body {
    font:$normal percentage($basefont / 16) sans-serif;
    line-height:(24 / $basefont);
}

Now that that's done, we need to ensure p + h(n) has proper styling and doesn't break the baseline. Not only p, but the other generic elements as well. This can be done beautifully with SCSS.

p, ul, dl, ol, address, figure, hr, pre, table {
    margin-bottom:;

    & + h2 {
        padding-top:;
    }
    & + h3 {
        padding-top:;
    }
    & + h4 {
        padding-top:;
    }
    & + h5 {
        padding-top:;
    }
    & + h6 {
        padding-top:;
    }
}

We need to ensure that h1 + h2, etc. have proper styling too.

h1 {
    font-size:($baseh1 / $basefont) * 1em;
    line-height:;
    margin:;

    & + h2 {
        padding-top:;
    }
}

h2 {
    font-size:($baseh2 / $basefont) * 1em;
    line-height:;
    margin:;

    & + h3 {
        padding-top:;
    }
}

You get the point, same for h3 through h6. Tada!

Summary

This exersise helped me learn a lot about the importance of extreme readability. It's something I don't think I've paid enough attention to in the past so effective immediately I'm adding it to my list of Things to take over-the-top on every single project.

→ Permalink

Going mobile with ExpressionEngine

2012-01-06T11:00:36+00:00

I've posted an article over on .net magazine titled Going mobile with ExpressionEngine. It's meant to be a beginners walk through for building dedicated mobile sites with EE and is an extension to my talk at EEUK.

Here's a short little excerpt:

In the last few years mobile has absolutely exploded. It's the way people shop, browse the web and check email and the numbers are increasing exponentially. Because of this, we need to shift our focus on building websites explicitly for the desktop and really start thinking about the context that our work is being seen in and interacted with. We need to rethink the way we're building websites.

If you'd like to follow along, be sure to download the source files on Github.

→ Permalink

Planning and documenting front-end components

2011-09-09T11:00:48+00:00

I've posted an article over on Erskine Labs titled Planning and documenting front-end components. It's about the pros of breaking websites down into components, which happens to be my favourite subject.

Here's a short little excerpt:

At Erskine it’s more than just accepted, but it’s encouraged to question the way things are done. If something isn’t working, figure out another way and test it out with the team. We’re always experimenting and our processes are constantly questioned. The way we’re working now is ten times better than it was six months ago, and the same thing will happen in another six months. It’s inevitable.

Planning and documenting front-end components

→ Permalink

EEUK 2011 - Going mobile

2011-08-27T11:00:53+00:00

Tips, techniques and tactics for going mobile with ExpressionEngine.

Photo by Joel Bradbury

Current status of mobile
Native v.s. web
Dedicated or responsive?
And how ExpressionEngine can help ease the pain

Resources

EEUK11 presentation – Going mobile small>(pdf)
Going mobile with ExpressionEngine small>(Tutorial in .net magazine)

I’ve condensed them down quite a bit so if you’d like the originals, shoot me an email at gw [at] garrettwinder [dot] com.

→ Permalink

Personal task management with Things.app

2011-08-04T11:00:04+00:00

I've posted an article over on Erskine Labs titled Personal task management with Things.app. It's a short write-up of my obsessive approach to organization and how I apply it to Things.app

Here's a short little excerpt:

At Erskine we use all the usual suspects to keep the day in order: The 37signals Suite (mostly Basecamp and Campfire), Beanstalk, Harvest, Redmine, the list goes on. All of these are great for a team or client overviews, but in my opinion are not enough to personally stay truly organized.

Personal task management with Things.app

→ Permalink

Responsive Web Design: Review

2011-06-09T11:00:09+00:00

I've posted an article over on Erskine Labs titled Responsive Web Design: Review. It's my take on Ethan Marcotte's new book, Responsive Web Design. If you haven't read it yet, I suggest you hop on it.

Responsive Web Design: Review

→ Permalink

Generating share links in your ExpressionEngine templates

2010-12-06T11:00:57+00:00

Making custom links for sharing content is always an annoying process. Go to each service you need, try and figure out how to pass information to it via a URL. Rinse, lather, repeat.

Below I’ll document some of the most common share links and their basic URL structures, and then I’ll show you how we can easily implement this into an ExpressionEngine channel entry page.

Now that we’ve got the basics out of the way, let’s convert this into an ExpressionEngine gangster rap. I’ll assumes you understand the basic ExpressionEngine variables. I’m also going to assumes your channel entries are located at domain.com/segment_1/url_title/ (you can easily change this to fit your needs). Here’s the code that would go in your individual channel entry pages:

Very straight forward – we’ve got a channel loop that’s based off of our current channel entry (pulling the url title from segment_2). We’re using ExpressionEngine variables to generate the URLs and titles in the share links. For Twitter, I’m using the categories variable pair for hash tags. For Posterous and Instapaper I’ve added a fictional excerpt field to the optional selection and description params.

Obviously, you don’t need to use all of these, just plug-and-play the links you want to put on your own site. One final not, for the twitter link, I’d recommend using a shorter url. You can either use some sort of url shortening plugin or easily role your own short urls like this. Enjoy!

→ Permalink

ExpressionEngine short URLs

2010-12-05T11:00:26+00:00

When I was making my site I wanted to be able to have short urls to post to Twitter, etc. without having to deal with the hassle of buying another domain name. There are quite a few ways of doing this but I ended up taking the /template_group/entry_id approach because it’s easy and sexy.

The first thing I did was setup a new template group. For example sake, I’m going to name this template group ‘b’ (short for blog). I’m also going to pretend our actual blog posts are located at /blog

Once you’ve made the new template group, ‘b’, open up the index file and paste the following code in there:

This is pretty simple stuff. First we make a variable called ‘my_channel’ that points to our blog channel (it’s all about the reusable code people, use preload_replace like it’s your job). Then, we make sure we have a segment_2, if not, we redirect to the main blog page. Lastly, we use an ExpressionEngine Channel loop based off of the entry_id (which is pulled from segment_2) and redirect to its “long url”, /blog/url_title

To show your short url on your actual entry pages, just throw something like the following in the blog entries template (inside the channel loop):

Short URL: {site_url}/b/{entry_id}/

Tada – now you’ve got yourself a really simple branded short url, none of that bit.ly crap!

→ Permalink

EE info template

2010-11-15T11:00:47+00:00

I wanted a simple way to access site information like template names, channel names, custom fields, etc without accessing the control panel so I threw together these templates w/ the ExpressionEngine Query Module to show all of that data (I’m no SQL expert, so the queries may not be up to par… but they work). There is a template for EE 1&2 and you can download them on GitHub.

Download ExpressionEngine EE-Info Templates on github

→ Permalink

ExpressioneEngine 2 TextMate bundle

2010-11-12T11:00:17+00:00

I went ahead and took the liberty of updating Chris Ruzin’s wonderful ExpressionEngine TextMate bundle to ExpressionEngine 2. Really all that needed to be done was update the documentation links in the “Documentation for Tag” file, change every weblog reference to channel, delete a few oldies and add a few newies. So, here it is:

Download ExpressionEngine 2 Textmate Bundle

If you find any errors or anything just let me know and I’ll try and get them updated as soon as I can. Again, I wouldn’t have known how to do this without Chris-who-has-no-contact-info-on-the-internet’s bundle for ExpressionEngine 1.x so 99.9% of the credit goes to him.

Note : This bundle is based off of ExpressionEngine’s core functionality and does not include any 3rd party add-on integration. If you want a bundle with all the bells and whistles, checkout this one.

→ Permalink