Testresultaten op specificatietab - Development-iteratie #86

Onze developers hebben iteratie #86 vrijgegeven. In de afgelopen drie weken lag de aandacht bij het voltooien van de nieuwe BenchDB. Helaas was er deze keer minder tijd beschikbaar dan gebruikelijk.

Nieuwe BenchDB

Twee iteraties geleden hebben we een bètaversie van de nieuwe BenchDB live gezet. De BenchDB is een tool waarmee de redactie testresultaten van producten kan beheren en grafieken van resultaten kan genereren voor gebruik in artikelen. Nadat we in de vorige iteratie hard hebben gewerkt aan het bugvrij maken van de nieuwe BenchDB, konden er in iteratie #86 weer meters gemaakt worden met het ombouwen van functionaliteit uit de oude BenchDB naar de nieuwe.

Een van de belangrijkste verbeteringen is een eenvoudige weergave van testresultaten op de specificatietab van productuitvoeringen. Om te voorkomen dat de specificatietab wordt overladen met resultaten van tests die nauwelijks relevant zijn, worden er alleen resultaten getoond van belangrijke tests.

Verder werd het beheer van eenheden en tests omgebouwd en is er een begin gemaakt met het beheer van prestatie-indices, waarmee de redactie gewogen en geïndexeerde gemiddelden kan berekenen van de resultaten uit een reeks tests. De weergave van grafieken op kleine beeldschermen werd verbeterd en het is nu weer mogelijk om resultaten als tijd of verhouding te formatteren in een grafiek en om logaritmische waarden op een lineaire schaal weer te geven.

Lay-out van notificaties

Om de leesbaarheid van notificaties te verbeteren hebben we de overlay breder gemaakt en wordt de thumbnail bij de notificatie kleiner weergegeven. Zo is er meer ruimte voor de tekst, terwijl er meer notificaties in de overlay weergegeven kunnen worden. Het breder maken van de overlay creëerde ook ruimte om rechtsonder een link weer te geven waarmee alle notificaties als gelezen gemarkeerd kunnen worden.

Sass

De developers hebben in de afgelopen drie weken hard gewerkt aan het omzetten van stylesheets naar Sass (Syntactically Awesome Style Sheets). Sass heeft veel voordelen boven reguliere CSS, zoals de mogelijkheid om variabelen, functies en mixins te gebruiken, en stijldeclaraties te nesten. Het omzetten van de stylesheets naar Sass wordt ook benut om het aantal gedefinieerde kleuren drastisch te verminderen. In plaats van apart gedefinieerde kleuren voor bijvoorbeeld hover-effecten en borders, worden deze afgeleide kleuren met functies als darken en lighten gegenereerd. De stylesheets worden zo beter beheersbaar.

Nieuwe load-balancers

Kees heeft onlangs onze oude load-balancers van A10 vervangen door PowerEdge 430-machines van Dell met loadbalancing-software van Brocade. De nieuwe load-balancers hebben meer netwerkbandbreedte, 2x10Gbit/s in plaats van 4x1Gbit/s, en doen naast load-balancing ook het cachen van statische content, zodat we afscheid konden nemen van Varnish als http-accelerator. Tegelijk met het vervangen van de load-balancers werden er nieuwe ssl-certificaten van Let's Encrypt geïnstalleerd en ondersteunen we nu http/2-verbindingen op onze met ssl versleutelde pagina's.

En verder hebben we:

• onderzoek gedaan naar het device-afhankelijk serveren van standaard- en high-dpi-afbeeldingen, met als doel om de beeldkwaliteit te verbeteren bij een zo beperkt mogelijke impact op de prestaties;
• gezorgd voor een betere duiding van shopreviews ouder dan een jaar, die niet meer worden meegewogen in het gemiddelde van een shop (boven de oude shopreviews wordt een blauw kader met een melding hierover weergegeven);
• een aantal tickets uitgevoerd in de voorbereiding naar de upgrades naar php7, http/2 en https. In de loop van juni zullen we live gaan met http/2 en https;
• een bug gefixt die verhinderde dat je na het inloggen terugkeerde op de pagina waar je vandaan kwam;
• het scrollen door round-uptabellen in reviews gebruiksvriendelijker gemaakt;
• het 'percentage schermoppervlak' als totale oppervlakte van een apparaat als virtuele specificatie toegevoegd;
• opnieuw veel tekstverbeteringen doorgevoerd in e-mailtemplates;
• de aanbieding in de abonnementenshop vervangen door een nieuwe (je ontvangt nu een Tweakers Virtual Reality-cardboard bij het afsluiten of verlengen van een abonnement).

