Peter Wilson

Archives: Notes

  • Me: I am looking forward to relaxing this weekend.
    Brain: What about those three talks you’re committed too?
    Brain: What about that plugin?

  • Instructions for starting VIP Quickstart every time:
    cd salty-wp
    vagrant up
    // realise, wait
    vagrant halt
    cd ../vip-quickstart
    vagrant up

  • Back at work in Docklands today.

  • I was asked about bandwidth cost during the last break at #respond16, this is a great resource https://whatdoesmysitecost.com/

    • CSS selectors allows to point to elements on the page to style them
    • we have dozens of pseudo classes available to style element
    • :target allows us to do lightboxes without JavaScript
    • :not reverses the meaning of the symbol selector inside it
    • :not([class]) allows you to style elements without classes, without specificity wars
    • adding the letter i to attribute selectors allow you select them without case sensitively
    • there is nothing new is CSS selectors. Why? As devs we are not asking for them.
    • developers have started styling everything with class selectors
    • we’ve abandoned HTML semantics
    • As developers, we have started put a bird on it people

    Put a class on it

    -developers

    • our over-reliance on classes is modifying the spec
    • :local-link is not supported
    • the reference combinator is not supported
    • both of these cool features have been dropped the selector spec
    • the :has selector lives but comes with fine print, it only works in JavaScript
    • decisions are being made without the developers voice (not to say wrong, just our voice is absence)
    • The labotomised owl selector, * + *, has zero specificity. It makes it easy to override it.
    • Quantity selectors allow us to code defensively against changes in the content structure within a CMS
    • demand the selectors we deserve in future browsers

  • Thanks for coming along to @webdirections #Respond16 Melbourne, my slides are available at https://pwcc.cc/respond/slides/

    • art direction on the web is a recurring theme
    • at last we have the tools to do proper art direction
    • after two decades Jen gets design, it’s only recently Jen has understood art direction
    • art direction is a deliberate choice: this is what I want to convey
    • the Apple Watch logo is not a tech logo, it’s a fashion logo
    • when Apple launched the watched, they used art direction from the launch to position the product as a fashion item
    • in editorial design there is a lot available to communicate your idea
    • placement is part of communication
    • we’ve had art direction in print reporting, often it’s lost on the website
    • the web is boring, everyone is making the same designs: large header, three dots
    • the web became uniform when we started using grids, eg 960 grid
    • the twelve column grid was great when we were infants finding our feet on the web
    • prefab grids helped back when the box model was inconsistent, shout out IE6
    • since 2012 we’ve been able to define the box model, but we still use the same grids
    • we’ve moved on from grids to bootstrap
    • we override the type but we keep the same layouts: 12% of the web uses bootstrap layouts
    • it’s like we’re all using the same WordPress theme
    • layout should be based on your site, not prefab multiple choice
    • there are a ton of resources on layout out a page, not grids but graphic design books on using grids
    • communicate using white space, it sets up the message
    • on the web white space is free, we can afford to leave it
    • the web no longer needs to be straight lines
    • visit labs.jensimmons.com for plenty of layout examples
    • browser inconsistencies have broken things, drop caps for eg. This is a solved problem.
    • we can use @supports to detect if browsers support a feature. Browsers that don’t support feature queries skips the query
    • viewport units change the web
    • using viewport units allow us to control what appears above/below the fold
    • object-fit allows you to crop images in the browser, similar to background-size in CSS
    • part of the reason were bored on the web is everything is a perfect rectangle, not the case in print
    • clip-path allows us to move away from perfect rectangles on the web, as do CSS shapes
    • Shape outside allows you to set how a text flows around another element, there is a Chrome extension to create polygons.
    • all of these things are available today using progressive enhancement
    • flex box, grid layout and alignment are going to change our lives
    • floats make boring galleries, the float drop problem, we made everything a square.
    • With flex box we can make items different widths and fix the height, each row is the full width
    • same with flex box columns and a fixed width, variable heights
    • multi-column layouts are more flexible that flex box columns, they can avoid side ways scrolling
    • grid layout allows you to define both columns and rows, content can be multiple cells wide/tall.
    • the browser will lay things out and move content around to fill in the holes: dense layout. Think Masonry but without jank.
    • Flexbox and Grid are a time to open our minds, mess around with them and see what’s possible
    • Flexbox lays things out in a single dimension (either row or column) and wraps when it runs out of space
    • CSS Grids lays things out in two dimensions, it considers the entire space
    • experiment with layouts by translating print items to the web. try things out
    • Grid frameworks are fixed numbers of cells, grid layout is depends on the content. We need to drop out mental model
    • Grids are in the nightly browsers (sometimes behind a flag), in other browsers design with a fallback
    • use floats for regular browser, wrap grids in feature queries.
    • Good html is important, grid and flex box allow you to do this.
    • Grid is not the end of things, there are many specs on layout to come.
    • Rounds is being worked on: viewports can be round now we have smart watches
    • Jen’s process:
      1. organise content
      2. create an HTML file and set the source order
      3. sketch ideas for page layout (sometimes this happens 1st)
      4. design a custom grid
      5. apply css, write your own layout
    • new features work and don’t work at the same time, we don’t need to wait two, three, four or five years to new features
    • progressive enhancement is built into the web, shape outside falls back to a traditional float
    • grids will be a long, slow transition but it will be significant, it will be as big as RWD or tables to CSS layouts
    • now is the time to learn CSS Grids, it will take time to learn now. It will be important and your new knowledge will be in demand.

  • Rewrote my @webdirects talk last night, new title is “Proof the Panama Papers are a CIA conspiracy to bring about a one world government.”

    • vw + vh === v.nice !
    • viewport units are proportional units related to the viewport:
      • vw
      • vh
      • vmin
      • vmax
    • they’re new, there have been articles telling is this:
      • this year
      • last year
      • 2014
      • 2013, and,
      • 2012
    • viewport units are more supported than flex-box
    • vw, vh have been supported widely since IE9+
    • half considered browser stats are a contextomy (why drop IE but keep Safari, look at the stats)
    • the current browser landscape grew out of IE5 and IE6.
    • We forget how groundbreaking the IEs where
    • There are 27 units in CSS
    • Understanding units allows us to greater understand our environment
    • vw: 1/100 of the width of a viewport, vh: 1/100 of height
    • relative units can be used to smoothly increase font size. font-size: calc( 1em + .25vw )
    • Mike Riethmuller has written about Precise control over responsive typography
    • Viewport units can be used to style websites and ensure they fit in the browser: chess boards, connect four games
    • Viewport units will allow you to create a thumbnail of a site by embedding the page as an iframe
    • I’m a developer, I don’t want to open photoshop
    • Filters allow the dev to make the changes without asking a dev
    • css filters, etc save network requests
    • linear and radial gradients can now repeat
    • using a linear gradient and a small repeating image gives you a rich look with very little overhead
    • background-blend-mode allows you to specify different blends for each layer of your image
    • mixed-blend-mode works across all elements: anything below the element is blended
    • Videos work below blend modes, the changes a quick to apply without the needs for video editing software
    • When a designer exports an element from photoshop with a blend mode, they can be applied via CSS without needing to go back
    • Consider browser support, the blend modes are not universal
    • Multiple filters can be applied at one time
    • The filter opacity ensures the object is hardware accelerated, where as the CSS property is not
    • hue filters can be used to replace colours on a product and save a network request
    • It’s only a matter of time before we can say goodbye to Photoshop