Categories
Uncategorized

Web Dev tool of the week: JSFiddle.net

After seeing it featured in several articles as a tool for live examples, I can only say that JSFiddle is a dream come true: an experimental environment where you can test your HTML, JavaScript and CSS and see the results right there. You can even choose a framework to work with (jQuery, Mootools, Prototype) and start coding away.

Highly recommended. I’ll definitely be using it to test during development!

Get your hands on it: http://jsfiddle.net/

Categories
Uncategorized

Extend RSS2: a plugin to enhance your WordPress default RSS2 feed

Hi all,

I just published a new plugin, UW CALS Extend RSS2 Feed (killer name!), and I’m very excited about it.

Basically, this plugin allows you to include thumbnail and custom field information in your WordPress site’s default RSS2 feed, making it more complete.

Give a try! Here’s the link, and let me know what you think!

PS: don’t forget to visit my WordPress Plugins page for more goodies!

Categories
Uncategorized

Lesson learned: You can’t access DOM elements within an external iFrame

While working with Google Custom Search Engine (CSE), I needed to access elements within the <iframe> containing the search results it generated. Using jQuery, I tried to select the iframe first and its content:

$('#cse-search-results iframe').contents();

But as soon as I tried to do something with it, I’d get a “Error: Permission denied to access property ‘nodeType’” message.

Turns out, <iframes> follow the same origin policy, which prevents you from accessing them directly if they weren’t generated from your own domain. Of course, you can create a proxy file with PHP to retrieve the data first and then add the resulting HTML to your script to get around this problem.

I know, I know… it makes sense now. But I just didn’t know, so, lesson learned!

Categories
Uncategorized

How to use CSS sprites to create custom bullets in HTML

When creating unordered lists (i.e. the ones with bullets and not numbers or letters) in HTML, you can use the list-image CSS property to use an image to replace the default bullets HTML supports.

That’s cool. But, if you are mindful of front-end optimization and decide to use CSS sprites throughout your site to reduce HTTP requests,  the list-image CSS property falls short, because it is intended to use only one perfect, well-tailored bullet image for each bullet style you define. So, if you have ten different types of lists with different image bullets, you will need as many or more separate images to customize your lists. And that is NOT cool.

So, how do you use CSS sprites to create custom bullets?

Example

First, here is the demo of the bulleted list with custom bullets made using CSS Sprites we’ll be developing in this example. A few things to notice:

  • The bullets are made of custom images contained in a CSS sprite.
  • The bullets change on hover from gray to red, just like each link does (something not accomplished by default when only using the a:hover CSS property).

Now, let’s get to it.

What you need:

The HTML

This is the basic HTML we’ll use for this example, which creates a list of links to awesome tropical flavors:

<ul id="my-list">
	<li><a href="#">Mango</a></li>
	<li><a href="#">Banana</a></li>
	<li><a href="#">Watermelon</a></li>
</ul>

The CSS

This is the initial CSS we’ll use in this example. We’ll develop it more as we go along:

#my-list{
	width: 120px;
	padding: 16px;
	border: 1px dotted #CCC;
}

#my-list a{
	display:block;
	padding: 4px 0;
	color:#333;
	text-decoration:none;
}

#my-list a:hover{
	color:#900;
}

#my-list li{
	margin: 0 0 0 12px;
}

The HTML and CSS above generate a list that looks like this:

The custom-bullets sprite image

Ok so, what’s are CSS sprites, again?

In a few words, CSS sprites are basically images that contain a grid of images, like this one from Google. The idea is that instead of loading each image separately, you can load a master image that contains them all, and then use that master image as a background in all HTML elements that need it. This helps reduce the amount of HTTP requests your page makes on load, which then helps reduce loading times. A List Apart has a seminal article on CSS Sprites that, despite being old, will still blow your mind. Also, Christ Coyier from CSS-tricks.com has a cool article with more info on how to use sprites with an example from his own website. Read it.

Here’s the image very simple image sprite we’ll use for this example:

Getting it done:

Let’s further expand the CSS above to make this thing work:

  1. Remove the “bullets” from each li element
#my-list li{
	margin: 0 0 0 12px;
	list-style:none;
}
  1. Remove the left margin and  some the same amount in padding. This helps both make up for the space lost when the bullets were removed and open some space between the border of the li element and the anchor element contained in it
#my-list li{
	list-style:none;
	padding: 0 0 0 12px;
}

At this point, the list should look like this:

  1. Set the sprite as the background for the li element
#my-list li{
	list-style:none;
	padding: 0 0 0 12px;
	background: url(images/sprite.png) -8px 0px;
}
  1. Set the background for the :hover of the li element
#my-list li:hover{

background: url(images/sprite.png) -8px 24px
}

Notice that the list element is now using the sprite image as its background, but it repeats all over the place:

There are two ways to solve this, depending on how your sprite is set up:

  1. a) If your sprite is setup vertically (i.e. if all the images in the sprite are stacked in one column), you can do with just setting the background-repeat to repeat-y at it will do the trick:
#my-list li{
	list-style:none;
	padding: 0 0 0 12px;
	background: url(images/sprite.png) -8px 0px repeat-y;
}

#my-list li:hover{

	background: url(images/sprite.png) -8px 24px repeat-y
}
  1. b) If your sprite is setup horizontally (i.e. if all images in the sprite are distributed across the grid, next to each other, like the one in the Googlee example shown above), you may be better off by setting up background color for the most immediate element contained in the li element (in our case, the <a> element):
#my-list a{
	display:block;
	padding: 4px 0;
	color:#333;
	text-decoration:none;
	background-color:#FFF;
}

Whichever the case, your list should now look like this:

And that’s it! Click here to see the live example »

See you next time!

Categories
Uncategorized

PHP – Safely serialize and unserialze arrays

Serializing arrays in PHP is a great way to format their content before storing it in a database. However, if the serialized content has certain characters (such as “;” or “:”)  the resulting string won’t be read correctly by the unserialize() function,  which is a huge bummer. So, here’s a workaround.

http://davidwalsh.name/php-serialize-unserialize-issues

Categories
Uncategorized

Sample content for WordPress theme development

A big part of the WordPress theme development process is to asses what each possible HTML element will look like (images, tables, lists, paragraphs, etc). The guys at WPCandy.com have put together a set of posts with all the sample content you may need, so you can be thorough in you CSS formatting:

http://wpcandy.com/made/the-sample-post-collection