Reacties (68)

Is Let's Encrypt niet te beperkt voor zo'n grote site als Tweakers?

Let's Encrypt is nog steeds niet goed genoeg:
Your connection to Tweakers.net is encrypted using an obsolete cipher suite. Further, this page includes other resources which are not secure. These resources can be viewed by others while in transit, and can be modified by an attacker to change the look of the page.

The connection uses TLS 1.2.

The connection is encrypted and authenticated using AES_128_GCM and uses RSA as the key exchange mechanism.

Of in het Nederlands, de certificaten die Let's Encrypt uitgeeft zijn simpel weg niet goed genoeg voor moderne browsers en zullen binnen niet al te lange tijd niet meer worden geaccepteerd. Waarom Tweakers.net zo zuinig moet doen dat ze met gratis SSL certificaten moeten werken in plaats van gewoon veilige certificaten geen idee maar dit is op z'n minst slordig van een club die toch beweerd technologie hoog in het vaandel te hebben.

Welke browser gebruik jij om dit te checken? Want die waarschuwing klopt niet, de setup die wij hebben is technisch gezien prima in orde en ondersteunt alle moderne ssl technieken.

De certificaten zelf zijn gewoon een certificaat met een 256 bits Eliptic Curve key en een certificaat met een RSA key van 2048 bytes (die je alleen krijgt als je browser geen ECDSA aan kan). Veel moderner ga je het niet krijgen, in fact de laatste keer dat ik keek had ongeveer 3% van de websites een ECDSA/RSA dual stack certificaat (https://securitypitfalls.wordpress.com/). En dat is voornamelijk omdat cloudflare het heel hard pushed (geen wonder, het is namelijk 10x sneller dan RSA calculaties en het is nog een veiliger ook (een 256 byte EC key is vergelijkbaar met een 3k RSA key).

En volgens https://www.ssllabs.com/ssltest/analyze.html?d=tweakers.net is er weinig mis met de setup. Als je wel iets kan vinden hoor ik dat uiteraard graag, want dan kunnen we het fixen.

De mixed content issues lossen we in een volgende release op waarbij we ook htst headers en redirect naar https releasen.

[Reactie gewijzigd door Kees op 31 mei 2016 19:11]

Ik heb http2 weer uitgezet bij ons op de reverse proxy. Er was geen modus te vinden in ciphers die bij alle browsers een OK krijgen icm http2. Er gelden weer aparte regels voor en die worden nu nog verschillend geïnterpreteerd door browser makers...

Dat ligt niet aan het certificaat maar de instellingen van de webserver...

En voor zover wij weten zijn die instellingen goed. Mocht het toch ergens mee mis gaan, dan horen we dat graag (en waar) zodat we dat kunnen verhelpen

Ik krijg geen melding dat de encryptie niet goed zou zijn, maar ik krijg wel een waarschuwing dat niet alles via https verloopt. favicon.gif is er één van, maar ook de meeste images van tweakimg.net lopen gewoon via http ipv. https.

[Reactie gewijzigd door [Yellow] op 1 juni 2016 10:35]

Dat klopt. We hebben dan ook niet voor niets zelf gewoon links naar http-versies van pagina's
Als er dan bezoekers toch graag https-versies opvragen, dan kan dat wel, maar is die 'mixed content' een van de consequenties.

Formeel ondersteunen we nog geen https voor de gehele site. Daar zijn we wel mee bezig, maar dat is nog niet af. Dat was wel een van de aanleidingen om nieuwe loadbalancers en let's encrypt te gaan gebruiken

Waarom zou het beperkt zijn? Met Let's Encrypt kan je zowel domeinen als subdomeinen registreren met vrijwel geen beperkingen, op een limiet van het aantal registraties per week(?) na. Het enige verschil tussen een gratis certificaat van Let's Encrypt en een duur certificaat van een andere instantie is misschien dat er geen groene balk staat voor de URL.

En die groene balk (Extended Validation certificaat) willen wij niet. Je zit namelijk op 'Tweakers.net', en bij een EV certificaat komt er in de balk te staan: '|de Persgroep Online Services B.V.[NL]| https://tweakers.net'.

De bedrijfsnaam is nu niet super bekend bij het grote publiek. Nu is dat nog niet eens het grootste probleem bij desktop browsers, maar (veel) mobiele browsers laten alleen maar de bedrijfsnaam zien, en dan zit je ineens niet meer op tweakers.net, maar op 'de Persgroep Online Services B.V. [NL]' - zie dan maar eens uit te vogelen wat de url van de website is (ga maar eens naar rabobank.nl, dan staat er in het groen 'Rabobank Nederland' in mijn safari, zonder de URL).

Tja, als je de url wilt weten dan klik je even in je url balk.. of zet je gewoon je instellingen goed. Safari -> Preferences -> Advanced -> Show full website address..

Dat weet jij, dat weet ik (nu ) maar de meeste bezoekers zullen die instelling niet aanpassen.

En je kan inderdaad op de urlbalk clicken maar het veroorzaakt hoe dan ook verwarring die je gewoon kan voorkomen door geen ev certificaat te gebruiken

Bovendien heeft EV voor een site als tweakers uberhaupt geen enkel praktisch nut, het certificaat word er niet direct veiliger door.

Bij lets encrypt is de balk ook groen hoor, alleen nu niet omdat er mixed content op de pagina zit, dat betekend dat er iets op de pagina staat wat nog niet over HTTPS verloopt...

Als dat is gefixed wordt het balkje gewoon groen.

Ik doelde op wat Kees zegt, een Extended Validation certificaat. Zoiets als bijvoorbeeld Versio gebruikt in hun klantenpaneel. Voor zover ik weet biedt Let's Encrypt dit niet aan.

Wat zou er beperkend aan zijn?

We hadden een 'goedkoop' domain validated wildcard certificaat, nu hebben we een domain validated SAN-certificaat. En niet alleen dat, we hebben nu zowel een RSA als een ECDSA certificaat (iets wat nog geen enkele goedkope aanbieder aanbied).

En verder is het, met een paar scriptjes, eenvoudig elke maand te renewen waardoor we ons daar in principe geen zorgen om hoeven te maken. En als ik een nieuw (sub)domein wil toevoegen is het een kwestie van 1 project in jenkins een beetje aanpassen (aka, de nieuwe domeinnaam in de lijst zetten) en opnieuw draaien.

[Reactie gewijzigd door Kees op 31 mei 2016 14:17]

Je mist wel een stukje support die wel vanzelfsprekend is als je bij een gerenommeerde CA zit.

Wanneer heb je die support nodig? En heb je het nog nodig met een ervaren team zoals hier?

[Reactie gewijzigd door Rafe op 31 mei 2016 18:39]

Mag ik vragen wat jij te beperkt aan LE vindt tov andere CAs?
Tweakers hoeft in ieder geval geen EV certificaat te hebben, naar mijn mening..

Wow, jullie werkten serieus al die jaren nog met vanilla css?

Helaas wel ja. We hebben een development team van 6 man en een product team van 2 met een roadmap waar je U tegen zegt. Helaas leggen regelmatig de technische inovaties het af tegen al dat andere werk dat gedaan moet worden. Nu vonden we het toch echt tijd om SASS er gewoon tussendoor te fietsen en mee te nemen in code die we toch moeten aanraken voor het bouwen van features of oplossen van bugs. Daarnaast is het zo'n enorme berg aan code die we hebben dat alles in 1x omzetten geen optie is. Vanaf nu gaan we dus bij elke refactor ook de CSS omzetten. En ja dat is ondertussen heel hard nodig

Hulp bij nodig?

Als jij jezelf gratis ter beschikking stelt Helaas hebben we geen budget voor extra developers momenteel, al zouden we die wel kunnen gebruiken Wie weet in de toekomst.

Er zijn gratis converters die het voor je omzetten, dan blijft alles gewoon werken. als je dan erna pas de mixins toevoegd hadden de gebruikers er niks van gemerkt (tip voor andere).

Je bedoeld rename van .css naar .scss dat hebben we namelijk wel gedaan, of kan zo'n converter meer? Daarbij hebben we enkele grote stukken omgezet naar mixins, indenting en variabelen. Dat gaan we nu verder uitwerken.

Nou, als ik tijd over had, zou ik het graag voor jullie doen!

Een converter is gewoon CSS naar SaSS omzetten. Daar schiet je eigenlijk niets mee op. Je wilt je CSS herschrijven naar SaSS, zo kan je de structuur opnieuw valideren en gemakkelijker onderhouden.
Zelf zou ik een converter niet gebruiken.

Dat is niet waar, een converter is dat bijna ieder bedrijf gebruikt om scss vanuit css te genereren. Er worden automatishc mixins en variablen gemaakt voor je, dan hoef je het erna alleen op te splitsen naar je includes inheritance gaat automatisch. enkel voorbeeldje: http://sebastianpontow.de/css2compass/

Snap ik, maar waar ik naar doelde is dat je niet klakkeloos moet converteren, je wilt de code herschrijven/verbeteren.

Het is met mixins en variabelen inderdaad makkelijker om te onderhouden, maar dat is ook het enige.

Dus je wilt een nieuwe met de hand schrijven die hetzelfde doet als het orgineel? wat is dan het verschil met converten en de includes etc handmatig maken?

Eigenlijk wel ja.
Vaak hebben websites/bedrijven verouderde CSS en durft niemand meer iets aan te passen op hoog niveau. Dan krijg je dus dat er extra classes gemaakt worden om 'veilig' te blijven werken, zodat er niet per ongeluk iets omvalt op een andere pagina.

Je wilt je structuur herzien en verbeteren.

De converter is gewoon een compiler zoals sass is, ik zie niet hoe je dat als mens nauwkeuriger kan doen. Ik snap dat je daarna aanpassingen gaat maken maar je gaat toch niet alle variablen handmatig aanmaken?

Klopt, dat wil je ook niet.
Maar met alleen converteren kom je er niet, je wilt daarna inderdaad aanpassingen doorvoeren.

Nee dat bedoel ik niet een voorbeeld is:

http://sebastianpontow.de/css2compass/

Kopieer maar eens decss van de c++ sitee ernaartoe of de oude tweakers css en zie dat er automatisch variabelen extends etc aangemaakt worden, scheelt veel werk. Dat is eigenlijk de standaard manier, handmatig overzetten lijkt me gekkenwerk als je zoiets makkelijk zelf kan automatiseren.

[Reactie gewijzigd door SBTweaker op 31 mei 2016 15:32]

Zou er wel een blik op kunnen werpen? Staat de code op een source control zoals bijvoorbeeld Git?

Sass en mixin, weer wat geleerd vandaag . Ik zie dat Sass ook indenting in de syntax net als python. Nou heb ik daar zelf nooit last van gehad (doe best veel met Python) maar ik heb op slashdot wel eens het bezwaar zien maken dat als je een blok python code cut en paste (b.v. voorbeeldcode op een webpagina) dat het wel eens fout kan gaan (tabs / spaces) en dat daarom gebruik van expliciete tokens zoals accolades beter zou zijn. Hoe zien jullie dat?

We gebruiken ook SCSS (versie 3 van SASS) wat dus eigenlijk de opvolger van SASS is. Deze syntax bied wel brackets voor scoping. Zie ook: http://thesassway.com/edi...ss-which-syntax-is-better

Gelijk gebruik gemaakt van BEM en SCSS linter tools?

In deze eerste fase nog niet, maar daar gaan wij zeker naar kijken!

Aanrader! Zeker wanneer je met meerdere aan een codebase werkt, gebruiken we bij KPN nu ook.

[Reactie gewijzigd door Cyw00d op 31 mei 2016 18:15]

Het was voor mij ook nieuw. Misschien leuk om ook eens op Tweakers eens wat (achtergrond) artikelen te maken over dit soort technieken? Zowel op het gebied van webtech, maar misschien ook over ontwikkelingen bij programmeertalen of platforms? Wat mij betreft interessanter en leerzamer dan het zoveelste gerucht over een nieuwe telefoon...

Soms ook met Chocolade (chokotoff-powered) css. Dus niet alleen maar vanilla.

Ik dacht dat het een grap was wtf.

Ligt het aan mij of is het NL-vlaggetje weer terug welke ik had verborgen met Custom CSS?

/* NL vlaggetje weg */
.flagNL div{
visibility: hidden !important;
}

De CSS is iets aangepast, waardoor jouw CSS rules niet meer werken

Dank en dank @BasA1991!

Ziet er weer fijn uit deze iteratie, goed bezig mannen!

Als je die bij het tandwieltje bedoelt, die class is niet dezelfde als die in jouw custom css.
In de html/css nu is het namelijk deze:
#userbar li.icon.flag.nl:after

dus dit werkt wel:

/*NL vlaggetje weg */
#userbar li.icon.flag.nl:after{
visibility: hidden;
}

