Like a good handyman a developer needs his tools – and plugins

by DotNetNerd 23. July 2010 17:34

Over the last couple of weeks I have been looking at quite a few new frameworks, tools and plugins. My focus area has mainly revolved around an app that I will be building that needs to pop and therefore it will make pretty heavy use of javascript and css - and of course by extention jQuery.

First of all dotLessCss deserves a mention, even though its actually not one things I looked at now. Basically it allows you to do some of the stuff you probably miss when working with css. Variables, mixins and nesting really helpes reduce all the repetitiveness. SquishIt is a little library I read about a while ago. It makes bundeling and minimizing javascript and css files as easy as can be. On top of that it also makes sure the files get versioned, so you won't run into users running on an old cached version.

In the category nice jQuery plugins I have looked at quite a few things. jQuery cookie addin makes it a no brainer to work with cookies. Watching a video from NDC I learned that newer browsers now support other ways of saving data on the client called sessionStorage and localStorage. As always the problem is compatibility, but there is a shim to fix this for IE6 and IE7, which are the main culprits.

I also looked at a few flashy jQuery addins, and FancyBox and Cycle solve a few of the things designers crave these days while being super simple to implement. Now that we are in the design department Cufón helpes you do font replacement easily, so you can use cool non websafe fonts.

Video is an area where there are quite a few options available, and it is becomming a jungle figure out which players support which formats and run in which browsers. Video for everybody is a simple way to implement videos in a way that will work across all the popular browsers. The idea is to use the html 5 video tag and then default to others where it is not supported. If being crossbrowser is not quite that important but designing the player is Silverlight has some great optios as well as flowplayer. Both are also easy to work with from javascript almost as straight foreward as the html 5 player API.

Lastly I saw a tweet about TopShelf and decided to try it out. Safe to say, I'll probably use it everytime I need to write a Windows Service from now on. It makes it just a little easier, and allows you to run your app either in a console or as a windows service.

 tools

Tags: , ,

JQuery Ajax debugging

by DotNetNerd 9. March 2009 20:36

Jeg løb fornylig ind i at jeg ville lave et ajax kald ved hjælp af JQuery og $.getJSON, men min action blev aldrig ramt og der blev ikke kastet nogen exceptions. Det viser sig at skyldes at getJSON forsøger at lave kaldet, men hvis det fejler ignorerer den det blot. Løsningen er at for at kunne debugge skal man istedet bruge $.ajax, som gør det muligt at registrere en errorhandler. Herfra kan man så tilgå det response der returneres, og hvis man udskriver det til siden får man en overraskende god fejlside, der gør det nemt at debugge.

Det var ikke et trick jeg fandt beskrevet nogen steder, så jeg synes det var værd at dele - og så er det ellers en af den slags posts jeg tror jeg selv bliver glad for næste gang jeg skal bruge den her lille snippet :-)

$.ajax(
{
    type: "GET",
    url: "/Controller/Action",
    data: { registrationTypeId: selectedValue },
    dataType: "json",
    error: function(xhr, status, error) {
        document.write(xhr.responseText);
    }, success: function(json) {
        alert("Data Returned: " + json);
    }
});

Tags: ,

Flickr og billedwidgets

by DotNetNerd 29. December 2008 11:29

En af mine gamle lidenskaber der indimellem popper frem er at lege med billeder, og nu jeg har haft ferie gav det sig udslag i at jeg ville prøve at lave en billedvæg til mit site, hvor billederne skulle trækkes fra flickr. Jeg havde egentlig forventet lidt bøvl, men selve det at trække billeder kræver ikke andet end følgende.

Flickr flickr = new Flickr("apiKey", "sharedSecret");
PhotoSearchOptions options = new PhotoSearchOptions();
options.Tags = "Christian";
options.Extras |= PhotoSearchExtras.DateTaken | PhotoSearchExtras.OriginalFormat;
options.UserId = flickr.PeopleFindByEmail("dotnetnerd@yahoo.com").UserId;
options.TagMode = TagMode.AnyTag;
options.SortOrder = PhotoSearchSortOrder.DateTakenDesc;
options.PerPage = 6;
Photos photos = flickr.PhotosSearch(options);

