Skip to content

Instantly share code, notes, and snippets.

@coreybruyere

coreybruyere/smashing-conf-sf-notes.md

Last active August 29, 2019 17:27
Show Gist options
  • Save coreybruyere/5567a7c99146cbb221e362c64016a869 to your computer and use it in GitHub Desktop.
Save coreybruyere/5567a7c99146cbb221e362c64016a869 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
smashing-conf-sf-notes.md

Smashing Conference 🌉

4/4/16 - Workshop 💾

Building Performant Websites

Links: 🔗

Notes: 📝

  • Understand the network and what’s happening behind the scenes to get a better understanding of performance
    • Network
      • Bandwidth: How much data being sent over a network
      • Latency: how long the data has to travel - It’s the latency, Stupid 1
      • latency/speed of light * 1.5(fiber network)
      • High Performance Browser Networking
      • Latency is what really matters - has bigger impact than bandwidth at certain point
    • Network Request Order
      • DNS lookup - goes thru multiples layers of cache(browser, network, nothing?)
      • TCP Connection - Handshake between the client and server
      • SSL Negotiation - Client/Server hello
      • Request - 14k avg initial request ACK back and forth to server
    • Fix Latency
      • Use a CDN
      • Use Keep-alive on servers to keep request session alive
        • Not a default setting in apache
      • Resource Hints - Good for 3rd party domains. use as a header, link preload, dynamically with js. Use for predictable next steps.
        • Prefetch better for older versions of IE
        • Preconnect - DNS, TCP, and SSL are all connect. Go straight to request
        • Preload
        • Prerender - newer IE
      • Use pre-connect first then prefetch as a fallback - Page Weight Doesn’t Matter 2
    • HTTP2
      • Push promises
      • Akamai has setting to enable
      • Fallback to HTTP1
    • Order of downloaded resources
      • Parse html
      • Build DOM
      • Parse CSS
      • Build CSSOM
      • Combine DOM and CSSOM to make render tree
      • Parsing stops when a script tag is encountered, script is downloaded, and executed
      • Async - parse html and javascript in parallel, executes js, and continues parsing HTML
      • Defer - parse html all the way through, download when it can, and execute at the end
      • Browser has lookahead and will see scripts at bottom of page - bottom of page scripts isn’t a performance hack anymore. Put them in head and u async, or loadJS
      • Render tree, layout, paint
    • Critical Path
      • Load JS async
      • Use filament group loadCSS to load ‘async’
      • Inline critical CSS - ‘above the fold’
        • Addyosmani - critical(node, grunt)
        • Filament group - criticalCSS(gulp, grunt)
        • Online generator
        • Page speed module and other services offer css critical options
    • Web Page Test
      • Quantity based metrics - quantity of request, weight
        • Weight doesn’t matter. Serving correctly does(lazy load, font loading, etc)
      • Rule based metrics - Adhering to rule based audits
        • Great checklist of basic optimizations, not guaranteed to hit everything
      • Milestone timings - times of a very specific milestone in the loading of a page
        • Time to first byte - server response
        • Start Render - when something gets painted to the screen
        • DOMConententLoaded - jQuery on ready
        • Document Complete - when document fires onLoad event
        • Fully Loaded - end of waterfall
      • Speed Index - representation of the perceived load of a page
    • Performance Budgets
      • Use grunt perfbudget
      • PSI for cli page speed insights
      • Speedcurve
        • Alerts via slack, email if budget is broken
        • Compare performance against competitors
      • Enforce budget
    • What happens after load
      • 100ms: in ‘instantaneous’
      • RAIL - response, animation, idle, load (set budgets and goals in each category)
      • Master Dev tools and Web Page Test to get better understanding of perf
      • requestIdleCallback - to do non-essential work when browser is idle
        • R, A, L - most important in RAIL acronym

4/5/16 - Day 1 🌇

