Highlights of the 2015 Conference

Moscone Center, San Francisco

HTML5, Level 4 CSS, ES6, and more!

Sean Bischoff, Attendee

The Big Takeaways (jump to...)

Post Processing (Transpiling)

The cons of pre-processors, the pros of post-processors

ES6 - now known as ES2015

The latest version of JavaScript is here. Ways to start using it right now.

FALCOR: One Model Everywhere

Netflix open source library aims to change the way web applications request and handle data.

What's new in "CSS4"

Exciting new Level 4 Selectors, Features, and Rules

Bootstrap & SASS

A taste of basic page construction using Bootstrap, and compiling resources via SASS

Day 1 - POST is the new PRE Aaron Ladage

Pre-processing deals with

  • cross browser issues
  • vendor prefixes
  • no variables
  • no real inline importing
  • no nested selectors
  • no functions
  • no color manipulation
  • no basic arithmetic
  • messy syntax
  • cross browser issues
  • difficult DOM traversing
  • difficulty with effects / animation
  • Within the language itself:
    • no module loading system
    • quirky type coercion
    • no interpolation / template strings
    • no fat arrows
    • no default function definitions
    • no classes
    • no constants

Preprocessors became solutions. Examples: SASS, LESS, Coffeesript, jQuery.

Typical process cycle for CSS pre-processing

  1. Developer codes in proprietary syntax (SASS)
  2. Test runner / compiler (GRUNT)
  3. Standards based CSS output by #2 (CSS3)
  • more layers of abstraction
  • pre's use own proprietary languages & syntax, it is not "real" code.
  • potentially buggy
  • not easily extensible
  • must be compiled forever
  • browsers are catching up (creating redundancy)
  • compile time required, impacts developer time
  • DOM vanilla JS traversing is not so hard, really
  • IE10/11 have eliminated most cross-browser compatibility issues
  • CSS3 is better suited for transitions and animations
  • Impress your friends with your library-less street cred!

Pre-processing technically these are still preprocessors

Transpiler

Write your code in original languages (JavaScript, CSS)

CSS PostProcessor:

JS Transpilers

