XOP/cssconfbp.md

## cssconfbp.md

      
    Raw
  

              cssconfbp.md
            
          
    CSSConf Budapest (11 of May)

Links and Twitter


official site

schedule

@CSSConfBudapest

@CSSConfEU

#cssconfbp

Legend


cool link or something important to take away (or just google it)

[... demo or background story that can't be expressed in text form]
Read before Proceed!


This is the instant notes of the conference flow

Some details are missing (and so do Caps), others just dropped for the sake of brevity

Or in favor of some more important details

If you have something to share - links, pics - comments at your disposal!

=======
David Khourshid - CSS Animations, Orchestrated


@davidkpiano

animation delay is not your friend, they can't be repeated and create a mess in a loop.
this is how CSS works right now.
better use artificial delay which is currentTime/totalTime.
compositions (animations that include groups of animations) are itself a pretty ugly code, but still do the job.
David Berner - Shedding light on the Shadow DOM


@DaveOrDead

cool thing about Shadow DOM is the ability to incapsulate styles.

create component - share with users.
example component - notification with title, message, button, close button and timestamp
var root = component.creareShadowRoot(); // attachShadow
root.innerHTML = '...';

using content is deprecated, replaced with slots

and slots not used anywhere yet...
<slot name="heading"></slot>


for demo purposes content is used

root.innerHTML = ...
<style>

	:host {
		...
	}

	:host(.is-active) {
		...
	}

	:host-context(.other-theme) {
		...
	}

</style>

styles are scoped to the shadow root
::content // ::slotted
::content h3 {...}
::content p {...}

deprecated
#component::shadow p
#component / deep / p
#component >>> p

support

chrome
opera
ff - flag
safari in progress
edge - nope

Stefan Baumgartner - Super Mario Bros Principle


@DDPPRT

the game design (Mario Bros) principles sound more like CSS principles:

I can insert anything into system at least it could do something

the interface is JS
web components
<player>
	<header>head</header>
	<section>body</section>
	<footer>legs</footer>
</player>
[... css custom properties advocacy]
controllable via JS
Component.style.setProperty('--myVar', '100px');
support

chrome 49+
opera 46+
firefox 45+
safari 9.1+

it is possible to use polyfill
custom properties is a styling interface

it can be tough since you have to add multiple properties for every new component
the solution:

custom properties sets (not there yet)
inheritable cascading mixins

don't avoid the cascade, but use it in a tamed manner (very very carefully)

documentation is important in order to keep all custom props meaning
tip from Q&A - sass should be compatible with --custom-props
Rachel Andrew - The new CSS layout


@rachelandrew

[... from her slides: flex is still considered modern css layout...]
current CSS grid support - chrome with experimental feature flag on

flex is very well supported today!
do separate source and display

grid controversially to flex allows changing order in two dimensions

changing order should only be visual-wise, not logic-wise

use flex shorthands instead of long ones since it is the more intelligent reset according to spec


Flexbox tester

css grid 'fr' stands for the fraction unit
we can finally do the three-column layout!

[... i hope there's something more though]
Estelle Weyl - Simply Accesible


I am the twitter wh%re


@estellevw

@webdevtips

@standardista

a11y and perf with web standards
site sizes increased 339% in size from the dawn of 3G to nowadays
disability can be situational and permanent
[... following demo is about some visa card web application revised by Estelle]

50000 lines of js
41 deps

"my version"

1000 js / 1000 css
few deps


label for the input element with name="..." and for="..." - used by screen readers, don't miss them!

[... how to recreate jquery plugin with js and native html5 attributes]
various techniques (thinking outside the box) fix many a11y bugs and data consuming
simple carousel (merry-go-round) recreated with radio buttons and almost no JS

you don't need aria spec if you use native html5 attributes

Glenn Maddern - CSS Modules, CSS Variables & the Future of Reusable CSS


@glenmaddern

sharing and reusing css is hard - why?
consistency is important

with JS it is much easier

http://graphicriver.net

how to build components that can be reused

or at least close to it

semantic ui

3000 theming variables - sort of code smell
make components less responsible and more responsive
idea is to move dimension styling outside of component
and put it to the parent
.parent > * + * { ... }

css variables
.component: {
	--size: var(--offset, 2rem);
}

component could be places in other system and be restyled
responsive to environment in a common way
position: relative / absolute still creates bounds
step 2: explicit components

semantic-ui
rebass

step 3: resilient components
the component along the long spectrum remains useful
Jonathan Snook - Responsive Web Applications with Container Queries


@snookca

[... talk about processes not the code]
one of the reasons of inconsistency - different tech stacks
making applications responsive -

designers haven't thinking of it
at yahooo 13000 eployees
every platform had it's own design

designer had vision of the feature across the platforms
at shopify 100 people
mono app with accessible templates
for a long time mobile web was ignored
components can appear in different environment
single page can have dozens (hundreds!) of variations

with media queries you have to know possible interplays of different objects
container queries - interplays within a single object
there is no spec, so we have to use JS to "polyfill" this
different polyfills:
// one
.element:media( min-width: 500px ) { ... }

// two
.element[min-width~=500px] { ... }

// three
@element .element { ... }

didn't use any of it because of the CORS problem with these libs and their CSS
elements = [
	{
		module: ....
		className: ...
		minWidth: 768
		maxWidth: 1024
	}
]

lessons learned

it's about purpose not properties
product design is a team sport
container queries enable faster development
think responsive before they need to

reframed goal:

"evolve design" --> "allow anybody to make product-wide designs changes quickly and easily"
there is no solution - learn from experience
Jackie Balzer-  Schrödinger’s Website: Using Sass To Build Indeterminate, User-generated Websites


@jackiebackwards


adobe portfolio


wysiwyg builder
5 starter themes (layouts)
automatically responsive
many things can be changed - tons of customizations

challenges

everything is customizable
immediate result in the editor

Tenets

DRY
reusable
human written


json to sass maps

map-me function returns key in map in map
css variables still badly supported

so they chose sass maps
header
	font
		...
	fontStyle
		...
	background
		...

breakpoints
$theme-features
	top-header: true
	cover-meta: true
	small-responsive-nav: true

number of columns
smaller images on smaller screens
<picture>
	<source>
	<source>
	<img>

vertical rhythm

calculate dimensions in %%
never go below 14px


formula for calculating fonts - spacing

Kevin Lorenz - Visual regression testing for CSS


@verpixelt

why we need testing

inheritance
refactoring
complexity
responsiveness
human flaws

overview of testing tools

based on headless browser
interaction with browser - selenium or casper
tool for regression testing itself
software for screenshots

basic setup

screen current layout based on setup
it runs if no changes it passes
if there were changes it will report an error and corresponding screenshot

[... demo]

learn.visualregressiontesting.com

Andrey Sitnik - The Componentization of the Web


@andreysitnik

[... didn't attend]
Tim Holman - In the Wild


@twholman

[... didn't attend]
=======
Thanks for reading!
https://github.com/XOP
=======
BONUS - Highly Opinionated TL;DR


go ahead and try CSS animations now; one day you can even draw a foxy!
if you used content for the Shadow DOM, check the spec once again, slots are coming
take a break from SASS to look into CSS custom properties, they kinda cool
while waiting for the grid support, use flexbox at least, support is pretty sufficient
start working with purpose not jQuery; you won't need ARIA if you follow HTML5 specs
make components less responsible and more responsive - move dimensions-business to parent
there are at least 3 container queries polyfills, but you can always create your own
highly customizable project is a hard CSS nut to crack; use sass maps and responsive <picture>
visual regression testing for CSS can nicely accompany your unit and end-to-end tests; start
?
?