Broken8

IoSand - The new theme

2010-12-07T00:00:53+01:00

Ok, this is the final time I remake this sites theme.

At least this year. I really should be writing some content instead of remaking themes that's never used.

Autocomplete from any folder using `CDPATH`

2010-11-10T23:56:00+01:00

What I wanted was to quickly be able to navigate to any project in my ~/Sites folder from within the terminal, preferably with autocomplete. The solution was a combination of three things. First I needed to add ~/Sites to the CDPATH variable. Then I needed to install some kind of package managing system for OS X, I went with Homebrew. Homebrew let me intall bash-completion.

The magic of `CDPATH`

Bashs man page describes what the CDPATH variable does.

The search path for the cd command. This is a colon-separated list of directories in which the shell looks for destination directories specified by the cd command. A sample value is ".:~:/usr".

This means that if we add our ~/Sites folder to CDPATH we will be able to just type cd project-name instead of cd ~/project-name. OS X uses ~/.bash_profile to load predefined variables and function so this is where we'll add our CDPATH modifications.

The code below will add your ~/Sites to CDPATH keeping any other changes you might have done with it. After this you should be able to cd project-name from a terminal (remember that you'll need to restart terminal or do an export on the CDPATH changes before it will start working).

Use your favorite code editor to open ~/.bash_profile and add the following.

CDPATH=$CDPATH:~/Sites/

bash-completion gives you back tab completion.

This is great! Now I just need to type the project name to go to it. But I'm actually even more lazy, I want tab completion as well. Enter bash-completion. Sadly bash-completion isn't installed by default to OS X (at least not my install of OS X 10.6). To install this we need some kind of ports system. I decided that this would be a great time to try out the new solution called Homebrew. From what I'd read about it it was supposed to be simpler than the alternatives Fink and MacPorts.

Homebrew, a great ports solution

Installing homebrew was extremely simple and I was up and running fast. Sadly homebrew have some requirements that might take you longer to get working (no exception for homebrew, the same goes for Fink as well as MacPorts). But instead of me copy/pasting the homebrew installation instructions just read them from homebrews page.

Once you have Homebrew up and running installing bash-completion is as simple as

brew install bash-completion

The bash-completion installer wanted me to add a couple of lines to my .bash_profile file.

if [ -f `brew --prefix`/etc/bash_completion ]; then
. `brew --prefix`/etc/bash_completion
fi

Credits and Disclaimers

I toke most of this information from either Rob Wilkerson » Tab Completion for CDPATH on Mac or Homebrew — MacPorts driving you to drink? Try Homebrew!. Thanks for an excellent post Rob and a great app Max!

As always when it comes to playing with your toys. Everything is at your own risk, if you break something it's your fault not mine.

jQuery Show Passwords

2010-09-06T23:26:19+02:00

A discussion with a friend over skype made me remember a podcast I listened to a while ago. In the podcast they talked about how stupid it is to not show password fields and how hard it makes it for people. With a simple checkbox "toggle stars" you could make it all so much simpler. So the idea to this plugin is in no way my own, sadly I cant remember where I heard the talk so I cant give creds to the right person.

Simple idea, simple execution

It's a very simple idea, if the user have javascript enabled add a checkbox that will toggle the stars (*) and clear text. Include the javascript along with jQuery and than just run the function. All done!

Download showpasswords, unzip and upload it you your homepage. Add this code, don't forget to modify the src to point to the showpasswords folder. If you already include jQuery just don't add that line.

Almost done. Now all you have to do is execute the plugin. It takes three arguments, label, clearOnFocus and prefix. You might want to change label but prefix and clearOnFocus should be fine as it is.

jQuery(document).ready(function() {
jQuery.showpasswords({'prefix': 'clear-', 'label': 'Toggle'});
});

Demo and Download

For a demonstration and download of showplugin head over to it's github page

Optimering av laddningstiden för broken8.se

2010-08-27T23:31:37+02:00

Laddningstiden för broken8.se var inte dåligt ens innan jag optimerade den. Det betyder dock inte att sidan kan förtjäna lite optimering, eller att det kan vara roligt att försöka trimma laddningsiden.

Kombinera och minimera javascript och css filer.

Det första steget i optimeringen var att kombinera alla javascript filer till en fil samt att se till att den hamnar i slutet av sidan istället för i . Yahoo! skriver i sin artikel Best Practices for Speeding Up Your Web Site att en viktig del av optimeringen är att kombinera filer. Att samtidigt minimera filerna sparar ännu mer tid.

Men att ha all sin javascript kod i samma fil gör det jobbigare att arbeta och om man dessutom vill ha koden minimerad blir det ohållbart. Därför har ett antal olika lösningar för att kombinera och minifiera filer "on the fly" dykt upp. Min favoritlösning är minify. Minify kan kombinera javascript och css filer samt minimera javascript, css och html. För att göra det ännu enklare för mig skrev jag ihop ett litet plugin för Habari som tar bort alla javascript och css filer som lagts till kör dem igenom minify och sedan sparar ut dem som minifierade filer.

Minification.

Minification kombinerar och minifierar javascript, css och html. Genom att samtidigt se till att javascript laddas in sist på sidan upplevs laddningen ännu snabbare. En sida som är bra konstruerad behöver inte javascript för att fungera och det är därför helt ok att ladda in dessa sist.

Imagesprites och jpeg kvalité

Yahoo! föreslår även att man ska optimera sin bilder. Det finns två sätt att förbättra laddningstiden, kombinera flera bilder i en större bild samt att ta ner kvalitén på bilderna och ta bort onödig information i dem. Då broken8.se enbart använder två bilder och dessa av väldigt olika typ kändes det inte vettigt att kombinera dessa. Istället riktade jag in mig på att ta ner kvalitén på bakgrundsbilden och det rejält. Den ursprungliga bilden var en jpeg bild som vägde 569 KB och det var på tok för mycket. Genom att försämra kvalitén från 100 till 40 gick filstorleken ner till 49 KB. Elva gånger mindre än den ursprungliga filen! Ok, att försämra kvalitén på bakgrunden så mycket resulterade i en bild med ganska tydliga jpeg artifakter, det är mycket möjligt att jag i framtiden förbättrar kvalitén något.

Tänk inte enbart på den faktiskt laddningstiden.

Även om den faktiskt laddningstiden kan snabbas upp när man kombinerar filer betyder det inte alltid att sidan upplevs snabbare. Att till exempel använda base64 encoding för att inkludera bilder i cssfilen resulterar i en större css fil. Det här innebär att man sparar in en eller kanske ett par förfrågningar men får istället en uppsjö negativa konsekvenser. Data URIs make CSS sprites obsolete tar upp fördelarna med base64 lösningen men ett antal nackdelar diskuteras även i kommentarerna.

Nackdelar med base64 bilder - som jag ser det.

CSS filens storlek ökar, cssfilen behövs för att kunna visa sidan och ju längre tid det tar för den att ladda desto längre tid tar det innan sidan börjar visas.
I CSS:en deklarerar man alla bilder som siten behöver. Det betyder dock inte att alla dessa bilder används på varje sida. Om en bild inte behövs på en sida kommer den heller inte att laddas. Det betyder att om du vet att visa bilder enbart kommer att användas på em speciell sida kan du ha en separat image sprite för den sidan. På så sätt kan man spara in många KB för en normal användare och ända kostnaden blir en extra bildinladdning.
I Sverige är vi bortskämda med snabbt internet, snabba datorer och stora skärmar men det betyder inte att alla har dessa förmåner. Det finns många situationer där man inte kan eller vill visa grafik. Om man inkluderar bilderna i CSS:en tvingar man användaren att ladda dem. Min åsikt är att en eller två extra filladningar är bättre än att tvinga användaren att ladda allt.

Resultatet

Privatkopieringsskatten betalar för piratkopieringen?

2010-05-05T22:48:23+02:00

I skuggan av FRA och IPRED debatten har jag funderat kring skatten på lagringsmedia som faktiskt finns i sverige, 54% i extra privatkopieringsskatt betalar vi till exempel på tomma dvd skivor (http://www.idg.se/2.1085/1.131367). Denna skatt går via Copyswede vidare till upphovsmännen vars upphovsrättsskyddade material jag just kopierat på min nyköpta dvd skiva. Om jag förstått 1960:729 §12 korrekt är det fullt lagligt att göra en kopia av en cd eller dvdskiva för privat bruk. Det finns därför ingen anledning att betala en privatkopieringsskatt av denna anledning. Som jag ser det kvarstår därför enbart den så kallade piratkopieringen. Men om denna privatkopieringsskatt är tänkt att fungera som ersättning för piratkopiering bör väl inte längre piratkopiering ses som något olagligt? Jag betalar ju för mina dvdskivor, alltså betalar jag för en tänkt piratkopiering?

Skänker 100 dvd-skivor!

Jag skänker mer än gärna bort min rätt att piratkopiera 100 dvd-skivor till någon, jag använder dvd-skivorna som backup för alla foton jag tar och förbrukar alltså inte min piratkopieringsrätt.