CKEditor- en Pricewatch-update - Development-iteratie #122

Onze developers hebben de ontwikkeling van iteratie #122 voltooid. Als uitzondering op de regel heeft deze sprint drie weken geduurd in plaats van twee. Dit komt doordat het developmentteam en het productteam van de feestdagen gingen genieten. De focus lag in deze sprint opnieuw op het refactoren van het weergaveframework en het releasen van CK-editor in het redactionele cms. Daarnaast hebben we diverse kleine verbeteringen en bugfixes doorgevoerd.

CKEditor

Vorig jaar hebben we diverse wijzigingen gedaan aan de opbouw en presentatie van artikelen. Om dit optimaal tot zijn recht te laten komen, wilden we de redactie voorzien van een editor in het CMS waarmee veel beter te zien is hoe het artikel eruit gaat zien. Daarvoor gebruikten we al TinyMCE, maar dat was te beperkt, vooral bij complexe elementen.

Zo wilden we het mogelijk maken dat een redacteur bij het invoegen van herbruikbare elementen, zoals een video en scorekaart, direct ziet hoe dat eruitziet, maar dan wel zonder dat de daarvoor benodigde html daadwerkelijk in de database moet worden opgeslagen. Als we wel die html zouden opslaan, wordt een upgrade van de videoplayer of verandering van de scores in de scorekaart een stuk lastiger.

Al met al kwamen we daarbij uit op CK-editor. De ondersteuning voor 'widgets' in CK-editor sluit precies aan bij bovenstaande wens. We kunnen nu bijvoorbeeld <twk-video data-id=12345> in een artikel gebruiken. Tijdens het bewerken in een artikel wordt dat gepresenteerd als video, zonder echt speelbaar te zijn, en tijdens het weergeven van het artikel verschijnt daadwerkelijk het bijbehorende iframe met de relevante video.

Daarnaast is de text area nu net zo breed als het contentvlak van bijvoorbeeld een review of een .plan. Hiermee kan een redacteur makkelijker wisselen tussen de verschillende uitlijningsmogelijkheden die er zijn. Het is nu een betere match op de weergave van het uiteindelijke artikel.

Pricewatch

In de Pricewatch maken we al jaren gebruik van de gegevens van een derde partij, maar omdat we graag zo correct mogelijk willen zijn, worden alle producten nog gecontroleerd. Om het aantal beschikbare producten in de Pricewatch sneller te vergroten, zullen we bij minder belangrijke categorieën niet langer een controle doen, mits de belangrijkste specificaties juist zijn.

De simpele importtool die we voor dit principe bij kabels gebruikten, is daarom verbeterd, zodat we ook automatisch verschillende uitvoeringen onder één product kunnen groeperen. De eerste volgende categorie die we automatisch zullen gaan toevoegen is speakers. Voor de populaire categorieën blijft het productcontentteam uiteraard gewoon met de hand alles controleren.

Community-pick

Bij de vorige iteratie hebben konden jullie stemmen op jullie favoriete feature: de topicacties ook onderaan weergeven, zodat je hiervoor niet helemaal omhoog hoeft te scrollen. Dit is uiteraard in deze sprint gebouwd.

Zoals enige tweakers al hebben opgemerkt, is het lijstje van de community-pick redelijk uitgedund. Dit komt doordat de voorgestelde features in MF te groot zijn om binnen één sprint te worden gerealiseerd. Daarom gaan we ook bekijken of we behalve aan de kleinere features aandacht kunnen besteden aan de wat grotere. De capaciteit die beschikbaar is voor het maken van de community-pick van een aantal sprints, wordt dan bij elkaar opgeteld en verspreid over verschillende sprints: Community-pick XL. In de komende twee weken bepalen we welke features dit zijn en werken we dat verder uit. In de releasenotes van iteratie #123 gaan we hier verder op in.

Overige fixes

• De verduidelijking van advertorialpagina's (bovenaan) was stuk, hierdoor was minder duidelijk dat het om een gesponsorde pagina ging.
• Buiten het forum worden de usericons nu via Thumbor geladen. Daardoor hebben ze de goede maat, zoals hieronder naast de reacties, en zijn ze extra geoptimaliseerd om zo min mogelijk overbodige bytes over de lijn te gooien. We onderzoeken nog hoe we dit het beste in de oude forumcode kunnen integreren.
• De responsive weergave van de header en navigatie op de Tweakers Awards-pagina's is verbeterd.
• YouTube-video's kunnen nu ook over de volledige breedte van reviews en .plans worden getoond.
• Zoals eerder aangekondigd hebben we Private Storage definitief gesloten. De gebruikers hebben in de afgelopen maand de tijd gehad om hun bestanden veilig te stellen. De sluiting van Private Storage heeft geen gevolgen voor het Fotoalbum.

