630 - 700 - Registration
700 - 715 - Welcome
715 - 740 - WebAssembly, Demystified
740 - 805 - Building a CSS Style Guide
805 - 820 - Angular Jeopardy
820 - 845 - NgRx: How Angular does Redux
845 - 900 - Angular Panel

https://www.meetup.com/modernweb/

1) WebAssembly Demystified

Speaker: Jay Phelps, Senior Software Engineer, Netflix

• Date: Sep 9 2017
• Venue: Google Building SB45 1345 Shorebird Way, Mountain View, CA (map)

Title: WebAssembly Demystified

Speaker: Jay Phelps, Senior Software Engineer, Netflix

Brief: A revolution is about to begin. WebAssembly (aka wasm) is shipping in all modern browsers, but since it’s (intentionally) very low level, it can be difficult to understand how it will be critical to future web applications—and definitely not just games and C++!

Title: Building a CSS style guide with consistency, accessibility and performance best practices

Speaker: Archana Sankaranarayanan, UI Engineer, Netflix

Brief: Creating a common CSS pattern library that our teams will use and maintain is challenging. We struggle with overriding styles, high specificity, redundant CSS, just to mention a few. So how do we build a reusable pattern library that cuts down CSS size, reduces complexity for the browser, offers consistency to our products, and enables accessibility?

Let’s dive deep into building every UI element of our pattern library with consistency, accessibility and performance baked in. We will wrap it in a style guide using PostCSS for ease of reusability. We will also look at CSS analysis and monitoring tools for maintaining the style guide through the lifecycle of the product.

Web Assembly : c++, Rust

Other languages too Java, OCaml and oeven new ones

In browser in march

brand new language => Turbo Script => looks like typescript

not gc, must call ‘delete’

within next 4 - 5 years, we’ll be

what to use

• Heavility CPU-bound number computations
• use it in game
• unreal engine running in chrome

webassembly bineries sooner in npm packages

binaries

• what is a stack machine?
  • push, pop, LIFO
  • stack machine: instructions on a stack
  • opcode mnemonics, i32.add -> 0x6a
  • 1+1 =>
  • as a stack

i32.const 1
i32.const 2
i23.add
call $log

• compilers will do many optimization

i32.const 3
call $log

• s-expressions

• source map support is coming

• how to play?

  • webassembly explorer: (https://mbebenita.github.io/WasmExplorer/)
  • (webassembly.com)
  • (https://github.com/kripken/emscripten)
  • (http://kripken.github.io/emscripten-site/)
  • emscripten emcc main.c -s WASM=1 -o app.html

• webpack is adding support

• direct access to web apis,

• garbage collection: coming

• multi-threading: coming, real concurrency

• the revolution is just beginning

2) Building a CSS Style Guide

• CSS Style Guide, Archana Shanaranarayanan
• CAP (consitenency, accessibility, performance)

Part 1. big css problem

• chrome dev tools => use audit **
  • unused css -> 94%
• http://cssstats.com **
  • 19 unique z indices

Part 2, build a style guide

slide

• [pattern library -> css => style guide generator + style guide template]
• pattern lib
  • atomic: colors, typography,
  • molecules: card, modals, lists, tables, tables, => react. components
  • infrastructures layotus, grids, layers
• style guide css
  • separate structure and skin
  • using intent to name the component
  • colors: [primary, danger, success],
    • divider colors, themesm, gradients
    • accent colors
    • primary text, secondary text, caption, links
  • why name with intent?
    • themes, rebranding, progress web app for different devices(andro, ios, web)
• color contrast checker **
  • text: .display-4, .display-1, .headline, .title, .body-2
  • button: primary action, passive, book hotel, enrole
    • large primary,
• a11y style guide
• https://alistapart.com/blog/post/style-guide-generator-roundup
• postcss style guide

3)

4)

Title: NgRx: How Angular does Redux

Speaker: Jeff Cros, nrwl.io