Posted on

Notes on using HTML5 input type=search and the placeholder attribute

<input type=search> is one of the HTML5 additions to form input types. In theory you can just replace the old <input type=text> with the new type and browsers continue to work and the site is now more semantic. In practice working with type=search is not that simple.

First thing you probably want to do is to remove Webkit’s default, heavy styling. You do that by these CSS commands:

-webkit-appearance:textfield; -webkit-box-sizing:content-box;

I initially used the former, but after some odd width calculation issues I found out that latter is also needed to actually fully restore familiar type=text behavior.

Placeholder text is another wonderful addition to input elements (not just type=search). This replicates the common behavior of having the search field label within the field itself (until the user focuses the field). You add placeholder text by adding an attribute to the input element like this: placeholder=”search this site”.

To gracefully degrade, use Modernizr to detect a browsers with no support:

jQuery(function($) {
	if (!Modernizr.input.placeholder || navigator.userAgent.match(/opera/i)) {
		$('input[placeholder]').hint();
	}
});

Here I decided to replace native placeholder support on Opera, since there are no styling options for it, yet. The text is always in #7f7f7f, which was not an option, since the background was exactly that color.

To style placeholder text you need these rules:

input[type=search].blur{color:#ddd}
input[type=search]::-webkit-input-placeholder{color:#ddd}
input[type=search]:-moz-placeholder{color:#ddd}

You cannot combine those selectors, since the rule will stop working as expected. .blur is for browsers that do not support native placeholder behavior.

And here is the modified version of the plugin that adds placeholder behavior. To make it more HTML5 friendly, I basically just replaced the use of title attribute with placeholder attribute.

/**
* @author Remy Sharp
* @url http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/
* Modified to use placeholder attribute by Aki Björklund, https://akibjorklund.com/
*/
(function ($) {
	$.fn.hint = function (blurClass) {
		if (!blurClass) { 
			blurClass = 'blur';
		}

		return this.each(function () {
			// get jQuery version of 'this'
			var $input = $(this),

			// capture the rest of the variable to allow for reuse
			placeholder = $input.attr('placeholder'),
			$form = $(this.form),
			$win = $(window);

			function remove() {
				if ($input.val() === placeholder && $input.hasClass(blurClass)) {
					$input.val('').removeClass(blurClass);
				}
			}

			// only apply logic if the element has the attribute
			if (placeholder) { 
				// on blur, set value to placeholder attr if text is blank
				$input.blur(function () {
					if (this.value === '') {
						$input.val(placeholder).addClass(blurClass);
					}
				}).focus(remove).blur(); // now change all inputs to placeholder

				// clear the pre-defined text when form is submitted
				$form.submit(remove);
				$win.unload(remove); // handles Firefox's autocomplete
			}
		});
	};
})(jQuery);
Posted on

Kymmenen vuotta webiä tekemässä – mikä on muuttunut ja mikä ei?

Aika tarkalleen 10 vuotta sitten tänään aloitin ensimmäisessä alan työssäni. Päädyin sattumalta kesätöihin ja jäin sille tielleni. Vielä suurempi sattuma oli, että pääsin heti paikkaan ja seuraan, joka pystyi opettamaan paljon enemmän ja nopeammin kuin mikään koulu ainakaan tuohon aikaan. Se olikin hyvä, koska hädin tuskin osasin ohjelmoida jotain yksinkertaista Visual Basicilla ja HTML:ää osasin juuri ja juuri sen verran että olin saanut aikaan kehyksiä käyttävät kotskasivut.

Edelleenkään ei osata

Paljon on alalla muuttunut sitten. Tuolloin yksinkertaisiakin verkkopalveluprojekteja johdettiin kuin mittavia ja kankeita IT-projekteja oli totuttu vetämään. Tai sitten ei paljon ohjailtu, tehtiin vain mikä hyvältä tuntui, mikä saattoi joskus olla ihan järkevääkin. Rahaa kuitenkin poltettiin uskomattoman tyhmiin asioihin, näin jälkikäteen viisastellen.

Itse tekemisenkin osaaminen oli mitä oli. Valitettavasti osaaminen on edelleen mitä on, mutta on onneksi monelta osin silti kehittynyt. Edelleen ehkä isoin este hyvien verkkopalveluiden tekemisessä on se, että (visuaaliset) suunnittelijat eivät keskimäärin ymmärrä koodia ja ohjelmoijat ymmärtävät hyvin harvoin mitään verkkopalveluista. Pahimmillaan koko paketin vielä konseptoi totaalisen verkkoummikko mainosmies. Tämä lokeroituminen ei ole muuttunut juuri mihinkään ja on ehkä jopa pahentunut, osittain varmaan asioiden monimutkaistumisen takia. Ne, ketkä menevät tai ovat menneet tässä vastavirtaan, ovat tai tulevat olemaan voittajia.

Julkaisujärjestelmät kehittyneet yllättävän vähän

(Liian) monta julkaisujärjestelmää rakentaneena ihmetyttää, miten vähän nekin ovat tässä ajassa kehittyneet. Kankeita ja vaikeakäyttöisiä monstereita oli jo tuolloin ja niitä on edelleen, entistä pahempia suorastaan. Naapurin pojan heppoisia viritelmiä on nyt lukumääräisesti enemmän, mutta onneksi sentään ne ovat viime aikoina alkaneet karsiutua.

Uskon, että Ruby on Railsin kehittänyt David Heinemeier Hansson oli vuonna 2005 oikeassa, väittäessään että yleiskäyttöinen julkaisujärjestelmä on mahdoton unelma ja Railsin ja Djangon kaltaiset työkalut ovat ratkaisu. Yleiskäyttöisen julkaisujärjestelmän kuolemaa en silti ennusta. Vanhaan kirjoitukseen “The general-purpose CMS (pipe dreams, part II)” ei valitettavasti voi syvälinkittää ja sen olennainen linkkikin on rikki, joten vaikka nyt mennään vähän aiheesta ohi, niin tässä se kokonaisuudessaan. (Alkuperäinen juttu löytyy arkistosta etsimällä vaikka sanalla “CMS”.)

The general-purpose CMS (pipe dreams, part II)

As t approaches zero, people will realize that many types of software are non-sensical in their generalized form. I believe the time has come to mark a date in the not too distant future for celebrating the death of the general-purpose content management system.

In many ways, I believe it was always a pipe dream. Sort of like the high-level components that the industry has always sought. Or model-driven architecture/CASE tools. I believe all these fantasies can be summarized in a correlation of price and delusion:

The more expensive it is to create fresh software, the more appealing the mirage of generalization will appear.

And I think we’ve already seen the rise of its replacements for smaller segments of generalities. The blog is a much more specialized, much better alternative for a large group of problems that where previously considered content management. The same for the wiki.

We need even more narrow tools. While it’ll never reach zero, t is aiming enough in that direction to expose the fraud of ultimate generalization. So don’t accept the label of content. Nobody produces content. People write reviews, people write news, people write articles, people exhibits photos.

Try to realize, there is no content.

Toisaalta, ensimmäinen julkaisujärjestelmäni jostain vuodelta 2001 olisi edelleen ominaisuuksiensa puolesta ihan riittävä erittäin monelle saitille, jos vain syötteitä osaisi julkaista, eikä takuuvarmasti olisi vaikea käyttää. Paljon omia vanhoja visioitani on toteutumassa WordPressin seuraavassa 3.0-versiossa, joten ehkä toivoa myös ihmisille sopivilla, valmiiksi paketoiduilla julkaisujärjestelmillä on.

Tänään pilvipalveluilla kelvollisen verkkopalvelun tai -kaupan pieniin tarpeisiin ottaa käyttöön jopa ilman asiantuntijoitakin ja hassua kyllä lopputulos on usein monella tapaa paljon parempi kuin jos saman projektin menee tilaamaan isosta IT-talosta räätälityönä. 10 vuotta sitten lopputulos oli melkein poikkeuksetta susi ja GeoCitiesiä kummempia hostattuja palveluita ei tainnut juuri olla.

Liiketoiminta, jatkuva kehittäminen, optimointi ja analytiikka

Uusi liiketoiminta verkossa on kuin mikä tahansa muu uusi liiketoiminta: on erittäin vaikea nähdä ennalta, mikä toimii ja mikä ei. Siksi on kummallista katsella, kuinka lyhytnäköisesti verkkoliiketoimintaa usein kehitetään.

Alustaa valittaessa aliarvioidaan usein räätälöitävyyden merkitys. Kun tehdään oikeaa verkkoliiketoimintaa, on jokaisen pienenkin asian ketterällä säätämismahdollisuudella saavutettavissa todellista kilpailuetua. Homma ei ratkea niin, että kahden–kolmen vuoden päästä ostetaan toinen järjestelmä. Oikeasti räätälöitävät, mutta silti huimaa tuottavuutta tarjoavat sovellusalustat, kuten Django, Rails tai niiden lukemattomat jäljitelmät ovat tässäkin mielessä paljon nykyistä useammin oikea vastaus kuin monet julkaisujärjestelmät.

10 vuotta sitten täysin räätälöityjä saitteja tehtiin paljon nykyistä enemmän. Silloin yleisin virhe oli se, että kaikki tehtiin alusta asti itse, ja vieläpä moneen kertaan. Nyt yleisin virhe on se, että valmiiden tuotteiden liian pitkälle rajatut toimintatavat eivät jousta tarpeeksi, jotta pikkumuutokset olisivat tarvittavan kustannustehokkaita. Käyttäjät siis pannaan edelleen kärsimään, mutta eri syistä. 10 vuotta sitten tosin nuo ongelmat oli edes mahdollista korjata, mikäli asia tarpeeksi harmitti.

Optimointi alana on luonnollisesti sitten vuoden 2000 ottanut valtavia harppauksia, mutta outoa kyllä varsin harvassa ovat ne tahot, joilla optimointi tai analytiikan aito hyödyntäminen on oleellinen osa liiketoimintaa. Jopa ne tahot, jotka tekevät isoa liiketoimintaa verkossa Suomessa, tyytyvät seuraamaan lähinnä kokonaiskävijämääriä ja ovat vähän säätäneet etusivun titleään. Pitkälle ei valitettavasti ole päästy vuosituhannen alun GIF-hittimittareista ja avainsanaspämmistä.

Konseptit ja design

Verkkopalvelut ovat sisällöllisesti parhaimmillaan jotain ihan muuta kuin kymmenen vuoden takaiset meilläkin on verkkolehti -konseptit, mutta edelleenkin keskimäärin varsin ylhäältä alas tyhmälle kansalle -henkisiä. Sosiaalisesta tai yhteisöllisestä puolesta kyllä ollaan kiinnostuneita, mutta uskon, että lopullinen muutoksen aalto on vasta tulossa.

10 vuotta sitten muuta verkkoläsnäoloa ei ollut olemassakaan kuin oma saitti. Korkeintaan bannereita osattiin käyttää liikenteen ohjaamiseen. Tarve verkkopalvelulle tulee jatkossakin olemaan, mutta läsnäolo verkossa ei ole enää siitä kiinni ja on levittäytynyt paljon entistä laajemmalle.

Paljon on muuttunut myös web design. CSS:n yleistyminen on muuttanut niin sivujen koostoa kuin itse ulkoasujakin kahdeksan pikselin huonokontrastisesta fontista ja laatikkoleiskoista vapaampiin ja ilmavampiin tyylikkyyksiin.

Sivuja luettiin keskimäärin alitehoisilla koneilla, 800×600-resoluutiolla ja hitaalla modeemiyhteydellä. Kaikkialla läsnä olevasta Internetistä ei ollut tietoakaan, vaan sinne meneminen oli kokonaan oma rituaalinsa. Nämä tosiseikat oli liiankin helppo unohtaa, kun webiä tekevät eivät juuri kärsineet näistä rajoitteista ja tämä johti usein keskimääräiselle kävijälle lähes käyttökelvottomiin sivustoihin. Edelleen keskimääräinen yhteysnopeus unohdetaan, mutta ongelma on huomattavasti vähemmän dramaattinen.

Mennyttä

Noilta kymmenen vuoden takaisilta ajoilta kaipaan eniten sitä iloa, intoa ja ylpeyttä, mitä ala tuolloin itsestään löysi. Nyt tekeminen ei keskimäärin tunnu olevan enää niin hauskaa vaan paljon kaavamaisempaa ja virastomaisempaa. Rohkeaa yrittämistäkin onneksi on, mutta ryppyotsaisuutta on silti aivan liikaa.

Mutta mennyt aika ei palaa. On tämä intternet edelleen hienointa, mitä voisin kuvitella työkseni tekeväni.