Jay George

Laser Targeting IE with WordPress

Jay — Tue, 13 Dec 2011 19:39:34 +0000

Hey Guys,

It’s been a good few months before I’ve posted anything, mainly because I have a new job and client work is taking up all my evenings. I still have to edit out my ums and ars quite a bit before I can publish a video unfortunately so I can’t quickly publish as I’d like.

I thought I’d write some really short posts for now instead, seen as I’m learning of tonne of new stuff.

Here is a way to finely target IE to your heart’s content in WordPress (but you could easily adapt for plain HTML).

class="no-js gtie7 gtie8 gtie9 modern-browser">

This method adds a loads of classes that you can use to target IE after you’ve targeted normal browsers.

Example

In the example below I know that when I move the nav around it messes up in Internet Explorer 7. This is probably a bug that I would rather not waste time fixing, choosing to dedicate my time to working on advanced CSS3 for modern browsers.

Normally I would write two sets of rules (one for normal browsers, and one to neutralise IE7), but with our extensive targeting classes I can simply target browsers outside and above IE7 using the gtie7 (greater than IE7) rule.

.gtie7 #nav {
    right: 440px;
    top: 26px;
}

It’s important to note that these classes are more for targeting buggy behaviour. If you’re looking to change layout for less capable browsers then consider using feature detection with Modernizr.

#5 W3 Total Cache for WordPress Users

Jay — Mon, 13 Jun 2011 17:04:18 +0000

Finding the Build Script Hard Work?

The scope of the HTML5 Boilerplate by Paul Irish and the team is pretty big. In fact, they seem self-aware of this, sending a questionnaire to their users, trying to figure out which parts of the project people use or don’t use. Here are the results.

Part of the Boilerplate is a tool called the Build Script; a script that runs in Terminal that essentially speeds up your website through compressing your code and images, forcing visitor’s browsers to cache everything, and probably some other wizardry that I can’t fathom.

Eh?

Unsurprisingly over 70% of users don’t use the Build Script. Whilst the BS seems great, it’s one weakness is that it requires a bit of time-investment to download Terminal stuff and figure out what’s going on. Sure, the HTML5 team have videos, but as soon as you start watching them it’s immediately clear that Paul and the team are already perfectly comfortable with Terminal and assume we are too. When Paul started typing gibberish like ‘Ant Build’ into the Terminal I imagined many of the designers out there simply switching off. From the outsider point of view it’s more developer territory. Don’t get me wrong, I think the Build Script is great, but there’s an easier way…

The Good News

If you’re in the habit of building websites on WordPress, there is an amazing tool that will pretty much do the same thing as the Build Script, but with a nice user interface and no Terminal work :-). I’m talking about a free plugin called W3 Total Cache, which I’ve seen recommended in many places but not bothered to check out until now. I’m so pleased with it that I’m going to side-park the Build Script from now on (unless I’m working on a non-WordPress website of course).

Video Notes

Don’t forget to empty your cache in the ‘performance’ tab of W3 Total Cache every time you upload a piece of code that W3 Total Cache will compress e.g. if you have CSS compression enabled and you upload a new version of your stylesheet you’ll need to empty the cache before you see the changes to your website.

Here is the link about why you should use the enqueue method to load jQuery and not hardcoding.

Please use the below code for running jQuery from the functions file. Ignore my suggestion in the video, it actually broke the jQuery in my Dashboard afterwards:

function my_init_method() {
	if(!is_admin()) {
		wp_deregister_script('jquery');
		/* =Jay. This code taken from Digging Into WordPress by Chris Coyier + modified so that jQuery is in the footer, with reference to: http://codex.wordpress.org/Function_Reference/wp_enqueue_script */
		wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/ jquery/1.6.1/jquery.min.js"), false, '1.6.1', true);
		wp_enqueue_script('jquery');
	}
}

add_action('init', 'my_init_method');

Chromebooks, here is an approach that is the complete opposite. We don’t have to force local data on to the web because all our data lives on the web.

Personally I have been long advocating web apps and where possible I will work on the web instead of using a native app e.g. Why use Twitter App when you can just go to www.twitter.com and get the same experience? They have built in keyboard shortcuts and I can get notifications via a Chrome extension like Twitter Notifier. If I get a new computer I don’t have to worry about downloading a native app and setting up my preferences again, the web app is exactly as I left it.

There are many advantages in working exclusively on the web, the key ones being:

I can work from anywhere, on any computer
I never have to worry about setting up my computer and preferences again
I never have to worry about backup
I get a consistent experience across different OS’

For the every day worker I am pretty sure they would have no problem switching to Chrome OS – the only habit they would need to change is using Google Docs rather than MS Office. However, for the web developer / designer it’s much more difficult to use Chrome OS. Here are the problems we face…

