Journal – Page 14 – Sara Cannon

August 20, 2010

Speaking at WordCamp Savannah

I'm really excited to have the awesome privilege of speaking at WordCamp Savannah. The line up of speakers is incredible. Everyone should come out because it is going to be awesome! Here is a description of my session:

Designing Custom Themes / Child Themes

Interested in customizing themes to fit your needs and design? We'll be using the new default WordPress theme Twentyten as a base for looking at best practices and how to's for theme customization. We will demonstrate how to make a child theme and what are some good standard practices that you should know to keep your new theme healthy and update-able in order to save you time as well as keep it relevant in the future.

Make sure to say hi to me if you're there!

August 12, 2010

Alice by Pogo Video

I just love this video of the Pogo song Alice.. kind of a wonderland remix?

thanks isaac.

August 10, 2010

Artcation.com

I've been a bit quiet on this blog.. mainly because I've been in Berlin on artcation for a bit.. a vacation focused on lots of art. :) Check out my Artcation.com blog to see what i've been checking out in Berlin so far. I'll be in france next week as well.

July 19, 2010

Inspiration: “Tame Impala – Half Full Glass of Wine” Video by Special Problems

I am in love with the animation on this video called "Tame Impala - Half Full Glass of Wine" by the studio Special Problems.

Tame Impala - Half Full Glass of Wine from Special Problems on Vimeo.

One part that I just adore is the pointillism heart beating to the baseline:
Tame Impala - Half Full Glass of Wine

found via The Strange Attractor

July 13, 2010

Disabling Typekit for Windows

Web Typography is coming a long way with the use of @font-face. We are finally able to break out of system fonts and have options! Unfortunately, font-rendering on IE/Windows is still sub-par. The rendering engines have a hard time interpreting fonts properly that are embedded with @font-face that have yet to be re-crafted as a web-font version.

I have been using Typekit to render my web-fonts since the service became available. It is an incredible and takes away a lot of the headache in embedding, keeping up with browser/mobile compatibility, etc. If you haven't tried Typekit out, you can get a free account to see if you like it - then upgrade if you decide you're in love. <3

I've noticed that sometimes the fonts that I've chosen can end up so "crunchy" in IE that I would rather just stack my fonts to the closest system font, and disable Typekit for Internet Explorer.

Here is a way you can Enable it for just Mac: you can query the user agent header with php in a conditional statement that wraps around your Typekit js:

[code]

