Fronteers conference 2011 summary

FRONTEERS CONF 2011 Pathé Tuschinski - Amsterdam vrijdag 14 oktober
11

LEA VEROU 10 CSS3 secrets vrijdag 14 oktober 11

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

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

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

MAKE POINTER EVENTS PASS THROUGH pointer-events:auto; Feature detect it with
JS vrijdag 14 oktober 11

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

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

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

BRUCE LAWSON HTML5 Semantics “You too can be a bedwetting
antfucker” vrijdag 14 oktober 11

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

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

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

<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

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

THERE IS NO <CONTENT> Exclusion method, everthing that has nog
speciﬁc tag is content! vrijdag 14 oktober 11

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

NO GOLDEN RULE vrijdag 14 oktober 11

STEPHEN HAY Go with the ﬂow vrijdag 14 oktober 11

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

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

LINE GRID p{ layout-grid-line: 1.5; layout-grid-mode: baseline; margin-top: 1gd; margin-bottom:
1gd; } vrijdag 14 oktober 11

TAB ATKINS The future of CSS layouts vrijdag 14 oktober
11

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

FLEXBOX ul { display: ﬂexbox; } li { width: ﬂex();
} vrijdag 14 oktober 11

NEW UNITS! vw, vh, rem (em from root), ch (width
from char 0) vrijdag 14 oktober 11

CYCLE() cycle(italic, normal); vrijdag 14 oktober 11

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

LINK PSEUDO SELECTORS :any-link (link done right) & :local-link vrijdag
14 oktober 11

::CUE(:PAST) -::CUE(:FUTURE) I only see use in it for karaoke?
For use with <video> vrijdag 14 oktober 11

BOTH LABEL & INPUT label:hover /for/ input{ color:red; } vrijdag
14 oktober 11

VARIABLES @var $color vrijdag 14 oktober 11

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

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

ALEX RUSSEL Data semantics vrijdag 14 oktober 11

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

EXTENDING THE DOM Extend the DOM with own symantics (like
for ex. <x- comment>) vrijdag 14 oktober 11

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

MODEL DRIVEN VIEWS vrijdag 14 oktober 11

DYVIA The new development workﬂow vrijdag 14 oktober 11

STILL DO THE SAME THING Design in photoshop, well photoshop
doesn’t really ﬁt our needs anymore vrijdag 14 oktober 11

MASTER THE DEV TOOLS Master at least one dev tool
(ﬁrebug, inspector). Doesn’t really matter what you choose. vrijdag 14 oktober 11

USE VCS! Git vrijdag 14 oktober 11

MAKE CHOICES ON FEATURE SUPPORT vrijdag 14 oktober 11

CHECK WHY YOU ARE USING POLYFILLS vrijdag 14 oktober 11

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

FOLLOW THE SPECS Just follow them… vrijdag 14 oktober 11

TEST FOR DEVICES Remote debugging vrijdag 14 oktober 11

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

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

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

ROBERT NYMAN HTML5 Forms vrijdag 14 oktober 11

NEW TYPES color, date, datetime, datetime-local, email, month, number, range,
search, tel, time, url, week vrijdag 14 oktober 11

VALIDATION Check required ﬁelds vrijdag 14 oktober 11

CUSTOM ERROR MESSAGES Only Firefox supports it right now. vrijdag
14 oktober 11

CHECK REGEX Check for a valid pattern vrijdag 14 oktober
11

SEB LEE DELISLE Creative JS vrijdag 14 oktober 11

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

MOST AWESOME DEMO EVER! 230+ smartphones connected to be a
pixel of a large display vrijdag 14 oktober 11

JOHN RESIG jQuery and the open source process vrijdag 14
oktober 11

PROVIDE GOOD DOCS If people get lost in your API
they will never use it again! vrijdag 14 oktober 11

PROVIDE -WORKING- TUTS vrijdag 14 oktober 11

BE NICE You will never know who will implement your
API. vrijdag 14 oktober 11

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

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

EOT For IE vrijdag 14 oktober 11

WOFF For all major browsers vrijdag 14 oktober 11

TTF For android and IOS vrijdag 14 oktober 11

SVG For IOS <4.2 vrijdag 14 oktober 11

OPTIMISING Regular TTF - 352K Remove unused glyphs - 90K
Gzip - 29K vrijdag 14 oktober 11

TRUETYPE VS POSTSCRIPT Battle of the outlines vrijdag 14 oktober
11

LEGAL ISSUES Can’t change fonts, the licence says so… vrijdag
14 oktober 11

WEBFONT LOADER Adds classes for each separate loaded font. Prevent
changes in heights when hitting a fallback. vrijdag 14 oktober 11

THANKS! vrijdag 14 oktober 11

Fronteers conference 2011 summary

Fronteers conference 2011 summary

More Decks by houbenkristof

Other Decks in Programming

Featured

Transcript