Mika Tuupola

Next two days I will be visiting Internet World exhibition in London. Never been there before So I do not know what to expect. Speaker lineup looks ok. I really hope speakers stay away from giving sales speeches for their own companies.

Anyway I had a point too. New Tallinn airport is really cool. As usual there is free WiFi everywhere. This time there was a boilerplate ad. I do not know if it is the brand, but I did not feel offended by this ad. It was Skype Jobs.

Judge for yourself. It just gives you warm and fuzzy feeling.

Read the rest of this entry

Eturundus! seminars organized by Altex marketing keep getting better and better. Next one will be held 7th of may at Estonian national library. This time all speakers are from UK. Thus the name E!UK.

Participation fee is is 2500 EEK or 160 EUR per person. Discount for groups of four. Since Tallinn is only 80 kilometers from Helsinki it should be easy for Finnish digiprofessionals to pay a visit to E!UK. Hey, it’s only two hours with a boat…

All presentations will be held in English. They will provide live translation for those who speak only Estonian.

Speaker lineup

• Sam Michel, MD of Chinwag “Digital Marketing Opportunities in the UK for Estonians”

• Marcel Udo, European MD of Eyewonder “The Future of Banner Advertising and Rich Media”

• Craig Hanna, Training Director, e-consultancy “The Atomised Web”

• Laura Bambach, Head of Art, Glue London and Co-Founder SheSays “Digital creativity and collaboration”

• Jon Bains, Founder, Lateral “The People vs. The Brand”

• Alastair Cole, Interactive Production Director, Golley Slater Digital “Swimming Against The Tide: Information Architecture and UI Design”

I will definitely be there.

Related entries: Eturundus! 8 – This Time at KUMU, Eturundus! 6 – The Big Picture, Eturundus! 4 by Altex Marketing, Notes from Eturundus! 3 – Rok Hrastnik

Interesting events this week.

Amazon

Amazon EC2 gets static ip addresses.

The Elastic IP Addresses feature gives you more control of the IP addresses associated with your EC2 instances. Using this new feature, you use the AllocateAddress function to associate an IP address with your AWS account. Once allocated, the address remains attached to your account until released via the ReleaseAddress function.Separately, you can then point the address at any of your running EC2 instances using the AssociateAddress function.The association remains in place as long as the instance is running, or until you remove it with the DisassociateAddress function.

jQuery

Nick Kallen went wild and created relational database with jQuery and HTML tables- .

Today I was thinking aloud about Tree Regular Expressions and how they might make a nice query language for document databases like CouchDB. Someone pointed out that CSS3 selectors might make a great concrete syntax for this. One thing lead to another and I thought, why not build a relational database in HTML? So I did. I even got inner joins working.

Read the rest of this entry

In the heels of autogrow textarea comes next custom input for Jeditable. This time we will use markItUp! universal markup editor by Jay Salvat.

If you are not familiar with Jeditable custom inputs read the introduction. Also see autogrow and timepicker tutorials.

If you are just looking for the code download it here.

Creating custom input

Throughout the tutorial we will be using following code to trigger Jeditable. Note variable called markitupHTML. It holds configuration of used markItUp! tagset. In this example I use slightly modified HTML tagset. For more information on tagsets see markItUp! documentation.

$(".edit").editable("http://www.example.com/save.php", { 
    type      : "markitup",
    submit    : 'OK',
    cancel    : 'Cancel',
    tooltip   : "Click to edit...",
    onblur    : "ignore",
    markitup  : markitupHTML
});

Again we start by adding custom input type called markitup.

Read the rest of this entry

Previously i showed you how to create inline timepicker for Jeditable. This time we will create autogrowing textarea. This custom input will adjust its height while you type. Code uses excellent Autogrow jQuery plugin by Chrys Bader.

If this is your first encounter with Jeditable custom inputs you might want to read an introduction to them.

If you are just looking for the code download it here.

Creating custom input

Throughout the tutorial we will be using following code to trigger Jeditable.

$(".edit").editable("http://www.example.com/save.php", { 
    type      : "autogrow",
    submit    : 'OK',
    cancel    : 'Cancel',
    tooltip   : "Click to edit...",
    onblur    : "ignore",
    autogrow : {
        lineHeight : 16,
        maxHeight  : 512
    }
});

We start by adding custom input type called autogrow.

Read the rest of this entry

This weeks interesting stuff as seen in the Intterwebs.

jQuery

Jay Salvat rewrote jTagEditor and published it with new name:

markItUp! is a JavaScript plugin built on the jQuery library. It allows you to turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system can be easily implemented.

Janis Skarnelis came out with FancyBox.

