Det påminner väldigt mycket om tankesättet vi hade när vi gjorde en kalkylator i Java för några år sedan i en kurs jag hade på Uppsala Universitet. Jag implementerade allt fram tills dess att jag skulle generera den slutliga koden. Kunde inte riktigt bestämma mig för vilket språk jag ville generera, ren Rubykod, Assembler eller C.

Exempelprogram

Se online på GitHub

/* PROGRAM NAME: nxx1.txt

nxx is a simple programming language that provides:
 numbers
 strings
 assignment statements
 string concatenation
 simple arithmetic operations
 print capability

comments may be enclosed in slash+asterisk .. asterisk+slash
*/
alpha = 16 ;
beta = 2 ;
resultName = "delta" ;
delta = alpha / beta ;
print "Value of " || resultName || " is: " ;
print delta ;
print "\n" ;

Här är syntaxträdet som produceras av ovanstående kod:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Here is the abstract syntax tree:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
ROOT
    =
        alpha
        16
    =
        beta
        2
    =
        resultName
        "delta"
    =
        delta
        alpha
        /
        beta
    print
        "Value of "
        resultName
        " is: "
    print
        delta
    print
        "\n"

Lärdomar

Själva implementeringen av parsern, lexern och scannern gick bra. Dock märkte jag i slutet att jag saknade en del kunskap om teorin bakom, vilket gjorde det svårt att slutföra. Dessutom fick jag annat att göra så det hamnade i skymundan.

I höst kommer jag läsa en kurs i kompilatorteknik, det ska bli roligt eftersom jag har gett mig på en del av begreppen tidigare och kommer förhoppningsvis ha nytta av mina tidigare erfarenheter och på så sätt ha mer nytta av kursen.

Vi började rota runt i Node.js och Express och tänkte att det var något vi ville använda. En av styrkorna med WordPress är ju däremot att det är väldigt enkelt att administrera innehåll i det, så vi valde att använda tillägget JSON API tillsammans med WordPress. På så sätt kunde innehållet hämtas via JSON och på så sätt kan frontenden bara vara ett skal som slussar information.

Backend

Som backend så rullade som sagt WordPRess och JSON API. Vi upptäckte ganska tidigt att tillägget var utdaterat när det gäller stödet för custom post types och taxonomies. Vi byggde enkelt ut vår plattform med de funktioner vi behövde. Anta att denna sida rullar på http://backend.dev och det aktiva temat i sig genererar ingen utdata.

Frontend

Basen på frontenden byggdes med hjälp av Node.js och Express. Ett av kraven i funktionaliteten var att vi inte ville att sidan skulle laddas om. Därför använde vi:

• Sammy.js för att hantera URL:er
• Futures för att hantera callback-röran (enligt mig) som kan uppstå och för att se till att saker och ting sker asynkront
• Node-dirty för att skapa en lokal cache av JSON anropen som görs mot http://backend.dev
• Restler för att göra REST-anrop mot http://backend.dev
• Forever för att se till att servern hålls igång.
• Cluster för att styra applikationen

Exempel på en modell som representerar en klient:

var Model   = require('./model'),
    API     = require('./api'),
    config  = require(__dirname + '/../conf/' + (global.process.env.NODE_ENV || 'development') + '.js');
 
function Client(args) {
  Model.prototype.constructor.call(this, args);  
}
 
Client.prototype = new Model();
 
Model.extend(Client, API);
 
Client.singleUrl = function(slug){ return config.wordpress.url + '/api/CustomTheme/get_taxonomy_posts/?taxonomy=client&slug=' + slug + '&custom_fields=service,type'; };
Client.collectionUrl = function(){ return config.wordpress.url + '/api/CustomTheme/get_taxonomy_keys/?taxonomy=client'; };
 
Client.singleKey = 'posts';
Client.collectionKey = 'posts';
Client.model = Client;
 
Client.prototype.constructor = Client;
Client.prototype.render = function() {
  return {
    id:         this.data.term_id, 
    title:      this.data.name,
    slug:       this.data.slug
  };
};
 
