Författararkiv: Marie

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-enco­da både bil­der och typ­snitt bestäm­de jag mig för att under­sö­ka hur de oli­ka delar­na stac­kar upp när man gör oli­ka saker. Var­je sida tes­tas på GTmetrix, så får vi se vad som ver­kar ge bäst resul­tat. I nulä­get har ing­et krut lagts på att sidan ska vara cross-brow­ser, tek­ni­ker­na fun­ge­rar i Chro­me och Fire­fox, åtminsto­ne. En fram­ti­da post/diskussion kan myc­ket väl vara att se hur tek­ni­ker­na kan använ­das. Kanske man kan ska­la bort litet av tyng­den från base64-enco­ding om man inte läg­ger in alla filer, det behö­ver ock­så under­sö­kas. Jag är ock­så osä­ker på hur caching fun­ge­rar med <link>-ele­ment för Goog­le Fonts gente­mot @import i filen — någon som vet? För när­va­ran­de finns inte sidorna/etc till­gäng­li­ga, men om det finns intres­se kan jag läg­ga upp dem på Git­hub för fram­ti­da expe­ri­ment.

Benchmark Den grundläggande sidan är baserad på en minimal, responsiv template från

Ini­ti­a­lizr, utan var­ken jQue­ry 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 ful­la famil­jer (nor­mal, kur­siv, fet­stil och kur­siv fet­stil) (Ale­greya och Ubun­tu). Typ­snit­ten finns både på Goog­le Web­fonts och på FontSquir­rel. De expe­ri­ment som inte använ­der Goog­le Web­fonts använ­der stan­dard web­kit­tet från FontSquir­rel.

Tekniker

Minifiera CSS

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

Bilder

Bil­der­na ser­ve­ras på tre oli­ka sätt:

  1. Sex uni­ka bil­der (om ing­et annat anges)
  2. Bil­der­na ihop­ba­ka­de med Sass magis­ka spri­tes (Mar­ke­ras med IS)
  3. Enskil­da bil­der, men enko­da­de i bas64 för att mins­ka HTTP requests (Mar­ke­ras med II)

Typsnitt

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

  1. Var­je font för sig, i alla nöd­vän­di­ga for­mat, lokalt (om ing­et annat anges)
  2. Ett anrop till Goog­le Web­fonts, impor­te­rar filen (Mar­ke­ras med FG)
  3. Bas64 enko­da­de i CSS-filen (Mar­ke­ras med FI)
  4. Ett anrop till Goog­le Web­fonts, <link> i hea­dern (Mar­ke­ras med FGL)

Tabell med Data

Page Speed Gra­de YSlow Gra­de Total page size Total # of requests Load (s) *
Base B (81%) B (87%) 161KB 16 4.63
Mini­fi­ed (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­van­de det här året. Tidi­ga­re har jag ald­rig haft tid/ork att skri­va, 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äns­la 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ätt­re för mig än att använ­da Gedit. Kom­mer nog sak­na att inte se for­ma­te­ring­en när jag använ­der Mark­down, men det går nog bra.

Liten got­cha: Eftersom jag har Ubun­tu (som inte använ­der KDE) var jag tvung­en att instal­le­ra ett par oli­ka 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 fyl­la i FTP-upp­gif­ter, och fram­för allt om man arbe­tar lokalt så finns det ing­en 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 äga­re och grupp till alla filer.

Det­ta ä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­da­re och/eller 2) Man inte läng­re kan änd­ra filer. Lös­ning­en ä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>

Note­ra: Star­ta om datorn efteråt.

För att kon­trol­le­ra så att grup­pen är tillagd, skriv groups <user> i ett ter­minal­föns­ter.

Nu behövs två kom­man­don för att få det­ta att fun­ge­ra. Först, rekur­sivt ägan­de av den spe­ci­fi­ka map­pen. OBS: kom­man­do­na här (chown and chmod) kan ska­da 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 anting­en vara inlog­gad som root eller använ­da sudo för att köra des­sa kom­man­don, av den anled­ning­en.

Först:

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

  1. chown — change file owner and group (änd­ra filä­ga­re och grupp), se man chown för detal­jer
  2. -R — Rekur­sivt
  3. <owner>:<group>, i det­ta fall www-data:www-data
  4. Sök­vä­gen till map­pen. Om du inte är inlog­gad som rot kan du använ­da ~/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 and­ra modi­fi­ka­tio­nen, som nog inte bör lig­ga på live: Grup­pen ska kun­na skri­va till filer­na ock­så:

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

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

Bashscript

Jag är lat och har trött­nat på att skri­va des­sa kom­man­don var­je 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 kun­na 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 Chro­me och Fire­fox, så hyf­sad man kun­de för­vän­ta sig i IE8, och sedan kol­la­de jag IE9

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

