Peter Wilson

Archives: Notes

  • 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

     

    • started looking at how SVG and CSS complete each other
    • SVG can be use to extend the capabilities of CSS
    • there are seven ways to include SVG on a web page
    • there are tools for using SVG
    • there is no reason not to use SVG on websites today
    • Sara is interested in how people are using SVG, which of the seven ways
    • SVG background sprites are inflexible, each new colour must be created in the sprite sheet
    • the use, defs ,g and symbol elements allows you to change the colour and make other variations with CSS
    • the viewBox attribute is required for making SVG’s responsive, so make sure it’s there
    • the use element cloned into the shadow dom, it can’t be accessed via CSS selectors
    • to style the element on a cloned SVG you need to set the style using CSS variables and define the variable on the use element.
    
use {
  --primary-color: blue;
  --secondary-color: red;
}

// variables are used to style the SVG
    • undefined variables will use the default fallback colour, see Sara’s article on Styling SVG using use.
    • don’t use icon fonts!
    • while icons can be styled in CSS, you can only style them using the font styles. It’s limited.
    • SVG allows multiple colours, it’s sharper
    • Web fonts can be blocked by ad-blockers, this can affect icon font and the user may end up getting unrelated emoji
    • Icon fonts are not accessible
    • SVG icons have accessibility backed in
    • Use Grumpicon! Support will be extended back to IE6.
    • There are plenty of tools around to help you use SVG, the time to switch away from icon fonts has passed
    • There are a number of filters available in CSS to alter images
    • Use trial and error when trying blend modes, it’s more reliable than knowing what will happen
    • CSS filters can be extended to apply SVG filters
    • CSS clip paths accept either basic CSS shapes or can take an SVG clipPath element.
    • clipPath’s can be animated
    • Clipping videos (and other HTML elements) can be done via foreign objects in SVG, but it’s buggy in webkit/blink
    • using SVG filters we can create text effects that can’t be created by CSS alone. text-shadow is limited
    • As long as the text is not converted to an outline, text within an SVG will be searchable
    • SVG will allow you to create advanced poster like layouts without worrying about the flow
    • You will need to convert SVG text to outline if you’re using specific, non-websafe fonts. Eg branding types
    • You can make an image responsive with a single SVG
    • SVG is a replaced element, you are going to need to set a width/height img,object {width:100%} will make it responsive
    • The SVG viewport size can be used in media queries, the MQ applies to the SVG’s size only and is essentially an element query

  • Rocking #respond16 for the home town over the next couple of days. Spoiler: an excellent show to come!

  • RT @Independent: ‘What I discovered about homophobia by holding hands with another man in public’ http://www.clickhole.com/video/eye-opening-these-guys-lived-15-minutes-homeless-s-2415

  • I can’t say this better, come along if you’re in Melbourne

  • My plans tonight are to watch the latest Survivor & fall asleep on the couch reading Dalton Ross. Good to be home.

    • The web is its own medium; a medium defined by its fluidity.
    • It’s available on any device, one web. As long as we don’t break it.
    • One web is:
      • One content
      • One url
      • One team
      • One release schedule
      • One codebase
    • One web sounds a lot like responsive.
    • The phrase adaptive is magic.
    • No one seems know what adaptive means.
    • An m-dot site is dedicated site served to mobile users, but it’s easy to server the wrong content.
    • Adaptive is often used to means: serves something different to different devices. It may mean
      • A limited of media queries where the width jumps rather than fluidly grows
      • Serving something different, the url remains the same but the content is served differently
    • Karen McGrane prefers the latter definition.
    • Adaptive content is server side, the server detects the device and serves something different.
    • Google is the one company most invested in your site serving the same content at the same url all the time.
    • If the home page is political, serve a different home page and keep the rest of the site responsive. Do it, go adaptive on the home page.
    • Adaptive doesn’t need to be per page, it can be per component. Fidelity used two versions of markup for adaptive tables based on the screen site.
    • Don’t get the server involved with content when it’s a client side problem.
    • Karen McGrane has spoken about adaptive for five years, since discussing COPE.
    • There is a great value in storing chunks of granular content rather than massive blobs.
    • It makes it easy for people to conclude they should be targeting different users with different content.
    • One way of targeting is based on the users device.
    • There are other ways. Context: information that can be gleaned from the devices sensors, the time, location, velocity, barometer, temperature.
    • Think about this, when does it make sense to serve different content based on the device vs different content based on the users context?
    • Device: support pages based on the users operating system.
    • Even based on device selection, prioritise the content rather than exclude the content. An iOS user may be helping their Android using friend.
    • Often people make assumption to adapt on device that are stretching it’s suitability, to assume the input mechanism, for example.
    • Microsoft think there is no difference between what mobile & desktop users desires.
    • Karen’s definition of context (device sensors) are the closest we can get to guess the users context.
    • Modern hearing aids can switch to car mode when travelling over 10mph. This is a good but imperfect solution (could be a human canon ball).
    • Restaurants can be displayed according to the user’s location, this is a good contextual cue.
    • Language may not be a good contextual cue for language, this can be flawed – visitors arriving in a foreign country.
    • Device detection is flawed, there is no correlation between being away from home and using a mobile device.
    • Device type will always be the least reliable form of estimating context.
    • Expedia found that responsive was better than context targeting. A travel company.
    • Adaptive and responsive are not in competition, they work together. RWD will solve 95% of your problems, adaptive may cover the remaining 5%.

     

    • How do we adapt the things we make to different spaces?
    • We used to think about the web in pages, back when RWD became first defined.
    • We now think about components.
    • On average a large site may have 200+ media queries.
    • We are trapped, media queries are defined by pages.
    • We think about components, and less frequently about pages.
    • The element query would allow us to adapt content to the size of the content.
    • The element query is great for how we think now.
    • The element query is great for circular dependancies.
    • It’s the circular dependency that killed the element query.
    • The element query became the container query, it’s a problem that needs to be solved.
    • It’s possible to use “element flow” to hack container queries.
    • Flex-grow can change how content displays as element grows and shrinks, regardless of the page.
    • display: container can be used to allow use to use flex-box order to content based on the containers size.
    • Nesting the picture element as foreign object in an SVG give the picture element a container query.
    • The best thing to do to get a container query is to get involved in the RICG.