Categories
Programming

Virtuell utvecklingsmiljö med VirtualBox

Ett av problemen jag haft under längre tid har varit att jag trivs alldeles för bra att utveckla med min MacBook. Detta för att det är så mycket enklare att manövrera i operativsystemet mha terminalen, samt att det är så smidigt att använda Git, Ruby, Sass etc. you name it.

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:

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!

Categories
Programming

Speed me up, Scotty!

Något som jag varit besatt av den senaste tiden är att få upp hastigheten på webbplatser. Sedan Google påpekade att de kommer börja ranka sidor efter hastighet så känns det som att det är vettigt att lägga ner lite tid på att undersöka detta.

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!

Categories
Personal Programming

WordCamp Stockholm 2010

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!