Custom-css-snippets beschikbaar - Development-iteratie #165

Onze developers hebben iteratie #165 opgeleverd. In deze iteratie hebben we de eerste versie van de nieuwe custom-css-snippets beschikbaar gemaakt.

Custom css

We hebben dinsdag een nieuwe manier om custom css te gebruiken, te beheren en te delen online gezet. Eind april kondigden we aan dat we hiervoor ideeën hadden en daarna zijn we, mede op basis van feedback uit de community, aan de slag gegaan. Nu is dan het moment daar dat we de eerste versie van wat we custom-css-snippets hebben genoemd, met jullie delen.

Iedereen die custom-css beschikbaar heeft, kan vanaf dit moment gebruik maken van de nieuwe mogelijkheden met betrekking tot custom-css-snippets. Een ‘snippet’ is een stukje css dat je kan aanmaken met een specifiek doel, bijvoorbeeld ‘marges verkleinen voor de frontpage nieuwslisting’. Deze snippets kan je aanmaken en beheren in je eigen profiel en uiteraard zelf gebruiken.

Daarnaast kan je deze snippets ook publiek beschikbaar maken. Anderen kunnen dan zoeken op deze snippets en ze voor zichzelf ook aanzetten. Daarnaast is er een mogelijkheid om verbetervoorstellen te doen via DM. Als de ‘eigenaar’ van de snippet vervolgens een wijziging doet, dan is deze meteen voor iedereen die de snippet gebruikt, effectief.

Je vindt het nieuwe onderdeel onder de instellingen in je profiel. Onder het kopje 'Layout' is een nieuw menu-item Custom CSS beschikbaar voor het gebruiken, maken en beheren van de custom-css-snippets.

Startpagina van Custom CSS

Zoeken en gebruiken van snippets

Bekijken van een CSS snippet

Dus even opgesomd waar het nu over gaat:

• Iedereen met custom css kan snippets aanmaken, gebruiken en onderhouden
• Snippets kunnen worden gedeeld
• Je kunt zoeken naar snippets van andere gebruikers en deze zelf ook gebruiken
• Je kunt de maker van een snippet voorstellen doen ter verbetering
• Het gebruik van de snippets wordt bijgehouden en is zichtbaar (aantal gebruikers)

We denken dat het beschikbaar maken van custom css op deze manier voor veel gebruikers makkelijker is dan de huidige oplossing waarbij iedereen individueel een eigen fix moet maken wanneer er iets ‘breekt’ in de gebruikte css.

Reacties (91)

[Theo]

Heeft de implementatie van deze iteratie ook iets te maken met de crach van vanochtend waarbij het forum en de frontpage een tijd (> 1 uur) onbereikbaar waren?

[ikloon]

Nee, daar is geen relatie tussen. De downtime had een andere oorzaak.

[Cyw00d]

We zijn heel benieuwd

[koku]

Onze drie mongodb servers crashten binnen een half uur van elkaar. De frontpage cache staat hier ook in, waardoor de load op mysql te hoog werd en alles uiteindelijk down ging. Een fix releasen werd daarbij ook nog eens bemoeilijkt door ons deploy script, omdat er allerlei checks faalden.

Wat gaan we doen om dit te voorkomen in de toekomst:
- Een extra cache laag op de frontpage toevoegen. Deze hadden we vroeger, maar is met een refactor verdwenen.
- Emergency deploys kunnen doen, zonder dat er allerlei checks gedaan worden. Als de site plat ligt, heeft het weinig nut om dat allemaal te doen (stukker wordt het niet )
- Betere logging/monitoring

[Reactie gewijzigd door koku op 22 juli 2024 14:57]

[DutchKevv]

Gewoon nieuwsgierig: vanwaar gebruiken jullie mongoDB voor static cache?

Is Redis ofzo daar geen betere optie voor? Thanks!

[ACM]

Met 'static' cache bedoelen we hier trouwens meer een key-value database waar we denormalisatie (gegenereerde html) opslaan, die juist niet-vluchtig bewaard hoort te worden.

