- π Hi, Iβm @mat1th
mat1th / screens-cms Goto Github PK
View Code? Open in Web Editor NEWA CMS to display posters on a screen.
License: Apache License 2.0
A CMS to display posters on a screen.
License: Apache License 2.0
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.
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.
Niet perse een issue, maar zie bij je keyframe animations nog wat dingen hebt geprefixed, en volgens mij gebruik je Autoprefixer
<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.
.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)
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).
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.
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:
Dit is een erg leuk filmpje van Fronteers Spring Conference dat daarover gaat:
<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..
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.