Om Christian

Christian er en glødende engasjert utvikler som brenner for web, Ruby, JavaScript, Open Source og Linux. Han har lang erfaring som grensesnittsprogrammerer i flere av landets største firmaer. I tillegg til Stammen skriver Christian på sin egen blogg, og på en bok om JavaScript for det amerikanske forlaget Addison-Wesley.

Skjemavalidering med JavaScript

Selvom du ikke er utvikler håper jeg at dette innlegget vil vise deg at skjemavalidering ikke trenger å være vanskelig å få på plass. Når du har lært det du trenger å vite om feilmeldinger, så kan du tipse utviklerne i ditt prosjekt om de mer tekniske aspektene ved feilmeldinger. Det er også konkrete eksempler nedover i inlegget som du kan prøve, så ikke la deg skremme av at du ikke kan JavaScript, det er veldig lite av det her.

Validatious – et JavaScript valideringsbibliotek

I dette innlegget viser jeg bruk av Validatious, et lite bibliotek for å validere skjemaer med JavaScript. Jeg skrev og slapp Validatious som et open source bibliotek i fjor etter å ha jobbet med skjemavalidering i en rekke prosjekter. Validatious kan brukes uavhengig av hvilket JavaScript-rammeverk du ellers bruker (det vil altså fungere med jQuery, Prototype og andre).

Validatious har funksjonalitet for å snappe opp valideringsregler fra klassenavn i HTML. Sammen med CSS for å style feilmeldinger og et lite script for å konfigurere oppførsel kan du komme langt selvom du ikke er noen JavaScript-ekspert.

Validatious gir mekanikken, ikke designet

Målet med Validatious var å samle logikken bak skjemavalidering på en plass, ikke å lage en ferdig pakke for feilmeldinger – hvordan disse skal kommuniseres er prosjektavhengig. Validatious gir deg ikke noe design og har ingen preferanser på hvordan skjemaene dine ser ut, så disse tingene trenger du fortsatt å bruke tid på å tenke ut. Validatious gjør det derimot enkelt å få på plass validering på klientsiden.

Et eksempel

Last ned Validatious og sett opp følgende testfil:



  
    
    Skjemavalidering med Validatious
  
  
    
    
  

Legg merke til det andre scriptet: Standard-feilmeldingene i Validatious er på engelsk, så vi må laste inn en egen fil med norske meldinger. Denne fila kan du hente her. Senere skal vi se hvordan vi kan ta bedre kontroll over feilmeldingene.

Med litt rask CSS ser dette skjemaet omtrent ut som dette:

Skjemaets utgangspunkt

Skjemaets utgangspunkt

Det er to måter å bruke Validatious til å validere skjemaer:

  1. Ved å kode validering med JavaScript
  2. Ved å legge til klassenavn og andre attributter i HTML-en for skjemaet

For de fleste brukstilfeller kan du lage en godt tilpasset løsning kun ved å endre på HTML-en din og skrive CSS for å style meldingene. Dette er strategien vi går for i dette innlegget. Det finnes en god del dokumentasjon av hvordan du kan gjøre disse tingene fra JavaScript på validatious.org.

Legg validering på et skjema

Følgende er et utsnitt av skjemaet jeg bruker som eksempel, det er stylet til å ligne registreringen til Yahoo! som ble fremhevet som best practice i Philips innlegg:

Om deg

[SNIP]

Et relativt simpelt skjema. For å legge validering på dette skjemaet med Validatious er det to ting som må til:

  1. Skjemaet må markeres som validerbart med class="validate"
  2. Feltene må tilordnes valideringsregler via class-attributtet

I dette tilfellet ønsker vi at alle feltene skal være påkrevd, og vi ønsker å sjekke at e-post er en gyldig e-postadresse:

Om deg

[SNIP]

Med disse enkle endringene får vi validert skjemaet når vi trykker på registrer-knappen. Som du kan se vises det her én feilmelding per felt som feiler (selvom e-post har to regler som ikke er tilfredsstilt):

Skjema med feilmeldinger

Skjema med feilmeldinger

Prøv eksempel #1

Legg forøvrig merke til at dersom du sender inn skjemaet tomt så vil du få feil på samtlige felter. Om du nå legger litt tekst i eksempelvis fornavn-feltet og tabber videre til neste felt vil du legge merke til at Validatious rydder vekk feilmeldingen umiddelbart. Dette kan du skru av om du ikke liker det. Dersom du hopper videre til e-post-feltet og skriver inn en tekst som ikke er en gyldig e-post-adresse vil du se at feilmeldingen ikke forsvinner, men oppdateres når du går ut av feltet.

