Charlie Gerard heeft Overgrown ontwikkeld, een Chrome-extensie die een digitale versie van natuurlijke overwoekering simuleert. Wanneer een tabblad langdurig niet wordt bezocht, groeien er virtuele planten over het scherm. Zodra de overwoekering meer dan 5% bereikt, wordt de interactie met de pagina geblokkeerd.
Om toegang tot de pagina te herstellen, moet de gebruiker de ranken 'weghakken' door met de muis over de planten te slepen. De gebruiker kan hierbij kiezen uit verschillende wapens, zoals een machete, kettingzaag of vlammenwerper.
Technisch is de extensie opgebouwd uit drie componenten:
- Background worker: beheert de logica van de 'verwaarlozingsklok' per tabblad.
- Popup: de gebruikersinterface voor instellingen zoals timing en wapenkeuze.
- Overlay: verantwoordelijk voor de visuele weergave via SVG's, animaties en geluiden.
Overgrown: wanneer planten je verlaten tabbladen overnemen
De andere dag deed ik een kleine creatieve oefening rond het woord "Overgrowth" (overwoekering). Het eerste dat me te binnen schoot was een apocalyptisch tafereel, iets als The Walking Dead of The Last of Us, waarin planten verlaten gebouwen overwoekeren.
Ik wilde dit idee vervolgens toepassen op de digitale wereld, en het woord "verlaten" deed me denken aan mijn browser-tabbladen... Wat als mijn tabbladen langzaam werden overgenomen door planten naarmate ik ze langer ongelezen liet? Wat als ik deze invasieve planten eerst moest weghalen om weer toegang te krijgen tot mijn tabbladen? Een beetje zoals het proberen te openen van een deur die volledig is overwoekerd...
Daarom heb ik deze leuke kleine Chrome-extensie gebouwd die precies dat doet. Het zal me niet noodzakelijkerwijs dwingen mijn tabbladen vaker te lezen, maar dat is oké.
- Demo
- Link naar de repository
Het idee
Elk tabblad heeft een "verwaarlozingsklok". Deze loopt terwijl het tabblad niet in beeld is en stopt zodra je ernaar kijkt.
Hoe langer een tabblad wordt verwaarloosd, hoe meer planten eroverheen groeien, vanuit de randen naar het midden toe. Zodra een tabblad voor meer dan 5% is overwoekerd, wordt de pagina achter de ranken geblokkeerd: je kunt wel scrollen, maar je kunt niets klikken, selecteren of slepen.
Om het tabblad te bevrijden, moet je door de ranken kappen door je muis eroverheen te slepen. Zodra je het percentage onder de 5% krijgt, vallen de laatste restjes eraf. Als je je tabblad opnieuw verwaarloost, begint de jungle opnieuw te groeien.
Voor de leuk kun je een wapen naar keuze uitkiezen: de roestige machete, de kettingzaag of de vlammenwerper. Daarnaast kun je aanpassen hoe lang het duurt voordat je tabbladen volledig overwoekerd zijn.
Oorspronkelijk overwoog ik om gebruikers te blokkeren om hun overwoekerde tabbladen te sluiten totdat ze alle planten hadden weggehakt, maar ik dacht dat dat te irritant zou zijn... �
De extensie
De code is georganiseerd in drie hoofdonderdelen: de achtergrondlogica, het content-script om de planten en animaties op de tabbladen weer te geven, en de popup-map die de gebruikersinterface (UI) van de extensie zelf beheert.
Background worker
Het background.js-bestand start de jungle op elk open tabblad en vergeet deze zodra het tabblad wordt gesloten.
De popup
Deze map beheert de UI voor de extensie met enkele kleine componenten voor de tijdsinstelling, de wapenkeuze, de lijst met tabbladen en hun huidige status.
De overlay
De content-map bevat de SVG's voor de planten en de wapens, de logica om de clusters te positioneren en te laten groeien, de verwaarlozingsklok en de geluiden.
Ik wilde al een tijdje weer dingen gaan bouwen en dit project voelde als een kleine, leuke manier om te beginnen. Ik schrijf dit op een nieuwe computer, dus ik heb momenteel "slechts" 22 tabbladen open, maar 14 daarvan zijn al volledig overwoekerd... 😂 Het zorgt er misschien niet voor dat ik ze vaker lees, maar door de ranken kappen maakt het terugkeren naar die tabbladen leuker! <0xF0><0x9F><0xAA><0x9A>🌿
Overgrown: wanneer planten je verlaten tabbladen overnemen
De andere dag deed ik een kleine creatieve oefening rond het woord "Overgrowth" (overwoekering). Het eerste dat me te binnen schoot was een apocalyptisch tafereel, iets als The Walking Dead of The Last of Us, waarin planten verlaten gebouwen overwoekeren.
Ik wilde dit idee vervolgens toepassen op de digitale wereld, en het woord "verlaten" deed me denken aan mijn browser-tabbladen... Wat als mijn tabbladen langzaam werden overgenomen door planten naarmate ik ze langer ongelezen liet? Wat als ik deze invasieve planten eerst moest weghalen om weer toegang te krijgen tot mijn tabbladen? Een beetje zoals het proberen te openen van een deur die volledig is overwoekerd...
Daarom heb ik deze leuke kleine Chrome-extensie gebouwd die precies dat doet. Het zal me niet noodzakelijkerwijs dwingen mijn tabbladen vaker te lezen, maar dat is oké.
- Demo
- Link naar de repository
Het idee
Elk tabblad heeft een "verwaarlozingsklok". Deze loopt terwijl het tabblad niet in beeld is en stopt zodra je ernaar kijkt.
Hoe langer een tabblad wordt verwaarloosd, hoe meer planten eroverheen groeien, vanuit de randen naar het midden toe. Zodra een tabblad voor meer dan 5% is overwoekerd, wordt de pagina achter de ranken geblokkeerd: je kunt wel scrollen, maar je kunt niets klikken, selecteren of slepen.
Om het tabblad te bevrijden, moet je door de ranken kappen door je muis eroverheen te slepen. Zodra je het percentage onder de 5% krijgt, vallen de laatste restjes eraf. Als je je tabblad opnieuw verwaarloost, begint de jungle opnieuw te groeien.
Voor de leuk kun je een wapen naar keuze uitkiezen: de roestige machete, de kettingzaag of de vlammenwerper. Daarnaast kun je aanpassen hoe lang het duurt voordat je tabbladen volledig overwoekerd zijn.
Oorspronkelijk overwoog ik om gebruikers te blokkeren om hun overwoekerde tabbladen te sluiten totdat ze alle planten hadden weggehakt, maar ik dacht dat dat te irritant zou zijn... �
De extensie
De code is georganiseerd in drie hoofdonderdelen: de achtergrondlogica, het content-script om de planten en animaties op de tabbladen weer te geven, en de popup-map die de gebruikersinterface (UI) van de extensie zelf beheert.
Background worker
Het background.js-bestand start de jungle op elk open tabblad en vergeet deze zodra het tabblad wordt gesloten.
De popup
Deze map beheert de UI voor de extensie met enkele kleine componenten voor de tijdsinstelling, de wapenkeuze, de lijst met tabbladen en hun huidige status.
De overlay
De content-map bevat de SVG's voor de planten en de wapens, de logica om de clusters te positioneren en te laten groeien, de verwaarlozingsklok en de geluiden.
Ik wilde al een tijdje weer dingen gaan bouwen en dit project voelde als een kleine, leuke manier om te beginnen. Ik schrijf dit op een nieuwe computer, dus ik heb momenteel "slechts" 22 tabbladen open, maar 14 daarvan zijn al volledig overwoekerd... 😂 Het zorgt er misschien niet voor dat ik ze vaker lees, maar door de ranken kappen maakt het terugkeren naar die tabbladen leuker! <0xF0><0x9F><0xAA><0x9A>🌿
Groetjes,