FFConf is a front-end conference held in Brighton every year and here are my notes from the talks that stood out:
Future CSS - Rachel Andrew SLIDES
Rachel covered a number of different future / current in some browsers CSS such as flexbox, grid, @supports, shapes and path-clipping, initial letter, css variables and calc, position: sticky and scroll snapping.
- flexbox: already good browser support
- grid: coming to browsers in Spring 2017. Where flexbox is for one dimension, grid is for two dimensions. Can be used alongside flexbox not either or.
- Grid By Example - Examples/Tutorials/Videos
- How to enable in Canary/Firefox/Opera/Safari
- @supports feature detection with CSS. e.g. Supports will Change your Life
- Shapes + Path-clipping cool clip-path tool
- position: sticky; Firefox, Safari, Canary. Overview on CSS-tricks
- scroll snapping Supported by Firefox, Edge/IE11/Safari (partial).
Technologic (human after all): accessibility remix - Léonie Watson - SLIDES
Excellent accessibility talk with reference to screen readers, writing HTML with aria-roles.
- Aria roles
- Aria name e.g. aria-labelledby
- Aria state e.g. aria-checked
- Use inbuilt HTML semantics e.g. use button not div with aria-role="button"
- Test without mouse, using screen reader
Optimise Your Web Development Workflow - Umaar Hansa
100+ slides with many cool features that are in Chrome Dev Tools. Tools including:
- analyse unused css
- box- and text-shadow in dev tools
- workspaces v2
- terminal in browser (Mac Only)
- ctrl-shift-p: allows you to enter commands like you do with sublime text.
- enable devtools experiments e.g. Allow Custom UI Themes
- enable experimental web platform features e.g. grid
Open dev tools, press F1, Goto "experiments" tab, press shift 6 times. Check out his dev tool tips for more!