HTML5, WEB COMPONENTS AND ANGULARJS OH MY! WHO AM I? Name: Justin Stockton Roles: Developer, QA, UX Designer, Business Analyst Twitter: @poorgeek Email: [email protected] WHAT ARE WE TALKING ABOUT TODAY? How do we evaluate a new technology? Who benefits from using a new technology? Examine a few new technologies LOOKING FOR SOMETHING MORE TECHNICAL? MarcySutton.com GLOSSARY Accessibilty Making something available to persons with disabilities accessibility Making something available to everyone Evergreen Browser A browser that updates itself without prompting the user Polyfill Adding browser support for a feature that does not exist natively in that browser Progressive Enhancement A method of web development where content is enhanced by layering on additional technologies for more advanced browsers so that the user can fallback EVALUATING A TECHNOLOGY INTERNAL VS. EXTERNAL FACTORS INTERNAL EXTERNAL Environment Site Analytics Ease of Use Requirements / Community / Ecosystem Commandments Support Surveys Documentation Help Desk / Support tickets Performance Security Accessibility WHO BENEFITS FROM USING A NEW TECHNOLOGY? Users Developers Business LET'S TALK TECH … HTML5 More than just new tags, e.g. New form types, e.g. <header> <input type="url"> <article> <input <footer> type="search"> <audio> / <video> <input type="datetime"> <svg> REQUIREMENTS Depends on the feature you're using. See Can I Use?. CSS3 Media Queries @media (min-width=800) text-shadow transform REQUIREMENTS Depends on the feature you're using. See Can I Use?. WEB COMPONENTS Custom Elements HTML Imports Templates Shadow DOM REQUIREMENTS Latest Chrome or Opera, some features supported by latest Firefox and no Safari or IE support. POLYMER Framework for building web components Rich ecosystem of components REQUIREMENTS JavaScript and latest Chrome, Opera, Firefox or IE10+ ANGULARJS Pure JavaScript framwork Single-Page Apps (SPA) Very active development backed by Google REQUIREMENTS JavaScript. v1.2 works in IE8+, v1.3 works in IE9+ and v2.0 will require IE10+ REFERENCES USEFUL STATISTICS HTML / CSS POLYFILLS StatCounter.com HTML5 Test Modernizr for WebAIM Screen Can I Use? HTML5 and CSS3 Reader Survey HTML5 ES5-Shim for Accessibility JavaScript QUESTIONS? Email: [email protected] Twitter: @poorgeek.