Photos indeholder så en PhotoCollection som hver har urls til billederne i original, medium, lille og thumbnail størrelse.

Herfra manglede jeg så bare en eller anden smart måde at vise billederne på. Jeg faldt hurtigt over FancyBox, som er en JQuery plugin der også er rigtigt nem at bruge, og lader brugere trykke på en thumbnail og se hele billedet. Dagen efter poppede der tilfældigvis en blogpost ind omkring TinySlideShow, som lige som navnet antyder giver mulighed for at lave et slideshow. Det skulle naturligvis også prøves af, og da jeg i noget tid gerne have ville finde på noget nyt til hovedsiden på dotnetnerd.dk var det jo oplagt.

 

JQuery nu en del af .NET pakken!

by DotNetNerd 28. September 2008 20:29

Jeg er selv en af de mange der har forelsket mig i JQuery, da det er et fantastisk værktøj der gør livet meget lettere for webudviklere. Dagens gode nyhed som kan læses fra Scott Gu her og fra Hanselman her er at Microsoft fra nu af shipper JQuery sammen med .NET og der vil blive lavet kommentarer til javascript intellisence til det :)

JavaScript - fra skældsord til spændende mulighed

by DotNetNerd 26. June 2008 08:52

Ligesom for rigtigt mange andre udviklere har javascript altid været et skældsord for mig. Opgaver der på overfladen virker simple er altid overraskende besværlige fordi browserne opfører sig forskelligt, udviklingsmiljøerne har ikke haft god tool-support og det at manipulere DOM’en på en webside har altid krævet urimeligt meget kode.

Der er heldigvis sket en masse på den front det sidste stykke tid, hvor jeg tidligere har kigget på intellisence og debugging af javascript i VS2008 samt Microsofts ASP.NET Ajax framework. Nu jeg har ferie har jeg som opfølgning på dette givet mig til at lege lidt med nogle af de andre frameworks der findes, da det så småt er ved at være en lille jungle at finde rundt i. Heldigvis har det vist sig at være en jungle med mange forskellige blomster, og overraskende lidt ensartet vegetation – eller på almindelig dansk, de frameworks der er har en masse at tilbyde uden at der er en masse overlap i funktionalitet.

Jeg vil starte med lige kort at skrive lidt om javscript som sprog, da jeg har på fornemmelsen at der er mange der ligesom mig i lang tid aldrig rigtig fik taget mig tid til at finde ud af nogle af de grundlæggende ting omkring objekter og funktioner i javascript.

Lidt JavaScript basics, som du måske alligvel ikke ved

Ligesom mange andre har jeg i min karriere primært brugt javascript til simple ting, som validering og at vise alerts, popup vinduer osv. Jeg måtte derfor for lidt tid siden erkende at jeg egentlig vidste for lidt om hvordan sproget virkelig fungere, da min indlæring havde været meget drevet af tilfældighed ud fra hvad jeg lige havde haft af små problemer der skulle løses. Jeg brugte derfor lidt tid på at blive klogere og vil lige starte helt kort med nogle af de vigtigste ting jeg lærte dengang.
Som udvikler der er uddannet og hovedsageligt har arbejdet i et OO miljø, er javascript en underlig størrelse, da begreberne object og function forstås en del anderledes i javascript end i Java, C#, VB osv.

I OO sprog er en property på et object fast defineret i en klasse, og som kan tilgås via dot notation. I javascript er properties noget der tilknyttes dynamisk, og disse kan tilgås både via dot notation og via indexer syntaks. Det vil sige at i nedenstående kode vil de to nederste linier gøre præcis det samme. Den sidste måde at tilgå properties på dog giver mulighed for at bruge tegn der ellers er ugyldige i propertynavne som eksempelvis punktum og mellemrum.

var hund = new Object();
hund.Navn = "King";
hund['Navn'] = "King";

