Have a little play and enjoy here: hakim.se/experiments

The Konami Code (or Konami Command) is essentially a cheat code that cropped up on a lot of Konami’s games. It was first used in the mid 80’s on a game called Gradius which was released on the NES.

The Konami Code is used by pausing the game and then hitting the following buttons:

You can find a full list of games that used the Konami Code here: http://en.wikipedia.org/wiki/List_of_Konami_code_games

Konami Code Sites

The list of sites that use the Konami Code can be found be cracking the code on this site: http://konamicodesites.com/. But if you’re feeling lazy and can’t be bothered, here is the list so far:

How to initiate jGrowl

Starting using jGrowl is pretty straight forward, simply include the js files and then call jGrowl as you would any jQuery class you have plugged in. The most simple example of how to do this is:

$.jGrowl("Hello world!");

Further resources

More comprehensive information on how to use and extend jGrowl can be found at Stan Lemon’s project site (http://stanlemon.net/projects/jgrowl.html).

• Download jGrowl 1.1.2
• jGrowl’s jQuery Plugin Page
• Example Usage and Samples

jGrowl Options:

I have included the options for use with jGrowl below, but these can also be found on the plugin site.

I came up with a solution to the problem so that when you click off the input, if you have not entered any information, it puts the label back in. Its quite simple, but a nice little touch for usability. Here is how to do it using  jQuery…

Theres the standard jQuery file to include and a couple of functions I wrote using jQuery. One for the focus event (when you click in the input) and one for the blur event (when you click away from the input). Basically it uses a title on the input that is the same as the value to begin with. This is saved in a variable and once the input is focussed on and then the input is cleared so you can type away.
When you move away from the input, if nothing has been entered, it will replace it with the original value that was saved in the variable from the title. kind of like I have noticed a lot of forms on Facebook have started doing to clear and replenish unentered fields.

Below is the javascript code I use when doing this:

<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript”>

$(document).ready(function(){

var clearMePrevious = ”;

// clear input on focus
$(’.clearMeFocus’).focus(function()
{
if($(this).val()==$(this).attr(’title’))
{
clearMePrevious = $(this).val();
$(this).val(”);
}
});

// if field is empty afterward, add text again
$(’.clearMeFocus’).blur(function()
{
if($(this).val()==”)
{
$(this).val(clearMePrevious);
}
});
});

</script>

And here is the way I code the text inputs.

<input type=”text” name=”email” title=”Enter your email” value=”Enter your email” class=”clearMeFocus” />

The class ‘clearMeFocus’ is used so you know which fields on a form want to use this feature and also to grab the title and value from it. (I guess you don’t have to use that to get the info though…)

I have also put up an example of the jQuery functions and the form in action. It’s a simple form, but you get the idea…it can be found here.

So onto my point, here is a little touch that I often add to sites that I like to see happen. It’s simply having a ‘Back to top’ button at the foot of the page that once clicked, scrolls you up with an animation rather that a page refresh or a straight jerk to the top again.
Using the jQuery scrollTo plugin, you can achieve, what I see to be, a sweet scrolling animation.

Implementing scrollTo to scroll to top using jQuery

I’ll briefly outline the steps you will need to take to implement this, but more documentation and some better example can be found on the plugin site.

1. Download the js file that you will need and stick it in your site somewhere.
2. Include the js file into the page you want it on.
3. Initialise the function, so that when the link is clicked, it will perform the animation you want, with the speed you set and where you want it to scroll to. Then add the link you want to move you to the top.
Here is an example of the code you might use to do this:

<script type=“text/javascript” src=“js/jquery.scrollTo.js”></script>
<script type=“text/javascript”>
$(document).ready(function()
{
// scroll to top
$(’a.topOfPage’).click(function(){
$.scrollTo( 0, 500);
return false;
});
});
</script>

<a href=“#” class=“topOfPage”>Top of page</a>

Here I have used jQuery to initialise the function when the a link with the class ‘topOfPage’ is clicked.
Once this is clicked, it uses the scrollTo plugin to go to the top of the page (as I have used 0 for the position) and with a speed of 500 milliseconds.

Arguments accepted

scrollTo accepts the following arguments:

$.scrollTo( target, duration, settings );

Target can either be an element such as an id of an element (#elementName) or a class (.className) or simply the position on the page you want (’44′, ‘100px’, ‘+=30px’, etc).
Duration is the length of time in milliseconds that you want it to take to reach the destination.
Settings is basically a list of other parameters that you wish to pass to it, more information on these can be found here.

Example using scrollTo

An example of how I have implemented it in a site can be seen here. Just scroll down to the bottom and click the ‘Top’ link and it should scroll up nicely for you.

Like I said, it’s attention to detail like this on sites that I really like to see. You can take this how you like and use it to scroll up, down, across etc.
I’m going to be putting a lot of that into the making of a personal project Betheiddleman.com. Things like live validation, thickbox login boxes and more. So watch this space…

The site I got the fix from is http://homepage.ntlworld.com/bobosola/ and is worth checking out for more detail. I’ll briefly run through how to use the fix.

The main advantage of using PNGs is to get the alpha transparency going. There is also the option of two-dimensional interlacing which produces profressive display.
Adavantages of using a GIF are that they are more widelysupported. It also supports animation and everbody loves animated GIFs….right?

1. Download the png_fix file that can be found here.
2. Insert the code below into the page you want the PNGs fixing.
<!–[if IE 6]>
<script type=”text/javascript” src=”pngfix.js”></script>
<script type=”text/javascript”>
DD_belatedPNG.fix(’.png_bg’);
</script>
<![endif]–>
You can name the class inside the function call anything you like.
3. Then simple apply the class ‘png_bg’ to the element you want the transparency to work on. For example on an image <img src=’image.png’ alt=” class=’png_bg’ />

An example of the menu I did with the PNG fix can be found here on a work in progress site we are doing at 9xb. If you hover over ‘Venues’ in the main menu, you will see the dropdown in action. It also uses the fix on the semi-transparent overlay in the main box and on a few PNGs throughout.

I then wondered if it were possible to create a little icon like the favicon to put in place of that, much like the ones the apps have on there already. A quick google found that I could indeed do this….and here’s how.

1. Create a 57 x 57 png of the icon you want to be displayed and name it apple-touch-icon.png
2. Upload that to the root of your site much like you would a favicon.

Now when you navigate to your site on your iPhone and choose to ‘Add to home screen’ after a couple of seconds, there will be the icon you uploaded. What’s more it will automatically add the nice little corners and wipe to the icon for you How simple is that?

An example of what my site looks like saved to the iPhone can be seen to the right.

I came across thsi little gem while searching for a PHP class that allowed me to create PDFs on the fly using PHP. Basically, FPDF is a PHP class which generates PDF files using PHP. It is a free class and full documentation of its use and hw to use it can be found here.

With FPDF you can format a PDF in the same way that you would any PDF. There is support for header and footers, page breaks, images, colors and font-styling and page compression amongst other things.

FPDF works with PHP4 and PHP5.

The class is available for download from the FPDF site.

Once downloaded, put the class into site wherever you fancy and creating a PDF can be as simple as using the following code:

<?php
require('fpdf.php');

$pdf->AddPage();
$pdf->SetFont('Arial','B',16);
$pdf->Cell(40,10,'Hello World!');
$pdf->Output();
?>

Full documentation on how to use FPDF can be found on the main site at: http://www.fpdf.org/

Try it, you might like it

Flex is a highly productive, free open source framework for building and maintaining expressive web applications that deploy consistently on all major browsers, desktops, and operating systems.

Flex allows us developers to build and create intuitive, interactive, visual applications for the web and desktop. Exciting applications in Flex give the end user a more satisfying experience while browsing the site and also the owner of the site hopefully more profit.

Applications built with Flex run using Adobe Flash Player and can also be built to run on the desktop using Adobe AIR. This allows Flex applications to run consistently in all the major browsers and operating systems. With 98% of internet connected computers having Flash Player 9 installed, this creates a massive audience for these applications to be run.

What are RIAs?

Rich Internet applications (RIAs) are applications built for the web that have the features and functionality of traditional desktop applications. Users can sometimes get overwhlemed and confused when websites do not perform in the same way as the desktop applications they are so used to. RIAs allow users to use sites in this way, a more intuitive way that they are already used to.

Benefits of using RIAs and Flex

• Cross browser compatibility is one of the main benefits of using Flex. It means that the application will look the same in all major browsers without the hassle of making small changes that hinder the functionality and appeal of the site just to suit a certain browser (no names mentioned IE6!).
• It is capable of handling the most demanding, data-intensive applications while performing at desktop application speeds. So no more pages hanging leaving to you wonder if the order you placed has gone through!
• The installation footprint is smaller.
• Updates/upgrades to new versions can be automatic or transparent to the end user.
• Most RIA techologies allow the user experience to be consistent, regardless of what operating system the client uses.
• Users can use the application from any computer with an internet connection.
• The applications are richer allowing things like drag and drop functionality and sliders to update search options.
• The range of functionality is great. From small components such as stylish and impressive image viewers that can be plugged into existing websites to full-scale e-commerce sites solely built in Flex.
• More sophisticated and well designed RIAs will maintain the same look and feel as desktop applications which the user is already used to.
• Asynchronous communication. The client engine can interact with the server without waiting for the user to perform an interface action such as clicking on a button or link. This allows the user to view and interact with the page asynchronously from the client engine’s communication with the server. This option allows RIA designers to move data between the client and the server without making the user wait. Perhaps the most common application of this is pre-fetching data, in which an application anticipates a future need for certain data and downloads it to the client before the user requests it, thereby speeding up a subsequent response. Google maps uses this technique to load adjacent map segments to the client before the user scrolls them into view.
• Bandwidth can be reduced a great deal as these applications are more intelligent than standard websites. This means that requests by the user can be sped up creating a slicker and more productive web experience.

Integration with Adobe Air for Offline Applications

The Adobe Air client allows rich internet applications to be run on your desktop, in the same way that applications like Microsoft Word and Excel do. This creates more opportunity for creating exciting and useful offline or online applications.

Imagine having a personalised website editor specific to your website where you can resize and crop images for your site or edit content for its pages whilst on the train on your laptop on the way to work. Then once you get to work and have the laptop hooked up to the net, you can submit the changes and the website will be updated.

Will it take off?

I think that this technology is the way the internet should move. I can already see sites built in Flex cropping up all over the place. They are often the sites that I step back and think ‘this is a really great site’ and where you find yourself staying on the site for an extended period just to see certain functionality occur. What will it do next if I do this? What happens if I drag this here? Things like that. They encourage you to try things out that you expect to happen on desktop applications but not websites.

The benefits to using these RIAs are massive and can easily increase user experience and profit for the owner if implemented in the right way.

It is an area that I am personally taking time to learn as I believe it can prove useful to many of 9XB’s current and future clients.

Sites and Example Applications Built in Flex:

http://millionclouds.com/ – I love this site! It is just awesome…

http://examples.adobe.com/flex2/inproduct/sdk/flexstore/flexstore.html – An example from Adobe to showcase the possiblilites of Flex. If you go to Products at the top and then start using the filter on the left the phones will start moving around the place. The compare functionality is a useful tool too.

http://examples.adobe.com/flex3/devnet/configurator/Configurator.html#app=76d2&38ae-selectedIndex=0 – Another example from Adobe to show how you can use Flex to allow users to personalise and preview products online.

http://examples.adobe.com/flex3/devnet/dashboard/main.html – This is an example of how data can be laid out and displayed. Dragging the windows around and minimising/maximising them just as in a desktop application. All of the charts and graphs used are inbuilt components available in Flex.

http://www.wiiinston.com/ – This site is a site I built using Flex. It shows the simple yet effective transitions that can be accomplished.

Hold on tight….

The is currently a holding page set up (on the left) at bethemiddleman.com. Here you can view our Twitter feed, signup to receive updates on when the site is put live and any future progress before then.
You can also sign up as a beta tester, to have a proper good crack at breaking things and reporting any bugs back to us before the site goes live. So sign up and help us out!

Savings calculator…

We have plugged in a simple calculator gives you an idea of how much you could save when selling your house privately as oppsed to selling your house through an agency. This money is saved mainly from the agents fees and how much commission they will charge for the privilege.

Floaty light….

One aim of the site is to make things easy for the user when selling their property. But as it is the buyers and people wanting to rent/find a room who will be driving the site, the main focus will be on making the searching easy for them. Using the Google map API will help us a great deal, but also using technologies such as jQuery and AJAX should create a ‘light’ feel to the site and encourage the user to return.

We aim to cover all areas of people wanting properties, so will have a section for house buyers, prospective tenants looking for housing and people looking for single rooms in shared houses.

So keep an eye on things and the launch of the site which will be coming soon…