Den hemliga kraften i bokmärken
Bokmärken är speciallänkar som användare kan lägga till i webbläsarens favoriter.
Dessa speciella länkar inkluderar kod (dvs. inte bara en måladress), och de utlöser olika typer av användbar funktionalitet, så att du kan ändra och utöka vilken webbsida som helst.
När du börjar använda och bygga din egen ser du inte längre webbsidor som statiska element som du inte har kontroll över.
Med bokmärken har du befogenhet att böja någon webbsida till dina behov.
Hur bokmärken fungerar
Bokmärken är mer än statiska webbadresser. De är korta bitar av JavaScript, laddad av en länk, som fungerar på den nuvarande sidan. Koden blir sålunda en förlängning av den aktuella sidan och kan interagera med något element på den.
Ändringarna till sidan är tillfälliga och inte bevarade. När användaren uppdaterar sidan eller följer en länk, går JavaScript bort.
När du återvänder till sidan måste användaren klicka på genväg igen för att aktivera bokmärket.
Ett provbokmärke
Kanske är det bästa sättet att förklara bokmärken att visa en i åtgärd. Bit.ly är en kraftfull URL-förkortningstjänst som råkar ge en praktisk bookmarklet-funktionen . Dra bara länken till din verktygsfält och börja använda din fina nya länk på vilken sida som helst på webben.
När du klickar på Bit.ly bokmärke, laddas en panel på den aktuella sidan. Observera att detta inte är ett nytt webbläsarfönster, utan snarare kod som har bifogats den aktuella sidan. Sådana bokmärken tillåter utvecklare att föra funktionalitet från deras hemsida till vilken sida som helst på webben.
5 praktiska bokmärken för att komma igång
Bit.ly
Få saker är lika praktiska som ett verktyg som gör att du snabbt kan förkorta och dela webbadresser. Med Bit.ly bokmärke , istället för att kopiera en fullständig URL-sökväg och dela den, kan du klicka på en länk för att skapa en kort version av den. Du får också möjlighet att spåra hur ofta den länken används. Inte bara det, men länkens korthet säkerställer att länken inte kommer att bryta i ett e-postmeddelande, eftersom längre komplexa webbadresser ofta gör.
Kortvågs
Utvecklare går ofta ut och packar massor av funktionalitet i en enda bokmärke. Sådan är fallet med Kortvågs av Shaun Inman. Den här kraftfulla genvägen packar massor av sökfunktioner till en enda plats. Du kan söka Google, Amazon, Netflix och massor av andra stora källor. Den enda gotcha är att du måste memorera kommandon för att arbeta med det. Denna hindring åt sidan, när du väl är van vid det, blir du snabbt beroende av den.
ReCSS
ReCSS är ett enkelt skript som uppdaterar CSS för en sida men inte hela sidan själv. På ytan kan det här tyckas som en udda sak att vilja göra. Men överväga om du bygger en applikation eller process som bryts av en uppdatering. Om du till exempel skriver ett felmeddelande istället för att upprepade gånger utföra en åtgärd som genererar ett fel, uppdaterar du bara CSS för att testa olika stilar. När tiden kommer kommer du att älska den här.
fylls i automatiskt
Om du har byggt upp många långa former, så är du säker på att du sympatiserar med människor som är frustrerade över att behöva fylla i formulär om och om igen. Det är här fylls i automatiskt kommer in. Funktionen här är ganska enkel: en bokmärke som automatiskt fyller i formulärfält med återkommande data. Du kan också bygga en anpassad version med dina egna värden om det behövs.
Instapaper
Instapaper är en hel tjänst byggd kring en bokmärke. Det praktiska verktyget sparar sidor som du vill läsa senare. Den synkroniseras bekvämt med din iPhone, iPad och Kindle, så att du enkelt kan ta upp var du slutade läsa.
Den perfekta strukturen för bokmärken
Det finns ett sätt att arkivera bokmärken som garanterar att de är lätta att underhålla. Principen är enkel: använd bokmärket som ett skal för att ladda källfiler på sidan. Det innebär att köttet i koden inte finns i bokmärket. Detta eliminerar problemet med hur användare får uppdatera bokmärket när du har ändrat koden.
För att förbereda uppdateringar till ditt bokmärke, bygg helt enkelt länken så att den laddar alla resurser från servern till sidan. Vanligtvis innebär detta att du lägger till en JavaScript- och CSS-fil på sidan och sedan utlöser den primära JavaScript för att starta funktionaliteten.
Följande JavaScript lägger till en angiven JavaScript-fil på sidan:
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 mall för att skapa bokmärken
Bygga på det här enkla konceptet nedan är två grundläggande skisser för att skapa en egen bokmärke. Det viktigaste valet du måste göra är att avaktivera caching för din JavaScript-fil.
Mall 1: caching
Mall ett förhindrar inte cachning. Det innebär att ditt skript kommer att sparas på användarens dator under en viss tid. Det kommer till sist att laddas om, men du har ingen möjlighet att veta hur snart. Här är mallen:
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);})();
Mall 2: cachning inaktiverad
Detta alternativ innehåller en praktisk parameter för att förhindra caching av ditt skript. Detta är idealiskt för utveckling, eftersom varje gång du använder länken kommer den att köra den senaste versionen på servern.
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);})();
Cacheminnet är inaktiverat helt enkelt genom att lägga till en slumpmässig frågesträng till slutet av manusetiketten. Detta gör att webbläsaren laddar skriptet varje gång det används.
Observera också att dessa funktioner finns i ett JavaScript-omslag som identifierar dem som JavaScript-kod.
Så här använder du mallarna
Använda dessa två mallar, här är hur du skulle sätta dem på jobbet. Först ersätt URL-adressen i koden med hela sökvägen till JavaScript-filen på din server. För det andra, placera koden ovan i en länk tagg som kan läggas till en sida. Det är den här länken som användare kommer att dra och släppa in i sina bokmärken.
Något som detta borde göra tricket:
http://ted.mielczarek.org/code/mozilla/bookmarklet.html" class=external rel=nofollow> bokmärkesgenerator .När du har den grundläggande ramen på plats kan du börja lägga till någon JavaScript-baserad funktionalitet till skriptfilen för bokmärket. Använd den nya länken i din webbläsare för att testa när du går!
Glöm inte cacheminnet!
En av de mest frustrerande aspekterna av att utveckla bookmarklets är webbläsarens caching. Du kan inte tvinga en uppdatering av filen annat än genom att direkt ladda källkods-JavaScript-filen och sedan trycka på "Uppdatera." Det går mycket lättare att skicka en frågesträngsparameter som hittades i mall två ovan.
En varning om "View source"
En annan punkt som genererar mycket frustration är källans syn på en webbsida. När du kör en bokmärke och slår på standardalternativet "Visa källa" kan du bli förbryllad.
När en bokmärke dynamiskt lägger till kod på sidan visas inte den uppdaterade HTML-källan för standardkällan. I stället måste du använda en plug-in som Pyroman eller visa den genererade källan med hjälp av Webbutvecklare verktygsfältet.
Ytterligare resurser för att bygga bokmärken
- Mallen ovan är baserade på handledningen på BetterExplained .
- Marklets är en fantastisk katalog av bokmärken.
- Här är en skiss för byggnad jQuery-baserade bokmärken .
Skriven uteslutande för WDD av Patrick McNeil. Han är frilansskribent, utvecklare och designer. Han älskar särskilt att skriva om webbdesign, utbilda människor i webbutveckling och bygga webbplatser. Patricks passion för webbdesignstrenden och mönster finns i hans böcker på TheWebDesignersIdeaBook.com . Följ Patrick på Twitter @designmeltdown .
Kan du tänka på ett sätt att utöka din ansökan med en bokmärke? Hur har du kreativt använt bokmärken?
