Det är spännande tider för Laravel, MVC-projektet som på senare tid har seglat upp som ett av det mer intressanta php-rameverksprojekten. Var beror det på? Dels har använder man sig av en väl känd arkitektur som många tycker om och snabbt förstår, dels så har det alltid varit väl dokumenterat men framföra allt så har det gjort php.utveckling till något njutbart igen.

Syntaxen är superfin, orm-klasserna gör det rails-enkelt att hämta och returnera data, Composer gör det underbart enkelt att uppdatera och utöka/integrera. Laravel är helt enkelt väldigt lätt att tycka om.

Så vad kommer då för godis i den slutgiltiga version 4?

Hantering av köer, som gör att du kan flytta bort lite tyngre jobb från dina vanliga sidrequests, till exempel skicka mail eller olika typer av meddelanden.

Queue::push('SendEmail', array('message' => $message));

Cachen har fått sektioner, vilket gör att du kan gruppera entiteter i större ”klumpar” och sedan ta bor alla dessa vid samma tillfälle.

Cache::section('people')->put('John', $john);

Ta ner appen för service, enkel men bra om man vill uppdatera.

App::shutdown

Optimering av klasser som laddar via.

artisan optimize

En hel del nya helpers för form och string.

echo Form::select('size', array('L' => 'Large', 'S' => 'Small'));

Eloquent har även den fått endel uppdateringa som till exempel, Touching Parent Timestamps, där man på ett enkelt sätt kan uppdatera relaterade tabellers timestamp.

protected $touches = array('post');

”Mjuk radering” där man inte tar bort ett record vid delete utan att man iställer lägger till en deleted_at i tabellen. Sedan man kan köra en restore på sitt record och återskapa posten.

protected $softDelete = true;

$user->restore();

Detta är bara ett litet smakprov på vad som kommer och vill man själc läsa changloggen så finns den här.

Jag tycker väldigt bra om Laravel, och en av de verkliga styrkorna är ramverkets möjlighet att göra så kallade custom macros, ofta kallat helpers eller view helpers. Macros är små metoder som man kan skriva och sedan återanvända på många olika ställen. Det finns en del inbyggda och man kan enkelt skapa egna.

Vill man skriva ut en img-tag kan man till exempel använda detta:

echo HTML::image('img/smile.jpg', $alt_text);

Man vad har detta med cache att göra? Jo, på en av de sajter jag jobbar med behöver jag rendera alla sidor i realtid. Det är en sajt där användarna loggar in och varje enskild sida är helt unik till varje besökare. Skulle en användare uppdatera sitt namn måste flera hundra sidor ändras (om hela sidor cachas). Här behöver jag en helt annan lösning.

Jag har byggt ett macro som tar emot några få parametrar och den ser ut så här.

/*
* Return a fragment of a user
* Usage HTML::user_fragment($id,'user_name')
*
*/
HTML::macro('user_fragment', function($id,$fragment){
$user = User::getUser($id);
if(isset($user->$fragment))
return e($user->$fragment);
});

Jag skickar in en användares id samt vilket fält från databasen som jag vill ha tillbaka. Objektet $user är cachat och på alla sidor som ska visa en användares namn används samma objekt. Ändrar man något i databasen, till exempel användarens namn så återspeglas ändringen omedelbart på alla sidor.

Macron i Laravel kan användas både i vyer och i modeller så var man än behöver få ut data ur objektet $user kan man använda macrot, superbra!

Metoden User::getUser ser ut så här.

public static function getUser($id){
return (self::getRequestCache($id) ? self::getRequestCache($id) : self::getUserFromDb($id));
}

getRequestCache kollar om samma $user redan har returnerats ut tidigare på sidan (i samma request), och då redan finns tillgänglig i en variabel. Saknas objektet använder jag getUserFromDb(); som hämtar ut objektet och skapar cahcen med Laravel Cache::remember.

