Mobilutveckling — vad är bäst?

Efter en före­läs­ning på WordCamp Stock­holm om hur man utveck­lar för mobi­len, följt upp av upp­täck­ten att Com­pass har funk­tio­ner för att base64-encoda både bil­der och typ­snitt bestämde jag mig för att under­söka hur de olika delarna stac­kar upp när man gör olika saker. Varje sida tes­tas på GTmetrix, så får vi se vad som ver­kar ge bäst resul­tat. I nulä­get har inget krut lagts på att sidan ska vara cross-browser, tek­ni­kerna fun­ge­rar i Chrome och Fire­fox, åtminstone. En fram­tida post/diskussion kan myc­ket väl vara att se hur tek­ni­kerna kan använ­das. Kanske man kan skala bort litet av tyng­den från base64-encoding om man inte läg­ger in alla filer, det behö­ver också under­sö­kas. Jag är också osä­ker på hur caching fun­ge­rar med <link>–ele­ment för Google Fonts gente­mot @import i filen — någon som vet? För när­va­rande finns inte sidorna/etc till­gäng­liga, men om det finns intresse kan jag lägga upp dem på Git­hub för fram­tida experiment.

Bench­mark Den grund­läg­gande sidan är base­rad på en mini­mal, respon­siv temp­late från

Ini­ti­a­lizr, utan var­ken jQuery eller Moder­nizr, eftersom tes­ten inte tit­tar på java­script. Jag använ­der sex iko­ner från Paul Robert Lloyd, och två typ­snitt med fulla famil­jer (nor­mal, kur­siv, fet­stil och kur­siv fet­stil) (Ale­greya och Ubuntu). Typ­snit­ten finns både på Google Web­fonts och på FontSquir­rel. De expe­ri­ment som inte använ­der Google Web­fonts använ­der stan­dard web­kit­tet från FontSquirrel.

Tek­ni­ker

Mini­fi­era CSS

På bench­mark­si­dan används icke-minifierad CSS, men från och med expe­ri­ment två är stil­mal­len kom­pri­me­rad via Sass, detta för att få en bra idé om hur myc­ket det gör.

Bil­der

Bil­derna ser­ve­ras på tre olika sätt:

  1. Sex unika bil­der (om inget annat anges)
  2. Bil­derna ihop­ba­kade med Sass magiska spri­tes (Mar­ke­ras med IS)
  3. Enskilda bil­der, men enko­dade i bas64 för att minska HTTP requests (Mar­ke­ras med II)

Typ­snitt

Typ­snit­ten ser­ve­ras på fyra olika sätt:

  1. Varje font för sig, i alla nöd­vän­diga for­mat, lokalt (om inget annat anges)
  2. Ett anrop till Google Web­fonts, impor­te­rar filen (Mar­ke­ras med FG)
  3. Bas64 enko­dade i CSS-filen (Mar­ke­ras med FI)
  4. Ett anrop till Google Web­fonts, <link> i hea­dern (Mar­ke­ras med FGL)

Tabell med Data

Page Speed Grade YSlow Grade Total page size Total # of requests Load (s) *
Base B (81%) B (87%) 161KB 16 4.63
Mini­fied (2) B (81%) B (87%) 159KB 16 4.62
IS (3) A (97%) A (95%) 159KB 11 3.37
FG (4) C (73%) B (86%) 344KB 17 5.59
FG, IS (5) A (91%) A (94%) 344KB 12 4.34
II (6) A (98%) A (97%) 159KB 10 3.12
FG, II (7) A (93%) A (95%) 344KB 11 4.09
FI (8) B (87%) B (87%) 490KB 8 3.91
FI, II (9) A (97%) A (97%) 491KB 2 2.42
FI, IS (10) A (92%) A (95%) 490KB 3 2.66
FGL (11) C (76%) B (86%) 344KB 17 5.59
FGL, IS (12) A (95%) A (94%) 344KB 12 4.34
FGL, II (13) A (97%) A (95%) 344KB 11 4.09
  • Beräk­nat på band­bredd av 0.25Mbit, samt för­dröj­ning av 0.25s/anrop

NaNoWriMo

Jag har bestämt mig. Det blir skri­vande det här året. Tidi­gare har jag ald­rig haft tid/ork att skriva, och NaNoWriMo har all­tid kom­mit all­de­les för plöts­ligt. I år har jag idéer, jag har viss inspi­ra­tion, och en känsla för vad jag vill göra.

Novem­ber, here I come!

Jag har instal­le­rat FocusWri­ter, för att se om det är bättre för mig än att använda Gedit. Kom­mer nog sakna att inte se for­ma­te­ringen när jag använ­der Mark­down, men det går nog bra.

Liten got­cha: Eftersom jag har Ubuntu (som inte använ­der KDE) var jag tvungen att instal­lera ett par olika paket: sudo apt-get install libqt4-dev libzip-dev libenchant-dev.

Förenkla ägande av utvecklingssiter

