FrontTrends 2012

fronttrends2012.txt

------------------------------
DAY 1
------------------------------

10:20 Vitaly Friedman: Responsive Design: Smashing Magazine's case study
http://www.smashingmagazine.com/

pre-condition: 
width 1024px
fully accessible without images
45-90 characters per line

responsive layout => many media queries, eg 650px, 1024px, 1480px, 1800px

usability: 
dropdown menu (mobile layout)
back-to-top link (all widths)

%, em: incremental 0.5 steps => easier maintenance



11:10 Chris Coyier: What we don't know
@chriscoyier

caniuse.com
mediaelement.js
CodeKit
normalize.css
browserstack.com

best practice for fast websites: sprites, minify, max. 2 CSS files, optimize all images



11:40 Dave Desandro: Mobile Safari: Bring your machete
@desandro
http://desandro.github.com/mobile-safari-machete/

Opera Mobile Emulator
iOS simulator



12:30 Rebecca Murphey: Patterns for organizing non-trivial JS applications
@rmurphey
http://speakerdeck.com/u/rmurphey/p/beyond-the-dom-sane-structure-for-js-apps
https://github.com/rmurphey/srchr-demo

MVC
views => display data
models & collections => management of data collections, server communication
controller => interaction management between view and model



13:00 Harry Roberts: Breaking good habits
@csswizardry
http://speakerdeck.com/u/csswizardry/p/breaking-good-habits-1/

main goals: maintainability, flexibility, extensibility, predictability



14:30 Daniel Biesiada: HTML5, IE and Windows 8 - the Microsoft story



15:10 Jina Bolton: Style guide-driven UI Design with SASSsushi&robots
art in my coffee
@jina
http://speakerdeck.com/u/jina/p/style-guide-driven-ui-design-with-sass

Style guide: eg BBC, android styleguide online 
=> user-interface library
=> show the code with the example (eg button)
=> style tiles => responsive design 

style guide + preprocessor = awesome
easier maintainability, separation of presentation from content, easy optimization 
generate style guide from CSS: styleDocco

tips: 
keep clean code
patterns and proportions 

resources: 
object-oriented CSS (website)
scalable and modular architecture for CSS (book)
320 and up (framework)
pragmatic guide to SASS (book)
compass (framework)
fancy form design (book)
speakerdeck.com/u/jina (slides)



15:40 Alex Russel: Platfrom or pile of hacks?
infrequently.org:8080/
@slightlylate

pose the user the question: you are using an old browser… 

mutation observers: callback on painting based on timing



16:30: Kyle Simpson: HTML5 JavaScript on crack
@getify
getify.me
HTML5 cookbook (discount code AUTHD)
https://github.com/getify/wepuzzleit
http://bwp.geti.fi/fronttrends/links
http://speakerdeck.com/u/getify/p/html5-javascript-on-crack-v3



17:00: Lea Verou: CSS in the 4th dimension
@LeaVerou
lea.verou.me
http://lea.verou.me/css-4d/

=> having control over time

http://dabblet.com/

animatable (website)

cubic-bezier()
animation-direction(alternate)



17:40 Julien Gachadoat: Mind the gap
http://www.v3ga.net/conferences/ft2012/



18:10 Zbigniew Braniecki: The web is the platform – Mozilla’s mobile OS
http://www.braniecki.net/b2g/



18:30 Mariusz Nowak: Future of web applications, where client doesn’t need server



------------------------------
DAY 2
------------------------------

09:50 Krzysztof Szafranek: Refactoring JS - big bang theory?
http://www.slideshare.net/szafranek/javascript-refactoring



10:20 Tali Garsiel: How Browsers work internally



11:10 Oluv Lassus: JS the subsets that we use
lassus.se
@olov
http://blog.lassus.se/files/javascript_the_subsets_we_use.pdf


the brain comes with error correction - but sometimes assumptions get in your way
=> verify the assumption, eg types of data/variables (number, string)
=> assertion

restrictmode.org/try => use strict/restrict mode
jsshaper.org => plugins: asserter, bitwiser, watcher, yielder

"Reading code is a skill, practice and learn from others"



