Things of the Past

I remember “back in the day” when I used to open up my web browser on my personalized homepage at netvibes and spend a good hour or so trolling through my 50ish RSS feeds that I had decided qualified my regular attention. Certainly this was, at the time, an amazingly powerful way to keep up with the fast paced web development/design world. I didn’t even have to visit any of the sites. I could just read the content of the posts in the Feed Reader and whenever I found a new RSS feed it was as simple as clicking “Add Feed” and paste the URL. However thing’s are not as they used to be. Here is quote that seems to reflect my own feelings:

howardowens: I just trimmed my RSS subs down from nearly 300 to 75. Just couldn’t keep up. And if it’s really worth reading, it will be in Twitter.

And that’s just it. Twitter has become the new measuring rod of internet content.

Living in the Future

So what do I do now? Well I just let twitter tell me when something interesting appears. Simple. I only follow people/sites who I find interesting or contribute in areas that interest me. This way I only come across posts that other people have justified as “shareable” and, if I agree it is an amazing post, then I’ll retweet. And whenever I find a new site that I want to follow the first thing I do is look for a “follow me” link. And if they don’t have a twitter account then I have to settle for RSS. I don’t know if any else has the same thoughts but twitter now takes priority as the information aggregator.

So RSS is Dead?

Now I’m not trying to claim by any means that RSS is dead, or even dying. All I’m saying here is that I have noticed my own patterns changing. I still use my RSS Feed Reader, but I have far less feeds that I look at regularly. Instead I keep my finger on the pulse using twitter. Apps have been released recently, such as Fever, which try to combine the RSS Reader with the social recommendations side of Twitter which I think is a really cool idea. But really I’m interest to see what other people are doing. Do you think Twitter is replacing RSS? Which method of keeping up with latest news do you prefer? Have you switched to Twitter or are you a hardcore RSS fan?

One of their latest posts WordPress Configuration Tricks points some some really quite smart tricks that can be achieved by editing the wp_config.php file. For example:

• Manually setting your Blog Address and Site Address
• Custom User and Usermeta Tables
• Moving Your wp-content directory
• Dealing with Post Revisions
• Specifying the Autosave Interval
• Saving and Displaying Database Queries for Analysis

There is some really nifty stuff in there. If this is your kind of thing I would highly recommend you go and check it out and maybe let Chris and Jeff know how much you appreciate their work.

As always comments and suggestions are always welcome. Enjoy.

One of the most useful parts of jQuery is it’s ability to attach events to objects within a web page. When these events are triggered you can then use a custom function to do pretty much whatever you want with the event. So I thought I would share with you an introduction to jQuery Events.

So how do events work?

Events work by binding a function that will be executed when that event is triggered. What triggers the event depends on what the event is (e.g. a “click” event will be triggered when you click something, funnily enough). Infact, if you have been using jQuery properly, you might have already been using events without even noticing it:

$(document).ready(function () {
    //Do your work here...
});

The above code should always be used before you do anything with jQuery.You will see this code all the time when people are using jQuery. However what you might not know is this is that ready is actually an event and the code you put inside of it is the function you are binding to the ready event.

So what events are there?

There is a wide range of events that are supported by jQuery. At the time of writing (v1.3) there are 20 event helpers:

• blur
• change
• click
• dblclick
• error
• focus
• keydown
• keypress
• keyup
• mousedown
• mouseenter
• mouseleave
• mousemove
• mouseout
• mouseover
• mouseup
• resize
• scroll
• select
• submit

As you can see this provides an array of possible events to attach to your elements. To see these events in action have a look at the demo.

So how do I add events to my elements?

This is the easy part. jQuery provides methods which help you handle your events with amazing simplicity. I won’t go through all of the different types of events handlers here however you can see the documentation for these on the jQuery website. The only one we are going to look at here is the bind handler. It can be used like this:
HTML

<style>
p { background:yellow; font-weight:bold; cursor:pointer; padding:5px; }
p.over { background: #ccc; }
span { color:red; }
</style>
<p>Click or double click here.</p>
<span></span>

Javascript

$("p").bind("click", function(e){
    var str = "( " + e.pageX + ", " + e.pageY + " )";
    $("span").text("Click happened! " + str);
});
$("p").bind("dblclick", function(){
    $("span").text("Double-click happened in " + this.tagName);
});
$("p").bind("mouseenter mouseleave", function(e){
    $(this).toggleClass("over");
});

As you can see it is uber simple to add events to almost any DOM elements using jQuery’s selector and the bind function. And remember that events can be added to more than just <p> tags. In the demo we attach our events to inputs just as easily.

Conclusion

So there you have it. A simple introduction to events in jQuery. Remember to read up on the documentation for all of the events to see what amazing possibilities can be achieved with some simple javascript code. And as always let me know what you think about jQuery events. You could even share some examples of sites that you have made that use jQuery events.

Preparation

Things you will need to make this search panel:

• Download jQuery v1.3 so we can animate things.
• Images for the background of your search box and the toggle button.

In this case we will be using a CSS Sprite for our toggle button. It is good practice to use CSS sprites when making buttons that use images as it helps improve your site performance.

The HTML

So lets get to it. The HTML here is pretty simple. The main thing to notice here is our top-search div which just has a link and a normal search form in it. This keeps things valid and accessible.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Dropdown Search Panel</title>
<link rel="stylesheet" href="styles/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
//Javascript will go here...
</script>
</head>
<body>
<div id="wrapper">
	<div id="header">
		<div id="top-search">
			<a href="#" id="searchtoggle" title="Want to search?">Search</a>
			<form method="post" action="">
			<input type="text" class="box" value="Search..." name="s" id="s" />
			<button class="btn" title="Submit Search">Search</button>
			</form>
		</div>
                <h1>jQuery Dropdown Search Panel</h1>
	</div>
</div>
 
</body>
</html>

The CSS

The CSS here is pretty simple as well with a few exceptions.

#header {
	width:900px;
	height:100px;
	margin:0 auto;
	position:relative;
}
 
