Jeg har ved et par anledninger skrevet om hvordan du kan dra opp ytelsen i nettsidene dine, ved å for eksempel introdusere mellomlagring (cache) på databasen din eller i applikasjonen.
I dag tenkte jeg å dekke litt om «minifisering» av JavaScript og CSS-kode.
Først av alt: hva er det for noe, og hva betyr det for meg?
Når du skriver CSS- og JavaScript-kode (og alle andre typer..) så pleier mange å skrive på en slik måte at det er mest mulig lesbart og forståelig. Dette kan være aktivt bruk av whitespace, TAB, newlines, variabel- og funksjonsnavn blant annet.
Resultatet er da at koden blir lang, noe som er unødvendig: en maskin bryr seg ikke om hvor fint koden er skrevet når den skal tolke koden. Et menneske bryr seg, derimot.
Og som vi alle vet: dess flere bytes, dess lengre lastetid. Og på Internett har dette en stor betydning, spesielt for brukere med lav Internetthastighet (ikke alle har fått gleden av fiber ennå).
Det er derfor et godt tips å gjøre koden så liten som overhodet mulig, ved å fjerne whitespace og gjøre funksjonsnavn og variabelnavn kortere. Denne prosessen kalles gjerne «komprimering» eller «minifisering» (eng. minify).
Om du har lastet ned for eksempel en jQuery-plugin før, har du ofte fått to filer presentert: en «vanlig» fil, og en som slutter med «.min».
Her er to eksempler på dette:
jquery.js
jquery.min.js
Forskjellen her er at jquery.min.js er en miniversjon av jquery.js, og er dermed mindre i filstørrelse.
jquery.min.js er egnet til produksjonsbruk, mens jquery.js er egnet til videre utvikling. Det vil si at dersom du skal gjøre endringer i koden din, må du gjøre dette i kildefilen for så og lage en komprimert versjon av den etterpå.
Forskjell mellom vanlig og komprimert JavaScript
Hvilke program er tilgjengelige?
Det finnes mange gode verktøy for å minifisere CSS- og JavaScript-filer, hvor de mest brukte er Yahoo! Compressor og Google Closure. Dette er to Java-filer som du må kjøre lokalt på PC-en via kommandolinjen. Kanskje ikke det beste alternativet for alle, som er årsaken til at det finnes mange gode nettbaserte verktøy også.
Egenutviklet program
Jeg har utviklet et program for Windows basert på Yahoo! Compressor, som gjør at du slipper å benytte kommandolinjen for å minifisere filer.
Programmet er skrevet i C#, og fungerer derfor kun på Windows (som jeg vet om). Det er likevel et nyttig verktøy som er lett å bruke!
Når du utvikler en nettside, enten det er en applikasjon, rammeverk, bibliotek — hva som helst — er det desidert viktigste sikkerhet. Likevel er det mange som tar snarveier, og slurver seg unna. Om du vil unngå å stå med skjegget i postkassen den dagen du blir angrepet via XSS, CSRF eller SQL injections bør du følge med nå.
Hvorfor?
Du skal aldri stole på brukerne dine. Selv om det er familien eller vennene dine. Årsaken er at enkelte personer kan utnytte sårbarhetene i systemet ditt, som kan resultere i at sensitiv informasjon blir samlet, slettet eller endret. Det kan resultere i at noen tar fysisk kontroll over nettsiden din.
Hva kan man gjøre?
Ved å følge prinsippet ovenfor, må du sørge for å validere all data du skal hente inn fra brukerne. Du bør også sanitere data.
Validering: sjekke om data er av riktig type, for eksempel en ordentlig E-postadresse eller postnummer. Sanitering: manipulasjon av data, som for eksempel å fjerne enkelte tegn/bokstaver/tall og så videre.
I PHP får vi tilgang til brukerdata via super-globalene $_GET, $_POST, $_COOKIE, $_SERVER og $_SESSION.
Her kan brukere bokstavelig talt skrive hva de vil, og det kan betyr store følger om du ikke sjekker dataene ordentlig.
Løsningen
Jeg har skrevet et bibliotek i PHP kalt «PHP Security Wrapper«. Dette biblioteket tar seg av brukerdata fra GET, POST, SERVER og COOKIE, samtidig som du får muligheten til både å validere og sanitere dem.
Det er ikke meningen at dette blogginnlegget skulle ta for seg hvordan du kan sikre deg mot angrep, men om du ønsker å lese videre på emnet kan du sjekke ut følgende linker:
Siden den norske nettbaserte værtjenesten Yr.no frigir sine værdata gratis, er det mange som er i stand til å vise været fra sin hjembygd på nettsidene sine. Men hvordan gjør dem det?
Jeg skrev for en stund tilbake siden en PHP-klasse som gjorde akkurat dette: hentet frem værdata basert på et norsk postnummer.
Funksjonen mellomlagrer værdataene i ti minutter, slik at belastningen på Yrs servere skal minimeres, og at lastetiden hos brukeren skal oppleves raskere.
Kort fortalt er det kun fem linjer med kode du bør konsentrere deg om:
define ('PATH_WEATHER_ICONS', 'img/weather/');
define ('PATH_CACHE', 'cache/');
define ('CACHE_EXPIRATION', 600);
// How many days we are going to show
define ('DAYS_TO_SHOW', 3);
// The Zip code to which place we will fetch information about
// Defaults to 5440
$zip = isset ($_GET['zip']) ? intval ($_GET['zip']) : 5440;
Først av alt må du fortelle hvilken mappe bilde-ikonene ligger i, og hvor PHP-klassen skal mellomlagre dataene. Deretter spesifiserer du hvor lenge dataene skal bli mellomlagret (600 sekunder = 10 minutter), samt hvor mange dager fremover i tid du skal vise.
Sist, men ikke minst må du spesifisere fra hvor du skal hente værdata fra. Du må endre «5440″ til det postnummeret du vil scriptet skal vise ved default. Dersom du vil se værdata fra et annet postnummer, skriver du følgende i adressefeltet:
Du kan meget lett integrere PHP-klassen min med databasesettet mitt over alle norske postnummer. Slik kan du også finne ut om postnummeret brukeren ønsker å vise, faktisk finnes. Mer informasjon om databasesettet finner du i egen artikkel.
Tilbakemeldinger
Som vanlig setter jeg pris på tilbakemeldinger, som du kan dele i kommentarfeltet!
Her kommer det er oversikt over absolutt alle postnummer i Norge med tilhørende fylke, kommune og poststed. Hvert postnummer har også en lengde- og breddegrad tilknyttet seg. På denne måten kan du koble opp postnummeret til f.eks Google Maps.
Ved hjelp av lengde- og breddegradene kan du jo også regne deg frem til avstanden mellom to steder, eller finne nærmeste postkontor til en bruker.
For å få lett oversikt over alle postkoder, kjører du følgende spørring:
SELECT
postnummer, fylkeNavn, kommuneNavn, poststedNavn, kategoriNavn, lat, lon
FROM `postnumre`
INNER JOIN poststed
USING(poststedID)
INNER JOIN kommuner
USING(kommuneID)
INNER JOIN fylker
USING(fylkeID)
INNER JOIN kategorier
USING(kategoriID)
ORDER BY
postnummer ASC, fylkeNavn ASC, kommuneNavn ASC, poststedNavn ASC
Med enhver sak kan det forekomme feil, så om dere kommer over noe som skulle vise seg til å være en bug: si i fra.
Oppdateringer
Versjon 1.4 - Har innført alle endringer gjort av posten pr. 1. februar 2012
- Det er nye navn på tabeller og kolonner (norsk)
- Koordinater er synkronisert med listene til Erik Bolstad
Versjon 1.3
- Tabellene er gjort om til InnoDb med nødvendige indekser og fremmednøkler
- Jan Mayen og Svalbard er nå plassert inn i to fylker (med samme navn), i henhold til ISO 3166-2:NO. På grunn av at områdene ikke har noe de facto fylke, måtte det gjøres slik.
- Enkelte justeringer på koordinater
- Kommunesentre for hver kommune er lagt inn
Versjon 1.2
- Jan Mayen og Svalbard har klart å falle ut fra oversikten. Det er pga. områdene ikke er del av noen fylker, og det har dermed blitt opprettet et «Svalbard og Jan Mayen»-fylke.
Innenfor realfagene matematikk, fysikk og kjemi skriver jeg alt av rapporter og øvinger i LaTeX, som er et typesettingssystem for dokumentproduksjon. Det er spesielt egnet for matematisk litteratur, og blir definert av den engelske Wikipedia slik:
A document-typesetting system derived from TeX and used mainly to create scientific and mathematical literature.
LaTeX er originalt skrevet for Linux, men er per i dag tilgjengelig på alle plattformer gjennom ulike distribusjoner. Personlig bruker jeg distribusjonen MikTeX med versjonsnummer 2.8. Redigeringsprogrammet jeg bruker heter LaTeX Editor — forkortet LEd.
Det er tusenvis av fordeler for å bruke LaTeX kontra såkalte What You See Is What You Get-program (Microsoft Office, OpenOffice, Lotus Symphony etc.). Den største er at i LaTeX så er det du som har kontrollen: What You See Is What You Mean. Ting blir faktisk slik du sier det skal være!
Du har vel sett noen matematiske formler på Wikipedia? Der anvender de nemlig LaTeX, og ser omtrent slik ut:
Det er nemlig dette jeg har tenkt å ta tak i, i denne posten: nemlig forklare deg hvordan du også kan få slike deilige formler på din nettside!
Hva må gjøres klart?
For å skrive LaTeX på PC-en din, og for at alt skal gå optimalt, krever det en rekke program som f.eks MikTeX (LaTeX-distro), LEd (redigering) og GhostScript / Ghost View (postscript-støtte). For å skrive LaTeX på nett krever jeg derimot at du kun har MikTeX installert!
PS: Jeg tar som utgangspunkt at webserveren din er din egen PC. Veldig få webhotell-leverandører som installerer LaTeX…
Last så ned siste versjon av MikTeX og installer denne på PC-en din. For din egen del er det nok lurest å velge «Basic Installer». Her vil kun de mest nødvendige pakkene bli installert (pakker kan oversettes som plugins). Om du ønsker å installere alle pakker tilgjengelig, velger du «Complete MikTeX System».
La oss begynne!
Det aller første du må gjøre rede for er følgende:
Hvor installerte du MikTeX?
La oss si du installerte programmet i C:\Programfiler\MikTeX 2.8\
Da må du leite frem til miktex\bin\latex.exe og \miktex\bin\dvipng.exe.
Dersom disse programmene ikke er tilstede, vil du ikke være i stand til å gjennomføre denne guiden: prøv da å re-installere MikTeX.
Har du lokalisert programmene? Flott — da går vi videre.
Finn frem til root-mappen på serveren din (bruker du WampServer er dette C:\wamp\www\). Opprett en mappe som du kaller for «latex».
Inni den nye mappen, oppretter du så følgende mapper:
images
tmp
«Images» er mappen hvor de endelige formlene kommer til å bli plassert, og «tmp» er mappen hvor produksjonsfilene våre ligger. Når du kompilerer et dokument i LaTeX vil det bli opprettet totalt 4 filer per prosjekt. Disse er respektivt .tex, .aux, .log og .dvi. Tex-filen inneholder selve dokumentet vårt, og DVI-filen er selve outputen etter kompilering. Disse to er essensielle.
PHP-klassen
Jeg har allerede skrevet klassen ferdig, som du skal få. Før jeg overrekker den, vil jeg ta tiden til å forklare litt hva den gjør.
Det er to ting du umiddelbart må få i stand etter at du har lastet ned klassen:
- Øverst i klassen er det deklarert to variabler: _latex_path og _dvipng_path. Disse må du endre til hva du fant ut i punkt #1 (under «La oss begynne!»). Det er veldig viktig at du følger denne regelen når du endrer sti: Variabelen må være omgitt av to enkle apostrofer, og selve stien til programmene må være omgitt av gåseøyne.
Dette er fordi at dersom det er mellomrom en plass i stien (i C:\Program Files\MikTeX\ er det mellomrom i «Program Files») må teksten være omgitt av gåseøyne, som forteller at teksten skal tolkes som én sti, og ikke to.
Dersom stien til latex.exe på PC-en din er følgende: C:\Program Files\MikTeX 2.8\miktex\bin\latex.exe skal _latex_path være formet slik:
I seg selv er den ganske liten, og rett frem. Det er en innebygget cache-funksjon som lagrer bildene ved hjelp av:
den matematiske formelen
tekst-størrelsen
Om du vil endre tekst-størrelse, gjør du slik:
latex->set ('font_size', 16); // 16 is the font size, measured in "points"
Dersom du vil endre artikkel-klassen for dokumentet, gjør du slik:
$latex->set ('article_class', 'article');
Ved default er det «scrartcl» som fungerer som dokumentets klasse, men dette er en tilleggspakke som må installeres. Derfor kan du anvende «article» som kommer ferdig-installert via MikTeX.
… og slik setter du innholdet:
$latex->set ('tex_content', '\frac{1}{2}');
For å rendere dokumentet, og vise den endelige formelen som et bilde, gjør du slik:
Klassen støtter naturligvis linking, og kan brukes slik:
data = $latex->set ('font_size', 16)->set ('tex_content', 'ax^2 + bx + c = 0')->render ();
Dersom du ønsker å skrive ABC-formelen (som jeg viste lengre oppe i artikkelen), skriver du den slik:
x = \frac{ -b \pm \sqrt{b^2 - 4ac}}{2a}
Flyteskjema
For de av dere som er interessert i flowcharts (meg inkludert): slik er fremgangsmåten i klassen:
Det var det!
Nå er du i bunn og grunn ferdig, og kan begynne å eksperimentere selv. Det rådes selvsagt at du har noen kunnskaper innen LaTeXs måter å skrive ting på. Om du vil lese deg opp på emnet, er det mange gode ressurser for det:
Jeg har ved et par anledninger skrevet om hvordan du kan dra opp ytelsen i nettsidene dine, ved å for eksempel introdusere mellomlagring (cache) på databasen din eller i applikasjonen.
YUI CSS- og JavaScript Compressor (6 nedlastninger)
latex->set ('font_size', 16); // 16 is the font size, measured in "points"