We gebruikten mongodb op dat moment al. Dus weer wat extra aan de stack toevoegen had ook niet echt onze voorkeur. Normaal gesproken werkt het ook prima en is het erg snel.

Op zich zijn we wel geïnteresseerd om de boel wat te vereenvoudigen, door bijvoorbeeld mongodb en memcached samen te vervangen door Redis. Maar het is ook weer niet zo triviaal dat we dat zomaar kunnen doen; we slaan er ook onze sessies in mongodb op en die kunnen via minimaal 3 keys worden opgevraagd (sessie id, userid en de tijd).

[NaliXL]

Ook benieuwd naar de oorzaak van 3 DB server crashes in een half uur. Wat brengt 3 van deze beesten op hun knieën?

[ACM]

Ik gok dat het makkelijker is om ze alledrie samen onderuit te krijgen, dan een van de drie. Ze vormen tenslotte een cluster, dus als er iets bijzonders met de belasting gebeurt, hebben ze daar allemaal last van...

Maar helaas weten we niet goed wat er mis ging

@Kain_niaK Dit beantwoordt ook jouw vraag

[Cyw00d]

Thanks!

[Kain_niaK]

Weten jullie waarom de mongodb servers crashte?

[Jantje2000]

Ik ben benieuwd wat het gaat worden, maar ik kan me goed voorstellen dat er straks (net als bijvoorbeeld in de Android play store) 10 snippets met bijna dezelfde naam in staan, waardoor je nog steeds niet kunt vinden wat je zoekt.

[himlims_]

misschien dat gebruiker/karma een teken van valide content kan zijn?

[florisluiten]

Aangezien je al wat Karma moet hebben voordat je 't überhaupt kunt activeren, denk ik dat dat wel los zal lopen

[AW_Bos]

Ik zie er nu al twee gelijke in staan. Maar je kan natuurlijk beide users confronteren via DM, en er samen uitkomen welke er blijft bestaan, of welke kan veranderen.

[SinergyX]

https://tweakers.net/inst...eken/?keyword=henk&owner=
Zoals nu al gebeurd met de henk?

[CH4OS]

Toch blijf ik erbij dat deze functie enkel een halve oplossing is voor het daadwerkelijke probleem waardoor dit is ontstaan (de kritiek op o.a. de ankeilers en whitespace op frontpage) en Tweakers slecht reageert en acteert op feedback vanuit de community. True, je kunt niet iedereen tevreden houden, maar dat betekend niet dat totaal andere pleisters de problemen als sneeuw voor de zon laten verdwijnen. Imo blijft het gewoon een ontwerpfout en deze functie maakt het er niet makkelijker op, het verschuift de verantwoordelijkheden alleen maar en ik vraag mij af of dat iets is wat je als community moet willen.

Als je ongewenste items hebt kun je ze enkel verbergen, er komt geen nieuwe content voor in de plaats terug. Zou je dus actie items uit een van de trackers links verbergen, kan het zijn (als er veel advertorials in staan bijvoorbeeld) dat je van de 20 items, er 10 verborgen worden. Afhankelijk van hoeveel advertorials er achter elkaar staan, kan het dus best zijn dat de lijst gewoon leeg is (het is theoretisch wel mogelijk in elk geval).

Ik vraag mij daarom zeer af, of dit echt the way to go is voor Tweakers, ik denk het niet namelijk.

[Reactie gewijzigd door CH4OS op 22 juli 2024 21:04]

[crisp]

Zou je dus actie items uit een van de trackers links verbergen

Dat is iets dat nog op onze ToDo staat; dat acties en advertorials in de tracker niet onder .plans moeten vallen. Er is immers al een los Acties blokje.

[matroosoft]

Staat er ook nog op de ToDo om een afbeelding bij de snippet te kunnen voegen zodat je kunt zien wat 'ie doet? Dat zou namelijk geweldig zijn..

[crisp]

Dat staat wel op onze wishlist ja, maar of en wanneer we dat zullen toevoegen kan ik helaas niet zeggen...