Dan Mall - Responsive Design is Hard/Easy

  • Do research before design
    • Why redesign the site?
    • Why redesign the site now?
    • How will we know if the new site is better?
  • Expose conflicts and problems early on
  • Get perspectives and opinions from different people throughout an organization
  • O.K.R = Objectives & Key Results
    • Clear objective and a measurable result
  • Involve stakeholders in design, make them part of the design process
    • Use spreadsheets that everyone understands to kick off design process, e.g. Google Docs
  • The McDonald's Theory
  • It's always easier to revise than to create
  • Be the first to visualize an idea - get a rough sketch
  • Use OKR-based designs to kick off design ideas
  • Element Collages
    • Focus on OKR-based design on single elements
    • Don't focus on big picture too early on
  • Talk about goals not features to stakeholders and clients
  • Short, simple sketches or notes are far better than wireframes early on
  • Great design presentation is just about great information architecture
  • Make design objective - agree on the definition
  • Design is the rendering of intent
  • Design is about the look, art direction is about the feel
    • Art direction is about touchy, feely words

Alla Khomatova - Atoms, Modules and Other Fancy Particles

  • FutureLearn pattern library
  • A system is an interconnected set of elements coherently ...
  • A system is more than a collection of elements
  • Purpose of a design system
    • Produce coherent patterns that facilitate and encourage certain types of behavior
      • Don't just list patterns show how they connect
  • Connections
    • Semantic Connections
      • Name things based on their global function - the function of the module.
      • Recognizing re-usable modules early on will prevent repetition
      • Name things collaboratively and refer to them by their names
        • Do it in person or in Slack - come up with global function and name
        • Refer to the elements by the name with we agreed on
        • Use pattern bot to remind of pattern names
    • Structural Connections
      • Molecule - a collection of html 'base' elements
      • Organism - a collection of components
      • Pattern naming components exercise, see what groupings people come up with
      • Organisms(stand-alones) - well defined and independent parts or sections of a page
      • What matters is not the structure itself but that it's shared and understood by the people who use it
      • Defaults, atoms, molecules, organisms, ... (see graphic)
    • Visual Connections
      • Subatomic particles - separating properties from atoms, use design tokens to build bg colors, text, font
      • Core patterns, animations, bg-colors, fonts, etc. - all the base default properties
      • Typography and spacing are closely related, use typographic scale
      • Build Spacious modules, use relative units to space out module typography(spacious, regular, compact)
      • Tom Osbourne loudness for properties
      • Treat core brand patterns separately, don't mix them with modules
      • Define elements and the relationship between them
      • A Pattern Language - book
      • Design Patterns - book
      • Thing of modules not as isolated entities but as families with a share purpose
      • Test if modules are achieving desired goals
  • Lessons Learned
    • If there aren't share components make it more integrated
    • Start with layers of the bigger picture
    • Don't start on the home page, start at typographic scale, headings, smaller items
    • At every stage aim to capture the system as a whole
      • Evolving a design system is a gradual piecemeal process, not the result of a master design plan