Det kan på overfladen virke smart at properties på den måde er dynamiske, men ”there is no such thing as a free lunch”. Problemet er selvfølgelig at en subtil stavefejl eller bare casingfejl vil bevirke at man tilknytter en ny property, og man derved ikke får sat værdien på den property man troede. Det er her prototyping kommer ind, da det giver os mulighed for at definere noget der minder om classes og properties samtidig med det giver mulighed for at bruge namespaces til at strukturere klasserne. Jeg vil dog vælge at springe let hen over det i denne omgang, da det er en større omgang at gå i dybden med og ikke hovedfokus for det jeg vil skrive om i det her indlæg.

Funktioner i javascript er som nævnt også meget anderledes i javscript, da funktioner er ”first class” koncepter. Det vil sige at disse opfattes som objekter og kan passes som argumenter til metoder og bruges som værdier på properties. Derfor vil de to nedenstående kodelinier betyde præcis det samme, da funktionen blot er et ”objekt” med et navn.

myFunc = function() {}
function myFunc {}

En anden vigtig forskel er brugen af this keywordet, der forstås anderledes end i andre sprog. I OO sprogene er this en reference en objektet hvorpå den kaldte metode findes, hvorimod det i javascript er en reference til det objekt der kalder funktionen. Man kan dog i javascript selv angive hvad this skal betyde ved at kalde en funktion igennem dennes .call eller .apply metode og passe en reference som første argument til det objekt man ønsker skal være this i den aktuelle kontekst.

var myCaller = new Object();
myFunc.call(myCaller);

JSON eller JavaScript Object Notation, er en anden måde at skabe objekter på i javascript, som er ved at vinde frem, da den kan være rarere at arbejde med i javascript, samtidig med det er et oplagt format til at serializere objekter i når de skal sendes imellem klienten og serveren og konverteres imellem javscript og dit OO language of choice. Jeg har skrevet om dette før men kort fortalt fungerer det ved at tuborg-klammer definerer et objekt, hårde klammer et array, kolon adskiller property navn og værdi, og elementer adskilles af komma.

var hunde = [
{Navn: ’King’, Fødselsdato:  new Date(2004,8,12)},
{Navn: ’Pluto’, Fødselsdato:  new Date(2006,6,10)}
 ];

JQuery – bliv gode venner med din DOM

Oprindeligt troede jeg egentlig bare at JQuery var en open source udgave af det scripting library der følger med til ASP.NET Ajax – en sammenligning jeg også har læst andre fremføre. Den sidste måned havde jeg imidlertid hørt nogle gode ting om det, så jeg ville lige kigge lidt nærmere på det. Efter at have læst og leget lidt med det, må jeg konkludere at det er meget lidt det har til fælles med ASP.NET Ajax, da det er nogle grundlæggende forskellige ting de to librarys søger at løse. ASP.NET Ajax er lavet med fokus på at give mulighed for at arbejde med et typesystem der minder mere om det der er i .NET, samtidig med at det understøtter udviklingen af Ajax Controls og Ajax Control Extenders. JQuery derimod har hovedfokus imod at det at arbejde med DOM’en på en html side, sådan at man på en præcis måde kan finde og modificere Dom elementer. Rigtigt nok er der overlap imellem ASP.NET Ajax og JQuery, da begge eksempelvis indeholder wrappere til at lave kald til webservices – men hovedfokus i de to er helt forskelligt.

JQuerys udgangspunkt er som navnet antyder at det giver mulighed for at ”query” elementer på en webside. Dette gøres meget naturligt igennem selectors ligesom man kender dem fra CSS. JQuery giver mulighed for at anvende et bredt udsnit af disse – og herunder flere end dem der reelt er standard i CSS i alle browsere i dag. Et helt basalt eksempel kunne være:

$(document).ready(function() {
$("div:odd").html("Woot"); 
});

Eksemplet viser et par forskellige ting som JQuery gør muligt. Den første linie kode viser brugen af et event som JQuery stiller til rådighed der bliver affyret når sidens elementer er hentet, men inden eksterne elementer som f.eks. billeder er læst helt ind. Det løser et problem man tit render på som er at hvis man skriver javscript i starten af en side, så kan man risikere at denne køres inden alle elementerne endnu er loaded, og omvendt hvis man bruger onload eventet ender man med at vente til alt er læst helt ind hvilket heller ikke altid er ønskværdigt. Den næste linie viser brugen af en selector der henter hvert andet (ulige) div element på siden, og sætter deres indhold til ”Woot”. Dette illustrerer hvor powerfull JQuery er, da man faktisk kan manipulere flere elementer i det der kaldes et wrapped set med meget lidt kode.