module.exports = Client;

API är en generell klass som alla modeller använder sig av, och Client.singleUrl och Client.collectionUrl är den URL som API:t ska använda sig av, göra anropet, cacha resultatet och generera en struktur som controllern sedan använder sig av.

Cachen är satt på väldigt hög timeout. Det är en webbplats som inte besökaren har någon möjlighet att påverka innehållet på. Så därför behövde vi komma på en lösning att varje gång en uppdatering skett i WordPress-backenden så rensades vår cache.

Hela miljön deployas med hjälp av Capistrano. Där användes en Rakefile för att hantera situationer som att starta om servern, stoppa servern och rensa cachen.

Summan av kardemumman

En ganska krånglig lösning men oerhört kul och inspirerande att få genomföra. Tyvärr blev det tidsbrist och jag hade inte tid att slutföra projektet innan jag åkte till San Jose. Projektet gav mig absolut mersmak för Node.js och vi får se vad jag hittar på i framtiden.

Förra terminen här i San Jose så läste jag en kurs där ett delmoment var i Node, så där hade jag absolut försprång på de andra i klassen. Jag ber om ursäkt för att jag inte kan visa mer kod än vad jag har gjort.

Ett problem som jag haft väldigt länge är att jag kört många olika WordPress-installationer för relativt små projekt. Det är inte alls särskilt roligt att underhålla alla dessa installationer, dvs att hålla kärnan och tillägg uppdaterade. I ett tidigare projekt så skapade Tedde Lundgren ett tillägg som tillät oss att koppla flera olika domäner (inte begränsat till subdomäner) till en installation.

Jag är medveten om att det finns liknande tillägg som exempelvis WordPress MU Domain Mapping. Det som skiljde Teddes version från denna var att vi fick tillgång till gruppering av domäner, så vi kan köra separata utvecklingsdomäner. Tillägget är för övrigt en riktig lättviktare och innehåller endast det som behövs, dvs inte bloatat. Tedde har planer på att släppa tillägget öppet senare i sommar.

Screenshot Domain Mapper

Mjukvara och tjänster som används

• Nginx – Webbserver
• Apache- Webbserver
• PHP + APC – APC används för cachning
• Memcached – Memcached används för cachning
• WordPress + W3 Total Cache – Publiceringsverktyg samt W3 Total Cache för att cacha
• Ruby + Capistrano – Capistrano är en samling Rubyscript som används för att enkelt deploya till drift/utvecklingsserver
• Git + GitHub – Git är versionshantering av källkod, GitHub är en tjänst för att samarbeta med andra utvecklare

Webbserver

Wikipedia skriver följande angående Nginx:

Nginx quickly delivers static content with efficient use of system resources. It can deploy dynamic HTTP content on a network using FastCGI handlers for scripts, and can serve as a very capable software load balancer.^[2]

Med detta som grund så valde jag att använda Nginx som webbserver (@port 80) för att servera allt statiskt material (JavaScript, CSS och bilder), för att sedan proxy:a alla andra anrop vidare till Apache (@port 81).

Cachning och WordPress

Genom att använda Memcached, APC i kombination med W3 Total Cache så har jag fått ner laddningstiden i WordPress oerhört mycket. Ett problem som jag tyvärr upplever för tillfället är att administrationen i WordPress 3.1.3 är väldigt trög, det verkar vara ett känt problem som många inte upplevde i 3.0.x-branchen. Vi får se ifall det fixas i 3.2 som borde lanseras inom en snar framtid.

GitHub och Capistrano

