onsdagen den 7:e augusti 2013

Closure i JavaScript: Svårt att greppa, omöjligt att leva utan

Senaste tiden har jag fått nöjet att arbeta med JavaScript mycket. Och jag älskar JavaScript!

Det är ett mycket missförstått språk, men det är enormt kraftfullt. Men tyvärr har det blivit misshandlat på vägen och fått ett onödigt dåligt rykte. Men idag är det verkligen ett mycket kraftfullt språk som ingen kan leva utan.

Något av det svåraste att greppa med JavaScript må vara det som kallas "closure". Men det är också en av de kraftfullaste aspekterna med språket.

Låt oss titta på två exempel för att förklara vad det är, och jag ska försöka vara så tydlig och enkel som möjligt. Detta tog mig lång tid att fatta.

Exempel 1:

var digit_name = (function () {
  var names = ['zero', 'one', 'two', 'three', 'four', 'five'];

  return function (n) {
    return names[n];
  }
})();

console.log( digit_name(3) ); //Output: three


Så vad är det vi gör?
Först skapar vi en funktion, digit_name, som är en funktion som exekveras direkt och körs och retunerar namnet på siffran vi ger den som parameter.

Kör vi digit_name(2) så retunerar funktionen two. Det är ingen komplicerad funktion i sig, men den demostrerar "closure" välldigt bra.

Hurså?
Jo, det luddiga begreppet closure innebär att return-funktionen inut i vår huvudfunktion digit_name fortfarande har tillgång till alla variabler vi definierat även efter att huvudfunktionen returnerat, alltså avslutats.

I exemplet ovan så har vi en funktion, digit_name, som körs och returnerar när den skapas. Vår return retunerar ännu en funktion som i sin tur retunerar ett index i vår array names. Och det är tack vare closure så har vi ändå tillgång till names även i vår return funktion.

Låt oss kolla på ett annat exempel där vi ser hur closure fungerar.

Exempel 2:

function doSteps(){

  var level = 0;

  function step(){
    console.log('Step: ' + digit_name(level) );
    level++;
    if(level < 5){
      setTimeout( step, 1000 );
    }
  }

  setTimeout( step, 1000 );
}
doSteps();


Här har vi en funktion doSteps() som med hjälp av ett timing event, setTimeout, anropar funktionen step() efter 1 sekund. Vår funktion doSteps() har sedan länge då retunerat och avslutats. Men tack vare closure i JavaScript så har vi forfarande tillgång till variablen level.

I exemplet ovan använder vi även funktionen digit_name() från första exemplet, om det är någon som blev förvirrad. :-)

Fortfarande inte säker på saken? Kolla in videon nedan där fenomenala Douglas Crockford förklarar.


tisdagen den 7:e maj 2013

Ny hemsida åt God Service AB



Arbetsgivare: 
DMON AB

Slutkund:
Parkettexperten Öresund

Sammanfattning:
God Service Sverige AB är ett modernt tjänsteföretag som utför tjänster både åt privatpersoner och företag. Idag är vi stolta över att lansera deras nya hemsida. Med en ny hemsida från bytwebb.nu har de fått både en prisvärd och snygg hemsida som är enkel att underhålla. Den nya hemsidan har dessutom en så kallat responsiv design och nyhetsbrev.


Läs mer på:
http://dmon.se/blogg/uppdrag/kundcase-god-service/

Besök kundens sida:
http://godservice.se/

måndagen den 8:e april 2013

Ny hemsida åt Parkettexperten



Arbetsgivare: 
DMON AB

Slutkund:
Parkettexperten Öresund

Sammanfattning:
Parkettexperten är ett företag med eget snickeri som erbjuder alla typer av parkett, trä och laminat golv. De är numera även en bytwebb.nu-kund. Konceptet med att få en professionell hemsida snabb och till ett bra pris var det som lockade. Dessutom köpte kunden vår tilläggstjänst för sökmotorsoptimering och sökmotorspositionering.


Läs mer på:
http://dmon.se/blogg/uppdrag/kundcase-parkettexperten/

Besök kundens sida:
http://parkettexperten.se/

fredagen den 15:e mars 2013

Ny hemsida åt Nordisk Fastighetsförmedling



Arbetsgivare: 
DMON AB

Slutkund:
Nordisk Fastighetsförmedling AB

Sammanfattning:
Nordisk Fastighetsförmedling ville ha en ny hemsida med ett lättarbetat publiceringsverktyg med koppling till mäklarsystemet Vitec. Målet var att ta fram en ny grafisk profil som ligger i tiden. Resultatet blev en webbplats byggd på WordPress, webbdesign och logotype.


Läs mer på:
http://dmon.se/blogg/uppdrag/kundcase-nordfast-se/

Besök kundens sida:
http://nordfast.se/

torsdagen den 23:e augusti 2012

Att bygga sitt egna PHP ramverk: Användarhantering och inloggning - Del 2

Detta är andra delen i bloggserien "Att bygga sitt egna PHP ramverk" - Första delen hittar ni här!