På så sätt ser jag till att cacha alla viktiga objekt och jag kan samtidigt rendera alla sidor helt dynamiskt.

Jag kastar in lite fler användbara Larave-macros som ni gärna får använda.

Denna skapar länkar i en text.

/**
 * Try to create links in text
 * usage HTML::make_links($text);
 */
HTML::macro('make_links', function($text){
	$text = preg_replace(
		array(
   			'/(^|\s|>)(www.[^<> \n\r]+)/iex',
   			'/(^|\s|>)([_A-Za-z0-9-]+(\\.[A-Za-z]{2,3})?\\.[A-Za-z]{2,4}\\/[^<> \n\r]+)/iex',
   			'/(?(?=<a[^>]*>.+<\/a>)(?:<a[^>]*>.+<\/a>)|([^="\']?)((?:https?):\/\/([^<> \n\r]+)))/iex'
 		), array(
			"stripslashes((strlen('\\2')>0?'\\1<a href="\&quot;http://\\2\&quot;" target="\&quot;_blank\&quot;">\\2</a> \\3':'\\0'))",
   			"stripslashes((strlen('\\2')>0?'\\1<a href="\&quot;http://\\2\&quot;" target="\&quot;_blank\&quot;">\\2</a> \\4':'\\0'))",
   			"stripslashes((strlen('\\2')>0?'\\1<a href="\&quot;\\2\&quot;" target="\&quot;_blank\&quot;">\\3</a> ':'\\0'))",
		), $text
	);
	return $text;
});

Och den här använder jag för att leverera speciella styles till ie8 och ie9.

/**
 * This handle styling, check for user agent and send the correct one
 * to the Assets lib
 */
HTML::macro('page_css', function($file){

	if(!isset($file))
		return;

	if( stristr('MSIE 8.0', $_SERVER['HTTP_USER_AGENT']) OR stristr('MSIE 9.0', $_SERVER['HTTP_USER_AGENT'])){
		Assets::css($file . '-ie');
	} else {
		Assets::css($file);
	}

	return Assets::renderCss();

});

Jag hoppas ha inspirerat några till att bygga egna macros och framför allt till att använda Laravel.

Pakethantering har historiskt inte varit fantastiskt i php-världen. Det beror bland annat på att utvecklare har gjort sina klasser och funktioner på olika sätt och då har det varit svårt att få dem fungera tillsammans. Drupal har haft en helt egen kodstandard som inte fungerat med Zend Framework osv. Jo, man kan skriva en wrapper och lösa problemet men…

Vore det inte bättre om php-klasser fungerade tillsammans på ett väldigt enkelt sätt? Självklart vore det så.

Lösningen finns och den heter Composer (och PSR-0). Det är en pakethantering för php och hanterar beroenden mellan klasser. Man kan säga att Composer klistrar ihop dina egna klasser med andras, underbart och väldigt användbart.

Composer har två grundbultar, dels repot Packagist som listar paket (drygt 4000 just nu) du kan inkludera i ditt projekt. Och dessutom finns en terminal-applikation.

För att installera Composer använder du terminalen. Gå till rooten (förmodligen webb-rooten) i ditt projekt och curla hem en .phar.

curl -s getcomposer.org/installer | php -d detect_unicode=Off

Därefter skapar du en composer.json och lägger denna på samma ställe som composer.phar nu ligger i, dvs i rooter i ditt projekt. I json-filen specar du vilka paket du vil ha.

{
  "require": {
    "imagine/Imagine": "dev-develop",
    "swiftmailer/swiftmailer": "4.2.x-dev",
    "monolog/monolog": "1.0.0"
  }
}

För att hämta hem paketen kör du.

php composer.phar install

Och för att i framtiden uppdatera paketen och se till att du har senaste versionen kör du

php composer.phar update

Nu kan du autoladda paketen i ditt projekt med hjälp av.

<?php require_once __DIR__ . '/vendor/autoload.php'; ?>