Versionshantera, snälla! Även ifall du är den enda i projektet… På GitHub har jag samlat all kod jag använder i mina projekt. Jag har ett betalkonto som tillåter mig att ha 10 privata repositories och en medarbetare på dessa. All utveckling sker lokalt (på exempelvis http://hassis.dev) och när jag är nöjd så laddar jag upp på GitHub och den jag arbetar med laddar ner det lokalt och tittar över det. När vi sedan är överens om att det går att släppa publikt så kör vi ut allt genom Capistrano.

Capistrano förutsätter att man har tillgång till SSH och använder sig av publika nycklar för att autentisera sig mot servern.

Slutsats

Detta är tänkt som en genomgång vad jag använder för verktyg när jag utvecklar. Vill ni se lite exempel på källkod så får ni gärna säga till.

Stötte för någon vecka på ett nytt problem för min del. Det handlade om att jag skulle skapa ett plugin som används i multi-site. Jag har jobbat relativt lite med Multi-Sites och problemet var att tabellerna inte skapades för alla ”siterna” som fanns i nätverket.

Källkod

register_activation_hook(__FILE__, 'hass_vote_activate');
 
function hass_vote_activate() {
	global $wpdb;
 
	if (function_exists('is_multisite') && is_multisite()) {
		if (isset($_GET['networkwide']) && ($_GET['networkwide'] == 1)) {
			$old_blog = $wpdb->blogid;
 
			$blogids = $wpdb->get_col($wpdb->prepare("SELECT blog_id FROM $wpdb->blogs"));
			foreach ($blogids as $blog_id) {
				switch_to_blog($blog_id);
				_hass_vote_activate();
			}
			switch_to_blog($old_blog);
 
			return;
		}	
	} 
	_hass_vote_activate();		
}
 
function _hass_vote_activate() {
	global $wpdb;
 
	$table_name = $wpdb->prefix . 'yourtable';
 
	if ($wpdb->get_var("SHOW TABLES LIKE '$table_name'") != $table_name) {
		$sql = "CREATE TABLE " . $table_name . " (
			id mediumint(9) NOT NULL AUTO_INCREMENT,
     			dateadded bigint(11) DEFAULT '0' NOT NULL,
     			subject VARCHAR(255) NOT NULL,
	  		UNIQUE KEY id (id)
	  	);";
 
		require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
  		dbDelta($sql);
	}
}

Ovanstående kod vandrar igenom alla dina siter som är uppsatta i nätverket och kör aktiveringsfunktionen för dessa.

Koden ovan raderar inte tabellerna vid inaktivering, det skapar heller inte tabellerna för nya siter som aktiveras i nätverket. Du får i sådana fall använda följande actions:

add_action( 'wpmu_new_blog', 'your_function_activation_on_new_blog'); 		// For new site
register_deactivation_hook( __FILE__, 'your_deactivation_function' );		// For deactivation

Jag, Oskar Wirén och Jim Sagevid var ett lag, vi hade inte tittat så mycket på API:t innan så vi hade ganska dålig koll på det. Tävlingen gick ganska dåligt för oss, vi slarvade alldeles för mycket och vi blev väldigt stressade. Istället så fick vi ihop en fungerande version på vägen hem på tåget på ca. 4-5 minuter…

Det lutar åt att några av de andra lagen hade lite förberett kod, då det var ganska stressigt med tid att få klar en första prototyp (~1h), eller så var de helt enkelt grymt snabba! Hade vi haft lite framförhållning så hade det nog varit en ganska smart idé, men det är alltid lätt att vara efterklok. Det var i alla fall en väldigt trevlig kväll och ett riktigt kul arrangemang!

Demonstration

Här kör vi mot ett annat lag som också kommer ifrån Uppsala, vi heter ”Team Borm” (den kör v2) och de är ”Sneaky Brian”. Vi märker tydligt att det är en del problem när båda två är väldigt nära samma frukt.

Källkod

Finns samlat på Github.

Den första versionen finns här (v1, som vi inte hann slutföra på tävlingen) och den som vi fortsatte lite på finns här (v2).

Själva path-hanteraren finns här.

Mer läsning

Lag Paxport vann Crazy Snake
Ladda Clojure-kod med java.util.ServiceLoader

Krav:

• Pilar för att navigera höger och vänster
• En manuell navigering för att hoppa till valfri ”slide”

Demo

Finns i min Dropbox.

