What is A Konami Code?
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:
jGrowl is a nifty little jQuery library that creates unobtrusive messages in the browser. It works in a similar way to Growl on Mac OS X.
It enables you to create great looking notifications from your website without it getting in the way. There are different styled examples including the iPhone notifications design. You can set the time delay on the notification staying on the screen or if you want it to stay. The position of the notification can also be set and an animation when loading in the notification.
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).
jGrowl Options:
I have included the options for use with jGrowl below, but these can also be found on the plugin site.
| Option Name: | Default Value: | Explanation: |
|---|---|---|
| header | empty string | Optional header to prefix the message, this is often helpful for associating messages to each other. |
| sticky | false | When set to true a message will stick to the screen until it is intentionally closed by the user. |
| glue | after | Designates whether a jGrowl notification should be appended to the container after all notifications, or whether it should be prepended to the container before all notifications. Options are after or before. |
| position | top-right | Designates a class which is applied to the jGrowl container and controls it’s position on the screen. By Default there are five options available, top-left, top-right, bottom-left, bottom-right, center. This must be changed in the defaults before the startup method is called. |
| theme | default | A CSS class designating custom styling for this particular message. |
| corners | 10px | If the corners jQuery plugin is include this option specifies the curvature radius to be used for the notifications as they are created. |
| check | 1000 | The frequency that jGrowl should check for messages to be scrubbed from the screen. |
| life | 3000 | The lifespan of a non-sticky message on the screen. |
| speed | normal | The animation speed used to open or close a notification. |
| easing | swing | The easing method to be used with the animation for opening and closing a notification. |
| closer | true | Whether or not the close-all button should be used when more then one notification appears on the screen. Optionally this property can be set to a function which will be used as a callback when the close all button is clicked. |
| closeTemplate | × | This content is used for the individual notification close links that are added to the corner of a notification. |
| closerTemplate | <div>[ close all ]</div> | This content is used for the close-all link that is added to the bottom of a jGrowl container when it contains more than one notification. |
| log | function(e,m,o) {} | Callback to be used before anything is done with the notification. This is intended to be used if the user would like to have some type of logging mechanism for all notifications passed to jGrowl. This callback receives the notification’s DOM context, the notifications message and it’s option object. |
| beforeOpen | function(e,m,o) {} | Callback to be used before a new notification is opened. This callback receives the notification’s DOM context, the notifications message and it’s option object. |
| open | function(e,m,o) {} | Callback to be used when a new notification is opened. This callback receives the notification’s DOM context, the notifications message and it’s option object. |
| beforeClose | function(e,m,o) {} | Callback to be used before a new notification is closed. This callback receives the notification’s DOM context, the notifications message and it’s option object. |
| close | function(e,m,o) {} | Callback to be used when a new notification is closed. This callback receives the notification’s DOM context, the notifications message and it’s option object. |
| animateOpen | { opacity: ’show’ } | The animation properties to use when opening a new notification (default to fadeOut). |
| animateClose | { opacity: ‘hide’ } | The animation properties to use when closing a new notification (defaults to fadeIn). |
I had a problem on a site whereby the forms were designed so that the labels were essentially inside the text inputs. I found this looked nicer as it was less all over the place and the information of what needed to be entered in the field (e.g. email address) was easy to make out. I made the form so that when you clicked in the field, it cleared out the input. The problem here is that you now don’t know what needs to go in there. You may have lost concentration for a second and come back to the room adn thought @Was that email address or first name that needed to be entered here?’
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.
It’s the little things on sites that often make you want to return. I am a massive fan of sites that feel light and free. Where when you click on things, it does things you don’t always expect or aren’t programmed in your mind to accept will happen. Things where you think “That’s a nice touch, why didn’t I think of that?”
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…
For a long time I have been bothered by the fact that to getting a nice transparent effect on PNGs working in IE6 doesn’t work. It leaves a nasty grey background to the image where in Firefox you would see through to the background.
Recently after a quick search around, I found a solution to all my problems in the form of a PNG fix. I wanted to use PNGs to create image links on a site. Having one that I could overlay on differing backgrounds was going to be a bonus and would save a lot of time. The design also had a dropdwon menu with a transparent gradient on it. It needed to work in all browsers as this was part of the specification, so I started searching Google for answers.
The very first thing that came up in my search seemed to have the answer I needed. A javascript file that sorted the probelm for me.
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.
We have all seen favicons grow in use so much in the last few years. Even animated favicons are being used more and more. But while using my iPhone today, I noticed that you can save a bookmark of a website from Safari to your home screen. That’s pretty cool, but then I noticed there was also the little icon that came up as a preview.
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.
What is FPDF?
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
On 03.11.09, In Adobe Flex, by eggChops
What is Adobe Flex?
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.
bethemiddleman.com is a site that myself and a couple of colleagues are working on. The idea is to cut out the middle man and sell/rent out your home yourself or to advertise that you have a room for rent in a shared house. So if you wish to sell your house privately and without the help of an estate agent, this is gonna be the place to go!
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…
