De geheime kracht van Bookmarklets
Bookmarklets zijn speciale links die gebruikers kunnen toevoegen aan de favorieten van hun browser.
Deze speciale links bevatten code (dus niet alleen een doel-URL) en ze activeren verschillende soorten nuttige functionaliteit, waardoor u elke webpagina kunt wijzigen en uitbreiden.
Zodra u uw eigen pagina's gaat gebruiken en zelf gaat maken, ziet u webpagina's niet meer als statische elementen waarover u geen controle hebt.
Met bookmarklets heeft u de kracht om elke webpagina naar uw behoeften te buigen.
Hoe bookmarklets werken
Bookmarklets zijn meer dan statische URL's. Het zijn korte stukjes JavaScript, geladen met een link, die werken op de momenteel geopende pagina. De code wordt dus een uitbreiding van de huidige pagina en kan communiceren met elk element erop.
De wijzigingen aan de pagina zijn tijdelijk en worden niet bewaard. Wanneer de gebruiker de pagina vernieuwt of een koppeling volgt, is JavaScript verloren.
Bij terugkeer op de pagina moet de gebruiker opnieuw op de snelkoppeling klikken om de bookmarklet in te schakelen.
Een voorbeeld van een bookmarklet
Misschien is de beste manier om bookmarklets uit te leggen, het tonen van een in actie. Bit.ly is een krachtige URL-verkortingsservice die toevallig handig is bookmarklet-functie . Sleep de link naar uw werkbalk en gebruik uw mooie nieuwe link op elke pagina op internet.
Wanneer u op de Bit.ly-bookmarklet klikt, wordt een venster op de huidige pagina geladen. Merk op dat dit geen nieuw browservenster is, maar eerder een code die is toegevoegd aan de huidige pagina. Met dergelijke bookmarklets kunnen ontwikkelaars functionaliteit van hun website naar elke pagina op internet brengen.
5 handige bookmarklets om u op weg te helpen
Bit.ly
Weinig dingen zijn net zo handig als een tool waarmee u snel URL's kunt inkorten en delen. Met de Bit.ly bookmarklet , in plaats van een volledig URL-pad te kopiëren en te delen, kunt u op een koppeling klikken om een korte versie ervan te genereren. U krijgt ook de mogelijkheid om bij te houden hoe vaak die link wordt gebruikt. Niet alleen dat, maar de kortheid van de koppeling zorgt ervoor dat de link niet in een e-mail breekt, zoals langere complexe URL's vaak doen.
korte golf
Ontwikkelaars gaan vaak helemaal uit en verpakken een heleboel functionaliteit in één enkele bookmarklet. Dat is het geval met korte golf door Shaun Inman. Deze krachtige sneltoets verpakt een heleboel zoekfunctionaliteit op één plek. U kunt zoeken op Google, Amazon, Netflix en tal van andere belangrijke bronnen. Het enige datcha is dat je opdrachten moet onthouden om ermee te werken. Deze hindernis opzij, als je er eenmaal aan gewend bent, zul je er snel heel afhankelijk van worden.
ReCSS
ReCSS is een eenvoudig script dat de CSS voor een pagina vernieuwt, maar niet de volledige pagina zelf. Op het eerste gezicht lijkt dit misschien iets vreemds om te willen doen. Maar overweeg of u een toepassing of proces bouwt dat wordt verbroken door een vernieuwing. Als u bijvoorbeeld een foutbericht ontwerpt, hoeft u in plaats van herhaaldelijk een actie uit te voeren die een fout genereert, de CSS te vernieuwen om verschillende stijlen te testen. Als de tijd daar is, zul je deze geweldig vinden.
automatisch ingevuld
Als je veel lange vormen hebt moeten bouwen, dan sympathiseer je zeker met mensen die gefrustreerd zijn omdat ze steeds opnieuw formulieren moeten invullen. Dit is waar automatisch ingevuld komt binnen. De functionaliteit is hier vrij eenvoudig: een bookmarklet die automatisch formuliervelden met terugkerende gegevens vult. Je kunt ook een aangepaste versie met je eigen waarden maken als dat nodig is.
Instapaper
Instapaper is een complete service gebouwd rond een bookmarklet. Het handige hulpmiddel slaat pagina's op die u later zou willen lezen. Het wordt handig gesynchroniseerd met je iPhone, iPad en Kindle, zodat je gemakkelijk kunt doorgaan waar je bent gebleven met lezen.
De ideale structuur voor bookmarklets
Er is een manier om bladwijzers te ontwerpen die ervoor zorgen dat ze gemakkelijk te onderhouden zijn. Het principe is eenvoudig: gebruik de bookmarklet als een shell om bronbestanden op de pagina te laden. Dit betekent dat het vlees van de code eigenlijk niet in de bladwijzer is opgenomen. Dit elimineert het probleem hoe gebruikers de bladwijzer kunnen bijwerken nadat u de code hebt gewijzigd.
Als u updates voor uw bladwijzer wilt voorbereiden, maakt u eenvoudig de koppeling zodat alle bronnen van uw server op de pagina worden geladen. Dit betekent meestal dat u een JavaScript- en CSS-bestand aan de pagina toevoegt en vervolgens het primaire JavaScript activeert om de functionaliteit te starten.
Het volgende JavaScript voegt een opgegeven JavaScript-bestand toe aan de pagina:
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);
Een sjabloon voor het maken van bookmarklets
Voortbouwend op dit eenvoudige concept, hieronder zijn twee basiscontouren voor het maken van uw eigen bookmarklet. De belangrijkste keuze die u moet maken, is of u caching voor uw JavaScript-bestand wilt uitschakelen.
Sjabloon 1: caching
Sjabloon één voorkomt caching niet. Dit betekent dat uw script voor enige tijd op de computer van de gebruiker wordt opgeslagen. Het wordt uiteindelijk opnieuw geladen, maar je weet niet hoe snel. Hier is de sjabloon:
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);})();
Sjabloon 2: caching uitgeschakeld
Dit alternatief bevat een handige parameter om caching van uw script te voorkomen. Dit is ideaal voor ontwikkeling, want elke keer dat u de link gebruikt, wordt de nieuwste versie op de server uitgevoerd.
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);})();
De cache kan eenvoudigweg worden uitgeschakeld door een willekeurige queryreeks toe te voegen aan het einde van de scripttag. Hierdoor laadt de browser het script telkens wanneer het wordt gebruikt.
Merk ook op dat deze functies zich in een JavaScript-wrapper bevinden die hen als JavaScript-code identificeert.
Hoe de sjablonen te gebruiken
Met behulp van deze twee sjablonen, hier is hoe je ze aan het werk zou zetten. Vervang eerst de URL in de code door het volledige pad naar het JavaScript-bestand op uw server. Plaats de bovenstaande code vervolgens in een koppelingstag die aan een pagina kan worden toegevoegd. Het is deze link die gebruikers naar hun bladwijzers slepen en neerzetten.
Zoiets zou de slag moeten slaan:
http://ted.mielczarek.org/code/mozilla/bookmarklet.html" class=external rel=nofollow> bookmarklet generator .Als u eenmaal het basisraamwerk hebt geïnstalleerd, kunt u JavaScript-gebaseerde functionaliteit toevoegen aan het scriptbestand voor de bookmarklet. Gebruik de nieuwe link in uw browser om te testen terwijl u bezig bent!
Vergeet de cache niet!
Een van de meest frustrerende aspecten van het ontwikkelen van bookmarklets is browsercaching. U kunt het bestand niet verversen door het bron JavaScript-bestand rechtstreeks te laden en vervolgens op 'Vernieuwen' te drukken. Het doorgeven van een queryreeksparameter zoals gevonden in sjabloon twee hierboven is veel eenvoudiger.
Een waarschuwing over "bron weergeven"
Een ander punt dat voor veel frustratie zorgt, is de bronweergave van een webpagina. Bij het uitvoeren van een bookmarklet en het raken van de standaard "View source" -optie, bent u misschien in de war.
Wanneer een bookmarklet dynamisch code toevoegt aan de pagina, wordt in de standaardbronweergave de bijgewerkte HTML niet weergegeven. In plaats daarvan moet je een plug-in gebruiken zoals Firebug of bekijk de gegenereerde bron met behulp van de Webontwikkelaar werkbalk.
Extra bronnen voor het maken van bookmarklets
- De bovenstaande sjablonen zijn gebaseerd op de tutorial op BetterExplained .
- Marklets is een geweldige map met bookmarklets.
- Hier is een overzicht voor bouwen jQuery-gebaseerde bookmarklets .
Exclusief geschreven voor WDD door Patrick McNeil. Hij is een freelance schrijver, ontwikkelaar en ontwerper. In het bijzonder houdt hij van schrijven over webdesign, mensen trainen in webontwikkeling en websites bouwen. Patrick's passie voor webdesign trends en patronen is te vinden in zijn boeken TheWebDesignersIdeaBook.com . Volg Patrick op Twitter @designmeltdown .
Kun je een manier bedenken om je applicatie uit te breiden met een bookmarklet? Hoe heb je op creatieve wijze bladwijzers gebruikt?
