Fyra självklara friheter?

Jag uppgraderade precis WordPress till 3.3 och till min stora glädje lyder en av de tre stora flikarna på sidan efter lyckad installation “Freedom”.

WordPress is Free and open source software, built by a distributed community of mostly volunteer developers from around the world. WordPress comes with some awesome, worldview-changing rights courtesy of its license, the GPL.

  1. You have the freedom to run the program, for any purpose.
  2. You have access to the source code, the freedom to study how the program works, and the freedom to change it to make it do what you wish.
  3. You have the freedom to redistribute copies of the original program so you can help your neighbor.
  4. You have the freedom to distribute copies of your modified versions to others. By doing this you can give the whole community a chance to benefit from your changes.

Don’t you wish all software came with these freedoms? So do we! For more information, check out the Free Software Foundation.

WordPress logo badge

Optimera Stockholm

Det är lite lockande att som Göteborgare passa på att skämta om bästkust och hur man har behov av optimering i Stockholm medan allt är fint i Götet, men dagens seminarie/minikonferens (twittertag #optsthlm) på ämnet webboptimering/webbprestanda förtjänar inget annat än lovord! Talarnas ämnen och innehåll var mycket väl utspridda över hela problemrymden från server till klient och allt där mellan. Continue reading “Optimera Stockholm”

CKEditor och bliki 2.0

I min egen TODO-lista har jag länge haft på tapeten att fixa en egen wiki (programvara), eftersom alla jag stött på innan saknat något. Så idag gick jag igång på en reflektion som diskuterades (med Peter Lindh) kring wikis – varför skall det vara så omständligt att korrigera något litet, som t ex stavfel? Hela sidan skall laddas om, man skall rulla fram till rätt ställe och i värsta fall även se till att ha lite av markup-syntaxen i huvudet + hålla ordning på var i markup-stacken man befinner sig. Nej tack.

Så wiki.wendt.se föddes, jag tankade hem CKEditor (istället för TinyMCE som jag använt många gånger tidigare) och tittade även på andra editorer. CKEditor fungerade dock fortfarande bra även på sidor med mycket innehåll – den blev inte slö efter att man skrivit in tillräckligt mycket text.

Ctrl+X för snabb redigering

En sak som jag verkligen uppskattat med wordpress är det lilla stöd man försökte ge den som skall skriva in sin text. Det går t ex att trycka CTRL+1 för att göra ett stycke till en rubrik av storlek 1 (h1), 2 för h2, …
Detta saknades i CKEditor så det lade jag en dryg timme på innan jag hittade korrekt lösning till.

Keystrokes kallas kortkommandon i CKEditor och de kan justeras genom konfigurationsobjektet som anges när man via JavaScript drar igång editorn. En keystroke består av sifferkombination (1049 för Control+1 t ex) och namn på ett kommando att exekvera (editor.execCommand). Första problemet var att endast bold, italic och liknande icke-blocks-stilar fanns som kommandon.

I plugins/format/plugin.js lade jag till följande rad för att registrera kommandon “globalt”:
editor.addCommand(tag, new CKEDITOR.styleCommand(style));

Det var inte trivialt att hitta var man skulle jacka in sig, men trivialt när det väl var hittat :) En försvårande faktor är att CKEditor nyss kom i ny utgåva (version 3.x) och all dokumentation inte riktigt är lika uppdaterad som den varit för den förra utgåvan (version 2.x).

Packningsverktyget saknas, samt instruktioner

När man väl ändrat i _source-katalogen och vill få allt packat igen får man dra hem en jar från http://svn.fckeditor.net/CKPackager/trunk/bin/ och exekvera denna. Instruktioner om att “det är så man får göra” går bara att hitta på forumet …
http://cksource.com/forums/viewtopic.php?p=46072#p46072

Lista saknas

Det saknas en sammanställning över vilka tangentbindningar som används från början, och vilka kommandon man faktiskt kan binda upp (att byta till h1 fanns alltså inte out of the box).
* Enklast är att bryta (med ckeditor_source.js som källa, dvs icke-minifierat) i core/editor.js i metoden addCommand.
* JavaDocen för CKEditor har lista på default bindings (keystrokes).

Jag saknar korrekt bindning för
* image
* outdent (motsats till indent), pga att svensk tangentbordslayout saknar dedikerad tangent för tecknet <,
* numbered list, och
* bullet list.
Följande är dock konfigurerade manuellt och fungerar fint:
[ CKEDITOR.CTRL + 90 /*Z*/, ‘undo’ ],
[ CKEDITOR.CTRL + 89 /*Y*/, ‘redo’ ],
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, ‘redo’ ],
[ CKEDITOR.CTRL + 76 /*L*/, ‘link’ ],
[ CKEDITOR.CTRL + 66 /*B*/, ‘bold’ ],
[ CKEDITOR.CTRL + 73 /*I*/, ‘italic’ ],
[ CKEDITOR.CTRL + 85 /*U*/, ‘underline’ ],
[ CKEDITOR.CTRL + 48 /*0*/, ‘p’ ],
[ CKEDITOR.CTRL + 49 /*1*/, ‘h1’ ],
[ CKEDITOR.CTRL + 50 /*2*/, ‘h2’ ],
[ CKEDITOR.CTRL + 51 /*3*/, ‘h3’ ],
[ CKEDITOR.CTRL + 52 /*4*/, ‘h4’ ],
[ CKEDITOR.CTRL + 53 /*5*/, ‘h5’ ],
[ CKEDITOR.CTRL + 54 /*6*/, ‘h6’ ]

