DerekAllard.com http://www.derekallard.com/ CodeIgniter, PHP, and the world of web design en derek@derekallard.com Copyright 2013 2013-03-27T20:48:16+00:00 Twitter Bootstrap documentation quote of the day http://derekallard.com/blog/post/twitter-bootstrap-documentation-quote-of-the-day http://derekallard.com/blog/post/twitter-bootstrap-documentation-quote-of-the-day From Bootstraps button documentation:

IE9 doesn’t crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

It is my educated opinion that everybody should strive to write documentation like this.

]]> education, html-css, 2013-03-27T20:48:16+00:00 Handy Alfred workflow - Dev Doctor http://derekallard.com/blog/post/handy-alfred-workflow-dev-doctor http://derekallard.com/blog/post/handy-alfred-workflow-dev-doctor My favourite little Mac launcher (and all around handy butler) Alfred recently graduated to version 2. I haven’t played around with it much, but this morning came across We make awsome sh.it’s handy developer workflow, Dev Doctor. Its just a smart search tool, but its contextually aware, and allows for quick function lookups.

Alfred Dev Doctor

Since Alfred is already part of my day to day workflow, I find the Dev Doctor much handier then running the manual search.

Know of any other handy Alfred workflows? Please let me know!

]]> quick-links, 2013-03-24T15:36:27+00:00 Understand the Favicon http://derekallard.com/blog/post/understand-the-favicon http://derekallard.com/blog/post/understand-the-favicon Jonathan T. Neal has written what is probably the single greatest discussion around the topic of favicons I’ve ever read with Understand the Favicon.

The favicon on DerekAllard.com

The level of research is wonderful, including breakdowns of browser weaknesses and quirks (still looking at your Internet Explorer). Of particular note is how different browsers handle pages that offer both png and ico formatted favicons, including this gem:

Opera, not wanting to take sides, will choose from any of the available icons at complete random. I love that Opera does this.

A highly informative read.

While we’re talking about favicons, I recently used the wonderful “Tinycon” library from Tom Moor, and was really happy with the results. Check it out if you need a small library for manipulating the favicon.

]]> browsers, how-to, 2013-01-29T19:08:47+00:00 How To Survive A Robot Uprising (aka Robopocalypse) http://derekallard.com/blog/post/how-to-survive-a-robot-uprising-aka-robopocalypse http://derekallard.com/blog/post/how-to-survive-a-robot-uprising-aka-robopocalypse The folks at Epipheo Studios have given us all a wonder gift. Their video How To Survive A Robot Uprising (aka Robopocalypse) is a clever, fun, and informative look how how to spot, and defend yourself against killer robots (spoiler: look for red glowing eyes!).

How To Survive A Robot Uprising (aka Robopocalypse)

 

]]> quick-links, 2012-05-14T17:35:22+00:00 New site design - The Robot Invasion Continues! http://derekallard.com/blog/post/new-site-design-the-robot-invasion-continues http://derekallard.com/blog/post/new-site-design-the-robot-invasion-continues Over the last few weeks (months) I rebuilt DerekAllard.com with a new look/feel. Still a few rough edges here and there (if you see anything, please contact me) but I wanted to push it out now :)

DerekAllard.com version 3

]]> 2012-01-06T17:03:04+00:00 Member Banning ExpressionEngine snippet http://derekallard.com/blog/post/member-banning-expressionengine-snippet http://derekallard.com/blog/post/member-banning-expressionengine-snippet When spammers do sneak comments through my blog, I have a very simple one click* snippet to ban them similar to the way the EE forum’s “ban member” option works. Essentially, beside every comment, I have a “delete & ban” link. This saves me needing to fire up my control panel, and navigate to the proper place. It just saves a bit of clicking around.

I never thought much of it, but yesterday it co-incidentally came up when I showed another EE dev my site’s control panel for something totally unrelated. Since I implement the “one click delete” in a snippet, I thought I’d share it here:

{if can_moderate_comment}
     [ <a href="{cp_url}?S=0&D=cp&C=addons_modules&M=show_module_cp&module=comment&method=index&entry_id={entry_id}">delete &amp; ban</a> ]
{/if} 

And then in my template

{exp:comment:entries}

    <p>{url_as_author} wrote: {ban_member_snippet}</p>

    {comment}

{/exp:comment:entries} 

I’ve used this sucker for so long I forgot all about it. If you have any “go to” snippets, code or tricks, please post them in the comments here!

