Archives: Notes

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

• 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!