Monday, June 26, 2017

Fluent Conference 2017 - Personal Recap

Fluent Conference 2017 -- Personal Recap

The following is my summary and experience of my time at O’reilly’s Fluent Conference on 6/21 – 6/23 in San Jose, CA. This is not intended to be coverage of any of the sessions I went to, only an account of the relevant, interesting, and/or curious bits that I got from each interaction

Ignite Talks:

I enjoyed attending the ignite talks, especially since I was a runner up for presenting. The presenters were well rehearsed and did a great job in the rapid format that is ignite. I was able to take some notes on what I can do next RFP rounds to potentially get farther. 

One of the talks, which was particularly interesting was about communication and expectation settings

Good questions to ask: 

  • “What happens after I say yes?” 
  • “What happens if something goes wrong” 
  • Most of life is setting expectations and these questions help manage that

  • Lockdown: A security primer

    I always enjoy attending security sessions, It is always good to refresh your personal paranoia. Most of this isn't new, but there are some new attack vectors that I hadn't heard of before. For example the SSLStrip was new to me, as well as some of the easy client side attacks that are available now. 

    Apps are more complex, yet our security knowledge has remained relatively constant
    “Security is like insurance: You only know how good it is after there is an incident”
    Attacks are escalating in severity and the barriers to staging an attack are lower than ever]

    • Man in the Middle Attacks 
      • Defenses: everything needs to be https, specifically TLS not SSL 
      • For man in the middle with SSLStrip, defense is Strict Transport Security (including subdomains) 
    • Client Side Attacks 
      • This includes styles 
      • Opt in to software / libraries that do most of the user validation for you
      • Be very careful about your browser plugins 
    • Embedded malware 
      • Limit attachment types (and do more validation than just extensions) 
      • Optimize and re-process all images (especially dumping non-visual info)
      •  Do not permit arbitrary HTML input 
      • Whitelist content 
    • Cross Site Request Forgery 
      • Defense: CSRF Token with non-predictablity and per request configuration 
    • Click Jacking 
      • Defense: X-Frame-Options

    Async in Js

    This was a fantastic review of the pros and cons about the different methods of async in JS. I did not know about Async/Await or Generators. 

    • Callbacks 
      • Cons: 
        • Pyramid of doom 
        • difficult to decode
        • inversion of control 
        • (Note: Chrome has an async button in dev tools for debugging )
    • Promises 
      • Cons: 
        • No cancellation 
        • Lots of nesting 
        • Inside of thennable is still complicated, 
        • Too many libraries 
    • Async / Await 
      • Built into JS 
      • Looks synchronous but non blocking 
      • Still not cancelable 
    • Generators 
      • Uses yield and next keywords 
      • Easy to read – looks synchronous 
      • Pause and cancellable


     The keynote format had 5-8 mini sessions inside the keynote. The theme of the conference was "Build a Better Web" and obviously most of the keynotes focused on that. 

    • Are we really taking advantage of the technology? 
      • “Whether we are CSS or JS we are united by our users” 
      • On a screen, we are processing in the visual cortext, which means it drives out all other brain activity 
      • Apple ear buds are more than headphones, it is the start of implantable computers 
      • Could we interact without a screen? 
        • Could an always listening device (like Responsive Voice.js) give us a summary of the conversations of our day? 
        • Or help give insight into our mood? 
        • Could it make us better humans? 
    • Building a culture of collaboration in devops 
      • Things I need to look into more:
        • Atlassian Dev Ops Playbook 
        • Team Help Monitor 
        • is a focus on tools and the community, it allows for remixing projects for API and community 
    • The unsexy pillars of the web:
      •  Security, Accessibility, And Performance 
      • “You can’t fix what you can’t measure” 
      • We live in a web bubble of privilege of speed, access, and availability. 
      • “Data changes irreversibly into information can can not be extracted from the information”. It would be like asking “what were the dimensions of this melted ice cube” or “how much milk was used to make this cake” 
    • Accessibility is about software quality

    Functional JS Data Structures

    Excellent description of how functional JS works, especially with immutable arrays. The presenter was super passionate about functional JS and was a joy to listen to.  Most of the talk was defining fuctional data structures vocabulary

    • Perstistant data structures 
    • Path Copying & Structual Sharing 
    • Trie => retrieval tree 
    • Bitmapped Vector Trie (32 bit branches are ideal) 
    • Hash Array Mapped Trie 
    • Libraries
      • Immutable.js (sort of OOP) 
      • (more purely functional and based on clojure)

    14 ways to bounce a ball (through code)

    I had higher hopes for this session. Having taught Flash based animations for nearly a decade, and having left that scene a couple of years ago, I was hoping to get some intel on the tools that people are using to animate. Overall it was nothing more than a list of code based tools to animate. The presenter started out with a client created animation in Adobe Edge Animate, which of course has terrible, not maintainable output. So the presenter went on a quest to discover a better way to animate with maintainability.  Ultimately despite the research, could not create the richness of a visual animation tool, and used the Edge Animate output with all of its inline unmaintainable ugliness. 

    But for reference here is the list that he talked about. 

    • Browser 
      • Vanilla JS 
      • Css Animations 
      • SMIL – deprecated 
      • Web animations API 
      • HTML5 video tag 
      • Animated Gifs 
    • Tools 
      • Greensock 
      • Velocity 
      • Jo.js 
      • Anime.js 
    • Other 
      • Jquery Animations 
      • P5.js 
      • D3.js 
      • Matter.js 
    • Animations Paradigms 
      • Math (equations)
      • Physics 
      • Flipbook 
      • Keyframes


    Being a CSS novice, this was a great session to learn some of the less used features of CSS. I especially liked the alternative (better) option than important. 

    • CSS supports counting, and could be used for counting errors 
    • UI selectors that are not common 
      • placeholder-shown 
      • user-error 
      • indeterminate (checkbox w/ slash) 
      • read-only 
      • read-write 
      • Smell: use of important 
        • Instead of important, use multiple class decorations 
        • .disabled.disabled is stronger than .disabled 
        • #theirWidget#theirWidget doubles the weight of the selection 
    • CSS supports blendmodes
    • CSS supports shapes 
      • Clip-path (shape or SVG) 
      • Shape-outside is the HTML container shape for word wrapping 
    • CSS supports masking 
    • CSS “Material Design Icons” 
      •  Font-family: “Material Icons” 
      • Transforms words as icons 
    • CSS as a modernizer with @supports

    Schema First Development with GraphQL

    I have heard around the office about our GraphQL, I didn't know much about it, so this was an excellent primer. 

    • GraphQL provides an intermediary interface contract between the front and backends 
    • Better then REST because it reduces round trips and simplifies maintenance and provides only the data the client needs 
    • It is a specification not an implementation 
      • Schema with strong types 
      • Query schema 
      • Results 
    • Requirements 
      • Hierarchical 
      • Product centric 
      • Strong types 
      • Client specified queries 
      • Introspective 
    • “Prioritize the developer experience”

    Keynote Day 2

    • Diversity and Inclusion Post mortem 
      • 10 years and $500M invested and virtually no improvement 
      • What went wrong 
        • We have not defined good outcomes 
        • We have not created any methods of accountability 
        • Not measuring inclusion, retention, promotion, or equity 
        • Not monitoring all intersections 
        • Too much reliance on Unconcious Bias Training 
        • Not responding well to reports of harassment 
        • No safe methods to speak up 
    • You can’t get comfortable on the web 
      •  Best photo on slide of whole conference =>
      • You don’t need to know everything, but make sure you know your foundations well
      • why-learing-to-code-is-so-hard:
    •  On Community and Dev 
      • For humans communication is everything 
      • Technology isn’t neutral 
      • Commuinities break from lack of ability to deal with conflict 
      • Commuity is the thing shared with the person you like least 
      • Community is a group organized for mutual survival of their ideas 
    • Frustrations 
      • We are repeating the same ideas that were had at the dawn of the computer age, we have better implementations and new names, but the ideas are the same 
      • “Don’t frustrate your users” 
      • “Never underestimate mobile” 
      • Embrace good ideas 
      • Don’t take tech as a goal – tech is tool 
    • Progressive Web Apps 
      • This is the new buzzword, means app like experience in a mobile browser 
      • Note: Lighthouse is a chrome canary option in dev-tools

    Accessibiltiy testing:

    There was a heavy Accessibility (a11y) theme. It is nice to know that there are many automated testing tools for it. 

    • You can automate 30-50% of a11y issues
    •  Npm install axe-core for unit testing a11y in interaction / focus API, text alternatives, and ARIA states

    Source Maps demystified

    This was a deep dive into source maps. It was interesting discovering how they work. 

    • “JS is the assembly language of the web” 
    • To keep maps secure, you can change the domain (last line) of a source map to vpn or localhost