MAKE SITES .CC

So I was looking for a dead simple way to output my status from twitter to a webpage. Almost everyone does it these days and I thought it would be a piece of cake to find a ready-made solution. I searched, found a bunch of insightful (or not) scripts but none actually made the cut. They would be either too massive, supporting functions I didn’t need, or process things in a peculiar way which made me uncomfortable.

The better candidate did a simple cURL request but used SSL and returned the content from an XML. Why, why, why? Why use SSL when twitter is supposed to be public, and why use XML when you have the option to use a perfectly slimmed-down JSON instead?

It’s agreed that cURL can do the job nicely without the need of special programming. And you can have an additional layer of caching on the server-side along with the caching in JavaScript through the AJAX call to this script.

In it’s core – the script is only driven by a single request:

curl_setopt($ch, CURLOPT_URL, 'http://twitter.com/statuses/user_timeline.json' . $params );
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

This is guided by the following parameters – quite self-explanatory:

$config = array(
	'screen_name' => 'YOURTWITTERNAME', 
	'count' => '1', 
);

To flesh-out the text we want to present we do the following:

$data = json_decode( $response );
$text = $data[0]->{"text"};

Usage:

To contain this process so it doesn’t affect the loading time of the webpage it is better to inject it with an AJAX request. It is rather fluid how you’d want to do this (name the markup container whatever and style it in CSS however) but I chose the dead simple way (again):

<div id="twitter-status">
<script type="text/javascript">
$(document).ready(function() {
	$.get("twitter_status.php", function(data){$("#twitter-status").html(data);} );
});
</script>
</div>

This was used here, where you can see it in action: http://makis.tracend.com.au

Wish list:

The one major glitch with this simplistic approach is that it assumes that the latest tweet will always be a tweet – replies and mentions will probably not work and there is no “skip to next” function. Multiple tweets are also not supported. I also miss automatic linking but again I didn’t want to bloat the script with extra functions – for now… maybe an upscale version will come soon…

Download the Script

Version: 1.0
Language: PHP
File size: 1,39kb

Many website owners consider banners a good source of income and they strive to create the necessary traffic to be accepted by the more prestigious ad retailers.

On the down side these banners, magnificent as they may be, can make the website quite “heavy” and increase dramatically the loading times of the web pages. It would be ideal if there was a built-in feature by the ad servers that could delay showing the ads but I take this can be considered in the marketing circles more of an insult than a recommendation.

I had this problem with a website I was developing and I knew I had to find a solution, as performance was crucial. With some help from jQuery I happily found an elegant way that did the trick.

The general idea can be outlined in these steps:
1. Create the containers that host the banners empty
2. Inject and load the banners in a 1×1 iframe.
3. Copy the generated banner code to their intended containers.
4. Delete the dynamically created iframe and leave no trace.

To make this work you will need the containers of the banners in your markup, each assigned with a unique id. Additionally, you will need an extra page that will load the actual banner code, using the SAME container names.

When you have this, here is the JavaScript you need to insert in your pages:


/* Functions to load and show the banners post-load*/
function loadBanners(){
$("body").append('<iframe src="http://www/YOUR/ADS/PAGE" width="1" height="1" id="ads-container" frameborder="0" />');
}
function showBanners(){
var content= "";
var banners = ["top-banner","left-banner","right-banner"];
//loop through all the ids we have specified above to contain banners
for ( var i in banners )
{
// remove the unnecessary script tags (that initially load the banners) - WARNING: this may not apply for you
$('#ads-container').contents().find('#'+banners[i]+' script:lt(2)').remove();
// get the banner from the iframe
var content=$('#ads-container').contents().find('#'+banners[i]).html();
// place the banner code in their containers in the main page
$('#'+banners[i]).html(content);
}
// finally delete the container that loaded the ads
$('#ads-container').remove();

}


Replace:

• “http://www/YOUR/ADS/PAGE”, with the actual page where you have all your banner code.
• ["top-banner","left-banner","right-banner"], is an array containing all the ids of the containers you want to target.

Of course we need to trigger the first function the page loads…


$(document).ready(function() {
// finally load the banner ads for the page
loadBanners();
});


And then we need to trigger the second function when the ad page (in the iframe) loads. I’ll put in a sample code for the whole source code that contains the banner containers…


<html><body>
<div id="top-banner">[...BANNER CODE...]</div>
<div id="left-banner">[...BANNER CODE...]</div>
<div id="right-banner">[...BANNER CODE...]</div>
<script type="text/javascript"> $(document).ready(function() { showBanners(); }); </script>
</body></html>


And that’s it. Your pages are now free from the lagging of the banner code. Fortunately this solution does not rely on any specific ad provider and hopefully it will work for you whatever banners you use.

A CMS lightning fast to setup and easy to use – based on KISSMVC, the simple PHP MVC framework. The main goal was the creation of an environment to easily add new content on a website while lifting the unnecessary barriers of extending it, as found in most popular CMSs.

click here for a demo

Download the Script

Version: 0.1
Language: PHP
File size: 20,8kb

Numerous people are using WordPress for blogging and in many cases there are more than one authors on a website. It’s uncomfortably surprising that WordPress doesn’t support out of the box a category menu for each author separately.

I was looking for this feature online for my personal need but couldn’t find it on any plugin. To be exact I was using a modified version of another similar plugin but that was until version 2.3 where the database structure changed for WordPress and it simply stopped working.

As I saw it, it wasn’t worth fixing old, deprecated (and highly cluttered) code, and there weren’t any other solutions out there, so I decided to create a new plugin. Thankfully the new database and API made it as easy as I had hoped for.

I ended up with this plugin, that was created as a wrapper of the default category menu.

It is lightweight and can easily plug-in, plug-out. Furthermore, being an extension of the default category menu, means that none of the functionality (sorting, post count etc.) is lost. In fact it can be easily extended and could support future versions of the blogging platform for years to come.

Download the Script

Version: 1.0
Language: PHP
File size: 4,87kb

I worked on my friend Dylan Rhodes’ website called Reezle that just entered its public beta. Among other things I did the main navigation menu for the site. Since the website uses the Prototype-Scriptaculous combination it was logical to create this element with the existing libraries.

I eventually came up with a solution that was both elegant and efficient and I decided to release this script as open-source (with permission of course) as it can have many other implementations.

See an example here

The above is included in the archive, along with the Prototype library, and I suggest you use that as a basis for your application. The actual JavaScript routine for the menu is this:

var DropDownMenu = Class.create();
 
DropDownMenu.prototype = {
 
 initialize: function(menuElement) {
	menuElement.childElements().each(function(node){
		// if there is a submenu
		var submenu = $A(node.getElementsByTagName("ul")).first();
		if(submenu != null){
			// make sub-menu invisible
			Element.extend(submenu).setStyle({display: 'none'});
			// toggle the visibility of the submenu
			node.onmouseover = node.onmouseout = function(){
				Element.toggle(submenu);
			}
		}
	});
}
 
};

Download the Script

Version: 1.0
Language: JavaScript
File size: 29,6kb