Udover at kunne manipulere eksisterende elementer vil man selvfølgelig også ofte gerne kunne tilføje nye elementer. Også her er det JQuery to the rescue, da det gør det meget enkelt.

$("<div>Totalt dynamisk indsat tekst der!<div/>").appendTo("#someParentDiv");

Her ses en af de andre mådet at bruge $ funktionen på, da den her fodres med noget html, som så udgør ens wrapped set. Derefter kaldes appendTo med en selector der finder de eksisterende elementer som der skal føjes til.
JQuery tilbyder en bred vifte af metoder til at arbejde med disse wrapped sets, manipulere elementer, properties, attributter osv. Fælles for dem alle er at de virker crossbrowser, hvilket er en af hovedpointerne i JQuery – nemlig at gøre det nemt og ensartet at skrive sine scripts. Udover almindelig element manipulation skal det nævnes at JQuery tilbyder funktioner til at lave animationer og effekter, wrapper funktioner til at foretage Ajax kald og det er bygget til at kunne extendes med plugins, som der allerede findes flere af.

En vigtig ting hvis JQuery skal bruges i samspil med andre javascript librarys er funktionen $ som også bruges af andre librarys. For at undgå denne konflikt kan man disable brugen af $ og i stedet tilgå funktionen direkte som ”jQuery”, hvilket $ i virkeligheden blot er en genvej til. For at disable $ skal man blot kalde jQuery.noConflict();

Har du fået lyst til at læse mere om JQuery kan jeg anbefale bogen JQuery in Action, som har været min primære inspirationskilde.

LINQ to JavaScript – endnu et skridt imod begrænsningen af for-loops

Navnet siger jo egentlig det hele, da de fleste efterhånden har hørt om og sikkert også leget lidt med LINQ. LINQ to JavaScript er helt enkelt et codeplex projekt, som implementere det der svarer til LINQ to objects i JavaScript. Fordelene ved LINQ er der allerede skrevet alt for meget om rundt omkring, så jeg vil gå lige på og fortælle lidt mere konkret om JavaScript implementationen.
Indtil videre er følgende operatorer implementeret, men der er med garanti flere på vej:

From, Where, Select, OrderBy, OrderByDescending, Count, Distinct, Any, All, Many, Reverse, First, Last, ElementAt, InterSect, DefaultIfEmpty, ElementAtOrDefault, FirstOrDefault og LastOrDefault.

Et eksempel på at bruge de mest gængse kunne være.

var myArray =  [
{Name:"Hans", Age:20 },
{Name:"Erik", Age:10 },
{Name:"Christian", Age:26 }
];

var myResult =
    From(myArray).
    Where(function(item){return item.Age > 15}).
    OrderBy("item.Name").Select(function(item){return item});

Som eksemplet viser kan operatorerne generelt tage to slags argumenter til at beskrive hvilken property der arbejdes på, idet man enten kan bruge en streng (eksempelvis ”item.Name”) eller en funktion der tager item som argument.
Jeg synes personligt at de er sluppet meget godt af sted med det der er implementeret i LINQ to JavaScript, og jeg er sikker på jeg selv nok skal komme til at bruge det en del fremover.
Ellers er der ikke mere jeg har tilbage at skrive om javascript og javascript frameworks for denne gang, men jeg håber det giver andre blod på tanden. Det i hvert fald har givet mig lyst til at arbejde mere med javascript efter at jeg har set hvad nogle af de her frameworks giver af muligheder.

Who am I?

My name is Christian Holm Diget, and I work as an independent consultant, in Denmark, where I write code, give advice on architecture and help with training. On the side I get to do a bit of speaking and help with miscellaneous community events.

Some of my primary focus areas are code quality, programming languages and using new technologies to provide value.

Microsoft Certified Professional Developer

Microsoft Most Valuable Professional

Month List