Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Fronteers conference 2011 summary

Fronteers conference 2011 summary

Presentation I did at our firm to summarize Fronteers 2011

Ed0bc121c5e4e87603d31fcd2268402c?s=128

houbenkristof

October 14, 2011
Tweet

Transcript

  1. FRONTEERS CONF 2011 Pathé Tuschinski - Amsterdam vrijdag 14 oktober

    11
  2. LEA VEROU 10 CSS3 secrets vrijdag 14 oktober 11

  3. BOUNCING TRANSITIONS http://cubic-bezier.com/ vrijdag 14 oktober 11

  4. BORDER RADIUS TAKES PERCENTAGES border-radius: 50%; vrijdag 14 oktober 11

  5. MULTIPLE BORDER WITH BOXSHADOW box-shadow: 0 0 0 5px black,

    0 0 0 10px gold, 0 0 0 20px black, 0 0 0 35px white; vrijdag 14 oktober 11
  6. MAKE POINTER EVENTS PASS THROUGH pointer-events:auto; Feature detect it with

    JS vrijdag 14 oktober 11
  7. TAB SIZE tab-size: 8; vrijdag 14 oktober 11

  8. BACKGROUND PATTERNS WITH PURE CSS http://leaverou.me/css3patterns/ vrijdag 14 oktober 11

  9. BACKGROUND POSITIONING TRICKS background-origin: paddingbox, contentbox, borderbox vrijdag 14 oktober

    11
  10. BRUCE LAWSON HTML5 Semantics “You too can be a bedwetting

    antfucker” vrijdag 14 oktober 11
  11. 30 NEW ELEMENTS! header, section, footer, article, time, etc… vrijdag

    14 oktober 11
  12. SOME ARE GONE center, font, big, align, background & bgcolor

    vrijdag 14 oktober 11
  13. OTHERS REDIFINED Such as small and u?! The <u> element

    represents a span of text with an unarticlared, though explicitly rendered, non-textual annotation, such as labeling the text as being a proper name in Chinese text (a Chinese proper name mark), or labeling the text as being misspelt. vrijdag 14 oktober 11
  14. <TIME> <time datetime=”2011-10-06”>Today</time> <time datetime=”2011-05”>May this year</time> <time datetime=”-54-03-15”>Julius Caeser

    murdered</time> vrijdag 14 oktober 11
  15. <FIGURE> <figure> <img src=””/> <figcaption>Our vacation picture</figcaption> </figure> vrijdag 14

    oktober 11
  16. THERE IS NO <CONTENT> Exclusion method, everthing that has nog

    specific tag is content! vrijdag 14 oktober 11
  17. H1 = H3 = H6 “Section may contain headings of

    ANY rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the sections nesting level. vrijdag 14 oktober 11
  18. NO GOLDEN RULE vrijdag 14 oktober 11

  19. STEPHEN HAY Go with the flow vrijdag 14 oktober 11

  20. MULTI COLUMN LAYOUT div{ columns:3; columng-gap:2em; } vrijdag 14 oktober

    11
  21. CSS3 REGIONS <div class=”src”> <p>some content....</p> </div> <div id=”one”></div> <div

    id=”two”></div> div.src { flow-into: ‘flowname; } #one, #two { flow-from: ‘flowname’; } vrijdag 14 oktober 11
  22. LINE GRID p{ layout-grid-line: 1.5; layout-grid-mode: baseline; margin-top: 1gd; margin-bottom:

    1gd; } vrijdag 14 oktober 11
  23. TAB ATKINS The future of CSS layouts vrijdag 14 oktober

    11
  24. BACKGROUND: IMAGE() background: image(mylogo.svg) vrijdag 14 oktober 11

  25. FLEXBOX ul { display: flexbox; } li { width: flex();

    } vrijdag 14 oktober 11
  26. NEW UNITS! vw, vh, rem (em from root), ch (width

    from char 0) vrijdag 14 oktober 11
  27. CYCLE() cycle(italic, normal); vrijdag 14 oktober 11

  28. NTH-COL() nth-col(3n+1); vrijdag 14 oktober 11

  29. LINK PSEUDO SELECTORS :any-link (link done right) & :local-link vrijdag

    14 oktober 11
  30. ::CUE(:PAST) -::CUE(:FUTURE) I only see use in it for karaoke?

    For use with <video> vrijdag 14 oktober 11
  31. BOTH LABEL & INPUT label:hover /for/ input{ color:red; } vrijdag

    14 oktober 11
  32. VARIABLES @var $color vrijdag 14 oktober 11

  33. NESTING LESS LIKE header & nav.main{ } & nav.language{ }

    vrijdag 14 oktober 11
  34. LESLIE JENSEN-INMAN Passion. Purpose. Promise. Pursuit. vrijdag 14 oktober 11

  35. vrijdag 14 oktober 11

  36. ALEX RUSSEL Data semantics vrijdag 14 oktober 11

  37. RAPID EVOLVING PLATFORMS Chrome is lighting fast, updates every 6

    weeks Firefox is catching up Well, lets just not mention IE :) vrijdag 14 oktober 11
  38. EXTENDING THE DOM Extend the DOM with own symantics (like

    for ex. <x- comment>) vrijdag 14 oktober 11
  39. CREATING TEMPLATES <html> <head> <datasource type="json" src="foo.json" id="dm"></datasource> </head> <body

    model="dm"> <template iterate="items" id="t"> <li>{{name}} <ul> <template ref="t" iterate="children"></template> </ul> </li> </template> </body> <html> vrijdag 14 oktober 11
  40. MODEL DRIVEN VIEWS vrijdag 14 oktober 11

  41. DYVIA The new development workflow vrijdag 14 oktober 11

  42. STILL DO THE SAME THING Design in photoshop, well photoshop

    doesn’t really fit our needs anymore vrijdag 14 oktober 11
  43. MASTER THE DEV TOOLS Master at least one dev tool

    (firebug, inspector). Doesn’t really matter what you choose. vrijdag 14 oktober 11
  44. USE VCS! Git vrijdag 14 oktober 11

  45. MAKE CHOICES ON FEATURE SUPPORT vrijdag 14 oktober 11

  46. CHECK WHY YOU ARE USING POLYFILLS vrijdag 14 oktober 11

  47. PREPROCESSING LESS, SASS, COMPASS, ... vrijdag 14 oktober 11

  48. FOLLOW THE SPECS Just follow them… vrijdag 14 oktober 11

  49. TEST FOR DEVICES Remote debugging vrijdag 14 oktober 11

  50. REALLY CHECK POLYFILLS! Don’t use them for: border-radius box-shadow gradients

    vrijdag 14 oktober 11
  51. NO MORE VENDOR PREFIXES for box-shadow and border-radius BUT I

    disagree vrijdag 14 oktober 11
  52. MORE BUILDSCRIPTS compressing images, making sprites, compiling JS/CSS vrijdag 14

    oktober 11
  53. ROBERT NYMAN HTML5 Forms vrijdag 14 oktober 11

  54. NEW TYPES color, date, datetime, datetime-local, email, month, number, range,

    search, tel, time, url, week vrijdag 14 oktober 11
  55. VALIDATION Check required fields vrijdag 14 oktober 11

  56. CUSTOM ERROR MESSAGES Only Firefox supports it right now. vrijdag

    14 oktober 11
  57. CHECK REGEX Check for a valid pattern vrijdag 14 oktober

    11
  58. SEB LEE DELISLE Creative JS vrijdag 14 oktober 11

  59. CREATING PARTICLES Adding velocity, drag, gravity. http://www.treeshadow.be/particles vrijdag 14 oktober

    11
  60. MOST AWESOME DEMO EVER! 230+ smartphones connected to be a

    pixel of a large display vrijdag 14 oktober 11
  61. JOHN RESIG jQuery and the open source process vrijdag 14

    oktober 11
  62. PROVIDE GOOD DOCS If people get lost in your API

    they will never use it again! vrijdag 14 oktober 11
  63. PROVIDE -WORKING- TUTS vrijdag 14 oktober 11

  64. BE NICE You will never know who will implement your

    API. vrijdag 14 oktober 11
  65. PROVIDE MULTIPLE AIDS IRC channel, disscussion groups, bug tracker vrijdag

    14 oktober 11
  66. JAKE ARCHIBALD In your @font-face vrijdag 14 oktober 11

  67. EOT For IE vrijdag 14 oktober 11

  68. WOFF For all major browsers vrijdag 14 oktober 11

  69. TTF For android and IOS vrijdag 14 oktober 11

  70. SVG For IOS <4.2 vrijdag 14 oktober 11

  71. OPTIMISING Regular TTF - 352K Remove unused glyphs - 90K

    Gzip - 29K vrijdag 14 oktober 11
  72. TRUETYPE VS POSTSCRIPT Battle of the outlines vrijdag 14 oktober

    11
  73. LEGAL ISSUES Can’t change fonts, the licence says so… vrijdag

    14 oktober 11
  74. vrijdag 14 oktober 11

  75. WEBFONT LOADER Adds classes for each separate loaded font. Prevent

    changes in heights when hitting a fallback. vrijdag 14 oktober 11
  76. THANKS! vrijdag 14 oktober 11