Skulle något något av dina paket ha ytterligare beroende hanterar Composer detta och ser till att även dessa paket laddas hem och blir tillgängliga.

Läs mer här.

http://nelm.io/blog/2011/12/composer-part-1-what-why/

http://blog.fortrabbit.com/handle-your-dependencies-with-php-composer/

Häll upp en kaffe, ta fram en skön stol och läs For a Future web av, @brad_frost

Efter en del påstötningar från kollegor har jag testat Lesscss. Det är en teknik som utvidgar klassisk CSS med fina saker som variabler, funktioner (mixins) och en del annat bra. Det är väldigt praktiskt om man till exempel har kod i sitt CSS som återkommer på flera olika ställen. Då kan man istället deklarera detta på ett ställe och sedan återanvända på ett enkelt sätt.

För att testa har jag byggt en enkel grid för responsiv desig. Jag använde 12 spalter och gutter runt alla spalter (klassisk 960.gs-tänk). Med traditionell CSS hade jag hårdkodat fyra varianter mobil, tablet, desktop och huge. Men Lesscss löser detta på ett smidigt sätt.

Jag har en mixin (funktion) för griden som jag sedan matar med tre variabler, spaltbredd, gutter och totalbredd. Inne i min grid-mixin räknar jag sedan fram exakta bredder på de olika blocken eller på min wrapper. Redan i detta läge har jag alltså jag sparat cirka 75% av koden eftersom jag gör en grid istället för fyra, trolleri.

Min Mixin ser ut ungefär såhär.

.grid(@block,@gutter,@container) {

	/* Blocks */
	.block-1 { width: @block }
	.block-2 { width: @block * 2 + @gutter * 2 }
	.block-3 { width: @block * 3 + @gutter * 4 }
	.block-4 { width: @block * 4 + @gutter * 6 }
	.block-5 { width: @block * 5 + @gutter * 8 }
	.block-6 { width: @block * 6  + @gutter * 10 }
	.block-7 { width: @block * 7 + @gutter * 12 }
	.block-8 { width: @block * 8 + @gutter * 14 }
	.block-9 { width: @block * 9 + @gutter * 16 }
	.block-10 { width: @block * 10 + @gutter * 18 }
	.block-11 { width: @block * 11 + @gutter * 20 }
	.block-12 { width: @block * 12 + @gutter * 22 }

	/* Prefix */
	.prefix-1 { padding-left: @block + @gutter * 2; }
	.prefix-2 { padding-left: @block * 2 + @gutter * 4; }
	.prefix-3 { padding-left: @block * 3 + @gutter * 6; }
	.prefix-4 { padding-left: @block * 4 + @gutter * 8; }
	.prefix-5 { padding-left: @block * 5 + @gutter * 10; }
	.prefix-6 { padding-left: @block * 6 + @gutter * 12; }
	.prefix-7 { padding-left: @block * 7 + @gutter * 14; }
	.prefix-8 { padding-left: @block * 8 + @gutter * 16; }
	.prefix-9 { padding-left: @block * 9 + @gutter * 18; }
	.prefix-10 { padding-left: @block * 10 + @gutter * 20; }
	.prefix-11 { padding-left: @block * 11 + @gutter * 22; }

	/* Suffix */
	.suffix-1 { padding-right: @block + @gutter * 2; }
	.suffix-2 { padding-right: @block * 2 + @gutter * 4; }
	.suffix-3 { padding-right: @block * 3 + @gutter * 6; }
	.suffix-4 { padding-right: @block * 4 + @gutter * 8; }
	.suffix-5 { padding-right: @block * 4 + @gutter * 10; }
	.suffix-6 { padding-right: @block * 4 + @gutter * 12; }
	.suffix-7 { padding-right: @block * 7 + @gutter * 14; }
	.suffix-8 { padding-right: @block * 8 + @gutter * 16; }
	.suffix-9 { padding-right: @block * 9 + @gutter * 18; }
	.suffix-10 { padding-right: @block * 10 + @gutter * 20; }
	.suffix-11 { padding-right: @block * 11 + @gutter * 22; }

	/* Wrapper */
	.wrapper { width: @container; margin-left: auto; margin-right: auto; }
	.wrapper .row { display: inline-block; margin: 0 -@gutter; width: auto; }

	/* Block Commons */
	.block-1, .block-2, .block-3, .block-4, .block-5, .block-6, .block-7, .block-8, .block-9, .block-10, .block-11, .block-12 { display: inline; float: left; margin-left: @gutter; margin-right: @gutter; }

}