Litt bling, takk

Skjemaet har validering, det er vel og bra, men feilmeldingene ligner ikke på Yahoos feilmeldinger. Det kan vi fikse greit. Det er mulig å ta fullstendig kontroll over hvordan feilmeldinger legges inn i HTML-dokumentet, men for å sette deg igang har Validatious en standardløsning. Du kan bruke et verktøy som Firebug for å se hva Validatious gjør, men jeg kan også fortelle deg det:

  1. div-elementet rundt felt som feiler merkes med klassenavnet
    "error"
  2. Først i div-elementet legges det til en ul med
    klassen "messages"
  3. Inne i ovenfornevnte ul legges feilmeldingene inn i hvert
    sitt li-element

I utgangspunktet viser Validatious som sagt én feilmelding per felt, men det er mulig å be den om å sette inn et gitt antall, eller alle.

Vi kan sprite opp feilmeldingene med litt CSS:

/* Feilmeldinger */
.error {
    background: url(error_arrow_bg.gif) -50px 0 no-repeat;
    position: relative;
}

.error label span {
    background: url(smileyliamandroundedcorners_v5.png) no-repeat;
    background-position: -1px -120px;
    color: #c00e0c;
}

.error .messages {
    color: #c00e0c;
    list-style: none;
    left: 435px;
    margin: 0;
    position: absolute;
    top: 1px;
}

Dette er en litt rask hack som ikke er spesielt godt sjekka i mange browsere, men fungerer for å illustrere poenget. Denne gangen ser feilmeldingene litt stiligere ut, og det er ikke mye arbeid vi har lagt ned i dette:

Design på feilmeldinger

Design på feilmeldinger

Lek med skjema #2

Litt positiv feedback, takk

Etter at brukeren har vært gjennom den prøvende opplevelsen det er å få kjeft av websiden vår kan det være hyggelig å backe opp med litt positiv feedback når et felt som har hatt feil blir rettet. På samme måte som et felt blir merket med klassenavnet "error" når det inneholder feil er det mulig å få et felt merket med klassenavnet "success" i det øyeblikket det rettes opp. Dette kan vi bruke til å gi brukeren et hint om at vi nå er fornøyd. For å gjøre dette må vi først gi Validatious et hint om klassenavnet vi ønsker:

Denne legges til etter script-elementet som inkluderer Validatious. Deretter legger vi til noen linjer CSS:

.success {
    background: url(checkbullet.gif) 320px 0 no-repeat;
}

En kjapp liten tweak som kanskje eller kanskje ikke er det du er ute etter:

Positiv feedback

Positiv feedback

Lek med skjema #3

Instant feedback, takk

I Yahoos skjema får du umiddelbar feedback når du gjør noe gæernt. Det kan vi få til også her ved å legge til en ny one-liner i script-blokken som konfigurerer Validatious (den vi nettopp innførte). Den skal se sånn ut:

v2.Field.prototype.instant = true;

Med denne på plass vil du få feedback etter hvert felt. Om feltet er OK får du en grønn hake ved siden av det, er det problemer får du beskjed om hva som er feilen.

Instant feedback

Instant feedback

Lek med skjema #4.

Bedre feilmeldinger

Validatious tilbyr et sett med gode standardmeldinger, men standardmeldinger kan svært sjelden konkurrere med tilpassede feilmeldinger. La oss si at vi ikke var så fornøyde med feilmeldingen som dukker når vi taster inn en e-postadresse som ikke er gyldig. Vi kan da gi en bedre melding på to måter. Den enkleste er å gi input-elementet et title-attributt som gir en tilpasset melding:

Med dette kan vi se at vår tilpassede feilmelding brukes i stedet for de innebygde meldingene. Lek med skjema. Hvorvidt dette er en god feilmelding er kanskje en annen diskusjon, men jeg er bare utvikler – vi vet ikke sånt.

Dersom vi bare ønsket å hjelpe Validatious med feltnavnet kan vi gjøre dette også. Standardmeldingen som genereres for manglende fornavn er «Fornavn er påkrevd». «Fornavn» snappes opp fra labelen foran feltet. Ved å gi denne et
title-attributt kan vi bruke et annet feltnavn i feilmelding enn det som vises i labelen:

Lek med skjema.

Lær mer

Vi har sett basic bruk av Validatious, men den kan mer enn dette:

Og masse mer. Sjekk validatious.org for mer informasjon eller ta kontakt om du har spørsmål og eller kommentarer (gjerne via kommentarene nedenfor).

Dersom det er interesse for det følger jeg gjerne opp med et nytt inlegg ved en senere anledning der jeg kan vise validering av mer komplekse skjemaer samt bruk av eksempelvis jQuery for å lage enda mer bling – type animerte feilmeldinger eller lignende.

Disclaimer: Skjemavalidering med JavaScript

Det er viktig å forstå at input av sikkerhetsgrunner alltid må verifiseres på serveren uavhengig om du også gjør det på klienten. Dette innlegget handler om å bedre interaksjonen i skjemaer i en webløsning ved å bruke JavaScript til å
validere input «on-the-fly». Formålet er å gjøre bruk av tjenesten din til en mer lystbetont øvelse, ikke validere input for sikkerhet.

Effektivitet målt i tomater

The Pomodoro technique

Hva er The Pomodoro Technique?

The Pomodoro Technique kan læres på under ett minutt:

  1. Finn en stoppeklokke – gjerne en fysisk kjøkkenklokke
  2. Still klokka på 25 minutter
  3. Begynn å jobbe
  4. Når klokka ringer tar du 5 minutter pause
  5. Etter fire runder med 25+5 minutters sesjoner tar du en litt lengre pause

Det er flere fordeler ved å jobbe etter denne oppskriften. Når du har «en pomodoro» (altså en 25 minutters arbeidsøkt) er det full fokus som gjelder. Det betyr ingen mail, ingen Twitter, ikke noe chat rundt vanndunken på kontoret osv. 25 minutter med absolutt konsentrasjon. Hvis du er noe som meg så vil du oppleve at et så enkelt regelsett som det over kan være nok til å rydde slike distraksjoner (som vi selv ofte er ansvarlige for) av banen.

Metodikken kan også hjelpe deg med eksterne forstyrrelser. Dersom du jobber i et åpent landskap hvor det er mange mennesker og «en dynamisk» hverdag er du sikkert vant til å både i tide og utide få spørsmål og nye oppgaver fra kollegaer, sjefen og andre som vrimler i ditt arbeidsmiljø. Det er alltid hyggelig å kunne hjelpe en kollega, og man skal selvsagt gjøre jobben sin. Desverre er en hverdag som dette ofte svært hemmende på produktiviteten. Ihvertfall om du jobber som utvikler, eller har andre oppgaver som krever lengre perioder med konsentrasjon for å komme skikkelig «i sonen».

Ved å organisere seg rundt noe ala The Pomodoro Technique har man en «unnskyldning» for ikke å konstant forholde seg til eksterne forstyrrelser. 99% av hendendelser man får i løpet av en arbeidsdag – også de som folk opplever som hastesaker – kan vente i opptil 25 minutter/2 timer (fire runder med 25+5 minutter). Det betyr at du kan forklare dine kollegaer at «jeg jobber etter dette skjemaet, vennligst ikke gi meg nye arbeidsoppgaver eller introduser meg for nye problemstillinger når jeg først er igang med en annen oppgave». De aller fleste vil ha full forståelse for dette: Din arbeidsdag blir bedre fordi du lettere kan konsentrere deg og være i sonen, samtidig som dine kollegaer vil sette pris på å få din fulle oppmerksomhet når de først får den.

The Pomodoro Technique = enmanns-scrum

Mange vil sikkert trekke paralleller fra beskrivelsen over til Scrum. Og det er slettes ingen dum sammenligning. Pomodoro er en slags enmanns-scrum. Det vises også i den offisielle websiden (og boka) sin forklaring av metodikken: Start med å skrive ned oppgaver du trenger å få gjort på et ark. Dersom oppgavene ikke kan fullføres innen ca 4 timer, bryt dem opp i mindre oppgaver. Dersom de tar mindre enn en halvtime å fullføre, se om du kan slå dem sammen med andre småoppgaver slik at de tar minst en halvtime.

