Skip to content

Instantly share code, notes, and snippets.

@fatpixelstudio
Last active October 12, 2015 13:52
Show Gist options
  • Save fatpixelstudio/d75b96d80c614d5195a1 to your computer and use it in GitHub Desktop.
Save fatpixelstudio/d75b96d80c614d5195a1 to your computer and use it in GitHub Desktop.
Fronteers 15 notes

Fronteers 15 notes

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.

Thursay 8-10-2015

Scott Jehl: Delivering Responsibly

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.

Chris Eppstein: Lightning Fast Sass

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

Primate: Walking the rightrope between mediocraty and bankrupcy

Analogy: agile = bike, moto, car.

Be honest to your clients.

Bring content into the design process.

Tools:

  • Sprintr

Alice Bartlet: What's the business case for accessibility

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:

  1. Don't fuck up the HTML
  2. Check with tools
  3. Test with assistive tech (screen reader is best demo)
  4. 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

Jake Archibalt: Modern Progrssive Enhancement

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

Friday 9-10-2015

Wes Bos: Front-end tools

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

Sarah Jenkinson: Open Data

Tea tracker :)

Github: awesome-public-datasets

Soledad Penades: Hands-on web audio

AudioContext

So you can create your own sounds this way. With oscillators, gain, filters and stuff.

Rachel Andrew: What about old browsers

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

Remy Sharp: The art of debugging

The art:

  1. Replicate, so you can put it in a test
  2. Isolate
  3. 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment