“…oh what could be better, than a nice whistle wetter…”
“…oh what could be better, than a nice whistle wetter…”
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
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:
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…
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:
| Shortcut | Action |
|---|---|
| Delete | Clear contents selected |
| Down Arrow | Move selected layer down by one pixel |
| End | Move to the end of the current line |
| Enter | Create a New Paragraph |
| F1 | Using Dreamweaver Help Topics |
| F10 | Show/Hide Code Inspector |
| F11 | Show/Hide Assets Panel |
| F12 | Preview in the Primary Browser |
| F2 | Rename selected file |
| F2 | Show/Hide Layers Palette |
| F3 | Find next or Find Again |
| F5 | Refresh Design View and in site menu |
| F8 | View site files |
| F9 | Show/Hide Tag Inspector |
| Home | Move to the start of the current line |
| Left Arrow | Move selected layer to the left by one pixel |
| Page Down | Moves the active screen down |
| Page Up | Moves the active screen up |
| Right Arrow | Move selected layer to the right by one pixel |
| Tab | Move to next cell- or add a new row if in the last cell |
| Up Arrow | Move selected layer up by one pixel |
| Alt F1 | Show/Hide the Answers Palette |
| Alt F12 | Debug in Primary Browser |
| Alt F4 | Close Dreamweaver |
| Alt F5 | Refresh remote pane |
| Alt F8 | View Site map |
| Alt F9 | Show/Hide Timeline Palette |
| Alt Left Arrow | Select previous frame or framset |
| Alt Right Arrow | Select next frame or framset |
| Alt Up Arrow | Select Parent Frameset |
| Shift Delete | Cut selected item |
| Shift Down Arrow | Select a line downwards |
| Shift End | Select everything from the cursor to the end of the line |
| Shift Enter | Insert a Line Break |
| Shift F1 | Reference for selected Tag |
| Shift F10 | Show/Hide History Palette |
| Shift F11 | Show/Hide CSS styles |
| Shift F12 | Preview in the Secondary Browser |
| Shift F2 | Show/Hide Frames Palette |
| Shift F3 | Show/Hide Behaviours Palettes |
| Shift F5 | Refresh local pane |
| Shift F6 | Validate HTML Markup |
| Shift F7 | Check Spelling |
| Shift F8 | Check selected links |
| Shift F9 | Open Snippets Panel |
| Shift Home | Select everything from the cursor to the beginning of the line |
| Shift Insert | Paste contents of the clipboard |
| Shift Left Arrow | Select one character to the left |
| Shift Page Down | Select about a screen view downwards |
| Shift Page Up | Select about a screen view upwards |
| Shift Right Arrow | Select one character to the right |
| Shift Tab | Move to previous cell |
| Shift Up Arrow | Select a line upwards |
| F4 | Hide or Reveal Palettes. This is a toggle switch. |
| Ctrl ‘ | Switch between Code View and Design View |
| Ctrl ‘ | Balance Braces |
| Ctrl – | Zoom out of site map |
| Ctrl [ | Select Parent Tag |
| Ctrl ] | Select Child |
| Ctrl ++ | Zoom in to Site Map |
| Ctrl 0 | Change formatting to None |
| Ctrl 1 | Apply Heading style 1 |
| Ctrl 2 | Apply Heading style 2 |
| Ctrl 3 | Apply Heading style 3 |
| Ctrl 4 | Apply Heading style 4 |
| Ctrl 5 | Apply Heading style 5 |
| Ctrl 6 | Apply Heading style 6 |
| Ctrl A | Select All |
| Ctrl A | Select the whole table- with cursor within the table |
| Ctrl Arrow Keys | Resize layer by one pixel in relevant direction |
| Ctrl B | Embolden selected text |
| Ctrl Backspace | Delete the previous Word |
| Ctrl C | Copy selected item |
| Ctrl C | Copy selected text or File |
| Ctrl D | Duplicate File |
| Ctrl Delete | delete the next word |
| Ctrl Down Arrow | Go to the next paragraph |
| Ctrl E | Insert Tag |
| Ctrl End | Move to end of Code |
| Ctrl F | Find selected text |
| Ctrl F1 | Using Coldfusion Help topics |
| Ctrl F10 | Show/Hide Bindings Panel |
| Ctrl F11 | Show/Hide HTML styles |
| Ctrl F2 | Hide/Show the Toolbar |
| Ctrl F3 | Show/Hide the Properties Panel |
| Ctrl F5 | Edit Tag in Design View |
| Ctrl F6 | To turn Layout Mode On or Off |
| Ctrl F7 | Show/Hide Components |
| Ctrl F8 | Check links Sitewide |
| Ctrl F9 | Show/Hide Server Behaviours |
| Ctrl G | Go To |
| Ctrl H | Replace |
| Ctrl Home | Move to top of Code |
| Ctrl I | Italicise selected text |
| Ctrl J | Page Properties |
| Ctrl L | Create hyperlink on the selected object |
| Ctrl Left Arrow | Go to previous Word |
| Ctrl M | Insert a new row above the current row |
| Ctrl N | Creates a New Document |
| Ctrl O | Open an HTML file |
| Ctrl P | Print Code or print Design View |
| Ctrl Q | Close Dreamweaver |
| Ctrl R | Live Data View |
| Ctrl Right Arrow | Go to Next word |
| Ctrl S | Save active file |
| Ctrl Spacebar | Show Code Hints |
| Ctrl Spacebar | Defer table update |
| Ctrl T | Open Quick Tag Editor |
| Ctrl Tab | Toggle between open documents from left to right |
| Ctrl U | Preferences (Edit-Preferences) |
| Ctrl Up Arrow | Go to the previous paragraph |
| Ctrl V | Paste contents of the clipboard |
| Ctrl V | Pastes the copied text or File |
| Ctrl W | Close the active open file |
| Ctrl X | Cut selected item |
| Ctrl X | Cut selected text or File |
| Ctrl Y | Redo previously undone action |
| Ctrl Z | Undo previous action |
| Ctrl + Alt A | Insert a Named Anchor |
| Ctrl + Alt B | Toggle Breakpoint |
| Ctrl + Alt F12 | Debug in Secondary Browser |
| Ctrl + Alt G | Show/Hide Grid |
| Ctrl + Alt I | Insert an Image |
| Ctrl + Alt M | merge selected cells |
| Ctrl + Alt R | Show/Hide Rulers |
| Ctrl + Alt S | Split selected cell |
| Ctrl + Alt T | Insert a Table |
| Ctrl + Shift - | Delete the current column |
| Ctrl + Shift [ | Decrease Column Span |
| Ctrl + Shift ] | Increase Column Span |
| Ctrl + Shift < | Outdent Code |
| Ctrl + Shift > | Indent Code |
| Ctrl + Shift 1 | Align selected layers to the left |
| Ctrl + Shift 3 | Align selected layers to the right |
| Ctrl + Shift 4 | Align selected layers to the top |
| Ctrl + Shift 6 | Align selected layers to the bottom |
| Ctrl + Shift 7 | Make selected layers the same width |
| Ctrl + Shift 9 | Make selected layers the same height |
| Ctrl + Shift A | Insert a new column to the left of the current one |
| Ctrl + Shift B | Add selected items to library |
| Ctrl + Shift C | Copy HTML whilst in Design View |
| Ctrl + Shift D | Get selected files or folders from Remote Site |
| Ctrl + Shift End | Select from cursor to end of Code |
| Ctrl + Shift F | Open results and Search panel |
| Ctrl + Shift F10 | Show/Hide Databases Panel |
| Ctrl + Shift F11 | Open results and Site Reports panel |
| Ctrl + Shift F12 | Open results and FTP log panel |
| Ctrl + Shift F5 | Open results and Server Debug panel |
| Ctrl + Shift F6 | To toggle between open documents in Standard View |
| Ctrl + Shift F7 | Open results and validation panel |
| Ctrl + Shift F8 | Open results and target browser check panel |
| Ctrl + Shift F9 | Open results and link checker panel |
| Ctrl + Shift G | Server Debug |
| Ctrl + Shift H | Show/Hide Head Content |
| Ctrl + Shift Home | Select from cursor to top of Code |
| Ctrl + Shift I | Show/Hide Visual Aids |
| Ctrl + Shift J | Compress selected object tag |
| Ctrl + Shift K | Link to existing file in Site Map |
| Ctrl + Shift L | Remove hyperlink on the selected object |
| Ctrl + Shift M | Delete the current row |
| Ctrl + Shift N | Create new file |
| Ctrl + Shift N | Link to new file in Site Map |
| Ctrl + Shift O | Open a document in a Frame |
| Ctrl + Shift P | Change formatting to Paragraph Format |
| Ctrl + Shift R | View Live Data |
| Ctrl + Shift R | View as root |
| Ctrl + Shift S | Save As |
| Ctrl + Shift Spacebar | Insert a Non Breaking Space |
| Ctrl + Shift Tab | Toggle between open documents from right to left |
| Ctrl + Shift U | Put selected files or folders to Remote site |
| Ctrl + Shift V | Paste HTML whilst in Design View |
| Ctrl + Shift W | Close ALL |
| Ctrl + Shift Z | Redo previously undone action |
| Ctrl + Shift + Alt C | Centre align current paragraph |
| Ctrl + Shift + Alt D | Check out selected files or folders |
| Ctrl + Shift + Alt F5 | Connect if disconnected or disconnect if connected |
| Ctrl + Shift + Alt G | Snap to Grid |
| Ctrl + Shift + Alt J | Align Justify current paragraph |
| Ctrl + Shift + Alt L | Left align current paragraph |
| Ctrl + Shift + Alt N | Create new Folder |
| Ctrl + Shift + Alt O | Open selection |
| Ctrl + Shift + Alt R | Right align current paragraph |
| Ctrl + Shift + Alt U | Check in selected files or folders |
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.
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!");
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).
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). |
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.
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.
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.
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.
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.
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.
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.
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.