[Reactie gewijzigd door BasA1991 op 31 mei 2016 13:28]

Chrome kan tegenwoordif ook notificaties pushen. Is dit geen idee om de tweakers notificaties daaraan door te geven zegmaar?

Dan graag wel als opt-in en een makkelijke opt-out bij bedenkingen, niet zoals de ellende bij Facebook waar je, eenmaal "ja" geklikt, er eigenlijk alleen nog maar vanaf komt met een reinstall van Chrome.

Dat zag ik althans voor de Android-versie van Chrome regelmatig gebeuren, geen ervaring met de desktop versie.

Dit is gewoon naderhand heel eenvoudig aan te passen in de Instellingen.
Zie ook Google Support: https://support.google.com/chrome/answer/3220216?hl=nl

We hebben een ticket staan om hier naar te kijken. Durf niet te zeggen wanneer dat opgepakt gaat worden. Ticket omvat trouwens niet alleen Chrome, maar ook Safari.

Sinds deze update ziet de site er in Safari een beetje raar uit bij mij http://imgur.com/0ZRYAoe

Is dat nu nog steeds zo? Net nog even een snelle fix gedaan...

Ah, het probleem van hierboven is nu inderdaad opgelost

Echter ziet de pagina er linksbovenin nu een beetje vaag uit http://imgur.com/FUlxRjh