En av CKEditors fördelar är att länk-dialogen som visas är ett lager och inte ett eget fönster som TinyMCE använder. Fördelen är att det går snabbare att skriva in en URL pga att man slipper vänta på att en sida skall laddas.

Vanlig bläddring först: “läsläge”

Nästa problem att tackla var att editorn inte skall störa det vanliga läsande förrän man faktiskt vill ändra något. CKEditor har inget readonly läge som supportas. Forumet bjuder dock på ett par hack, men det var inte felfritt.

Tappar höjd

Tyvärr lider dpck CKEditor.replace() av att höjden på det element som ersätts inte bevaras. Så jag har nu gjort så att när en sida på wikin laddas så lyssnar jag efter dblclick-event (med ExtJS Core) och när det kommer drar jag iväg anropet till CKEditor.replace(divID, config) och populerar config.height med rätt höjd.
var replaceDivwithEditor = function() {
var el = Ext.get(‘editorDiv’);
var height = el.getHeight();
var padding = el.getPadding(‘tb’);
var scroll = el.getScroll();

var toolbarheight = 60;
ckConfig.height = height + padding + toolbarheight;
CKEDITOR.replace(‘editorDiv’, ckConfig);
};

Börja redigering automatiskt

Allra helst hade jag velat att det man dubbelklickade på i läsläge skulle vara markerat när man hamnar i skrivläge. Men dagen har blivit efter midnatt och det är dags att fortsätta en annan dag.

Multipla redigerare

Ett annat önskemål är att kunna stödja flera upphovsmäns petande i samma sida samtidigt, såsom EtherPad fungerar. Andra har visat att det inte är omöjligt att göra, jag har dock inte hittat någon som integrerat det med CKEditor eller annan icke-radbaserad plain text editor.

http://etherpad.wendt.se/

Roadmap

En liten snabb roadmap för att byta ut bloggen/Fredriks anteckningar mot en egen blogg igen:

Must haves:
# säkerhet
# versionshanterad lagring (kanske CouchDB)
# RSS-feed (enklare med SQL?)
# hantering av nuvarande material, dvs dess URL:er – innehållet är ju redan HTML
# mediauppladdningsplugin (CKFind är tydligen inte OSS)

Och optional:
* SEO (taggar borde räcka)
* ev kommentarsfunktion
* arkivfunktioner
* OpenID
* syntaxfärgning av kod

Google får ta hand om sökning.

Utskrift av webblog

De flesta teman (för wordpress) som jag stött på har inte alls brytt sig om att ta bort onödigt material när man skriver ut. För temat KIS fixade jag detta själv lite snabbt och lätt genom att peta in följande i en fil:

#respond,
#footer,
#header,
#content .page-nav,
#sidebar
{
	display: none;
	visibility: hidden;
}

och sedan var det bara att länka in det med en en link-tagg: <link rel='stylesheet' type='text/css' media='print' href='<?php ... ?>-print.css' />

PS. Firefox bet dock inte på detta vid mina första försök. Det verkade som den helt ignorerade den nya CSS-filen. Även Firebug rapporterade att det inte fanns några CSS-filer “aktiva”, trots att link-taggen var med i huvudet (<head>). Problemet var att jag först kallade filen blaha.css-print och troligen skickades fel content-type headers.

Gospel-DVD, ffmpeg och cinerella

Såhär gjorde jag för att skapa ett litet klipp från en DVD.

  • konvertera DVD-filen (VOB) till dv-video
    ffmpeg -y -threads 2 -isync -ss 00:24:00 -i VTS_01_2.VOB -an /virtual/video/video.dv
  • konvertera DVD-filen (VOB) till wav-ljud
    ffmpeg -y -threads 2 -isync -ss 00:24:00 -i VTS_01_2.VOB /virtual/video/sound.wav
  • redigera (för ljud/bild var inte i synk) med cinerella (varken Kino eller Open Movie Editor lät mig göra detta)
  • exportera till dv
  • konvertera till flash, mono (ac 1) och med kvalitet 10 (1=bäst, 31=sämst)
    ffmpeg -y -i cut.dv -qscale 10 -ab 56 -ar 22050 -b 200 -r 15 -s 320x240 -ac 1 -f flv cut.flv

[flashvideo file=http://wendt.se/misc/gbg-gospel-2009-05-02-snippet.flv /]

WordPress-adaptern heter Flash Video Player.

ffmpeg-flaggor:

-r X  fps
-ab   average bit rate (sound, default = 64k)
-ar   frequency (audio, default = 44100)
-an   disable audio
-ac   channels (1=mono)
-b    bitrate bit/s (video, default=200kb/s)

OpenID, Yubikey och Gandi

Bild på Yubikey-nyckel
Bild på Yubikey-nyckel

Har mailat Yubico om att få AES-nyckeln till min Yubikey, som är av en utgången modell. Den är av samma storlek som ett “vanligt” USB-minne. De nya modellerna är lita tunna som den del man stoppar in i datorns USB-kontakt, ett par ynka millimeter alltså. Det första svaret var att Yubico slutat skicka ut AES-nycklar och uppmuntrar istället till att programmera om nyckeln själv med deras programvara.

Lyckades sätta upp en verifieringsserver utan större problem på en virtuell maskin hos Gandi. Deras I/O verkar ha blivit mycket bättre sedan jag testade sist – det är inte alls lika slött att använda filsystemet nu vilket var positivt. Spännande eftersom de har ett klart attraktivt pris. Över sommaren har de en drive där de erbjuder gratis prova-på till den sista augusti.

Aktiverade en adapter till WordPress som gör att jag kan logga in med mitt OpenID, wendt.se. Fungerar fint efter att jag hittat menyalternativet Users » Your OpenIDs.