JSConf EU & CSSConf EU 2017

css.md

CSS Conf EU 2017

Ivana

how we categorise means what we value

people or groups are ranked one above the other according to status or authority

why hierarchies? are helpful or harmful? which ones are we drawing? and why are they problematic?

they have consequences.

Patrick

TTFMP time to first meaningful paint

first paint after which biggest above the fold has happened and fonts have loaded

lighthouse to measure it

how to optimise it:

• inline css
• preload
  use http headers (link preload header)
• server push
  http/2

Sareh - scaffolding css for Scale

lightweight

• localised
  • typography: line height, fonts size for each language
  • grid: direction, text-align, margin

easy to reuse

communicate to future you!

Rachel Andrew - where does css come from (today)

since 2011 with IE10, from microsoft team

bloomberg sponsored implementation in blink

gutter problem, devs wanted gaps between tracks

by playing with experimental specs, the community can influence the specs

browser flags vs vendor prefixes (flexbox the latter, grid the first)

2016 grid spec done

at-risk features: subgrids, it may not be implemented by two browsers

march 2017 grid in all the browsers

why it takes so long? because there are a lot of stakeholders, with different businesses, diff priorities

David - reactive with css

css variables + observables

material motion

Nadieh & Shirley - visualization

sketch before coding

you need the data before deciding final design

Mark - unified styling language

scoped styles: bem is a convention

bem blocks are components

components are defined in js

critical css

smarter optimisations

Glen - components

Patricia - css art history

Guil - future of css

css variables

preprocessors: static, don't run in the browser, not aware of the DOM structure

css vars: aware of the DOM structure, dynamic, update at runtime

with js: getProperty, setProperty

compositing & blending

js1.md

JS Conf Day 1

main - Addy

only load what you need

use idle time to load anything else

code splitting, tree shaking, bloat of baseline, babel present env

order loading thoughtfully

cache aggressively

link preload to define to the browser what is high priority

main - Anjana - immutable data structure

functionable programming: pure functions, transform the input into output, no side effects, no change in global state, pure data in data out. it uses immutable data.

with mutability you have overhead to manage, who changed what and when. and bugs.

with immutability you allocate and copy, but copying is a waste of time and space.

the better way -> immutable data structure, once you created, it never changes.

persistent data structure keeps the old versions around

old versions stay put, new created quickly

trees & sharing:

path copying

hash array mapped trie -> google it

library: mori

library: immutable

main - Laura - accessibility

you have to make it happen

what is a.? ensure access is fair to/for everyone

physical
visual
hearing
cognitive
permanent
temporary

start small

npm install pa11y pa11y-ci

main - Chris - tools test Jest

performance, features, adoptability

## side - Meara - math

js2.md

JS Conf Day 2

main - Denis - NASA

trust is based on expectations of what is normal for js

no function longer than a sheet of paper - one function do one thing

simple control flow constructs -

main - v8

js is dynamically typed

## side - sourcemaps

sourcemap http header

mozilla source-map npm module

side - maggie - patterns in library design

ease of use - it's ok to make it simple - your users don't read the documentations

invocation: start with static invocation - drawback like on lodash is a lot of callbacks, so one solution is chaining

configuration: every library needs one, options objects, should allow for pluggable business logic, required parameter first, options object for not required after

defaults: best by default, but default only when there's a best one

errors: throw for obvious developer errors

side - sarah - regex

main - maureen - offline first

## main - tc39

side - alexander - outbreak