<?php if (strpos($_SERVER['HTTP_USER_AGENT'], "Mac", 0) !== FALSE) { ?>
<script type="text/javascript" src="yourtypekitlink.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<?php } ?>

[/code]

Don't want to exclude Linux? Disable it for Windows Only:

[code]
<?php if (strpos($_SERVER['HTTP_USER_AGENT'], "Windows", 0) === FALSE) { ?>
<script type="text/javascript" src="yourtypekitlink.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<?php } ?>
[/code]

Here are examples of type crunch in a title:

LTC Bodoni Type Crunch in IE (eww!)

LTC Bodoni on Mac with Typekit (perfect!)

Typekit disabled on IE / reverts back to font stack

Here are some more examples with a different font:

typekit on mac: Ltc Bodoni and Proxima Nova (perfect!)

Typekit enabled on Windows (crunchy! Eeek!)

typekit disabled on windows (better than the crunch.)

Interested in browser-specific disabling? These methods might be interesting to look into: (but I haven't done it yet)

http://davecardwell.co.uk/javascript/jquery/plugins/jquery-browserdetect/

http://rafael.adm.br/css_browser_selector/

PS: Firefox achieves the same screen-shots as IE. Interesting.

July 12, 2010

Combating IE6: jQuery Png Fix

For all you web designers out there: We've all come a long way together.. plodding through all the horrific browser incompatibilities. Telling each other different hacks and tricks. ...trying to avoid those horrific box model differences. We're all optimistic about standards in the future.. but how are we still dealing with archival browsers? Some people say "screw IE6 who gives a crap?" But people like me who make sites for older clients and organizations that still might have IE6 running on their internal systems just cant turn our heads. Well, here is my "Combating IE6" tip #1:

jQuery PNG Fix

Well, jQuery has been around for a while now.. and I absolutely love it. I've been using a jQuery .png fix script for a while now and I thought I'd share. As they say:

This plugin will fix the missing PNG-Transparency in Windows Internet Explorer 5.5 & 6.

You will go from this to this: (yay!)

png broken png fixed http://jquery.andreaseberhard.de/pngFix/ is the link to the script.

All you do it install it, and the latest jQuery.. point to it in your header.

[code]
<pre><code><head>
...
<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript" src="jquery.pngFix.js"></script>
...
</head>
[/code]

then document-ready function it:

[code]
<pre><code><head>
...
<script type="text/javascript">
$(document).ready(function(){
$(document).pngFix();
});
</script>
...
</head>
[/code]

and YATTA! PNG's are magically fixed!

download here: http://jquery.andreaseberhard.de/pngFix/

More combating IE6 posts to come. Would love to know your methods!

July 6, 2010

WordPress Tip: Centering the Main Menu in the Twentyten Theme

twentyten

Hello WordPress users! All of y'all know about the stunning new default theme "twentyten" that comes with the new WordPress 3.0 release. I've been working with that theme a lot through child themeing.

If you ever run into a problem/question with customizing your theme or CSS, you can always search the WordPress Codex or Forums - most likely there will have been someone else who has encountered the same or similar problem. Don't be afraid to chime in whenever you think you can help out. Most likely there are people on the forums that know less than you do that you can help out.

Centering the Main Menu in the Twentyten Theme:

By default, the twentyten menu normally floats left. if you want a centered menu, you can change your css style sheet.

[code]

/* =Menu
-------------------------------------------------------------- */

#access {
background: #000;
margin: 0 auto;
width: 940px;
display:block;
float:left;
}

[/code]

The above is a segment from the default css in twentyten. You need to take out the "float: left;" and add in "position:absolute; text-align:center;" then add a new line of "#access ul {display:inline-block;}" This will change it to the following:

[code]

/* =Menu
-------------------------------------------------------------- */

#access {
background: #000;
margin: 0 auto;
width: 940px;
display:block;
position:absolute;
text-align:center;
}

#access ul{display:inline-block;}

[/code]

Hope you enjoyed this tip. And remember always: WordPress is for lovers.
-sara

Edit: forgot to add: Make sure you include an IE fix!

put this in its own little ie.css file and conditional comment it into your header. :)

[code]
#access ul{
display:inline;
zoom:1;
}
[/code]

July 1, 2010

Good Web Type Article: “Cross-browser kerning-pairs & ligatures”

Thanks to my friend Noël, I have come across this great article on web type kerning and ligatures.

Improved handling of kerning pairs and ligatures in modern browsers using the "text-rendering: optimizeLegibility;" declaration.

I never knew about this declaration - an interesting read and I can see some typekit experiments in my future.

June 28, 2010

Adding Nav Menu Functions to Your Theme in WordPress 3.0

Nav Menu Function for WordPress 3.0 - add to theme

Here is the Admin of my implementation of the Nav Menu Function added to Servants For Haiti

As many of you already know, WordPress has just released their latest version WordPress 3.0. If your site runs on WordPress and you haven't already, Update Your Blog. If you aren't running on WordPress, this is the best time to give it a shot. You will not be disappointed. They have added so many new features and improved old ones, it is truly incredible.

One of the features they have added is the ability to have Navigation Menu function control in the admin panel. No more coding in what pages to exclude in the menu! No more downloading plug-ins to sort the menu for you!

One thing: you have to retro-fit your old themes to allow this function. (and don't forget to code it in to any new theme releases!) Here is how you do it:

1. open to your theme's functions.php
2. add this line of code in there:

add_theme_support( 'menus' );

3. open your theme's header.php (typically where your main menu will be) and replace your previous menu code

which is typically something like:

<?php wp_list_pages($args); ?>

with:

<?php wp_nav_menu($args); ?>

Check out the codex for the different parameters you can include in your wp_nav_menu( ) here: http://codex.wordpress.org/Function_Reference/wp_nav_menu

newbie note: $args should be empty or filled with parameters from the codex.

June 17, 2010

WordPress TV: Mitcho Erlewine: Abstract Your Code

This is the video from my favorite session from WordCamp San Francisco. Mitcho Erlewine did a wonderful talk on abstracting code that really challenged me to produce better, cleaner, reusable code. Here is the video description:

Mitcho Erlewine discusses avoiding programming disasters by properly abstracting the code you write and how you can make sure to write code both you and others can reuse in the future.

Read my WordCamp San Francisco recap post

- sara cannon