Our NEW post-processor process

  1. A developer writes code in standard (even next-gen) CSS or JS
  2. A task runner (GRUNT, PostCSS) notices the change and transpiles browser-friendly CSS/JS
  3. Standards-based CSS/JS is output by the task runner and fed to the browser
                              .row {
                                display: flex;
                                background-color:var(--color-blue);
                              }
                  
    outputs to...
                              .row {
                                display: -webkit-box;
                                display: -webkit-flex;
                                display: -ms-flexbox;
                                display: flex;
                                background-color:var(#173fb1);
                              }
                  

How to get started?

  • A popular replacement for Compass's vendor prefix mixins.
  • Automatically adds vendor prefixes to CSS3 properties.
  • You define which browsers should be supported via a config file.
  • Cross-references the always-current caniuse.com database.
  • No need to memorize special function names; just write CSS and let it do its work in the background.
  • Autoprefixer
  • postcss-calc
  • postcss-nested
  • postcss-import
  • postcss-mixins
  • cssnext
  • postcss-custom-media
  • postcss-color-function
  • modular; you can make your own choices
  • write CSS using CSS
  • use CSS3 as you like
  • use CSS4 or whatever (postcssnext)
  • works with existing task runners
  • built on node.js
  • no ruby dependency
  • easy to debug
  • write own plugins in JS
  • faster compile times
  • countless plugins
  • Some FEATURED Plugins
  • Partials: postcss-import
  • Globbing: grunt-sass-globbing
  • Nesting: postcss-nested (saves you writing redundant, long target hierarchies)
  • Variables: postcss-custom-properties.
  • Yes, the proposed CSS custom properties syntax is ugly, but it will become standard
  • vars already supported in FF
  • postcss-simple-var preserves SASS like vars
  • Color: postcss-color
  • can follow proper CSS color spec
  • Mixins (SASS still wins) postcss-mixins, postcss-calc
  • Extends

ECMASCRIPT 6

  • We're not that far away from next-gen CSS and JS being adopted into standards and supported natively in all modern browsers.
  • Until that happens, it's a wonderful time to get as close to "real" code as you can in your development process.
  • The benefits of switching to postprocessed CSS are debatable, but do you get you closer to writing CSS again.
  • Switching to transpiled JS is a no-brainer. Do it now.

Day 1 - FALCOR: One Model Everywhere Jafar Hussein, Netflix

FALCOR allows you to code like all the data is there on the device

REST the problem is latency, maybe not ideal.

10 years ago the web was there to GET things.

Now, the web is there to DO things

REST-less

WEb apps do large amounts of stuff with small resources.

Netflix becamse a REST-less API

RPC (Remote Procedure Call) :(

FALCOR is an open source library from Netflix that lets you represent all your remote data sources as a single domain model via a virtual JSON graph. You code the same way no matter where the data is.

  • Takes all data on the server
  • Exposes it as a single JSON //mode.json
  • Acts as if all data is available on the device
  • Is an ASYNC Model, API
  • promisejs.org -
  • in memory JSON
  • Client API can remain unchanged even if you move the residence of the actual data

We do not want a TREE - duplicate instances (leaves) of same entity.

Example - genre lists (Recently Added, Watching) - a title (movie) can be duplicated into other genres, we want a single reference (change rating, all titles in all genres reflect, no staleness)
  • never make a copy of an entity
  • create top level map (in your JSON): "titlesByID"
  • replace each instance with a reference: ex: { $type:"ref", value:"titleByID[523]}
  • OR $ref('titleByID[523]')
  • //presentation moved model to server - using Express MVC server
  • .batch - one HTTP request made. FALCOR intelligently batches multiple requests coded by you, into 1 actual HTTP request
  • router - multiple JS paths in a single request - Falcor will check cache, fetches what isn't cached
  • you can bind a particular model to a particular title (element)
  • Does not use browser cache. Turns it off and gets it at memory
  • LRU (least recently used) cache http://mcicpc.cs.atu.edu/archives/2012/mcpc2012/lru/lru.html

(Node.js) Web Servers FALCOR has been used with:

Day 1 - Deep Dive CSS

  • box-sizing: content-box //default
  • box-sizing: border-box //compresses width/padding/border into the "width" value
  • display
    • block
      • margin collapsing - original intent was for typography - margin is for text lines. This means that for two block level elements (ex: divs) the top element's bottom margin will collapse, so we don't get unwanted additional vertical spacing. See ** below.
      • 100% width
    • inline-block
      • white-space sensitive. - two items can display with a slight space between them. Why? Has to do with the actual HTML markup - a newline character between them. Fixes:
      • renders inline
    • inline
      • Width & Height are disabled
      • line-height affects vertical alignment
  • Floats - originally meant for flowing text around a picture
    • Gets removed from normal flow
    • Renders inline left/right of parent
    • Display has no effect - except "none"
  • Clearing Floats:
    .clearfix::after { content:""; display:table; /* fix for browser quirks, needs to span width of parent */ clear:both }
    //clear:both works on the last element, so we create an "after" element
  • Alternatives to Floats
    • Set display to inline-block
    • Direction + inline-block
  • Block Formatting Contexts (http://www.w3.org/TR/CSS2/visuren.html#block-formatting)
    "In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. **Vertical margins between adjacent block-level boxes in a block formatting context collapse."
  • A secret benefit of overflow http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/
    • img {float: left}p {overflow: hidden}both in parent, left indents all text to right of image (even what flows below the image)
      Normal <p> following a left floated image:
      <p> with overflow:hidden

      Having too many libraries plugged into your web application can lead to a frustrating juggling act. Having too many libraries plugged into your web application can lead to a frustrating juggling act.

      Having too many libraries plugged into your web application can lead to a frustrating juggling act. Having too many libraries plugged into your web application can lead to a frustrating juggling act.

  • PX works as expected: HTML > .PARENT > .CHILD
    • will not scale with fonts
  • EM - taken from parent: HTML/26 > Parent 42px > Child 1em - actual is 42px
  • REM - fontsize from HTML element
    • very helpful for responsive design
    • HTML/26 > Parent/68 > Child/1rem - actual is 26px
    • font should scale with document, root component class (.button, .dropdown, etc)

Day 1 - Modern UI Dev with Node.js Netflix

Interesting Concepts

          * universal JS is better - client & server
          * is a unified process
          
            * serve
            * transpile
            * test
            * templates
          * step 0 - use modules
          
            * IIFE is not a module. What is IIFE?
            * 
              * An immediately-invoked function https://en.wikipedia.org/wiki/Immediately-invoked_function_expression
              * 
                * useful for establishing private methods
              * ES6 and common JS modules are modules
              * 
                * commonJS https://en.wikipedia.org/wiki/CommonJS - default module system; different syntax for browser & node :(
              * "The code you write today is what will be Copy + Pasted tomorrow!"
          * Start writing ES6 now
          * Use Babel now (transpile)
        Classes
          * UI components as classes (frameworks)
          * let go of object.extend
          * mixins of 2 classes (by React) can overwrite duplicate methods (lose 1st method definition)
          * Goal: UI composed only of components
          
            * links
            * buttons
            * inputs
            * etc, all are components
          * Build Process
          
            * foundation
          * Rule of Thumb - if you require > 1 plugin, make a new module
        Testing
          * as you code
          * before you push
          * on your CI server
          * make it easy, fast, automated, easy to bootstrap, create a pro-testing culture
        Eslint - JavaScript linting utility. Why?
          * style checker
          * pluggable, future friendly
          * config rules
        Ideals
          * RESTful APIs - http://www.restapitutorial.com/ http://www.restapitutorial.com/lessons/whatisrest.html
          * Write JS
          * "Universal" JS is very difficult. https://medium.com/@mjackson/universal-javascript-4761051b7ae9#.eyk8iw1y1
        Isomorphic JavaScript
          *  the future of app dev.
          * These apps can run both client-side and server-side. Backend & Frontend share the same code.
        Webpack + Browserify
        Node code   vs Browser Code
        bundled            not bundled
        Steps
          1. Start small when transitioning
          2. Iterate on modules. Learn & refactor - aren't build all at once one time
          3. Keep your code clean
          4. Automate
      

Day 1 - Building Websites that Work Everywhere Doris Chen, Microsoft

  • IE Edge (browser) for Windows 10
    1. Similar to Chrome, Safari
    2. Test runner / compiler (GRUNT)
    3. Remove IE specific code
  • FREE Tools at dev.modern.ie
    1. Site scan
    2. Browser screenshots
    3. Windows VMs IE6 - IE11
  • Paid Tool
    1. Browser Stack - live, web-based browser/device testing. Supports local testing too.
  • Vendor Prefixes
    1. -ms- Microsoft
    2. -moz- Mozilla
    3. -o- Opera
    4. -webkit- Safari, Chrome, etc
    5. ALWAYS code the rule without the prefixes, too!
  • Autoprefixer http://autoprefixer.github.io/
    1. pulls from caniuse.com
    2. Is a "post-processor"
    3. Zip from Github with links fixed to run out-of-the-box: autoprefixer.github.io-master-sb-localized-links (ZIP)
  • Browser Detection - Bad
    1. Too many browsers to test all
    2. Bad to use, depends on assumptions
    3. User Agent in header is bad
      1. Easily spoofed
      2. End up with messy browser sniffing
  • Feature Detection - Good!
    1. Based on what browsers support, not their versions
    2. Dynamic load custom code for missing features
    3. Used by Modernizr, see below.
  • Audio / Video
    1. mp3, mpeg-4 are the best for Cross Browser compatibility
  • Fiddler
    1. Telerik's Fiddler
    2. Change response > syntax view, can edit response
    3. Refresh page, see your edit
    4. Close fiddler, it goes back to normal
  • Are HTML, JS, CSS
  • provide support for missing features (in older browsers)
  • use to fallback gracefully or mimic functionality
  • Modernizr
  • feature detection
  • all HTML5 features
  • all CSS3 features
  • can create tests
  • has polyfills
  • build custom Modernizr build with just desired features
  • suggests polyfills
  • Modernizr

Day 2 - Evolving Web Apps with Module Based Design Components Mike Kivikoski cantina.co

Same concept as Legos

Modular component system benefits

Example: Netflix episode blocks. See their HTML. The Episode lookup module.
Bad Examples: Virgin America, Santander - comment elements treated differently, multiple sets of CSS

Stop designing Screens, start designing Components

Prebuilts

Atoms > Molecules > organisms > templates > pages

Sketch layouts w/prebuilt components

Examples

How to Start

The Single Responsibility Principle - Harry Roberts @csswizardry

Variable Usage (Less, Sass)

Media Queries

Grid classes - screenshots

Review steps

Mike's CSS naming Preference

Starting the Styleguide - writing Documentation

When making changes

Frameworks

Misc

Day 2 - What's New in CSS4?Bharath Chakravarthy

There is NO CSS4, there are just new modules "level 4...".

Level 4 Selectors, Features, Rules

Level 4 Selectors - see working demos at: http://css4selectors.parseapp.com

CSS Level 4 Properties

Variables

Day 2 - Upgrade your JavaScript to ES2015 (ES6) David Greenspan

You can have the nice ES6 things now, using ECMAScript 2015 and BABEL

A good standard is...

JavaScript = ECMAScript = ECMA-262.
JS has been lacking in processing leadership (whatever that means)

A short history of ECMAScript

Rebranded - going forward we will have

JavaScript Future

Transpilers

ES 2015 syntax goes in, ES 5 (or ES 3) comes out

Transpiler Concerns

Babel beats Google Traceur (in presenter's opinion), why...

New ES2015 Features

CLASSES!

ARROW FUNCTIONS

LET and CONST

Import / Export

Transpilation is the future

3 way cycle

        browsers
     /            \
standards -    transpilers

Features that are not recommended to use at this time:

Misc

Day 2 - What is Babel and How Do I Use It? @loganfsmyth

* * * * * * * * * * *

To install Babel

npm install babel

npm - is a way to run commands easily

npm "scripts" build, watch, test, server

Karma test runner opens browsers for you

Compile a whle directory of files from src to lib

$(npm bin)/babel src -d lib

Compile a single "input.js" into "output.js"

$(npm bin)/babel input.js -o output.js

Browserify (there are others too, like webpack)

install Babelify plugin

babel has a ton of options

Babel is

This will expand alot in 6.x

Misc

Day 3 Training - Bootstrap 3