Met Stylish en GreaseMonkey is het mogelijk om websites naar je eigen hand te zetten, door eigen thema’s erop toe te passen en snelle en handige JavaScript-acties aan een website toe te voegen. We zetten de handigste stijlen en scripts voor je op een rij.

Je kunt websites natuurlijk gewoon bezoeken, maar wist je dat je er ook erg leuke dingen mee kunt doen? In deze masterclass laten we je zien hoe je aan de slag kunt gaan met Stylish. We laten zien wat het doet, hoe je stijlen kunt installeren en hoe je zelf aan de slag kunt met diverse stijlen voor websites. Lees ook: Je eigen WordPress-website - Deel 1.

Ook bekijken we GreaseMonkey, waarmee je met JavaScript handige acties kunt toevoegen aan verschillende websites, waarmee je productiever kunt werken. We nemen enkele handige acties met je door.

01 Stylish

Stylish is een extensie voor Mozilla Firefox, Google Chrome, Opera en Safari, waarmee je een eigen stijl op een website kunt toepassen. Het is mogelijk voor gebruikers om zelf thema’s in elkaar te zetten en daarmee dus websites aan te passen. Veel van die thema’s worden gedeeld op userstyles.org, waar meer dan 70.000 stijlen voor websites zijn te downloaden. Er is wel een klein functieverschil tussen de versie van Firefox en die van Chrome, maar in de toekomst worden de functionaliteiten van beide versies gelijkgetrokken. Zo is het in Firefox mogelijk om de browser-interface ook van een eigen stijl te voorzien. Je downloadt de extensie voor Chrome hier. Klik op Toev. aan Chrome / Extensie toevoegen. Voor Firefox ga je hiernaartoe en klik je op Toevoegen aan Firefox / Installeren / Nu herstarten.

©PXimport

02 Een stijl installeren

Na het herstarten van de browser verschijnt een bevestigingspagina van Stylish. Klik links op userstyles.org home om door de verschillende stijlen te kunnen bladeren. Deze stijlen zijn door andere gebruikers gemaakt en voor veel websites beschikbaar. Je kunt nu linksboven, onder de gele balk, een zoekterm invullen om een stijl te zoeken voor je favoriete website. Zoek bijvoorbeeld op youtube. Er verschijnen nu een hoop stijlen. Kies er eentje uit en klik op Install with Stylish en daarna op Installeren. De stijl is geïnstalleerd. Je kunt deze direct testen door naar www.youtube.com te gaan en de stijl in actie te zien. In ons geval zien we de Nyan Cat als voortgangsbalk in een YouTube-video, precies zoals we zagen op de voorbeeldpagina. Andere handige thema’s zijn bijvoorbeeld DarkTube waarmee YouTube helemaal in het donker wordt gehuld en een minimaal Facebook-thema genaamd Minimalist Facebook 2015. Maar er is natuurlijk veel meer beschikbaar op de website.

©PXimport

03 Zelf een stijl maken

Je kunt via de Stylish-knop in de browser zien welke stijlen er op dit moment op de website actief zijn. Om stijlen voor een specifieke website te zoeken, klik je op het Stylish-icoon en kies je voor de optie Stijlen zoeken voor deze website. Je wordt vervolgens doorgeleid naar de website van userstyles waar je, indien beschikbaar, alle stijlen voor die website kunt bekijken. Is er geen stijl beschikbaar, dan zou je zelf aan de slag kunnen. Daarvoor moet je wel CSS gaan gebruiken. Met een eigen stijl kunnen we bijvoorbeeld de Google-pagina aanpassen. Het zou leuk zijn om hier een eigen kleur en zelfs achtergrondafbeelding aan toe te voegen. Dat is met CSS zo gebeurd. Klik op het Stylish-pictogram en kies voor de optie Nieuwe stijl schrijven en daarna voor Voor deze URL(W), omdat we deze stijl nu alleen van toepassing willen hebben op de voorpagina van Google. Er opent een nieuw venster met daarin drie regels code, namelijk een namespace-definitie en een -moz-document-definitie waarin het domein bevindt voor waar de stijl gaan schrijven.

