Mobilutveckling — vad är bäst?
Efter en föreläsning på WordCamp Stockholm om hur man utvecklar för mobilen, följt upp av upptäckten att Compass har funktioner för att base64-encoda både bilder och typsnitt bestämde jag mig för att undersöka hur de olika delarna stackar upp när man gör olika saker. Varje sida testas på GTmetrix, så får vi se vad som verkar ge bäst resultat. I nuläget har inget krut lagts på att sidan ska vara cross-browser, teknikerna fungerar i Chrome och Firefox, åtminstone. En framtida post/diskussion kan mycket väl vara att se hur teknikerna kan användas. Kanske man kan skala bort litet av tyngden från base64-encoding om man inte lägger in alla filer, det behöver också undersökas. Jag är också osäker på hur caching fungerar med <link>
-element för Google Fonts gentemot @import
i filen — någon som vet? För närvarande finns inte sidorna/etc tillgängliga, men om det finns intresse kan jag lägga upp dem på Github för framtida experiment.
Benchmark Den grundläggande sidan är baserad på en minimal, responsiv template från
Initializr, utan varken jQuery eller Modernizr, eftersom testen inte tittar på javascript. Jag använder sex ikoner från Paul Robert Lloyd, och två typsnitt med fulla familjer (normal, kursiv, fetstil och kursiv fetstil) (Alegreya och Ubuntu). Typsnitten finns både på Google Webfonts och på FontSquirrel. De experiment som inte använder Google Webfonts använder standard webkittet från FontSquirrel.
Tekniker
Minifiera CSS
På benchmarksidan används icke-minifierad CSS, men från och med experiment två är stilmallen komprimerad via Sass, detta för att få en bra idé om hur mycket det gör.
Bilder
Bilderna serveras på tre olika sätt:
- Sex unika bilder (om inget annat anges)
- Bilderna ihopbakade med Sass magiska sprites (Markeras med IS)
- Enskilda bilder, men enkodade i bas64 för att minska HTTP requests (Markeras med II)
Typsnitt
Typsnitten serveras på fyra olika sätt:
- Varje font för sig, i alla nödvändiga format, lokalt (om inget annat anges)
- Ett anrop till Google Webfonts, importerar filen (Markeras med FG)
- Bas64 enkodade i CSS-filen (Markeras med FI)
- Ett anrop till Google Webfonts,
<link>
i headern (Markeras 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 |
Minified (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äknat på bandbredd av 0.25Mbit, samt fördröjning av 0.25s/anrop
NaNoWriMo
Jag har bestämt mig. Det blir skrivande det här året. Tidigare har jag aldrig haft tid/ork att skriva, och NaNoWriMo har alltid kommit alldeles för plötsligt. I år har jag idéer, jag har viss inspiration, och en känsla för vad jag vill göra.
November, here I come!
Jag har installerat FocusWriter, för att se om det är bättre för mig än att använda Gedit. Kommer nog sakna att inte se formateringen när jag använder Markdown, men det går nog bra.
Liten gotcha: Eftersom jag har Ubuntu (som inte använder KDE) var jag tvungen att installera 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 arbetar med WordPress och blir litet smått irriterad på att behöva fylla i FTP-uppgifter, och framför allt om man arbetar lokalt så finns det ingen FTP. Det man kan göra är att se till så att användaren som webbläsaren använder (i många fall www-data
) är ägare och grupp till alla filer.
Detta är ju jättebra, tills man 1) Inser att den nya templaten man skapat ägs av ens egen användare och/eller 2) Man inte längre kan ändra filer. Lösningen är enkel.
Först, se till så att du tillhör gruppen som webbläsaren använder (här förutsatt att vara www-data
).
Ctrl+Alt+T
för att få upp terminalen, och sedan
sudo usermod -a -G www-data <user>
Notera: Starta om datorn efteråt.
För att kontrollera så att gruppen är tillagd, skriv groups <user>
i ett terminalfönster.
Nu behövs två kommandon för att få detta att fungera. Först, rekursivt ägande av den specifika mappen. OBS: kommandona här (chown
and chmod
) kan skada din dator om du inte är försiktig. Se till så att mappen som du ändrar är exakt den mappen som ska ändras, inte någonting annat. Du behöver antingen vara inloggad som root
eller använda sudo
för att köra dessa kommandon, av den anledningen.
Först:
chown -R www-data:www-data /home/user/folder
chown
— change file owner and group (ändra filägare och grupp), seman chown
för detaljer-R
— Rekursivt<owner>:<group>
, i detta fallwww-data:www-data
- Sökvägen till mappen. Om du inte är inloggad som rot kan du använda
~/folder
om den ligger i din hemmapp. Standardplats brukar vara/var/www/<någonting>
Nu “ägs” filen av www-data, vilket leder till den andra modifikationen, som nog inte bör ligga på live: Gruppen ska kunna skriva till filerna också:
chmod -R g+w /home/user/folder
chmod
— change file mode bits (ändra filens typvärdesbitar). På ren svenska: Ändra filens tillåtelser, seman chmod
för detaljerg+w
— Lägg till skrivrättigheter (w, write) till gruppen. Andra värden är u=user, a=all, använd-
för att ta bort rättigheter. Andra rättigheter är r=read och x=execute
Bashscript
Jag är lat och har tröttnat på att skriva dessa kommandon varje gång, så här kommer mitt bashscript, sparat 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 kommandot chmod +x ~/bin/www.permissions.sh