Harry Roberts - CSS For Software Engineers & For CSS Developers

  • DRY/Single Source of Truth - single, unambiguous, authoritative representation within a system
    • DRY is about maintenance
    • DRY is about not typing and remembering
    • DRY is changing 1 thing in 1 place
    • Repetition is better than the wrong abstraction
  • The Single Responsibility Principle - do done thing only and one thing well
    • Break things down into their smaller parts
    • Subway is a good example of SRP - 6.4 billion possible sandwich combinations
    • Offer colleagues ingredients to build own modules
  • The Separation of Concerns - Each things responsible for itself and nothing more
    • Reason about and study features in isolation
    • Only bind CSS into CSS-based classes
    • Don't write DOM-like selectors
    • Don't bind CSS onto data-* attributes
    • Don't bind JS onto CSS classes
    • No aria roles, DOM markup, inline styling, or binding JS onto styling hooks
    • Address semantic concerns first, then accessibility, then stylistic, then behavioral
    • Grid systems are a great example of separation of concerns
  • Immutability - An object that can't be changed ...
    • Makes things predictable
    • Helps debugging
    • .col-6 grid is an example of mutable code. it'll change to 100% on smaller viewports - not good
    • Don't have several states of the same thing
    • Use modifier or responsive suffixes - @
    • Use !important to force immutability
  • Cyclomatic Complexity - number of if's and else's in a program
    • Furthest to the right in a selector is the subject
    • Start of as explicit as you can
    • Nesting selectors or qualified selectors increases Cyclomatic Complexity
  • The Open/Closed Principle - open for extension, but closed for modification
    • Never change anything at its source
    • Avoid the Domino Effect
    • New features are changed using modifiers
  • Orthogonality - using features in a language and get expected/similar results
    • Reduces interdependence
    • Improves composability
    • Separates ...
    • Good test is to reorganize Sass imports and everything should be the same
      • Good test is nesting components and achieving desirable results

Tom Giannattasio - Beyond the Browser

  • Go hybrid - use the web, app, and OS
  • Provide better experience natively on desktop since web has a hard time keeping up
  • Electron - Atom editor hybrid app
    • Check out Code Mirror

Una Kravets - Photoshop is Dead! Editing Images in CSS

  • SVG filters and feColorMatrix are crazy
  • CSS Filters are easier
    • CSS filters are more performant but aren't as well supported
  • CSS Blend Modes
    • Photshop like blend modes
  • Image Effects

Ilya Grigorik - Yesterday's Perf Best-Practices are Today's HTTP/2 Anti-Patterns

  • Every modern browser supports HTTP2
  • HTTP/2 - what, why, and how
    • Improve end-user perceived latency
    • Address the 'head of line blocking
    • Not require multiple connections
      • One TCP connection
      • Request = Streams
    • HTTP2 split into 1 or more frames - headers, data, rst ...
    • Control over flow control and prioritization
    • Control over pausing streams
    • HTTP/2 : A new Excerpt from Hight Performance Browser Networking
    • Steve Souders book about performance
    • Pulling and pushing to a server is one of the most energy consuming things after having the screen on
    • Best Practices
      • Reduce DNS lookups
      • Reuse TCP connections
      • H/2 enables fewer connections, which equals less load on infrastructure. More users on hardware
      • Use a CDN
      • Minimize number of HTTP redirects
      • istlsfastyet.com for TLS + HTTP/2 status and best practices
      • Eliminate unnecessary request bytes
      • Compress assets during transfer
    • What's different about HTTP2
      • Request are handled by batch. Browsers can only handle up to 6 request at a time
      • Use up to 2 domain shards for HTTP1 to enable higher parallelism
      • HTTP2 eliminate sharding. Use everything from one domain
      • HTTP1 & HTTP2 best practices can co-exist
      • HTTP2 enables smaller loading blocks instead of concatenating everything
      • HTTP2 will still have a best practice sweet spot on shipped files, i.e. don't ship hundreds of modules
      • HTTP2 enables 'server push' server promises to deliver resources.
        • Trigger push using link preload header
        • No more inlining code
        • Safari and Edge currently have server push disabled
        • Server initiates push
    • Is it worth it?
      • Google saw 30-50% performance increases
  • _High Performance Browser Networking
  • Slides

Susan Weinschenk - Vision, Hearing, & the Brain: 10 Things About Perception

  • 10 Things Every Designer Needs to Know About Brain and Behavioral Science
    • Peripheral vision gives the gist of the scene
    • Peripheral vision 'decides' where you look next
    • People have mental models
    • There are generational differences in tech expectations
    • You may not be your target audience
    • Some things change and some things stay the same
      • Neuroplasticity - see with your tongue
    • Transience is becoming more valued
    • Cell phones are stand-ins for our entire social network. Less valuable interactions
    • We will have relationships with robots
    • Podcast: Human Tech
    • Look deep into nature and then you will understand everything better - Albert Einstein

