Kodecamp #1

🚀✹

Plan for dagene

Onsdag

08:30 - 09:30 Grunnleggende om semantikk

09:30 - 10:45 BEM og designsystem i kode

10:45 - 11:30 Ting som komponenter

11:30 - 12:30 Lunsj

12:30 - 13:30 Litt grunnleggende JS

13:30 - 16:30 JS i React

Torsdag

08:30 - 10:30 Oppgavetid

10:30 - 11:30 State og props

11:30 - 12:30 Lunsj

12:30 - 14:30 Å hente data

14:30 - 15:30 Oppgavetid

15:30 - 16:30 Begynner Ă„ lage ting 🛠

đŸș o' clock

(ca. 15:00?)

Fredag

08:30 - 08:45 Stand-up m/ ☕

08:45 - 09:30 Ulike CMS-modeller

09:30 - 11:30 Lage greier

11:30 - 12:30 Lunsj

12:30 - 15:15 Vi prĂžver Ă„ gjĂžre ferdig noe

15:15 - 15:30 Avrunding

15:30 - 16:30 P&P?

Ganske raskt om
semantikk

vi har ikke-semantiske elementer som

<div>, <span>

og semantiske elementer som

<table>, <ul>, <nav>, <article>, <form>

1. Ting skal helst vĂŠre det de ser ut som

Det betyr at hvis du har data som ser ut, eller brukes som en tabell, sÄ skal de vÊre en tabell. 

 

«Ting» man trykker pÄ og som sender brukeren til en annen URL er en link. De skal vÊre lenker.

 

Ting som gjĂžr noe med tilstanden, f.eks. Ă„ Ă„pne/lukke en meny, er en knapp.

 

VĂŠr snill ❀

2. <div> og <span> betyr ingen ting

Bruk noe annet hvis du kan. Bruk main, nav, ul, ol, dl osv.

 

Det er greit for Ă„ styre presentasjon, men de har ingen semantisk mening og bidrar derfor ikke til Ă„ stĂžtte innholdet.

https://blog.gale.com/why-semantic-html-matters-to-accessibility/

3. Én H1, og et hierarki under den

Tenk pÄ det som en disposisjon. Den skal ikke ha mer enn én tittel, bÞr ikke ha hull

For oss som ser ting i visuell kontekst er det irriterende med «klikk her», men for de som kun ser lenkene er det ubrukelig.

4. Lenketekster er kjempeviktige. For alle

Semantikk og tilgjengelighet

Semantikk er bra for alle, men brukere av skjermlesere og andre hjelpemidler trenger semantikken for Ä kunne navigere internettet.

 

Siden vi ikke er slemme, og siden tilgjengelighet er en hygienefaktor prĂžver vi pĂ„ ordentlig. Uten Ă„ si at det handler om «de blinde» 😎

alt-taggen

Alle visuelle elementer pĂ„ siden som er meningsbĂŠrende skal ha en alternativ tekst som beskriver innholdet. Dersom et bilde ikke er meningsbĂŠrende kan du legge inn en tom alt-tagg – da hopper skjermlesere over.

https://axesslab.com/alt-texts/

ARIA

et sett med attributter som gjĂžr det mulig Ă„ gi hint til skjermleseren om ting ved dokumentet (nettsiden) som semantikken ikke dekker.

 

Dette handler ofte om at et omrÄde pÄ siden blir oppdatert nÄr noe annet endrer seg (ARIA Live Regions) eller beskrivelse av skjemaelementer 

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute

Designsystem i kode
đŸ€“+🖌🎹=❀

Steg for Ă„ lage designsystem i kode

  1. Skaff deg oversikt over hvilke ting som skal lages
  2. Ta stilling til om noen av tingene er sÄ like at de egentlig bare er varianter av den samme tingen
  3. Fokusér pÄ de smÄ tingene fÞrst, og bygg sÄ opp de stÞrre tingene med de smÄ
  4. Ting inni ting er ofte to forskjellige ting (forklaring fĂžlger)

BEM

Block Element Modifier

http://getbem.com/introduction/

BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development

http://getbem.com/introduction/

Block

Den stĂžrste bestanddelen. Ett rotelement:

 

 

 

 

Skal kun ha ett nivÄ med elementer under seg.

<div class="card">...</div>

Element

Elementer som utgjĂžr en block. Kan for eksempel vĂŠre tittelen i en .card-block

 

 

 

 

 

 

 

 

Skal kun ha ett nivÄ med elementer under seg.

<div class="card">
    <h2 class="card__title">Dat title</h2>
    <div class="card__content">
        ...
    </div>
</div>

Modifier

Variant av block eller element. Typ stor knapp, alternativ layout osv.

<div class="card">
    <h2 class="card__title">Dat title</h2>
    <div class="card__content">
        ...
        <button class="button button--cta">
            Do it
        </button>
    </div>
</div>

https://codepen.io/jeryj/full/YWwoqd

...

So style. Much attitude

amaze