Internet Explorer 9 float bug
Idag har jag varit på insektsjakt! Designen till en sida jag jobbar med var snygg i Chrome och Firefox, så hyfsad man kunde förvänta sig i IE8, och sedan kollade jag IE9…
Åh jisses. Hela layouten var helt ur led, med en float: left till höger, och sidebaren (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älder utan fast bredd eller 2) förälder med margin: auto.
Jag hade 2), men vem vill låta bli en centrerad layout? Jag fortsatte Googla. Slutligen såg jag en intressant trend… Många med detta problem hade en felaktig doctype.
Det hade ju visserligen inte vi, men i desperation skrev jag DOCTYPE istället för doctype, dvs med stora istället för små bokstäver. Då fungerade layouten.
Så, för att sammanfatta: Internet Explorer hamnar i quirksmode om doctype är skrivet med små bokstäver.
PS: Ifall någon vet vem som gjort bilden jag använder så skulle jag vara tacksam över att få reda på det. Den har legat i mappar på mina datorer sedan cirka -96, och konstnärens första namn är troligtvis “Åke”.
WP-Typography
Ett av mina favorittillägg till WordPress är WP-Typography. Tyvärr har detta tillägg inte uppdaterats på två år, vilket gör att det har vissa nackdelar, främst att det inte passar tillsammans med WP Markdown. Jag har en uppdaterad version som jag funderar på att se hur man kan få in i den officiella,har lagt upp på Github med väldigt små förändringar, främst har jag tagit bort deprecated saker, och ändrat 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ändas som en del av en plugin. I de flesta fallen är kodsnuttarna sådana som jag antingen har hittat någonstans och vidareutvecklat, eller löst eftersom jag hade ett behov som behövde fyllas. De är inte, i de flesta fall, skrivna som helt kompletta, utan är till för inspiration och vidareutvecklande.
Stöd IE6 Shaming
Som nog de flesta vet finns det en hel del debatt om IE6 och faktumet att IE6 fortfarande finns där ute.
Detta är en liten funktion baserad på Roots header. Jag använder den med en konstant för huruvida den ska aktiveras 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
Adminbarens vara eller inte vara verkar vara hett omdebatterad. Överlag tycker jag om den, men har känt ett behov av att kunna ändra den (WordPress, Y U NO make admin bar responsive?).
Själva koden är enkel: wp_deregister_style('admin-bar');
Om man bara vill ändra den i frontend eller backend bör man lägga den i en if-sats, antingen !is_admin()
(frontend) eller is_admin()
(backend).
Ändra Gedit-terminalens färger
I Ubuntu Precise finns en mindre bug som gör att terminalen i Gedit inte är läsbara. I sökandet efter lösningen (och efter snyggare färger) hittade jag följande fråga som täckte en större fråga.
Mitt val var att sätta upp en terminal som i mångt och mycket ser ut som Cobalt, det färgschema jag använder. Alltså blir det det följande:
- Installera
dconf-editor
om den inte redan är installerad (i ubuntu:sudo apt-get install dconf-editor
) - Öppna
dconf-editor
och navigera tillorg » gnome » gedit » plugins » terminal
- Som synes har jag en mörkblå färg som bakgrund (#001b33) och en ljusgrå färg som text (#fefefe). Jag har valt att inte använda temats färger, eftersom dessa inte är helt läsbara. Palette kan man sätta till olika färger, men jag är nöjd med de färger som jag har lagt in här.
Gedit++
Uppdatering: Vissa ändringar i plugins Jag sitter på Ubuntu, som har kommit upp tidigare. Just nu är det 10.04, men jag och min pojkvän jobbar på att installera om våra respektive datorer och sedan byta så att han har min stationära och jag har hans bärbara. Han är hemma mer än vad jag är, så det är ganska vettigt. Men, nu var det inte om Ubuntu, utan om vad jag använder när jag kodar, nämligen Gedit. Egentligen tror jag att det ska skrivas gEdit, eftersom det är en textredigerare för Gnome, men jag tycker det låter så mycket sötare med “gedit”, hårt g givetvis. …Efter denna lilla parentes så återgår vi till min setup <.<
Grundläggande plugins
- External tools
- File Browser
- Insert Date/Time
- Python console
- Quick open
- Snippets
- Sort
Addons från gedit-plugins
- Bookmarks
- Bracket Completion Just den här använder jag explicit inte, eftersom den inte fungerar med en plugin som nämns senare
- Charmap
- Code Comment
- Color picker
- Commander
- Draw spaces
- Join lines/ Split lines
- Session Saver
- Smart Spaces
- Tag List
- Terminal
- Word completion
Övriga plugins
Class Browser (Gedit 3/Gedit 2)Source Code Browser (Gedit 3/Gedit 2): Behöver ctags (exuberant-ctags)- Markdown
- Pair auto-completion: Bättre än Bracket Completion
- Project Manager (Gedit 3 enbart)
- PHP Doc genererare
- GMate För mig ger detta en utmärkt blandning av funktionalitet utan att ta bort ifrån det faktum att gedit är snabbt.
Bah. Bootstrap >.
Har precis bytt till Roots som tema, eftersom det är trevligt att använda som bas för att skinna om min blog, vilket behövs. Väldigt mycket.
Varför beklagar jag mig, då?
- Twitter Bootstrap är grunden. Den har många mycket snygga effekter, men har alldeles för mycket grått/svart/vitt för min smak. Speciellt irriterande är att många av färgerna är hårdkodade, trots att de är skriven i LESS.
- Bootstrap är skrivet i Less, så för att kunna använda min favorit Sass är jag tvungen att hämta en port skriven av John W. Long.
- Måste komma mig för att lista ut hur jag vill att min blog ska se ut >.>