Drupal 8 HTML5 + Front-end Update

Learn about what's going on with the Drupal 8 HTML5 Initiative:
- Overview of the initiative goals.
- Insight into details of the issues we're dealing with now, and will be in the near future.
- Talk about some of the challenges we face.
- Learn about some of the non-HTML5 possibilities for Drupal 8, from a theming perspective.
- Learn how you can get involved.

Transcript

1. DRUPAL 8 + HTML5 JACINE LUISI @jacine Sunday, December 11, 11
2. JACINE LUISI ‣ Front end ‘Drupal’ developer (themer) ‣ Write PHP, CSS, HTML and jQuery ‣ Core co-maintainer for Markup and CSS ‣ Drupal 8 HTML5 Initiative Lead ‣ Co-author “The Definitive Guide to Drupal 7” Sunday, December 11, 11
3. JACINE LUISI ‣ Front end ‘Drupal’ developer (themer) ‣ Write PHP, CSS, HTML and jQuery ‣ Core co-maintainer for Markup and CSS ‣ Drupal 8 HTML5 Initiative Lead ‣ Co-author “The Definitive Guide to Drupal 7” Sunday, December 11, 11
4. HISTORY ‣ 2005 - Learned some PHP/HTML/CSS/ JavaScript to start e-commerce business. ‣ 2006 - A friend recommended Drupal 4.7, and needed help with his blog.Drupal.org member since October, 2006. ‣ 2007 - Contributed a theme (Sky) in September. - Hired by a Drupal shop shortly thereafter (hint, hint). ‣ 2008 - Attended first Drupalcon in Boston - First core patch committed May. ‣ 2009 - Released the Skinr module. - Gave first session atDesign 4 Drupal Boston. - Attended first European Drupalcon - Paris. ‣ 2010 - Became co-maintainer Drupal 7's Markup and CSS components. ‣ 2011 - “Top 50” contributor to D7 - Appointed HTML5 Initiative Lead. Sunday, December 11, 11
5. LET’S TALK ABOUT HTML5 IN DRUPAL 8 Sunday, December 11, 11
6. THE HTML5 INITIATIVE WILL BRING... ‣ Better, more semantic markup ‣ Better accessibility with ARIA roles ‣ More intuitive and usable forms ‣ Better CSS in core modules Sunday, December 11, 11
7. NEW HTML5 ELEMENTS <article> <details> <hgroup> <progress> <aside> <summary> <keygen> <section> <audio> <embed> <mark> <time> <bdi> <figure> <menu> <track> <canvas> <figcaption> <meter> <video> <command> <footer> <nav> <source> <datalist> <header> <output> <wbr> Sunday, December 11, 11
8. NEW FORM STUFF See live demos here: http://wufoo.com/html5/ Input types color email date number range search tel url Elements keygen meter output progress Sunday, December 11, 11
9. EXAMPLE <input type="tel" required="required" placeholder="2125551212" name="tel" id="tel"> Sunday, December 11, 11
10. EXAMPLE <input type="tel" required="required" placeholder="2125551212" name="tel" id="tel"> DIFFERENT KEYPAD Sunday, December 11, 11
11. EASY PLACEHOLDER TEXT EXAMPLE <input type="tel" required="required" placeholder="2125551212" name="tel" id="tel"> DIFFERENT KEYPAD Sunday, December 11, 11
12. EASY PLACEHOLDER TEXT EXAMPLE <input type="tel" required="required" placeholder="2125551212" name="tel" id="tel"> DIFFERENT KEYPAD CLIENT-SIDE VALIDATION Sunday, December 11, 11
13. AND MORE AWESOMENESS! Sunday, December 11, 11
14. SO... WHAT’S THE PLAN? Sunday, December 11, 11
15. PHASE 1 ISSUE #1077878 SUMMARY #1179520 Markup Polyfill for lte IE8 ISSUE #675348 SUMMARY #1183606 Make new elements available in the Forms API ISSUE #1077510 SUMMARY #1193054 Use new HTML5 elements and ARIA roles in templates & theme functions ISSUE N/A SUMMARY #1089868 Clean up CSS! We would be nuts not to do this at the same time. ISSUE #1174756 SUMMARY N/A Simplify <script>, <style>, <link>, <meta charset /> elements ISSUE #732992 SUMMARY N/A Ensure filter functions accept and properly format HTML5 elements Sunday, December 11, 11
16. MARKUP POLYFILL Sunday, December 11, 11
17. THE SHIV... ‣ Solves what would have been an epic problem for HTML5 adoption: IE doesn’t recognize unknown elements. ‣ Makes older browsers recognize new elements using document.createElement(element). ‣ Allows them to be styled with CSS and for those styles to be carry over when printed with IEPP. ‣ http://paulirish.com/2011/the-history-of-the- html5-shiv/ <!--[if lte IE 8]><script src="/misc/html5.js"></script><![endif]--> Sunday, December 11, 11
18. WHEN JAVASCRIPT IS DISABLED... ‣ It’s ONLY an issue for IE6 - IE8. The elements still render, but without CSS styles applied. - See an example: http://en.wikipedia.org/wiki/ HTML5_Shiv#Example ‣ This affects a TINY small subset of users. See: - How many users have JavaScript disabled? - EU and US JavaScript Disabled Index numbers + Web Analytics data collection impact ‣ We dropped support for Internet Explorer 6, and hopefully will drop support for IE7 as well. Sunday, December 11, 11
19. BUT I NEED TO SUPPORT IE6! ‣ In some very sad edge case situations your project may require lots of <div>’s. ‣ We are nice people, and will give you a theme for that: http://drupal.org/project/legacy ‣ But, NO... We will not continue carrying around and supporting crap markup and CSS until ~2016 because of your edge case situation. ‣ You are welcome to code your own IE6 CSS. Sunday, December 11, 11
20. TEMPLATE CONVERSION Sunday, December 11, 11
21. DOCTYPE & <html> attributes ‣ Document type declaration is simplified. ‣ The <html> element has pluggable attributes. - RDF attributes are no longer hard-coded. - Other attributes can be inserted by modules, such as the “manifest” attribute (for Offline Web applications with Application Cache). <!DOCTYPE html> <html<?php print $html_attributes; ?>> Sunday, December 11, 11
22. html.tpl.php <!DOCTYPE html> <html[lots-o-html-attributes]> <head> $head, <title>, $styles, $scripts </head> <body [lots-o-body-attributes]> skip link, $page_top, $page, $page_bottom </body> </html> Sunday, December 11, 11
23. page.tpl.php <div id="page"> <header id="header" role="banner"> logo, site name, slogan, header region </header> <nav role="navigation"> main menu, secondary menu </nav> <!-- Snip sidebars and stuff. --> <footer id="footer" role="contentinfo">footer_region</footer> </div> Sunday, December 11, 11
24. node.tpl.php <article[lots of attributes]> title_prefix, title, title_suffix <footer> user_picture <p class="submitted"> submitted </p> </footer> <div class="content"[content attributes]>> content </div> links, comments </article> Sunday, December 11, 11
25. comment-wrapper.tpl.php <section[lots of attributes]> title_prefix, title, title_suffix comments comment_form </section> Sunday, December 11, 11
26. comment.tpl.php <article class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>> title_prefix <?php if ($new): ?><mark class="new">new</mark><?php endif; ?> title, title_suffix <footer> user_picture <p class="submitted"> submitted </p> permalink </footer> <div class="content"<?php print $content_attributes; ?>> content <div class="user-signature"> signature </div> </div> links </article> Sunday, December 11, 11
27. FORM API ELEMENTS Sunday, December 11, 11
28. WHAT IS THE FORMS API? ‣ Drupal has an API to general Form elements. ‣ It doesn’t have all the spankin’ new HTML5 stuff. function example_form(&$form, $form_state) { $form['email'] = array( '#type' => 'textfield', '#title' => t('E-mail address'), '#required' => TRUE, ); $form['submit'] = array( '#type' => 'submit', '#value' => t('Submit!'), ); return $form; } Sunday, December 11, 11
29. THESE NEED SUPPORT... ‣ color ‣ date ‣ datetime ‣ datetime-local ‣ month ‣ week ‣ time ‣ email ‣ number ‣ range ‣ search ‣ tel ‣ url ‣ datalist ‣ meter ‣ progress ‣ output ‣ keygen Sunday, December 11, 11
30. ATTRIBUTES NEED TO BE ASSESSED ‣ placeholder ‣ autofocus ‣ maxlength ‣ list ‣ autocomplete ‣ required ‣ pattern ‣ spellcheck ‣ accept ‣ multiple ‣ min ‣ max ‣ step ‣ novalidate ‣ formnovalidate ‣ formaction ‣ formmethod ‣ formtarget ‣ formenctype Sunday, December 11, 11
31. POLYFILLS (n). A JavaScript shim that replicates the standard API for older browsers. Source: http://www.modernizr.com/docs/ Sunday, December 11, 11
32. MODERNIZR == ANSWER TO EVERYTHING! Sunday, December 11, 11
33. MODERNIZR == ANSWER TO EVERYTHING! Sunday, December 11, 11
34. MODERNIZR IS AWESOME Sunday, December 11, 11
35. WHAT IS MODERNIZR? ‣ An HTML5 + CSS3 feature detection library. ‣ But has even MOAR feature detection! e.g. Geolocation API, SVN, Touch events, WebGL ‣ Optionally includes: - A Script loader library called YepNope.js - The HTML5 Shiv/Shim. - A bunch of CSS classes allowing you to write different CSS based on whether or not a feature is supported. - A bunch of community written add-ons. Sunday, December 11, 11
36. SCRIPT LOADER ‣ Conditional loading of JavaScript files. ‣ Modernizr (optionally) contains YepNope.js, better known as Modernizr.load. ‣ Allows you to load a script file based on the results of tests. ‣ Improves memory usage, page execution time, and saves bandwidth. Sunday, December 11, 11
37. Modernizr.load EXAMPLE ‣ Does the browser support Geolocation? - Yes? - GREAT! gimme geo.js. - No? - SIGH. Fine, gimme geo-polyfill.js Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js' }); Sunday, December 11, 11
38. HOLY SCRIPT LOADER LIBRARIES BATMAN! https://docs.google.com/spreadsheet/ccc? key=0Aqln2akPWiMIdERkY3J2OXdOUVJDTkNSQ2ZsV3hoWVE Lots of factors to consider... Sunday, December 11, 11
39. WHERE DOES MODERNIZR BELONG? CONTRIB? OR CORE? ‣ What if you don’t need Modernizr? - Think WSCCI and non-HTML output (JSON, XML, etc). ‣ It’s not a drop-in solution. - Custom builds are highly recommended. - Code is spread across multiple Github repos. - Massive UI challenge. ‣ It is changing VERY rapidly. - Core is slow & painful. Think jQuery & jQuery Update module. Sunday, December 11, 11
40. WHERE MIGHT WE NEED POLYFILLS? Client-side validation? autocomplete ? autofocus No pattern ? placeholder No Widgets & Interactive Elements ? inputs: date variations, color ? datalist ? details/summary Yes! meter ? Sunday, December 11, 11
41. CONSIDERATIONS ‣ What does browser support look like? ‣ Is the fallback acceptable? ‣ Are the browser implementations accessible? ‣ Is the polyfill acceptable for core inclusion? ‣ What is the cost/benefit analysis? - What impact would it have on extensibility? - Does the level of UX we want require it? Sunday, December 11, 11
42. OTHER INITIATIVES TO CONSIDER ‣ Mobile Initiative - Responsive Images <picture> element? - Mobile Friendly forms ‣ Design Initiative - Fancy new core theme - Responsive Design - Fancy JavaScript features planned Sunday, December 11, 11
43. MORE DISCUSSION & TESTING NEEDED “I think it would be useful to A/B test the performance differences between using Modernizr.load and not and see its effect in a real world environment and those results should drive the conversation. It’s totally possible it's the wrong move. Hard to say. Script loading is an invention to work around old browsers' inefficiencies but new browsers have all sorts of tricks.” - Paul Irish @paul_irish Sunday, December 11, 11
44. CSS CLEANUP + CSS3 Sunday, December 11, 11
45. OVERVIEW OF GOALS http://drupal.org/node/1089868 ‣ Make it easy to remove unwanted design assumptions in the theme layer, while maintaining critical functionality (such as functional JavaScript behavior). ‣ Prevent unneeded administrative styles from loading on the front end. ‣ Give modules the ability to include a generic design implementation with their module, without burdening themers. ‣ Make CSS and related markup more efficient and less intrusive to improve the themer experience. Sunday, December 11, 11
46. PUT CSS IN THE APPROPRIATE FILE ‣ module.base.css - Structural and behavior related styling. CSS should be coded against the Stark theme. The absolute bare minimum CSS required for the module to function should go here. If there is no CSS required, this file should be omitted. ‣ module.theme.css - Generic design-related styles that could be used with Stark and other themes. It's where all design assumptions like backgrounds, borders, colors, fonts, margins, padding, etc, would go. ‣ module.admin.css - Styles that are only applicable to administrative pages. Sunday, December 11, 11
47. DRUPAL 7 EXAMPLE Sunday, December 11, 11
48. REMOVE EXCESS CSS & ASSUMPTIONS ‣ If the markup is good, the CSS is not needed! ‣ Superfluous margins, padding, font-family, line- height, and similar declarations do NOT belong in core modules. ‣ If any of that is needed, ensure it’s in module.theme.css. ‣ They will not survive this development cycle. Sunday, December 11, 11
49. REDUCE SELECTOR SPECIFICITY ‣ We have a really bad habit of writing crazy long and specific selectors. ‣ This is painful to deal with in the theme layer, and it’s a big part of why people want core not to have ANY CSS at all. ‣ Avoid using ID’s in module CSS files. ID’s are fine for themes, but makes CSS in modules it makes writing CSS more painful than it needs to be. Sunday, December 11, 11
50. GET OUT OF THE THEMER’S WAY ‣ module.base.css will be useful when you want to change the appearance of something, and retain functionality. ‣ module.theme.css can be completely thrown out in custom themes using hook_css_alter(). ‣ YAY! Sunday, December 11, 11
51. IE6 SUPPORT HAS BEEN DROPPED... Sunday, December 11, 11
52. HERE’S SOME OF WHAT WE CAN USE Child selectors CSS 2.1 ul > li Matching attributes and attribute values selectors CSS 2.1 [attr] [attr=val] [attr~=val] [attr|=val] Substring matching attribute selectors CSS 3 [att^=val] [att$=val] [att*=val] Multiple classes CSS 2.1 .node.published General Sibling selectors CSS 3 section ~ div :first-child pseudo-class CSS 2.1 li:first-child http://www.quirksmode.org/css/contents.html Sunday, December 11, 11
53. A HUGE OPPORTUNITY FOR FRONT END DEVELOPERS WITH DRUPAL Sunday, December 11, 11
54. DOES THEMING MAKE YOU ANGRY? Source: http://meyerweb.com/bkkt/angry.gif Sunday, December 11, 11
55. DOES THEMING MAKE YOU ANGRY? Source: http://meyerweb.com/bkkt/angry.gif Sunday, December 11, 11
56. SOUND FAMILIAR? ‣ You are frustrated with HATE Drupal’s markup ‣ You are frustrated with HATE Drupal’s CSS ‣ You know you can do it better ‣ You want to get involved with core development Sunday, December 11, 11
57. ‣ Developers are paying attention! ‣ Markup and CSS will finally get the focus needed for us to get the job done. ‣ ... IF we all come together and make it happen. THIS IS YOUR CHANCE TO GET INVOLVED Sunday, December 11, 11
58. HTML5 STATUS Implement a JavaScript fallback for non-supported browsers Ensure filter functions accept HTML5 elements 100% 100% Implement new input types and form elements in Forms API Use new HTML5 elements in templates and theme functions Clean up CSS! ~20% ~20% ~20% Simplify <head> contents ~20% Sunday, December 11, 11
59. DRUPAL IS FACING A LOT OF OTHER ISSUES... Sunday, December 11, 11
60. BIG PROBLEMS ‣ Trying to write about Drupal’s theme system in a clear and cohesive manner was the hardest thing I’ve ever had to do. ‣ It exposed what I perceive to be huge problems. ‣ Some of these problems are easily fixable and some of them aren’t. Sunday, December 11, 11
61. WAIT, WHAT? DRUPAL IS AWESOME! Sunday, December 11, 11
62. Sunday, December 11, 11
63. Sunday, December 11, 11
64. PRETTY, RIGHT? BUT, WHAT’S IT REALLY LIKE WORKING WITH THE THEME SYSTEM? Sunday, December 11, 11
65. A SIMPLIFIED WIRING GUIDE TO THE THEME LAYER Image by John Albin Wilkins Sunday, December 11, 11
66. LOOK NO FURTHER THAN PAGE.TPL.PHP ‣ Some custom variables from template_preprocess(). ‣ Some of them are render arrays, some of them strings and others regular arrays meant for theme functions. ‣ Some variables are based on theme settings. ‣ Then there's the $page array that only contains regions... (which is misleading and should probably be called hook_regions_alter()). Sunday, December 11, 11
67. TOO MANY CONCEPTS ‣ There are too many ways to accomplish tasks. ‣ Most tasks end up exposing markup. ‣ Themers need to also be developers to get the job done most of the time. Sunday, December 11, 11
68. AS A RESULT.. ‣ Too many people rely on base themes. ‣ Innovation in the theme space is damn near impossible. ‣ Front end developers spend more time battling Drupal’s inconsistencies and assumptions than staying at the edge of the industry. Sunday, December 11, 11
69. WHO’S WORKING ON THESE PROJECTS? ‣ Not your average front end developer... Some focus on themes only, others do a lot more ‣ Some PHP knowledge is a must! ‣ They’ve also got to deal with complicated setups, Git, Features, etc. ‣ Some of them get time to implement well thought out solutions and others just need to get it done fast. Sunday, December 11, 11
70. WHY IS THIS A PROBLEM? ‣ There are no consistent patterns to rely upon. ‣ There are no easy answers. ‣ The learning curve leaves theme developers feeling stupid. Sunday, December 11, 11
71. HERE’S HOW YOU CAN GET INVOLVED... Sunday, December 11, 11
72. JOIN THE WORKING GROUP http://groups.drupal.org/html5/drupal-8 Sunday, December 11, 11
73. ATTEND THE INITIATIVE MEETINGS ‣ We have meetings every other Tuesday at 4 PM to discuss issues/progress. ‣ Events are posted here: http:// groups.drupal.org/html5 and there’s a Google Calendar feed. ‣ The chat room is always full of people involved with the initiative. Use it. ‣ We hold office hours (almost) every Sunday from 1-3 PM EST in #drupal-html5 in IRC. Sunday, December 11, 11
74. FOLLOW US ON TWITTER http://twitter.com/drupal8html5 Sunday, December 11, 11
75. READ ABOUT THE INITIATIVE http://drupal.org/html5 Sunday, December 11, 11
76. READ THE ROADMAP SUMMARIES http://drupal.org/html5#roadmap Sunday, December 11, 11
77. WRITE CODE. REVIEW PATCHES. drupal.org/project/issues/search/drupal?status[]=Open&version[]=8.x&issue_tags=html5 Sunday, December 11, 11
78. HTML5 RESOURCES Dive into HTML5 http://diveintohtml5.info HTML5 Doctor http://html5doctor.com HTML5 Spec for Web Developers http://developers.whatwg.org When can I use... http://caniuse.com HTML5 Accessibility http://html5accessibility.com HTML5 Security Cheat Sheet http://html5sec.org Mobile HTML5 Compatibility http://mobilehtml5.org/ Sunday, December 11, 11
79. THANKS FOR WATCHING! ‣ Places to find me: - http://twitter.com/jacine - http://drupal.org/user/88931 - http://gplus.to/jacine - http://about.me/jacine Sunday, December 11, 11