* Technically its probably 2 or 3 clicks :)

]]> expressionengine, 2011-12-20T12:38:22+00:00 {Less} CSS3 mixins and vendor prefixes http://derekallard.com/blog/post/less-css3-mixins-and-vendor-prefixes http://derekallard.com/blog/post/less-css3-mixins-and-vendor-prefixes I doubt {Less} is much of a revenlation revelation to anyone nerdy enough to be reading my site, so I’ll skip the usual platitudes and jump right into why I’m writing this.

As part of a recent site build, I’ve been relying heavily on CSS3 features, many of which are only partially implemented across the browsers. Not a big deal for me, it just means a lot of vendor prefixes:

#someElement {
    -webkit-transition: all .5s;
       -moz-transition: all .5s;
         -o-transition: all .5s;
            transition: all .5s;
} 

But I have a few problems with this (CSS validation and older Internet Explorer are not among them). Firstly, its a pain to need to add that 4 lines every time, and secondly, one day I’ll want to remove some or all of the vendor prefixes and I’ll need to do it a bunch of times.

As a devoted {Less} user, the answer seemed obvious at first, I’ll just throw in a mixin to reduce it down into one simple line.

#someElement {
    .transition(all, .5s);
} 

I’m hardly the first person to come up with this idea, but looking around for other .less files that handled vendor prefixes the way I wanted, with all the CSS3 items I wanted, was challenging. So I cobbled together my own file.

You can grab it off Github if that’s your sort of thing LESSCSS mixins file of vendor prefixes for CSS3.

]]> html-css, 2011-12-01T20:25:37+00:00 Safari, cookies, and lost time - the remix http://derekallard.com/blog/post/safari-cookies-and-lost-time-the-remix http://derekallard.com/blog/post/safari-cookies-and-lost-time-the-remix During a recent ExpressionEngine site build, I found myself stuck for a few days trying to get cookies to work in Safari. Since actually logging in wasn’t particularly important to the site, I poked away at it a little bit here… a little bit there… but never actually solved it over the course of 3 days. A quick Google for the problem (EE forum search is darn near useless these days) brought me to Safari, cookies, and lost time from Fred of the fine folks at ngen works. So I fired out

echo date('c');
// I'll get you kids and your darn dog too!!! 

And lo and behold, the server clock was off! A quick support email later, things are humming along tickity-boo, so I’m writing this partially as a “note to self”, and partially to add my voice to the stream of knowledge that is the web.

]]> browsers, expressionengine, 2011-10-12T19:36:08+00:00 Launching your browsers in Private Mode with Alfred http://derekallard.com/blog/post/launching-your-browsers-in-private-mode-with-alfred http://derekallard.com/blog/post/launching-your-browsers-in-private-mode-with-alfred

Alfred AppPreamble: I’m a huge fan of Alfred App. This post isn’t about Alfred per se, but if you’re a Mac user, do yourself a favour and grab a copy. There’s a free version, and the “powerpack”. The powerpack is what is needed to follow the rest of this post.

Recently I’ve been tackling a lot of projects where the state of the app when “logged in” was different then if you were “logged out”. In order to test the app in both phases, I spent a lot of time flipping between staying logged in, and also launching the site in private mode (or in Chrome, “Incognito”). To help speed up the process, I wrote a few extensions for Alfred to automatically launch my browsers in private mode.

The extensions support Firefox, Chrome, Safari and Opera.

Here’s what you’ll see now:

Grab the extensions and play around: alfred_private_mode_extensions.zip. Installing them is super easy, open Alfred’s preferences > extensions, and just drop them one at a time onto the “Drop to Install” box.

]]> browsers, how-to, 2011-08-09T20:38:11+00:00 Simple vs Complex conditionals in ExpressionEngine templates http://derekallard.com/blog/post/simple-vs-complex-conditionals-in-expressionengine-templates http://derekallard.com/blog/post/simple-vs-complex-conditionals-in-expressionengine-templates I’ve had a chance to be involved in some some pretty fun and exciting ExpressionEngine projects lately. Often, this means looking through sites that other developers had originally built out. Its always fun seeing how other smart people choose to solve a problem - often in a different way then I’d do it. Reading other people’s code is always a great way to learn.

That said, a recurring theme I see are poorly optimized EE templates. Usually, there are minor changes I can have a dramatic impact. The most common minor fix is simply understanding the difference between “simple” and “complex” conditionals. While digging around for a few good resources I could use to help explain it, I stumbled across a wonderful post on the EE forums by John D Wells that explains it masterfully, which I’m reposting here with his permission for my convenience. As an aside, John is a pretty prolific guy, and if you aren’t subscribed to his blog, now is a good time to check it out.

]]> expressionengine, 2011-06-03T16:45:08+00:00