Ik bedacht me net dat comments onder een snippet kunnen plaatsen ook wel een nice to have zou zijn.

[johnwoo]

In plaats van een (statische) afbeelding toevoegen, een iframe pakken waarin een preview van de echte site met die snippet geactiveerd staat
Misschien met een transform: scale(.5) om het formaat van de preview binnen de perken te houden.

[matroosoft]

Comments eronder is ook wel een goed inderdaad, ideeën genoeg nog zo te horen.

[Verwijderd]

"Ik vraag mij daarom zeer af, of dit echt the way to go is voor Tweakers, ik denk het niet namelijk."
Ik denk het wel omdat het juist de ergernissen die een aantal mensen heeft kan aanpakken.
Ik ben bijvoorbeeld van mening dat het ontwerp van Tweakers.net standaard prima is maar vond de Footer onzinnig, dus die staat nu uit.

"en Tweakers slecht reageert en acteert op feedback vanuit de community"
Ze brengen concreet functionaliteit uit waarmee dus design-zaken veranderd kunnen worden. Dat kun jij zien als "een totaal andere pleister" maar dat vind ik niet realistisch van jou, ze releasen een functionaliteit waarmee zaken waar niet iedereen het tevreden mee is veranderd kunnen worden. Dan reageren ze toch precies op feedback? Dat het misschien niet de manier is waarop jij wenst dat ze reageren op de feedback prima, maar om dan te stellen dat ze slecht reageren en slecht acteren op feedback uit de community bevreemd mij.

Dat onderstreept dan maar wat je zelf zegt: "je kunt niet iedereen tevreden houden"

[CH4OS]

Ik denk het wel omdat het juist de ergernissen die een aantal mensen heeft kan aanpakken.
Ik ben bijvoorbeeld van mening dat het ontwerp van Tweakers.net standaard prima is maar vond de Footer onzinnig, dus die staat nu uit.

Het is niet dat je daarvoor de opties of tools niet had. Met custom CSS kan/kon dat immers ook meer dan prima. In dat op zicht komt er verder niet veel spannends nieuws erbij.

Ze brengen concreet functionaliteit uit waarmee dus design-zaken veranderd kunnen worden. Dat kun jij zien als "een totaal andere pleister" maar dat vind ik niet realistisch van jou, ze releasen een functionaliteit waarmee zaken waar niet iedereen het tevreden mee is veranderd kunnen worden.

Je hebt het topic waaruit dit is ontstaan niet gelezen, er was niet zomaar feedback op de aanpassingen van de FP; velen hebben mee gediscussieerd en er zijn honderden reacties aan geweid. Het probleem is dus niet alleen maar 1 iemand die 'een keertje' ergens last van heeft; er is een grote groep mensen die problemen hebben en nu gewezen worden op een halve lapmiddel in plaats van dat er meegedacht wordt aan een echte (Tweakers waardige) oplossing.

Dat het misschien niet de manier is waarop jij wenst dat ze reageren op de feedback prima, maar om dan te stellen dat ze slecht reageren en slecht acteren op feedback uit de community bevreemd mij.

Kijk maar goed rond in de topics van o.a. stoute bugs en het feature request topic. Daarnaast zijn er ook andere zaken die meespelen in mijn menin hoe er gereageerd wordt op feedback, dus het is wat algemeen genomen, niet zozeer voor deze functie specifiek.

[Pwuts]

Ik wil deze feature graag Henken

[Jivebunny]

Hier heb je een henk em knop voor GoT forum: https://tweakers.net/inst...omcss/snippets/bekijk/60/

[Reactie gewijzigd door Jivebunny op 22 juli 2024 21:04]

[Pwuts]

Haha die had ik al, vandaar m'n opmerking; ik vind dit een toffe feature, maar deze post heeft geen henk-knop.

[Jivebunny]

Ah ja, deze natuurlijk niet haha.

[Zeror]

De officiele Ik Henk 'm knop hier:
https://tweakers.net/inst...omcss/snippets/bekijk/60/

[Pwuts]