Jag kan inte vara den enda som arbe­tar med Word­Press och blir litet smått irri­te­rad på att behöva fylla i FTP-uppgifter, och fram­för allt om man arbe­tar lokalt så finns det ingen FTP. Det man kan göra är att se till så att använ­da­ren som webb­lä­sa­ren använ­der (i många fall www-data) är ägare och grupp till alla filer.

Detta är ju jät­te­bra, tills man 1) Inser att den nya temp­la­ten man ska­pat ägs av ens egen använ­dare och/eller 2) Man inte längre kan ändra filer. Lös­ningen är enkel.

Först, se till så att du till­hör grup­pen som webb­lä­sa­ren använ­der (här för­ut­satt att vara www-data).

Ctrl+Alt+T för att få upp ter­mi­na­len, och sedan

sudo usermod -a -G www-data <user>

Notera: Starta om datorn efteråt.

För att kon­trol­lera så att grup­pen är tillagd, skriv groups <user> i ett terminalfönster.

Nu behövs två kom­man­don för att få detta att fun­gera. Först, rekur­sivt ägande av den spe­ci­fika map­pen. OBS: kom­man­dona här (chown and chmod) kan skada din dator om du inte är för­sik­tig. Se till så att map­pen som du änd­rar är exakt den map­pen som ska änd­ras, inte någon­ting annat. Du behö­ver antingen vara inlog­gad som root eller använda sudo för att köra dessa kom­man­don, av den anledningen.

Först:

chown -R www-data:www-data /home/user/folder

  1. chown — change file owner and group (ändra filä­gare och grupp), se man chown för detaljer
  2. -R — Rekursivt
  3. <owner>:<group>, i detta fall www-data:www-data
  4. Sök­vä­gen till map­pen. Om du inte är inlog­gad som rot kan du använda ~/folder om den lig­ger i din hem­mapp. Stan­dard­plats bru­kar vara /var/www/<någonting>

Nu “ägs” filen av www-data, vil­ket leder till den andra modi­fi­ka­tio­nen, som nog inte bör ligga på live: Grup­pen ska kunna skriva till filerna också:

chmod -R g+w /home/user/folder

  1. chmod — change file mode bits (ändra filens typ­vär­des­bi­tar). På ren svenska: Ändra filens tillå­tel­ser, se man chmod för detaljer
  2. g+w — Lägg till skriv­rät­tig­he­ter (w, write) till grup­pen. Andra vär­den är u=user, a=all, använd - för att ta bort rät­tig­he­ter. Andra rät­tig­he­ter är r=read och x=execute

Bash­script

Jag är lat och har trött­nat på att skriva dessa kom­man­don varje gång, så här kom­mer mitt bash­script, spa­rat i ~/bin som www-permissions.sh. Det körs med ./bin/www-permissions.sh /sökväg/till/mappen/som/ska/ändras

#!/bin/bash
# Small script to chown and chmod a folder to www-data
DIR=$1

sudo chmod -R g+w ${DIR} && sudo chown -R www-data:www-data ${DIR}

För att det ska kunna köras, använd kom­man­dot chmod +x ~/bin/www.permissions.sh

Ordvits på att ett system buggar

Internet Explorer 9 float bug

Idag har jag varit på insekts­jakt! Desig­nen till en sida jag job­bar med var snygg i Chrome och Fire­fox, så hyf­sad man kunde för­vänta sig i IE8, och sedan kol­lade jag IE9

Åh jis­ses. Hela lay­ou­ten var helt ur led, med en float: left till höger, och side­ba­ren (float: right) nere på nästa rad.

Enter Google! Det visade sig att det finns/fanns en bug i IE om man har antingen 1) för­äl­der utan fast bredd eller 2) för­äl­der med mar­gin: auto.

Jag hade 2), men vem vill låta bli en cen­tre­rad lay­out? Jag fort­satte Googla. Slut­li­gen såg jag en intres­sant trend… Många med detta pro­blem hade en fel­ak­tig doctype.

Det hade ju vis­ser­li­gen inte vi, men i despe­ra­tion skrev jag DOCTYPE istäl­let för doc­type, dvs med stora istäl­let för små bok­stä­ver. Då fun­ge­rade layouten.

Så, för att sam­man­fatta: Inter­net Explo­rer ham­nar i quirks­mode om doc­type är skri­vet med små bokstäver.

PS: Ifall någon vet vem som gjort bil­den jag använ­der så skulle jag vara tack­sam över att få reda på det. Den har legat i map­par på mina dato­rer sedan cirka –96, och konst­nä­rens första namn är tro­ligt­vis “Åke”.

WP-Typography

Ett av mina favo­rit­tillägg till Word­Press är WP-Typography. Tyvärr har detta tillägg inte upp­da­te­rats på två år, vil­ket gör att det har vissa nack­de­lar, främst att det inte pas­sar till­sam­mans med WP Mark­down. Jag har en upp­da­te­rad ver­sion som jag fun­de­rar på att se hur man kan få in i den offi­ci­ella,har lagt upp på Git­hub med väl­digt små för­änd­ringar, främst har jag tagit bort depreca­ted saker, och änd­rat namn på en klass (HTML parsern).