#searchtoggle {
	background:url(../images/toggle.png) no-repeat left top;
	position:absolute;
	top:0px;
	right:0px;
	width:21px;
	height:19px;
	text-indent:-9999px;
	border:0;
}
#searchtoggle.up { 
	background:url(../images/toggle.png) no-repeat right top; 
}
#top-search {
	height:60px;
	width:325px;
	float:right;
	position:relative;
}
#top-search form {
	position:absolute;
	top:0px;
	left:0px;
	background:url(../images/search_top.png) no-repeat;
	width:262px;
	height:30px;
	padding:5px 0 0 40px;
	display:none;
}
#top-search .box {
	width:195px;
	background:transparent;
	border:0;
	margin-left:5px;
}
#top-search .btn {
	margin-left:10px;
	width:35px;
	background:transparent;
	border:0;
	text-indent:-9999px;
	cursor:pointer;
}

So here we are applying our styles to our header and top-search div. Most of this is standard CSS but a few things to notice are:

• The #header div has position relative so we can absolute position our #searchtoggle link.
• The searchtoggle link uses a CSS sprite. Notice how initially the background image is positioned “left top” (i.e. pointing down). We then set another class, #searchtoggle.up, to override this position to “right top” (i.e. pointing up). You will see how this works in the javascript later.
• You will also notice the line “text-indent:-9999px;” in certain places. This is a trick to hide the default text when CSS is applied (e.g. when you are using a background image and don’t need text) but it will keep the page accessible for people have CSS turned off and screen readers.
• The “#top-search form” has the display value of “none” so the search form is initially hidden.

The Javascript

Finally we reach the part where it all gets pulled together and we harness the power of jQuery. This javascript can go in the HTML script tags we prepared earlier or, a better practice, is to put it in it’s own JS file and include it.

$(document).ready(function(){	
	$('#searchtoggle').click(function () {
		$('#top-search form').slideToggle(300, function(){
			$('#searchtoggle').toggleClass('up');
		});
        });
 
	$('#top-search .box').focus(function () {
		if($(this).val() == 'Search...') $(this).val('');
        });
	$('#top-search .box').blur(function () {
		if($(this).val() == '') $(this).val('Search...');
        });
});

This first part here is where we use jQuery’s default slideToggle function to slide the “#top-search form” up and down when we click the #searchtoggle link. We also use the callback functionality to toggle the CSS class up on the #searchtoggle link. As we mentioned above this is how we use CSS to switch which way the arrows are pointing.

The second part of the jQuery here is simply to clear and populate the search box with default text if it is empty. This part is not required.

Conclusion

So there we have our jQuery Dropdown Search Panel. Feel free to use this code wherever you want in your projects. I hope you can see how some relatively simple jQuery and CSS can produce some cool results and add that extra punch to your websites. If you have any comments or constructive criticisms please let me hear them in the comments below.

View Demo | Download Source

Update

14th May 2009 – I’ve updated the CSS and HTML code to fix the bug that seemed to be happening in Chrome and Safari when you toggled the search panel on subsequent occasions the search box would move to the right.

URL: love-icon.com/
Features: Icon inspiration gallery built on Wordpress using custom fields.

LoveIcon is an icon inspiration gallery/resource site for anyone who has an interest in beautiful icons. Recently I was aware that there was loads of CSS galleries but I had only ever seen a few Icon galleries. So I decided to make LoveIcon. I’m hoping the site will fill up with the worlds most amazing icon designs from the best designers around the world.

Why not head on over and check it out, or help me out by submitting an icon suggestion. So remember, if you see any amazing icons head over to LoveIcon and tell the world about them.

They have written a an addition to their Digg User Interface library called DUI.Stream to implement it. Specifically, DUI.Stream opens and reads multipart HTTP responses piece-by-piece through an XHR, passing each chunk to a JavaScript handler as it loads. This will then allow developers to drastically improve the speed of uncached page loads by bundling most of their resources into a single HTTP request, with a single time-to-first-byte and no request throttling by the user agent.

There are two demo’s you can view at the moment (remembering this is still in alpha development). However the demo that handles images is particularly impressive. (IE doesn’t seem to play nice). Demo1, Demo2.

If you are interested you can find out more about MXHR and the DUI.Stream on Digg’s blog post.

<?php
$monthNum = 5; 
$monthName = date("F", mktime(0, 0, 0, $monthNum, 10)); 
echo $monthName; //output: May
?>

Enjoy.

So I’m selling the site on Sitepoint.com. If you would consider aquiring the site then please go and check out the auction, and if you know of anyone else that might be interested then please spread the word. It would be much appreciated.