Den hemmelige kraften til bokmerker
Bookmarklets er spesielle linker som brukere kan legge til i nettleserens favoritter.
Disse spesielle koblingene inkluderer kode (dvs. ikke bare en mål-nettadresse), og de utløser ulike typer nyttig funksjonalitet, slik at du kan endre og utvide en hvilken som helst nettside.
Når du begynner å bruke og bygge din egen, vil du ikke lenger se nettsider som statiske elementer som du ikke har kontroll over.
Med bokmerkere har du muligheten til å bøye alle nettsider til dine behov.
Hvordan bookmarklets fungerer
Bookmarklets er mer enn statiske nettadresser. De er korte biter av JavaScript, lastet av en lenke, som opererer på den nåværende åpne siden. Koden blir således en forlengelse av gjeldende side og kan samhandle med ethvert element på den.
Endringene på siden er midlertidige og er ikke bevart. Når brukeren oppdaterer siden eller følger en kobling, går JavaScript bort.
Ved å gå tilbake til siden, må brukeren klikke snarveien igjen for å aktivere bokmerket.
En prøvebokmerke
Kanskje den beste måten å forklare bookmarklets er å demonstrere en i aksjon. Bit.ly er en kraftig URL-kortingstjeneste som skjer for å gi en hendig bookmarklet-funksjonen . Bare dra koblingen til verktøylinjen og begynn å bruke din fancy nye lenke på en hvilken som helst side på nettet.
Når du klikker på Bit.ly bookmarklet, lastes et panel på den aktuelle siden. Legg merke til at dette ikke er et nytt nettleservindu, men heller kode som er lagt til den aktuelle siden. Slike bookmarklets gjør at utviklere kan bringe funksjonalitet fra deres nettside til en hvilken som helst side på nettet.
5 praktiske bookmarklets å komme i gang
Bit.ly
Få ting er like praktisk som et verktøy som lar deg raskt forkorte og dele nettadresser. Med Bit.ly bookmarklet , i stedet for å kopiere en fullstendig URL-bane og dele den, kan du klikke på en kobling for å generere en kort versjon av den. Du får også muligheten til å spore hvor ofte denne koblingen brukes. Ikke bare det, men linkens korthet sikrer at linken ikke vil bryte i en e-post, da lengre komplekse nettadresser ofte gjør.
kortbølge
Utviklere går ofte ut og pakker massevis av funksjonalitet til en enkelt bookmarklet. Slik er tilfellet med kortbølge av Shaun Inman. Denne kraftige snarveien pakker massevis av søkefunksjonalitet til et enkelt sted. Du kan søke i Google, Amazon, Netflix og masse andre store kilder. Den eneste gotchaen er at du må huske kommandoer for å jobbe med den. Denne hindringen til side, når du blir vant til det, blir du raskt avhengig av det.
ReCSS
ReCSS er et enkelt skript som oppdaterer CSS for en side, men ikke hele siden selv. På overflaten kan dette virke som en merkelig ting å ønske å gjøre. Men vurder om du bygger et program eller en prosess som er ødelagt av en oppdatering. Hvis du for eksempel styler en feilmelding, i stedet for å utføre en handling som genererer en feil gjentatte ganger, oppdaterer du bare CSS for å teste forskjellige stiler. Når tiden kommer, vil du elske denne.
fylles ut automatisk
Hvis du har måttet bygge mange lange former, så er du sikker på at du sympatiserer med folk som er frustrert over å måtte fylle ut skjemaer om og om igjen. Dette er hvor fylles ut automatisk kommer inn. Funksjonaliteten her er ganske enkel: et bokmerke som automatisk fyller skjemafelt med tilbakevendende data. Du kan også bygge en tilpasset versjon med dine egne verdier om nødvendig.
Instapaper
Instapaper er en hel tjeneste bygget rundt en bokmerke. Det praktiske verktøyet lagrer sider som du vil lese senere. Den synkroniseres med iPhone, iPad og Kindle, slik at du enkelt kan hente hvor du sluttet å lese.
Den ideelle strukturen for bokmerkere
Det er en måte å arkivere bookmarklets som sikrer at de er enkle å vedlikeholde. Prinsippet er enkelt: bruk bokmerkene som et skall for å laste kildefiler på siden. Dette betyr at kjøttet i koden ikke er faktisk inneholdt i bokmerket. Dette eliminerer problemet med hvordan brukere får oppdatere bokmerket etter at du har endret koden.
For å forberede oppdateringer til bokmerket ditt, bare konstruer lenken slik at den laster alle ressurser fra serveren din til siden. Vanligvis innebærer dette at du legger til en JavaScript- og CSS-fil på siden, og utløser det primære JavaScript for å starte funksjonaliteten.
Følgende JavaScript legger til en spesifisert JavaScript-fil på siden:
new_script=document.createElement('SCRIPT');new_script.type='text/javascript';new_script.src="'https://www.your-site.com/script.js?';document.getElementsByTagName('head')[0].appendChild(new_script);
En mal for å lage bookmarklets
Basert på dette enkle konseptet, er det to grunnleggende skisser for å lage ditt eget bokmerke. Hovedalternativet du må gjøre er om du vil deaktivere caching for JavaScript-filen din.
Mal 1: caching
Mal en forhindrer ikke caching. Dette betyr at skriptet ditt vil bli lagret på brukerens datamaskin i en viss periode. Det vil etter hvert bli lastet opp, men du har ingen måte å vite hvor snart. Her er malen:
javascript:(function(){new_script=document.createElement('SCRIPT');new_script.type='text/javascript';new_script.src='https://www.your-site.com/script.js?';document.getElementsByTagName('head')[0].appendChild(new_script);})();
Mal 2: caching deaktivert
Dette alternativet inneholder en praktisk parameter for å forhindre caching av skriptet ditt. Dette er ideelt for utvikling fordi hver gang du bruker linken, kjører den nyeste versjonen på serveren.
javascript:(function(){new_script=document.createElement('SCRIPT');new_script.type='text/javascript';new_script.src='https://www.your-site.com/script.js?x=' +(Math.random());document.getElementsByTagName('head')[0].appendChild(new_script);})();
Cachen er deaktivert ved å legge til en tilfeldig søkestreng til slutten av skriptet. Dette gjør at nettleseren laster opp skriptet hver gang det blir brukt.
Vær også oppmerksom på at disse funksjonene er i et JavaScript-wrapper som identifiserer dem som JavaScript-kode.
Slik bruker du malene
Bruk disse to maler, her er hvordan du vil sette dem på jobb. Først skal du erstatte nettadressen i koden med hele banen til JavaScript-filen på serveren din. For det andre, legg koden over i en lenke som kan legges til en side. Det er denne linken som brukere vil dra og slippe inn i bokmerkene sine.
Noe som dette burde gjøre trikset:
http://ted.mielczarek.org/code/mozilla/bookmarklet.html" class=external rel=nofollow> bookmarklet generator .Når du har det grunnleggende rammeverket på plass, kan du begynne å legge til noen JavaScript-basert funksjonalitet til skriptfilen for bookmarklet. Bruk den nye linken i nettleseren din til å teste når du går!
Ikke glem cachen!
En av de mest frustrerende aspektene ved å utvikle bookmarklets er nettleservaching. Du kan ikke tvinge en oppdatering av filen, annet enn ved å laste inn kilde-JavaScript-filen direkte og deretter trykke på "Oppdater". Det er mye lettere å sende en forespørselsstrengparameter som funnet i mal to ovenfor.
En advarsel om "View source"
Et annet punkt som genererer mye frustrasjon er kildevisningen til en nettside. Når du kjører en bokmerke og trykker på standard "Vis kilde" -alternativet, kan du bli forvirret.
Når et bookmarklet dynamisk legger til kode på siden, viser standardkildevisningen ikke den oppdaterte HTML-en. I stedet må du bruke en plugin som Firebug eller se den genererte kilden ved hjelp av Webutvikler verktøylinjen.
Ekstra ressurser for å bygge bookmarklets
- Malerne ovenfor er basert på opplæringen på BetterExplained .
- Marklets er en fantastisk katalog av bookmarklets.
- Her er en disposisjon for bygging jQuery-baserte bookmarklets .
Skrevet utelukkende for WDD av Patrick McNeil. Han er freelance skribent, utvikler og designer. Spesielt elsker han å skrive om webdesign, trene folk i webutvikling og bygge nettsteder. Patrins lidenskap for trender og mønstre i webdesign finnes i hans bøker på TheWebDesignersIdeaBook.com . Følg Patrick på Twitter @designmeltdown .
Kan du tenke på en måte å utvide din søknad med en bookmarklet? Hvordan har du brukt bokmarker kreativt?
