Tweaklog integratie met Tweakers via Greasemonkey nl

Door remyblok op zondag 6 december 2015 17:30 - Reacties (13)
Categorie: General, Views: 3.166

Het initiatief van deathgrunt om is wat aan de styling van de Tweakblogs te doen vind ik zeer goed! Ik ben het met hem eens dat de Tweakblogs een beetje out dated beginnen te raken. Terwijl Tweakers er toch behoorlijk gelikt uit ziet. Echter ben ik het niet helemaal eens met zijn aanpak. Door er een site naast te zetten wordt het verschil tussen T.net en tweakblogs enkel groter, in plaats van dat het weer een first class onderdeel van Tweakers wordt.

Geďnspireerd door zijn blog ben ik een andere route ingeslagen om uiteindelijk tot hetzelfde resultaat te komen. Ik heb een Grease/Tampermonkey script geschreven wat voor de integratie zorgt. Dit draait dus volledig client side. Hierdoor heb ik volledige toegang tot de Tweakers site en kan de integratie zo dicht mogelijk om de rest van Tweakers inhaken.

Beide methodes hebben zo hun voor en nadelen. Want zo kan mijn oplossing niet losstaand gebruikt worden. Tampermonkey voor Android bestaat, echter iOS en Window Phone gebruikers vallen buiten de boot. Maar voor dagelijks gebruik op de Desktop vind ik juiste de integratie belangrijker.

Hoe dan

Voor Chromium based browsers moet je Tampermonkey installeren. Voor de FireFox gebruikers is er Greasemonkey. Beide add-ons zorgen dat het mogelijk is om user-script te draaien: stukken JavaScript die het gebruik van de site kunnen beďnvloeden.

Daarna kan je het Tweakblog Tweakers integration script installeren. Vanaf nu zal het script automatisch actief zijn en zorgen voor de Tweakblog integratie.

De tweakblogs zijn vanaf dan te bereiken op http://tweakers.net/tweakblogs.

Hoe ziet Tweakblog er geďntegreerd uit dan?

Allereerst natuurlijk een mooie overview pagina van alle blogs die nieuw zijn:
http://static.tweakers.net/ext/f/2z3pWw2tTKn1j8v8f0WKdeAn/full.png
De populaire blogs worden gepikt van de frontpage. Zie ook dat er in de menu-balk een Tweakblog link bij is gekomen. Niet langer verstopt in een submenu.

Dan kan je natuurlijk doorklikken naar een bepaalde blog:
http://static.tweakers.net/ext/f/VcKxBlFzWACkOwLdalLiiEH8/full.png
Ik heb de banner behouden als persoonlijke indicatie van het blog.

Natuurlijk moet je ook kunnen reageren op een blog post. Dus ook de reacties zijn er, en je kunt direct een reactie plaatsen:
http://static.tweakers.net/ext/f/waxZ9m9VuuikDyz5SEsHau1i/full.png

Als laatste kan je ook doorklikken naar de overzichtspagina's die vanuit de rechter kolom benaderbaar zijn.
http://static.tweakers.net/ext/f/vQrOXafVzBMrEmhFkgEJuX3W/full.png

En ook op een mobiel is het nu goed te doen:
http://static.tweakers.net/ext/f/oAlzO9ZWlF7i0kODHmnA82m0/full.png

Search integratie

Wat deathgrunt dan wel weer heeft is seach integratie. Dat is hier nog niet het geval. Misschien bij veel animo dat ik ook daar nog voor zal zorgen!

Technische details

Tweakers rendert ook bij 404 pagina's alle menu's, tracker, footer etc. mee. Daar heb ik handig gebruik van gemaakt. Het script kijkt of the url met http://tweakers.net/tweakblog begint en gaat dan aan het werkt. Zonder script zal je een 404 page not found krijgen. Maar het script haakt eropin en vervangt de hele inhoud van de pagina.

