Adventures in Front-end and Design

A as-of-now look at what's been going on in the ever-changing world of web.

Transcript

1. Adventures in Front-end & Design An OKAPI Session 15 March 2013
2. News and shit
3. OPERA + WEBKIT = Sitting in a tree
4. ChromeBook Pixel Hi-end, hi-dpi display, touch enabled ChromeOS laptop
5. Firefox OS Announcing the Firefox OS Developer Preview Phone
6. W3CONF 2013 SF, 21 - 22 February 2013 http://www.youtube.com/user/W3Conf?feature=watch
7. Adaptive interaction "Pointing Forward" Jacob Rossi pressure, tilt, width, height http://www.youtube.com/user/W3Conf?feature=watch
8. CSS Secrets "More CSS Secrets: Another 10 things you may not know about CSS" Lea Verou http://www.youtube.com/watch?v=3ikye7Qc7Ak
9. • bounce animation in CSS • ellipses using 50% border-radius • multiple outlines using multiple shadows • pointer-events: none • custom checkboxes (:checked) • custom tab size • styling based of number of siblings • background patterns (http://lea.verou.me/css3patterns/) Previous 10 Secrets
10. • masking gradients (background-image, gradients, background-size) • calc - combining multiple units (ie9) • transitions (props) • background-size in em background-origin: content-box (boxes) • every second line have another colour - ala table • canceling transforms • css filters FTW! • css hyphenation • ch unit (monospace font) • frames animation using steps function These 10 Secrets
11. Typography & legibility "Do Androids read electronic books?" CJ Gammon
12. "Do Androids read electronic books?" • fonts and such (ems and rems) • contrast: 4.5:1, avoid pure black / white • kerning: letter-spacing: 0em; font-kerning: normal or lettering.js • letting and measure (line-height) • justify + hyphens + balance (4 responsive design) + text-wrap: auto (jquery plugin) • regions and exclusions • Convergence of media
13. Art of creative coding "Beyond Play: The art of Creative" Joshua Davis
19. http://www.behance.net/joshuadavis http://www.youtube.com/watch?v=LJS4fBjdPM4 let's watch 3 minutes of this
20. On accessibility "Design like you give a damn: Practical accessibility for web pros" Léonie Watson
21. On HTML5 Security "HTML5 Security Realities" Brad Hill CSP
22. On context "Questioning best practices" Nicollas Gallager http://www.youtube.com/watch?v=XQWOKBBJ114
23. The Technology
24. Technologies you should know about SVG, WebAudio, WebGL
25. Emerging technologies WebRTC and getUserMedia, Web Components and Shadow DOM
26. The People Paul Irish, Chris Coyier, Addy Osmany, Rebecca Murphey, Remy Sharp, Jonathan Snook, <lots more>
27. Paul Irish HTML5 Boilerplate, jQuery Dev, Modernizr, Yeoman Chrome Developer Relations http://paulirish.com/ https://plus.google.com/113127438179392830442/posts
28. Chris Coyier CSS Tricks, Shop talk http://css-tricks.com/ http://shoptalkshow.com/
29. Addy Osmany ToDo MVC, 'Learning JavaScript Design Patterns', Yeoman Chrome team at Google http://addyosmani.com/
30. Rebecca Murphey jQuery Cookbook, jQuery Fundamentals, creator of TXJS, js-assessment Software developer, Bazaarvoice http://rmurphey.com/
31. You might have missed
32. On Adaptive and responsive and flexible and fluid and mobile first and progressive enhancement,,, oh god why? http://www.slideshare.net/bradfrostweb/beyond-squishy-the-principles-of-adaptive-design-17070713 250 slides of awesome by Brad Frost
33. Inventing on Principle Bret Victor http://worrydream.com/ http://vimeo.com/36579366
35. Making things with Maths Steven Wittens http://acko.net/about/ Full Frontal Nov 2012 - Brighton, UK http://www.youtube.com/watch?v=ONN3jBly364
37. Is HTML relevant in the era of web apps? John Allsopp http://www.youtube.com/watch?v=KTqIGKmCqd0
38. THANK YOU Vlad Goran oportocala@gmail.com, vlad@okapidev.com, @oportocala