Redigera vilken sajt som helst i webbläsaren

Ok det här är coolt faktiskt. Paul Buchheit, skaparen bakom bland annat Gmail och Friendfeed, postade just på den senare sajten en kod för att kunna redigera text direkt i webbläsaren. Den gör body till en contenteditable helt enkelt.

Jag har fått det att fungear på Safari, Firefox och Chrome, mac versioner. Och jag hör folk som säger det funkar på IE och PC versioner också.

Lägg till följande som ett bokmärke, akivera och börja skriv direkt på skärmen.

Eller klicka på denna länk för att testa på vår sajt.

3 kommentarer

Redirecta allt till root med htaccess

Hade fått tillgång till en ftp-server med en väldigt massa filer på från många år tillbaka som är indexerade av google. En herrans röra kan man säga.

Tanken är att vi ska utveckla en ny sajt och under tiden så ville jag att inga av de gamla filerna skulle gå att nå. Servern är av typen Apache som jag inte är så van att arbeta med. Så efter ett intensivt googlande och testande så tror jag att jag fått till en bra redirect-regel.

Denna redirectar endast html och php-filer och fungerar på mappar. Alla anrop på nämnda dokumenttyper skickas till rootmappen.

Skriv kommentar

Radbryt på SQL Server

Jag behövde formattera några databastexter som (x)html och körde följande för att få  paragrafer runt textstyckena. På Stack Overflow lärde jag mig att CHAR(13) är tecknet för radbryt.

Vissa rekommenderar  att formattera först när man visar upp texten för användaren, men jag brukar vilja ha även htmltaggarna i databasen.

2 kommentarer

Snabb Firefox

Dessa tips kommer från Jim Westergren's "Make Firefox run up to 4 times faster" och gäller 3.0.9 av webbläsaren Firefox. För mer detaljerad information om vad varje inställning läs mer på Jim's artikel.

Dessa instälningar passar bra för användare med bredband, surfar mycket och använder många flikar i webbläsaren samtidigt.

För att ändra dessa värden skriv about:config i adressfältet, tryck enter och bekräfta att du lovar att vara försiktig. Sen ändra befinfliga värden enligt följande.

browser.history_expire_days_min;10
browser.sessionhistory.max_total_viewers;1
browser.tabs.tabMinWidth;80
layout.spellcheckDefault;2
network.http.max-connections;100
network.http.max-connections-per-server;20
network.http.max-persistent-connections-per-server;8
network.http.pipelining;true
network.http.pipelining.maxrequests;8
network.http.proxy.pipelining;true
network.http.request.max-start-delay;0
network.prefetch-next;false

Två värden som inte finns i standardkonfigurationen kan även läggas till:

config.trim_on_minimize;true
nglayout.initialpaint.delay;100

Ni som har många flikar öppna kan också prova att förminska dess bredd för att fler ska få plats:

browser.tabs.tabMinWidth;70

Med dessa ändringar blev läsaren äntligen snabb. Upplevde en stor förbättring i bland annat Google Reader.

2 kommentarer

Redigera hosts-filen på OS X

DNS-servrar håller reda på vilka domännamn som ska kopplas till vilket IP. Ibland kan man vilja överlagra dessa på sin egen maskin, t ex när man utvecklar en testsajt eller liknande.

Hur man gör för att ändra sin hosts-fil på Windows har vi skrivit om tidigare.

På OS X är förhavandet liknande i senare versioner av operativstemet, här är Apples guide.

Man måste ha rättigheter till rooten för att kunna se private-mappen filen ligger under. Vi har tidigare skrivit om hur man visar gömda filer på OS X.

När man väl har tillräckliga rättigheter navigerar man till mappen /private/etc/hosts och öppnar man den får upp något som liknar detta.

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1	localhost

Man måste dock vara inloggad som root-användare för att spara ändringar, så det räcker inte bara att öppna den i en textredigerare och försöka spara. Här är två sätt man kan ändra den.

1. Ändra hosts genom att skriva över med kopia

Kopiera filen och lägg den på skrivbordet. Redigera spara. Dra den sen till /private/etc/hosts och släpp. Nu får du skriva in ditt lösenord för att bekräfta att du har rättigheter att modifiera filen.

