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
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, 2012URL 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.”
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, 2012WordPress 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 '<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, 2011Google 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']); <!-- Change this to your site ID --> _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, 2011New 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, 2011SEO Best Practices
Good SEO is a by-product of not being a dick on the internet
Nuff said.
Published on October 6, 2011