Patrick Lid Monslaup
Technical manager & developer for Knowit Experience Bergen. Looking for a new job? Check out http://knowit.no/karriere
Kodekvalitet
Meg i virkeligheten
Gjør
Komponenter
Gjenbrukbar
Knapper!
Eksempel fra De Historiske sin styleguide
// vanlig knapp
<button class="button">
Button
</button>
// hul knapp
<button class="button button--hollow">
Button
</button>
// hul knapp som tar full bredde
<button class="button button--hollow button--full-width">
Button
</button>
// vanlig knapp som tar full bredde
<button class="button button--full-width">
Button
</button>
Hvordan burde en knapp-implementasjon være?
BEM
Block, Element, Modifier
// vanlig knapp
<button class="button">
Button
</button>
// hul knapp
<button class="button button--hollow">
Button
</button>
// hul knapp som tar full bredde
<button class="button button--hollow button--full-width">
Button
</button>
// vanlig knapp som tar full bredde
<button class="button button--full-width">
Button
</button>
Modifier: --hollow
Block: .button (classname)
Modifiers: --full-width, --hollow
Modifier: --full-width
Problemet
Q: Men hva hvis vi skal ha 8 ulike knapper da?
A: Lag en generator
@mixin generateButton ($border-color, $border-hover-color, $background-color,
$background-hover-color, $font-color, $font-hover-color)
{
transition: all .2s linear;
color: $font-color;
background-color: $background-color;
border-color: $border-color;
border-width: 2px;
border-style: solid;
&:hover {
color: $font-hover-color;
background-color: $background-hover-color;
border-color: $border-hover-color;
}
}@mixin hollowButton ($border-color, $font-hover-color) {
@include generateButton($border-color, $border-color, transparent,
$border-color, $border-color, $font-hover-color);
}
@mixin solidButton ($background-color, $background-hover-color,
$font-color, $font-hover-color) {
@include generateButton($background-color, $background-hover-color,$background-color,
$background-hover-color,$font-color, $font-hover-color);
}
.button {
&--orange {
@include solidButton($orange-primary, lighten($orange-primary, 10%), $white-text, $white-text);
}
&--blue {
@include solidButton($blue-primary, lighten($blue-primary, 10%), $white-text, $white-text);
}
&--hollow-blue {
@include hollowButton($blue-primary, $white-text);
}
&--hollow-orange {
@include hollowButton($orange-primary, $white-text);
}
&--hollow-turkis {
@include hollowButton($turkis, $blue-primary);
}
&--turkis {
@include solidButton($turkis, lighten($turkis, 10%), $white-text, $white-text);
}
&--small {
padding: $button-padding-height--small $button-padding-width--small;
display: inline-block;
width: auto;
}
&--auto-size {
display: inline-block;
width: auto;
}
}Base button styling such as "box-sizing" and "text-decoration" has been omitted for presentation.
Ask Patrick if you'd like a partial with generator and examples
Skriv
Readme
Legg ved infromasjon om..
- Hvor dokumentasjon ligger (hvis f.eks. confluence)
- Hvor tasks ligger (jira? trello?)
- Hva som trengs for å bygge prosjektet
- Prosjektet kjører på VS15,
- Frontend installeres med Node v5, skriv "npm i"
- Node version XYZ er kanskje obvious nå, men om breaking changes kommer så vil timer gå tapt.
- Hvilken javascript rammeverk brukes?
- Grunt, gulp, mimosa, anvil, bud, james, fez, anvil, webpack.. ??
- Hvordan prodsetter man løsningen?
Bruk
Pull
Requests
En pull request om dagen er bra for _
- Oversikt over prosjektet
- Man ser at knapper er implementert, og ikke implementerer det på nytt 7 ganger til
- Bugs eller code-smells oppdages
- Om man må spørre seg "hva gjør denne koden her?" mens man jobber på prosjektet så kommer i alle fall personen som skal fikse på det om 1 år til å lure. Lag en kommentar eller refakturer
- Læring av hverandre
La git gjøre jobben
Fjern død kode
.. eller i det minste skriv hvorfor den er kommentert ut, med lenke til issue hvis det er en pågående eller blokkert sak
Kodekvalitet
By Patrick Lid Monslaup
