Notes from Front-end London June

Browse the web like Xerces - The God King of the Persians - Mike MacCana

  • We are creatives, not consumers
  • Shapeshifting wizards are real
  • Chrome extensions have a separate set of globals to the page they're running on
  • Event triggers can't work with event handlers in another world
  • Crossing the worlds from extension to page, a script can find its URL and add a tag to itself to the page
  • Soon chrome extensions will allow background apps to listen for keyboard shortcuts
    • Currently this has to be handled manually
  • "When websites annoy me, I fix them. I'm a JavaScript Developer, I don't have to put up with crappy things"
  • MutationSummary is an API to make things happen when the DOM changes - like conference tickets being available
  • Web browsing tips
    • If something annoys you, change it
    • Automate the stuff that bores you

Why is using typography on Web so difficult? - Clare Evans

  • InDesign vs HTML & CSS
  • Old style numbers are more readable and can be achieved with opentype fonts
  • font-style-settings open up a number of different options
  • aliasing and hinting will give different text rendering options
  • Hyphenation and justification is handled differently in browser
    • Can lead to "Snakes and Ladders"
    • Hyphenation options are coming (but no chrome support)
  • "Where is the fun in web typography?"
    • CSS shapes for wrapping text around an image
    • Google fonts have some novelty font effects that can be added on

Know Thy Interaction - Ashley Nolan

  • Web interaction used to be a lot more limited
  • Interactions shouldn't get in the way of content
  • Newer sites often have more cluttered content than sites with more focused and simpler use
  • Good sites let the content do the talking
  • Interaction design can really benefit from good content design
  • Strip away the barriers between a user and the content / functionality
  • Never underestimate simplicity
    • That said, visual complexity isn't always a bad thing
  • Mapbox design principles
  • The no swear test
    • If you get frustrated while using something, it fails
  • Context is everything, and today it's very hard to assume
  • Top codepens have some great examples of interactions
  • Codedrops examples
  • Effeckt.css
  • New [Medium] posting experience
  • How do we apply this to our work?
    • Macaw or Webflow
    • Facebook's origami