Før hver pomodoro kikker du på arket ditt og velger en oppgave du skal jobbe på. Når klokka ringer setter du en strek ved oppgaven. Om oppgaven er ferdig krysser du den ut. Noen dager, uker eller måneder senere vil du ha et fantastisk underlag for å lære litt om hvordan du jobber – hvilke ting tar deg lang tid? Hvilke ting tar kort tid? Kan disse strekene brukes for å bli flinkere til å estimere?

Pausene

Når man setter igang å jobbe på en pomodoro finner man ofte raskt konsentrasjonen. Så godt finner man ofte konsentrasjonen at det er fristende å fortsette selvom klokka ringer etter 25 minutter. Denne fristelsen må man ikke falle for – om kun 5 minutter kan du fortsette.

Hensikten med denne lille pausen er å holde konsentrasjonen din på et høyt nivå over tid. Det er nemlig sånn at hjernen vår ikke er i stand til å holde maks fokus over svært lange perioder. Den kan konsentrere seg lengre enn 25 minutter – helt sikkert – men ved å legge inn små pauser i disse intervallene gir man hjernen små pustepauser som er positivt for konsentrasjonen på lengre sikt.

Det er viktig at pausene ikke brukes til annet hjernearbeid. Du skal ha en liten pause, men ikke forlate det du jobber med helt. Det aller beste du kan gjøre i de små pausene er å ta en tur på do, hente deg en kaffe og strekke litt på armene. Få blodsirkulasjonen igang og få unna småtingene på en gang. Twitter og e-post kan du sjekke etter fire pomodoros når du har en lengre pause.

Erfaringer fra noen konkrete settinger

Siden før sommeren har jeg jobbet etter denne teknikken i flere forskjellige settinger for å lære den litt å kjenne. Jeg merket veldig fort (allerede den første dagen) at konsentrasjonen ble langt mer skjerpet. Dette hjalp meg å komme raskere i sonen, med den følgen at jeg ofte ikke hadde lyst til å gi meg når 25 minutter var brukt opp, som nevnt over. Jeg brukte en applikasjon som timer, og den tok opp et vindu på skjermen når det var på tide med pause som ga meg noen øvelser – strekk ut armene, tren øya osv. Selvom det ofte var litt irriterende prøvde jeg så godt jeg kunne å holde meg til klokka. Utover dagen erfarte jeg at små pauser tidlig på dagen holdt meg mer skjerpet.

Tomater og solo-programmering på kundeprosjekt

Jeg gjorde ett prosjekt før sommeren der jeg skulle sette opp en Rails-applikasjon alene. Og da mener jeg alene. Ingen designer, ingen å sparre med. Kun en detaljert spekk (dette var en revitalisering av en eksisterende applikasjon for internt bruk), meg og tomatene. Et ypperlig prosjekt å starte med pomodoros, ettersom de eksterne forstyrrelsene er garantert å være ganske små i et sånt prosjekt.

Mens jeg jobbet med dette prosjektet hadde jeg en yoyo (jojo?) liggende på pulten. Denne, vann og kaffe hjalp meg å fylle de små pausene. Det morsomme med yoyoen er at man gjerne fokuserer litt på hva man holder på med (for å unngå å knuse skap og glass osv) samtidig som den krever lite hjerneaktivitet.

Personlig har jeg aller flest «indre forstyrrelser», altså at jeg avbryter meg selv – gjerne ved å surfe på nett, når jeg jobber alene på prosjekter. Dette til tross for at jeg liker å jobbe alene på prosjekter. En enkel timer var alt som skulle til for å nesten fullstendig fjerne all distraksjon, og jeg gjennomførte prosjektet på en – for meg – svært tilfredsstillende måte.

Tomater i et team i en stor og busy bedrift

Jeg jobber også stadig vekk i større prosjekter hvor man er omgitt av langt flere mennesker, det er mange som har meninger og ønsker om det man jobber med, og hvor forespørsler kommer i svært lite ordnede former. I det aktuelle prosjektet jobbet jeg i team med tre andre, men omgitt av mange flere mennesker. I en slik setting fungerte også timeren og 5 minutterspausene veldig godt.

En av kollegaene mine tok også i bruk teknikken samtidig. Vi samkjørte oss og endte opp med å forstyrre hverandre mindre ved at vi tok de små diskusjonene på bedre egnet tidspunkt enn bare akkurat når man føler for det.

Tomater til skriving

