What is Zen Coding?

From a general perspective Zen Coding is simply the practice of making lightweight and reusable code to allow for peaceful coding and debugging (that’s my definition anyways). There has been a movement in the front-end development community towards finding new ways to use CSS with semantic markup in order to produce the desired layouts and styles. Now Sergey Chikuyonok has taken that to a whole new level. He’s reversed the idea of Zen Coding using HTML markup to generate CSS Selectors and allowed us to create our markup from using CSS Selectors. This might seem confusing, so lets look at some code:

Plain and simply put, the Zen Coding plugin (supported on multiple text editors) translates code like this:

div#header>ul.nav>li*5

into this:

<div id="header">
	<ul class="nav">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

.. and yet, this is still nothing folks! Dive in deeper over at Smashing Mag

View Demo or Download

Lansing Web and Technology

If you are a web design or web development firm in Lansing, MI then talk to me personally about an even better version of this application. I’m offering it only to Lansing Web Design Companies because I believe in giving the Lansing Area a competitive advantage when it comes to technology. Feel free to contact me at the email in my header.

Download the YUI Compression AppleScript

The AppleScript Source:

on run
	tell application "Finder"
		set this_item to choose file with prompt "Choose CSS or JS file:"
		set dir to the selection as alias
	end tell
	set mypath to posix_path(this_item)
	set dirpath to posix_path(dir)
 
	runCompression(mypath, dirpath)
end run
 
on posix_path(mac_path)
	set mac_path to (mac_path as text)
	set root to (offset of ":" in mac_path)
	set rootdisk to (characters 1 thru (root - 1) of mac_path)
	tell application "Finder"
		if (disk (rootdisk as string) is the startup disk) then
			set unixpath to "/" & (characters (root + 1) thru end of mac_path)
		else
			set unixpath to "/Volumes:" & mac_path
		end if
	end tell
	set chars to every character of unixpath
	repeat with i from 2 to length of chars
		if item i of chars as text is equal to "/" then
			set item i of chars to ":"
		else if item i of chars as text is equal to ":" then
			set item i of chars to "/"
		else if item i of chars as text is equal to "'" then
			set item i of chars to "\\'"
		else if item i of chars as text is equal to "\"" then
			set item i of chars to "\\" & "\""
		else if item i of chars as text is equal to "*" then
			set item i of chars to "\\*"
		else if item i of chars as text is equal to "?" then
			set item i of chars to "\\?"
		else if item i of chars as text is equal to " " then
			set item i of chars to "\\ "
		else if item i of chars as text is equal to "\\" then
			set item i of chars to "\\\\"
		end if
	end repeat
	return every item of chars as string
end posix_path
 
on runCompression(mypath, dirpath)
	tell application "Terminal"
		do shell script "java -jar " & dirpath & "yuicompressor-2.4.2.jar " & mypath & " -o " & mypath & ".min.js"
	end tell
end runCompression

If you like this YUI Compression AppleScript please do share that with me, as praise is my sole motivation for producing scripts for others. I’ve only skimmed the surface of applescript, but with so few scripts out there that meet the needs that I have, I’m sure I could quickly make some other web developer tools for Mac as well.

What are Custom Fields?

Custom fields are a predefined function within the WP system. All you have to do is pass a parameter to the function to receive data back. Though there is great documentation for custom fields in the WordPress Codex, to a new coder, this documentation can be overwhelming. Instead, let’s breakdown and look at a very specific piece of the function..

So hypothetically, let’s say you want a thumbnail in the beginning each post on your homepage (take a look at my homepage to see the layout I’m referring to). Thumbnails and images are important for blogs to break up the content and add visual appeal. For quite a while I’ve been going into each of my posts, uploading an image and floating it left, and then taking that image and intro text and putting it into the excerpt box. This method, while functional, is a three step process that slows down my blogging time. So to speed up the process I can use custom fields and the RSS limit function to display the same results automatically without having to do it manually each time.

In my blog post, I create a new custom field called “imagethumb”. After defining the imagethumb “key” once, I can then use that custom field on each blog post by selecting it from the dropdown field, and all I have to do is specify a value (location) of the image. So the custom field should display as:

Name: imagethumb
Value: http://yourimage.url

Then I need to edit my index.php file and add the thumbnail to the post loop and set two modes for posts with or without images.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<?
// Start the post loop
while (have_posts()) : the_post();
?>
<div class="date">
  <span class="day"><? the_time('j'); ?></span>
  <span class="month"><? the_time('M'); ?></span>
  <span class="year"><? the_time('Y'); ?></span>
</div>
 
<h1>Title Goes Here</h1>
 
<p class="postmetadata">
  <? the_tags('Tags: ', ', ', '<br />'); ?>
  Posted in <?php the_category(', ') ?> |
  <? edit_post_link('Edit', '', ' | '); ?>
  <? comments_popup_link('No Comments;', '1 Comment', '% Comments'); ?>
</p>
 
<div class="entry">
<?
// Get custom field by passing the parameter to get_post_custom_values() function
$values = get_post_custom_values("image");
 
// If custom field is set, format the image with the content
if (isset($values[0])) {
?>
  <img class="alignleft" src="<? bloginfo('url'); ?>/<?=$values[0];?>" />
  <p class="alignleft"><? the_content_rss('', TRUE, '', 100); ?></p>
<?
}
 
// if not set, pull in the excerpt instead
else {
?>
  <p><? the_excerpt(); ?></p>
<?
}
 
// end loop
endwhile;
?>

You can go one step further in the automation process and use a cropping script to automatically crop the image to the desired size. All you’ll need is timthumb and to set the parameters you want on the image

Parameters
----------------------
w: width
h: height
zc: zoom crop (0 or 1)
q: quality (default is 75 and max is 100)
 
example:
<img src="<? bloginfo('url'); ?>/timthumb.php?src=<?=$values[0];?>&w=300&h=200&zc=1" />

Here’s the JQ

$(document).ready(function(){
	$("li.child:visible").hide();
	$("li.parent").click(function(){
		if ($(this).children().hasClass("selected")) {
			$(this).children().removeClass('selected');
			$(this).next().toggle("slow");
			return false;
		}
		else {
			$(this).children().addClass('selected');
			$(this).next().load($(this).children().attr("href")).toggle("medium");
			return false;
		}
 
	});
});

Here’s the PHP

if ($handle = opendir('./'))
{
	while (false !== ($file = readdir ($handle)))
	{
		if ( preg_match("/^\_/", $file) )
		{
			$filename = preg_replace('/\_/', ' ', $file);
			echo "
	<li class="\&quot;parent\&quot;"><a href="\">" . $filename ."</a></li>
\n
	<li class="\&quot;child\&quot;"></li>
";
		}
	}
	closedir($handle);
}