jacine

11 12 / 2011

Drupal 8 HTML5 + Front end Update Slides

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

Download the PDF.

7 notes, 0 comments, Permalink

09 12 / 2011

Permalink 7 notes

06 12 / 2011

Strawberry Vomo = Yummy

Allow me to share the best cocktail I’ve ever had with you… :)

Ingredients

• 1 shot - Absolut Vanilla vodka
• 1 shot - sour mix
• ~2 - muddled strawberries
• ~3 - fresh mint leaves
• Sprite

Instructions

Combine all the ingredients above, except for the Sprite into an 8 oz. glass. Fill the glass entirely with ice, and then fill the rest with Sprite. Mix it all up (in a Martini shaker if you have one) and enjoy.

Source: I learned of this drink at “B Bar” in The Borgata Hotel and Casino a few weeks ago.

0 comments, Permalink

03 8 / 2011

Creating Patches for Drupal Projects

This guide will show you what patches are and how to work with them in the context of the Drupal project (though it will likely be useful for any project). When you’re finished reading, you’ll be able to create, apply and revert patches like a pro. Here’s what we’ll cover:

1. The Anatomy of a Patch
2. Check out a project from the Git Repository
3. How to Create a Patch
4. How to Apply a Patch
5. How to Revert a Patch

The Anatomy of a Patch

A patch is a document that shows the differences between 2 versions of one or more files. We use them for Drupal development along with version control (Git) to communicate changes in a way that is very easy to understand, share and review. This is an example of a dead simple patch that changes a single line of code. If it looks a little complicated, not to worry. We’ll break it down bit by bit.

diff --git a/modules/taxonomy/taxonomy-term.tpl.php b/modules/taxonomy/taxonomy-term.tpl.php
index b515a9b..872d4cb 100644
--- a/modules/taxonomy/taxonomy-term.tpl.php
+++ b/modules/taxonomy/taxonomy-term.tpl.php
@@ -37,7 +37,7 @@
* @see template_process()
*/
?>
-<div id="taxonomy-term-<?php print $term->tid; ?>">
+<div id="taxonomy-term-<?php print $term->tid; ?>">
<?php if (!$page): ?>
<h2><a class="<?php print $term_url; ?>"><?php print $term_name; ?></a></h2>

The Header

The header is automatically generated. It provides information about which files are affected and what command was used to generate it (in this case the git diff). The last two lines show the files being compared with a --- (original) and +++ (new) prefix.

diff --git a/modules/taxonomy/taxonomy-term.tpl.php b/modules/taxonomy/taxonomy-term.tpl.php
index b515a9b..872d4cb 100644
--- a/modules/taxonomy/taxonomy-term.tpl.php
+++ b/modules/taxonomy/taxonomy-term.tpl.php

Hunks of Changes

The first line of each hunk range represents the starting line number and the number of lines in the hunk. As above, the - and + prefixes refer to the original and the new version of the file(s). Below this, each change is represented with the original version of it, followed by the new version of it. The original version is prefixed with minus sign. It represents code being removed in the patch. The plus sign represents the new version of code being added.

@@ -37,7 +37,7 @@
* @see template_process()
*/
?>
-<div id="taxonomy-term-<?php print $term->tid; ?>">
+<div id="taxonomy-term-<?php print $term->tid; ?>">
<?php if (!$page): ?>
<h2><a class="<?php print $term_url; ?>"><?php print $term_name; ?></a></h2>

Checking out a project from Drupal’s Git Repository with Tower

Before you can get started creating patches for Drupal projects, you’ll need to ensure you’ve got Git installed and that you’ve setup a local repository for the Drupal project you want to patch. You can test whether you’ve got Git installed by opening up terminal, typing “git” and hitting enter. If you get a bunch of help text, then you’re good. If you get a message saying the command isn’t found, then you’ll need to install Git.

-bash: git: command not found

If you are comfortable using the command line, this page will show you now to install Git. Afterwards, or if you’ve already got Git installed you can skip to creating a patch instructions. If you need a little guidance with a GUI, read on.

Set up a local repository with a GUI (Tower in this case)