Doordat Greasemonkey geen last heeft van cross-origin request perikelen, kan ik vanuit JavaScript de rauwe HTML van de blog ophalen, deze wordt dan (met wat veranderingen) als HTML aan de 404-pagina toegevoegd.

Voor het overzicht gebruik ik de RSS-feed van de blogs. Hierin staat 40 blogs opgesomd, waardoor het overzicht wat langer is dan de 15 die op de standaard tweakblog overzichtspagina staan.

Mocht Tweakers ooit deze URLs gaan gebruiken voor echte content, dan heeft het script ook nog een fail safe zodat de echte content niet wordt overschreven.

Conclusie

Na een paar avondjes knutselen is de integratie tussen de Tweakblogs en Tweakers behoorlijk goed gelukt! Alle grote features die je zou verwachten zitten erin.

Ik hoor graag wat jullie er van vinden!

Tijdens het schrijven van dit blog en het maken van de screenshots ben ik nog een aantal issues tegen gekomen. Het is dus helaas niet bug vrij (niet dat ik dat had verwacht). Laat dus weten als e tegen issues aanloopt, dan probeer ik die asap op te lossen.

tweakers - nomineer voor blog van de maand

Volgende: DIY USB Stopcontact 08-'15 DIY USB Stopcontact

Reacties


Door Tweakers user Blokker_1999, zondag 6 december 2015 18:51

Leuk om zien dat er vanuit de bloggers een beweging ontstaat om tweakblogs terug was meet up-to-date te maken. Mag alleen maar hopen dat een developer van Tweakers zelf er ook eens wat tijd in kan en mag steken.

Door Tweakers user deathgrunt, zondag 6 december 2015 18:58

Mooie "alternatieve" aanpak!

Toevallig was / ben ik zelf ook bezig de Tweakblogs gewoon binnen het domein van Tweakers zelf te halen (server-side, zodat de eindgebruikers niets hoeft te installeren).

Via een omweg heb ik volledige toegang tot de volledige site weten te krijgen en kan ik dus ook in container-x gewoon een Tweakblog inladen (en updaten, aanpassen, etc...).

Maar ik weet nog niet of ik het ga afronden; uiteindelijk blijven het noodoplossingen... mijn intentie was "om te laten zien dat het ook anders kan" (de vormgeving / usability) en niet direct om een kant-en-klaar iets neer te zetten.

Hopelijk wordt er naar ons geluisterd :p

Door Tweakers user masauri, zondag 6 december 2015 19:40

deathgrunt schreef op zondag 06 december 2015 @ 18:58:
Hopelijk wordt er naar ons geluisterd :p
Ik mag het ook hopen, dit zijn simpele dingen die al véél verschil maken! _/-\o_

Door Tweakers user deathgrunt, zondag 6 december 2015 19:48

Ook leuk, jouw blog om de blogs aan te passen in een blog die de blogs aanpast...

https://psbe.co/d6SQc

(zelfs de smileys worden omgezet!)

Door Tweakers user WeeJeWel, zondag 6 december 2015 20:48

Wauw, heel mooi werk!

Door Tweakers user runelaenen, zondag 6 december 2015 21:41

Knap gedaan :D Na jaren ga ik Greasemonkey nog maar eens installeren :p
Edit:
Werkt goed, maar er moet wel een / achter de url staan. De link in je post werk bijvoorbeeld niet.
Dus
http://tweakers.net/tweakblogs/ werkt wel
http://tweakers.net/tweakblogs werkt niet

[Reactie gewijzigd op zondag 6 december 2015 21:45]


Door Tweakers user Ryber, zondag 6 december 2015 22:35

Dit is echt een top toevoeging! Lijkt net native haha. Deze ga ik zeker gebruiken :)

Door Tweakers user himlims_, maandag 7 december 2015 15:00

tof; maar waarom doet t.net dit zelf niet?!?!?

Door Tweakers user YellowOnline, maandag 7 december 2015 20:17