Such snow. Many spin. wOW

media-list

media-list__item

media-list__title

media-list__image

eller...? đŸ€”

...

So style. Much attitude

amaze

Such snow. Many spin. wOW

media-list

media

media__title

media__image

media-list__item

SCSS/SASS

Noen kjappe regler

  1. Bruk variabler for farger, breakpoints og marger

  2. UnngÄ @extend

  3. Ikke lag for mye smartness med funksjoner og mixins

  4. Bruk &-operatoren der du kan, sÄ slipper du masse skriving

  5. Ikke override ting pĂ„ utsiden av komponenten – dĂ„ fĂ„r du side-effects som er vanskelige Ă„ hanskes med over tid 📉

  6. Bruk relative stÞrrelser (rem og em) 

.card {
  // like marger pĂ„ tvers er 👍
  padding: $padding-medium;

  &__title {
    text-transform: uppercase;
    margin-bottom: $padding-large;

    &--pink {
      color: hotpink;
    }
  }
}

float/flex/grid/...

(ulike mÄter Ä lage layout)

  •                             👎 float

  •                             👍 flex

  •                             âČ grid

ikke bruk. har gÄtt ut pÄ dato. vondt Ä jobbe med.

bredest stÞtte. funker bra ogsÄ i IE10+ (med noen quirks)

fortsatt litt kilent Ä jobbe med, ikke sÄÄ god stÞtte i IE/Edge ennÄ

https://yoksel.github.io/flex-cheatsheet/

Grid

grid-basert layoutsystem der man konseptuelt "lager plass" ved Ä slÄ sammen celler i rutenettet.

 

https://www.w3schools.com/CSS/css_grid.asp

Fra ting til komponenter

Alle elementene i HTML-dokumentet ditt bĂžr vĂŠre der av en grunn. Hvis de er der av en grunn har de en funksjon, og da er de mest sannsynlig komponenter.

Hvis vi tenker BEM, men skriver kvasi-HTML, har vi noe som dette:

<card>
  <cardTitle>Dem linkz</cardTitle>
  <cardContent>
    <list tile>
      <listItem large>
        <a href="http://bit.ly/2HGH1sF">A song</a>
      </listItem>
      <listItem>
        <a href="http://bit.ly/2HVwQ2L">A video</a>
      </listItem>
    </list>
  </cardContent>
</card>

https://codesandbox.io/s/71x0m5w21

Steget vi mÄ ta for Ä lage gjenbrukbare komponenter er Ä tenke pÄ komponentene som en kombinasjon av

Komponenten

Data

(Intern tilstand)

Komponenten sin jobb, uansett rammeverk og CMS, er Ă„ oversette fra kombinasjonen av disse tingene til markup med de riktige klassene.

...her kommer React.js, Vue, Angular og andre rammeverk inn i bildet. De gir oss basisen for Ă„ bygge komponenter.

LUNSJ đŸŒ¶đŸ„’đŸ—

github.com/kbrabrand/kodecamp-starter

(fungerende prosjekt med React og SCSS 👇)

Javscript 101 og
JS i React

(Milosz)

Heeeeeelt fra scratch

Numbers

42

4 + 5

Strings

'Hei pÄ dere, lizzom'

Andre typer

null

undefined

true

false

 

 

Variabler

let - variabler som kan endre seg

const - variabler som er konstanter (Pi)

var - gamlemÄten

 

Roses are Red

Violets are Blue

Naming variables is hard

So let's call it foo

Operators

+ - * / % 

41 + 1; // 42

'Say' + ' something!'; // 'Say something!'

'3' + 4 + 5;  // "345"

3 + 4 + '5'; // "75"

<  >  <=  >=  ==  !=

2 > 4 // false
4 < 2 // false
2 <= 2 // true
3 >= 4 // true
42 == 42 // true

Objekter

{
    name:'Bruce Wayne',
    heroName: 'Batman',
    superPower: 'does bats and stuff'
}

Arrays

const scaryStuff = ['boogeyman', 'spaghetti monster', 'pregnant wife'];
scaryStuff.length // 3

Funksjoner

function add(x, y) {
  let total = x + y;
  return total;
}

add(); // NaN
add(2, 3); // 5

github.com/miloszhygen/javascript101

FUN TIMEz!

React

heeeeeeelt basic... mer kommer i morgen

Plugin

React for Chrome/Firefox

Veldig greit Ă„ ha.

npx create-react-app my-app
cd my-app
npm start

La oss fyre opp en react app

Hva er en komponent

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

// or

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Enten

đŸ¶

eller

[đŸ¶, đŸ¶, đŸ¶]

map

creates a new array with the result of calling the provided function for each value in the array

const list = [1, 2, 3, 4]

const squares = list.map(a => a * a)

console.log(squares) // [1, 4, 9, 16]

Showtime

Kodecamp #1 - dag 1

By Kristoffer Brabrand

Made with Slides.com

Kodecamp #1 - dag 1

  • 631

More from Kristoffer Brabrand