Optimering af Javascript og CSS

Jeg er forholdsvis flitting bruger af bookmark servicen Delicious.com, og det hænder da også at jeg rent faktisk kommer tilbage til nogle af de links jeg er faldet over i løbet af tiden ... i dag var sådan en dag, og emnet handler om en måde hvorpå man kan optimere sin sides brug af Javascript og CSS. Følgende post kræver en stor tak og 100% kredit til Niels Leenheer.

Flere filer = flere requests = ventetid = :(

Jeg synes at støde ind i dette scenarie mere og mere på det sidste, og som billederne herunder viser, skal grunden meget ofte findes i brugen af JQuery og ikke mindst plugins dertil.

 

Følgende eksempel screenshots er alle taget fra en lokal version af sitet www.usgreencardoffice.com, som er et projekt jeg har været en del af gennem det sidste års tid. Som det ses benytter vi en del forskellige JQuery plugins (hvilket, som sagt ikke længere er unormalt), men fordelen ved at kunne hente og lave disse enekltstående plugins så let, kan hurigt gå hen og blive en ulempe, eller i hvert fald mindre fordelagtigt.

@16/08-10 #css #javascript #cache #jquery #minify #Closure Compiler

Read more »

Når AJAX er bedst

Jeg har tidligere haft skrevet om Hijax og for nyligt om Hijax i praksis, emner hvor prædiken går på hvor vigtigt det kan være ikke at udelukke "dem som ikke kan afvikle Javascript"... men der findes dog også de modsatte eksempler - hvor "de" bare skal blive væk!

Sidste gang jeg skiftede design m.m. her på bloggen tog jeg hijax-princippet til mig, hvilket f.eks. har gjort, at man nu kan søge "live" med Javascript og "almindeligt" uden Javascript. Jeg ville have brugt samme teknik til kommentering, men kom aldrig længere end til at man kunne kommentere via et "normalt" POST.

Blog spam helvede 

At have en ganske almindelig standard HTML-formular er, nu til dags, næsten det samme som at sige "Jeg vil gerne være offer for al jeres lorte-spam - bare fyr løs". Det var i hvert hvad resultatet for mig...

@23/09-08 #hijax #kommentar #ajax #javascript #spam #akismet

Read more »

Hijax i praksis

Tilbage i april fandt jeg frem til hijax princippet, og i den forbindelse lovede jeg at der ville komme en mere praktisk gennemgang - det vil jeg så forsøge mig med nu.

Mens sidste post om hijax kort fortalte princippet bag hijax, og snakken mere gik på "hvorfor" man burde bruge det, har jeg nu haft mulighed for rent faktisk at lege lidt med hijax, og mener nu der skulle være basis for at skrive endnu en post herom.

Hijax super kort

Jeg har taget udgangspunkt i et simpelt eksempel, som jeg selv synes forklare det praktiske bag princippet. Super kort fortalt, så går hijax ud på at "hijacke" (overtage) funktionalitet på din hjemmeside og udføre denne via AJAX, men SAMTIDIG skal det være muligt at afvikle samme funktionalitet UDEN brug af Javascript - grundtanken i graceful degradation.

@11/09-08 #php #ajax #javascript #hijax

Read more »

Live Search med Prototype JS og PHP

Update Update 28/04-08: Live-search understøtter nu ÆØÅ - download ny version i slutningen af denne post!

I forbindelse med det sidste nye redesign, har jeg oprettet en "Live search". Nåhhh ja, den er måske ikke så live som en definition vil have det - men det er da en fed feature - og funktionaliteten bag den, vil jeg da gerne dele med jer.

Live SearchDenne post består således af en gennemgang, af de vigtigste punkter i implementeringen, det være sig lidt XHTML, CSS, Javascript samt PHP.

I slutningen af posten, kan du desuden downloade en lille demo-version af funktionen.

For at benytte koden i denne post kræves det, at du har downloaded og inkluderet Javascript frameworket Prototype JS, samt effektbiblioteket script.aculo.us. Disse skal inkluderes i sidens <head>-sektion, som med et hvert andet Javascript.

@09/03-08 #javascript #prototype #live search #xhtml #css #php #ajax #script.aculo.us

Read more »

Fancy visning af indhold vha. Javascripts

Viser du stadig dine billeder vha. popups? Jeg er lige gået over til at bruge FancyZoom til fremvisning af billeder her på bloggen. Tidligere har jeg brugt Lightbox, men faktisk findes der efterhånden en hel del af disse scripts.

Det har længe været meget brugt, at anvende popups til at fremvise billeder i fuld størrelse på en hjemmeside - det bør være slut nu, hvis du spørger mig!

Javascript har for længst taget sit indtog med diverse effekt-biblioteker, og performance-wise er de lige så hurtige som et popup - Men ca. 100 gange så fede at se på.

FancyZoom

Effekt med FacyZoomFancyZoom som jeg lige har taget i brug, er faktisk den simpleste af følgende. Scriptet har ikke så mange features som nogle af nedenstående, men til gengæld skal du ikke gøre noget som helst for at benytte scriptets fremvisnings funktion, når først du har inkluderet scriptet på din side (ingen CSS er påkrævet!).

Ved at sætte en enkelt onload-attribut på dit body-tag, finder scriptet automatisk links med referencer til billeder, og overtager visningen, når der trykkes på linket. Det var bla. denne simpelthed der gjorde at jeg valgte dette script.

Hvis man ikke vil benytte scriptet til fremvisning, kan det deaktiveres ved at tilføje en relation-attribut til linket (rel="nozoom").

@10/02-08 #grafik #javascript #galleri #script

Read more »