Andreas Karlsson

/

Om webbutveckling

Magento / WordPress / CodeIgniter / jQuery / Prototype /

Jag heter Andreas Karlsson och jobbar som webbutvecklare på Karlsson & Lord. Du når mig enklast genom andreas.karlsson@indiebytes.se eller 073-512 78 09.

4-7 juni 2011: Magento Developers Paradise på Ibiza

Några dagar efter att jag började på Improove försvann en av mina nya kollegor till Mallorca på ett Magento-evenemang som gick under namnet Magento Developers Paradise. Det han hade berätta när han kom tillbaka till kontoret några dagar senare gör att det nu känns högaktuellt att ta sig iväg till Ibiza 4-7 juni när nästa Magento Developers Paradise går av stapeln igen. Saxat från hemsidan:

”… learn and exchange ideas about Magento development, working with the Magento code base, creating extensions and sneak peaks into what the future holds. Join together with your peers, partners and Magento team members to learn the tips, tricks and techniques that have helped them succeed. Get insights into future versions of the Magento platform and get a head start on leveraging Magento for your success. Present your own ideas during our BarCamp and get instant feedback from your peers. Team up with other developers and develop new ideas together.”

Evenemanget kostar €550 fram till 10 april, därefter kostar det €750. I priset ingår det dessutom boende och mat. Flygresa tur och retur från Stockholm går att hitta från cirka 3000 kr just nu.

Jag ska dit, på ett eller annat sätt.

Uppdatering: jag kommer åka dit för jobbets räkning och rapportera på Improoves blogg.

passwd.it – en minimalistisk lösenordsgenerator

Jag har länge funderat på att bygga en enkel lösenordsgenerator med samma minimalistiska grepp som ex. vecka.nu och mittip.se. Idag tog jag tag i saken, registrerade domänen passwd.it och byggde den första versionen av sajten.

Just nu går det att styra längden med hjälp av GET-variabeln length: http://passwd.it/?length=7. Om man skulle vilja ha flera lösenord genererade så kan man få det i JSON-format genom att använda GET-variabelerna count och json: http://passwd.it/?json=1&length=21&count=10.

Vilka funktioner skulle ni vilja se?

URL-förkortare för Systembolagets varor

Sitter med en Liberty Ale och ser Niklas Jakobsen twittra om en URL-förkortare för Systembolagets varor som han byggt. Triggad av Systembolagets fula länkar kodade han ihop systmt.se på ett par timmar. Jämför följande länkar:

Lysande i all sin enkelhet.

WordPress blir större

WordPress storleksutveckling på wpsize.com

För ett par helger sedan började jag fundera på hur WordPress storlek på disk har förändrats från de första versionerna fram till idag. Det ledde till att jag registrerade domänen wpsize.com och byggde en enkel visualisering av storleksutvecklingen. Inte så mycket för den stora nyttan som för att det helt enkelt gick.

Sidan håller ett vakande öga på alla tags i WordPress SVN-repository och uppdaterar sig själv när så behövs. Detta sker genom ett par schemalagda skript som förbereder all data som sedan formateras och cachas med Memcached.

Innan WordPress 1.5 använde man inte SVN, så de första versionerna (som jag kunde hitta) har jag fått lägga till manuellt. Detsamma gäller för Spotify-länkarna till de jazzartisterna som versionerna har namngetts efter.

Grafen på sajten ritas ut med Google Chart Tools och matas med innehåll från tabellen med hjälp av Prototype.

Jag tar tacksamt emot idéer och förslag på förbättringar för wpsize.com, lämna en kommentar till inlägget eller kontakta mig på Twitter.

jQuery eller Prototype från Google Libraries API

Bland annat HTML5 Boilerplate använder sig av ett snyggt sätt att ladda in jQuery, där man primärt försöker ladda biblioteket från Google Libraries API. Men skulle det av någon anledning inte fungera så laddas istället en lokal kopia av biblioteket:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.4.js"%3E%3C/script%3E'))</script>

För att ladda Prototype på samma sätt:

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
<script>!window.Prototype && document.write(unescape('%3Cscript src="js/libs/prototype.js"%3E%3C/script%3E'))</script>

Ett bra verktyg för regular expressions

