Creating The Web... » css

Optimering af Javascript og CSS

Simon Jensen — Mon, 16 Aug 2010 20:39:13 +0000

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.

På et tidspunkt, vil man komme op på så mange filer, at ens browser ikke længere kan hente dem alle på én gang, hvorfor den besøgende bliver nød til at hente dem lidt efter lidt, for endelig at kunne se resultatet — Ventetid!

Følgende screenshots er alle taget efter at have tømt min browsers cache (hvilket undre mig lidt, at Firebug stadig siger 22.3 KB from cache?!), og er altså resultater ved første besøge på sitet.

Javascripts (172.9 KB — 2.32 sek.)

CSS (10.9 KB — 637 msek.)

Optimering

Tricket til at komme ovenstående til livs, er faktisk rimelig simpelt, men kan gøres på flere planer. Flere og flere plugins (foruden JQuery biblioteket selv), kommer i en “minifyed” version, som jeg klart vil anbefale at benytte i produktion frem for den “originale kildekode”. Med “minifyed” forståes at alle funktioner og deklerationer er “rykket sammen” (variabler kan forkortes m.m.) på én laaaang linie, samt at alt whitespace er fjernet for at mindske filstørrelsen — og der kan hutigt sparres en del KB allerede der!

Næste skridt vi kan tage, og det er hele tricket ved dette, er at kombinerer de mange filer til én. Der findes flere måder at gøre dette på, bl.a. “Googles Closure Compiler“. En bonus ved Closure Compiler er at denne også udfører “minifying” af den endelige kombinerede Javascript fil. En ulempe, i min optik, er at dette ellers fantastiske værktøj, kræver at man manuelt skal compile alle sine Javascripts efter redigering, via en terminal — det er selvfølgelig til at overleve, men kunne jeg blive fri, valgte jeg helst det… og det kan jeg

Og det er netop dérfor jeg er så glad for denne metode, Niels har præsenteret mig for her i weekenden, da den vha. lidt URL-rewriting gør hele optimerings-processen automatisk! Ydermere er denne løsning designet til at kunne genererer cache-version af dine kombinerede filer, hvorefter der næsten ingen “overhead” er tilbage.

Kombinering af filer

Ideen er, at du på din server har én mappe til CSS og én mappe til Javascripts. Vha. følgende .htaccess-regl, kan vi fortælle vores script (combine.php), at dette skal kombinerer en “kæde” af filer til én:

RewriteEngine On
RewriteBase /
RewriteRule ^css/(.*\.css) /combine.php?type=css&files=$1
RewriteRule ^javascript/(.*\.js) /combine.php?type=javascript&files=$1

I vores -sektion, hvor vi normalt ville have en masse links som dette:

kan vi nu nøjes med at linke dem komma-separeret, som her:

Det samme trick gør sig selvfølgelig gældende for Javascript-filerne. For at få løsningen til at fungerer helt optimalt, skal du oprette en skrivbar mappe kaldet “cache”.

Resultatet

Screenshots er igen alle taget efter at have tømt min browsers cache, svarende til at besøge sitet for første gang — Dvs. at du højst sansynligt vil spare endnu mere trafik ved andet besøg, da caching herefter vil træde i kræft

Javascripts (156.3 KB — 1.48 sek.)

CSS (8.8 KB — 10 msek.)

Download

Download combine.php.

Mere om minifying — forbedringer

Efter at have implementeret ovenstående, og set nærmere på nogle af de plugins jeg benytter (samt de scripts jeg selv har måtte tilføje), tænkte jeg at det ville være interessant at udvide løsningen med automatisk “minifying”. Dette er stadig en “todo” for mig, men måske du har samme tanker? I så fald vil følgende link måske have interesse: http://github.com/rgrove/jsmin-php/blob/master/jsmin.php

Live Search med Prototype JS og PHP

Simon Jensen — Sun, 09 Mar 2008 11:03:41 +0000

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.

Denne 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 -sektion, som med et hvert andet Javascript.

XHTML

Jeg har gjort det til god skik, at oprette en “container”-div. Dette div er ikke nødvendig, men her er det taget med for at få bare en smule design med.

Inde i denne container findes et billede, som er stylet til at være skjuldt. Dette er hvad jeg bruger som loading animation – altså en animation der skal vise, at et script arbejder. Input feltet skulle gerne tale for sig selv. Straks herunder er der, i endnu et div, oprettet en ul/li-liste – det er denne vi vil fremvise resultater i. Resultaterne skal ligeledes fremkommet/tilføjes som li-elementer til listen.


    
    
    

    
        
            Type and you´ll find...

CSS