På fritiden jobber jeg for tiden med å skrive en bok. Dette er også arbeid som krever høy konsentrasjon, selvom det å skrive ned en liste over oppgaver som skal gjøres er vanskeligere enn når man programmerer. Dette til tross, 25+5 minutter er en god teknikk for å holde konsentrasjonen over lengre tid også når man skriver. Det har ikke noe å si hva det er man skriver – om det er en bok, en artikkel eller et blogginnlegg.

En svært positiv effekt av 25+5 minutter under skriving er at du sjelden roter deg lengre bort enn 25 minutter. Hvis du er i ferd med å skrive deg ut på vidda, eller programmere deg inn i et hjørne, vil du ofte oppdage det etter å sett bort i fem minutter, og vil dermed være i stand til å avbryte den nttesløse aktiviteten før du sitter omringet av fersk maling i hjørnet på et digert rom.

«Timeboxing» og teknikker ala The Pomodoro Technique kan være svært gunstige for produktiviteten, noe jeg selv har erfart. Det som er så fint med tomatene er at teknikken har svært få regler, og er ikke komplisert å sette seg inn i. I tillegg er det helt åpent for å tilpasse sine egne vaner. Om du etter en stund finner at 25 minutter er for kort for deg kan du jobbe i 40 minutter før du tar en liten pause. Tilpass til din verden!

Kom igang

Noen flere der ute som har prøvd seg på lignende teknikker? Hva er deres erfaringer?

Velkommen til Stammen

Stammen består av engasjerte mennesker som til daglig jobber med internett og mobile løsninger. Målet vårt er å få til en bred dekning av dette feltet, med innlegg om oppmerksomhet/markedsføring, utvikling og design. For å sikre at bloggen faktisk dekker bredt kommer vi til å jobbe aktivt med å variere temaene som presenteres her.

Publisering hver mandag

Ikke bare skal vi i Stammen være varierte i innhold, vi ønsker også å være forutsigbare. I første runde betyr det publisering hver eneste mandag utover høsten. Når volumet gjør det naturlig utvider vi med flere dager, men vi ønsker å beholde en slags magasinfølelse ved å ha fast «utgivelsesdato». PÅ s

Noen ord om det tekniske ved stammen.no

Løsningen du nå sitter og ser på en veldig tidlig utgave, vi jobber fortsatt i høy grad med den. Det viktigste er på plass: vi har et sted å publisere, du kan komme med tilbakemeldinger via kommentarer og tilbakeping, og du kan abonnere på vår RSS-feed. Mange ting mangler, og vi kommer til å legge til funksjonalitet utover høsten.

Stammen er designet og utviklet av Karl Philip Lund, John Eivind Hallén og meg selv, Christian Johansen.

Fordi Stammen er vår egen lekekasse har vi hatt frie tøyler under utvikling. Bloggen er satt opp med HTML5, og bruker elementer fra den kommende CSS3-spesifikasjonen. Begge disse teknologiene vil være viktige verktøy for folk som lager web i årene fremover, selvom ingen av dem er ferdig spesifiserte. Når det er sagt begynner nettleser-støtten å bli så god at det er fullt mulig å begynne å leke med dem allerede nå. At vi benytter såppass ny teknologi betyr selvsagt også at vi gir avkall på maks IE-kompatibilitet, og sannsynligvis andre eldre nettlesere. Skulle du komme til å besøke Stammen med en nettleser og ikke engang klare å lese innholdet vil vi gjerne høre fra deg!

Å bruke HTML5 og CSS3 gir en del morsomme muligheter som det vil ta litt tid å få styr på. Jeg har sannsynligvis gjort noen feil her og der ettersom dette er det første åpne nettstedet jeg har laget med disse. Dersom det sitter folk der ute som har litt erfaring med HTML5 og ser ting vi har gjort som er rart hadde vært veldig kult å høre fra dere. Foreløpig har vi ikke brukt disse teknologiene til noe «crazy kult», men jeg kan si at jobben med å skrive CSS for et HTML5-dokument er en ganske annerledes og ganske mye morsommere opplevelse enn å skrive CSS for div-helvete som et passe avansert XHTML/HTML4-dokument kan bli.

Jeg håper at du opplever Stammen som en nyttig ressurs i tiden fremover, og om du har tanker og ideer rundt det vi driver, ikke nøl med å komme med tilbakemeldinger. For å være sikker på at du får med deg alt anbefaler jeg at du abonnerer på vår RSS-feed. Sees igjen neste mandag!