2. Ändra hosts med textredigerare i Terminalen

Med detta sätt behöver du inte slå på att visa gömda filer som vi skrev inledningsvis om. Här använder vi en redigera som startas från terminalen. Finns en del men i detta exemplet använder vi en som heter GNU nano 2.0.1.

Öppna först teminalen.

Skriv: sudo pico /private/etc/hosts

Bekräfta ditt lösen för att få root-rättigheter.

Nu får du upp textredigeraren och du kan modifiera filinnehållet. Spara ändringar genom ctrl-o och stäng ner editorn med ctrl-x.

1 kommentarer

Programmeringsstilar du inte hört talas om

Läste just och hade rätt kul åt inlägget The secret driven-development/design acronyms. Vad sägs om "ADD, Agro Driven Development", "EDD, Ego Driven Design" eller "CDD - Christmas Driven Design". :-)

1 kommentarer

SQL Replace för att skapa Slugs

Har på många tidigare projekt använt Id-nummer i url:erna för att IIS och .NET haft så dåligt stöd för att skapa användarvänliga url:er. Gör nu om en del gamla sidor till ASP.NET MVC och lägger över dem till IIS 7-servrar som har bättre stöd för url-omskrivning.

Brukar lägga till ett speciellt databas-fält för att spara den sista delen av url:en som ska vara till för att identifiera blogginlägget, produkten, kategorien eller vad det nu handlar om och basera denna på den äldre titeln. Använder det uttryck som även Wordpress använder för att beskriva ett sånt fält, "Slug".

Här är ett skript som jag precis körde på en sådan databas. Detta byter ut de tecken jag inte vill ha i url:erna mot ett vanligt bindestreck, gör om allt till gemener och byter ut å,ä,ö mot a,a,o.

UPDATE BlogPost SET Slug=Lower(Title);
UPDATE BlogPost SET Slug=REPLACE(Slug,'å','a');
UPDATE BlogPost SET Slug=REPLACE(Slug,'ä','a');
UPDATE BlogPost SET Slug=REPLACE(Slug,'ö','o');
UPDATE BlogPost SET Slug=REPLACE(Slug,' ','-');
UPDATE BlogPost SET Slug=REPLACE(Slug,'&','-');
UPDATE BlogPost SET Slug=REPLACE(Slug,'/','-');
UPDATE BlogPost SET Slug=REPLACE(Slug,'-','-');
UPDATE BlogPost SET Slug=REPLACE(Slug,'.','-');
UPDATE BlogPost SET Slug=REPLACE(Slug,',','-');
UPDATE BlogPost SET Slug=REPLACE(Slug,'_','-');

1 kommentarer

Kom igång med ASP.NET MVC Release Candidate

ASP.NET MVC är ett ramverk som erbjuder ett sätt att utveckla webbplatser som främjar testbarhet, struktur och klar separation av huvudbry. Man får intuitiva url:er och total kontroll över html-kod och css som rendereras. Själva designmönstret Model-View-Controller är ju inget nytt utan har tidigare funnits i webbramverk som t ex Zend, Django, eller Ruby On Rails. Det här handlar alltså om Microsofts implementering för webb av mönstret.

Ramverket utannnonserades av Microsoft i slutet av 2007 och har sedan dess släppts i ett antal förhandstitt-versioner (fem tror jag), en betaversion och nu nyligen en kandidat till den slutgiltiga versionen. Utveckligen har skett i stor samverkan med utvecklarcommunityn och det har varit riktigt roligt att se det växa fram. Det riktiga släppet ska enligt tidigare meddelanden släppas nu under februari månad. Återstår att se ifall de håller den tidsramen, men nu är det hur som helst inte långt kvar.

Det är alltså ett perfekt läge att börja testa med ramverket ifall du inte gjort det tidigare, något jag rekommenderar varmt. Web forms i all ära, när jag har kört MVC ett tag så lockar inte den klassiska modellen längre.

Bra introduktionsartiklar till ASP.NET MVC av Stephen Walter