Markup

Läs först igenom jQuery Infinite Carousel och se till att du är med på grundkonceptet, alltså hur den visar respektive slide. Det jag lagt till är att du placerar pilarna i lista som detta:

<ul>
	<li><a class="back" href="#" title="Previous">&lt;</a></li>
	<li><a class="forward" href="#" title="Next">&gt;</a></li>
</ul>

Samt den manuella navigeringen lägger du bara in en placeholder för:

<div id="splash-manual-nav-container"></div>

Källkod

Allting finns samlat i en Gist på Github.

HTML

CSS

JavaScript

Kommentarer?

Jag försökte hålla det så enkelt som möjligt, samt att jag ville ha en ”ren” version som jag själv kan gå tillbaka till och återanvända i andra projekt. Har ni förslag på förbättringar så tar jag gärna emot dem!

Vi har under de senaste 7 veckorna arbetat med ett projekt i en kurs som heter ”Distribuerade system med projekt”. Vår projektbeskrivning var i korta drag detta:

”You are to design and implement a complete software system that provides Internet access to semi-autonomous soft-realtime robot.”

Då hälsar vi WALL-E välkommen!

WALL-E med orginalet

Introduktion

WALL-E är konstruerad i Lego, den är ifrån Lego Mindstorms NXJ och omflashad med LeJOS för att vi ska kunna köra Java på den.

Vårt projekt krävde att vi skulle kunna styra roboten från vilken klient som helst, därför valde vi att köra Java RMI mellan våra olika system.

System diagram

Klienten

Windowsklienten

Klienten är skriven som en Java-applet och kan därför köras ifrån alla möjliga operativsystem, de vi har testat är Linux, Mac OS X samt Windows 7. Den ansluter till ett externt ip som ”robotservern” körs på.

Dataflöde – Manuellt läge

Ovan ser ni även hur flödet ser ut när vi skickar enskilda kommandon ifrån det manuella läget i klienten.

Autopiloten

I projektet ingick även att vi ska samarbeta med en annan robot i Sverige och söka av ett rum. Vi satte därför upp ytterligare en service som sköter kartan, den körs via RMI och använder sig av en MySQL-databas som robotarna sedan kommunicerar med via interfaces. Kartan genereras sedan med hjälp av GD och PHP och skickas sedan till klienten.

Denna del är den som tagit överlägset längst tid, vår autopilot gör väldigt komplicerade beslut på egen hand. Bra jobbat Julius, Erik och Henrik!

Dataflöde – Autopilot

När roboten körs i autopilot-läget så gör den inga beslut själv, alla beslut sker genom robotservern och den i sin tur kontrollerar hela tiden med kartservern vilka ytor som är lediga/upptagna.

Kartläggningsalgoritm

• Allting baseras på en ”tile map” för att förenkla algoritmen.
• Den använder en egenkomponerad Dijkstra-algoritm med viktbaserad beslutshantering för all kartläggning.
• Den använder även ett poängsystem för att bestämma vilken del av kartan den ska besöka härnäst.
• Varje gång den kollar något så kollar den detta tre gånger, med små vinkelskiftningar, för att förbättra avläsningen.

Demonstration

Detta är en 40 sekunder lång demonstration, där WALL-E har kört igenom en hinderbana och håller på att slutföra kartan. Håll koll på den övre högra delen på kartan på laptopen där den monterar ut väggarna allt eftersom den flyttar på sig (jag ber om ursäkt att ljudet hackar i videon).

Källkod

Finns i Runestone2011 på Github.

Tyvärr verkar den ha tappat all commit-historik när jag flyttade över det, det var lite trist. För en fullständig historik av commitsen så har jag en lokal kopia lagrad med all information.

Så här i efterhand så är vi väl inte särskilt nöjda med kodresultatet, vi hade nog gjort om det mesta på ett ”bättre” sätt.

Jag försökte för någon månad sedan att åstadkomma en liknande miljö med VirtualBox och Ubuntu, det gick åt pipan. Igår kväll så började jag nysta i det igen och fick faktiskt fart på det hela!