Jeff Atwood - Addicted to Community

  • Badges to push users to go on side quest
  • IT's not about problem solving, it's about empathy
  • The Dishonest Truth of Dishonesty
    • Collaboration

Walt!! Walt gettin some screen time

4/6/16 - Day 2 🌆

Fake Mystery Speaker - Chris Heilmann - The Image Problem of the Web and How to Solve it

  • No excuse to not use the picture element
  • Serve the correct file sizes
  • We have no empathy for our end users
  • The web is for everyone, so build it for everyone

Real Mystery Speaker - Jason Freed - 37Signals

  • Demand remote work

Patty Toland - What We Talk About When We Talk About Web Performance

  • Tammy Everts - Writing a lot about performance Time Is Money: The Business Value of Web Performance
  • 2014 to 2015 - 40% mobile shopping to 75%, respectively
  • Conversion rate on mobile has been slightly higher - only when website is fast
  • Ads cost a lot in terms of data. Be responsible when serving ads
  • Sir Tim Berners-Lee 2016 quote - in 2014 all of us must protect ...
  • All our design and code decisions need to be mindful.
  • A Book Apart - Design For Real Life
  • Set performance goals in the design spec
  • Perceived performance is the most important
  • How to optimize
    • Optimize images
      • Use vectors when possible
      • Compress
      • Responsive images - picture
      • Layer Snap for SEO friendly SVG animations straight from Illustrator
      • Leaving Pixels Behind - Vector article for designers
      • Look at settings from slide for Photoshop saving settings
    • Optimize asset loading
      • Take it easy on the Javascript
      • Inline critical css
      • Load stylesheets async
      • Load all JS async (even ads and tracking)
      • Load fonts async, apply them in a progressive manner
      • Audit JS, is it all needed?
      • Cut the Mustard
        • Enhance.js - if browser passes test then request enhanced experience

Jina Bolton - Living Design Systems

  • Designers need to build design life cycles
  • Design in an enterprise organization can be tricky
  • Keep style guide current and useful
  • Great design systems are usable by your entire team
  • Nathan Curtis - writes a lot about design systems
  • Design Principles
    • clarity - enable people to see
    • efficiency - streamline workflows
    • consistency - ...
    • beauty - ...
  • take component notes on things like spacing, font sizes, etc
  • Design Tokens - allows design to be framework agnostic
  • Don't use JS in style guide. Show examples of state classes
  • Design System Ops
  • salesforce theo, salesforce sass-deprecate
    • Design systems slack channel

Mathias Biilmann - The New Front-End Stack: JavaScript, APIs, and Markup

  • Netlify
  • JAM philosophy
    • Decouple Building & Hosting
    • Decouple Front-end & Back-end
    • API's rather than Databases
    • Pre-baked Markup, enhanced with JS
  • JAM stack
    • Build tools
    • Git
    • Frameworks
    • APIs
    • CDN
  • JAM best practices
    • Use a CDN
    • Atomic Deploys -
    • Instant Cache Invalidation
    • Everything lives in Git
    • Automated Builds
    • jamstack.org

Rachel Nabors - Alice in Web Animation API Land

  • CSS Transitions, & CSS Animations are only good supported methods - SMIL deprecated in Chrome
  • All web animations are time-based
  • Time may be shifted backwards, forwards, paused, and played
  • Tween - in-between state between to keyframes
  • Keyframe Effect - in charge of animation playing, being paused, moving, etc
  • rachelnabors.com

Jeffrey Veen - Crafting a Creative Culture

  • Meetings and email are a waste of time, utilize things like slack
    • Good meetings to have
      • Product reviews
      • Postmordum meetings

Mark Boulton - Design Systems in Difficult Places

  • ...

After Party
Post conference Instagram walk/hike followed by some 🍻

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment