Slide 1

Slide 1 text

Stop    collecting  data  like  it’s  2001!  

Slide 2

Slide 2 text

What  you’ll  learn  today  

Slide 3

Slide 3 text

Some  new  kids  on  the  block  

Slide 4

Slide 4 text

¡  Creates  a  slider  with  a  thumb  button   ¡  Use  cases:   §  Setting  a  value  from  a  range  (ex:  max  price)   §  Setting  the  position  of  something  

Slide 5

Slide 5 text

¡  min  =     ¡  max  =     ¡  step  =     ¡  value  =      

Slide 6

Slide 6 text

// range with default value // range within defined boundaries // step of the input’s increment value

Slide 7

Slide 7 text

¡  No  native  support  for  “multiple  thumbs”   §  Use  case:  filtering  within  a  range  of  prices     (min/max)     ¡  Solution:  use  JS  widgets   §  jQuery  UI  Slider:     ▪  http://jqueryui.com/demos/slider/#range    

Slide 8

Slide 8 text

¡  Accepts  valid  numbers     ¡  Creates  an  input  box  with  a  up/down  ticker  

Slide 9

Slide 9 text

// default value // accept numbers within boundaries // step of the input’s up/down buttons

Slide 10

Slide 10 text

// step of the input’s up/down buttons // negative to positive range

Slide 11

Slide 11 text

¡  Creates  an  input  box  with  a  “search”  icon  and   a  reset  button.     ¡  Has  a  “history”  option    

Slide 12

Slide 12 text

Slide 13

Slide 13 text

¡  Accepts  valid  dates   ¡  Shows  native  date-­‐picker  in  some   implementations  (iOS,  Android,  Opera)  

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

// default value // select between a range of dates

Slide 16

Slide 16 text

¡  Accepts  valid  URLs   §  Protocol  not  enforced   ▪  http://     ▪  git://     ▪  xxx://  

Slide 17

Slide 17 text

¡  Accepts  valid*  email  addresses   §  *willful  violation  of  RFC  5322   ▪  user@localhost    

Slide 18

Slide 18 text

¡  New  input  types   §  Range   §  Number   §  Search   §  Date   §  URL   §  Email   ¡  Rely  on  the  browser   for  usability   ¡  Upcoming:     Rely  on  the  browser   for  validation  

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

¡  Temporary  informative  value  for  an  input   ¡  Common  in  search  boxes:   §  “Search  for  …”   §  “Type  your  question  here  …  ”        

Slide 21

Slide 21 text

// using a placeholder value

Slide 22

Slide 22 text

¡  Use  the  browser’s  local  form  history   §  Indexed  search  by  the  input  name:   ▪  email   ▪  first_name   ▪  url   ▪  …  

Slide 23

Slide 23 text

¡  When  possible,  use  popular  input  names   §  Helps  the  user  fill  forms  faster     ¡  autocomplete=“off”  prevents  this  behavior    

Slide 24

Slide 24 text

// autocomplete when typing using the browser’s history for inputs with name = “email”

Slide 25

Slide 25 text

¡  Focus  the  user  input  on  page  load   §  Lets  the  user  quickly  start  typing   §  Think  Google  homepage    

Slide 26

Slide 26 text

¡  Mark  an  input  as  required  to  be  filled   ¡  The  browser  will  prevent  form  submit  if  the   input  isn’t  filled   ¡  Bonus:  in-­‐browser  validation    

Slide 27

Slide 27 text

// make an input required

Slide 28

Slide 28 text

// make an input required var input = document.querySelector(‘input[name=“user”]’); // custom invalid message input.setCustomValidity(“What’s your name?");

Slide 29

Slide 29 text

Google  Chrome  default   Custom  

Slide 30

Slide 30 text

¡  Regular  Expression  to  validate  the  input  value   §  Phone  number   §  Zip  code   §  URL   §  …   ¡  The  browser  will  prevent  form  submit  if  the   input  value  does  not  match  

Slide 31

Slide 31 text

// make the browser validate against a regex pattern

Slide 32

Slide 32 text

¡  Prevents  user  input   ¡  Input  renders  grayed-­‐out        

Slide 33

Slide 33 text

// prevent the user from changing the value

Slide 34

Slide 34 text

¡  Prevents  user  input       ¡  Difference  from  “disabled”   §  Readonly  input  values  are  sent  on  form  submit   §  Disabled  input  values  are  not  sent    

Slide 35

Slide 35 text

// prevent the user from changing the value // sends the value on form submit

Slide 36

Slide 36 text

¡  Rely  on  the  browser  for  usability   §  placeholder     §  autocomplete   §  autofocus   §  required   §  pattern   §  disabled   §  readonly  

Slide 37

Slide 37 text

¡  The  browser  can  validate  client-­‐side   ¡  Give  the  browser  hints  to     §  what  is  required   §  what  is  valid   §  what  is  enabled  /  disabled   ¡  Input  types  help  with  validation   §  date,  number,  email,  etc…  

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

¡  Use  event  listeners   ¡  Chrome,  Safari,  FireFox,  Opera,  IE9+   §  element.addEventListener()   ¡  IE  6  –  8   §  element.attachEvent()    

Slide 40

Slide 40 text

// Listening for events el.addEventListener(“click”, handler, false); function handler(e){ // “e” is the MouseEvent object }

Slide 41

Slide 41 text

¡  Triggered  when  you  submit  a  form   §  Pressing  the  submit  button   §  Pressing  the  “Enter”  key  in  a  focused  input   ¡  Reloads  the  page    

Slide 42

Slide 42 text

¡  event.preventDefault()   ¡  Useful  for     §  Validation   §  Submit  form  with  AJAX   §  Client-­‐side  processing    

Slide 43

Slide 43 text

// Listening for a form submit event form.addEventListener(“submit”, handler, false); function handler(e){ // prevent the form submit and page refresh e.preventDefault(); }

Slide 44

Slide 44 text

¡  Triggered  on  an  input  when  it  is  “active”:   §  Can  type  into  a  text  field   §  Can  toggle  a  checkbox/radio  button      

Slide 45

Slide 45 text

// Listening for an input focus event input.addEventListener(“focus”, handler, false); function handler(e){ console.log(“Focused ” + e.target); }

Slide 46

Slide 46 text

¡  Triggered  on  an  input  when  it  has  left  its   “active”  state:   §  Clicked  outside  it   §  Pressed  “Tab”  key  and  moved  to  another  element    

Slide 47

Slide 47 text

// Listening for an input blur event input.addEventListener(“blur”, handler, false); function handler(e){ console.log(“Left from ” + e.target); }

Slide 48

Slide 48 text

¡  Triggered  on  an  input  when  its  value  changes   ¡  Important:     §  On  text-­‐like  inputs  it  is  triggered  only  after  the   “blur”  event   §  Listen  for  “keyup”  or  “keydown”  events  instead    

Slide 49

Slide 49 text

// Listening for a range input change event range.addEventListener(“change”, handler, false); function handler(e){ console.log(“Value ” + e.target.value); }

Slide 50

Slide 50 text

// Listening for a text input change event input.addEventListener(“keyup”, handler, false); function handler(e){ // e.keyCode tells you the key (27 = Esc) console.log(“The key code: ” + e.keyCode); }

Slide 51

Slide 51 text

¡  Prevent  form  submit     ¡  Listen  for  input  state  changes   §  focus   §  blur       ¡  Listen  for  changes  on  inputs   §  change   §  keyup  

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

¡  Spotty  support   ¡  Accelerated  pace  of  browser  updates   §  Firefox,  Chrome  1  –  1.5  month  /  cycle   ¡  https://wiki.mozilla.org/Releases   ¡  http://www.chromium.org/developers/ calendar    

Slide 54

Slide 54 text

¡  http://html5test.com/     ¡  http://www.browserscope.org/   ¡  http://www.quirksmode.org/compatibility.html   ¡  Self-­‐service:   §  http://miketaylr.com/code/input-­‐type-­‐attr.html   §  http://miketaylr.com/code/html5-­‐forms-­‐ui-­‐ support.html    

Slide 55

Slide 55 text

http://www.netmarketshare.com/browser-­‐market-­‐share.aspx?qprid=1&qpcustomb=0    

Slide 56

Slide 56 text

¡  IE  9,  IE10  work  only  with  Windows  7   §  Windows  XP  ~47%  OS  market   §  Windows  7  ~  36%     http://www.netmarketshare.com/operating-­‐system-­‐ market-­‐share.aspx?qprid=10&qpcustomd=0    

Slide 57

Slide 57 text

¡  WebKit  is  becoming  the  mobile  web  platform   ¡  Mobile  browsers:   §  ~75  %  WebKit-­‐based  (iOS  +  Android)   §  ~  20  %  Opera  Mini     ¡  Fragmentation   §  iOS   §  Android  (latest)   §  Android  (vendor  “X”)    

Slide 58

Slide 58 text

¡  http://www.modernizr.com/   §  Check  feature  availability  in  the  browser   §  Use  “polyfills”  for  old  browsers  

Slide 59

Slide 59 text

¡  http://www.browserscope.org   §  Distributed  testing  by  crowdsourcing   §  Every  visitor  runs  the  the  tests  in  the  background   §  Write  your  own  JS  tests   §  Graphs,  feature  support  evolution  

Slide 60

Slide 60 text

¡  http://www.browserscope.org/user/tests/ table/ agt1YS1wcm9maWxlcnINCxIEVGVzdBib2KQ GDA   ¡  Up  to  date  metrics  on  feature  support   ¡  Desktop  and  mobile  browser  coverage  

Slide 61

Slide 61 text

I skate to where the puck is going to be, not where it has been. Wayne Gretzky http://www.flickr.com/photos/tazphotos/4400220464/  

Slide 62

Slide 62 text

thanks!   Razvan  Caliman   [email protected]     [email protected]     now,  go  build  something  cool!