Jag hör till skaran som älskar reguljära uttryck, eller på engelska regular expressions, men har lite svårt att få grepp om dem och blir därför nästintill förvånad när de väl fungerar och gör det jag vill. Via Twitter hittade jag i veckan artikeln Regular Expressions for Dummies: Screencast Series av Jeffrey Way. NetTuts+-artikeln innehåller fem screencasts som går igenom, ja – vad vet jag… För när jag ögnade artikeln hade jag ganska snart tappat intresset för den och istället letat reda på det verktyg som används i åtminstone den första av filmerna.

RegExr

Verktyget heter RegExr och är utvecklat av GSkinner. Det är helt gratis och finns både i en webbaserad version och en vanlig som du laddar ner, installerar och kör från din egen dator (byggt på Adobe Air och fungerar på OS X/Windows/Linux). Med hjälp av RegExr kan man snabbt och enkelt skriva, redigera och laserslipa sina reguljära uttryck och direkt se konsekvenserna av det man gör. Learning by doing at it’s best.

Snyggare länkar för dina användare

Jag har just installerat tilläggen Author Slug och Author Slug Field på WordPress-installationen för Dagens jazz. Varför? För att få snyggare permalänkar för användarsidorna.

Author Slug låter dig ställa in http://example.com/author/author-name/ till att bli t.ex. http://example.com/medarbetare/author-name/. Det är en funktion jag kan tycka borde finnas med som standard i WordPress; det vore ett snyggt komplement under Inställningar → Permalänkar där man sedan tidigare kan ställa in egna värden för kategoribas och etikettbas.

Author Slug Field lägger till ett fält under Användare → Din profil där man får ställa in den sista delen av permalänken. http://example.com/author/admin/ kan nu ställas in till att exepmelvis bli http://example.com/author/fornamn-efternamn/.

Se exempel på Dagens jazz: http://dagensjazz.se/medarbetare/jimmy-asklund/.

Sätt upp en lokal utvecklingsmiljö i Leopard – steg för steg

Sedan en tid tillbaka har jag jobbat väldigt mycket tillsammans med Dabber, en trevlig webbyrå med fokus på video. Just nu jobbar vi med ett väldigt stort projekt där jag har ansvar för utvecklingen och att saker blir klara i tid. Till min stora glädje låg det även på min lott att plocka in en extern förmåga att hjälpa mig i utvecklingen. Så tidigare i veckan träffades jag och Erik Pettersson, som är – förutom en klippa på webb – en god vän, för att planera upp sommaren och projektet.

Det första steget blev givetvis att se över våra lokala utvecklingsmiljöer. I Leopard. Det som har skapat frustration och ominstallationer för mig under en lång tid. Men tack vare att Anton Lindqvist tipsade mig om hur han använt sig av MacPorts och hur han fått det att fungera bra så blev det inte fullt så krångligt som tidigare försök. Särskilt inte med tanke på att jag upptäckte hur man lätt avinstallerar allt man installerar med MacPorts. Efter ett par tre försök rullade allt på min ena dator, och med allt menar jag:

Fortsätt läsa så går jag igenom steg för steg hur jag gjorde. Om jag gjort fel någonstans, är otydlig, om det inte fungerar eller om det för den delen fungerar – lämna gärna en kommentar och hjälp mig på så sätt att förbättra det här inlägget.

Observera: vid ett par tillfällen i inlägget när vi ska redigera filer förekommer kommandot mate, det kräver att du har Textmate installerat. Har du inte det kan du lika gärna använda dig av till exempel pico eller vi.

Installera MacPorts

Först av allt, se till att ha Xcode installerat, det krävs av MacPorts. Installera sedan MacPorts enligt anvisningarna på deras hemsida. När installationen är klar, öppna upp ett nytt Terminal-fönster för att vara säker på att kommandot port har laddats in.

Det kan vara bra att notera att det vi installerar med hjälp av port hamnar som standard i /opt/local/, läs mer om det på deras hemsida.

Installera Python

Leopard skeppas med Python 2.5, men för enkelhetens skull installerar vi Python på egen hand för att ha allt samlat på ett ställe och ha full koll på hela utvecklingsmiljön. Jag har valt att använda mig av Python 2.6 här, men det ska gå lika bra med någon annan version. Man kan även installera flera Python-versioner och sedan enkelt växla mellan dem, till exempel med python_select som vi strax kommer att installera.

$ sudo port install python26
$ sudo port install python_select

Sätt Python-versionen som vi nyss installerade till standard med hjälp av python_select och kontrollera att det är korrekt Python-version som körs:

$ sudo python_select python26
Selecting version "python26" for python
$ which python
/opt/local/bin/python

Installera MySQL

$ sudo port install mysql5-server

För att MySQL ska startas automatiskt vid uppstart:

$ sudo launchctl load -w /Library/LaunchDaemons/org.macports.mysql5-server.plist

Ta reda på var din server socket ligger och skapa följande symboliska länkar så att PHP och Pyhton fungerar med MySQL:

$ mysql_config5 --socket
/opt/local/var/run/mysql5/mysqld.sock
$ sudo ln -s /opt/local/var/run/mysql5/mysqld.sock /tmp/mysql.sock
$ sudo mkdir /var/mysql
$ sudo ln -s /opt/local/var/run/mysql5/mysqld.sock /var/mysql/mysql.sock

Slå av MySQL, skapa rotanvändare (root) och standarddatabasen och slå sedan på MySQL igen:

$ sudo launchctl unload -w /Library/LaunchDaemons/org.macports.mysql5-server.plist
$ sudo /opt/local/lib/mysql5/bin/mysql_install_db --user=mysql
$ sudo launchctl load -w /Library/LaunchDaemons/org.macports.mysql5-server.plist

Sätt ett lösenord för root:

$ mysql5 -u root

mysql> UPDATE mysql.user SET Password = PASSWORD('password') WHERE User = 'root';
mysql> FLUSH PRIVILEGES;
mysql> quit

För att kontrollera att allt har gått bra, prova att logga in som root med det nya lösenordet:

$ mysql5 -u root -p

Installera MySQL for Python

För att MySQL och Python ska fungera tillsammans behöver vi installera följande koppling:

$ sudo port install py26-mysql

Installera Apache

Börja med att kontrollera att Webbdelning under Systeminställningar » Delning är inaktiverat. Annars riskerar vi konflikter mellan Leopards inbyggda Apache och vår installation. Sedan kan vi påbörja installationen:

$ sudo port install apache2

För att Apache ska startas automatiskt vid uppstart:

$ sudo launchctl load -w /Library/LaunchDaemons/org.macports.apache2.plist

Genom att lägga till ett alias för sudo /opt/local/apache2/bin/apachectl kan vi underlätta hanteringen av Apache. Öppna ~/.profile:

$ mate ~/.profile

Lägg till följande rad:

alias apache2ctl='sudo /opt/local/apache2/bin/apachectl'

När vi laddar om profilen ska vårt nyskapade alias börja fungera:

$ source ~/.profile

Efter omladdningen kan vi testa detta genom att exempelvis starta om Apache med:

$ apache2ctl graceful

Installera mod_python

mod_python är en Apache-modul som integrerar Python i servern. Installera den med:

$ sudo port install mod_python26

Innan modulen fungerar måste vi säga åt Apache att ladda in den, vilket vi gör senare i det här inlägget.

Har du Subversion installerat?

Subversion finns som standard i Leopard, men för att dubbelkolla att vi har det installerat kör vi:

$ svn --version

Skulle du inte ha det kan du enkelt installera det med:

$ sudo port install subversion

Installera Django

Det finns flera sätt att installera Django, här kommer vi att använda oss av Subversion och kommandot svn.

Vi hämtar hem den absolut senaste (trunk) samt den senast stabila versionen till en lämplig mapp med hjälp av svn:

mkdir ~/svn
svn co http://code.djangoproject.com/svn/django/trunk/ ~/svn/django_trunk
svn co http://code.djangoproject.com/svn/django/tags/releases/1.0.2/ ~/svn/django-1.0.2

Sedan tar vi reda på var site-packages ligger:

$ python -c "from distutils.sysconfig import get_python_lib; print get_python_lib()"
/opt/local/Library/Frameworks/Python.framework/Versions/2.6/lib/python2.6/site-packages

Nu när vi vet det kan vi skapa en symbolisk där till den Django-version du vill använda dig av:

$ sudo ln -s ~/svn/django_trunk/django /opt/local/Library/Frameworks/Python.framework/Versions/2.6/lib/python2.6/site-packages/django

Det sista steget vi gör för Django är att skapa ytterligare en symbolisk länk för kommandot django-admin.py så att vi lätt kan använda kommandot oavsett vilken mapp vi befinner oss i:

$ sudo ln -s ~/svn/django_trunk/django/bin/django-admin.py /opt/local/bin/django-admin.py