©PXimport

04 CSS

Voordat we doorgaan is het nodig om de basis van CSS te snappen. CSS is de taal om websites mee op te maken: om ze kleuren te geven, lettergroottes in te stellen en meer. HTML is de taal om websites in te delen in elementen, zoals H1 voor een header en DIV voor een onderdeel van een website. Met CSS is het de bedoeling om een element te ‘selecteren’ waarna je er een eigen stijl op kunt toepassen. Eén zo’n element is de ‘body’, dat is de gehele webpagina. Om de body te selecteren, typ je tussen de twee accolades bij @-moz-document simpelweg body { }.

Je hebt nu de gehele webpagina geselecteerd. Stel dat je nu een andere achtergrondkleur wilt instellen. Daarvoor bestaat het CSS-commando background-color: KLEUR;. Typ dat letterlijk zo tussen de haken van body, maar vervang KLEUR door bijvoorbeeld orange voor oranje. Klik op Voorbeeld om de stijl nu toe te passen. Als je nu terug naar het Google-tabblad gaat, zie je dat de achtergrond van Google oranje is geworden. Stel dat je nu een eigen afbeelding als achtergrond wilt instellen. Daarvoor gebruik je het volgende CSS-commando: background-image: url(‘PAD-NAAR-BESTAND’);. Vervang het pad naar het bestand door het daadwerkelijke pad. Staat het bestand op jouw harde schijf, dan zet je er file:/// voor, en zorg je dat je van alle slash-tekens in het pad forward slashes maakt. Afhankelijk van de grootte van het plaatje, kan het zijn dat je er maar een gedeelte van ziet.

Gelukkig gebruik je een moderne browser en kunnen we met CSS3 die fout eenvoudig corrigeren, namelijk door het commando background-size: cover; onder background-image toe te voegen. Heb je overigens gekozen voor een afbeelding van je harde schijf, dan is de afbeelding uiteraard alleen op deze computer zichtbaar.

©PXimport

05 Ontwikkelaarstools Chrome