Mitt mål

• Sätta upp VirtualBox
• Installera Ubuntu
• Använda Ubuntu som utvecklingsserver och dela kataloger mha Samba
• Kunna SSH:a till denna genom att denna får ett internt ip samt att den ska ha internetåtkomst
• Sätta upp Git tillsammans med mitt Github-konto
• Installera RVM och Rails, Padrino etc.

Sätta upp VirtualBox och installera Ubuntu

Ladda ner VirtualBox och installera Ubuntu (jag valde desktop edition). Jag har en trådad uppkoppling så jag sätter min trådade anslutning som delad och noterar vilket IP denna får (192.168.56.1). Det bör även finnas en ”VirtualBox Host-Only Network”-adapter i dina nätverksanslutningar, det är denna som ska ha fått ett IP som ex. 192.168.56.1.

Gå in i inställningarna för VirtualBox och Ubuntu och sätt upp två anslutningar, en för NAT och en för ”Endast värd-kort” (host-only-adapter). Ändra i din fil /etc/network/interfaces till detta:

auto lo
iface lo inet loopback
 
auto eth0
iface eth0 inet dhcp
 
auto eth1
iface eth1 inet dhcp

Kör ifconfig -a och kontrollera så att du har två olika IP:n på din eth0 (min är 10.0.2.15) och eth1 (min är 192.168.56.101).

Har du fått till detta så kan du förhoppningsvis SSH:a till maskinen (förutsatt att du installerat en ssh-daemon)!

Sätta upp delning av kataloger

(Källa: Ubuntu Forums – HOWTO: Mounting SMB Shares)
Härligt, du har en fungerande Ubuntu som du nu kan starta upp och gömma i bakgrunden och sköta genom ex Putty. Eftersom jag fortfarande kommer sköta själva programmeringen i Windows-miljön så kommer jag vilja ha en katalog som är delad mellan Ubuntu och Windows. Jag skapade en katalog på Windows-datorn som jag kallade för VirtualUbuntu som jag satte som delad, sedan skapade jag en katalog på Ubuntu som jag planerar att montera denna nätverkskatalog i.

sudo mount -t cifs //192.168.56.1/VirtualUbuntu /home/mittusername/VirtualWin -o iocharset=utf8,username=mittanvandarnamn,password=mittlosenord,file_mode=0777,dir_mode=0777

Detta monterar katalogen, nu vill jag att den ska monteras varje gång jag startar upp min virtuella Ubuntu. Så gå in i /etc/fstab och ange något liknande i slutet:

//192.168.56.1/VirtualUbuntu /home/mittusername/VirtualWin   smbfs  auto,credentials=/root/.credentials,uid=1000,umask=000,user   0 0

Jag har även skapat en fil i /root/.credentials för att hålla mina uppgifter med följande innehåll:

username=your_smb_username
password=your_smb_password

Sätt sedan rättigheterna på den filen med:

sudo chmod 600 /root/.credentials

När du sedan startar om Ubuntu kan du enkelt montera med:

sudo mount -a

Sätt upp Git + Github

Installera Git med

sudo apt-get install git-core

Följ sedan guiden på Githubs hemsida om Linux-installationen.

Installera Ruby med RVM

För att kunna ha möjligheten att köra flera olika Ruby-versioner (väldigt behändigt!) och framförallt hålla dessa separerade så använder jag RVM – http://rvm.beginrescueend.com. Detta kan du installera genom att följa instruktionerna på http://rvm.beginrescueend.com/rvm/install/.

Några vettiga kommandon med exempel är:

• rvm install ruby-1.9.2-p0 (installera 1.9.2 via RVM)
• rvm list (listar Ruby-variationer, indikerar även vilken som är aktiv)
• rvm use ruby-1.9.2-p0 (välj den specifika Ruby)
• rvm package install zlib (mer om detta i nästa stycke)

Installera Rails