Personally, I use and like Tower, so I’ll show you how to set up a repository using it. There are lots of Git GUI’s available and the process of setting up a new repository is pretty similar across them, so you’ll probably be able to follow along. Refer to the handbook for a growing list of Git GUI apps that are available.

1. Begin by click “Clone Remote Repository” from the dashboard.

   

2. Grab the repository URL from from the Version control tab (available from every project page) as use it as the “Remote URL.” In this case we are setting up the current development version of Drupal core. Name the repository whatever you want and browse to a location where you want to place the files. Then click “OK.”

   

3. After clicking “OK” the clone process will begin. It usually takes a minute or two depending on your connection speed. When it’s complete a new repository will appear on your dashboard. When you click into it you’ll see that repository is already on the proper branch (8.x) and there are no local changes pending. That’s it.

   

How to Create a Patch

The first thing we need is an issue to patch. Last month, mortendk noticed that an unwanted .clearfix class had somehow made it into the taxnomy-term.tpl.php template. Eventually, a new bug report against core was born. Morten didn’t know how to create a patch, but he tells us what should be done in the first comment. Unfortunately, if there is no actual patch, it will never reach “Reviewed and Tested by the Community” status and will not get fixed so that is just not enough. We need an actual patch. We know what the fix is here. We simply need to remove the “clearfix” class. So how do we do that?

1. Make sure the code is up to date

   Since we’ve already setup the repository, the first thing we need to do is make sure our codebase is completely up to date. There should be no other changes pending in the local repository. If you are using Tower or another GUI, you’ll need to make sure any pending changes are reverted before continuing.

   We can update the code in the Terminal with the following 2 commands:

   git reset --hard
   git pull origin 8.x

   In our GUI, we can click the “Pull” icon (in Tower it’s the second icon from the top left) to accomplish the same.

   

2. Make Your Changes and Save Them

   Since we’re working with version control, we can freely make changes and then save those changes right in place. They can always be easily reverted, and since none of us actually have commit access to Drupal core (or most contributed projects), we cannot actually do any harm. That being the case, I’m going to go straight to the affected file: modules/taxonomy/taxonomy-term.tpl.php. I’ve deleted the “clearfix” class and saved the file. Now when I look in Tower, it appears as “modified” and it’s got what looks like a patch underneath it.

   

3. Create the Patch

   We are now ready to create our patch. Sorry folks, but we’re definitely going to have to use the command line for this one. Don’t worry — It’s 2 painless commands. I promise. First, we navigate to the root of the project and then we run the git diff command to generate the patch.

   cd ~/Dropbox/Sites/drupal-8
   git diff > patch-name.patch

   It gets more complicated when patches require adding, renaming and(or) removing files. In order to get these changes into a patch, Git needs to know about them. You cannot just git add or “stage” in Tower and then run the patch command. This will not work. Instead, you should stage the files like you normally would for a commit. After doing this, you can generate the patch using the —staged option when generating the patch. For more information, see git diff documentation.

   git diff --staged > patch-name.patch

   This short video shows this process in action.

4. Upload the patch to Drupal.org

   You’re done! Your new patch is sitting in the root of the project directory. Now it’s time to upload it. It’s always best to explain what the patch does in the comment to help reviewers. This one is really simple and so is the comment. The patch is automatically tested by the testbot to ensure that it doesn’t cause any unwanted test failures elsewhere. Generally markup and CSS patches don’t have an affect on unit tests, so most of the time these will pass. The green background indicates that this one has passed the tests. Yay!

   

   If you read on in the issue, you’ll see that it is reviewed by and marked “reviewed and tested by the community” or what we like to call RTBC. This gets the attention of core committers. Just a few comments and weeks later, Dries committed the fix to both Drupal 7 and Drupal 8. SUCCESS! Now that wasn’t so hard was it? This is how it happens, folks.

   

How to Apply a Patch

The first step, as always is making sure your codebase is up to date. Once your codebase is clean and ready to go, you are ready to apply a patch. I’ll use the same issue as an example.