Installera PHP

$ sudo port install php5 +apache2 +fastcgi +imap +tidy +mysql5 +sqlite +pear +readline +sockets +t1lib

Innan PHP rullar som det ska med servern måste vi bland annat säga åt servern att ladda Apache-modulen för PHP, vilket är en av de sakerna vi ska göra härnäst…

Konfigurera Apache genom httpd.conf

$ mate /opt/local/apache2/conf/httpd.conf

Lägg till följande två rader i listan över moduler som Apache ska ladda, det är modulen för mod_python och för PHP:

LoadModule python_module modules/mod_python.so
LoadModule php5_module modules/libphp5.so

Leta reda på raden

#ServerName www.example.com:80

avkommenterad den och ändra den till

ServerName 127.0.0.1:80

Som standard pekar din server mot /opt/local/apache2/htdocs, personligen föredrar jag att använda mappen Sites (översatt till Webbsidor i Leopards grafiska gränssnitt), därför ändrar vi följande rad

DocumentRoot "/opt/local/apache2/htdocs"

och pekar istället DocumentRoot mot Sites:

DocumentRoot "/Users/username/Sites"

Vi ändrar även raden

<Directory "/opt/local/apache2/htdocs">

till att peka på samma mapp:

<Directory "/Users/username/Sites">

I det blocket sätter vi även

AllowOverride None

till

AllowOverride All

Som standard tittar vår server först och främst efter index.html när vi inte anger en specifik fil i vår sökväg. Där vill vi att Apache även ska titta efter index.php, sök reda på raden

DirectoryIndex index.html

och lägg till index.php:

DirectoryIndex index.php index.html

I blocket <IfModule mime_module> ska vi även lägga till följande rader för att servern ska tolka våra PHP-filer korrekt:

AddType application/x-httpd-php .php
AddType application/x-httpd-php-source .phps

Starta sedan om servern för att ändringarna ska börja gälla:

$ apache2ctl graceful

Fortsatt läsning

MacPorts – uninstall installed

Ett djupt andetag, det är dags. Ibland är det läge att börja om helt från scratch; sudo port -f uninstall installed. Hur kommer det sig att det blev så mycket krångligare att få till en bra lokal utvecklingsmiljö under OS X i och med Leopard? Frustration, det kan inte vara för mycket begärt. Nu gör vi ett nytt försök!

Thematic och sökrobotar

Thematic

Thematic

Nikke Lindqvists varning för WordPress-temat Thematic uppmärksammades bland annat av Computer Sweden och Tord Daniel Hedengren. Efter att ha träffat Nikke i helgen i samband med WP-Girls och återigen läst varningen bestämde jag mig för att ta en närmare titt på det. Nikke skriver i sitt blogginlägg:

Magnus hade upptäckt att min kategorisida Sökmotoroptimering helt hade försvunnit från Google. Den syntes faktiskt inte över huvud taget på de 1000 första sökträffarna i Google. En stillsam panik utbröt förstås på Fleminggatan och jag började vilt leta anledningar.

Vidare skriver han:

Det visade sig dock att Thematic innehåller i högsta grad oönskad funktionalitet som innebär att man säger åt sökrobotar att inte indexera kategorisidor.

I blogginlägget presenterar han en lösning som innebär att man måste grotta runt en del i temats källkod. Jag har hittat en alternativ lösning som jag anser vara bättre.

  1. Börja med att skapa en mapp för ditt nya tema i wp-content/themes/ och döp den till något lämpligt.
  2. Skapa filen style.css och spara följande information i den:
    /*
    THEME NAME: My child theme for Thematic
    TEMPLATE: thematic
    
    This work, like WordPress, is released under GNU General Public License, version 2 (GPL).
    
    http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
    
    */
    
    @import url('../thematic/style.css');

    TEMPLATE: thematic anger namnet på mappen för temat som vårt nya tema ska ärva av. När filen är sparad så är barnet skapat.

  3. Skapa functions.php och spara följande kod i den:
    <?php
    function childtheme_create_robots() {
    }
    add_filter('thematic_create_robots','childtheme_create_robots');
    ?>

    Med ovanstående kod skriver vi över Thematics thematic_create_robots så att sökrobotarna känner sig välkomna.

Nu ska det bara vara att välja ditt nya tema från admin och Thematics källkod är fortfarande oförändrad.