CSS delen af dette script, taler også lidt for sig selv. Det er muligt, at designer kan laves en hel del nemmere (læs: med mind css), men her er indsat hvad du finder i demoen.

Det vigtigste her, vil nok være at påpege, at resultatlisten er sat til absolut positionering. Dvs. vi kan vise den ovenpå andre elementer, hvorfor den ikke skal til at “skubbe” rundt på designet. Du har måske bemærket at resultatlisten er en smule gennemsigtigt – Dette ER en CSS feature, men den bliver udført gennem Javascript-delen.

body {
    font-family: "Trebuchet MS";
    font-size: 1em;
    background: #333;
}

#container {
    background: #fff;
    width: 400px;
    padding: 20px;
    margin: 0 auto;
}

#container #lsloading {
    position: relative;
    top: 5px;
}

#container input {
    font-family: "Trebuchet MS";
    font-size: 1em;
    width: 350px;
    margin-left: 20px;
}

#container #lsresults {
    position: absolute;
    background: #fff;
    color: #333;
    width: 354px;
    margin-left: 20px;
}

#container #lsresults ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

#container #lsresults ul li {
    list-style: none;
    margin: 10px;
    padding: 0px;
}

Javascript

Javascriptet er den største del af denne “applikation”. JS-delen består af et Live Search objekt (ls) med metoderne init(), search(), showResults() og hideResults(). Derudover bliver der, når en side er loaded, initialiseret nogle observer eventhandlers på søgefelter.

Humlen ligger i init() og search() metoderne. init() bliver kaldt hver gang der tastes i søgefeltet, og denne kalder search() som udføre et AJAX-kald til serveren, som levere selve søgningen. For ikke at spamme serveren er der indbygget en timer i init() metoden som gør, at search() metoden kun bliver kaldt hvis der ikke er tastet noget i søgefeltet i 0.5 sekunder.

/**
 * Live search
 */
var ls = {
	queryField: "lsquery", //id name of queru input-field
	results: "lsresults", //id name of result-list
	loading: "lsloading", //id name for loading animation
	timer: null,

	/**
	 * Initialize a search:
	 * reset timer, and performe search
	 * if nothing has been typed in 0.5 sec.
	 */
	init: function(event) {
		var query = Event.element(event).value;
		ls.timer = clearTimeout(ls.timer);
		if(query != "" || query != "Type and you´ll find...") {
			ls.timer = setTimeout("ls.search(" query ");", 500);
		}
	},

	//start a search using AJAX
	search: function(query) {
		if(query != "") {
			$(ls.loading).show();
			var done = function(t) {
				$(ls.loading).hide();
			}
			var url = php-backend.php;
			var pars = action=search&query=   query;
			new Ajax.Updater(lsResList, url,
			{
				method: post,
				parameters: pars,
				onSuccess:done,
				onFailure:done,
				inserting:Insertion.Before
			});
		}
	},

	//show the result list
	showResults: function() {
		if($(ls.results).getStyle(opacity) != 0.9)
			new Effect.Appear(ls.results, {duration:0.2, from:0.0, to:0.9});
	},

	//hide the result list
	hideResults: function() {
		new Effect.Opacity(ls.results, {duration:0.2, from:0.9, to:0.0});
	}
}

/**
 * Initialize key-observers for search input field.
 */
Event.observe(window, load, function() {
	$(ls.queryField).observe(keyup, ls.init);
	$(ls.queryField).observe(keydown, ls.init);

	//remove input field value when first focused
  	$(ls.queryField).onfocus = function() {
  		if($(ls.queryField).value == "Type and you´ll find...")
			$(ls.queryField).value = "";
		ls.showResults();
	}

	//reset input field when not focused and value is ""
  	$(ls.queryField).onblur = function() {
  		if($(ls.queryField).value == "")
  			$(ls.queryField).value = "Type and you´ll find...";
  		ls.hideResults();
  	}
});

PHP

PHP delen, er hvad jeg ovenfor har kaldt “serveren”. Hvordan du vil udføre selve søgningen er mere eller mindre op til dig selv. Vælger du at benytte dette script, skal resultaterne dog returneres som én streng. Hvert resultat skal, for at designet holder stik, leveres som et

-element.

Bare for at give en ide, leveres scriptet med følgende PHP backend.

"".utf8_encode($results[$key])."" found with key: ".$key."

"; else : echo "

Intet resultat

"; endif; endif; ?>

Som beskrevet i kommentaren, vil man selvfølgelig lave en reel database søgning eller lignende, hvilket lige nøjagtig er hvad jeg gør her på sitet.

Sååå – uden yderligere forklaringer skal du være velkommen til at downloade, modificere osv. følgende version af Live Search. Skulle der opstå problemer, eller mangler du yderligere forklaring, skal du endelig kommentere nedenfor.