För att skapa en grid för desktop med korrekta mått kör jag sedan följande.

.grid(60px,10px,960px);

Eller för en tablet-grid

.grid(43px,10px,756px);

Givetvis vill jag att min grid är responsiv och för att lösa det har jag tagit inspiration från Gilles Vandenoostendes fina koncept, Sensible Mediaqueries. Tanken är att med hjälp av Lesscss använda mediaqueries som inbjuder till att man arbetar med ett Mobile First-tänk. Samt att man får ett rimligt bra stöd för IE, som ju har en del problem med mediaqueries.

Det vanliga upplägget är att man bygger sin version för desktop först, och att man därefter ”nedgraderar” den till tablet och mobile. Det brukar leda till att man tvingas ”nolla” massa attribut i sina CSS-er för att ta bort saker.

Gilles upplägg är omvänt. Man startar man med att bygga för mobile och därefter ärver man till de större formaten, dvs desktop använder Mobile -> Tablet -> Desktop. Man lägger alltså till kod för större device snarare än strippar bort för mindre.

På så sätt blir det naturligt att först bygga mobilsajten, därefter bygger man tablet och sist desktop. Desktop kommer då använda CSS för mobilen, tablet och desktop. Man arbetar helt enligt Mobile First och arbetar sig mot större skärmar, och man levererar minst CSS-regler till den minsta enheten, visst känns det helt rätt!

@import "global.less";
@import "grid.less";
@import "mobile.less";
@import "tablet.less";
@import "desktop.less";
@import "huge.less";

@media only screen and (min-width: 100px) {
	.mobile;
}

@media only screen and (min-width: 730px) {
	.tablet;
}

@media only screen and (min-width: 970px) {
	.desktop;
}

@media only screen and (min-width: 1280px) {
	.huge;
}

För att hantera IE så använder man en egen css där jag väljer att avsluta arvet vid desktop.

@import "global.less";
@import "grid.less";
@import "mobile.less";
@import "tablet.less";
@import "desktop.less";

.mobile;
.tablet;
.desktop;

För mer detaljerad information om Lesscss så läs Lesscss.org.

För mer information om responsivt och lesscss läs Gilles artikel

För att se allt i drift, titta i källan på Fosseus.se, givetvis lever jag som jag lär.

Du kommer inte ångra dig!

Helt plötsligt blev Drupal intressant. Man kommer basera kommande Drupal 8 på det smått fantastiska ramverket Symfony2. Nu saknas bara en vettig paketering och hantering av templates så kanske det lyfter ordentligt?

I helgen jobbade jag en del timmar på att mobilanpassa min poesisajt Poetfreak.com. Det gick förvånande snabbt med hjälp av css media queries. Delvis beror det på att jag tidigare i projektet har tagit höjd för detta och på så sätt grundat lite bättre i koden.

Jag har tidigare skrivit lite om tankarna om mobile first (vilket jag alltså inte själv arbetat efter i detta projekt) och nu insåg jag verkligen nyttan av att arbeta så, Väldigt snabbt skalade jag bort onödiga element från mobilsajten vilket direkt ledde till än bättre desktopsajt. Det som var svårt att se på desktop blev helt givet i mobilen.. Resultatet? ja surfa in på www.poetfreak.com så ser du.