De ideeën zijn goed, maar ik zou er niet teveel tijd investeren om de eenvoudige reden dat T.net dat zélf moet doen. De belangrijkste features die we nodig hebben zijn trouwens moeilijk client-side te doen, bv. melden van reacties op je eigen reactie op een Tweakblog (dus niet reacties op je post) en integratie in het profiel op T.net dat verder gaat dan een linkje.


Ik ben trouwens jaren terug eens aan een WYSIWIG text editor voor Tweakblogs begonnen. Een projectje dat ik misschien eens vanonder het stof moet halen. Nou ja, ik zou opnieuw beginnen eigenlijk, maar met een paar jaar extra ervaring :)

Door Tweakers user remyblok, maandag 7 december 2015 22:07

Blokker_1999 schreef op zondag 06 december 2015 @ 18:51:
Mag alleen maar hopen dat een developer van Tweakers zelf er ook eens wat tijd in kan en mag steken.
deathgrunt schreef op zondag 06 december 2015 @ 18:58:
Hopelijk wordt er naar ons geluisterd :p
himlims_ schreef op maandag 07 december 2015 @ 15:00:
tof; maar waarom doet t.net dit zelf niet?!?!?
Ik was een mooie reactie op jullie posts aan het schrijven, maar het werdt zo'n uigebreid verhaal dat het z'n eigen blog verdient. Eendeels snap ik T.Net namelijk wel en anderdeels verdienen ze wel de comunity of the year award en tweakblogs is daar een (prominent) onderdeel van.

Ik ga er zeker niet heel veel tijd in steken. Dit soort hobby projectjes zijn in een aantal avonden af te maken en leveren op deze manier leuke reracties op. Ik beleef er lol aan, leer nog is wat extra JS kunsten.

Of het echter een lang leven beschoren is.... De tijd zal het leren. :)

Door Tweakers user remyblok, maandag 7 december 2015 22:23

runelaenen schreef op zondag 06 december 2015 @ 21:41:
Knap gedaan :D Na jaren ga ik Greasemonkey nog maar eens installeren :p
Edit:
Werkt goed, maar er moet wel een / achter de url staan. De link in je post werk bijvoorbeeld niet.
Dus
http://tweakers.net/tweakblogs/ werkt wel
http://tweakers.net/tweakblogs werkt niet
Oeps! Fixed :D

Door Tweakers user deathgrunt, dinsdag 8 december 2015 01:10

YellowOnline schreef op maandag 07 december 2015 @ 20:17:
moeilijk client-side te doen, bv. melden van reacties op je eigen reactie op een Tweakblog (dus niet reacties op je post) en integratie in het profiel op T.net dat verder gaat dan een linkje.
...het laten melden van een reactie op je reactie is eenvoudig - en heb ik zelfs al aan de praat (maanden terug).

Ik laad gewoon een tweakblog in (1x per uur, via een cronjob) en als het aantal reacties anders is dan de meest recente telling OF als er een reactie op mijn eigen reactie is, dan knal ik via de mail een pushbericht naar mezelf;

Op die manier weet ik on-the-fly (okay, 1x per uur...) of er nieuwe reacties op mijn blog zijn EN / OF er iemand op mijzelf gereageerd heeft.

Ook een WYSIWYG-editor heb ik ooit gemaakt (gewoon via http://ckeditor.com/) en via een Wordpress-funnel naar Tweakblogs geschoten (je edit je blog in Wordpress en maakt het zichtbaar via Tweakblogs).

Maar inderdaad; het is zinloose ge-code, omdat er toch niets mee gebeurd...

...zie mijn Timemachine; leuk concept - totaal zinloos...

Door Tweakers user marti-n, zondag 27 december 2015 12:43

De tweakblog van Mux is helaas voor mij niet te lezen:
http://tweakers.net/tweak...rs-frezen-+-eindresultaat
Geeft dit als pagina terug:
http://i.imgur.com/zzz9AUl.png

Heb het ook al zonder custom css geprobeerd, maar dat mocht ook niet baten.

Reageren is niet meer mogelijk