Jag valde att köra Ruby 1.9.2 via RVM och då stötte jag på patrull i form av gnäll på att jag inte hade zlib och openssl, en snabb sökning gav följande resultat:

• http://rvm.beginrescueend.com/packages/zlib/
• http://rvm.beginrescueend.com/packages/openssl/

Följer du dessa instruktioner så borde det gå bra att få in Rails.

Summan av kardemumman

Detta är skrivet som en liten ”kom ihåg”-post till mig själv inför nästa gång jag ska genomföra detta, förhoppningsvis har någon annan nytta av det också! Lycka till!

Ett bra ställe att börja på är Yahoos riktlinjer och ”good practices” på deras developer network.

Jag tänkte gå igenom några av de saker som jag tycker är viktigast när det gäller att optimera laddningstider.

Javascript i footern

En tumregel jag har är att javascript ska läggas i sidfoten och stilmallar ska ligga i sidhuvudet. Anledningen till att jag vill ladda Javascript i sidfoten är för att undvika att blockera visningen av innehåll, ni kan läsa mer om detta på ”Yahoo: Put Scripts at the Bottom”.

Undvik inline-Javascript och inline-CSS

Låt mig cacha! Detta kan inte betonas nog hårt. Genom att lägga Javascript och CSS externt så får webbläsaren möjlighet att cacha filerna.

Utnyttja Content Delivery Networks (CDN)

Jag har de senaste dagarna testat Autobahn hos Loopia i kombination med WordPress. Det har fungerat väldigt smidigt och jag verkligen glad att jag provade det!

Vill man vara riktigt duktig kan man skapa en s.k. ”cookie-free domain” på en separat domän. Det går ut på att du har en helt separat domän för ditt statiska material och då undviker du att skicka redan satta cookies till den domänen (utöver den vanliga domänen). Läs mer om detta på ”Yahoo: Use Cookie-free Domains for Components”.

Något jag funderat kring men ännu inte provat särskilt mycket är att använda externa CDN även för ex. jQuery.

Fördelarna är att ifall besökaren besökt en annan webbplats som använder samma CDN som du använder för jQuery-versionen så har den redan laddat ner den och cachat den, så den behöver inte laddas ner på nytt. Nackdelen är att du har lite svårare att kontrollera någon slags ”fallback” ifall din CDN ligger nere.

Dra ner på antalet anrop(!)

Med anrop menas antalet bilder, Javascript och CSS -filer som laddas in vid en sidladdning. Jag använder mig av Firebug för att hålla koll på mängden anrop. Jag försöker undvika att ladda för mycket, även om det är svårt att sätta en speciell gräns på vad som är ”för mycket”.

Detta brukar kunna bli ett stort problem när man kör många WordPress-tillägg, då väldigt många använder sig av en hel del Javascript och CSS. Är jag riktigt ambitiös så redigerar jag tillägget och rycker ut de filerna som de använder för att slå ihop dem till en enda, detta för att få ner antalet anrop.

En metod för att hålla nere anropen av bilder är att utnyttja CSS-sprites, läs mer i ”The Mystery Of CSS Sprites”.

Slutsats

Ta dig tid att läsa på om ämnet och försök göra dina servrar och besökare glada genom att erbjuda korta laddningstider. Bra verktyg att använda är Firebug och YSlow.

Jag har uppdaterat mina resurser en del under de senaste veckorna, ta gärna en titt på dem.

Har ni några tips får ni gärna lämna en kommentar till mig!

Den 23-24 oktober går Sveriges första WordCamp av stapeln. Platsen är Tekniska muséet i Stockholm, och dit kommer vi för att lära av varandra samt ha trevligt – allt i skön WordPress-anda.

Jag deltog i en tävling av Binero och lyckades knipa en biljett till WordCamp Stockholm den kommande helgen (23-24 oktober).

Ser ni mig där så tveka inte att säga hej!

Uppdatering 2010-10-21

P.g.a. lite oplanerade studier så har jag idag tvingats avboka min biljett på WordCamp. Vi ses nästa år istället!