Inspired by many other lightbox-like tools, now made kinda different image zooming script for those who want something fresh. It`s powered by great javascript library – jQuery, tested with IE6, IE7, Firefox.

iPhone

There is iPhone web SDK after all. You just need to pay 99USD to register.

If you head over to the iPhone DevCenter (registration required) you will find a video titled “iPhone SDK for Web Developers” that goes into detail.

When you watch it you will see a ton of great stuff:

Read the rest of this entry

Last week Estonian business paper Äripäev made a small research. Their journalist made an online registration to test drive a car. Only three car dealers out of seven replied.

Response from those who failed to answer? “We had some technical problems.”

Before reading further I should mention that Amserv Auto mentioned in this post is our client.

Who answered and who did not?

Out of seven dealers contacted following replied.

Read the rest of this entry

You can now add some oomph to your Lazy Loaded images. New effect parameter accepts any jQuery effect. When lazy image is loaded plugin will make it appear using chosen effect. Obviously effects such as fadeOut wont work. Use only effects which make image appear, not disappear.

$("img").lazyload({
    placeholder : "img/grey.gif",       
    effect      : "fadeIn" 
});

To see code above at work, check fadein demo. Are there any other features you would like to see? Leave a comment.

Related entries: Delayed Loading of Images, Lazy Load Sideways, Preload Images Sequentially With jQuery

Finalists of Grand One ‘08 were announced few days ago. Comparing to finalists of 2006 code quality is getting better but there is still lot of room for improvement.

Table below lists finalists from Best B2C service, Best B2B service and Best infodesign categories. Flash sites were left out. Two interesting numbers are listed.

• Number of validation errors on frontpage.
• Percentage calculated by dividing number of lines of html code with number of validation errors.

Lines of code for each site was calculated by executing the following on commandline:

>lynx -source http://www.example.com/ | wc

Most validation errors in one page

This years winner has amazing 301 validation errors. Award goes to Valve and Plenware produced kauppalehti.fi. Shared second place goes to TietoEnator, Avarko, QBrick produced ClassicLive. and Elisa Verkkokauppa by Mainostoimisto Ego (hey guys, what happen!?). Both sites have 113 validation errors. Second place goes to TietoEnator, Avarko, QBrick produced ClassicLive with 113 validation errors. YLE’s inhouse production yle.fi receives third place with 100 errors.

Elisa Verkkokauppa was fixed few hours after publishing this. Apparently backend coder had forgot to close <img> tags. It fully validates so I am taking away the second prize. (Yes, I used to work in EGO. Yes, I still work in Taivas Group.)

Read the rest of this entry

Inline editing is not only limited to text and textarea inputs. In this tutorial you will learn how to make inline timepicker with JavaScript. We will be using the usual tools: jQuery and Jeditable.

Before continuing you might be interested in reading introduction to custom input types for Jeditable.

Available methods for creating custom input

When creating custom input type you want to define one or several of following methods. None of them are mandatory.

$.editable.addInputType('example', {
    element : function(settings, original) { },
    content : function(string, settings, original) { },
    buttons : function(settings, original) { },
    submit  : function(settings, original) { },
    plugin  : function(settings, original) { }
});

All methods receive two parameters. Settings is Jeditable settings hash. Original is the original element which was clicked. Method content() also receives third parameter string which is the value input should be set to. Inside all methods this represents the form.

For this example we will be using three methods.

Read the rest of this entry

Web application movement is growing in Baltic states. Biggest event in near future will be Barcamp Baltics 2008. It is held 8-10 February in Riga. Barcamp describes itself the following way:

Barcamp is a unique international unconference on new media, blogs, podcasts, social networking, citizen journalism, web 2.0, open source and everything else that is connected with it. Unconference includes open presentations, workshops and workgroups; everything is held by the participants themselves.

Other than Barcamp Jüri Kaljundi has been organizing OpenCoffee Club in Tallinn for a while. I have always had some lame excuse not to attend. Next event will be 6. March. That one I will attend. Now when it is said public I cannot have any excuses…

Several people have asked me to add timeout option to Lazy Load plugin. As before, only images inside viewport would be loaded and page will come to ready state faster. However browser would load rest of the images automatically after specific amount of time.

I do not think it is necessary to add another configuration option for it. It all can be done with few lines of JavaScript.

Custom events

By default Lazy Load binds to scroll event. When window is scrolled plugin checks if any new images have become visible. For this case we want to use something different. We could use any of the normal jQuery events such as click or dblclick. But lets invent our own event. We will name it sporty.

$(document).ready(function() { 
    $("img:below-the-fold").lazyload({
        placeholder : "img/grey.gif",
        event : "sporty" 
     });
});

Read the rest of this entry

Green White Christmas is Toyota Baltics’ this year christmas greeting. Partners who received the email can plant their own tree into virtual forest. Trees will grow everyday until new years eve.

You can test how it works with demo. Note that demo trees are not saved to database.

Site is built with Ruby on Rails and uses several jQuery plugins: pngfix, form, hoverintent, cookie and last but not least UI.

Frontend coders have a life lasting problem. How to explain art director file inputs can not be styled? File Style to the rescue! It is a jQuery plugin which enable you to do just that. Style file inputs.

Code is inspired by work of Shaun Inman with one main difference. This version mimics vanilla file input by showing what file user has chosen.

How does it work?

Plugin wraps vanilla file input with div. This div has button as background image. Image button is aligned with file inputs browse button. File input is then hidden by setting opacity to zero. Chosen file is shown in normal text input which mimics file input. This text input also inherits file inputs class. Use this class to style the text input.

Read the rest of this entry

Alert! Alert! Another boring new release is out blog entry ahead. If you are bored already go ahead and download latest (1.5.0 at time of writing) Jeditable source, minified (recommended) or packed.

More info and should-be-better documentation at project page.

What is new or changed?

• Added placeholder parameter. This can be html on plaintext string. It will be shown when editable element is empty.
• Returned JavaScript is now executed. Allows us to do tricks like returning <script>alert(‘Saved!’)</from> from the save script.
• Hacks which supported old getload and postload parameters are now removed. Use loadurl and loadtype instead.
• Callback should now be given in options hash not as third parameter.

Usage of new or changed options below:

 $(".editable").editable("http://www.example.com/save.php", {
     placeholder : "Click me to edit",
     loadurl : "http://www.example.com/load.php",
     loadtype : "POST",
     callback: function(value, settings) {
         console.log(this);
         console.log(value);
         console.log(settings);
     }
 });

Thanks

Thanks to Ole Laursen, Dylan Verheul and Mariano Iglesias for providing patches and ideas!