anselmh

<img src="large-default-file.jpg" media="screen and (min-width:601px)" alt="this is alternative text for default file" title="this is title for default file">
    <source src="smaller.jpg" media="screen and (max-device-width:600px)" alt="this is alternative text for smaller file" title="this is title for smaller file">
    <source src="tiny.jpg" media="screen and (max-device-width:320px)" alt="this is alternative text for tiny file" title="this is title for tiny file">
    <source src="monochrome.jpg" media="monochrome" alt="this is alternative text for monochrome file" title="this is title for monochrome file">
</img>

anselmh

/*

css only show/hide

*/

html {
  background: white url(http://genelocklin.com/examples/shared-images/texture/generated.png) 0 0 repeat; }

* {

anselmh

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()

anselmh

Conference User Stories

====================================

As an Organizer

• As an organiser I want to create an event where everyone feels safe and welcome.
• As an organiser I want attendees to show a level of personal responsibility. That means ensuring that they arrive in time for all sessions, don't consume food or drink that they know will have adverse personal results and respect the speakers by listening to them and not being heads down on their laptops.
• As a conference treasurer I want a ticketing system that pays straight away (like tito and not like eventbrite) so I have nice cash-flow management.