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 »

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 »

CSS !important

Lad mig starte med at sige: Velkommen tilbage Internet Explorer 6.0.

Laaaaangt om længe fik jeg mig taget sammen til at optimerer sitet, så det nu også kan ses i IE 6.0. Det er ikke fordi jeg nu regner med selv at komme til at bruge den browser mere af den grund, ha! - men når man går og kalder sig webprogrammør, synes det at virke som lidt af en torn i øjet, ikke selv at have et site der kan ses i langt de fleste browsere.

Fixet skulle findes i CSS´s "!important"-tag, hvilket jeg højst sansynligt kommer til at bruge mere fremover.

!important

!important tagget i CSS, bliver normalt brugt til at beskrive præcedens. I CSS er det den sidst specificerede regel som tager præcedens (læs: afgørende regl), men tilskrives en regle !important-tagget, overtager denne præceden, også ligemeget om denne regle skrives tidligere i din CSS.

Catchen er... Internet Explorer 6.0 ignorerer !important tagget!

Dvs. at man kan bruge tagget til at lave CSS regler til alle andre browsere end IE 6.0, for herefter at skrive en "normal" regle, som vil blive brugt af IE 6.0... Lød det meget forvirende? Her er et par simpelt eksempler.

@ 26/12-07 #css #mozilla #internet explorer 6.0 #png

Read more »

Variabler i CSS

CSS (Cascading Style Sheets) blev i sin tid introduceret af W3C for at forbedre tilgængelighed på webben, ligesom det skulle være med til at gøre HTML mere semantisk, ved at separerer styling fra resten af HTML-koden.
I "moderne" web-design/-programmering, kommer man ikke udenom brugen af CSS - tilføj dertil et sprog til dynamisk generering af indhold og du kan komme rigtig langt. Men CSS har en mangel - variabler!

Som det er nu kan du ikke benytte variabler i CSS, hvilket efter min mening virker til at være et kæmpe hængeparti. CSS findes idag i sin 2. revision, med en 3. på tegnebordet, og med tidens trends og tendenser, som f.eks. table-less designs, kunne det virke naturligt at introducerer variabler ifm. styling, men synes det ikke at være tilfældet, hvis man læse følgende skrivelse om CSS3 Under Construction.

En Simon Willison er sågar kommet med et løsningsforslag til hvordan man, rent syntax-mæssigt, kunne få dette variabel-ønsket ind i CSS, og det virker faktisk meget fornuftigt - læs mere her.

Heldigvis findes der en løsning. Den jeg har fundet frem til, og benyttet, er i forbindelse med PHP.

Variabler i CSS vha. PHP:

<?php
    header("Content-type: text/css");
    $bgCol = "#BDE469";
   
    echo <<<EOD
   
    body {
        background-color: $bgCol;
    }
   
    EOD;
?>


Ovenstående skal selvfølgelig skrives i en .php-fil, men kan inkluderes i din <head>-sektion som en almindelig .css-fil.

<link rel="stylesheet" type="text/css" href="style.php" />


Uden selv at have prøvet det, postulerer denne side, at have en løsning for brugen af variabler i CSS i forbindelse med ASP.net.

@ 02/02-07 #css #php

Read more »

Lightbox JS V.2.

Lightbox JSEndnu en lille hyles til miljøet:

Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. Its a snap to setup and works on all modern browsers.
Jeg har faktisk længe haft Lightbox JS til at ligge i min "usefull_stuff" mappe, men havde fuldstændig glemt det igen. Her forleden faldt jeg så pludselig over det igen, og endte på programmøren, Lokesh Dhakars hjemmeside. Glædeligt nok skulle det vise sig, at der var kommet en ny version af scriptet.

Den gamle/første version synes jeg var en fryd for øjet, da jeg fandt den - Men det er ingenting i forhold til version 2! Version 2 (som i skrivende stund kan downloades i v. 2.02), benytter sig af Prototype Javascript Library som kan downloades hos script.aculo.us, hvilket giver mulighed for nogle fede "morphing" effekter.

@ 17/08-06 #css #ajax #script.aculo.us #web 2.0 #grafik #javascript

Read more »