Stephen Walter skriver för tillfället på boken ASP.NET MVC Framework Unleashed och bjuder på sin blogg på några exempelkapitel från denna. Riktigt bra ifall man vill lära sig runderna i ASP.NET MVC.

I Chapter 1 - An Introduction to ASP.NET MVC ger han en introduktion till vad han anser hur bra mjukvara ska byggas, designmönster, arkitektur och vikten av testdriven utveckling. Han förklarar även hur standardinstallationen av ASP.NET MVC-installationen fungerar.

Vidare med Chapter 2 - Building a Simple ASP.NET MVC Application ber han oss lustigt nog att glömma vad han just sagt om testbarhet och de stora målen med mönstret och visar oss istället hur man bygger en enkel applikation, utan ett enda test. Här får vi dock lära sig hur man skapar projektetet i Visual Studio och bekantar oss med filstruktur coh de allmänna begreppen.

Sen visas i Chapter 3 - Understanding Controllers hur Controllers fungerar, vad för olika typer av resultat de returnerar, hur man kan begränsa dem till att bara acceptera specifika HTTP-attribut och hur man testar dem.

Det i skrivandes stund sista kapitlet som förhandsvisas är Chapter 9 - Understanding Routing och här visas hur man sätter upp sina routes i Global.asax för hur url-stukturen på för sin applikation ska se ut. Han går igenom hur man kan sätta begränsningar på dem och hur man debuggar och testar dem.

En riktigt lärolik samling artiklar alltså och hoppas fler kapitel dyker upp snart. Tänkt bara att detta är temporära kapitel ur boken som kan komma att ändras för att reflektera eventuella sista-minuten-ändringar vi kan komma att få se i den slutgiltiga versionen av ASP.NET MVC.

Köra olika versioner av ramverket samtidigt

Till sist ett litet tips ifall du redan har utvecklat sajter på tidigare versioner och vill testköra den nya RC-versionen utan att oroa dig för att dina tidigare projekt slutar att fungera. Här handlar det om att ta bort MVC-referenserna från GAC efter du installerat den senaste releasen. Man måste in i registret och röja så var försiktig vad du än gör. Jag har följt instruktionerna på min maskin och det gick fint. Mina äldre projekt körs med betaversionens MVC-ddl:er som ligger i respektive projekts Bin-mapp.

Att jag inte ens har provat att skapa ett RC-projekt är en annan femma. Försöker hålla mig eftersom den riktiga versionen kanske släpps typ imorgon...

2 kommentarer

Spåra formulärspostningar med Google Analytics

Har tänkt igenom hur denna blogg kan bli bättre och roligare att läsa och har en del ideér. För att kunna mäta om förändingar är bra eller dåliga så ville jag först sätta upp några mål i Google Analytics, och det har jag sysslat med de senaste dagarna. Tänkte dela med mig av vad jag lärt mig.

Först tänkte jag igenom vad målen med bloggen är och kom fram till att det viktigaste och roligaste är när man får input från sina läsare. Det är på så sätt som bloggen kan utvecklas och växa och därför bestämde jag mig för att sätta upp följande två mål.

1. Kontaktformulär skickat
2. Kommentar postad

När man sätter upp mål-urlerna i Google Analytics så har man tre olika alternativ, Exakt matchning, Rubrikmatchning och Matchning av vanliga uttryck. Utan att gå in för mycket på dem så kan jag kontatera att Exakt matchning fungerade bäst för det ja ville göra. Hos Google finns det en bra hjälpsida som förklarar hur de olika alternativen fungerar.

De två målen har jag implementerat lite olika så tänkte förklara här hur jag gjort.

Så satte jag upp mål för Kontaktformuläret

Kontaktformuläret postar tillbaks till sig själv och jag har alltså ännu inte gjort om det till PRG-designmönstret som jag skrev om här om dagen. Eftersom adressen inte ändras var jag tvungen att skicka med den påhittade sida "/contact-form-submitted" som jag angett i mitt första mål.

I ContactControllern (ASP.NET MVC) så skickar jag med parameter i ViewData när användaren har postat meddelandet:

this.ViewData["TrackPageView"] = "\"/contact-form-submitted\"";

Denna parameter sätts sen in längst ner på sidan i skriptet för Google Analytics:

<script type="text/javascript">
//<![CDATA[
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write("\<script src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'>\<\/script>" );
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
    var pageTracker = _gat._getTracker("<%=Request.Url.ToString().ToLower().IndexOf("codeodyssey.se") != -1 ? "UA-406884-2" : "UA-406884-1" %>");
pageTracker._initData();
pageTracker._trackPageview(<%=ViewData["TrackPageView"] %>);
//]]>
</script>

Mål-koden för kommentarerna

Kommentarsfunktionen har jag nyligen gjort om så den följer PGR-mönstret och här hade jag lite svårare att lägga in spårningskoden på rätt ställe. Provade en del olika grejer där jag bland annat försökte lägga in det på den adress som man postar kommentaren till (bloggurl plus "/add-comment" på slutet). Vet inte exakt varför det inte gick med regulärt uttryck men antar att det beror på att den sidan returnerar en 302-respons (see other adress). Kan vara så att man inte kan tracka såna sidor med Google Analytics.

Sen kom jag på en enklare lösning. La på ett onclick-event på submit-knappen istället där jag anropar pagetrackern och det fungerar nu fint.

<input onclick="pageTracker._trackPageview('/comment-submitted');" type="submit" value="<%= GetLocalResourceObject(" />" class="submit-btn"/>

Först trodde jag att huvudskriptet där tracken inkluderas var tvungen att ligga ovanför eventet, med det visade det sig att den inte behövde, den har ju redan registrerats när sidan laddas. Google Analytics Tracking API var användbart för felsökning och genom att anropa _getAccount() kunde jag bekräfta att eventet hade kontakt med trackern.

Dags att mäta, förändra och förfina

Så nu är det bara att luta sig tillbaks och börja analyserar hur kommentarer och kontaktmeddelande postas på Code Odyssey. Kom gärna med förslag och ideér hur sidan kan göras bättre för att uppmuntra fler kommentarer och rikare samtal.

Vill du själv göra samma sak och använder WordPress kan jag rekommendera How To Track Wordpress Signups and Comments With Google Analytics hos TD Creative.

Skriv kommentar

Mozilla Labs Bespin - kodredigering i molnet

Detta är något nytt och väldigt spännande. Mozilla Labs har precis släppt en prototyp av en kodeditor som de kallar Bespin.

Har precis sett introduktionsfilmen som du hittar i releaselänken ovan och testkört själva editorn.

Man använder sig av HTML5-taggen Canvas för att rita upp scrollbars, de grafiska elementen samt även själva texten om jag förstått det hela rätt. Det gör att man kan finna funktioner som inte funnits på nät-applikationer innan. T ex kan de mäta längden på textsträngar och få texten att anpassa sig efter de omliggande panelerna och hur mycket utrymme som finns tillgängligt.

Prestandan på textediteringen blir med hjälp av Canvas-rendereringen väldigt god. I videon visas exempel på hur man redigerar en fil på över 30000 rader och det fortfarande går väldigt snabbt att skriva. Något vi inte sett på webben innan.

Även fast det är en tidig protoyp ser det mycket lovande ut och jag tror detta kan utvecklas till något riktigt häftigt. Senast för nån timme sen satt jag och försökte editera kod i en TinyMCE-editor som jag har konfigurerat själv och det är verkligen en stor möda. Det behövs något bättre på webben och Bespin kan vara svaret.

Målet med projektet är att skapa en produkt som kan mäta sig med med traditionella kodredigerare som körs i skrivbordsmiljö. Än är det nog läng väg kvar innan jag ska byta ut Visual Studio mot ett webbaserat alternativ, men kanske blir det tillräckligt bra i framtiden för att man ska göra viss del av sitt kodande ute i molnet. Möjligheten till att kollaborera många andra användare samtidigt i samma filer är minst sagt intressant.

I det första utförandet stöjder Bespin syntax highlighting för Javascript, HTML och CSS, men fler språk kommer att läggas till i senare versioner.

Man kan programmerar egna kommandon och på så sätt utöka editorn med egen funktionallitet. Det kommer även finnas en modell för att kunna dela dessa påbyggnader med andra användare.

Skriv kommentar