Als je zelf meer wijzigingen wilt maken, is het nodig om de ontwikkelaarsgereedschappen van Firefox en/of Chrome te gebruiken. Dat klinkt misschien eng, maar het valt reuze mee. Stel je wilt op google.nl die balk onderaan weg hebben, dan ga je als volgt aan de slag (we kiezen nu even Chrome). Je klikt met de rechtermuisknop op deze balk in Google Chrome en kiest voor Inspecteren. Vervolgens opent er aan de rechterkant een blok. We zijn geïnteresseerd in het gedeelte bovenaan, dat is de broncode van de webpagina. Als het goed is, is er nu een div geselecteerd met als class genaamd fbar. Als je nu teruggaat naar Stylish, kun je die balk onderaan selecteren met .fbar { }. De punt voor de naam is om elementen met een specifieke class te selecteren. Je gebruikt een hekje (#) als je een element op een id wilt selecteren. Typ vervolgens display: none; tussen de haken van fbar om de div te laten verdwijnen. Klik opnieuw op Voorbeeld en de onderste balk is weg.

©PXimport

06 Ontwikkelaarstools Firefox

Afhankelijk van wat voor plaatje je hebt gekozen, kan sommige tekst onleesbaar zijn geworden doordat de afbeelding donker is. Om dat op te lossen gaan we als voorbeeld te tekst bovenaan de pagina wit maken. Dit keer zullen we dat in Firefox doen. Klik daarvoor met de rechtermuisknop op de tekst en kies voor Element inspecteren. Nu verschijnt onderaan in beeld de broncode van de pagina met een div geselecteerd. Als je met de muis over die broncode gaat, zie je het element dat die div representeert gemarkeerd op de webpagina zelf.

Om de kleur te wijzigen van de tekst, ga je – met de div geselecteerd – naar het tabblad Berekend dat je rechts in de ontwikkelaarstools vindt. Klap het attribuut color uit en je ziet dat de huidige kleur afkomstig is van #gb#gb a.gb_P. Dat is het element dat we moeten hebben. Ga terug naar Stylish en typ #gb#gb a.gb_P { }. Om de tekstkleur te veranderen, gebruik je het commando color: KLEUR; en vervang je het kleur-element met een daadwerkelijke kleur. In dit geval wordt het dan dus color: white;.

07 GreaseMonkey

Wat Stylish mogelijk maakt met opmaak en CSS, doet GreaseMonkey met JavaScript. GreaseMonkey maakt het mogelijk het web te verbeteren met handige acties. Denk aan extra functies voor websites als YouTube, Google en Facebook. GreaseMonkey is primair gericht op Firefox. Gebruikers van Google Chrome hebben als beste optie de extensie genaamd Tampermonkey. Daardoor kan het voorkomen dat niet alle scripts voor GreaseMonkey ook in Chrome werken. Je downloadt GreaseMonkey hier. Klik op Toevoegen aan Firefox / Installeren / Nu herstarten. Firefox start even opnieuw op, waarna je rechts een nieuw pictogram ziet dat van GreaseMonkey is. Tampermonkey voor Chrome vind je hier.

©PXimport

08 Scripts installeren

Om een script aan GreaseMonkey toe te voegen en actief te maken, moet je deze eerst weten te vinden. Er is geen centrale plek voor scripts, maar er zijn wel een aantal populaire websites waar zelfgemaakte scripts worden gedeeld. Een van die sites is www.greasyfork.org/nl. Een handig script is bijvoorbeeld het Spotify-webspeler-script dat je hier vindt. Dit script voegt notificaties toe voor elk liedje dat je afspeelt, met artiest, album en titel.

Je installeert dit script door op de knop Installeer dit script te klikken. Vervolgens klik je op Install en klik je op Ok. In Chrome klik je eveneens op Installeer dit script en daarna op Install. Als je nu naar de Spotify-webspeler gaat, zie je dat de website vraagt om notificaties te mogen tonen. Ga daarmee akkoord. Zodra je een liedje afspeelt, zie je de notificatie van de browser verschijnen. Om je scripts te beheren, klik je in Firefox op het pijltje van het GreaseMonkey-icoon. Onderaan zie je de actieve scripts, die je met een klik op de knop kunt uitschakelen. In Chrome klik je op het Tampermonkey-icoon en zie je direct het actieve script bovenaan, met ernaast een aan/uitschakelaar.

09 Bierdopje-ondertiteling

Bierdopje.com is een website waar je vroeger vaak zelfgemaakte Nederlandse ondertiteling vond voor veel populaire series. Helaas eiste BREIN dat er geen ondertiteling meer verspreid werd. Met het GreaseMonkey-script is het mogelijk om grotendeels de functionaliteit van het originele Bierdopje weer te herstellen. Je downloadt en installeert het script zoals beschreven in stap 8. Als je daarna naar Bierdopje.com gaat, zie je daar nu landvlaggen bij elke serie staan. Nog handiger: je ziet ernaast ook een downloadknop staan, waarmee je direct automatisch op de betreffende nzb-zoekmachine naar die serie zoekt met een optimale zoekopdracht. Dan hoef je dat dus zelf niet meer te doen en kun je de serie meteen binnenhalen.

©PXimport

10 Afbeeldingen

Een ander handig GreaseMonkey-script is die van Mouseover Popup Image Viewer. Hiermee wordt het mogelijk om automatisch een afbeelding in een pop-up weer te geven wanneer je met de muis over een afbeelding met een link gaat. Je vindt dit script hier. Om het te testen, kun je bijvoorbeeld naar www.reddit.com gaan. Wanneer je met de muis over een thumbnail van een post gaat, zie je direct de grote afbeelding. Hetzelfde geldt als je naar Google Afbeeldingen gaat en daar zoekt naar een foto, en het werkt ook prima op Twitter, Instagram, Tumblr, Wikipedia en veel meer diensten.

11 YouTube +

Veel scripts richten zich op YouTube. Een zo’n script is bijvoorbeeld YouTube +. Functies van dit script zijn onder andere dat video’s in een eigen pop-up afgespeeld kunnen worden en dat video’s frame voor frame bekeken kunnen worden. Ook handig is de mogelijkheid om de lijst met zoekresultaten om te toveren naar een roosterweergave, voor een duidelijker overzicht. De complete, en zeer lange, lijst van verbeteringen en functies die YouTube + doorvoert, kun je hier lezen. YouTube + heeft wel alleen ondersteuning voor de HTML5-speler van YouTube, maar die is op het platform toch al standaard, dus dat zou geen probleem moeten zijn.

Als je na de installatie naar www.youtube.com gaat, zie je naast de Sign in-knop een afspeelknop, dat is de knop om dit script mee in te stellen. Klik op de ballon om het script te configureren. Op de configuratiepagina vind je links tabbladen voor de verschillende opties: General, Video en Blacklist. Op General vinden wij de opties Disable hovercards handig, evenals Hide footer en helemaal al Hide recommended channels sidebar. Klik op Save om de wijzigingen op te slaan en direct actief te maken. Bij Video is het handig om Disable annotations aan te zetten. Je kunt hier ook de standaardvideokwaliteit instellen, door die bij Default video quality te selecteren.

12 Meer YouTube

Er zijn nog meer handige YouTube-scripts. Wil je dat bij elke YouTube-video een downloadlinkje wordt toegevoegd om de video te downloaden? Geen extra websites, vreemde diensten of dubieuze downloadknoppen, gewoon een no-nonsense-script. Eenzelfde script om mp3’s te downloaden bestaat ook. Kijk je YouTube-filmpjes liever in een donker thema zodat het iets rustiger aan de ogen is en de video meer tot leven komt? Ga dan hiernaartoe. Nog eentje: hier vind je een ander handig script dat YouTube-links overal op het web vertaalt naar de titel van de video. Als je vervolgens op die link klikt, speelt de video direct in een pop-up op de pagina af, zodat je niet naar YouTube hoeft om de video te bekijken.

©PXimport

13 Google

Op Greasy Fork en andere websites bevinden zich ook behoorlijk wat scripts om Google en de verschillende diensten van de zoekgigant mee te verbeteren. We sommen er een paar op. Met dit script ga je met een klik op een afbeelding van Google Afbeeldingen, direct naar de bronpagina in plaats van eerst naar Googles eigen miniweergave.

Met dit script worden de zoekresultaten van Google niet langer opgedeeld in pagina 1, 2, et cetera, maar blijf je oneindig lang scrollen en laden de volgende pagina’s automatisch.

Met Google site: Tool heb je meer opties om de zoekresultaten te beheren. Je kunt dan op de groene links van een resultaat klikken en bijvoorbeeld alleen op dit domein zoeken of dit domein juist uitsluiten van de zoekresultaten.

Met deze extensie worden directe links toegevoegd aan de zoekresultaten en word je niet eerst langs Google geleid en pas daarna naar de daadwerkelijke website, zodat je sneller bij je doel aankomt en meer privacy hebt.

GoogleMonkeyR verandert de pagina van zoekresultaten zelfs helemaal. Je kunt het aantal kolommen op de zoekpagina instellen, resultaten nummeren, automatisch meer resultaten laden, bepaalde Google-elementen verbergen en een achtergrondkleur instellen voor de zoekresultaten. Na installatie kun je GoogleMonkeyR configureren door op het tandwiel rechtsboven op de pagina te klikken en te kiezen voor GoogleMonkeyR Settings.

14 Adware

Om het web als geheel beter te gebruiken, kun je het AntiAdware-script gebruiken, dat je online hier vindt. Daarmee worden ongewenste extra aanbiedingen op veel websites geblokkeerd. Denk bijvoorbeeld aan een extra aanbieding als je Adobe Flash of Adobe Reader downloadt. Het script heeft ondersteuning voor ongeveer veertig sites, waaronder dus Adobe maar ook bijvoorbeeld voor SourceForge.

©PXimport

Heb je een kantoorbaan en werk je ook veel thuis? Dan loop je vast wel eens tegen het probleem aan dat je een document wil afdrukken of iets belangrijks moet inscannen of kopiëren, maar dat je dan weer moet wachten tot je op kantoor bent. Waarom niet gewoon thuis alles doen? Met een betaalbare all-in-one-printer met scanfunctie doe je alles vanuit je eigen werkkamer. Handig voor iedereen in huis.

Canon PIXMA TS3750i

Met de Canon PIXMA TS3750i haal je een inkjet all-in-one-printer in huis die printen, kopiëren en scannen combineert in één apparaat. Het is een kleureninkjet met een maximale printresolutie van 4800 x 1200 dpi en A4 als grootste papierformaat. Je legt papier in één papierlade met een capaciteit van 90 vellen, waarbij de invoer handmatig gebeurt. De printer ondersteunt standaard A4-papier en print zwart tot ongeveer 7 ipm en kleur tot 4 ipm. De scanner is een flatbed-type zonder automatische documentinvoer; je legt dus losse pagina’s op de glasplaat en scant enkelzijdig.

De verbinding met je netwerk verloopt via wifi, waardoor je via een laptop maar ook een tablet of telefoon kunt printen. De printer werkt uiteraard goed met Windows- en macOS-systemen en hij is compatibel met mobiele besturingssystemen als iOS en Android.

De TS3750i gebruikt twee cartridges (zwart en kleur) maar vier inkten, waarbij de kleuren in één gecombineerde kleurcartridge zitten.

HP DeskJet 2921

De HP DeskJet 2921 is een thermische inkjet-all-in-one die speciaal bedoeld is voor thuisgebruik. Je hebt één apparaat dat kan printen, kopiëren en scannen; de scanner is een flatbedscanner zonder automatische documentinvoer. De printtechniek gebruikt twee cartridges: een zwarte en een driekleurencartridge. De kleurfunctie is beschikbaar voor zowel printen als kopiëren. De papierlade biedt ruimte aan 60 vellen normaal papier en ondersteunt DL-enveloppen.

Als draadloze all-in-one-printer kan deze DeskJet via wifi op je netwerk worden aangesloten, maar het is ook mogelijk om de printer via een usb-kabel rechtstreeks met een computer aan te verbinden. De printsnelheid bij dit model is rond de 7 pagina's in zwart en 5,5 pagina's per minuut in kleur. Automatisch dubbelzijdig afdrukken wordt niet ondersteund.

Epson Expression Home XP-2200

Bij de Epson Expression Home XP-2200 draait het om een compacte kleureninkjet waarmee je zowel kunt printen als scannen en kopiëren. De printer werkt met vier afzonderlijke inkten en heeft een maximale printresolutie van 4800 x 1200 dpi. De maximale papiermaat is A4 en de papierlade kan 50 vellen bevatten. Printen gebeurt via een handmatige papierinvoer, zonder extra lade.

De XP-2200 heeft een flatbed-scanner zonder automatische documentinvoer; dubbelzijdig scannen wordt niet automatisch ondersteund. Op printsnelheid scoort dit model tot 27 pagina’s per minuut in zwart en tot 15 pagina’s per minuut in kleur in de snelste modus. Verbinden gaat via usb of draadloos via wifi. Via een fysieke WPS-knop maak je eenvoudig verbinding.

Epson Expression Home XP-3200

De Epson Expression Home XP-3200 is een all-in-one-printer met iets meer mogelijkheden aan de bedieningskant. De inkjet is voorzien van een 1,44-inch lcd-scherm en kan dubbelzijdig printen. De maximale afdrukresolutie is 5760 x 1440 dpi. Het apparaat ondersteunt diverse papierformaten tot en met A4 en ook verschillende envelop- en fotopapierformaten accepteert de printer.

De geïntegreerde flatbed-scanner haalt een optische scanresolutie van 1200 x 2400 dpi, met 48-bit kleurdiepte bij de invoer en 24-bit bij de uitvoer. De XP-3200 gebruikt vier losse cartridges en heeft een papierlade voor standaard papier; randloos printen behoort ook tot de mogelijkheden. De printsnelheid ligt rond de 10 pagina’s per minuut in zwart en 5 in kleur. Voor verbinding met je netwerk is wifi aanwezig, plus usb voor directe koppeling. Apple AirPrint wordt ondersteund.

HP Smart Tank 5108 - Multifunctionele printer

De HP Smart Tank 5108 is een inkjet all-in-one met navulbare inkttanks in plaats van losse cartridges. De printer kan scannen en kopiëren. De papierlade heeft volgens de gegevens plaats voor 100 vellen en ondersteunt verschillende formaten, met een formaatbereik tot ongeveer 215,9 x 355,6 mm.

Bij de printspecificaties wordt een snelheid van ongeveer 12 pagina’s per minuut in zwart en 5 in kleur genoemd en automatisch dubbelzijdig afdrukken is eveneens mogelijk. De scanner is een flatbedscanner en ondersteunt enkelzijdige scans; automatische documentinvoer en automatisch dubbelzijdig scannen zijn niet aanwezig. De verbinding met netwerk gaat via wifi en je kunt de printer direct via usb aansluiten.

Sony PlayStation zendt aanstaande donderdagavond om 23:00 uur Nederlandse tijd een nieuwe State of Play-livestream uit. Martin, Simon en Jacco kijken live met je mee!

Er gingen al geruchten over de komst van de State of Play, en die blijken nu dus te kloppen. Nate the Hate, de insider die wel vaker de komst van aan games gerelateerde presentaties op voorhand lekt, claimde dat onlangs namelijk al.

Op PlayStation Blog schrijft Sony dat de presentatie meer dan zestig minuten beslaat en "nieuws, gameplay-updates en aankondigingen van gamestudio's verspreid over de wereld" bevat voor aankomende PlayStation 5-games. Daarbij zullen er zowel games van PlayStation Studios zelf als andere bedrijven de revue passeren.

Zoals gezegd wordt de State of Play op donderdag 12 februari om 23:00 uur Nederlandse tijd uitgezonden, en zal deze te zien zijn via YouTube en Twitch. De presentatie zal ook hieronder te zien zijn zodra hij begint. Uiteraard streamen we de presentatie ook op Twitch, YouTube en TikTok!

Over de precieze inhoud van de State of Play-presentatie is nog niets bekend. Wel is het opvallend dat de presentatie meer dan een uur duurt, wat het een van de langste State of Play-presentaties tot dusver maakt.

Wat is er te zien in de nieuwe State of Play?

Sony brengt dit jaar in ieder geval Saros, Marathon en Marvel's Wolverine uit, maar van die laatste is inmiddels bevestigd dat de game in de lente van dit jaar een update krijgt.

Verder werd vorige week een nieuwe Horizon-game met een focus op multiplayergameplay aangekondigd, genaamd Horizon Hunters Gathering. We weten ook dat The Last of Us-ontwikkelaar Naughty Dog aan hun nieuwe game Intergalactic: The Heretic Prophet werkt, en volgens geruchten wordt er bij PlayStation Studios ook een nieuwe God of War-game ontwikkeld met metroidvania-elementen.

Andere titels die vermoedelijk voorbijkomen zijn: Resident Evil Requiem, Helldivers 2, Marvel Tokon: Fighting Souls, Ace Combat 8, Marathon en Phantom Blade Zero.

Kunnen we dan helemaal geen verrassingen verwachten? Volgens geruchten werkt Sony Santa Monica al een tijdje aan een tweedimensionale God of War-game met Kratos' broer Deimos in de hoofdrol, en vermoed wordt dat deze eindelijk wordt aangekondigd. Sowieso zijn er veel God of War-geruchten: ook zou er gewerkt worden aan een heruitgave van de eerste drie delen en spin-off met personages Atreus in de hoofrol.