Onze ontwikkelaars hebben development-iteratie #118 opgeleverd. De focus lag in deze sprint op het implementeren van een nieuwe editor in het redactionele cms en het refactoren van het weergaveframework. Daarnaast hebben we een inline imageviewer gebouwd.
Inline imageviewer
Eerder dit jaar hebben we een nieuwe lay-out geïntroduceerd voor onze redactionele artikelen. De belangrijkste verandering is dat reviews en .plans meer ruimte in de breedte kunnen benutten om bijvoorbeeld afbeeldingen op een groter formaat te presenteren.
Sinds de oplevering van de initiële versie van de nieuwe lay-out werken we iteratief aan het verbeteren van elementen, zodat ze gebruik kunnen maken van de extra ruimte. In iteratie #118 hebben we een inline imageviewer gemaakt waarmee een galerij van afbeeldingen in het artikel geplaatst kan worden en je een afbeelding op middelgroot formaat kunt bekijken zonder het zicht op de review te verliezen. Door op de grote afbeelding te klikken kun je zoals vanouds de afbeelding in een lightbox op de maximale grootte van de viewport bekijken.
De inline imageviewer is opgeleverd als een mvp en kun je hieronder in werking zien. We zijn benieuwd naar je feedback!
:strip_exif()/i/2001705859.jpeg?f=imagearticlefull)
Thumbor
In de afgelopen maand heeft Development gewerkt aan de implementatie van Thumbor, een zelf te hosten service die automatisch afbeeldingen verkleint en/of uitsnijdt aan de hand van parameters in de url. Het resultaat daarvan wordt in een cache bewaard op onze Ceph-storage. Onze loadbalancers zorgen voor https- en http/2-verbindingen en gebruiken ook nog eens hun 'reverse proxy cache' voor de meestgebruikte afbeeldingen om het nóg sneller te maken.
Thumbor maakt het voor ons veel eenvoudiger om afbeeldingen in verschillende formaten aan te bieden, zodat we daar flexibeler mee om kunnen gaan. Bovendien hebben we Thumbor ingericht om afbeeldingen automatisch te optimaliseren, waardoor er minder data over de lijn hoeft en de site nog iets sneller is geworden. Sinds vandaag worden de meeste thumbnails en verkleinde afbeeldingen, bijvoorbeeld die in de imageviewer hierboven, via Thumbor geserveerd.
Refactor weergaveframework
Tweakers bestaat inmiddels ruim negentien jaar en in die tijd hebben we nogal wat functionaliteit aan het oorspronkelijke, eenvoudige concept toegevoegd. Het onvermijdelijke gevolg daarvan is dat er nogal wat legacycode in onze codebase leeft. Zo zijn er op dit moment vier methodes om de uiteindelijke weergave aan te roepen, die hun origine kennen in verschillende fasen in de ontwikkeling van Tweakers. De nieuwste versie is nog ontwikkeld in de tijd dat we overstapten van losse php-code die html genereerde, naar Symfony's Controller-structuur en php-templates. Later is dat aangevuld om ook de output van Twig-templates op te kunnen vangen.
De weergavemethodes zijn indertijd wel zo aangepast dat ze uiteindelijk allemaal hetzelfde eindpunt bereiken, waar de pagina-inhoud tussen het framework van header en footer wordt geplaatst. Het is desondanks onhandig om de vier verschillende ingangen te onderhouden, die bovendien hier en daar kleine verschillen in gedrag hebben.
Onze devvers zijn momenteel bezig met een volledig nieuwe versie, die Twig als uitgangspunt heeft. De bestaande Twig-templates worden daarmee gelijk helemaal netjes in Twig verwerkt, en niet meer achteraf opgevangen en via eigen php-code in het html-framework geplaatst. Helaas is het te veel werk om ook de honderden php-templates om te zetten naar Twig, waardoor we nog wel een ingang vanuit de oude php-templates naar de nieuwe Twig-versie nodig hebben. Dat lijkt misschien een 'lood om oud ijzer'-situatie, maar het betekent ook dat we de drie oudste versies kunnen verwijderen en bovendien een groter deel van de html-generatie, afgescheiden van overige php-code, in Twig-templates gebeurt.
Betaalmethode op 'n.v.t.' bij gratis advertenties
In de .plan over iteratie #117 kozen jullie als community-pick het automatisch selecteren van de betaalmethode 'n.v.t.' bij het plaatsen van gratis advertenties. We hebben deze functie gebouwd, zodat je nu niet meer de curieuze verplichting hebt om een betaalmethode in te vullen in een advertentie van een product dat je gratis weggeeft.
En verder hebben we...
- een opmaakfout verholpen in reviewpagina's die beginnen met een tabel;
- ervoor gezorgd dat de beoordelingloze 'hands-on'-gebruikersreviews de gemiddelde beoordelingen van een product niet meer verstoren.
/i/2001558181.png?f=fpa)
:strip_icc():strip_exif()/u/517503/crop602112b4ac9cb_cropped.jpeg?f=community){kind=small}
Maar ziet er verder erg netjes uit. Ben blij dat je op 3 manieren de imageviewer kan sluiten: met de X knop, de 'escape' toets indrukken of buiten de viewer klikken met de muis; dat werkt perfect zoals 't hoort!/u/271228/crop66d5c43884a5a_cropped.png?f=community){kind=small}
/u/472627/crop5c83fe498b36e_cropped.png?f=community){kind=small}
:strip_icc():strip_exif()/u/269918/Cerberus60x60.jpg?f=community){kind=small}
:strip_exif()/u/3333/pumpkin_avatar.gif?f=community){kind=avatar}
:strip_icc():strip_exif()/u/92368/crop67f122a4021bc.jpg?f=community){kind=small}
/u/1/femme.png?f=community){kind=small}
/u/1830/acm.png?f=community){kind=small}
:strip_icc():strip_exif()/u/12097/crop6691a4b62edcb_cropped.jpg?f=community){kind=small}
:strip_exif()/u/165291/Beholder60.gif?f=community){kind=small}
/u/241825/Avatar_for_terrorist.png?f=community){kind=avatar}
/u/339914/crop614f2ddc29025.png?f=community){kind=small}
/u/26697/crop5f7ee7bf67604_cropped.png?f=community){kind=small}
/u/393742/app-ableton.png?f=community){kind=small}
/u/246423/crop5979eb9e5c60f_cropped.png?f=community){kind=small}
:strip_icc():strip_exif()/u/508534/crop57a04f58f13f4_cropped.jpeg?f=community){kind=small}
:strip_icc():strip_exif()/u/333229/Logo%2520RFixIT%2520Tweakers.jpg?f=community){kind=small}