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

OptusZoo is a successful website in its own right from an established telecommunications provider. It aggregates content from a vast number of sources and combines it with its own unique content, providing it to visitors with an easy to navigate and personalize interface.

I was called into this project to offer technical support on optimization tasks. The goal was for it to be as portable and extensible, as a web platform, as possible. The back-end side of this was already handled by the stellar back-end team and I was assigned the front-end side.

An overhaul reorganizing of the template folder was required, bringing the file structure more close to MVC principals. In addition, the underlying script and configuration files were moved in a central location, which made possible the re-use of the same code by many instances of the platform.

Website: http://www.optuszoo.com.au/

Available on both online and mobile platforms, inSing is a one-stop destination for the Singapore audience that provides all the essential day-to-day information as well as comprehensive up-to-date coverage on local, international and entertainment news, events listings, food reviews and shopping deals.

(click here to visit the website)

I had a catalyst role on this project as the lead front-end designer. My duties included for the development side: cross-browser CSS, JavaScript programming with jQuery, the creation of a custom template engine using JSTL on a Java environment. In addition I had administration duties as I was managing a front-end team of 5.

The specifications for this website where strict but with persistence and dedication the end result met them in an almost ideal fashion. It is worth noting that the mobile site we created mirrors almost all of the content the website provides, which must make it one of the biggest mobile sites out there on a global scale.

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.

My long awaited portfolio for my flash-related work is online.

(click here to visit the website)

It’s using my very own KISSCMS as a back-end and a collection of PHP, JavaScript and Flash widgets running on the website along with it.

For the visual side, I wanted something minimalistic, and flashy cocky kind of way. I think my “mad scientist look here gives the final touch in that regards