1. The first thing we need to do is save the patch to our project root. One fancy trick to speed this process up is to use wget. This command doesn’t come with OS X by default, so if you want it you’ll need to install it. Of course this is not required. “Save as” works just as well, but if you do have it this is the simple command you’d run from the project root to download the patch:

   wget drupal.org/files/issues/taxonomy-clearfix-1198088-01.patch

2. Next we apply the patch using a simple command, again, from the root of the project:

   git apply -v taxonomy-clearfix-1198088-01.patch

   Hint: You can start typing the first few letters of your patch name and use tab completion.

   The -v flag stands for “verbose.” When using this, the command will provide feedback in Terminal showing how the patch has applied.

Once the patch has been applied you can begin testing it and making modifications to the code, if needed. You may easily create an updated version of the patch by repeating steps 3-4 in the How to create a patch section.

How to Revert a Patch

There are a few different ways to revert patches:

1. Revert changes for a specific file using a -R (revert) option:

   git apply -R taxonomy-clearfix-1198088-01.patch

2. Revert a specific file using git checkout, or you can select the file and click the “revert” icon in your GUI.

   git checkout modules/taxonomy/taxonomy-term.tpl.php

3. Reset the entire working tree with a hard reset:

   git reset --hard

Learn more

Here are some quick shortcuts to the documentation pages that detail everything you ever wanted to know about patches and more.

• Git Documentation
• drupal.org/patch/create
• drupal.org/patch/submit
• drupal.org/patch/apply
• drupal.org/patch/review

4 notes, 0 comments, Permalink

28 6 / 2011

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

6 notes, 0 comments, Permalink

18 5 / 2011

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.

14 notes, 0 comments, Permalink

10 9 / 2010

How we’ve started to clean up CSS in Drupal’s System module

A couple of weeks ago, I wrote a post about Drupal’s CSS and how we can begin to clean it up. Since then a couple of us have resumed work on a patch to make some progress with the first part:

Do a round of cleanup in system.css, and ensure code is in the appropriate CSS file.

We are certainly limited to cleanup at this stage, given that Drupal 7 is so close to a beta release, so we’re just moving styles around as opposed to rewriting any code. Still, we’ve gotten really far.

Last weekend, while working on the latest patch, I decided to create a document summarizing the process of splitting of the base styles from the design styles with screenshots and code to help those reviewing the patch. The idea is that themers can easily remove system.theme.css, which makes a lot of assumptions about design, without breaking critical functionality.

This may not end up being the final version of the patch, but that’s beside the point. Hopefully this will help some module developers out there begin to think about separating their CSS.

Check out the PDF (pretty pictures and code).

If you can, please help review the patch.

1 note, 0 comments, Permalink

02 9 / 2010

Stylesheets can’t remove CSS files via theme.info anymore in Drupal 7

UPDATE: The original issue has been fixed. However, there is still a bug that allows these stylesheets to come back when content is rendered via AJAX.: drupal.org/node/967166

This video demonstrates the Drupal 7 issue outlined here: drupal.org/node/901062. Please comment in the issue if you want to see this fixed. Posting here wont help.

0 comments, Permalink

29 8 / 2010

Dreditor TextMate Style for Drupal.org

For those of you who don’t know, Dreditor is a kick-ass Greasemonkey script that Daniel Kudwien wrote to help make the process of reviewing patches more efficient.

It begins by adding a “review” link right next to the link for the patch file that looks like this:

When you click it, Dreditor opens the patch in an overlay that allows you to browse the affected files. It also allows you to select any line(s) you want to comment on and provides a textarea for you to enter them. You can do this for as many lines as you want. When you’re done, it allows you to paste fully formatted comments right in the comment textarea of the issue. It’s incredibly helpful and one of those “must have” tools for anyone reviewing patches for Drupal.

However, I’m used to viewing patches in TextMate, which is very different looking from the default style Dreditor provides. I find TextMate’s style a lot easier to read, so I created a Userstyle for it last year. Since then, there have been changes to the markup and new features added, and this weekend I finally got around to updating my Userstyle. I also gave the sidebar a redesign and did some other tweaks. If you use TextMate, you might want to check it out.

Here’s what it looks like:

2 notes, 0 comments, Permalink

29 8 / 2010

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).

24 notes, 0 comments, Permalink