Reacties (20)

[AW_Bos]

Is er geen mooie screenshot van jullie editor waarin jullie met widgets en content iets samenstellen? Zou toch wel leuk in het artikel staan.

[Bensimpel]

Inderdaad, ben ook erg benieuwd hierin

[Sharkoon]

of laat eens iets van de backoffice zien hoe jullie dat doen, toch geen geheim?

[cadsite]

goh...

[Anoniem: 372172]

Geweldig

[Morress]

Security thru obscurity

[Sharkoon]

bij het gebruik van rich text editors zie ik onderstaande vaak fout gaan.

• tekst&nbsp ;tekst
• <strong><img ...></strong>

Voorbeeld vanuit het huidige artikel:
https://ibb.co/gCOynG

[crisp]

Dat is een bekend probleem met wysiwyg editors (TInyMCE had het probleem ook). Vziw heeft dit te maken met hoe (bepaalde) browsers contenteditable hebben geimplementeerd. Er is misschien wel omheen te werken, maar een 100% oplossing bestaat volgens mij niet; dan hadden de makers van de editors het wel al gefixed...

[Tielenaar]

Wellicht doordat er even 2 spaties stonden tijdens het typen. Bij meerdere spaties in de editor krijg je vaak een nbsp, zodat dit in de editor hetzelfde eruitziet als in de frontend. Als je er dan weer eentje weghaalt blijft de verkeerde staan.
Wellicht op te lossen door beide spaties weg te backspacen en er weer eentje toe te voegen.

[crisp]

Het komt best wel veel voor (14 in dit artikel), dus ik denk dat er meerdere scenario's zijn. En wellicht dat de gebruikte browser ook van invloed is.

Ik heb ze nu in dit artikel even met de hand weggehaald

[Reactie gewijzigd door crisp op 24 juli 2024 11:23]

[Sharkoon]

misschien copy/paste dat het daardoor fout gaat..

[DJMaze]

Het is heel logisch dat er een &nbsp; komt te staan.
Je typt 2 spaties en HTML kent eigenlijk helemaal niet 2 spaties (wordt visueel getrimd).
Dus moet er wel een &nbsp; staan om visueel 2 spaties te tonen (dat wilde je immers omdat je dat typte).
Nou kan je "automagisch" regex('/([^\s])&nbsp;([^\s])/', '$1 $2') doen, maar.... hoe weet je of iemand expres dit typte of niet?
Kan namelijk best zijn dat je expres een &nbsp; typt zodat er geen woordafbreking optreed tussen twee woorden.
Nou is het natuurlijk in 99/100 gevallen per ongeluk, maar toch...
Uitzonderingen bevestigen de regel!

In mijn eigen wysiwyg met TAL ondersteuning dacht ik eerst ook: weet je wat regex('/( |&nbsp;)+/', ' ')
Maar ja, dat gaat natuurlijk weer fout in een PRE element.

[Reactie gewijzigd door DJMaze op 24 juli 2024 11:23]

[Anoniem: 372172]

Ziet er weer gaaf uit allemaal

[HKLM_]

@Femme Wanneer wordt het responsive maken van alle pagina's eens verder opgepakt. Er zijn nog een aantal pagina's die echt een kriem zijn om op een mobile device te kunnen bezoeken.

Het zal met tijd te maken hebben maar die het goed of doe het niet

[Reactie gewijzigd door HKLM_ op 24 juli 2024 11:23]

[Jolke]

Goede verbeteringen allemaal!

[Kiswum]

Kan het zijn dat het aantal views van een topic niet alleen bovenin te zien zijn, maar nu ook onderaan de pagina? Ik kan me niet herinneren dat ik dit eerder heb gezien.

Het zijn mooie verbeteringen geweest, ik ben ook wel benieuwd naar de nieuwe editor tool voor de redacteuren. Is dit ook beschikbaar voor de userreviewers?

[CH4OS]

Gaat de CK-editor verder doorgetrokken worden? Bijvoorbeeld naar de reacties voor de frontpage of op het forum?

[geppie99]

Eerder dit jaar? 2018 is nog maar 2 dagen jong.

[Femme]

Scherp opgemerkt. Sven heeft dit artikel voor de jaarwisseling geschreven . Ik heb het aangepast.

[Kecin]

Goed werk weer team!
Nog een kleine schaamteloze plug, ik zou deze functie wat hoger op het MF lijstje willen zien. Geef even een duimpje op de startpost als jij dat ook wil:
Request: fotoopslag beter beheerbaar maken (via o.a. mobiel)