Något som de flesta sidor har, på ett eller annat sätt är någon form av användarhantering. Det kan vara allt från administratörer till kundregister. För dessa ändamål har jag i mitt ramverk skapat speciella klasser.

I grunden hittar vi klassen Person, som hanterar vanliga uppgifter så som för- och efternamn, födelsedatum, kön och så vidare. Detta är en väldigt enkel klass, men som kan ha många användningsområde.

En utbyggnad av denna klassen är User som hanterar användare. I klassen finns tillägg för bland annat lösenordshantering. Alla lösenord som hanteras envägskrypteras med en sträng unik för sidan i en SHA512-algoritm. Därtill läggs ännu ett lager med för användaren unik data in i krypteringen. För varje User genereras även en säkerhetsnyckel baserad på bland annat data om användaren, så som ip och webbläsare, som exempelvis kan synkroniseras med databasen för ett extra säkerhetslager. Detta för att exempelvis dubbelkolla så att användaren verkligen är samma som loggade in. Detta ska förhoppningsvis försvåra sessionsstölder, men samtidigt öppna upp för enklare och säker kommunikation mellan olika tjänster.

Båda dessa klasser implementerar ett interface som jag valt att kalla SessionsSycnable. Detta interface beskriver att det är möjligt att spara och hämta den aktiva användare från en server session. Detta för att underlätta överföring av information mellan sidladdningar och för att hålla reda på inloggning och dylikt.
Tanken är att allt som kan synkroniseras med session ska implementera SessionsSyncable.

Självklart finns det inga databas kopplingar från någon av dessa klasser då klasserna och objekten av dem ska vara helt oberoende av övrig struktur i systemet. Ett User-objekt är bara ramen och behållaren för information som sedan kan sparas och hämtas från exempelvis en MySQL-databas. Men själva databaslogiken sker uteslutande i Model-klassen och kan vara unik för varje projekt. Men det är ett sätt att försöka standardisera "användaren" och hanteringen av dessa oberoende av projekt.

Låt oss gå in på lite "nörd"-nivå och kolla på lite närmare på funktioner och källkod.

För att säkerställa användarens lösenord så använder vi oss av SHA512-krypering som är en en vägs kryptering. Dessutom slänger vi in två typer av "salt" för att försvåra eventuellt försök till lösa krypteringen med exempelvis en Rainbow-tabell.

Salt i sammanhanget är alltså en unik sträng som läggs ihop med lösenordet som sedan krypteras.

Exempel: 
Om vi enbart krypterar ordet "lösenord" så får vi följande SHA512 hash; 4f4674b2f6d25aecb2192cc5351fbf1f79d53582b9b940ef8db87a77b6d1560995525bfd33b516834efee7805f71e46e61447705ba5862b6aa9923b6344d93f3

Denna hash-sträng är alltid samma för ordet "lösenord", vilket betyder att om man med en tabell av kända hash-strängar kan ta reda på själva lösenordet. Inte så bra.

Lägger man dock till "salt", en slumpmässig sträng tillsammans med lösenordet, så får vi ett unik lösenord. Dessutom blir två lösenord som egentligen är samma unika.

Exempel:
Om vi tar ordet "lösenord" och sedan lägger till "sja893haksm3" som salt; alltså "lösenordsja893haksm3" så får vi SHA512-hashen:
6203a2c0fe705aa70737d65622b874a150b66a1a5bba4bfd8de3bed109c9feb3178e65b6e9a88d11ce690270608e62dfc65397740d5867e079eba75eaa1f4888

Detta är såklart betydligt svårare att försöka lösa. Jag har dessutom valt att använda två "salt"-strängar. En helt unik och slumpmässig sträng för användaren och en för systemet. Användarens unika sträng sparas tillsammans med hans övriga uppgifter i databasen och systemets sparas i en konfigurations-fil.
För att göra det ännu svårare kan man även lägga till ytterligare information, allt för att göra det svårare för att "hacka".

Studerar man diverse "decrypters" som finns tillgängliga, som ganska effektivt kan lösa enklare lösenord så får man också en uppfattning om vad man behöver lösa.

De flesta hash avkrypterare fungerar på så vis att de arbetar mot en tabell av vanliga lösenord i kombination med vanligt förekommande salt-strängar. De testar olika kombinationer av salt + lösenord.

Exempel:
md5($pass.$salt)

md5($salt.$pass)
md5(md5($pass).$salt)
md5(md5($salt).$pass)
md5($salt.md5($pass))
md5($salt.$pass.$salt)

En annan metod är att programmet har en tabell med redan lösta hash-strängar (det finns stora databaser med detta) som den sedan jämför mot för att hitta lösenordet.
Sedan finns det såklart den mest tidsödande metoden, att programmet helt enkelt slumpar fram strängar som den sedan försöker jämföra med din hash-sträng. Denna metod är egentligen enbart effektiv mot korta lösenord, då det för varje tecken i ett lösenord ökar antalet kombinationer att prova. Skillnaden mellan att lösa ett lösenord på fem och åtta tecken för en snabb dator är enorm. Ett lösenord på fem tecken har 931151402 kombinationer och går att lösa inom två timmar. Medan ett lösenord på åtta tecken har hela 221919451578090 kombinationer och tar lite drygt 40 år för en dator som kan prova ca 170 000 tecken per sekund.