11:40 Rachel Andrew: Pushing the boundaries without breaking the web
@rachelandrew
edgeofmyseat.com
grabaperch.com
rachelandrew.co.uk
http://speakerdeck.com/u/rachelandrew/p/pushing-the-boundaries-without-breaking-the-web

no media query support in IE8 and below => extra css for IE, 960px, other bugfixes
lack of support for styling HTML5 semantic elements in old browsers

what is the problem?
what are my constraints?
is not supporting this feature an option?
what current solutions exist?
use polyfill/own code?
=> stop solving problems you don't yet have

we are all learners and we are all teachers… no matter how old we are, how long we have been doing this

all this stuff that people are stuffing into sites, is a problem… you need to understand what is going on

we need to teach: 
html, css, js
problem solving skills
there is not one true way!

if we train people to just copy and paste, we stop them growing, learning and contributing

make sure you know WHY you are using it
test for WHAT HAPPENS when js does not load
explain WHY as well as HOW



12:30 Mathias Bynens: 10 things I didn't know about HTML, CSS & JS
@mathias

valid html
document type definition => detects many errors, not all
don't obsess about validation, functionality trumps validation

character references / entities
works without semicolon, clearer code with it => always use semicolon
> only used to close a tag, can be used in text without entity
mths.be/bdu

tags
html, head and body are optional 

font family names
mths.be/bft
when in doubt, just use quotes

attribute values
mths.be/bal
when in doubt, just use quotes

characters and strings in JS
.length => not always exact, esp when not unicode
mths.be/bed
mths.be/punycode

JS variable names
many allowed symbols
mths.be/ber

truthness in JS
toBoolean() => converts into boolean
all objects are truthy, except in the DOM: document.all



13:00 Divya Manian: Designing in the Browser
@divya
http://nimbu.in/front-trends/

mockup ≠ end result

mockups do not make sense any more, no more the legacy of print => dynamic
=> design the interaction experience, product design, depending on device

embrace the constraints of the web
no pixel perfection
uncertainty of features
things never designed to interact, will 
you cannot control the content
lorem ipsum only goes so far, eg unicode chars, longer words

=> design around content, user interaction 

find where the design and data breaks experience of users
design for complexity and uncertainty, make it simple for the users
build from ground up with design break points (stephen hay)

what you shouldn't be concerned about
performance (not in the beginning)
pointless semantics
pixel perfection
IE compatibility

be concerned about
as less as code as possible
scaffolding generator: docpad, jekyll
sensible defaults: boilerplate
preprocessors: sass, less, stylus
naming (smashing magazine, nicolas gallagher)
templating languages: mustache, eco, haml
get real data (or fake it: faker.js, lorem pixum)
design scaffolding: twitter bootstrap
working features: html5 please
codeKit or LiveReload

document your code
style docco



14:30 Luca Sale, Blackberry: Alice.js: A lightweight independent CSS engine



15:00 Alex Giron: Same Flash different code
@alexgiron

in order to improve we must learn from history



15:30 Tiffany Conroy: Design processes, not interfaces
@theophani
http://t.co/CA1txMFu

design interfaces for the process of interfacing with the data - not for the data

interface design
what information does the user have, what information is he looking for
put the appropriate information in the appropriate place on the page

Bill Verplank (lectures): 
http://t.co/SH0LxbYH
http://t.co/HuT2JThd
affordances => give the user the chance to make a change
feedback => notifications, hover effects, review
maps and paths => make the user understand where they are in their options

you need to know the GOAL and the interaction points
analyze any existing processes => job shadowing, ask lots of questions, ask lots of people
=> WHY, what would you change?

take away the user's pain!

why are people involved in this process at all?
can this information be codified?
what do we need humans for?

usecases for the data. actions the user might take… then put it in the right order…

without knowing the process, you can't design the interface



16:30 Bartosz Szopka: Learning to teach
@bartaz
http://speakerdeck.com/u/bartoszopka/p/learning-to-teach

when your job is your passion, you never work

tell me and I'll forget,
show me and I may remember, 
involve me and I'll understand. (Konfizius)

http://lanyrd.com/ => finding web conferences, view minified and original code



17:00 John Schulz: When to node?
@JFSIII
http://jsno.de/presentations/Front-Trends/#/

I'm “theophani” with an i :)

so very sorry! just corrected it...

senk ju :)