Guide to the best-practices for building and deploying web applications.
Een korte omschrijving van wat Code Cookbook inhoudt, wat het doet, waarvoor het ingezet kan worden en hoe het praktisch te gebruiken valt.
Deze website is te gebruiken als naslagwerk voor zowel nieuwe als lopende projecten.
Een deel van dit naslagwerk bestaat uit algemene richtlijnen en gemaakte afspraken die over meerdere projecten gelden. Deze zullen in een volgende versie als aparte gemarkeerd worden en de weergave hiervan getoggled.
Verder is een deel van dit naslagwerk project-specifiek: informatie benodigd voor bijvoorbeeld de handoff van design naar development, projectdocumentatie, benodigde bestanden.
Dit naslagwerk is ontwikkeld voor designers en developers bij Active Collective.
Ook (juist!) voor nieuwe medewerkers of stagiairs is dit naslagwerk fijn om een wat beter beeld te krijgen van hoe alles werkt.
Er zijn, door middel van desk research en benchmark-onderzoek bij andere agencies, industriestandaarden meegenomen en dit project is daarom ook geschikt voor gebruik door anderen.
Deze website kan overigens ook gebruikt worden door projectleiders voor het bekijken van de status van een project.
Dit naslagwerk kan binnen een Digital Agency met in-house design en development, gebruikt worden voor het vastleggen van:
Met aanleveren van informatie en bestanden voor de handoff, wordt dit 'handboek' erbij gepakt om te lopen of alles compleet is, en vervolgens ingevoerd in Code Cookbook
Bij het developen kan dit naslagwerk op een tweede scherm openstaan aan de hand waarvan de setup van een (nieuw) project kan worden gedaan volgens standaarden.
Dit kan zelfs door een van de 'templateprojecten' die vanuit Code Cookbook worden aangeboden, te gebruiken als basis.
Tegen de tijd van het opleveren kan met de checklists worden nagegaan of alles voldoet aan de opgestelde kwaliteitsstandarden/eisen.
Dit naslagwerk is een single page application; dit houdt in dat alle content zich op de url 'codecookbook.nl' bevindt.
De navigatie gebeurt door middel van de sidebar aan de linkerkant; wanneer je op een van de linkjes klikt, opent de desbetreffende pagina.
Op een mobile device is dit te togglen door middel van het hamburger-icoontje rechtsbovenin.
Als designer kun je dit cookbook gebruiken als handleiding/checklist voor het aanleveren van de juiste projectinformatie, bestanden en designs.
Als developer kun je dit cookbook op een tabblad geopend hebben staan als een guideline en naslagwerk.
Uit ervaring en onderzoek bleek dat er bij dit bedrijf behoefte was aan een meer gestructureerde workflow, onderling afgesproken standaarden (zoals wat er aangeleverd moet worden met de handoff), en een centrale plek waar dit in vastgelegd wordt.
Momenteel is projectinformatie namelijk nog verspreid over laptops, GitHub, Google Drive en zelfs alleen 'in het hoofd'.
Daarnaast komen er redelijk vaak bugs voor in de code; door te gaan werken volgens codestandaarden en versiebeheer goed bij te houden, zal dit al sterk verminderen.
Dez structuur in de workflow en afgesproken standaarden verhogen niet alleen de mate van transparantie in samenwerking en efficiëntie, maar ook de codekwaliteit.
Meer informatie over de totstandkoming van Code Cookbook en hoe het bedrijf is overtuigd tot het gebruik ervan, is te vinden op de About-page.
aboutInformatie over de werkwijze bij Active Collective. Hier kun je snel een idee mee krijgen van hoe de teams te werk gaan.
Er wordt algemeen gezien wel volgens een standaardflow gewerkt bij AC. Hieronder staan de verschillende onderdelen visueel uitgelegd.
Good to know: deze pagina is voor de huidige werknemers van Active Collective niet zo interessant. Voor nieuwe werknemers of stagiairs is het daarentegen een met de introductie snel erbij te pakken, (leerzaam) kijkje in het bedrijf..
Het huidige ontwerpproces bij AC gevisualiseerd van begin tot eind.
Met Code Cookbook komt ook het advies voor het verduidelijken en aanvullen van de workflow in meer detail. Samengevat komt dit op het volgende neer:
Onderstaand een aantal tools die momenteel door developers/designers gebruikt worden. Het is geen vereiste deze te gebruiken, maar ze zijn wel nuttig!
Verder is het nuttig om te weten hoe de organisatiestructuur in elkaar steekt.
De handoff van design naar development bevat een aantal 'standaardonderdelen'; deze zijn in Code Cookbook verwerkt zodat er consistent de juiste dingen worden aangeleverd. Wat de handoff inhoudt is gevisualiseerd tot het volgende:
Hier is ook aangegeven wat vaak nog wat extra controle/aandacht bedraagt.
Het development-proces verloopt voor een deel ook volgens een vaste flow. Hierbij gaat het vooral om ingebouwde controles met betrekking tot bijv. security.
Er zijn een aantal 'controleposten' in het proces die vrijwel automatisch gaan omdat ze 'ingebouwd' in de code zitten.
Projectspecifieke informatie. Wanneer er een nieuw project wordt gemaakt, wordt deze pagina gevuld met de relevante informatie om snel een indruk te krijgen van wat het inhoudt.
Informatie over dit project waarmee je je snel in kan lezen op de inhoud ervan.
De pagina is nu nog gevuld met placeholder-data over het project Active Collective portfolio, maar behoort met het inzetten van Code Cookbook, vervangen te worden met informatie over het project waarin het ingezet wordt.
Het concept van de website van Active Collective is om hun portfolio te laten zien. Deze website is een portfoliowebsite waarop een een aantal klant-cases worden gepresenteerd.
Ook staan er een aantal blogposts op om de huidige bezigheden up-to-date te kunnen laten zien.
Degenen die aan dit project werken zijn:
(placeholder-informatie voor nu)
Op deze pagina wordt de huidge stand/status van het project weergegeven. Onderstaande data is gelinkt aan de GitHub-repository en wordt dan ook live-geüpdatet.
Binnen een GitHub-repository kan projectvoortgang worden bijgehouden. Je kun hierbij, naast het invoeren van taken, ook 'milestones' toevoegen. Dit zijn de 'hoofddoelen' die gesteld worden voor de planning van een project.
In Code Cookbook zijn deze by default direct gelinkt aan de repository 'codecookbok', maar worden bij gebruik voor een project aangepast naar de desbetreffende repo:
To-do's are presented as repository issues and directly pulled from the project's GitHub repo. Developers can change the project link in 'pages'.
Dit zijn de issues die nu openstaan op de repository codecookbook.
Aangezien er nog geen lijst met afgesloten issues is op de repository van codecookbook, zijn ter illustratie de issues van een andere repository hieronder getoond.
Dit is het ontwerp van het project. Hierin zijn ook de basis-elementen van de pagina's die in het project gebruikt worden, vastgelegd en links naar (delen van het) design verzameld.
Er is uiteraard mobile-first gewerkt; hier een impressie van het design. Het volledige design is te bekijken via de Figma-link hierboven.
Desktop design voor dit sproject. Het volledige design is te bekijken via de Figma-link hierboven.
This font is protected and not to be used by others as it's simply used for a graduation project here.
Binnen dit project maken we gebruik van twee verschillende shapes: vierkanten en rechthoeken.
We maken gebruik van de rechthoeken voor content-afbeeldingen. Deze zijn meestal 1100x300px.
We maken gebruik van de vierkanten voor card-afbeeldingen. Deze zijn meestal 547x610px.
Verder passen we eenzelfde formaat toe voor de pagina-header background.
Er wordt een standaardset iconen gebruikt, afkomstig van Code Design System. Deze zijn te vinden in het templatebestand in Figma onder het kopje atoms > icons.
Alle assets voor dit project zijn hier verzameld en met één klik te downloaden.
The free version is only for personal use. However if you want to use it for commercial purposes, you need to buy the license from its foundry where it originated.
Helvetica Neue is a reworking of the typeface with a more structurally unified set of heights and widths. Other changes include improved legibility, heavier punctuation marks, and increased spacing in the numbers.
Neue Helvetica uses a numerical design classification scheme, like Univers. The font family is made up of 51 fonts including nine weights in three widths (8 in normal width, 9 in condensed, and 8 in extended width variants) as well as an outline font based on Helvetica 75 Bold Outline (no Textbook or rounded fonts are available).
The original numbering system for the weight designations came from the numbering of the Univers font. The basic font weight, “Helvetica roman”, is at the heart of this numbering system.
Assets<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Helvetica"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Helvetica-Neue">
Download: favicon-iconDit zijn alle variabelen die nodig zijn voor het ontwerp van dit project. Als ontwerper kun je zo variabelen toevoegen of verwijderen, en als developer hoef je deze waarden alleen nog maar te copy-pasten naar een SCSS-file.
| variable | value |
|---|---|
| $black: | #202020ff; |
| $body-gray: | #C4C4C4; |
| $body-highlight: | #67C8F2; |
| $brand: | #67c8f2ff; |
| $brand-transparent: | #69c9f21a; |
| $gray-1: | #313131ff; |
| $gray-2: | #878a8dff; |
| $gray-3: | #f6f6f6ff; |
| $white: | #ffffffff; |
16px
| variable | value |
|---|---|
| $heading-1: | 53px; |
| $heading-2: | 34px; |
| $heading-3: | 28px; |
| $heading-4: | 22px; |
| $heading-5: | 18px; |
| $p: | 16px; |
| variable | value |
|---|---|
| $weight-bold: | 700; |
| $weight-semibold: | 600; |
| $weight-medium: | 500; |
| $weight-normal: | 400; |
| $weight-light: | 300; |
| variable | value |
|---|---|
| $mobile-xxxs: | 4px; |
| $mobile-xxs: | 8px; |
| $mobile-xs: | 11px; |
| $mobile-s: | 16px; |
| $mobile-default: | 20px; |
| $mobile-m: | 24px; |
| $mobile-l: | 28px; |
| $mobile-xl: | 34px; |
| $mobile-xxl: | 40px; |
| $mobile-xxxl: | 55px; |
| $mobile-hughmongus: | 64px; |
| $mobile-innerpage: | 80px; |
| $mobile-page: | 84px; |
| variable | value |
|---|---|
| $desktop-xxxs: | 8px; |
| $desktop-xxs: | 16px; |
| $desktop-xs: | 20px; |
| $desktop-s: | 24px; |
| $desktop-default: | 32px; |
| $desktop-m: | 40px; |
| $desktop-l: | 56px; |
| $desktop-xl: | 64px; |
| $desktop-xxl: | 70px; |
| $desktop-xxxl: | 84px; |
| $desktop-hughmongus: | 100px; |
| $desktop-innerpage: | 110px; |
| $desktop-page: | 128px; |
| variable | value |
|---|---|
| $width-xxxs: | 15px; |
| $width-xxs: | 25px; |
| $width-xs: | 50px; |
| $width-s: | 100px; |
| $width-default: | 264px; |
| $width-m: | 345px; |
| $width-l: | 527px; |
| $width-xl: | 739px; |
| $width-xxl: | 878px; |
| $width-xxxl: | 0px; |
| $width-hughmongus: | 0px; |
| $width-innerpage: | 1075px; |
| $width-page: | 1440px; |
| variable | value |
|---|---|
| $height-xxxs: | 25px; |
| $height-xxs: | 50px; |
| $height-xs: | 100px; |
| $height-s: | 161px; |
| $height-default: | 200px; |
| $height-m: | 336px; |
| $height-l: | 450px; |
| $height-xl: | 610px; |
| $height-xxl: | 620px; |
| $height-xxxl: | 0px; |
| $height-hughmongus: | 0px; |
| $height-innerpage: | 0px; |
| $height-page: | 0px; |
Overige context. Op deze pagina nog een aantal dingen die nodig zijn om te weten, zoals: wat de doelgroep is van dit product, wat de visie is in dit project en wat de testscenarios zijn.
Momenteel is deze pagina nog niet uitgewerkt met echte placeholder-content aangezien er anders vertrouwelijke informatie online zou komen te staan.
Daarnaast valt dit niet binnen de scope van Code-Cookbook wat betreft content schrijven.
Wanneer dit project in gebruik wordt genomen, kan dit verder uitgewerkt worden.
Wat wil er met dit project bereikt worden? Waar moet dan ook extra aandacht naar uitgaan en heeft de prioriteit boven andere dingen?
De doelgroep van dit project is [..]
Dit is nu nog een placeholder-pdf.
Dit is nu nog een placeholder-pdf.
Dit is nu nog een placeholder-pdf.
Zijn er componenten met een bepaalde betekenis of re-usability waar rekening mee gehouden moet worden?
Zijn er componenten afhankelijk van data, of van context?
Hier ruimte voor verder notities met betrekking tot componenten.
Kwaliteitscontrole; voldoet het project aan de Code Cookbook-standaarden? Hier wordt visueel weergegeven wat er nog niet is gedaan en wat er nog moet worden gedaan.
Welke industriestandaarden zorgen voor een kwalitatief goede code, waarbij de technical debt wordt verlaagd en de code een betere structuur heeft? Hier een aantal afgesproken standaarden om als developer naar te werken.
Keep It Simple Stupid
KISS is the acronym for the principle that says: Don't make me think about it, just do it.
Don't Repeat Yourself
DRY stands for Don't Repeat Yourself. It's the acronym for the principle that says: Don't repeat yourself, just do it.
You Ain't Gonna Need It
YAGNI is the acronym for the principle that says: You ain't gonna need it.
Single Responsibility Principle
SOLID is the acronym for the principle that says: One responsibility, one responsibility.
Single-Owner-Control
SoC is the acronym for the principle that says: One owner, one control.
Avoid Programming Overhead
APO is the acronym for the principle that says: Avoid programming overhead.
Level of Detail
LoD is the acronym for the principle that says: Level of detail.
De naming van de files kan als volgt gestructureerd worden:
Checkbox checked-iconkebab-casesnake_casecamelCasePascalCaseEx/imported 'main' functions: function CleanThisThing()
Variable names: someThingsAndStuff
Wat zijn interessante tools, technieken of methodologies om te gebruiken?
Hier is onderzoek naar gedaan en de bevindingen van verzameld op een Miro-bord.
Er werd voorheen vooral gebruik gemaakt van OOP. Dit was top om zo met meerdere programmeurs samen te kunnen werken aan een programma.
Werd alleen steeds minder efficient naarmate de applicatie groter wordt.
Het deels invullen van een formule zodat je ‘m later volledig kan invullen (—> re-usable)
Een impure function pakt externe data
function magSpelen(leeftijd) {
return leeftijd >= PEGI
}
Een pure function houdt alles binnen de eigen scope. Dit neemt minder risico's met zich mee en behoudt overzicht.
function makeAdder(a) {
return function (b) {
return a + b
}
}
const add42 = makeAdder(42)
console.log(add42(4))
Dit is een functional pattern waarbij je een een functie als variabele gebruikt (en ook direct kan returnen).
Als je bijv over een array heen mapt en daar een transformatie op loslaat, hoef je niet eerst iets te doen als:
function removeWhitespace(data, variable) {
const getrimdeVariabele = data.map((item) => {
const trimmed = item[variabele].trim()
return {[variable]: trimmed}
})
return getrimdeVariabele
}
maar kun je dat gewoon als volgt doen:
function removeWhitespace(data, variable) {
return data.map((item) => {
return {[variable]: item[variable].trim()}
})
}
Voor versiebeheer van code werken we met git. Dit wordt gekoppeld aan een GUI zoals GitHub of GitLab om de code mee te beheren en in samen te werken. Er zijn hierin een aantal features die wenselijk zijn om te gebruiken aangezien het transparantie en collaboration bevordert; deze staan hieronder uitgelegd.
Het platform GitHub wordt gebruikt voor versiebeheer. Naast versiebeheer, biedt dit ook mogelijkheden voor project-management waarbij alles direct gelinkt is aan de development-workflow.
Issues zijn de to-do's voor dit project. Als er iets gefixt moet worden (feature, bugfix, refactoring, docs etc) openen we een issue met in de titel de to-do. Er is ook een template gemaakt voor de issues die ingeschoten worden. Die templates gebruiken we zelf ook met het aanmaken van een issue.
We gebruiken om overzicht te creëren betreft wat voor soorten taken we hebben, labels; zo kunnen we ook onze planning hierop aan laten sluiten. Bijvoorbeeld: feature, bugfix, refactoring, docs, release, maintenance etc. Deze labels kunnen we gebruiken om issues te categoriseren. De een doet bijvoorbeeld het liefst documentatietaken achter elkaar, of codeertaken achter elkaar, en we hebben allemaal soms nogal wat moeite om van focus te switchen dus dit helpt wel met prioriteren.
Voor het adden van features maken we een aparte branch aan met feat/ , en als het specifiek voor refactoren is maken we een branch aan met refactor/. Readme-updates of het uploaden van images
We werken overigens ook in branches omdat het je forceert te focussen op het ene ding waar je mee bezig bent, het scheelt je merge conflics en het is handig om vast aan gewend te raken voor betere versiebeheer. Het is ook fijn als je een feature gewoon af kan sluiten zo.
Hieronder een placeholder-voorbeeld van wat branches.
Commits proberen we te doen volgens deze guidelines. Dit betekent o.a. dat dat we alles in tegenwoordige tijd doen, en ervoor zetten waar het over gaat (feat:, refactor:, fix: etc.).
'Commit early, commit often.' --> we proberen zo veel mogelijk single-purpose commits te doen, en zo veel mogelijk.
Hieronder een placeholder-voorbeeld van wat commits volgens deze regels.
Handig om to-do's overzichtelijk en up-to-date online te hebben. Er kan een project board aangemaakt binnen deze repo zodat je op dezelfde locatie een beetje in de gaten kan houden waar we staan in het project en dat we geen dingen vergeten zonder 't te documenteren.
Hieronder een placeholder-voorbeeld van een project board volgens deze regels.
De branches mergen we met onze main branch middels een pull request; met gebruik van Netlify worden er ook gelijk controles uitgevoerd op een preview-branch.
Voordat je een 'PR' mag mergen, moet je een code review uitvoeren om er zeker van te zijn dat alles voldoet aan kwaliteit en of er niet gekke bijwerkingen meekomen.
Hieronder een placeholder-voorbeeld van wat PR's volgens deze regels.
Hoe wordt het project gedeployed naar een online omgeving? Onder staan de stappen om te volgen per use case.
Gehele websites kunnen direct op de server worden toegevoegd en gehost. Als gratis tool gebruiken we hiervoor FileZilla.
Bijvoorbeeld voor het uitproberen van een nieuw framework, een nieuwe library of een persoonlijke site.
Op Netlify kun je gratis je statische sites hosten, en eventueel uitbreiden met andere features.
Via Heroku kun je serverside sites deployen, gratis.
Login to your Herokuapp account
Here's your current apps. Add a new app by clicking on the button on the right upper side
Create a new app; give it a name and select which region you're in
Connect your app with the GitHub repository that your app is in
As we've got a database linked, this is where the variables from your .env-file go.
Add a Procfile to your GH repo to make sure the correct build command is used
Met Code Cookbook zijn ook templateprojecten beschikbaar. Hierin zijn ook de basis-elementen van de pagina's die in het project gebruikt worden, vastgelegd en links naar (delen van het) design verzameld en gepresenteerd als een proof of concept. Aangezien ze re-usable zijn opgesteld, zijn deze ook beschikbaar voor andere projecten als template.
This example contains a basic setup for developing a static site with Eleventy and using NetlifyCMS as a content management system.
Met het ontwikkelen van Code Cookbook zijn er ook twee implementaties van deze werkwijze uitgewerkt; twee proof of concepts.
Hiermee wordt bewezen dat het prima mogelijk is om volgens industriestandaarden te werken, en ook door middel van global data files te koppelen aan een Content Management System.
Deze projecten zijn in alle volledigheid door de ontwerper/developer van Code Cookbook ontwikkeld; er is dus zeker geen sprake geweeest van knip-en-plakwerk, maar letterlijk het from scratch onderzoeken en testen van data-structuren, componenten en omzetten tot code.
Er is alleen visueel gekeken naar de 'echte' website zoals voor ieder ander ook te bekijken is op het internet, en aan de hand daarvan de website ontwikkeld.
This example is Holiday Rentals Curacao's current website, but fully remade in Code-Cookbook style and standards by just looking at the original website's page. Fully self-coded in link, code system by Code Cookbook. Design by Active Collective.
This example is Active Collective's current website, but fully remade in Code-Cookbook style and standards. Also fully self-coded, code system by Code Cookbook. Design by Active Collective.
Code Snippets zijn een manier om code te weergeven en op te slaan, die je als developer later snel kan gebruiken wanneer je een feature moet implementeren. Neem nou een hamburger-menu toggle; dit komt op veel verschillende sites voor en wil je graag zo vanilla mogelijk kunnen overnemen. Deze snippets zijn volgens de Code Cookbook-standaarden geschreven en zijn beschikbaar voor de verschillende use cases. Ze worden gehost op CodePen en live geüpdatet.
Welke tools worden gebruikt om een project mee te ontwikkelen, of kunnen handig zijn om te gebruiken? Onder zijn een aantal vermeld, maar deze lijst is nooit 'volledig'. Kom je handige tools tegen; voeg deze dan toe!
Soms zijn bepaalde applicatie alleen maar wat gimmicks, maar ze kunnen ook ontzettend nuttig zijn en je efficiëntie verhogen.
Deze lijst is nu nog gevuld met wat placeholdercontent, maar wordt graag uitgebreid!
Een tool waarmee je 'nettere' screenshots maakt.
Een tool waarmee je snel en makkelijk shortcuts kan aanmaken voor je macbook.
Figma wordt gebruikt om designs mee te maken. De 'single person'-versie is gratis en er zijn veel plugins voor beschikbaar.
Kom je een site tegen die je nu nog niet vast kunt gebruiken of implementeren, maar wat wel interessant is voor later? Dan kun je deze ook hier plaatsen op de 'toffe dingen'-pagina. Deze pagina is een verzameling van websites die je kunt gebruiken als inspiratie, als onderzoek of als broncode.
HTML-hell is heeft een nieuwsbrief waarin wekelijks de meest absurde HTML-worst practices worden uitgelicht.
Ook worden er een aantal voorbeelden genoemd van hoe het wél moet.
https://www.htmhell.dev/newsletter/
Muzli is a search engine specifically for the one’s that are looking for design inspiration. What I like about is most is that you can also just search for a single word or color and beautiful designs pop up anyways.
Feeling nostalgic? This NPM-package is there to help you transform your components into the old styles.
https://github.com/jdan/98.css/
If you’re also always having trouble deciding on what colors to use: read this article. It’s amazing, I promise.
https://medium.com/front-end-in-regions-grodno/configuring-application-color-scheme-1e744b0008db
If you’re in need for some icons; free and open-source CSS, SVG and Figma UI Icons. More than 700 available!
This is an article that lists some of the unknown amazing possibilities of CSS animations.
This article is about breaking apart information/lists into chunks.
https://blog.prototypr.io/the-most-important-rule-in-ux-design-that-everyone-breaks-1c1cb188931
Buttons! Simple, yet not always very well done. Here’s some rules about designing buttons.
https://uxplanet.org/7-basic-rules-for-button-design-63dcdf5676b4
Forms, again?! Yes. They’re important and reoccur in almost every website. Do them the right way!
https://medium.com/nextux/design-better-forms-96fadca0f49c
Test common easing curves on a range of interfaces. Or generate your own custom bezier curve.
Border-image is super nice if the usual border-styles just don’t do it for you.
Responsive picture frame by dudleystorey
Found a pretty cool grid-generator a while ago and it’s very helpful for the visual-thinkers among us. You can also export your creation to codepen, or save it as is. https://grid.layoutit.com/
Okay, this one’s not about CSS in particular but accessibility is also on top of my list so I’ll list some of those sources aswell. This one’s about building accessible HTML forms.
Need to make a tab-like toggle or interface? Here’s some great inspiration, including source code.
https://freefrontend.com/css-tabs/
I’ve never used Bootstrap and apparently some people still don’t like it, but this article about the newest Bootstrap 4 sounds really promising
Fresh, cool and modern. People are very fond of Tailwind and I can see why. You can also design your own system and use Tailwind for faster development.
This one’s the odd one out in this article: it’s Javascript. Shhht, don’t tell. But look at this! It’s a package you can use for applying physics into your designs. https://brm.io/matter-js/
Linking CSS-tricks is a bit of a cheat when it comes to CSS, but I find this article to be very helpful and want to try implementing this principle in my future projects aswell.
https://css-tricks.com/grid-for-layout-flexbox-for-components/
Yup. That’s what the title says. Clear, right? Jk but for real; designing a grid layout with only one line of CSS is pretty cool.
https://dev.to/thedamon/my-favourite-line-of-css-4klp
Apparently, you can use align-items: safe center;! https://twitter.com/stefanjudis/status/1259748588873232384?s=20
This is so cool. How did I not know about this??
https://twitter.com/asif_ahmed/status/1277433467362410496
cssdb is a comprehensive list of CSS features and their positions in the process of becoming implemented web standards. Be cool before it’s cool.
Here you’ll find everything from semantics to accessibility.
https://learn-the-web.algonquindesign.ca/topics/
Did you know you can make almost everything in CSS/SVG? Codepen is full of pure art!
Trello is a tool you can use to bring structure to a project and tasks.
Zijn er in dit project dingen opgelost opn een manier die niet helemaal de Code Cookbook-standaarden voldoet of überhaupt niet zo toekomstbestendig zijn? Dan kun je deze hier plaatsen op de 'hacks'-pagina. Wanneer een ander dan met dit project aan de slag moet, kan diegene ook direct hiervan op de hoogte worden gesteld.
Er zijn een paar 'snelle hacks' die bij ieder project weleens toegevoegd worden.
Neem nou het gebruik van .innerHTML of een 'lelijke' class omdat een bug snel opgelost moet worden.
Bij ieder project is een css-bestand 'components.all.scss' aanwezig. dit
Dit bevat alle 'CSS_dump' die nog geplaatst moet worden op de juiste plaats en geoptimaliseerd.
Het is nu nog spaghetticode maar het is wel de bedoeling dat deze technical debt tijdig wordt opgeruimd.
