Jeg har leget lidt med en bookmarklet, inspireret af googles reaktion på søgeordene “do a barell roll” og “tilt”.
Bogmærk dette link, og prøv at aktivere det på en tilfældig hjemmeside: 3D (kræver en webkit-browser, aka Safari, Chrome, Rockmelt osv.)
Bookmarklet
november 4th, 2011Embeddig af skrifttyper med CSS – også i IE
juni 17th, 2010Standardskrifttyper er kedelige (og alle bruger dem, sjovt nok) – derfor er det rart at finde skrifttyper som passer til den grafiske stil man prøver at ramme/opfinde, og rent faktisk at kunne bruge disse fantastiske skrifttyper. Det kan nu endelig lade sig gøre (også uden Flash) i alle de største browsere (Firefox, Safari, Chrome og sågar Internet Explorer 7 og opefter) med følgende lille stump kode:
@font-face
Her på siden bruger jeg tre skrifttype: Roadway til overskrifter, Georgia til brødtekst og Primer Apples til de lidt mere specielle ting. Eftersom Georgia findes på næsten alle computere, er der ingen grund til at embedde den. De to andre derimod, går jeg ikke ud fra at overvældende mange mennesker har, så dem har jeg embedden.
Under normale omstændigheder ville man embedde dem med følgende kode:
@font-face {
font-family: Roadway;
src: local(Roadway), url('fonts/ROADWAY_.ttf') format('opentype');
}
Ovenstående kode virker i alle browsere, og skal ikke bruge andet end en skrifttype i en mappe. Herefter er det muligt at bruge skrifttypen overalt man lyster ved hjælp af
font-family: Roadway;
Desværre findes Internet Explorer, og hos Microsoft gider man ikke gøre som alle de andre, så der skal man have skrifttypen i et andet format – yæi!
Dog er det ret nemt at gøre noget ved, for der findes en ret stor bunke gratis convertere – blandt andet http://ttf2eot.sebastiankippe.com/
Efter den lille konvertering skal ens CSS rettes lidt til, så den ser sådan ud:
@font-face {
font-family: Roadway;
src: url('fonts/ROADWAY_.eot');
src: local(Roadway), url('fonts/ROADWAY_.ttf') format('opentype');
}
..oog så virker det helt fantastisk godt fra IE7 og helt op til rigtige browsere 
Update
IE9 er helt pjattet med sikkerhed (nu også omkring skrifttyper :S) så oplever man at IE9 driller, bør man lege med sine Apache-indstillinger.
IE7 + Google Closure + class = argh!!
juni 17th, 2010Eftersom jeg sikkert ikke er den eneste der er blevet gammel før tid af at arbejde med Internet Explorer 7 og Google Closure, kommer her en lille opdagelse: Prøver man med nedenstående script at ændre class på et link, sker der intet!
function viewSchedule() {
$('testTables').style.display = 'none';
$('testScheduleWrapper').style.display = 'block';
goog.dom.classes.remove($('tableButton'), 'selected');
goog.dom.classes.add($('scheduleButton'), 'selected');
}
Det ved man jo heldigvis at kun kan skyldes at IE er en skodbrowser. Det bliver lidt bedre når man klikker et andet sted på siden – så får elementet nemlig sin class. Når man er færdig med at undre sig over det, prøver man at tilføje følgende linie, og indser at alt lige pludselig virker:
<pre>$('scheduleButton').blur();
En hyggelig lille fejl i IE7, som andre forhåbentligt slipper for at kæmpe alt for længe med…
Fra Flash til jQuery
maj 24th, 2010Ohøj kære læser (hvis du overhovedet findes).
Nu har jeg atter besluttet at bruge min blog til noget – eller i hvert fald igen placere den direkte på Znegl.dk i stedet for blog.znegl.dk. Det skyldes 3 ting:
- Der er ingen grund til at have den på et selvstændigt domæne, eftersom indholdet på bloggen og indholdet på Znegl.dk sagtens kan bo sammen.
- Jeg vil optimere begge sider til visning på mobile enheder (læs Android-telefoner).
- Jeg vil af med Flash og bruge jQuery i stedet.
Det første punkt siger lidt sig selv, så jeg nøjes med at uddybe de to sidste:
Optimering til telefoner
..er en meget naturlig ting, eftersom jeg nu har en Android-telefon (HTC Magic). Jeg laver optimeringen, så den optimerer til 4 forskellige skærmstørrelser, fra under 450px i bredden til over 1100px. Som du kan se når du lige om lidt ændrer på størrelsen af din browser, skifter mængden af margin mellem indhold og browservindue, desuden fjernes mit seneste Tweet i toppen af siden på små skærme, og til rigtigt små skærme, placeres alt indholdet i en lang liste i højden.
Det med Flash..
Verden hader tilsyneladende Flash lige for tiden, hvilket er lidt fjollet – for uden Flash havde folk ikke haft behovet for de nye funktionaliteter i HTML5, CSS3 og den nu enorme brug af JavaScript. Når det er sagt, så er det for mig en selvfølge at alt hvad der kan laves uden Flash også skal laves uden Flash. Det skyldes at Flash er et plugin, og altså kun et hjælpemiddel til at vise ting man på ingen anden måde kan vise. Flash skal efter mit hovede benyttes når komplekse animationer, store applikationer (så som spil og deciderede programmer), der kræver mere avanceret funktionalitet end det er fornuftigt at overskue i html (blandt andet objekt-orienterede projekter), og når en browser ikke understøtter HTML5+CSS3+JavaScript-versionen af samme funktionalitet (hvilket nok vil ske de næste par år).
Her på siden har jeg brugt Flash af 3 årsager:
- Embedding af skrifttyper
- Små animationer, for at gøre brugerfladen lidt lækker
- Interaktion med Twitter
Alle tre områder kan erstattes med nye webteknologier, så det gør jeg hermed. Og så er jeg oven i købet så flink at skrive lidt om det
Embedding af skrifttyper i CSS – helt ned til Internet Explorer 7
Indlæg om små animationer i jQuery og om interaktion med Twitter kommer snart (eller i hvert fald lige pludselig).
Hør hov! Så blev man da lige ganske pjattet med det kære lille Twitter.
Og som jeg har lært mig selv, skal alt hvad man bliver pjattet med, blandes ind i både Facebook og WordPress, så det har jeg altså gjort.
Det har så gjort at jeg på Facebook bruger Twitters egen applikation (det er vel det nemmeste?) til at opdatere min Facebook status til at være det sidste jeg nu har skrevet i Twitter, og det gør også at jeg kan opdatere min Twitter gennem Facebook.
..men det kan alle, så jeg måtte også blande Twitter ind i min blog 
Derfor indeholder min blog hermed to plugins der kan trylle med Twitter:
Tweet This
laver den fin knap der er lige under det her indlæg. Knappen hjælper dig med at komme hen til Twitter og oprette et tweet med titlen på blogindlægget og et link til selv samme. Desuden har det mulighed for også at lave knapper til en utrolig masse andre sider, og man kan selv vælge et predineret logo til hvert link, eller bare få skrevet det som tekst.
Twitter Tools
Twitter Tools er en hel masse sejere end Twitter This! Jeg bruger den til at sende et tweet afsted, hver gang jeg poster noget på min blog. Desuden viser den mine sidste 5 tweets i sidebaren og har bl.a. også mulighed for selv at poste et blogindlæg hver gang man tweeter, samt at lave blogindlæg med en opsamling på dagens eller ugens tweets. Og selvfølgelig kan man twitte direkte fra Tweet, som bliver placeret under menuen posts/indlæng, ligesom man kan tweete direkte fra ens sidebar i frontenden, så længe man er logget på som admin.
