mat1th / screens-cms Goto Github PK

Een voorbeeld: nav.css

Hier gebruik je aantal keer de direct child selector, hierdoor verhoog je de specificity en dat kan CSS onnodig complex maken.

<div class="name">

Misschien kan dit ook een ander HTML element zijn? Iets semantisch misschien.. Check je HTML nog even op dit soort dingen.

<div class="name">
     <h2>Icons presentatie</h2>
     <small>06 dec.  - 20 jun. 2020</small>
</div>

Ook heeft <small> een bepaalde semantische waarde, vaak gebruikt voor disclaimers of copyright etc. Ook voor deze content is vast iets voor te vinden, met meer betekenis.

http://html5doctor.com/ vind ik persoonlijk een leuke site om meer te lezen over de verschillende HTML5 elementen.

Doordat de app veel functionaliteit heeft kan het moeilijk zijn om te weten wanneer een poster nu op het display getoond word. Door de applicatie te versimpelen wil ik dit duidelijker maken. De voortgang zie je in de /feature/redesing-interaction brance.

Niet perse een issue, maar zie bij je keyframe animations nog wat dingen hebt geprefixed, en volgens mij gebruik je Autoprefixer

Niet perse fout hoor, maar wellicht vind je dit ook interessant, dus doe ermee wat je wil :)

In je @Keyframes loading animatie, animeer je bepaalde properties, zoals width en left. Er zijn een aantal properties die heel geschikt zijn om te animeren, en sommige wat minder, in het kader van performance. Sommige properties die geanimeerd worden kunnen zorgen voor repaints of reflows, waardoor delen van de pagina opnieuw gerenderd moeten worden, dat kan ten koste gaan van de (perceived) performance.

Properties die 'goedkoop' zijn om te animaten of transitionen zijn bijv:

• opacity
• transform: rotate
• transform: scale
• transform: translate
• filter

Dit is een erg leuk filmpje van Fronteers Spring Conference dat daarover gaat:

https://vimeo.com/163185189

removed.

Als je :hover gebruikt kan het vaak ook nuttig zijn om de :focus style ook te definieren. Bijv door dezelfde styling op beide pseudo-classes toe te passen. Zo hebben mensen die met een toetsenbord door je site heen tabben ook visuele feedback.

Zie dat je loadCSS gebruikt in combinatie met critical CSS, op je laatste geuploade versie ziet de page render er al beter uit. Op sommige pages zie je toch nog wel harde flashes (bijv afbeeldingen die je eerst heel groot voorbij ziet flashen).

.bold {
    font-size: 1em;
    font-weight: bold;
}

Dit soort class names kwam ik regelmatig tegen in je code. Bijv .center, .right, .content-header.block . Probeer markup en styling zoveel mogelijk gescheiden te houden.
Kijk of je voor dit soort dingen een class name kan bedenken die iets zegt over de content, ipv over de styling. Misschien kun je voor dit soort dingen ook af met een <strong> of <em> tag, of kun je een class name bedenken die de lading beter dekt (waarom is de tekst bold? Misschien is het important text, of stand out text, of iets in die richting)

<link rel="manifest.json" />
Doet die het bij jou? Ik vermoed dat de JSON-file aanroep wel in een href zal moeten en aan de rel zou je wat anders mee kunnen geven..

Mooi dat je je CSS files organiseert door ze bijv in een map te stoppen, wel twijfel ik of ik 'components' een logische plek vind voor sommige bestanden, maar dat is meer een file architecture ding. Components zijn vaak de stukjes die je kunt hergebruiken op je website, dus buttons of tables of icons etc. Andere elementen zijn vaak een module, of misschien een layout. Als je dit interessant vind zou je hier nog eens naar kunnen kijken :)

Zag hier (https://posters.dolstra.me/css/style.css) dat je sourcemaps meekomen, op je livesite. Is dat bewust of zou je ze liever alleen in een local of dev omgeving gebruiken?

Overigens is het voor het bekijken en beoordelen van CSS wel handig om de output CSS te bekijken zonder dat deze geminified is. Je kunt ook twee versies maken en met bijv. een gulp-rename een style.min.css maken.

• Als er een item is toegevoegd die niet beschikbaar is (Ik zie nu ‘koala’ staan zonder afbeelding), zou het goed zijn om een placeholderafbeelding te gebruiken. Of de gebruiker aanspreken om een afbeelding toe te voegen.