Nice, die had ik al met de oude custom CSS feature, maar dan zonder de Henks in de filterbalk.
Ik kan nog geen snippet vinden met het complete Henk-thema, met een Henk ipv Tweakers-logo in de navbar etc., misschien moet ik die zelf maar even fabriceren. Zal blij zijn als ik van de losse CSS af ben want het is echt een zootje momenteel bij mij

[WhatsappHack]

Nice Alleen de box met custom CSS was toch eerst scrollable? Nu staan alle regels er, dus om naar de onderkant van de pagina te komen moet ik eerst voorbij pakweg 1800 regels aan custom CSS scrollen. (Op mobiel is dat wat minder prettig als de browser geen scrollbar heeft ) Kan het mis hebben hoor, kom er immers niet vaak , maar zou zweren dat dat voorheen anders was

[Reactie gewijzigd door WhatsappHack op 22 juli 2024 21:04]

[ACM]

Het wordt nu met een code-highlighter gepresenteerd. Maar zou zomaar kunnen dat daardoor de maximale hoogte niet meer beperkt is

[crisp]

Dat is inderdaad de nieuwe editor waarbij instelbaar is of je wel of geen verticale scrolling wilt. Dit leek ons de meest gebruiksvriendelijke manier (met automatische textbox-vergroting as-you-type). We horen het graag als je liever een andere behaviour wilt, maar willen dat dan natuurlijk wel graag toetsen aan de wensen van anderen. Ik zou dus willen vragen of je daar een topic voor wilt maken in Mooi Features

[crtxz]

Nog even 4 jaartjes sparen dus

[Punkrocker]

Een lijstje met snippets, vrij toegankelijk voor iedereen, zou fijn zijn.
Dan weet iedereen of er voor hem/haar nuttige snippets bij staan. Dat voorkomt het spenderen van een berg karma aan iets wat achteraf niet veel of misschien helemaal niet gebruikt gaat worden...

[crtxz]

Misschien een idee om de top 10 snippets toegankelijk te maken voor iedereen. en dat je snippets alleen kan aanmaken mits je de 4k karma hebt gespendeerd

[LA-384]

Ik geloof dat veel ook her en der wel op het forum staat. Daarbij heb je niet zo heel veel aan een lijst imo. Bijna elk element is wel aan te passen of te verwijderen, ook dingen waar geen "snippet" van is.

Zover ik weet spendeer je er ook geen karma aan, maar komt de feature beschikbaar nadat je een bepaalde hoeveelheid (4096?) karmapunten hebt behaald. Voorheen was het wel een abbo dacht ik, maar in mijn geval iig niet meer.

[Plainside]

Yay! Die vind ik mooi, benieuwd wie de uitdaging aangaat om een dark theme snippet te maken

nvm. ze bestaan al haha

[Reactie gewijzigd door Plainside op 22 juli 2024 21:04]

[Aganim]

Haha, wilde al zeggen, draai zelf al jaren een dark theme. Overigens ook beschikbaar voor de liefhebbers: https://tweakers.net/inst...omcss/snippets/bekijk/26/

[RVervuurt]

Dat wil ik geen dark-mode noemen, maar meer een shadow mode.

[Plainside]

Klopt, maar gebruik hem wel, er is nog een andere maar die was mij net wat te donker haha.

[Aganim]

Mja, 't is net welk naampje je het wilt geven. Helemaal donker vind ik persoonlijk ook weer niet echt je-van-het en ik heb nooit als doel genomen om boel volledig te verbouwen qua style. Voor wie het niet donker genoeg kan zullen er ongetwijfeld alternatieven zijn. Helemaal prima natuurlijk, voor ieder wat wils.

[EotT]

Dit is wel een "echte" dark mode: https://tweakers.net/inst...mcss/snippets/bekijk/236/
Disclaimer: ik heb deze gemaakt.

[Reactie gewijzigd door EotT op 22 juli 2024 21:04]

[RVervuurt]

Cool en mèt icoontjes voor de tekstbewerker èn kleurtjes bij de artikelen op de voorpagina.

[DJMaze]