Download

Live Search med Prototype JS og PHP (.zip)

Live Search med Prototype JS og PHP (Æ,Ø,Å understøttet) (.zip)

CSS !important

Simon Jensen — Wed, 26 Dec 2007 13:00:51 +0000

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.

!important eksempel

Margins og paddings opfører sig ikke altid ens i f.eks. mozilla browsere og IE browsere. I eksemplet herunder, ønsker vi at have mere afstand fra et div-element til toppen i mozilla browseren, end vi gør i IE browseren. Dette kan gøres ved !important-tagget på følgende måde:

#myDiv {
margin-top: 50px !important; /*bliver ignoreret af IE*/
margin-top: 30px;
}

!important i andre sammenhænge

Faktisk startede jeg ud med at undersøge dette tag da jeg har anvendt PNG billeder, hvilket heller ikke fungerer så godt med IE 6.0. PNG billeder har den fantastiske evne, at de kan fade på en gennemsigtig baggrund – Normalt har du måske brugt GIF billeder til gennemsigtighed, og i så fald har du sikkert stødt på, at resultatet ofte ender ud med at være meget takket i kanterne, og langt fra ligner det design, du har siddet og brugt tid på i Photoshop – så ender vi altid med at smide en baggrundsfarve på billedet alligevel ;(. Dette billede viser hvordan IE vil fremvise et PNG billede med gennemsigtighed.

Vil du holde fat i at bruge PNG billederne hvor du kan, men samtidig vise et bedre resultat end ovenstående til IE 6.0, kan du som beskrevet ovenfor bruge !important.

#myDiv {
width: 200px;
height: 200px;
background: url(“FeedIcon-64.png”) no-repeat !important;
background: url(“FeedIcon-64.gif”) no-repeat;
}

I ovenstående CSS vil IE 6.0 igen ignorerer !important-tagget, og herefter benytte sig af GIF-billedet som baggrund. Alle andre browsere, som godt kan forså !important, vil benytte sig af PNG-billedet, hvorefter alle browsere gerne skulle endnu ud med et mere ens resultat ala nedenstående billede – you get the point.

Variabler i CSS

Simon Jensen — Fri, 02 Feb 2007 16:15:27 +0000

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:

    header("Content-type: text/css");
    $bgCol = "#BDE469";

    echo <<
    body {
        background-color: $bgCol;
    }

    EOD;
?>

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

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.

Lightbox JS V.2.

Simon Jensen — Thu, 17 Aug 2006 16:04:11 +0000

Endnu en lille hyles til OpenSource 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.

Eksempler:
Klik på billedet herunder, og du vil se hvad Lightbox JS egentligt kan:

Update: Jeg bruger ikke længere Lightbox til fremvisning af mine billeder. Gå til Lightbox´s officielle side for at se de rigtige effekter.

Som noget nyt, i V.2, kan du også grupperer dine billeder, med andre ord, du kan lave sets. Nedenfor har jeg grupperet tre billeder, tryk på et af dem, og du kan browse frem og tilbage mellem billederne i settet.

Kode:
Scriptet er temmelig let at sætte op. Aller først skal du selvfølgelig downloade scriptet. Scriptet består af 5 filer, 4 .js-filer og et .css-dokument.
Hernæst skal du loade scriptene og style-sheetet i din sektion, på din hjemmeside, som følgende:

Du kan nu benytte Lightbox JS til at vise enkelte billeder, ved at tilføje rel=”lightbox” til en link-attribut. Beskrivelsen der vil komme frem, er selve title-attributten på linket. Det overstående enkelte billede, kan vises på følgende måde:

Billede

For at lave sets, tilføjer vi bare et set-navn til relationen, således rel=”lightbox[setnavn]“. Vi bruger således samme setnavn, til alle billeder der skal grupperes, og skulle kunne browsers sammen. Overstående set-eksempel kan vises som herunde, hvor jeg har samlet billederne i settet “set“:

#1
#2
#3

Til sidst:
Jeg har tidligere gjort lidt reklame for en WYSIWYG-editor, kaldet FCKeditoren. Det er som sagt denne editor jeg benytter til at skrive mine poster med, og da jeg nu holder så meget af de to, Lightbox JS og FCKeditor, hvorfor skulle de så ikke kunne arbejde sammen?
FCKeditoren har mange settings, også for insættelse/redigering af links, relation-tagget er bare ikke med som standard. Men det skulle nu ikke stoppe dig, for det er faktisk forholdsvis let at tilføje. Alt du skal gøre er at tilføje til følgende filer:

FCKeditor/editor/dialog/fck_link.html
FCKeditor/editor/dialog/fck_link/fck_link.js