We can’t develop locally when working on a Content Management System like WordPress. No MAMP
Whilst we could use Firebug or Web Inspector there are no really good substitutes for a program like CSSEdit or a text editor like TextMate or Sublime Text
How do we transfer our changes to a web server? No FTP?

I would love to make the switch to working 100% in web apps; I believe that in 10 years from now it’s inevitable that everything will be a web app, but at there moment there are too many things preventing me from pulling the trigger. I suspect the three above issues would be major show-stoppers preventing 99% web designers from even considering Chrome OS. Some people would start arguing about the Adobe suite, but personally I design more in the browser, and Aviary looks like a reasonable substitute for me.

What about you? Can you suggest any work-arounds for these issues? And what would you miss if you had to switch to Chrome OS?

#4 Setting up MAMP + Dropbox

Jay — Thu, 12 May 2011 19:56:22 +0000

I realise that there are quite a few tutorials out there that show you how to set up MAMP on your Mac, take this great video series by Chris Coyier for example – First Moments with MAMP, but since these days there a few people that DON’T design on multiple computers, I set about trying to figure out a way to synchronise my local WordPress databases with across multiple computers with Dropbox, every web designer’s favourite syncing service. I found a great article on a blog called StuckTogetherWithTape on how to do this and I’ll walk you through this method in the video. Even if you don’t work on multiple computers you should do this for backup purposes anyway, just in case your hard drive crashes.

In this tutorial we’ll go through…

Briefly why you should be using MAMP
Changing the preferences in MAMP
Backing up our website files
Using Symbolic Link to copy the actual WordPress database to Dropbox

The link to the Symbolic Linker that I mention in the video is here… Symbolic linker.

#3 Publishing Your Build Script’d WordPress Theme

Jay — Wed, 27 Apr 2011 10:26:12 +0000

Getting your head around the Build Script and adapting it for WordPress can take a bit of time, but there’s more! Trying to figure out the best way to publish everything can be a bit of a head-scratcher.
I was pretty upset that publishing the Build Script broke my previous workflow using Espresso’s built-in FTP, and eventually had to resort to FileZilla, a self-contained FTP program, to get things working smoothly. But once you tweak it a bit, publishing your Build-Scripted WordPress theme becomes a snip!

Filezilla is a free FTP program available on Mac and Windows, you can download it here.

Here are the filter configurations I talk about in the video:

#2 Using The HTML5 Build Script With A WordPress Theme – Part 2 Of 2

Jay — Tue, 12 Apr 2011 10:13:02 +0000

In part 2 of the HTML5 Build Script + WordPress tutorial we’ll go through the modifications we need to make to the build script so that it works nicely with WordPress. It’s actually not too taxing, but there are a few gotcha’s.

If you want to jump straight to the code there’s a link below to my blank WordPress theme, based on Starkers by Elliot Jay Stocks, but with added HTML5 Boilerscript stuff + a working Build Script.

HTML5 Boilerplate WordPress Theme with Build Script

N.B. I’ve made a few tweaks here and there, for example I’ve included Ryan Fait’s Sticky Footer, Andy Clarke’s 320 and up principle for CSS3 Media queries, etc. Feel free to strip these out – just use Cmd + F to look for a comment prefix of =Jay

#1 Using the HTML5 Build Script with a WordPress Theme – Part 1 of 2

Jay — Fri, 08 Apr 2011 13:39:47 +0000

Firstly if you’re a serious web designer, or have ambitions to be a serious web designer, you should be checking out HTML5 Boilerplate right now (www.html5boilerplate.com).

The idea of the HTML5 Boilerplate is to provide a starting point for future-proof web design. From putting javascript at the bottom of the page to using Modernizr, this is a collection of best practices from some notable people in the web industry and we really need to be aware of these basic fundamentals.

However, basic Boilerplate aside my next two videos will specifically focus on the ‘Build Script’, a feature fully realised in version 1.0 of HTML5 Boilerplate. The idea of the Build Script is to always serve your code compressed, and always get visitors to cache unchanged code. Achieving this will significantly increase the load speed of your website and in future you’ll be forever turning your nose up at other people’s YSlow score.

In this video we’ll go through…

Downloading and using the HTML5 Boilerplate Build Script
Using Terminal to run the script

Caught Between a Rock and a Hard Place

Jay — Tue, 05 Apr 2011 17:29:46 +0000

I started these video tutorials for those like me, who think great design and great code are not mutually exclusive. We will never aspire to write Python or Perl in a basement with Mark Zuckerberg, but kicking ass with jQuery or pulling together a WordPress theme gives us the same buzz as using the Bézier tool in Photoshop or Illustrator. Modern web design requires a specific hybrid skillset; especially if you freelance – so let’s leave our WYSIWG editors at the door and get our geek on.

If you’d like to see a future tutorial covering a specific topic, let me know and I’ll try to help :-)
If no one requests anything I’ll just cover the things I think are important.