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

Fronteers conference 2011 summary

houbenkristof
October 14, 2011
Programming
3
140

Fronteers conference 2011 summary

Presentation I did at our firm to summarize Fronteers 2011

houbenkristof

October 14, 2011
Tweet

More Decks by houbenkristof

See All by houbenkristof
Prototyping for the real world.
houbenkristof
1
65
Extending Sketch App with awesomeness.
houbenkristof
3
220
My inner-design-monkey
houbenkristof
1
110
De knop (The button)
houbenkristof
0
49
Fronteers talk Digiti — "Pre-processing"
houbenkristof
8
540
Challenge accepted!
houbenkristof
1
220

Other Decks in Programming

See All in Programming
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
160
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
190
1인 개발자로 행복하게 살기 - GDG 송도 헬로월드 2024
benjaminkim
1
5.6k
今、知っておきたい! 生成AIエージェントの世界
elith
3
340
Folding Cheat Sheet #2
philipschwarz
PRO
0
110
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
220
Java 22 Overview
kishida
1
170
puregoの活用例
aethiopicuschan
0
220
⼤規模⾔語モデルの拡張（RAG）が 終わったかも知れない件について
nearme_tech
22
15k
HUIT新歓2024「競技プログラミング、やってみませんか？」
slephy2784
1
250
Git Lint
bkuhlmann
4
740
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
250

Featured

See All Featured
Web development in the modern age
philhawksworth
202
10k
Done Done
chrislema
178
15k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Making the Leap to Tech Lead
cromwellryan
123
8.5k
Designing with Data
zakiwarfel
95
4.8k
Into the Great Unknown - MozCon
thekraken
10
980
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.4k
Docker and Python
trallard
33
2.7k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
76
41k
Optimizing for Happiness
mojombo
370
69k

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