Less CSS – drömmen för dig som implementerar webdesign
{less} CSS stötte jag på för fösta gången för ett par månader sedan då vi funderade över hur vi skulle lägga upp designarbetet av www.kth.se (där jag arbetar till vardags) Less CSS är ett sk. dynamiskt stylesheet-språk som hjälper dig att strukturera upp din css-kod.
Fördelarna 
Det är inget snack om att less CSS hjälper dig att strukturera upp dina css-filer men det finns många andra fördelar också:
- Nestlade regler
Vi börjar med strukturen i alla fall eftersom den är så påtaglig. Att nestla sina regler skapar en lättöverskådlig och överblickbar kod som gör det enkelt att koda och underhålla..bodyWrapper { padding: 0 @pageInset 0 0; clear: both; .bodyWrapper2 { float: right; overflow: hidden; #content { width: (@columnWidth * 3); padding-bottom: @spacing * 3; &.wide { width:100%; padding-bottom: @spacing *3; } } } } - Less-koden omvandlas sedan till förjande CSS:
.bodyWrapper { padding:0 38px 0 0; clear:both; } .bodyWrapper .bodyWrapper2 { float:right; overflow:hidden; } .bodyWrapper .bodyWrapper2 #content { width:660px; padding-bottom:30px; } .bodyWrapper .bodyWrapper2 #content.wide { width:100%; padding-bottom:30px; } - Variabler
Variabler är så klart ett bra tillskott till CSS då man enkelt kan specificera upp dem och ändra på ett ställe för hela siten. Variabler deklareras och används på följande sätt:@columnWidth: 220px; @blue: #1954a6; @tableBackgroundColor: @blue; @pageInset: 38px; @spacing: 10px;
- Mixins
Mixins är återanvändbara kodstycken som enkelt kan infogas där de ska användas. Det gör att du enkelt kan ändra på ett ställe och få det att slå igenom på alla ställen där det används samt att det gör dina filer betydligt mindre och strukturerade. Här kommer ett exempel:.centered { margin-bottom: 0; margin-left: auto; margin-right: auto; margin-top: 0; }Sedan kan du enkelt använda detta mixin så här:
.content { .centered; } - Ovanstående Less-kod omvandlas då till:
.content { margin-bottom:0; margin-left:auto; margin-right:auto; margin-top:0; } - Funktioner och operationer
Till sist har vi funktioner och operationer som gör att du kan bygga på ett steg till jämfört med mixins eftersom de blir mer dynamiska. Operationer gör att man enkelt kan återanvända variabler men genom att använda dessa som bas för exempelvis avstånd, storlekar etc. Funktionerna får så klart mer dynamik genom att du kan skicka med parametrar som du sedan använder..linkArrow(@color: @linkArrowColor) { color: @color; font-size: @normalFont * 3; }
Nackdelarna 
Det finns så klart en del nackdelar också även om de inte är så betungande. Men det är klart att det är mindre komplext att bara skriva css rakt upp och ner i en .css fil än att behöva addera less.js eller installera någon av de kompilatorer som finns för bl.a. ruby, php, .net och Mac OS X.
Några saker att tänka på
Några generella/mjuka saker jag tycker man bör tänka på innan man sätter igång att implementera designen med less/css är:
- Bestäm hur ni syntaxmässigt väljer att skriva er css-kod och håll er till det ni kommer fram till.
Det finns många sätta att skriva less-kod på men det är viktigt för projektet att koden är konsekvent så att man effektiviserar arbetet med igenkänning när det finns flera personer i utvecklingsteamet. - Bestäm hur ni väljer att positionera era element m.h.a. margin och padding. En bra regel som har fungerat för oss är att ett givet element alltid får sin ”spacing” från det element det ligger i. Så om flera nyhetspuffar ligger i en lista så är det listan som bestämmer avståndet mellan nyheterna o.s.v.
- Strukturera upp filerna och använd om det behövs, importfiler i större strukturer för mer överskådlighet.
Exempel på detta kan vara:/css /mixins /table.less /headers.less /variables /colors.less /spacings.less standard.lessDär
standard.lessär den fil som inkluderar alla de andra filerna och den fil som sedan kompileras tillstandard.css.
standard.lessskulle i detta fall kunna se ut så här:/* * * Import of .less files * * */ @import "css/mixins/table.less"; @import "css/mixins/headers.less"; @import "css/mixins/colors.less"; @import "css/mixins/spacings.less";
Jag skulle starkt rekommendera att testa less CSS, det tar inte lång tid att sätta upp för att prova och jag tror att du snart märker att det både går snabbare samt att du får en bättre överblick i den nya strukturen.
Har du några tips eller andra tankar, erfarenheter etc? Skriv i så fall en kommentar och dela med dig av dina erfarenheter.WordPress stickers från Matt Mullenweg – grundare av WordPress
Det hela började med att jag surfade runt på nätet för att se vad det fanns för gadgets runt varumärket WordPress och hittade då en blogg där en kille hade en hel uppsjö av WordPress-klistermärken. Jag försökte då hitta en site där man kunde köpa sådana men kunde inte hitta någon. Jag gick då tillbaka till bloggen och hittade en kommentar som löd i stil med: -”Skicka ett mail till Mat Mullenweg och be att han skickar några klistermärken”.
För den som inte vet vem Matt Mullenweg (@photomatt) är så har han grundat WordPress (founding developer of WordPress) och företaget Automattic. Jag tänkte att jag har inget att förlora så jag skickade ett mail men trodde varken att jag skulle få ett svar eller några klistermärken med tanke på hur många järn i elden Matt har. En av anledningarna att jag intresserat mig för WordPress mer än någonsin under detta år är att jag har varit med och byggt en stor ”multiuser” instans och i den en hel del plugins. Jag har inte varit själv i detta och tyckte det skulle vara roligt att få dela med sig av lite schysta klistermärken i teamet jag jobbar med.
Men så idag kom de!
Idag på morgonen kom ett paket som såg ganska suspekt ut men det var adresserat till mig så jag öppnade det och till min förvåning och skratt drog jag ut en hel bunt med WordPress-klistermärken av all de slag.
Jag vill passa på att tacka och ge en eloge till Matt och hans gäng för att de tar sig tid och uppmuntrar de som använder deras plattform!
En prototyp av pissappen – den potentiella storsäljaren
När tröttheten slog till vid en kaffepaus under fredagen den 1 april så kom jag på en brilliant idé. Vi pratade om appar, iPads och annat mobilt som vi hade tagit med oss från Webbdagarna och då slog denna idé ner som en blixt från klar himmel.
De flesta och framför allt alla killar har väl sett gummiplattan som ligger i pissoaren. Den som har till syfte att få killar att pricka rätt när de urinerar på krogtoaletter. Genom att lägga plattan i pissoaren tycker killarna det är kul att försöka träffa mitt i och det får till följd att det blir mindre spill för krogpersonalen att ta rätt på när kvällen är slut.
Det var då som jag kom på den, idén om att man borde bygga pissappen, en potentiell storsäljare. Den som gör att tekniknördar får större användning av sin iPad än någon gång tidigare. Jag har inte hunnit utveckla den slutgiltiga appen än så länge men jag tänkte dela med mig av mina prototyper som jag har skissat och byggt ihop.
1 st iPad och plastfolie
Prototypmåltavlan är applicerad på iPad:en
Närbild på prototypmåltavlan
Under testfasen vill man kanske ha ett skydd i form av plastfolie
Med närmare eftertanke, nu när iPad2 rullas ut så skulle denna app vara den ultimata avslutningsappen man installerar och använder och sedan säger hej då till sin gamla iPad(1) platta.
Dessutom så har jag en vidareutveckling som kanske kan komma i version 2.0 av Pissappen eftersom iPad2 har inbyggd webbkamera. Med den skulle man kunna fota alla som är med och skapa en ”high score”-lista med foto 
Vad tror ni?
Det bästa från webbdagarna 2011
Webbdagarna som gick av stapel här i veckan var enligt mitt tycke en blandning av högt och lågt. Det låga bestod ofta i långa företagspresentationer och en orgie av siffror och procentsatser. Det fanns dock också en hel del otroligt inspirerande och intressefångande presentationer av duktiga talare. Här följer ”the best of the best” från Webbdagarna.
Morris Packer – från Morris Motorcycles
Jag blev så glad när denna man, Morris Packer kom upp scenen och bara ägde. Luta dig tillbaka och lyssna på denna resa från en tweet till… ja, titta och se.
Tre riktigt bra, roliga och inspirerande föreläsningar
Detta är tre bra föreläsningar av Sogetis Andreas Sjöström, Cybercoms Björn Elmberg och till sist galningarna från Creuna, Martin Deinoff och Fredrik Marcus
OBS: Spola fram till 28:30
Internet om fem år med Jocke Jardenberg, väl värd att se!
OBS: Spola fram till 1:12:48
Summa sumarum så var Webbdagarna bra men jag efterlyser mer djup, framför allt när man delar upp konferensen i olika spår. Det är också kul att se att konferensens arrangör, Internetworld tog publikens respons via Twitter på allvar.
Konverteringsspåret på Webbdagarna
Konverteringsspåret på Webbdagarna sänds nu live från http://jardenberg.se/live/
Live från Webbdagarna
5 WordPress plugins du måste ha!
När jag installerar WordPress på en ny site så finns det fem plugins som jag alltid installerar direkt. För mig känns det nästan som att de ingår i WordPress-plattformen numera. Förutom dessa plugins är det en självklarhet att använda Akismet som följer med men detta måste aktiveras med sin API-nyckel först innan det kan användas.
- WordPress.com Stats
När man har skapat en ny site är det kul att se hur många besökare man har på enkelt sätt via sitt administrationsgränssnitt. - Hotfix
För inte så länge sedan släptes detta plugin som används för att snabbt komma till rätta med buggar i nya versioner av WordPress-plattformen. Hotfix pluginet uppdateras med buggfixar mellan releaserna av WordPress vilket göra att det är både enkelt och snabbt att hålla sin site säkrad och buggfri. - All in One SEO Pack
All in One SEO Pack är ett välanvänt plugin för att se till att få med de viktiga element som sökmotorerna vill ha på varje sida. Detta plugin hjälper dig som är redaktör att hålla ditt innehåll sökmotoroptimerat och därmed sökbart. - Google Analytics Injector
Om man vill koppla sitt Google Analytics-konto till sin WordPress blogg/site så kan man väldigt enkelt göra det med hjälp av Google Analytics Injector. Du skriver bara in din spårningskod (tracking code) och sen är det klart. Jag är väl kanske lite subjektiv eftersom jag har byggt detta plugin men det må så vara. - Like
När man bygger en site/blogg och förhoppningsvis vill förmedla något via den så finns det en hel del ”Share”-plugins som gör det enkelt att sprida sitt innehåll till andra sociala medier. Ett av dessa plugins som jag verkligen gillar är Like. Like lägger till en Like/Gilla-knapp som visar hur många som har gillat sidan/inlägget. När besökaren klickar på den så publiceras denna ”Gilla” på besökarens egen aktivitetsström på Facebook. (detta kräver att besökaren är inloggad i Facebook men vem är inte det
)
WordPress, plugins & bättre koll på communityn
På senare tid har jag lagt ner en hel del energi på plattformen WordPress både i form av att utveckla plugins men också att i större utsträckning få koll på dess community. Förutom att ha ett intresse för det man gör när man ska lära sig något nytt område så tjänar man väldigt mycket tid och energi på att följa ”likasinnade” på Twitter, Facebook och andra sociala medier.
Jag brukar tidigt identifiera ett par nischade bloggar inom ämnet och dessa kommer självklart ofta från de personer man har hittat i de sociala kanalerna.
Två egenutvecklade WordPress plugins och ett till på väg
När man sitter och utvecklar något som själv behöver så känner man så klart nyttan av det men känslan när även andra laddar ner och får användning av det man har gjort känns ännu bättre.
Att vara med och bidra är helt enkelt en drivkraft i sig!
De två plugins som jag nu har gjort är:
- Google Analytics Injector
Ett plugin som gör det väldigt enkelt att börja använda Google Analytics på din blogg. Du kan ladda ner den senaste versionen på: http://wordpress.org/extend/plugins/google-analytics-injector/ - Ustream for WordPress
Ettt plugin som gör att du enkelt kan använda video streaming-tjänsten på din blogg. Läs mer och ladda ner pluginet här: http://wordpress.org/extend/plugins/ustream-for-wordpress/
…och det plugin som jag håller på att bygga tillsammans med, Patric Jansson och Peter Reuterås är ett plugin för att extrahera sin ”Star Craft II”-profil från Battle.net till sin blogg. Detta plugin är så klart ett ”just for fun plugin” men jag tror det skulle kunna få bra spridning då det är många som har bloggar i samband med sitt spelande.
Bambuser for WordPress – modifierat
Jag hittade pluginet ”Bambuser for WordPress” på WordPress.org och blev glad eftersom jag behövde det för ett projekt jag är med i. Men när jag installerade det så fungerade det inte i den senaste WordPress versionen. Jag tog då och modifierade det så att det nu fungerar och har kontaktat Mattias Norell som är skaparen av pluginet för att erbjuda honom koden så att han kan uppgradera sitt plugin även på WordPress.org.
När jag sedan Twittrade om det var det en Hans Eriksson som frågade via Twitter om han kunde få en länk till det så jag skapade en länk på sidan WordPress plugins till det modifierade pluginet.
Han tackade och jag tog då en titt på hans Twitterprofil och insåg då att det var Bambusers CEO. Värden kan vara ganska liten på nätet
Hoppas någon fler än jag har användning för det och jag vill tacka Mattias för ett mycket lättanvänt plugin.
Se en exempelvideo nedan:
Gecko Solutions 2010 – I molnet av taggar
Snart är 2010 slut och innan alla ska gå på julledighet så tänkte jag kort sammanfatta året i ett moln av taggar. God Jul och Gott Nytt År!
Gecko Solutions 2010 - I molnet av taggar