Kodsnuttar för WordPress

Om inget annat sägs så kan dessa antingen skrivas/kopieras in i ditt temas functions.php eller för den delen använ­das som en del av en plu­gin. I de flesta fal­len är kod­snut­tarna sådana som jag antingen har hit­tat någon­stans och vida­re­ut­veck­lat, eller löst eftersom jag hade ett behov som behövde fyl­las. De är inte, i de flesta fall, skrivna som helt kom­pletta, utan är till för inspi­ra­tion och vidareutvecklande.

Stöd IE6 Shaming

Som nog de flesta vet finns det en hel del debatt om IE6 och fak­tu­met att IE6 fort­fa­rande finns där ute.

Detta är en liten funk­tion base­rad på Roots hea­der. Jag använ­der den med en kon­stant för huruvida den ska akti­ve­ras eller inte.

function melindrea_supportIE6Shaming()
{
    ?><!--[if lt IE 7]><div class="alert">Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">
    Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">
    install Google Chrome Frame</a> to experience this site.</div><![endif]-->
    <?php
}

Avre­gi­strera CSS för adminbar

Admin­ba­rens vara eller inte vara ver­kar vara hett omde­bat­te­rad. Över­lag tyc­ker jag om den, men har känt ett behov av att kunna ändra den (Word­Press, Y U NO make admin bar responsive?).

Själva koden är enkel: wp_deregister_style('admin-bar');

Om man bara vill ändra den i fron­tend eller bac­kend bör man lägga den i en if-sats, antingen !is_admin() (fron­tend) eller is_admin() (backend).

Ändra Gedit-terminalens färger

I Ubuntu Pre­cise finns en mindre bug som gör att ter­mi­na­len i Gedit inte är läs­bara. I sökan­det efter lös­ningen (och efter snyg­gare fär­ger) hit­tade jag föl­jande fråga som täckte en större fråga.

Mitt val var att sätta upp en ter­mi­nal som i mångt och myc­ket ser ut som Cobalt, det färgschema jag använ­der. Alltså blir det det följande:

  1. Instal­lera dconf-editor om den inte redan är instal­le­rad (i ubuntu: sudo apt-get install dconf-editor)
  2. Öppna dconf-editor och navi­gera till org » gnome » gedit » plugins » terminalSkärmdump av dconf-editor
  3. Som synes har jag en mörk­blå färg som bak­grund (#001b33) och en ljus­grå färg som text (#fefefe). Jag har valt att inte använda temats fär­ger, eftersom dessa inte är helt läs­bara. Palette kan man sätta till olika fär­ger, men jag är nöjd med de fär­ger som jag har lagt in här.

Gedit++

Upp­da­te­ring: Vissa änd­ringar i plu­gins Jag sit­ter på Ubuntu, som har kom­mit upp tidi­gare. Just nu är det 10.04, men jag och min pojk­vän job­bar på att instal­lera om våra respek­tive dato­rer och sedan byta så att han har min sta­tio­nära och jag har hans bär­bara. Han är hemma mer än vad jag är, så det är ganska vet­tigt. Men, nu var det inte om Ubuntu, utan om vad jag använ­der när jag kodar, näm­li­gen Gedit. Egent­li­gen tror jag att det ska skri­vas gEdit, eftersom det är en tex­tre­di­ge­rare för Gnome, men jag tyc­ker det låter så myc­ket sötare med “gedit”, hårt g givet­vis. …Efter denna lilla paren­tes så åter­går vi till min setup <.<

Grund­läg­gande plugins

  • Exter­nal tools
  • File Brow­ser
  • Insert Date/Time
  • Pyt­hon console
  • Quick open
  • Snip­pets
  • Sort

Addons från gedit-plugins

  • Book­marks
  • Brac­ket Com­ple­tion Just den här använ­der jag expli­cit inte, eftersom den inte fun­ge­rar med en plu­gin som nämns senare
  • Char­map
  • Code Com­ment
  • Color pic­ker
  • Com­man­der
  • Draw spa­ces
  • Join lines/ Split lines
  • Ses­sion Saver
  • Smart Spa­ces
  • Tag List
  • Ter­mi­nal
  • Word com­ple­tion

Övriga plu­gins

Bah. Bootstrap >.<

Har pre­cis bytt till Roots som tema, eftersom det är trev­ligt att använda som bas för att skinna om min blog, vil­ket behövs. Väl­digt mycket.

Var­för bekla­gar jag mig, då?

  1. Twit­ter Bootstrap är grun­den. Den har många myc­ket snygga effek­ter, men har all­de­les för myc­ket grått/svart/vitt för min smak. Spe­ci­ellt irri­te­rande är att många av fär­gerna är hård­ko­dade, trots att de är skri­ven i LESS.
  2. Bootstrap är skri­vet i Less, så för att kunna använda min favo­rit Sass är jag tvungen att hämta en port skri­ven av John W. Long.
  3. Måste komma mig för att lista ut hur jag vill att min blog ska se ut >.>