eggBlog - The noble ramblings of an eggChop

“…oh what could be better, than a nice whistle wetter…”

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:

Emo-what?

Emoji are picture characters that are very popular in the Japanese mobile market. One analyst even specifically cited the lack Emoji support as one of the factors contributing to slow sales in the Japan market…crazy, but true!

Originally meaning pictograph, the word literally means e “picture” + moji “letter”. The characters are used much like emoticons elsewhere, but a wider range is provided, and the icons are standardised and built into the handsets.

I read a blog recently on how to get the set of Emoji icons for the iPhone for free, so I thought I would share that…

How do I get my hands on these?

Simple, just follow the instructions below. Beware though that these only work from iPhone to iPhone, so people with other handsets will not benefit from this

1. Check your iPhone has firmware 2.2 or 2.2.1
2. Download the ‘Spell Number‘ app from the App Store.
3. Launch Speel Number and enter the following code 91929394.59.
4. Close the app without doing anything else.
5. Open Settings > General > Keyboard > International Keyboards >Japanese > Turn the Emoji “ON”
6. Now when you start writing a text message there should be a little globe there. Clicking on this globe opens up the Emoji icons.

There’s lots of icons on there (461 apparently), so enjoy!

Here are the chords for one of my favourite Kinks songs:

Am                                          C    G
There’s a crack up in the ceiling
Dm                                      F    Am
And the kitchen sink is leaking
Am                                      C   G
Out of work and got no money
Dm                                                 F   Am
A Sunday joint of bread and honey
Am                                      G F                                                               E7
What are we living for?       Two roomed apartment on the second floor?
Am                                G F                                                          E7
No money comin’ in,      the rent collector’s knockin’ trying to get in
A                                                       Dm                        E
We are strictly second class, we don’t understand
F                              E                            Am            G
Dead end! Why we should be in dead end street
F                              E                         Am          G
Dead end! People are livin’ in dead end street
F                                E                 Am           G
Dead end! I’m gonna die in dead end street
C                 F                          C                F
Dead end street (yeah!) Dead end street (yeah!)

Am                                 C      G
On a cold and frosty morning
Dm                                              F      Am
Wipe my eyes and stop me yawning
Am                                       C    G
And my feet are nearly frozen
Dm                                            F        Am
Boil the tea and put some toast on
Am                                    G F                                                               E7
What are we livin’ for?      Two roomed apartment on the second floor?
Am                                      G F                                                            E7
No chance to emigrate,      I’m deep in debt and now it’s much too late
A                                                                  Dm                  E
We both have to work so hard, we can’t get the chance
F                  E                           Am           G
Dead end! People live on dead end street
F                  E                                     Am           G
Dead end! People are dyin’ on dead end street
F                  E                                Am           G
Dead end! I’m gonna die on dead end street
C                 F                         C                 F
Dead end street (yeah!) Dead end street (yeah!)

Dead end! People live on dead end street
Dead end! People are dyin’ on dead end street
Dead end! I’m gonna die on dead end street
Dead end street (yeah!) Dead end street (yeah!)
Dead end street (yeah!) Head to my feet (yeah!)
Dead end street …

I was using Dreamweaver today as I do every day and after going through adding lots of paragraph tags manually I figured there should be a shortcut to enclose text in a <p> tag. I knew of quite a few already such as Ctrl + B to put content in a <strong> tag and Ctrl + G to go to a line you want.

After a quick Google, I found a list of many Dreamweaver shortcuts. Lucky for me there was one for enclosing text in a paragraph (Ctrl + Shift + P).

Below is the complete list I found:

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).

• 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.

Kuler is a new piece of software from Adobe. It allows you to create colour themes or view ones that have already been created by the Kuler community.

It is free to use online and can also be integrated into your usual Adobe design software (Illustrator, Photoshop, InDesign, Firework and Flash). Kuler is also available for download as a desktop application and runs using Adobe Air.

It’s a great way for people who aren’t as design oriented like myself to get a great looking colour scheme going. Once you have created your theme, you can save it for later use.

How does it work?

It works around a five colour theme where there is a base colour and four related colours. nce you have selected the base colour, you can choose how the other four are picked from the six ‘colour harmony rules’. You can also select custome colours where you just drag the pins around the colourwheel youself.
You can re-order the colours by dragging them around in a shuffling kind of way. There is also the option to select the hex values of the colours so you can use them in other programs etc. Or you can paste hex values in yourself and create a theme from one of those.
Basically any way you can think of creating a theme of colours, Adobe have thought of it in Kuler. There’s sliders, RGB values, hex values, CMYK and more. It’s all there.
Once you’ve created the theme, you can save it for later or publish it for everyone in the community to see.

Them’s the rules…

Adobe Kuler uses 6 colour rules that are taken from colour theory, these are: Analogous, Monochromatic, Triad, Complementary, Compound, and Shades. Selecting your base colour and then clicking one of these rules quickly creates a complimentary theme of some variety.

Creating themes from images

Kuler allows you to upload images or even select images from Flickr to create themes. Here you can create them using ‘Moods’. The Moods available for use are: Colorful, Bright, Muted, Deep, Dark, and Custom. These pick colours from the image that you have selected or uploaded.

Community Service

Adobe seem to be creating a great community here whereby you can login with your Adobe ID, share your themes, download themes, comment on themes, rate other peoples themes and search the masses of themes already on there.

Adobe Kuler can be found here: http://kuler.adobe.com/

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.