Enter Goog­le! Det visa­de sig att det finns/fanns en bug i IE om man har anting­en 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­sat­te Goog­la. Slut­li­gen såg jag en intres­sant trend… Många med det­ta pro­blem hade en fel­ak­tig doc­ty­pe.

Det hade ju vis­ser­li­gen inte vi, men i despe­ra­tion skrev jag DOCTYPE istäl­let för doc­ty­pe, dvs med sto­ra istäl­let för små bok­stä­ver. Då fun­ge­ra­de lay­ou­ten.

Så, för att sam­man­fat­ta: Inter­net Explo­rer ham­nar i quirks­mo­de om doc­ty­pe är skri­vet med små bok­stä­ver.

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

WP-Typography

Ett av mina favo­rit­tillägg till Word­Press är WP-Typo­grap­hy. Tyvärr har det­ta tillägg inte upp­da­te­rats på två år, vil­ket gör att det har vis­sa 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­el­la,har lagt upp på Git­hub med väl­digt små för­änd­ring­ar, främst har jag tagit bort depreca­ted saker, och änd­rat namn på en klass (HTML par­sern).

Kodsnuttar för WordPress

Om ing­et annat sägs så kan des­sa anting­en 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 fles­ta fal­len är kod­snut­tar­na såda­na som jag anting­en har hit­tat någon­stans och vida­re­ut­veck­lat, eller löst eftersom jag hade ett behov som behöv­de fyl­las. De är inte, i de fles­ta fall, skriv­na som helt kom­plet­ta, utan är till för inspi­ra­tion och vida­re­ut­veck­lan­de.

Stöd IE6 Shaming

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

Det­ta är en liten funk­tion base­rad på Roots hea­der. Jag använ­der den med en kon­stant för huruvi­da 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
}

Avregistrera 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 kun­na änd­ra den (Word­Press, Y U NO make admin bar respon­si­ve?).

Själ­va koden är enkel: wp_deregister_style('admin-bar');

Om man bara vill änd­ra den i fron­tend eller bac­kend bör man läg­ga den i en if-sats, anting­en !is_admin() (fron­tend) eller is_admin() (bac­kend).

Ändra Gedit-terminalens färger

I Ubun­tu Pre­ci­se finns en mind­re bug som gör att ter­mi­na­len i Gedit inte är läs­ba­ra. I sökan­det efter lös­ning­en (och efter snyg­ga­re fär­ger) hit­ta­de jag föl­jan­de frå­ga som täck­te en stör­re frå­ga.

Mitt val var att sät­ta upp en ter­mi­nal som i mångt och myc­ket ser ut som Cobalt, det färgsche­ma jag använ­der. Allt­så blir det det föl­jan­de:

  1. Instal­le­ra dconf-editor om den inte redan är instal­le­rad (i ubun­tu: sudo apt-get install dconf-editor)
  2. Öpp­na dconf-editor och navi­ge­ra 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 (#fefe­fe). Jag har valt att inte använ­da temats fär­ger, eftersom des­sa inte är helt läs­ba­ra. Palet­te kan man sät­ta till oli­ka 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: Vis­sa änd­ring­ar i plu­gins Jag sit­ter på Ubun­tu, som har kom­mit upp tidi­ga­re. Just nu är det 10.04, men jag och min pojk­vän job­bar på att instal­le­ra om våra respek­ti­ve dato­rer och sedan byta så att han har min sta­tio­nä­ra och jag har hans bär­ba­ra. Han är hem­ma mer än vad jag är, så det är gans­ka vet­tigt. Men, nu var det inte om Ubun­tu, 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­ra­re för Gno­me, men jag tyc­ker det låter så myc­ket söta­re med “gedit”, hårt g givet­vis. …Efter den­na lil­la paren­tes så åter­går vi till min setup <.<

Grundläggande plugins

  • Exter­nal tools
  • File Brow­ser
  • Insert Date/Time
  • Pyt­hon con­so­le
  • 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 sena­re
  • 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 plugins

Bah. Bootstrap >.

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

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

  1. Twit­ter Bootstrap är grun­den. Den har många myc­ket snyg­ga effek­ter, men har all­de­les för myc­ket grått/svart/vitt för min smak. Spe­ci­ellt irri­te­ran­de är att många av fär­ger­na är hård­ko­da­de, trots att de är skri­ven i LESS.
  2. Bootstrap är skri­vet i Less, så för att kun­na använ­da min favo­rit Sass är jag tvung­en att häm­ta en port skri­ven av John W. Long.
  3. Mås­te kom­ma mig för att lis­ta ut hur jag vill att min blog ska se ut >.>