Minifiera CSS med hjälp av CssMin i Symfony2

Jag höll på att slita håret av mig för att få detta att fungera korrekt så jag tänkte att det blir ett perfekt blogginlägg för andra som kanske sitter med samma problem. För min del var det största problemet att jag inte hittade någon bra dokumentation då de flesta verkade köra med YUI compressor som det också finns dokumentation om på Symfony’s egna sida.

Men jag ville ju rulla igång CssMin och inte något annat! Så efter en längre tid av att slita mig i håret och frågor till min Symfony2 guru så kommer jag över en länk som jag borde hittat för längesen. Det var ju så klart CssMin paketetComposer’s egna sida, där du förövrigt kan söka efter paket.

Så in i composer.json filen kastar jag mig och slänger in följande rad under ”require”:

"natxet/CssMin": "dev-master"

Composer update, rensa cache, kör en assetic dump och får ett error som säger ”Method Assetic\AssetWriter::getCombinations() does not exist”. Som tur är hittar jag snabbt en lösning på detta och det är att lägga till ytterligare en rad under ”require” i composer.json filen:

"kriswallsmith/assetic": "v1.1.0-alpha4"

Detta löser felet efter en composer update. I app/config/config.yml ser vi till att följande rad finns med under assetic -> filters:

cssmin: ~

Sen går vi till vår view och ser till att vi använder cssmin på våra filer:

{% stylesheets 
'css/*'
filter="cssmin"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

(Du justerar självklart pathen till din path för css filerna)

Sen kan du rensa cache för att vara säker, kör assetic:dump och voila! Allt är minifierat!

Sass – Syntactically Awesome Stylesheets

Sass är kort och gott CSS fast mycket bättre. Sass är även något som jag håller på att börja använda mer och mer i och med att jag just nu lär mig Symfony2.

För att bara dra ett enkelt exempel så kan du jämföra Sass med CSS syntax. Här så demonstreras hur du kan använda dig av variablar i Sass:

 /* Sass */

$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue


/* CSS */

.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

Jag kommer personligen börja använda det mycket mer framöver för det känns som det kommer spara massor av tid och det är betydligt lättare att läsa och ändra i än CSS.

Vim snippets för Symfony2 entities

Jag sitter precis och har börjat lära mig Symfony2, som för övrigt är riktigt riktigt spännande och bra. Något jag direkt störde mig på var annotations för Doctrine när jag skulle bygga upp mina entiteter. Som tur är så sitter jag med Vim som min editor of choice och kan enkelt fixa detta med snippets!

snippet ent "New Doctrine2 entity" !b
<?php

namespace `!v substitute(substitute(substitute(expand("%:p"), '\v(.*\/\l+)((\/\u\w+)+)\/\u\w+.php$', '\2', ''), '\/', '\\', 'g'), '^\\', '', '')`;

use Doctrine\ORM\Mapping as ORM;

/**
 * @ORM\Entity
 * @ORM\Table(name="${1:`!v substitute(substitute(Filename('', 'myClass'), '\v^(.)', '\l\1', ''), '\v(\u)', '_\l\1', 'g')`}")
 */
class ${2:`!v Filename('', 'MyEntity')`} {
  $3
}
endsnippet

snippet entid "Doctrine2 Entity ID" !b
/**
 * @ORM\Id
 * @ORM\Column(type="integer")
 * @ORM\GeneratedValue(strategy="AUTO")
 */
${1:protected} $id;
endsnippet

snippet entx "Doctrine2 Entity X" !b
/**
 * @ORM\Column(type="$1")
 */
${2:protected} $$3;
endsnippet

(Detta är skapat för UltiSnips)

Flödet med detta är då följande:

ent<tab>
entid<tab>
entx<tab>

ent gör så du får början av entityfilen färdig och den tar filnamnet som grund i namnet, entid slänger upp id mallen och med entx kan du göra ett eget värde.

Flera cursors samtidigt i Vim

Att kunna skriva något på flera ställen samtidigt sparar väldigt mycket tid. Med hjälp av Vim Multiple Cursor så kan du nämligen göra detta. Exemplet här nedan visar hur du snabbt kan välja ett tre av samma ord och ändra dem alla samtidigt.

multiple cursors

Det enda du behöver trycka på är Ctrl-N för att välja det ord du står på och sedan repetera så många gånger som det repeteras. Sen kan du göra som i exemplet och bara trycka c och skriva din ändring.

Utför ett normal mode kommando i insert mode

Om du använt Vim mycket så har du säkert tänkt att det vore skönt att kunna utföra ett normal mode kommando när du står i insert mode. Detta är fullt möjligt genom att skriva följande:

Ctrl-O

Detta gör att du hamnar i operation mode och det gör att du kan t.ex hoppa fram ett ord med w eller kanske klistra in något med p och när du utfört kommandot så hamnar du i insert mode igen.

Uppdatera och installera med en global Composer

Composer är en dependency manager för PHP och hjälper dig att enkelt uppdatera och installera paket. Något du vill göra däremot är att kunna använda kommandot globalt och inte bara i enskilda projekt hela tiden.

Så vad du börjar med är att lägga in composer.phar i /usr/local/bin och sedan ändrar du namnet från composer.phar till bara composer för att göra det hela enklare.

mv composer.phar /usr/local/bin/composer

Efter detta måste du lägga till /usr/local/bin i open_basedir i php.ini:

open_basedir = /srv/http/:/usr/local/bin/

Genom att lägga till denna path i open_basedir så gör du det möjligt för PHP att använda sig av filhantering på dessa platser. Vilket innebär t.ex fopen() med flera, som är ett krav för att composer ska fungera överhuvudtaget.

Efter detta så är du klar och redo för att använda composer vart du än står!

Grunt – gör det lite enklare för dig själv

grunt

Med Grunt slipper du göra alla de tråkiga uppgifterna så som att minifiera en js eller css fil vid ändringar. Genom att ställa in Grunt korrekt så kan du med ett enda kommando slå ihop alla de här uppgifterna och spara väldigt mycket tid. Att minifiera är så klart inte allt Grunt klarar av utan det finns en lång rad med plugins du kan installera för att utföra många många uppgifter.

För att få en bättre förståelse och en genomgång av Grunt så kolla på videon här nedan:

Jämför två filer med hjälp av Vim

Det finns lite olika verktyg för att jämföra två filer med varandra. Men använder du Vim så har du redan ett sådant verktyg tillgängligt!

Skriv bara följande kommando:

vim -d <fil1> <fil2>

vimdiff

Google I/O 2013 – förbättringar och kommande ändringar

Igår hölls Google I/O 2013 och under 3.5 timmar satt jag fastklistrad och kollade live när de presenterade många förbättringar och kommande ändringar på sina produkter. Det tog inte lång tid innan jag gick in och kollade på alla ändringar och uppdaterade tills de kom ut direkt efter keynoten.

Bland dessa förbättringar och ändringar så var Auto Awesome en av dem. Vad den gör är att redigerar och förbättrar de foton du laddar upp på Google+. Självklart finns alternativet att inte använda detta. Men vissa foton som jag testade det på såg jag inte någon speciell ändring på eller så blev det faktiskt inte bättre. Men det är en trevlig feature som säkert kommer användas flitigt.

auto-awesome

Google Maps fick en hel del förbättringar också. Dels om du är ute och kör och använder dig av Maps så kan du nu se om en trafikolycka har hänt längre fram på vägen. I så fall får du även en alternativ väg du kan köra för att ta dig förbi olyckan och inte stoppas upp på grund av den.

google-maps

Google Play Music All Access (kunde de inte valt ett annat namn…) kommer nu slå sig in på streaming marknaden för musik i stil med Spotify. Jag tyckte interfacet såg bra och snabbt ut på presentationen samt att priset var lägre än Spotify. Mellan 54 till 67 SEK (7.99-9.99 USD) kommer det kosta i månaden att använda tjänsten. Det enda jag undrar är hur många artister som kommer finnas med från starten, om du jämför med t.ex Spotify.

google-music

Google Search får ett nytt tillskott genom sitt ”OK Google”. Det innebär att du kommer kunna tala med Google för sökningar, liknande det du har idag, men den stora skillnaden är att Google nu känner igen mer mänskliga fraser. Detta innebär t.ex att om du säger ”OK Google, hur är vädret i Stockholm?” följt av ”OK Google, hur långt är det dit?” så vet Google nu att du frågar om hur långt det är från din plats till just Stockholm. Du behöver alltså inte säga ”Hur långt är det till Stockholm” eftersom Google förstår sammanbandet i fraserna. Riktigt spännande ändring!

google-search

Google+ får sig ett rejält lyft. Dels ser det nu väldigt annorlunda ut men det finns även en hel del nya features. Auto Awesome jag nämnde är en del av dem och sedan har vi hashtags som nu sätts på inlägg. Dessa kan du sedan söka på och få se fler liknande inlägg eller kanske foton. En annan sak i just denna feature var att om du har taggat en bild på t.ex eiffeltornet och du inte nämner något om det i inlägget – för att få en hashtag – så vet ändå Google att det är eiffeltornet i och med sin bildigenkänning.

google-plus

Det sista som hände under Keynoten var att Larry Page framförde ett tal och pratade om Google och framtiden. Det var första gången vi har sett och hört från Larry på länge eftersom han varit dålig och haft stämbandsförlamning vilket gjorde att hans röst var väldigt förändrad vid detta talet. Han avslutade det hela med något som är ovanligt och det var med en Q/A där vem som helst fick ställa frågor.

larry-page

Självklart fanns det mycket mer de talade om under keynoten men dessa ändringar var några av de jag gillade mest och ser fram emot. De mesta av det de pratade om finns redan idag ute och tillgängligt men t.ex musiktjänsten finns bara i USA än så länge, så den får vi vänta på lite längre. Allt som allt tyckte jag det var en väldigt bra keynote med många bra presentationer och uppvisningar.

Snygga till din URL i Symfony2

I Symfony2 så får du från grunden en ganska lång URL som du ska hålla reda på. Oftast skriver du något i stil med localhost/<projekt>/web/app.php/<params> när du egentligen vill använda dig av localhost/<projekt>/<params>.

Den kan så klart snyggas till och det gör du genom att lägga till en virtualhost och sedan lägga till en rad i .htaccess.

Virtualhost:

# /etc/httpd/conf/httpd.conf
<VirtualHost 127.0.0.1:80>
  DocumentRoot /srv/http
  Alias /<projekt> "/srv/http/<projekt>/web/"
  <Directory "/srv/http/<projekt>/web/">
    Options All
    AllowOverride All
    Allow from All
  </Directory>
</VirtualHost>

.htaccess:

# /srv/http/<projekt>/web/.htaccess
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /<projekt>
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteRule ^(.*)$ app.php [QSA,L]
</IfModule>

Notera att detta är gjort på Arch Linux men sökvägarna bör stämma överens med vart dina filer ligger. Om inte så kan du säkert lista ut vart de ligger hos dig. Du ska så klart även byta ut <projekt> mot det projektnamn du använder dig av.