[edit] Alles is weer goed nu \o/

[Reactie gewijzigd door Dingen op 31 mei 2016 13:59]

Kun je aangeven welke browser / OS je gebruikt?

[Reactie gewijzigd door Inspector op 31 mei 2016 13:08]

Safari 9.1.1 op OS X 10.10.5

Zou misschien interessant zijn mochten jullie het verschil voor en na PHP7 publiceren (performance e.d.)!

Die komt er zeker!

Top! Kijk er naar uit!

Wat mij opvalt nu, weet niet of dit altijd al zo was eigenlijk, maar er zit een dubbel bordertje bij de notificaties (misschien alleen als er geen notificaties zijn?)
http://prntscr.com/bak3gg

border-bottom in de .header en border-top in de eerste .listItem.
Misschien alleen bij .listItem + .listItem border-top erin zetten?

Verder goeie veranderingen!

[Reactie gewijzigd door BasA1991 op 31 mei 2016 13:18]

Thanks, inmiddels ook gefixed! =)

Waarom hebben jullie voor Sass gekozen en niet bijv. Less of Stylus?

De meeste van onze redenen worden in dit artikel goed omschreven:
https://css-tricks.com/sass-vs-less/

Om de leesbaarheid van notificaties te verbeteren hebben we de overlay breder gemaakt en wordt de thumbnail bij de notificatie kleiner weergegeven. Zo is er meer ruimte voor de tekst, terwijl er meer notificaties in de overlay weergegeven kunnen worden. Het breder maken van de overlay creëerde ook ruimte om rechtsonder een link weer te geven waarmee alle notificaties als gelezen gemarkeerd kunnen worden.

Nice

Lay-out van notificaties

Om de leesbaarheid van notificaties te verbeteren hebben we de overlay breder gemaakt en wordt de thumbnail bij de notificatie kleiner weergegeven. Zo is er meer ruimte voor de tekst, terwijl er meer notificaties in de overlay weergegeven kunnen worden. Het breder maken van de overlay creëerde ook ruimte om rechtsonder een link weer te geven waarmee alle notificaties als gelezen gemarkeerd kunnen worden.

Dat ziet er een stuk beter uit. Voor de mensen die, net zoals ik, nu al niet meer weten hoe de oude layout eruit ziet. Heb je hier een afbeelding van de introductie en hier een afbeelding van de vorige setup.

[Reactie gewijzigd door rens-br op 31 mei 2016 13:20]