Ik ga die van jou maar eens naast die van mij leggen om te kijken wat ik nog mis
https://tweakers.net/inst...ss/snippets/wijzigen/340/

[Reactie gewijzigd door DJMaze op 22 juli 2024 21:04]

[418O2]

Ik zou het zelf erg waarderen als ik via de Custom CSS een aantal users zou kunnen muten,

div[data-owner-id="1234"] {
opacity:0.1:
}
div[data-owner-id="1234"]:hover {
opacity:1;
}
dit zou moeten werken, maar doet het niet. Er zijn een aantal gebruikers die stelselmatig alleen maar lopen te zuigen op zowel de FP als het forum, die ik graag wat minder zou zien

[Reactie gewijzigd door 418O2 op 22 juli 2024 21:04]

[RVervuurt]

Werkt prima hier: klik. Maar je kan 'm natuurlijk niet als snippet aanbieden, gezien het data-owner-id anders is per gebruiker.

[Reactie gewijzigd door RVervuurt op 22 juli 2024 21:04]

[418O2]

Als ik hem als custom css toevoeg gebeurt er niets

[RVervuurt]

Probeer het volgende eens:

div[data-owner-id="407403"] {
opacity: 0.1;
}
div[data-owner-id="407403"]:hover {
opacity: 1;
}

Dit zou de post boven die van jou (van WhatsappHack) doorzichtig moeten maken.
Edit: je had na "0.1" een dubbelepunt, ipv een puntkomma, dus daar zou het door kunnen komen.

[Reactie gewijzigd door RVervuurt op 22 juli 2024 21:04]

[418O2]

Doh! Zal maar niet zeggen waar ik mijn geld mee verdien. Moet er nog even wat mee spelen, maar dit is wel fijn zo

[RVervuurt]

Ik GOK, als ik zo even naar je profiel kijk, Frontend Webdeveloper?

[Maaark]

Zijn custom css regels die de advertenties weghalen toegestaan?

[crisp]

nee

[Maaark]

Nee als in niet publiekelijk? Of ook niet voor je zelf?

[crisp]

Beide niet, daar hebben we abonnementen voor

[Maaark]

Ok, dan verwijder ik 'm

[crisp]

We maken daarbij wel onderscheid tussen 'banners' en zaken als de 'it-banen' en 'events'-blokjes op de FP. Die laatste 2 mag je best verbergen.

[lvdgraaff]

Is er rekening mee gehouden dat CSS behoorlijk misbruikt kan worden voor tracking van gebruikers? Staat tweakers dan in voor de code of moet de gebruiker dat zelf kunnen beoordelen?
CSS is niet helemaal zo onschuldig als het lijkt...

[ACM]

Ja, de mogelijkheid voor externe urls is heel erg beperkt; in principe kan je niks van buiten ons domein linken/laden.

Zijn er dan volgens jou nog andere opties?

[lvdgraaff]

Nice, dat zal afhankelijk van de implementatie de meeste ongein wat betreft tracking tegenhouden. Tenzij je natuurlijk een manier vind om met een GET request naar tweakers.net informatie naar jezelf toe te sturen. DM via get mogelijk?

Het enige wat ik dan zo snel nog kan verzinnen - en dat is far fetched - is dat bepaalde User actions worden uitgelokt, door bijvoorbeeld buttons te vermommen. Bijvoorbeeld door de ‘ik abboneer me’ knop het uitlijk van de ‘ik accepteer de cookies’ knop te geven. Ok, misschien geen goed voorbeeld, want daarna is natuurlijk meer actie van de gebruiker nodig. Maar het toekennen van rechten, is dat een knop? Of plusjes geven op een forum post?

Kortom, niet al te schadelijk maar vereist mogelijk wel monitoring. In ieder geval goed om te weten dat er over wordt nagedacht. Ik ga snel karma sparen om de functie ook te kunnen gebruiken.

[crisp]

In principe gaan alle acties waarbij data wordt aangepast (non-idempotent) via POST. Daarbij is doorgaans ook een CSRF-token benodigd