jacine

Drupal 8 HTML5 + Front end Update Slides

Here are the slides for the presentation I gave yesterday at Drupalcamp NYC 10.

Download the PDF.

HTML5 Initiative Video Presentation and Slides for Drupal Design Camp Berlin

If you’re interested in the Drupal 8 HTML5 Initiative, check out this short video presentation and slides I put together for Drupal Design Camp Berlin. It provides an overview of the initiative, the roadmap, and provides details explaining how to get involved.

View on Vimeo.com.

View on Slideshare

HTML5 Drupal 8 Initiative

Back in March, at Drupalcon Chicago, Dries announced that moving to HTML5 would be one of five major initiatives for Drupal 8. I was honored when he asked me to lead the initiative.

These are exciting times for web development and for the Drupal community. Over the past couple of years, we’ve seen HTML5 usage grow and CSS3 hit the mainstream. There has also been a real shift in design thinking. Gone are the days when you could design a website that would only be viewed on a desktop computer. At the same time, many of us are still stuck supporting older browsers. This presents both a challenge for Drupal, and a great opportunity. Between the Design for Drupal 8, Web Services and the HTML5 initiative, Drupal 8 is well positioned to make the improvements to Drupal core’s markup and CSS that many of us (myself included) have been waiting for, for a very long time.

Initiative Goals

The main goals of this initiative will be to implement HTML5 in Drupal core in a way that will:

• Have the most benefit for end users.
• Enable contributed modules and themes to evolve using HTML5.
• Allow theme developers to control where to use the new semantic elements, and opt out entirely if they so choose.

We want to ensure we’re spending our time implementing features that will directly benefit Drupal’s user base the most. As part of this initiative we‘ll focus mostly on:

• Adding support for the new form elements to Drupal’s Form API.
• Adding new semantic elements in core templates in an appropriate way.
• Adding ARIA roles to markup to improve accessibility.
• Simplifying style and script elements.
• Ensuring input filters and functions accept HTML5 elements.

The process of switching to HTML5 will also allow us take a good hard look at our templates. While updating the markup, we’ll also have the opportunity to re-factor Drupal’s CSS, and get rid of all the old and crufty bits once and for all.

HTML5 introduces a number of new APIs including audio, video, drag and drop, offline web applications, storage, geolocation and more. These APIs will not be the main focus of this initiative at this time, but proposals to implement them in core will be considered on a case by case basis.

Next Steps

In the coming months, we’ll examine the work that has been done in contrib and discuss what’s best for Drupal core. We’ll be working in the core issue queue on issues tagged HTML5 and general discussion will continue in the HTML5 group. We’ll schedule regular meetings to discuss priorities, progress and issues. More details will be posted shortly on the core initiative homepage, which once created will be referenced here.

Getting Involved

I’d like to take this opportunity to encourage anyone that’s passionate about HTML5 and wants to get into core development to join this effort. The stronger our team, the more we’ll be able to accomplish and anyone is welcome to get involved. You don’t have to code patches. Feedback, reviewing patches, writing documentation and contributing your awesome project management skills, for example, are just as valuable as code and will go a long way in helping make this initiative a success. Don’t let a perceived lack of knowledge or phobia of the core issue queues hold you back. ;)

The best way to get started is to read up on HTML5, and begin to participate by commenting on core HTML5 issues where you can. If you’re not familiar with HTML5, here are some great free resources to get you started:

• Dive into HTML5
• HTML5 Doctor
• When can I use…
• HTML5 Spec for Web Developers | Full spec

I’d like to thank everyone who encouraged me to accept this challenge, and those who’ve committed to being part of the team so far (more on this will follow soon). I hope to talk to more of you in the coming weeks about logistics and I’m looking forward to working with you all to make this initiative a success. Finally, I’d like to thank my employer, Gravitek Labs, for their continued support and for giving me the time I need to work on Drupal core.

Jeremy Keith on styling id attributes in stylesheets at Drupalcon Copenhagen

At Drupalcon Copenhagen last week, Jeremy Keith did a fantastic keynote on HTML5. After the keynote was finished, he answered some questions. Someone asked if the id attribute behaves the same in HTML5, to which he answered yes, and then offered the following, excellent advice:

Think about why your using id though. I’ve stopped using id in my stylesheets. I generally never style things using id, sticking to class names all the way, because whenever you say id equals you know whatever, header, footer, you’re saying this is only gonna come once in this document. I guarantee it. It will never come twice.

That’s a pretty big commitment. Are you really sure? Are you sure that six months from now, a year from now there might not be another one of those elements on the same page. Play it safe, use a class.

The only time I use an id attribute on an element is when I want that element to be addressable, which is the reason id’s exist, so that you have that fragment identifier in the url which is hash and then the id. That’s when I use id.

I pretty much never use it for styling now anyway, and I would recommend you look at sticking to classes, understanding specificity, understanding the flow, and using classes well, rather than using id.

When theming Drupal sites, targeting id’s in stylesheets is a very easy trap to fall into. I’m guilty of doing this myself at times, but he’s absolutely right. Don’t fall for it! Working with classes is much more flexible and generally easier to code.

Oh, and if you haven’t watched the keynote, I highly recommend you watch it now. It was top notch.

If you’re feeling inspired after that, and want to help with Drupal’s HTML5 efforts, join the HTML5 Drupal Group and get involved with HTML5 Base (theme) and HTML5 Tools (module).