Vil du vide mere, skal du være velkommen til at kommenterer heruden.

Standarder tak!

Simon Jensen — Mon, 24 Jul 2006 01:23:02 +0000

Så længe som til indtil igår, har sitet her ikke været nogen fryd for jer Internet Explorer brugere derude.
Måske har I bemærket at sidemenuerne (på bloggen til højre, alle andre sider til venstre) i visse tilfælde kunne forsvinde, når man førte musen over et link i en post?! Okay – Men det kunne altså ske, og det har irriteret mig gevaldigt fra dag ét. Hvad der har irriterer mig endnu mere, var at det ikke var et problem i Firefox eller Opera. Ahhhh … hvornår får vi én standard???

Problemet var i CSS dokumentet, en margin blev lavet om til en float, og nu virker det – I hvert fald i alle tre ovenfor nævnte browsere. Så hermed – Velkommen IE brugere, og alle jer andre selvfølgelig =;)

Vil du også være med?

Simon Jensen — Tue, 02 May 2006 12:26:38 +0000

En blog kan jo fungere på flere måder. Nogle er meget private, forbeholdt familien med familiefotos og generations-træer osv. Andre fungerer som informationssider til folk med samme interesse og andre igen, fungerer ligesom skrivebord for hvad end der lige faldt en person ind.

Før jeg lavede denne blog, havde egentlig ikke gjordt mig så mange tanker om hvad jeg ville bruge den til?! For mig var det mere øvelse i at lave en sådanne, og selvfølgelig fordi jeg synes det kunne være lidt sjovt at agere skribent for lige hvad jeg ville.
Jeg ved stadig ikke helt, hvad jeg vil bruge min blog til. Men efter som jeg jo er teknisk anlagt, og bloggen mere eller mindre opstod fordi jeg kunne, kunne jeg da passende starte med at forklare lidt om processen bag.
Derfor vil denne post fungere som en samling af links til emner og videre læsestof, som kan være en god start til den der gerne selv vil igang med at lave hjemmesider.

H T M L
Noget af det første man bør have kendskab til er HTML. HTML er kort for Hyper Text Markup Language, og er den "markering" man benytter, til at fortælle hvordan en tekst, billede, link eller andet, skal se ud. Standard for HTML er at man har et start-tag og et slut-tag. Således starter en ren HTML-side altid med start-taget og slutter med , ligeledes er en fed tekst markeret således fed tekst.
Denne start/slut-tags-teknik er gennemgående for HTML. HTML kan ses som en ramme hvori man placerer sin tekst, og ligeledes et værktøj til at formaterer sin tekst.
For at få en bedere forståelse af HTML, vil jeg anbefale at læse indholdet på følgende links:
www.html.dk/tutorials/html/.
www.htmldog.com.
www.w3schools.com/html/default.asp.
HTML har indbygget de mest basale funktioner til tekst-formatering, så som fed, kursiv og understreget tekst. Ydermere giver det mulighed for at lave tabeller, som du sikkert kender dem fra regneark, og selvfølgelig mulighed for at indsætte links, billeder og baggrunde. Og mere skal du basalt set ikke bruge for at lave en hjemmeside.

C S S
Med ren HTML finder man hurtigt ud af, at man skal være fandens kreativ for at kunne lave en side der er noget ud over det normale. Det kan være svært at placere forskellige objekter lige hvor man vil, og baggrunde er ikke til at arbejde med. Heldigvis findes der også et værktøj til dette. Dette værktøj hedder CSS, som er kort for Cascading Style Sheet, og er egentligt bare et dokument du laver ved siden at din HTML side(r), og som du refererer til gennem din HTML-side. CSS-dokumentet indeholder et sæt selvdefinerede tags, som igen indeholder regler for hvorledes en side, paragraf, tekst, link eller billede skal udformes.
Idéen er kanon, fordi du nu kun skal skrive dine formateringer op én gang, og herefter blot refererer til den igen og igen. Man finder hurtigt ud af, at man tit skal have formateret noget på samme måde flere gange.
Til den interesserede læser, som gerne vil grave dybere i CSS, vil jeg forslå disse links:
www.html.dk/tutorials/css/.
www.htmldog.com.
www.w3schools.com/css/.
www.csszengarden.com.

Ved gennemlæsning og gennemgang af de forskellige øvelser og eksempler der findes for enden af linksene i denne post, kan du komme langt. Men for at kunne håndterer forme, mails og dynamisk side-generering skal du se nærmere på programmeringssprog som f.eks ASP eller PHP (som denne side er lavet i) – Dette afsnit gemmer vi dog til en anden god gang.
Jeg håber I kan bruge nogle af overstående links – De har i hvert fald hjulpet mig godt på vej i sin tid.