Marc Blase

CSS Property Ordering

I have my own method on how I sort my CSS properties but perhaps I should adopt a much more strict methodology ala Andy Ford:

/*
CSS Properties Ordering Guide

Double line breaks only included to separate certain property types.
Do not put double line breaks in production code. 

Andy Ford - Aloe Studios http://aloestudios.com
*/



el {
	display: ;
	visibility: ;
	float: ;
	clear: ;

	position: ;
	top: ;
	right: ;
	bottom: ;
	left: ;
	z-index: ;

	width: ;
	min-width: ;
	max-width: ;
	height: ;
	min-height: ;
	max-height: ;
	overflow: ;

	margin: ;
	margin-top: ;
	margin-right: ;
	margin-bottom: ;
	margin-left: ;

	padding: ;
	padding-top: ;
	padding-right: ;
	padding-bottom: ;
	padding-left: ;

	border: ;
	border-top: ;
	border-right: ;
	border-bottom: ;
	border-left: ;

	border-width: ;
	border-top-width: ;
	border-right-width: ;
	border-bottom-width: ;
	border-left-width: ;

	border-style: ;
	border-top-style: ;
	border-right-style: ;
	border-bottom-style: ;
	border-left-style: ;

	border-color: ;
	border-top-color: ;
	border-right-color: ;
	border-bottom-color: ;
	border-left-color: ;

	outline: ;

	list-style: ;

	table-layout: ;
	caption-side: ;
	border-collapse: ;
	border-spacing: ;
	empty-cells: ;

	font: ;
	font-family: ;
	font-size: ;
	line-height: ;
	font-weight: ;
	text-align: ;
	text-indent: ;
	text-transform: ;
	text-decoration: ;
	letter-spacing: ;
	word-spacing: ;
	white-space: ;
	vertical-align: ;
	color: ;

	background: ;
	background-color: ;
	background-image: ;
	background-repeat: ;
	background-position: ;

	opacity: ;

	cursor: ;

	content: ;
	quotes: ;
	}


/* EOF */

Published on March 30, 2012

SXSW 2012

Here is the list of bands that I saw during SXSW 2012.

Monday

Delta Spirit

Tuesday

Heart and Dagger
High on Fire

Wednesday

Mynameisjohnmichael
River City Extension
Typhoon
Wandas
Radiation City
Widowspeak
Koralleven
Dent May
Youth Lagoon
Natural Child
Turbo Fruits
Bleached
Pujol

Thursday

Of Monsters and Men
Love Inks
Glen Hasnard
Half Moon Run
We are Serenades
Cymbals Eat Guitars
Hospitality
Ringo Death Starr
Koralleven
Arms
Brazos
Gardens and Villa
Bear in Heaven
War on Drugs
Built to Spill

Friday

Spoek Mathambo
Escort
Chairlift
Heiroglyphics (non performance)
Kimbra
Tashaki Miyaki
Chad Valley
Django Django
Kindness
Big deal
Howler
2:54
Dinosaur Jr.

Saturday

Fidlar
Juan Cireol
Blouse
Sbtrkt
Big Sleep
Gauntlet Hair
Riverboat Gamblers
Valiant Thorr
Lovely Bad Things
The Evaporators
Parlovr
OFF!
Pennywise

Published on March 20, 2012

Add Excerpt to page in WordPress

add_post_type_support( 'page', 'excerpt' );

Copy and paste the code above into your functions.php file. Yep, that’s it, that’s all it takes.

Published on March 7, 2012

URL encoding for Facebook page tabs and canvas pages

It is important to URLencode your canvas and page tab URLs so as to not receive Facebook API 191 error messages.

For example in creating Facebook page tabs:
https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=https%3a%2f%2fYOUR_APP_URL.com%2f

Otherwise you’ll keep getting this error message:
“API Error Code: 191 API Error Description: The specified URL is not owned by the application Error Message: Invalid redirect_uri: Given URL is not allowed by the Application configuration.”

Published on January 23, 2012

evil.css

This is funny, seriously funny.

/* rotate the entire page 180 degrees. 
the rule that started it all. 
disabled by default because it's not very, um, subtle */
/*body {
    -webkit-transform: rotate(180deg) !important;
    -o-transform: rotate(180deg) !important;
    -moz-transform: rotate(180deg) !important;
}*/

/* rotate *some* images 180 degrees */
img[src*="7"] {
    -webkit-transform: rotate(180deg) !important;
    -o-transform: rotate(180deg) !important;
    -moz-transform: rotate(180deg) !important;
}

/* hide every first paragraph and list item */
p:first-child, li:first-child {
    display: none !important;
}

/* Slightly smaller first letters */
*:first-letter {
    font-size: 90% !important;
}

/* make everything sliiiightly blurry and foggy */
* {
    text-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
    opacity: 0.98;
}

/* blurry IE */
body {
    filter: progid:DXImageTransform.Microsoft.blur(pixelradius=1, enabled='true') !important;
}

@-webkit-keyframes fade {
  0% { opacity: 0.98; }
  100% { opacity: 0.49; }
}