Så två salt-strängar kombinerat med ett lösenord gör att även korta lösenord blir mycket svåra att lösa. :)

Att bygga sitt egna PHP ramverk:


Mer läsning:
Wikipedia om SHA-2 (elektroniskt) <http://en.wikipedia.org/wiki/SHA-2>
Testa ditt lösenord på Open Security Research (elektroniskt) <http://calc.opensecurityresearch.com/>
PHP manual om hash-funktionen (elektroniskt) <http://php.net/manual/en/function.hash.php>
Password Hashing, James McGlinn (elektroniskt) <http://phpsec.org/articles/2005/password-hashing.html>

Dynamiskt anpassningsbara DIV-block med unik ram



Det finns ett problem som är ständigt återkommande för oss som jobbar med webbdesign; Hur ska jag skapa DIV-block som är dynamiskt anpassningsbara till storlek och har en unik ram?
Vi talar alltså om "custom border" till DIV-taggar.

Det är ett problem som verkar ha en lösning inom en nära framtid. Det finns redan lösningar i CSS3, med box-shadow, border-image och border-radius. Men CSS3 har är tyvärr inte ännu 100% kompatibel med alla webbläsare, det har inte 100% "cross-browser support". Dessutom lever vi inte i den bästa av världar och många, framför allt de som sitter på gamla operativsystem, sitter på gamla webbläsare. Suck! Host, host Windows och Explorer!

Jag har i alla fall en lösning jag ständigt återkommer och återanvänder i väntan på en standardiserad webb. Låt oss först kolla på min lösnings för och nackdelar.

Fördelar:
  • Anpassar sig dynamiskt till olika stora DIV-block.
  • Använder egen grafik.
  • Fungerar i alla webbläsare och versioner. Hej IE 6!
  • Ganska snabbt och enkelt att implementera.
  • Helt fri från JavaScript, 100% HTML och CSS.

Nackdelar:
  • Kräver 8 bilder.
  • Kräver 8 extra DIV-block utan innehåll.
  • Ser inte jättevackert ut i källkoden.
Så, det avklarat och utrett, här kommer källkod till lösningen. Förklaring hittas också längre ner.

HTML:
<div class="box">
    <h1>Header 1</h1>

    Vivamus tincidun...

    <div class="border_t"></div>
    <div class="border_b"></div>
    <div class="border_l"></div>
    <div class="border_r"></div>
    <div class="border_br"></div>
    <div class="border_bl"></div>
    <div class="border_tr"></div>
    <div class="border_tl"></div>
</div>

CSS:
<style type="text/css">
<!--
.box{
    background:#FFFFFF;
    margin:10px;
    float:left;
    padding:10px;
    width:250px;
    position:relative;
}
.border_t {
    background:url(border_t.png) repeat-x;
    position:absolute;
    top:-2px; left:0;
    width:100%;
    height:2px;
}
.border_b {
    background:url(border_b.png) repeat-x;
    position:absolute;
    bottom:-6px; left:0;
    width:100%;
    height:6px;
}
.border_l {
    background:url(border_l.png) repeat-y;
    position:absolute;
    top:0; left:-3px;
    width:3px;
    height:100%;
}
.border_r {
    background:url(border_r.png) repeat-y;
    position:absolute;
    top:0; right:-6px;
    width:6px;
    height:100%;
}
.border_br {
    background:url(border_br.png);
    position:absolute;
    bottom:-6px; right:-6px;
    width:6px;
    height:6px;
}
.border_bl {
    background:url(border_bl.png);
    position:absolute;
    bottom:-6px; left:-3px;
    width:3px;
    height:6px;
}
.border_tr {
    background:url(border_tr.png);
    position:absolute;
    top:-2px; right:-5px;
    width:5px;
    height:2px;
}
.border_tl {
    background:url(border_tl.png);
    position:absolute;
    top:-2px; left:-2px;
    width:2px;
    height:2px;
}
-->
</style>


Förklaring:
Som ni säkert förstår bygger lösningen på åtta bilder. En bild för varje hörn och en för varje kant. De är små bilder på bara några pixlar som går snabbt att ladda.


Tar vi exempelvis underkantens bild så behöver den inte vara mer än 1 pixel bred och 5 pixlar hög för att täcka skuggan som är vår ram. Hörnet är 5 x 5 pixlar. Med CSS kan vi sedan sy ihop dessa bilder till en helhet.

Men som sagt, snart kan vi förhoppningsvis använda CSS3 och allt detta meck är ett minne blott! :)

fredagen den 3:e augusti 2012

Design för en t-shirt: #8


Silent Lovemaking

Inspiration: Hade en kund som jobbade med projekt för döva. Det var mycket teckenspråk. Fick mig att tänka på Svenssonsex, eller kanske fördomar om det. Det blev dock inget med kundprojektet men denna t-tröjan föddes.



Missade ni det inledande inlägget i t-shirtserien, läs det här: 

Ps. Önskemål är välkomna. Jag lovar inget, men sannolikheten är stor.