Some notes from me from the Fronteers 15 conference. Not a full transcript or summary of the talks, but just the bits and pieces I found worth noting.
Content blockers can block: scripts, & fonts :) Also, resources from CDN's like google.
Javascript will this way not 'fail' (noscript) but just not work.
Optimize rendering paths! (see filamentgroup: weight-wait)
Tools:
- httparchive. (ie. webpage size.)
- webpagetest.org
- FontFaceObserver (Font events) progressive font rendering
Soon:
- http2, more like progressive enhancement.
- Client hints, send some client info with a request. Ie: a responsive image.
- Link rel="preload", not in browsers yet, but promising! There is a proposed polyfill.
- Via http2: server push. Using rel=preload. Is actually what you are doing with critical css. But the http2 way.
- Stylesheets in ihe body? Breaking up primary and secondary content and styles.
- CSS font-display, progressive font rendering once font loaded.
LibSass is now comparing benchmark (speed) to PostCSS.
Eyeglass, defining sass functions in JS. Global shared dependencies. Filesystem API.
So.. for writing your own sass modules.
Example:
- Eyeglass spriting.
Tools:
- Sass dash. Port of _lodash to Sass
Analogy: agile = bike, moto, car.
Be honest to your clients.
Bring content into the design process.
Tools:
- Sprintr
Design principle: sacrifice elegance, if needed.
The best 'business' case (cost effective) is mostly avoiding ligitation.
Like:
- Algemene Wet Gelijke Behandeling: employment, education, public transport.
- Webrichtlijnen, but what is the status on that?
No case has ever made it to court in NL.
There is no business case. Don't bother. But why not build accessible?
4 levels of accessible building:
- Don't fuck up the HTML
- Check with tools
- Test with assistive tech (screen reader is best demo)
- Ask an expert, accessibility tester
Tips:
- role="button" for links styled as button
- Chrome accessibility tab
- designpatterns.hackpad.com (examples of accessible code)
Tools:
- Tenon (JSON returned! Grunt task)
- Web accessibility test
- Tota11y
Web 'app' is not an excuse for blank screen JS only loading...
Exampes used: talky, svgomg
Tips:
- Script attribute defer doesn't even work in IE9 XD
- If waiting for javascript to load, catch possible interactions, and store them
- Fix render / connection blocking font loading!
- Dust.js. Templating lang. When using mustache type of vars..
- Treat the network as enhancement, offline first ('Lie fi'), via serviceworkers
Tools:
- Purify
- Imagemin (with mix JPEG2000)
- Babel: compiles es6 to es5 compatible code.
- Cssnext does the same for 'css4'. It's part of the postcss ecosystem
- Quantity queries. Funky stuff with styling based on quantities
Browsersync:
- Livereload that actually works ;)
- Proxies existing servers!
- Exposes local ip.
- Syncs clicks and scrolls
Modules via node npm. Common js, loads package. Or even ES6 Browserify compiles into bundles
Like: only Ajax? Import fetch! Npm install fetch. Only pick one method from lodash
Tea tracker :)
Github: awesome-public-datasets
AudioContext
So you can create your own sounds this way. With oscillators, gain, filters and stuff.
Next up in CSS layouts:
- Flexbox (IE11 and up!)
- Grid
- Box Alignment
Grid auto flow, is quite magic.
With great flexibility comes great responsibility: discussions on spec running now.
Align items (row) is nice for veritcal alignment and streching. Works with Flex and Grid (very powerful) now. But will probably work with other items in future.
Tools:
- Flexbox tester
- get.gaug.es (feature support)
- Gridbyexample.com
The art:
- Replicate, so you can put it in a test
- Isolate
- Eliminate, because of 1 and 2 is done, this is easy
Tips:
- Drag folder to Chrome devtools whoosh
- You can save, and even cmd-z!
- $_ in console is the last element you selected (also in DOM selector!)
- Set screenshots in chrome timeline. Awesome
- Set breakpoints on DOM elements