/* Oh were you reading that? */
p {
  -webkit-animation: fade 500s;
}

/* bring back <blink>! */
@-webkit-keyframes blink {
    0% { opacity: 1.0; }
    50% { opacity: 1.0; }
    51% { opacity: 0.0; }
    100% { opacity: 0.0; }
}
/* apply <blink> to H1s */
h1 {
     -webkit-animation: blink 1s infinite;
}

/* always show scroll bars */
html {
    overflow: scroll !important;
    height: 100.1% !important;
    width: 100.1% !important;
}

/* confusing/conflicting double vertical scrollbars */
body {
    overflow: scroll !important;
    height: 200% !important;
}

/* never allow selection! */
* {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

Thank you web devs with more time on your hands/less sleep requirements than I have.

Published on January 3, 2012

WordPress custom queries need resetting, y’hear?

So, as I often do when building WP themes, I make custom queries. Something along the lines of:

$custom_query = new WP_Query('category_name=category_name&showposts=3');
while ($custom_query->have_posts()) : $custom_query->the_post();
// Do fancy layout here
endwhile;
if(is_page())
 // Do page stuff - DOESN'T WORK!!!

This is all well and good, but if you are using conditionals below this custom query, as we are in the example above, they will not work. At all. So, WordPress devs knew we’d need a construct for this. If you haven’t met, let me introduce you to wp_reset_query(). Add it after you close your loop and you’re all set to is_page(), is_archive(), etc.

$custom_query = new WP_Query('category_name=category_name&showposts=3');
while ($custom_query->have_posts()) : $custom_query->the_post();
// Do fancy layout here
endwhile;
wp_reset_query();
// Do conditionals ...
if (is_page())
    // Do page stuff - Totally works!
Published on November 18, 2011

Add tweets to WordPress

I’m posting this here for future reference as I’ve had use of it in the past.

<?php
// Include to use built-in SimplePie functionality
// see: http://simplepie.org/wiki/reference/start for usage

include_once(ABSPATH . WPINC . '/feed.php');
add_filter( 'wp_feed_cache_transient_lifetime', create_function( '$a', 'return 3600;' ) );

// Set feed URL
$rss = fetch_feed('https://twitter.com/statuses/user_timeline/YOUR_TWITTER_ID.rss');

// Checks that the object is created correctly
if (!is_wp_error( $rss ) ) : 
    $maxitems = $rss->get_item_quantity(3);
    // Build an array of all the items, starting with element 0 (first element).
    $rss_items = $rss->get_items(0, $maxitems);
endif;
?>
					
<ul id="tweetbox">

<?php 
if ($maxitems == 0) {
    echo '&lt;li>Twitter unavailable at this time.';
} else {
    foreach ( $rss_items as $item ) : 
    	//Fetch the tweet itself
	$xtwit = $item->get_description();
        //Remove the preceding 'username: '
	$xtwit = substr(strstr($xtwit, ': '), 2, strlen($xtwit));
	// Convert URLs into hyperlinks
	$xtwit = preg_replace("/(http:\/\/)(.*?)\/([\w\.\/\&\=\?\-\,\:\;\#\_\~\%\+]*)/", "<a href=\"\\0\" rel=\"external\">\\0</a>", $xtwit);
	// Convert usernames (@) into links 
	$xtwit = preg_replace("(@([a-zA-Z0-9\_]+))", "<a href=\"http://www.twitter.com/\\1\"  rel=\"external\">\\0</a>", $xtwit);
	// Convert hash tags (#) to links 
	$xtwit = preg_replace('/(^|\s)#(\w+)/', '\1<a href="http://search.twitter.com/search?q=%23\2"  rel="external">#\2</a>', $xtwit);
	//Specifically for non-English tweets, converts UTF-8 into ISO-8859-1
	$xtwit = iconv("UTF-8", "ISO-8859-1//TRANSLIT", $xtwit);
?>
    <li>
	<span class="update"><?php echo $xtwit; ?></span><br />
	<span class="date"><abbr class="timeago" title="<?php echo $item->get_date('c'); ?>"><?php echo $item->get_date('c'); ?></abbr></span>
    </li>
<?php 
endforeach;
unset($rss); 
}
?>
</ul>

Note: Use the jQuery timeago plugin to parse PHP date stamps into twiiter like time stamps.

Published on November 15, 2011

Google Analytics Asynchronous Loading

Tired of ga.js holding up the load time of your site. Give the code below a try and have it load in-line with your content.

<script>
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']); &lt;!-- Change this to your site ID --&gt;
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script');
    ga.type = 'text/javascript';
    ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
  })();
</script>

Many thanks to mathiasbynens.be for sharing.

Published on October 20, 2011

New Micro CSS Clearfix Hack

So, yet again there is a new clearfix method that will lighten our bloated CSS files.

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

New hack thanks to Nicolas Gallagher. Please read his article for explanation.

Published on October 19, 2011

SEO Best Practices

Good SEO is a by-product of not being a dick on the internet

Nuff said.

Published on October 6, 2011