Click to see video transcript

Hannah: Today’s webinar is Drupal Step-by-Step, How We Build Our Training Site Part 2 – last week we had Part 1 and this is the second of the series – with speaker Dave Myburgh, who’s a Senior Engineer here at Acquia, and we also have Heather James on the line who’s the Manager of Learning Services here at Acquia.

David Myburgh: So today is Part 2. Last week we just spoke about how we built our training sites, some of the backend stuff that we did. Today, I’m going to talk about the frontend, theming and how we used Bootstrap to make it look all pretty. I’m a Senior Engineer in Acquia. I’ve been there for two-and-a-half years or so. I’m the lead developer on Acquia.com and a couple of other small sites, including the training site, obviously.

So what are we going to look at today? We’re going to see what is this thing called “Twitter Bootstrap” or just “Bootstrap”? We’re going to look at some of the modules that we used for helping us to style things on the frontend a little bit better, make things look nice; and look a bit more in-depth at how Bootstrap and Views can work together. We’ll look at the grid system that Bootstrap uses and we’ll look also at working with responsive layouts. Finally, we’ll look at some of the components that Bootstrap offers us.

So themers and site builders will benefit the most from this, I guess. If you have some experience in Drupal, well, it’s useful. If you're new to Drupal, you're definitely still going to pick up some new and fun things.

So this is what we started with. This is our old training site in Drupal 6, kind of old-looking. It’s not very modern look and difficult to work with and tweak stuff and modify things. So we ended up with this, much easier to work with for managers, keeps Heather happy, keeps me happy because it’s less coaching stuff that I have to do as well.

So to get the new design, what do we need? We want to just obviously update the old one, make it look more modern. Get a more consistent look across the site. Obviously, make sure it’s cross-browser. And most importantly, any new stuff that the training folks decided what to put on the site to make it easier for them to add new things, but still keep a consistent look and not have me do constant code pushes all the time to update stuff within. From my point of view, I would like to use SASS and Compass for the backend development work. It just makes working with the CSS and the styling side of things a lot easier and simpler for me. It’s something that I’ve been using and improved relatively, short period of time in the last year or two, but definitely it’s very useful stuff and very helpful.

So just a quick look at some of the benefits you can get from using the new system. This is one of our old pages and old aesthetic lining page. We’ve got a bunch of blocks on the right-hand side and those are physical Drupal blocks. So if you want to add a new block there, you’ve got to go add it on the “Add one block” page, edit it, position it correctly, all that kind of stuff.

On the new site, we basically converted that page into a single page with no actual blocks. Everything you see in front of you is all part and parcel of the node itself and it’s simply styled using classes that are provided to us pretty much by CSS. Obviously, you would need the full HTML text format. So it is one thing to consider when you're allowing other people, you may not be privileged to use this to add content to your site.

So what is this thing called “Twitter Bootstrap”? When I first read about it, I was like, “Okay.” People were talking about it all the time. It was kind of an abstract thing to me, but once I’ve been using it, I figured out it basically is a theme. That’s what you’ve – you’ve got to think of it as – you can look at getbootstrap.com for this is where all the information is stored, and it can be used on anything. This Bootstrap itself is not Drupal-specific. It can be used in any project. If you're writing straight HTML, you can just use it straight off. No problem. It was made by Twitter, hence the name “Twitter Bootstrap.” They use it internally, and I mentioned they released it as open source for the rest of the world to enjoy.

Some of its features, well, Bootstrap 3 now is mobile-first and also responsive. It’s cross-browser compatible and works well with IE8 and up. Nobody should be working with IE6 and IE7 anymore, we heard. Bootstrap 3 has a SASS and a LESS version. If you're using preprocessors, you don’t have to use those. You can just use a precompiled code for CSS as well. It comes with lots of very useful CSS and JS – JavaScript - components. It also has excellent documentation and a very big community. A lot of people have been using this framework as a theme. So there’s a lot of information out there on other sites that you can find useful tips and information. Just as a quick overview or a quick look at one little thing that they give you, a simple unordered list, if you just add two classes to the UL name and you have polls you automatically get inline navigation with the most run, a bucket on the active class as this is simply adding a class to existing HTML. So it really makes life for the themer a lot easier.

So how do we get Bootstrap into Drupal? So this wonderful chap Artoym who is here today, created a module or a theme – a base theme for us and we just enabled it on your sites and you are then able to use Bootstrap 3 in one of your sites. You do need to make a sub-theme, and we’ll talk about that in a little bit. There’s also a bunch of companion modules - or modules rather that work with Bootstrap in Drupal that can enhance its functionality, make it easier to use some of the Bootstrap components on your site as well.

So Drupal theme - it requires 1.7. Drupal core is Drupal 7 core. At the moment, I believe, is 1.4. So you do need to install the jQuery update module, or if you want to do it manually, which I don’t recommend, you can install jQuery 1.7 yourself. The problem recently was that Views UI used to break with 1.7. That has been fixed with more recent C tools updates. So that’s working fine now. But if you switched your jQuery to 1.8 or higher, Views UI will again break. So we usually use 1.7 as your jQuery option. JQuery update module allows you to choose different jQuery Views. I believe in version 2.5, which is not out yet, which is the next version, they will have a fix with this in that you can choose what jQuery version to use on your admin site. So your frontend could be 1.8, 1.9. 1.10, but then you just leave the default Drupal jQuery 01.5, whichever version you want as your admin, and that’s the way of Views you want to get. So hopefully, that’ll come out with 2.5. So your CSS preprocessor, the sub-theme of the Bootstrap Drupal theme currently uses LESS by default. I’m not familiar with LESS myself. I learned SASS, so I modified the sub-theme so that it uses SASS.

So what is SASS? LESS is also to kind of explain by this. They’re preprocessors, so you can write fancy CSS and have them compiled into regular CSS. SASS stands for Syntactically Awesome Style Sheets. You don’t want to say that too often too fast. It’s basically CSS with super powers is the way they like to think of themselves. It gives you extra functionality when you're writing CSS and your file is not called “.CSS” anymore; it’s called “.SCSS” or “SASS ECSS.” So one of the bigger things that I find for myself is variables. So like you're writing PHP, you can have a variable and you can assign it something, then you can reuse it later in your code. So the way it works with SASS is - the most obvious example that I can think of is, say, you have your theme based in color, so for us on Acquia, we have this nice blue color, and we can create a variable and we can say “Acquia dollar Acquia blue equals” and our hex code for that color. Then throughout out our SASS file, we’ll use dollar Acquia blue instead of the actual hex code. So then six months down the line, we have all our CSS working nicely. Six months down the line, marketing comes in and say, “Okay, we don’t want this blue anymore. We’re changing our colors to green,” or something. All you have to do is go back to your SASS file, change that one place where you set your variable to the blue hex code. You now set it to the green hex code, recompile your CSS, and everything changes to green, and marketing is happy. And you're happy because you only have to change one line of code. Another useful feature is nested rules. So a nested rule is basically when you have – a good example would be if you're trying to style a linked and an unordered list. You can have the rule on the UL. You can have the rule on the LI, and you can have a style, a rule on the A elements. So a normal CSS when you write it, you want to style your UL, you’d have UL open braces and your style. You’d have another line for ULLI open braces your style, and you’d have a third rule for ULLI A and whatever style you want on that. So it’s three lines; three separate sort of declarations. In SASS, what you can do is you can write just the UL open curly braces your style, and then before you close the braces, you indent, you type in LI, open the curly braces, write the style for that one, and then within that – within those braces, you put the “A,” also indent it. So you get this nice indented look. It makes it a lot easier to read and a lot easier to manage later on. So it’s just those kind of things that understands that, and then when it outputs your CSS in the end, it’ll limit actually automatically output those three individual styles that you’re used to seeing in regular CSS. The other thing that SASS brings to the table is mixins. It took me a while to figure out and understand what mixins were, but basically they’re just functions or scripts, if you want to think of it that way. So for example, if you want to do the rounded backends that you saw on that poll button, that is just a border radius declaration in CSS. But if you're – you may know that each browser has its own prefixer browser prefixed on the border radius. Let’s say, you can have moz-border-radius or webkit-border-radius; so it’s depending on the batch type of things out all the time. You need for – to have one border radius, you need to write four lines of codes. So basically a mixin would be you would have a function, you’d say, at the fourth – or add include border radius and then the number of your border radius and pixels, and then you would just mix them, that would then output the four lines of code that you need for each browser and the final border radius; very useful, very powerful. You can do some crazy stuff with that as one of our frontend guys does some pretty astounding things with this. So SASS needs to be installed locally on your machine where you're developing, let’s say, Ruby gem, just a little module for Ruby, and that gives you access to be able to use SASS and try to understand those kind of things for compilation later on. And it is compiled into a regular CSS file. So from a .SCSS file and with all the kind of codes stuff that you have in there, you’re basically just going to output a regular CSS file. You don’t have to do anything. You just run the compiler and it does it for you.

So let’s have a look at how we set up our sub-theme. So when you come with the base theme, you don’t really want to modify the base theme, because if you need to update it later on, then you're just going to wipe out all the changes you did or you're going to have difficulty implementing your changes back in the theme again. So Bootstrap Drupal theme gives you the option of creating a sub-theme. The default tutorial comes with LESS, which is fine. If you want to use LESS, follow the tutorial. No problem. So the basic concept is you need to download Bootstrap files and in your sub-theme, you create a Bootstrap folder. You add in the JavaScript – you have a folder for JavaScript, a folder for fonts, and a folder for CSS as well. Now, the JavaScript can be – well, let me start from the beginning where there’s the JavaScript thing. Bootstrap offers you six to eight different JavaScript to do functions or components, and you can include one or any of them in your sub-theme, or you can include them all in one already minified, compiled JS file, which is only 29 KB. On our site, we just use the full JS file, because we’re not sure like maybe later on, Heather’s going to decide she wants some new Avanti functionality. If she wanted that and it wasn’t already in there, I’d have to go push some codes to make it happen. So just install the whole thing. It’s only 29 KB. It’s not a huge deal. The fonts are the icon fonts that come with Bootstrap and the CSS file is just one big CSS file for all the Bootstrap CSS – all the styles that you already have available as the components.

So to make it SASS-friendly, we have to import. We use @import bootstrap in our main SCSS file that gives us all the mixins and those kind of things from Bootstrap. If you're going to be using Compass to do the compiling for you, you're going to have those config.rb; it’s a Ruby config file. You need to require Bootstrap SASS in that file as well. If you don’t understand this, don’t worry about it. When you start developing with SASS, you can come back, look at these slides, and you’ll get the hang of it. Each of the Bootstrap JS files, either the full JS file or each one needs to be added to your .info file, so they’d get loaded. The icon fonts are loaded using @font-face in your SCSS files. You can pick one, whichever one you want to use.

So this is kind of the layout that we have for our sub-theme. So we have the Bootstrap folder with the fonts, JS, and CSS folders. We have a separate CSS folder where our compiled CSS ends up into a single file. We have a SASS folder and in the LESS version of this sub-theme SASS, which is your replacement list, we have a folder called “Components,” and in there we create separate SCSS files for whatever kind of setup you want. So for us, we created a separate SCSS file for each sort of content type. So we have one for events, one for courses, one for general stuff, one for the home page, things like that. We will also have a styles.scss file in it and all that file does is import each component, and each component file in the components folder has an underscore in front of it that allows it to be imported only and not used in creating a new separate CSS file for each of those components. All those get compiled into styles SCSS, and then that gets compiled into styles.CSS later on. We have a templates folder for all our template overrides; node TPLs, page TPLs, those kind of things. We have a theme folder for some includes; preprocess include, theme include. We have our regular info file, our Ruby config file, and then also template.php, favicon, logo, screenshot; so those kind of things. So that’s what our sub-theme looks like and it’s more or less the recommended layout. Depending on how you work, you may want to change it a little bit.

So some of the modules we used, just to make things look better on the frontend, not everybody’s Bootstrap-related here. This is just general modules for doing stuff. Field Group - great little module, can be used to group fields on your node form as well as on the node display. Most useful thing in field group for node display is it provides you some elements that are HTML5 elements. So you could add like an aside or section element. Another module, Field Formatter Class, very useful, especially if you want to add specific classes to fields for output, and when you're using Bootstrap, it’s kind of useful to be able to do that, because then you can make your fields automatically have whatever styling you need just by adding that single clause without you having to override fields in the template file or something. Block Class does the same thing. It allows you to add a specific class to a block so it’s customizable. Font Awesome was something we used just to throw in a couple of icons here and there. It’s just – naturally, it’s another icon font and you just add a class to whatever thing you want and you get a nice icon on that. DraggableViews is more an admin useful module. It allows Heather to reorder the courses as she needs them reordered, whether it – most likely it’s not going to be alphabetical, so the view that outputs the thing is not going to be – you can’t just sort on random sorts. It will allow her to play around with that. We use Gmap for our main event page map and on each event node, the maps. Finally, we have Views Bootstrap, which is Bootstrap-specific, obviously, and allows – it gives you new view styles, then output your view in a Bootstrap friendly way using Bootstrap structure and classes.

So just a quick look at Field Formatter Class and Block Class. I’ll talk more about Views Bootstrap in a little bit. So Field Formatter Class on your managed display tab for your content type, you're going to see down at the bottom where it says “Class: pull-right, margin-let, margin-bottom.” Those are classes that we have in our theme and you can just assign to the actual field. For Block Class, when you configure the block, you’ll see another input field there, CSS classes, and you can add whatever classes you need in there. The col-md-6 is a grid class from Bootstrap, and Bootstrap is a 12-column grid, so by using the number six, we are saying this block is off the width of the page. I’ll talk more about the grid in a little bit as well.

So let me just show you live what those things are. So this is our display for events, and you can see your class here. So when you click on figure for the field, you simply just get a single input field and you can put your classes in, in a line separated by spaces. Then that works the same way for blocks. So here’s our nice map. So we’re just looking at what Gmap can output. Each of these little markers is a node and we use the location module to geo-locate an address, and then Gmap reads in the latitude and longitude of each little marker on the page for you; and each of our nodes has the same thing; it has a little map. Gmap is really useful. You can change the style depending on – you can output the size and all that kind of stuff.

So just a quick look at some of those things we do with those frontend things. Let’s go back in here. So some other Bootstrap modules that exist out there, we didn’t use them. Bootstrap Field Group, it allows you to do navigation, and navigation’s kind of set up on the frontend. It creates – the way you need it set up is you need to have a bootstrap field group, which has a class of nav or you choose - it’s a field type, a navigation group icon – item, and then you would have a second field group inside that for each navigation item, and within each of those field groups, you can have your fields. So it kind of duplicates what the Quick Tabs module does and then you can just click each tab and you would then see the content for the fields that were underneath each of those tabs; very useful. We didn’t use it on this particular site. I have used it on other sites; it’s quite nice. Display Suite if you like to use display suite for doing your frontend display. There’s a module that provides you Bootstrap compatible layouts using the Bootstrap grid. Also very useful; I have used it on other projects. There’s, of course, Bootstrap layouts, styles, and tabs for panels module. That’s pretty much the major sort of ones that you're going to be looking at. There’s a bunch more and as usual, searching for stuff on drupal.org is always – always it’s something interesting that’s going to come up.

So let’s look a little bit more in detail at Bootstrap and Views, seeing as most people are going to be using Views on your sites. On this page, this is a track node and each track has a bunch of courses associated with that particular track. So we’re showing - on the right-hand side of the track node, we show an accordion display and that is using the Views Bootstrap module. So you just click on the title and it’ll collapse it and open it as you go along.

So at the moment, we’re using the 3.x-dev version of the Views Bootstrap module. There was some issue with the current stable release. It didn’t work particularly well with the new Bootstrap 3 as far as I recall. There is a newer dev release out and as soon as there’s a proper release past January 31, 2014, it’ll be fine to use that stable release. So what does Views Bootstrap give you? It gives you a bunch of new styles that will basically be Bootstrap components. So Accordion which - just the open and closing of information. The Carousel slide show, kind of what Views slide show does. The Grid, same as the regular Views grid, except it uses Bootstrap classes. Media Object, it’s not video or audio. It’s actually a blog display. So if you have a small icon on the left, then your text for the blog teaser on the right - so a blog listing page or Twitter tweets listing page, that kind of thing. It has special formatting using Bootstrap classes for that. You can now put tabs, tables as well. Bootstrap has a bunch of different designs for tables and it also can do thumbnail layout. These are all Bootstrap-specific layouts. So if you're looking at a View, under format you will see these options listed. Choose the one you need. You can always check on Bootstrap documentation and see what is actually going to output. We’ll go through these in a little bit as well.

So let me just show you the track page. So here’s our track page of content management, and these are the courses - two of the courses in that particular track. So this is what an accordion is. You just open and close this button that’s basically using this one, this view which is Bootstrap accordion. It doesn’t have a lot of settings. The only setting it really has is what’s in the title field, and the title field is whatever is displayed here is the thing that you're going to click on to open and close your accordion. The one thing to note is that title field, make sure you're excluding it from the display. If you don’t, what’s going to happen is when you open this thing, you're going to see the title listed again right here. So you’ll probably know how much you want. What else? So the View – okay. Home page, this is our carousel or Bootstrap provides you. You can see here when you move to the right, you can scroll left or right, and that’s all straight Bootstrap. In fact, this particular carousel on our home page, we did it manually. So it’s actually embedded inside the node rather than using a view. We didn’t want to create a new content type just for a couple of slides. It’s not something that we’re going to be changing that much. All right. So that’s the other advantage is you don’t necessarily have to use Views or anything. You can manually type in all the code that you need and relatively easy to do as well. Okay.

So let’s look at the grids and a bit more about the responsive stuff. Bootstrap grid is a 12-column grid and it provides you with a couple of extra options that I’ve not seen before in other grid systems. On Acquia.com, we actually use Omega 3 and the only thing it has is a grid class with a number. So it’s basically grid 5, we’ll use a five-column display for whatever element, but Bootstrap gives you a few more options where you can specify at what breakpoints you want the element to use that amount of columns or when you want the element to actually be the full width or horizontal field types. So it’s a little confusing at first, but basically if you looked at, for example, col-md, which is for medium devices, we have an example on outside where we have col-md3. So by using three, it’s a quarter of 12, so that means you're going to get four blocks across the page. That’s using a quarter of the page and we actually have a display, we’re going to have four blocks. Then we move down below 992 pixels, it actually drops it down to two, and then obviously on the front, it will become one. So you really – for this kind of getting the grid options correctly sorted out, play around with them a little bit just to see exactly what they’re going to do. It took a little while for me to understand how this concept works, but very handy that you can actually specify the different breakpoints of when things are going to happen. You don’t have to do any coding for this. It’s all done for you by Bootstrap.

Some of the other responsive elements that Bootstrap gives you, responsive tables, very useful. Most tables, when you look at them without doing anything on the font, they kind of stick out to the right, break your display a little bit. Bootstrap gives you a table responsive class that you add to a third wrapper around your table, and essentially what it does is it makes your table scroll within the width of the font. So it doesn’t stick out anymore. You're just able to scroll left and right. It’s quite a nice option. I kind of liked that. A couple of other people have solved responsive tables in other ways. Some people collapse them down into lists. Other divs manages to keep the table in a table look, which I think is probably – for me, I find that the nicest solution. All right. And a bunch of other responsive helper classes. So if you want certain things to appear on bigger screens, but not on the font you get these classes for hidden or visible, and depending on what way you want things to show up or be hidden, you just choose the right class, and then Bootstrap handles the rest; very useful. We use this kind of stuff on Acquia.com. We actually do some stuff, but we had to write our own class, it seems, on Bootstrap. Yes, very useful. The other thing Bootstrap gives you is an image responsive class, which you just add directly onto the image tag, and that will make the image then responsive and resize down when you shrink your screen. Quite often, people will just basically blanket all image tags, all image elements with this kind of class in their own CSS. Their work generally may not use image responsive, but if you want specific image – if you're not doing that and you want specific images to be responsive, this is the class to use.

So a couple of other components that are available – there’s a lot of them. I’m going to go through a few. So some of the CSS stuff, just a bunch of classes that you can add on things. There’s this cool thing called “.lead.” It makes your font a little bit bigger. So it’s like an introduction for the text. Bootstrap does some cool stuff with lists. You can have inline classes to make the thing automatically inline. There’s some stuff for code formatting, headers, those kind of things. Forms are really nicely handled. You have a nice inline option, so that you can get input fields together on the same line. Quite often you want to do that with like first name, last name, those kind of things. Bootstrap makes all that kind of stuff easier to read. It’s really useful for keeping your forms standardized across various browsers. Buttons, super cool stuff, we use a fair but you have options for different colors and you can override those colors in variables in your SASS files. There’s different option - different classes with different sizes of buttons, different states of buttons; so like if it’s active or that kind of stuff. You can also group buttons together, so that if you have three or four buttons grouped together, you just get a vertical divider between the buttons and only the first and last one get the rounded corner. So it looks like a nice button bar. I’m going to demo – oh, I’ll show you what these things look like in a minute. Glyphicons, obviously, is your icon font. Jumbotron is a big announcement kind of block. It’s a particular format of HTML that you need for this to work, along with the class; very nice on the front page if you want to have product announcement, those kind of things. It has panels of the Drupal module, just – it’s like a highlighted header with some text load wrapped with a nice border. We use some of those on our sites as well.

So let’s have a look – so I’m just going to quickly show you panels. This is what I mean by panels. These four blocks are a panel – each of them is a panel, and these are the ones that I was talking about that have the grid class where they use a three-column – we’ll be using up three columns each. So when you shrink down your screen, texts get a little bit narrower as you go down. But when you get down below 991 pixels, it becomes a two-column option. Then eventually when you get down to mobile, it becomes full width.

Let’s have a look at some of the other CSS components. So typography, go over the headings. So it makes the font less big. Tables - you have different options for tables. You can just have plain tables of the vertical lines. You can have striped, bordered. Hover means when you move the mouse over, it gives you a highlight for the entire row, kind of nice if your tables are kind of big and you want to be able to see stuff easily. Forms, very useful, very standardized. This looks really pretty. Buttons, these are the different – the main nav and it’s just a different class depending on what you want to show. Sizes. And then states – so active state, you can – just by adding the class, it changes the format for you. A bunch of helper classes, so you can have backgrounds, those kind of things. All right. There’s a lot of information here. Whenever I’m working with the Bootstrap theme, I pretty much have this page open all the time, just to look at stuff, see what classes I can find, what classes I’m going to use, because usually quite often I’m finding new things like, “Oh, that’s an interesting way of doing something,” or I can also search, Google it, and other people have come up with some pretty interesting ideas about how Bootstrap altogether. So that’s basically the main CSS stuff.

So let’s have a look at some of the JavaScript things that they offer. You’ve already seen the accordion and the carousel. They have the modals option, so that you can pull out content that’s already on your page in a modal. So you click over button, maybe you hit in that content before. You click a button and pops it up nicely for you. It can also pull in the remote URL. It has tooltips which is essentially the same as when you hover over an element that has a title attribute and a choice it takes as in title. Tooltips does a similar thing. It’s a bit more customized. It looks a little nicer. It’s also fast. I find that the regular default tooltips, you’ve got to hover for like a second or two, and then it pops up. The Bootstrap tooltips pop up instantly, which is really nice. Popovers are basically like a callout. You click a button and the little thing pops out the side with a bit more information on what you want, on whatever you’ve clicked on; very useful if you're into those kind of things. Affix is the other one and that gives you like a sticky sidebar nav. I’ll show you those now.

Let’s look at the components. Oh! Yes, this is the button groups thing. Let me show you. So these are three separate buttons, and then when they’re grouped together, it makes it look like a nice button bar. Okay. So some of the JavaScript stuff, so modals, you have a little animations in these buttons. You click it. You get a nice modal. You can have buttons in the modal. You can do all sorts of cool stuff in there. You can see there’s a bunch of other ones: dropdown, tab, all those things. Tooltips, let me show you – where is it? Yes, so like on our event page, your service sticky sidebar, but each of these icons has a tooltip. It’s this little black or dark gray popup. It explains what the icon is. This button has one as well. This gives you a bit more information; very nice, very simple to do as well. Popovers – okay. So that wasn’t very clear on the way I explained it. This is what it looks like. Basically, it’s open and close on click, rather than a hover, gives you a nice formatted title and a bit of some text here. Then affix is a sticky sidebar which I’ve used it. You can see this manual on the right here, it doesn’t change position at all. Affix has a whole bunch of different options and I haven’t used it myself. Our actual sticky sidebar is done differently, but that’s – it’s got some fairly interesting options. So that’s pretty much how - a look at Bootstrap and how we used it. Our entire site is responsive obviously, we try to use the classes as much as possible. That avoids any inline styling. We have no inline styling on this site – on the training site. Heather can then – as I’ve mentioned, she can come in, add some stuff. She did – I can show you the private page again. That’s the old one and the new one. All of this is basically within the node itself and she made this all just by looking at the various classes and seeing what they can do. So it’s a bunch of panels with grid classes. Let me show you here. Let’s see, it’s a little bit slow to look at it. So we’ve got a col-sn-6. So it’ll - and you can collapse down on small on the font. You’ve got your panel headings, panel title; and you do have to follow some HTML structure to get these things to work correctly, but I think it’s a pretty small price to pay to have the nice functionality that Bootstrap offers us. And it really does make my life a lot easier. I haven’t done any CSS pushes since we launched, and Heather’s been able to manage the site all by herself. No problems. So that’s pretty much it. If there’s any questions, I’ll be happy to take them. Thanks for listening.

Heather James: Thank you so much. I’ve sensed other people are probably thinking of questions, Dave. [Laughter] I know I’d add some. I thought it was interesting that after I did a little blog post about this live tutorial you’d be doing, that we had a little controversy internally, and I thought it’d be interesting to talk about that because people may be wondering when it’s appropriate to apply this and when it’s not. [Laughter] So just to give people some context, one of our colleagues sort of didn’t – he’s sort of like, “Oh, no. This is a dangerous technique, because it means people will say, ‘Oh, we can just have unfiltered full HTML in all of our body fields and do all of our layout within our body fields.’” The stories from my experience from the old site, I had only a handful of one-off full pages like that private training page, and I would only be using those blocks on that page. So I was actually putting a lot of overhead on the site, having to go create a blog and then control it’s visibility to get it displayed the way I wanted it to look. So it wasn’t really the right use of that tool either. So when I saw this solution, I thought, “Oh, this is going to save me a lot of time.” So Dave, I wonder if you wanted to sort of say what your response was about when this is not an appropriate technique and not an appropriate theme.

David Myburgh: Definitely. So yes, like I did mention, for some of the elements that you want, some of the components that you want to display, you do need to have the ability to answer full HTML. Those H3’s with a bunch of classes, by default, the Drupal filter system that takes formats filtered HTML would just strip all that stuff out in one word. So you do need full HTML and of course, with full HTML allow – users can then also post in stuff like scripts and do all sorts of crazy stuff. So you’ve got to be very careful about who you're allowing to edit, take things/stuff on your site. If it’s only your admin users that are going to be editing stuff, fine. Give them full HTML; that’s okay as long as they know what they’re doing. If it’s open to regular authenticated users, you're probably looking for a bit of trouble there. It’s not recommended. So allowing the general public to use Bootstrap elements for display is probably not a brilliant idea. This is more for the backend, so admin people and possibly trusted editors, those kind of things. Really, what I would like is – sorry. What I would like to see is – I just thought of this today, actually, when this discussion started - is some way that we could allow classes to be added into filtered HTML. I haven’t looked to see if there’s a module. There probably is a module that does that already. But yes, that would be an ideal solution. So if you can add a class without having to add – without the ability to add full HTML, which would include scripts and unpleasant things like that.
Heather James: Yes, definitely. I think that one of the – I sort of had a further conversation with another colleague about this and we discussed the particular client situations we see – unfortunately seen a few times where on the content type, they’d have multiple body fields and they’d have one body field that would allow their site builders to do something like you’ve shown, that they could have multiple columns and unfortunately, using things like table base layouts where they’re migrating old HTML content over, and then they’d add a second body field for their mobile site. So they’d actually be using a mobile redirect and they would have to select and show a different body field that would be mobile friendly. So this solution is quite different, because when I set in those panels, I can also specify not only that it’s – how many, I suppose…
David Myburgh: Columns? Columns, yes.
Heather James: …columns, yes, in the grid. Excuse me. [Laughter] But I can also specify how it should behave when the page gets resized, because it is responsive out of the box. So it’s quite different from even what some of our problematic client situations are. So I hope with that, people got their curiosity piqued to try this out. I wonder if there are any questions, Hannah, from the audience?
Hannah: Yes, the first question is “Where can I find documentation defining the classes available?”
David Myburgh: Okay. So that’s all on getbootstrap.com. Let me show you. So this site – yes, let’s go to the top here; pretty long. So if you go to getbootstrap.com, you're going to find everything there. They’ve got the CSS stuff, the component stuff, and the JavaScript stuff. So it’s all here. Like I said, every time I’m working with Bootstrap, I pretty much always have this open. It’s a great reference tool; documentation is very good.
Hannah: Okay, if anybody has any additional questions, please ask them now. [Pause] All right. That’s it for questions. Dave, thank you so much for the great presentation, and thank you so much…
David Myburgh: Welcome.
Hannah: …Heather, for joining us as well. Again, Crosstalk recording will be posted to our website in the next 24 hours. Dave and Heather, would you like to end with anything?
Heather James: No, I just wanted to add that we have a couple of webinars coming up. If you are interested, there’s actually one specifically on mapping and that’s with some Drupal like me folks. So if you saw the map that we have on our site, you may be curious about how to integrate maps in yours and that might be useful for people.
David Myburgh: Yes.
Hannah: Okay. Great. Thanks so much, everyone. Have a great afternoon.
David Myburgh: Yes. Thanks.
Heather James: Bye
David Myburgh: Bye.
- End of Recording –

Click to see video transcript

Moderator: Today's webinar is Drupal Step-By-Step, How We Built Our Training Site Part One with Dave Myburgh, who is the senior engineer here at Acquia. We're excited to have Dave on the call. Heather James will also be on the call, who's the Manager of Learning Services here at Acquia.

Dave Myburgh: Today, I'm just going to go through some of the site architecture and construction of how we moved our old training.acquia.com site from Drupal 6 to Drupal 7. A little bit about me, I'm a senior engineer at Acquia. I've been here for about two and a half years now. I'm the lead engineer on acquia.com I also have a bunch of other small sites that I look after, including now training.acquia.com.

The things we're going to cover today is a little bit about the site architecture, some of the modules that we used in building the new site. How we put together some of our content types. We'll talk a little bit about the data migration from Drupal 6 to Drupal 7. I'll show you some interesting views where we throw in a couple of arguments on contextual focus. Then in the last two little bits we're going to talk about how performance got improved a little bit and how we made maintenance easier for all of us involved in the site.

Who will benefit from this talk? Developers and site builders mostly. If you have some experience in Drupal, that will definitely help you out a little bit, but if you're new to Drupal as well, you'll definitely pick a couple of interesting and useful tips.

Just a preview of where we were and what we ended up with. On the left is our old training sites kind of 90’s style looking and I think we did a fairly good job upgrading it to a more modern look. Definitely a lot easier to use now as well.

Some of the requirements for this project; we wanted to keep the basic site architecture the same. The landing pages, content types more or less the same. We did drop some content and we did add one or two new things, but for the most part the main architecture is more or less the same. What we wanted to improve was a better editing experience for us as admins as well as for the partners, who are actually creating the events on the site for us. We wanted to better handle the Events Status, because sometimes we had issues where an event got cancelled and it was a complicated process on how to manage cancelled events. Publishing Workflow, we wanted to help make that a little bit better and if I need to use the management for the partners on how to deal with the bunch of stuff on the site for them to make their life a lot easier.

Some of the building blocks. Right. I'm streaming to a demo. I will show you a little bit of the site looks like right now. Here's our front page. I'm just using a local copy of the site just so that we don’t have any issues, technical difficulties. The site focused on events. We're going to look at the upcoming events. We have a nice map and at the top, we show online events and then we show our various in-person events. I'm just going to pick one of these guys. There's one group of module development.

This is the Event Page. We have all the various important information on the right side. We show some information about the course that the event is going to be doing. Click through unto the course that's related to this event. It'll tell you all the details; the level, the track that the course is in. So several courses can form a part of a certain track. You'll see the upcoming events for a particular course. I'll click you through to the track. So this is for developers and these other courses that you can find for this particular track. So we have three content types here that we're look at now. We're having an event node which has a node reference to a course which itself is a node reference to track. All right. So that's basically an overview of the most important part of the site.

All right. So next. So our main site architecture; events, courses and tracks. We have a couple of static landing pages for general information. I think resources, private training, that kind of thing.

Let's look a bit more in depth at some of the content types that we have. Event Nodes. The Event Nodes have the location, the date, the cost. That's the actual thing that you're going to be attending to learn about a particular subject. The Course Nodes, which are a node reference from the event have the learning objective, the pre-requisite, that kind of information. Finally, the Track Nodes are simply a grouping of courses. Like a category but we're using node reference to link all of those together.

Event Nodes. These are created by our partners. They have, like I have mentioned already, a node reference to a Course Node and by the node reference we actually displayed the course information or a brief part of that information at the top of each event node as you saw. The address for the actual event is handled with the Location Module. In fact, our Drupal 6 site and our Drupal 7 site both used Location Modules. That actually made our migration, which I'll talk about later, a little bit easier. Events can be in-person where you go to a place to actually physically attend it or they can be online. That designation will affect the display of the map. If it's online, obviously, there's no physical location so there's no need for a map.

Then we have Events Status Options. So when the partner is actually creating the nodes, they can set the status of the event. We have a Draft Event which is not visible to anybody. We have Cancelled Events which are, as well, not visible. Then we Tentative Events which are events that are probably going to happen. Finally, we have Confirmed Events. I don't know if you'll be able to see those two, but I'll show you a bit more in depth later. Some of the content type changes are quite nice, especially moving to Drupal 7. We have vertical tabs which make organization of the various fields a lot nicer visually. It's easier to follow the track of the node from where things are. It just makes it easier for everybody to handle.

All right. A little bit more detail on the Events Status thing because this is one of the more important features that we added to the new site to help everybody. As you can see, the field is a list field using radio buttons. So you can only select one thing at a time, obviously, and depending on which option you select, different things will happen to the node. You'll see a different badge or button displayed on the actual node itself. As I mentioned, draft and cancelled events are unpublished so people don’t get to see them - the point is if it's not happening.

Tentative has the orange button. Confirmed is green. We actually use pre-processed field function to install the button. Adding a class to the icon and the pop-up text. When you hover over something, you'll see some interesting texts. Particularly the Tentative Events, we link to another page which explains what the event is. Those buttons then get displayed on each Event Node right next to the event detail.

Let's have a like at the node form. I'll show you how the Event Node has put together. So I'm just going to use this same event that we looked at a little bit earlier. We edited it, we got the title, the usual kind of thing. We have our node reference link to the Course Nodes. So we just simply list the various course nodes to choose the one that the event is going to be on. Our Events Status is positioned just at the top right. That's pretty important so we did some special formatting just to have it nicely positioned. The regular body - just so in case you're wondering, I'm using [BU] editor as the default editor. I don’t personally like [BU Editor], they do weird things. Hopefully in Drupal 8 that will be much nicer.

A couple of other things. Text Formatting Help. I just took that out of the way. Here's a signup link. Each department will have their place that we actually go do the signups. We've grouped some of the details together in a vertical tab. So dates, costs, delivery, and the language. Location is the Location Module. You enter in your various address details, you got a little nice map that automatically geo-codes the latitude and the longitude which we'll then use later on the main Events Page. All the Event Nodes get shown here. Then Provided is just a bunch of things that will get provided at the event.

That's what the node form looks like. This is what the partners and the administrators are going to see. Let's have a look at how this was put together. Content types, and then managed fields. Using Field Group Module allows us to group stuff really nicely. Status for the Event Status section. That is a couple of external things we can add. Different types of fields, not just regular field bits or in case the details of the vertical tab. This one is using a HTML 5 site field type. It's just a way to differentiate. That allow us then to target the status field group and stick it over to the right. The rest of the stuff is just the main body. Group things together nicely. You can add classes and stuff to do whatever special styling, kind of things you need.

On the display sites of managed fields, this is what the form is going to look like when people edit the node. Display is obviously what gets shown up on the front end. We have Event Details. We have basically status, body and location. That's the only thing that gets shown through the node display settings. But if you remember, we have all the actual event details on the right hand side and that's done with the View and I'll show you that in a little bit later as well.

That's just the basic idea of how we put together at least the Event Nodes type. You can see here we use the module as field formatting class so that we can actually add specific classes to the fields for output. Sometimes, the default classes that Drupal has are not what we want or they're too generic. It’s always nice just to throw in your own classes. It allows you to do fancy things like have generic classes like adding a margin to the left and to the bottom if you want rather than having to style and add a specific CSS thing in your custom style sheet. You can just add in existing classes.

Let's carry on here. Some of the modules we used for that field formatting class like I mentioned, it's the custom class on a field for display. GMap actually outputs the map on the node themselves and uses the location information. Then obviously, Location is for adding the address. It does the actual geo-coding on the back-end for us.

Data Migration. Initially, when we said okay, we're upgrading from Drupal 6 to Drupal 7, the initial thought is usually, “Okay. You just run a regular update.” But with any site that has more than like one or two content sites, usually you're going to run into some kind of weird problems and you end up spending a lot of time trying to fix stuff. My Preference, and I don't think I've actually ever done a regular Drupal 6 to Drupal 7 update, is to actually migrate data.

There's a couple of advantages to this. One is that you can exclude data that you don’t actually want anymore. You can also finesse the data, or tweak it a little bit if you need to change some stuff. Sometimes, an old site might have the date in a weird format and you want to use the UNIX timestamp in the new site. During migration, you can actually do things like you can actually change the way the data is. To migrate the data in this example in the site, I used the Migrate Module.

Now, in other modules that I used that works with Migrate is called Migrate D2D. This is a Drupal to Drupal Migration Module. It's build specifically to migrate Drupal 5 to Drupal 6 to Drupal 7. In fact, this is more or less I think what's pretty much going into Drupal 8's core setup, which is kind of nice. The nice thing with the D2D Module is it gives you a user interface, but the one caveat at the moment is that you need to use these two specific versions of the module; the RC1 of Migrate and the 2.1 B21 of Migrate D2D. Without those versions, you don’t get the user interface. So just be aware of that.

The way we did the migration is we initially first migrated our user across. What that does is it allows the old user IDs to be matched to new user IDs. Then when we import our content, say, Joe Shmoe created a page or also an event or something, his new user ID which is probably going to be different in the new site will then get correctly assigned to the node so you don’t lose your authors for the various bits of content.

The other thing you better watch out for when you're migrating content is that you migrate content in the right order. So users usually come first. If you have files to migrate, you want to migrate those pretty much next. In our situation, we have Tracks, Course and Event Nodes which are all nodes referencing each other. We want Tracks first because Courses need them, and then we want Courses before Events because Events need a node reference to Courses. You've got to migrate that content in the right order. During each migration of each type of content, a map is created by the Migrate Module and the map says, “Okay. This is the old node ID. This is the new node ID.” When I'm migrating the Event Nodes and I'm linking to Course which had an old node ID of, say, 25. The new node ID is what, 300 or whatever, it will map correctly and you'll get data linking to the right stuff.

The only custom work I had to do in this migration was for Event Nodes, which is one of the major benefits of Migrate D2D. That's the link for the module. It gives you a very nice user interface where you can click what the source and what your destination fields are going to be. You can manually set some fields, and basically you have to write a whole lot less custom codes. I don't think if you can see this too clearly, but basically on the left-hand side you're going to get your destination fields.

This is all running on the Drupal 7 site. You already have your content types created with a field that you want. So they're all listed on the left-hand side. The source field, which is the next column, you get a dropdown for all the fields from the content type that you're importing from and you can map them to whatever fields need to be. You can set a default value, which is the third column there.

Then in the last column is called the Source Migration. Once you've migrated anything like your users, you can what they call a Source Migration. That Source Migration is the mapping of the old user ID to the new user ID. If we were importing Event Nodes here, you would a Source Migration for your Course Node reference field so it would then map the correct course node IDs to the new nodes.

The custom module that we did for the events, I had to do that. There was no avoiding it because Migrate doesn't know how to handle the location field at all. I think it was called CCK Location in Drupal 6, and it doesn't have any migrate settings for that, so I have to do it manually. The location is obviously on the Event Node. We also didn't want to import all the very old events. We just want to basically the most recent and anything obviously that's going to be still coming up.

Let's have a quick look at the code that I did. This is very, very simple. If you didn't use Migrate D2D, you would then have to create the same custom module but you would then physically have to write in here all your mappings for each field. What your source field is, what is the destination field is, all that kinds of stuff. You'd have to basically write a whole lot of codes to do that. In this case, the most important thing that I needed to do was make each location field - so address, address to, cities, state, country, that kind of thing - available as options in the Migrate D2D UI. Then I can just simply map it to the new fields. What we do is, in your migration class, you create a new migration class and you basically pull in the main query, the database query that Migrate is going to be doing. You join in the tables that the old Location Module in Drupal 6 used.

The last line in the field, basically you say which fields you want to map. So if for whatever reason you didn't want to map the latitude and the longitude field, you could just exclude them. You don’t list them there and then they don’t show up in the UI. I pretty much just took every single column and if I didn't want to use it, I simply don’t map it in the UI. I just leave it blank. By doing this, I would then have all the location bits of data. A separate field that I could then map to the new location field in Drupal 7.

The other thing we wanted to do was exclude the old events content. So in the function prepare road, you do this kind of stuff. This allows you to modify your incoming data if you wanted to. Like I mentioned before, if your data was in a weird format and you wanted to change it to a different format, you could do it here. The other thing you do is you return “false” or something and that basically makes sure it does not get imported. What I did is I checked the event dates which is using value “2” which would be the end time of an event, making sure that that has passed. I check what the current time is right now, what the time I'm doing this migration. If “now” is greater than the event date; in other words, has the event passed? I return “false” which means, “Just ignore it. Don’t bother with this road. Leave it alone.” Then afterwards, you just need to return “true” and so if now it lists an event date; i.e. the event in the future, it's going to return “true” and it will continuing doing with whatever it needs to do to migrate the data in.

That's literally all that I needed to do and write custom code for the migration anyway. A lot easier than having to write hundreds of lines of code to do mappings and that sorts of other things.

I want to do some interesting views. Most of the content is normally accessible. We don’t really to do anything fancy. Except for if you want to have content displayed in a nice way in certain cases like the events having all the details on the right-hand side in a little block. The simplest way to do a lot of our stuff is using Views. Views is great because it has caching. You can do pretty much anything you want with it and it's the most used module, so everything works most of the time pretty well. We have used Views in various places to show things like upcoming events, the courses in this track as you can see here. These are all using contextual focus and, in some cases, relationships to actually pull in the data from other nodes that are linking to your current page or actually in the case of the event sidebar, showing content from the Event Node itself in a block. We do it on Event Node, Course Node and Tracks and I have a couple of administration views for some advance content management where I can search titles and that kind of stuff. The default Drupal content admin is lacking a little bit in some cases.

Like I said, Event Detail. This is actually a block created by Views and the View actually just pulls in the fields from the node that it's actually on at the moment and throws them into a block. Let's have a look at how that View is built.

This is the Event Detail Block. Basically, we're just creating an unformatted list. We have the field that we want to show in that block; signup, costs, state, all that kind of stuff. Obviously, always by default have it published and content type is for events.

Now, how does Views know what node it's on and what field to actually use? If you just did it like this and you can see it shows you just basically get the fields every single event node on the site, which is probably not what you want. We use a thing called Contextual Filters. Now, we use the node ID as a contextual filter. Let me show you how that's configured. By default, it says display all results from the specified field when both the values are not available. But what we do is we select provide a default value and the default value - you could specified a fixed value but we use the content ID from the URL.

If you look at an event node on our site, the URL is events/something and the name, the title. So it's using URLs. But in reality, the actual node URL is always going to be node/a number. In fact, the node ID. So Views knows this and it can always find that ID. It pulls in the I'd, it loads it up and it looks for the use fields and then generate a block for us. This is the node ID of that same node that you saw a little bit earlier, the Event Node. If you don’t have anything here, by default the query shows you nothing. There's no node ID.

Update the preview and you see all the fields. This is just the fields and they're pretty much they're in a raw state. We'll do some pre-processing on the View field to make them look all pretty. You can see it provided for you is just a straight text in-person, but when you actually look at the display here, it looks a lot nicer. Basically, what we're looking at is a simple contextual folder we're were pulling the node ID from the current URL of the node. So it knows, “Pull the information from this node, not any other nodes.”

Now, if we look at our Course Nodes, on our Course Nodes we show a block of upcoming events. These are events that have a node reference to the node you're actually looking at. So I call this a reverse node reference or a view using the reverse node reference. It's a little bit more complicated. Here's the View. In that table, we want to be creating a table, obviously. We want to show the title, date, cities, province, various information. Then we throw in a link to actually go to the Event Node itself. We have some folders. We have the exposed dates folder and country as well as an exposed folder. The magic happens in contextual focus again, using a node ID, as well as in this case, you need to use a relationship.

Because right now, if you used a straight node ID and you'll see it's being to be using the same setup where it uses content ID from URL. If you do that, you're looking at the Course Node because that's the node you're on at the moment but you want the Event Node that actually reference this Course Node. So we need to use a thing called a Relationship. Basically the only relationship that you can use are node reference fields. So we're using the relationship of field course, which is the field name that we use in the Event Node.

We just simply add it in and then we make sure that our contextual folder, content node ID, is actually using this relationship. By default it does not use the relationship, but like I said then you'll only be looking at the Course Node you're on and obviously you won't find the event fields. We use the relationship, it can then go through the reverse node reference and find event nodes that are referencing the node you're on and then show the relevant data.

Don’t worry if this stuff sounds a bit confusing, because it is. I struggle through it about how to set up these things. Once I've done it, I write down my instructions on what to do so, “Okay. User relationships, use the relationship on the contextual folders for the node ID.” That kind of stuff. Then if I don’t use it for a couple of weeks or a couple of months, I always forget. I just go back to my list of useful tips and find out how to do it. These are somewhat complicated things. They're not very intuitive. That's probably one of the more complicated kind of setups that we have for Views. We do this kind of View in various places. You can see it on the Track Nodes which list the courses that is using the same setup.

A little bit on improving performance. The biggest performance gain that we really got was just using Drupal 7 over Drupal 6. It has been caching of modules we use as much as possible. We have very little custom code. We only used custom code when it was absolutely needed. We try as much as possible to do everything with Views like you saw. I mean, you could write custom code to generate the blocks yourself but why do that when you Views. It does it all very well and has great caching. We actually only have eight blocks on the entire site and seven of them are actually created by Views. We have one custom block that creates the login link and it will use a profile dropdown when you're actually logged in.

Then performance-wise, for myself as the admin as the developer on the site, we were initially on SPN which is horribly slow. We managed to switch over to get the new site and it just makes my life a lot easier.

Maintenance. This one of the things where us as the admins, we're struggling a bit with handling a lot of the data and the content, dealing with certain events not happening or cancellation as I mentioned. So we created the Event Status setup, which depending on what radio button is checked, the Event Node will then automatically be published or unpublished. We do it using the Rules Module. So it will enter the value of that field and do stuff accordingly whenever the node is saved.

We gave our partners a lot more power to manage their own events. The screen show on the right is what a partner would see when they log in. They can see all their events. They can filter automatically by Confirmed and Unconfirmed which is Tentative and Cancelled events. The partners are the only ones who can see Cancelled Events because they're unpublished. We gave them bulk operations on each of these lists so they could then select the whole bunch of events and say, “Okay. All of these are cancelled.” Or, “All of these are confirmed.” As we go. We gave them also the option to override some of the stuff that's published and unpublished.

On the admin side, we use a theme called Shiny. It gives you nice big buttons. The text is a little bit bigger. It handles a lot of contract modules, like Views. It has scheming already for that just to make our life a bit easier. We could use 7, which is built in Drupal 1, but there are a few things I didn't like about it too much. Shiny just looks a lot nicer and fitted more with the front end view. The front end theme is Bootstrap. It looks a little bit like it. We can't actually use for the Bootstrap as the backend because Views does not work with it. Bootstrap requires jQuery 1.7 and the Views UI tends to break horribly if you do that with jQuery. We run jQuery update on the frontend but not for the backend.

Custom Site Module. Pretty much every site I've ever built is at least something that you want to write custom. You want to modify a couple of things, maybe tweaks to the user interface. On the admin side, override some theme functions. Field processing, that kind of stuff. You can also do some of those things in the theme layer as well, but sometimes you also just want to do in the modules so it's always ineffective regardless of the theme. So in Our Custom Site Module, we have things like collapsing the text format information. Below text areas, usually on the Drupal site, you can have a bunch of information about the text format using full HTML, those kind of things. Most of the time, people don’t really need to see that stuff as it takes up space.

I basically did essentially like a full alter and wrapped that whole little thing in a collapsed field set. Just using regular Drupal collapsible field sets. So it does it all by itself. I don’t have to write any JS or anything for that. I also added a documentation link just below that that information, so it's below the text area. That allows people who are editing the nodes if they want to add in some classes, to get some kind of an effect. Maybe to make a button or a panel or something like that. They get a link straight to Bootstrap information. They can see what classes they need to use, how they need to set up an HTML if they want to do that. That link was added in as well just to make life easier for everybody.

Then the Custom Side Module is also going to include some custom actions, which is what you saw with the partner/admin Cancelled, Confirmed, Unconfirmed events. Those actions we created and they're all in the module. Lastly, we use the module for the exportable. So Views, Rules, whatever else you want to export. All right.

That's pretty much it. If there are any questions, feel free to ask them now. I'm just going to the next slide. I'm just going to show you is, some of the modules we use that I may have not mentioned earlier. One was draggable Views. That allows our admin side people to reorder stuff in tables on our course listing views. You want to be able to reorder the courses randomly. It's easy to drag. You just look at page and drag it around. The Google Analytics EP Module allows you to add custom Google Analytics events on things. You just write a little bit of code. It's very simple AVI. You write some code and basically, you can say, “Okay. On this track, every button clicks to this button or for that link.” It will do it and automatically feed into your Google Analytics account. You'll be able to see events there of how many times people have clicked on Google and those things.

The other one, Menu Position, is for bread crumbs so you can say, “Okay. All Event Nodes should fall under the Upcoming Events menu item.” Then they get the right breadcrumbs. Just simple things like that's pretty much the main module to use for the site and use both operations obviously. That's pretty much it. Custom Modules, the Migration Module and the Toolkit Module. That's it. Any questions?

Heather James: Yes, I have a question, Dave. [Laughter]

Dave Myburgh: Sure, go for it.

Heather James: Yes. I don't know if I ever asked you. I'm curious, why did you use Views? I'm talking about the event display and the detailed information from the event, you put it over into a visual sidebar but it's obviously all the same node. Why did you use that instead of Display Suite in this case?

Dave Myburgh: Yes, a good question. I have used Display Suite on other sites and I do like it. We're only really doing something fancy on Event Nodes, so I don’t really see the need for slapping in the whole mess of things that Display Suite to do something fairly simple. If we had more content types and we needed to do more fancy stuff, yes, we could definitely switch to Display Suite to do that. Literally, this is the only content site where we were doing something like this. I did add some little JS to make this thing sticky. That was the other reason I wanted it in a sidebars so that when people are scrolling down, they'll don’t use the signup link as well.

Heather James: Right. Oh, very good. Well, another thing I wanted to know then about this issue, this choice that you're going to use, is obviously someone might hear this and think, “Oh, boy. There's like a map every time an event is loaded.” But you've obviously done some caching because it's a very speedy site.

Dave Myburgh: Yes.

Heather James: Could you show us how the caching configuration on that View?

Dave Myburgh: Literally, you don’t have to do anything. You just run it. You set up your View and it's automatically cached for you. The other thing is we use Varnish as a frontend cache. That also helps. I literally have not selected any specific caching. The default uses caching. It works fine with this setup.

Heather James: All right. Creative, cool.

Dave Myburgh: It's pretty straightforward. There's no craziness that you have to do with using Views. It's built-in cache is pretty much sufficient for everything.

Heather James: Cool. I was going to ask questions about like the use of Twitter Bootstrap and Views and then I realized; oh, we're going to actually talk about that next week. I'm really excited about that. It's made my life so much easier as well.

Dave Myburgh: Right. Yes. So yes, next week as Heather mentioned, we're going to talk about the frontend side of the site. How we used Twitter Bootstrap; how Views and Twitter Bootstrap can work together quite nicely. Grid system, responsive layout and all that kind of stuff. One of the cool things with the site and in fact, I didn’t mention it earlier is that the whole thing is pretty responsive and works really nicely on the mobile phone as well. It all works out-of-the-box for Twitter Bootstrap. You don’t have to do anything. You have to tweak a few things here and there obviously, but for the most part, it just works straight out of the box which is great saving me a little pain and something.

Heather James: Yes, and it all comes free. There's so much stuff that comes free with the Twitter Bootstrap. It's kind of shocking.

Dave Myburgh: Yes. I mean, all these buttons are just bootstrap classes. This little popup that you see in the black, that's just a bootstrap thing. There's a lot less coding and customization that you have to do with Bootstrap.

Heather James: Brilliant. Oh, gosh. I'm actually amazed. Hanna, are there any other questions from the audience?

Moderator: Yes. The first question that came in is; in pushing from SPM, did you just start with a new “get repository” or is there a tool to bring over all the history that is in SPM?

Dave Myburgh: I believe there is a way to bring SPM history across, but because the site is in Drupal 6 we didn't really bother. We didn't have a huge amount of history anyway. I literally I got the SPAM checked out and then just made that into a rule to delete the SPAM folder. It was pretty simple and then did the Drupal 7 Bootstrap on top of that to override the whole thing.

Moderator: Great. If anybody has any additional questions, can you please ask them now? Okay, I think that's it for questions. Heather and Dave, do you want to end with anything?

Heather James: Well, I just wanted to say I'm so glad that you could come in and do this presentation, Dave. The whole site is just so simple and really elegant. It's kind of funny when you're showing some of these tricks, it's like, oh, it means I didn't have to do a lot of work. I love your version of lazy [Laughter] and doing things in an easy way.

Dave Myburgh: I figure if I do things simple like that, it's actually going to save me a lot of time and you guys didn't have to come back and say, “Oh, wait. We need this fixing. We need to do this.” It's pretty much all done automatically.

Heather James: Yes, thanks. I'm looking forward to next week, too.

Moderator: Great.

Dave Myburgh: Yes, thanks everyone for listening.

Moderator: Yes. Thank you everyone for attending and thank you, Dave and Heather. Dave especially for the wonderful presentation. We can't wait until next week. The slides and the recording of the webinar will be posted on the website in the next 24 hours and we'll also email you a copy. Thanks so much everyone.

Dave Myburgh: Thanks, bye.

Heather James: Okay, bye.

Click to see video transcript

Moderator: …seminar is Get Certified: Acquia Certification Program with speakers Peter Manijak who is the Certified Program Lead for this program, Ben Ortega who is the Director of Learning Services here at Acquia and Heather James, who is the Manager of Learning Services here at Acquia. We’re really excited to have all three of them on the call today so thanks very much for taking time out of your day. Peter, you’re all set to start.

Peter Manijak: Okay, thank you very much. We are going to start off with introductions and actually, at this point in time, I was hoping that Ben would introduce himself first, and then Heather, and then myself.

Ben Ortega: Alright. Hello everybody, my name is Ben Ortega. I’m the Director of Learning Services here at Acquia. When I’m at play in the office, Heather, Peter, and Prasad, who you’ll learn about a little bit later this afternoon, we helped create learning programs for Acquia’s clients, our partners, as well as the community to help teams develop and deploy rich user experiences using Drupal as their web development platform. So I’m looking forward to this conversation and I’m looking forward to your questions.

Heather James: Cool. Well, I’ll introduce myself. I’m Heather James. I’m the Manager of Learning Services and I’ve been using Drupal for a while. I’ve been with Acquia for a while and so I’m really excited because I’ve been talking about certification within the community for a long time and this really is a dream come true and a plan that’s been long in the making so I’m really excited to talk to you guys about it today.

Peter Manijak: Okay. Thanks, Ben and Heather. So this is Peter Manijak and I’m thrilled to be here. I’ve been part of the team since November. Ben brought me on board to build the certification program and we announced it very recently and we’ll go through essentially the whos, whys, whats about the program. I do have some experience doing this sort of thing. I’ve got about 14 years experience launching major certification programs and I’ll tell you, this program here is one of the most exciting efforts I’ve been part of. So with that, we’re going to spend some time talking about the program, why we built it, the benefits, how we built it, exam details, what the exam is like, a sample question, and also some helpful hints along the way towards the end on how you can best succeed in taking the exam.

So moving forward, why did we build this? Essentially, we looked at the industry and the industry had a gap. Essentially a certification program was something that’s been missing for quite some time and that the timing seemed to be right or it is right now to create such a high stakes certification program. One of the things that we also want to do is we want to create creative awareness and use of Drupal and we believe that this program will do this. At the same time the certification program will provide paths for skill development. You’ll be able to figure out what you need to know along the way. When you actually are taking an exam, you’re being measured. What we want to do is we want to measure objectives, skills and knowledge that matters. That’s one of the key goals during this whole process and through any exam and that at the end of the day, this exam will matter and be of value to you. So the benefits we believe that it will absolutely establish your credibility. It will make you more visible within the marketplace. You’ll gain a formal certification in a dynamic field. We don’t have a registry just yet. We’re working on a registry so when people do obtain their certifications, they’ll be able to validate that they’ve earned them, send other people to validate their credentials as well. So we’ll make sure that this is going to be available in the near future.

So how we built it, one of the key things that we looked at, we wanted to determine the goals of the program, what is it that we wanted to do from Acquia’s standpoint, what was good for the industry, how we can - for instance, how we can raise the profile of Drupal is one of the key goals. We then conducted an audience analysis: who’s out there, how many people are out there, what would be of value if we determined the framework of the program and the roadmap? We’ll get into the roadmap that we have in place today a little bit later. Then one of the key activities is we conducted job task analysis around the key roles that we discovered were in the marketplace. Once we were able to do that, we created the exam blueprint which is available for everybody to see. So it lays out the skills, tasks and knowledge that we expect people to have to be a certified exam developer. Then we lay out also the objectives so you can see what is being tested. Of course, one of the key elements is we brought in subject matter experts from Acquia in a workshop to develop and write scenario-based questions that will measure and validate your skills and knowledge to be an Acquia-certified developer.

So with that, we have a high-stakes proctored exam in place today. It’s available on-site globally through 750 Kryterion test centers. Those are the brick and mortar test centers. We also have this test available as an online proctored test which will really expand the reach of the exam itself. We’re going to go a little bit more into detail of what that actually means so you can have some expectations if you were to take an online proctored test. It’s available at the address I’ve posted here.

So for the roadmap, right now, we have the Acquia certified developer exam. In place today, available, people are testing as we speak. The next two exams that we’re looking at, the front-end specialist and the back-end specialist, we’re looking at over the next three to six months working on those exams and having those available. There might be some opportunity for the front-end specialist exam of having the community participate in the development and we’ll be sending out more information on that. There are also other areas that we are looking at. We are looking at performance-based testing as well. So for the immediate future, we have an exam in place today announced on the press release March 20. The other two exams will be coming out. We’ll be announcing schedules as we have a better idea of when they’ll be available.

So for exam details, the exam is $250.00. It’s 60 multiple choice, multiple answer questions. You get 90 minutes and the pass/fail mark is 65%. Again there’s more information on the exam blueprint, the exam objectives. They give you just more information about the exam, how to prepare, what you’ll need to know. For instance, there’s information that tells you which domains the test is actually covering. You can see web concepts, site building, front end, back end. It gives you the percentages of how much is covered within each exam. One of the things that we look at in terms of the developer that we feel that they should know all these areas. This will enhance their skill sets and their ability to work within teams. So that was one of the key driving points when we created and conceptualized this exam. Put together a sample question just so you have an idea of what to expect. The test itself is primarily scenario-based questions. Literally almost all questions are scenario-based. So there are no memorization type questions. We’re asking you to be able to understand a scenario and use your real world knowledge in order to answer these questions. Then you’ll have a choice of options to answer from. Sometimes you’ll be asked to select two out of four or three out of five as well as the one out of four scenarios. The whole idea we wanted to show you was the type of question that you could expect within the exam.

The exam is available today. There is a follow up webinar and I think we’ll have more information on that. What I also want to do is give you some helpful hints. If you are going to register, which we hope you will be doing in Kryterion, do not use Chrome. That could cause you some problems. Use a browser such as IE, Firefox, and Safari. Also, don’t use a second monitor if you’re going to be taking the online proctored test. They don’t like having that in place and they’ll stop your test. There’s also Sentinel software that you’ll need to install when you take the online proctored exam. It’s not a problem to take it off once you’ve completed your exam but it does take a few minutes to set up. You’ll need 24 hours in advance to set up your exam whether or not you take it at a facility or you take it online. We highly recommend you find a quiet place to take the exam. Also, please be aware, you are being monitored. So if something does happen, a proctor will pop in and I know that can be disconcerting but the key is be prepared, use the restroom before you go and sit down to take your exam if you’re taking an online exam. Make sure you are hydrated as well. Be ready to use that full 90 minutes to take the exam.

Some other hints. Just that when you’re taking an exam is that we would highly recommend that you trust your first answer. It’s usually the right one. The one thing that we’ve also seen is that people who are very knowledgeable tend to overthink the question. These are not trick questions. We aim to be fair all the time. We want you to take the questions at face value. If you think it’s the right answer, don’t overthink it. It usually is. The other thing, too, is that you may want to save the longer questions to the end. That’s just a good practice for test-taking just to push it off. That way, you can focus on the answers that take less time. Then, let’s see what we have here next. We have a great webinar with Prasad to help you prepare even better for the exam. I know that I went very fast so I’m guessing there might be a lot of questions and also an opportunity for Heather and Ben to add what they like.

Moderator: Okay, we can open it up for questions and Heather, do you have anything that you want to add in before we did that?

Heather James: One thing I was amazed about just through the process of watching this get pulled together and all the subject matter experts being pulled in is just the amount of – I mean, just how difficult it was actually to come up with these scenarios. I appreciate it now so much more. You’re seeing people coming in with a feedback. They see that, “Oh, yes, you can’t actually just cram for this.” How did you know that this was going to work, Peter? I know you’ve got many years experience in this but why do scenario-based questions work over rote memorization questions?

Peter Manijak: Well, the key part that when you have all the experts together and you have an opportunity for them to hash through what are the pain points and the like. What we do in a very systematic manner is once we’ve established the objectives, we make sure that the questions themselves are congruent, they’re technically accurate, they’re relevant. Those are the three key things that we look at. Does the question matter? If someone could answer it, then that’s great. I guess the question we ask is so what? So what if someone knows this? So we go through this process, “Does this matter?” So it all comes down to “Does this matter for someone doing this job?” So we’re asking people to be able to put two and two together and some [Audio Gap] two and four together to be able to think through the answer. Much different than just memorizing if something is red or green or blue or how many pins or a number that they’d have to remember. What we want them to be able to do is think through the problem with the question at hand and come up with the answer. So it really starts with the subject matter experts being able to identify what really matters and tie it to the objectives. At the end of the day, if you have 60 of those questions, we feel very good that we validated your skills and knowledge as a developer.

Heather James: Definitely. It sounds – sorry. Go ahead.

Peter Manijak: [Crosstalk] okay for it?

Heather James: What’s that?

Peter Manijak: Did that answer your question?

Heather James: Yes, definitely. I feel like I just have so much respect now for your experience and the process. It’s been amazing to see it get put together. I think that if people hear that and understand that that’s what the exam is like, I think they’ll be attracted to take it because developers are problem-solvers and there are 60 interesting problems that are truly challenging. I think people will find it – I know it’s probably strange to say this but fun in a fun, challenging sort of way. So I hope that people take that attitude about it rather than being so scared about it, I suppose. So I wonder, Hannah, are there any questions coming in?

Moderator: Yes. We had quite a few questions come in. The first is is the base ACD a precursor to the specialist exams? So is the Acquia Certified Developer a precursor to the specialist exam?

Heather James: I think they’re a requirement. Oh, yes, you go ahead, Peter. You know that.

Peter Manijak: Yes. We are definitely looking at it to be a prerequisite for the specialist exams. However, when we start delving in into more details around the exam, the exam objectives, and what the goals will be, we may not require it but I think at this point in time, we’re leaning heavily for it to be a prerequisite at this time but the official announcement won’t come out for a couple of months but I would anticipate that it probably would end up being a prerequisite. It may not be a prerequisite for all the exams further down the road but for these two, we feel at this point in time, it’s probably going to be most appropriate to be a prerequisite.

Moderator: Okay. The next question is will you have training classes to prepare for the exam?

Peter Manijak: Yes, absolutely. There’s also material that we list and post on the exam blueprint of the training that they can take but we are in the process of putting together supporting training for this particular exam. So you’ll be looking out for announcements on that as well, I hope.

Moderator: Awesome. The next question is, “I’m a site builder exclusively so I’m strong on Domain 1 and 2 but only sporadically touched Domain 3 and 4. What should I do?”

Peter Manijak: Well, what we try to do is we try to hit the sweet spot for all roles that we feel that you should know a fair amount within each of these sections. We put the pass/fail rate at 65% so what we would like you to see is to increase your knowledge in the areas where you’re weak in and we can help you boost your skills and knowledge level up. I believe that you’ll be able to pass it with some additional training to leverage the deep experience you have in your area of specialty. Then the other thing too is we are – and by the way, this is unofficial but we are looking at a site builder specialist certification as well but that’s not in the office roadmap just yet.

Heather James: Yes, definitely. I’m very excited about that one because there’s so many specialists within the Drupal community and have in-depth knowledge that even say, a front-end specialist wouldn’t know and these site builder specialists will know so much about major ecosystem modules and the contributed modules which we couldn’t really include in this exam and I think that a site builder exam would be very interesting to dig into because you’re talking about when is it appropriate to use various ecosystem modules and what’s the right layout tool or those types of things. So it would be very exciting to put that together. I’m very, very hopeful.

Peter Manijak: Yes, and keep in mind that we set the pass/fail mark at 65%. So we’re not asking people to score a 95 or 100. So we are expecting them to miss certain areas and certain sections. We expect people to be stronger in one area than the other. So hopefully, with a little bit of instruction and a little bit more stick time, you will be able to pass the exam without a problem.

Moderator: Great. We had a couple other questions come in. How long will the certification be valid?

Peter Manijak: Well, what we did is we date-stamped your certification. So you’ll get a logo that says “2014.” So it will always be your credential. It’s just that 10 years from now, if you’re still saying you have the 2014 credential, that may or may not be a good thing. Essentially, we probably would expect within the partner programs to have to recertify every two years. Again, this is part of the partner rules and partner requirements and the channel programs that will be coming out. As with anything, if you are up to date and want to recertify and get your credential in 2015 or 2016, it will be date-stamped as well. The marketplace should be able to recognize it.

Moderator: Okay. The next question is how many times are you allowed to take the exam? Say you don’t pass it the first time, are you allowed to take it again?

Peter Manijak: Well, we didn’t put any restrictions on it but we do flag it if someone has failed three times, that we’ll probably reach out to them. That’s for a variety of reasons but what we do have in place today is if you do not pass the exam on your first attempt, we put a cooling off period of 14 days before you can attempt it again. The only other exception that we would do is if we do an event where we’re hosting the event and we’re having the exams taken at the event and we spent some time with you and spent some time maybe chalk talking and doing some coaching with you. If we feel that you’re ready to retake the test, we as a program office will waive the 14-day period. We really tend to want people to have a cooling off period. I’ve seen people at events where they take the exam and then they go back two hours later. They think they’re ready and they do worse. Then I’ve also seen it where we spend time with people and we chalk talk them and go through the points that they just need to get over the hump and they go back there and they make it. But we’d like to be in person with them before we waive any sort of 14-day waiting period.

Moderator: Great. The next question is what other exams are you considering besides the back-end and front-end specialist?

Peter Manijak: We are indeed looking at site builders very, very hard. We feel that that is a credential that could be very well in demand. The other one that we’re looking at is the architect exam. Now, we’re looking at that being a potential performance based test where we’re going to ask you to do a certain amount of activities. We’ll give you some problems to work on and basically we’re going to ask you to execute and perform. One of the things that we’re looking at is automated scoring so we’ll be able to scale up that program. So instead of people having to come in to Burlington or whatever sites that we’re going to have for in-person performance-based testing, we’re looking at creating an environment where we can do some automated scoring from remote testing. So that’s the exciting thing that we’re definitely looking at. So the architect exam, that’s a little further down the road. The site builder one, I think, could be sooner than we think right now. Right now, it’s not immediately on the roadmap but that’s something we’re looking at. We’re also looking at some lower level qualification type exams, not high stakes, more foundational, people just entering into that marketplace just something to get them going but for now…

Heather James: I think that’s what’s interesting is it would be for people in non-technical roles. So this may be people in project management roles, people in the technical sales role maybe who are just new to Drupal and that sort of foundation qualification role. Just make sure they’ve established that they understand Drupal, the community, how the software works, et cetera.

Moderator: Great.

Peter Manijak: Right. The thing is when we picked this particular exam, we thought this was the sweet spot for the technical audiences to get started with. I hope that answered your question.

Moderator: Yes. Going on to the next question, “Is every exam the same or is there a pool of questions and dynamically changing the test?”

Peter Manijak: This will evolve on a per test basis but the exams will be changing, will be updating. There will be multiple forms as time rolls out. So depending on how each exam gets rolled out, some might come out what are called “Multiple forms.” Some might be a single form for the first month or two and then updated and added in other forms so it’s a fairly dynamic process.

Moderator: Okay. The next question is, “Does one maintain credential by retesting or participating in other activities?”

Peter Manijak: Well, that’s part of what we want to look at in terms of recertification but for right now, we’re looking at a retest. I know that we can look into – we’re essentially gaining credits by attending or participating in other events and so we can look at that but it usually comes down to retesting.

Moderator: Great. The next question is, “Is this certified for a certain Drupal version? If so, do we need to take every time a new version comes out, for example, Drupal 7, Drupal 8 and et cetera?

Peter Manijak: Yes, that’s a great question. This particular one focused on Core Drupal 7 and depending on what your role is, you might be set with staying with Drupal 7. For instance, if you’re in a support role that’s supporting Drupal 7, the Drupal 7 customers, and so you may not have a need to go to Drupal 8 or maybe not right away. As we look at the program, long-term, we certainly see some exams going from Drupal 7-centric or focus to Drupal 8. There are other exams where simply because of the type and nature of exam, it may not be necessary for you or for us to develop an exam per version. That could essentially lend itself to the architect exam where we feel that if you are an architect and you’re able to execute and perform on the exam, that you essentially validated your skills and knowledge as an architect and - but we probably then would just be recommending training to take for new products or new versions but at this point in time, we’d have to work out a case by case basis with the channel or partner programs for requirements. Does that make sense with everybody I hope?

Heather James: Yes.

Moderator: Okay. The next question is, “Have Dries and Angela passed these tests?” [Laughter]

Ben Ortega: I’m happy to take that one. So Angie Byron, you can go to her web blog at webchick.net and she had just posted her results and she has successfully passed the exam. Her blog post actually gives a lot of really great information around how to prepare and what she went through. It would be a great reference point for anyone online who’s considering taking the exam. I would certainly recommend you go there and view that page and see what she went through as she describes her experience of taking the exam. She has certainly successfully passed and Dries, as you know, is our founder and Chief Technology Officer who’s all over the world doing all kinds of crazy things for the community and for Acquia. He has not had the opportunity yet to sit down for the two hours that we grant – or the 90 minutes that we grant for him to take the exams. I can tell you that there is an internal pool going right now for when he’ll take it and what his score will be. So we’re all very anxious to get him to sit down and do that. When he does, I’m sure he’ll blog about it and everyone in the community will be able to see it.

Moderator: Great. We have a lot more questions coming in. Will you only be testing on Core Drupal or also on contributed modules?

Peter Manijak: For this particular exam, we focused on Core Drupal. That may change but right now, we’re trying to stay with Core Drupal.

Moderator: Great. The next question is how do other people verify a certification?

Ben Ortega: Yes, so I’ll answer that one. Our plans are to build a directory that anyone can visit on Acquia.com to verify whether someone is certified or not. The plan is to give those that have been credentialed with the Acquia certification an opportunity to post their profile. We’ll initially build it so that way, it’s validated through the program office that they have successfully passed the exam. Once that’s been built, then they’ll have an opportunity to build out their profile a little bit more. We have some early thoughts about allowing those that are certified to build out some sort of like a portfolio so they can show some of their previous work and help them as they make use of earnings that is gives them credential as a certified developer. That’s in our plans and that’s certainly something that will be coming.

Moderator: Great. How long between taking the test and the notification of the status if you passed?

Peter Manijak: Well, you do get an email if you take it online immediately. It gives you your section report and your overall score and if you go to a test center, you get a printout as well. So you do know immediately.

Moderator: Great. We pass…

Peter Manijak: It will take you two to three weeks to get your credential via email and the logo that you’ll be able to use and display. The logo is for an individual. It’s not for a company use. It’s for an individual to use. However, a company can declare that they have multiple Acquia-certified developers. Does that make sense?

Moderator: Yes. Alright, we’ve had a lot of questions on sample questions and training and I think, Heather, this is a great time for you to talk about the next webinar coming up with Prasad.

Heather James: Oh, yes, that’s actually going to be fantastic because Prasad’s actually taken it so many times [Laughter]. He’s actually obviously involved in preparing the blueprints and as part of the workshops that we did to write the questions, but he also took the exam at a test center. He took it proctored. He knows what it’s like to take the exams and he is going to talk about preparing for the exam. He’s a curriculum developer with us and he’s also involved in training so he really has a great insight into how to help people and we’ve really came to hear about your question and what you're wondering. That’s going to be on April 23 and that’ll be at 11:00 Eastern time and I’m not sure what time in Europe, actually because of the time zone difference but - [Laughter] excuse me, because of the time change. That should be very useful and especially if you have any questions about this, about the exam.

Moderator: Great. So I think that’s it for questions. Does anybody else want to end with anything, Ben or Heather or Peter?

Heather James: Well, actually, I had a question come through. It was interesting. It didn’t come through the Q&A. I think it came through the chat. Some asked, “How do you distinguish between a themer, site builder and developers?” So actually, the way we went about this is we started last year doing research, talking to our partners and our clients actually and tried to understand how teams were built – what are the typical teams and what are the size of the teams and what’s the makeup of these teams, who’s actually building the websites? So we saw some common patterns in small and large teams. We saw things that surprised me. I learned that a themer is like a pink elephant. [Laughter] It doesn’t seem to exist. It actually turns out there are different job titles and they don’t necessarily match up to the rules that people have on the team. So someone could be acting as a themer and be the front-end developer or it could be the junior developer or it could be the senior architect and they are maybe acting as a themer on any role or sorry, on any team at any time. So what this helped us do was to make a determination about the types of skills that were required. We couldn’t tightly tie the exams to specific job titles and descriptions. What we tried to do with this first one, was look at what was the absolute required skill set if you had even a small team. If you had someone like this on your team, you could be successful. So you can actually look at that research prepared and published at the end of last year on how to build a great triple team and it’s there – you can download it as an e-book, read them as blog posts and it should give you a really good idea of the pathways to building this. When I did the research, one of the final topics I was looking at was evaluation, and how do you evaluate candidates. It really impressed upon me from two sides. First of all, that there is a huge struggle for people who are evaluating candidates that didn’t know if they weren’t familiar with the software, if they weren’t familiar with the community. We could bring them to someone’s community profile and talk to them about how to look at a Drupal data profile and they have even a tutorial online how to do that. Yet there are so many people, it turns out, as individuals, they don’t have the time, the luxury of time as it turns out to be able to commit. I know we all want people to be committing but it actually – what I learned is that there are a lot of people for whom making a public profile is impossible through their job or circumstance and that actually is very limiting. I really felt quite passionate about the idea that we could provide people with a chance especially with this first certification if someone is a junior developer to get a leg up and to demonstrate their skills and knowledge. I think that we don’t really know the effect right not but I’m very excited about it. So yes, we answered the question about distinguishing between those different roles but they are, like I said, there are things that we validated out in the wild. If you want to know how we did that, that’s available online.

There was another – oh sorry. Go on. Oh, I think there was another question but it was about taking the exam again without paying but I think you do have to pay. So I don’t know if we’ve missed anything else.

Moderator: No, I think that’s it.

Ben Ortega: No. Yes. I just want to let everyone know that we’re really, really excited about the program and the exam. We’ve received some really great feedback and it’s something that we’re very committed about going forward and I think you can hear that in some of our comments here about the plans moving forward for additional exams around different areas within Drupal, moving into performance-based and all we’re trying to do is just create a program that allows those that use Drupal, those that hire Drupalists to really find the talent that they need to be successful when they build out their web experiences. I believe that Acquia and the certification program are doing that. We’re looking forward to working with everybody as well as the community in furthering the program. So if you guys have any questions about the program that you weren’t able to get answers here, or you want to take off-line with us, by all means, you can reach us at certification@acquia.com and I will get back to you as soon as we can.

Moderator: Great. Thanks everyone for attending and thanks, Ben, Peter, and Heather for the great presentation. Again, slides and recording will be posted to our website in the next 24 hours and we’ll also email you out a copy so you’ll have that. Thanks, everyone. Have a good afternoon.

Ben Ortega: Thank you.

Peter Manijak: Thank you.

Click to see video transcript

Moderator: Webinar is a Drupal 7 tutorial with the features module with Prasad Shirgaonkar who’s the Curriculum Developer for our Learning Services Department here at Acquia. We’re really excited to have Prasad on the call. Thank you, Prasad, for presenting to us today.

Prasad Shirgaonkar: Hello, everyone. So good morning, afternoon, evening to everyone. We are going to talk on the Features module today. Just a quick introduction of myself, I work as a Curriculum Developer for Acquia Learning Services. I design and conduct training programs on Drupal as well as on Acquia products. I worked for over 20 years and I have been working on Drupal since Drupal 4.7. Today, we are going to talk about one of the key challenges faced by Drupal developers. That is the configurations management challenge. Let’s talk about challenge first and then obviously we follow by the solution

Prasad Shirgaonkar: Yes. Perfect. Okay. So we’re going to talk about one of the key challenges and that’s about the config management or the configurations management challenge and obviously it will be followed by the solution. Let’s first look at the challenge, what exactly is the challenge first. If you followed Drupal’s recommended development practices, you will typically have a well-defined development workflow. A typical Drupal development workflow consists of multiple environments where your code resides. For example, you may have a local development environment, and a staging environment, and production environment there remotely. You do development on your local environment, you post your code to your staging environment, you do some testing over there, and once the testing is finalized, you push your code to the production environment.

Now, a Drupal site. Typically, the components of a Drupal site as you are aware are the code which are your modules and themes, the configurations which are the content types and views and vocabularies and all the configurations that you do using Drupal’s GUI and the content, that’s the nodes, and terms, and users blocks, all the contents which is added by users to the site. So typically, code resides in code files, so modules and themes are in their own individual files, the .module files and .tpl.php files, java script files, and CSS files, and so on. The content on the other hand, that resides in the database so the nodes and terms and users, they’re all form of the database. Up to Drupal 7, the interesting part was the configurations that we do for building a site like the content types and views, they also reserved. The definitions are also stored in the database.

Now, when you are doing the initial development of your website, copying your code and data or the database from your one environment to another environment, it’s a very straightforward process. So if you’re using some version control system like GIT, you just check-in your code into GIT and check-out on your stage environment and database, you simply take the database down from the environment and push it to another environment and all your environments are getting synced, obviously. When you go down the development stages and when you are doing the continuous development of your website, copying code is simply straightforward but copying database from an environment to another environment becomes increasingly difficult. In some stage, it might become even impossible.

Now, this is because the developer develops the code locally, he adds his own data and does the testing, pushes the code to staging environment. On staging environment, the client test users might add some data independently and when they add the data, they do their own testing and then the code is pushed to the production environment. In production environment, then there’s a live data, the actual data added.

Now, if you copy over your database from one stage, one environment to another environment, it wipes out the data off the target environment. That’s why it becomes almost impossible to copy all the data on the database or actually the configurations that’s stored in the database from an environment to another environment. So this is one of the most prominent challenges faced by Drupal developers. So how do we manage Drupal’s site configurations? How do we move configurations from one environment to another environment without affecting the data or content of the target environment? That’s the challenge that we are going to discuss today and as everything else in Drupal, there’s a module for that. That module is called as features. So what is features module? So this is the URL from where you can get features module, it is drupal.org/project/features. Features modules, as its own name says, it enables the capture and management of features in Drupal.

Now, a feature can be defined as a finite, a defined set of functionality or entities which taken together can satisfy a certain use case. So take the example of, say, a news article. So you have content-type name news articles. You can have a view in which produces various pages or blocks. You could have some taxonomy terms which are used for that particular content type. On that bundle together can create a news feature for your website. What features module does is that it converts and stores site configurations in code rather than in the database.

Now, here are various applications or use cases of features module. We can move your site configurations from database to code which makes it extremely easy to move between environments like the development, staging, and production. We can also check-in in a version control system, like if you just define all your configurations in the database, it’s impossible to check them in in a version control system. Say for example you want to revert back to a previous version of a view, which might be an extremely complex view, it’s absolutely impossible to do it without Drupal’s UI. If you convert that into code and if you version control it properly, you can very easily revert back to a specific version in the past. Another great application that it has got is that you can distribute these features as independent features or independent modules and re-use them across various sites. So suppose you are developing a large set of sites and all the sites require, say, use functionality or requires a user listing functionality or requires, say, a products catalogue. You create it once, you convert that into a feature, and you can use it across multiple sites to minimize your effort or minimize duplication.

So how does features module do it? Let’s have a quick demo of features module. I’m using my local environment and on my local environment I have this dev site and staging site. Now right, now both of these sites or both the environments are on the single machine but they could have been on completely different machines or completely different places, but for this demo purpose, I’m using it on just a single machine but two different code bases completely. So both the sites have almost the same set of modules, but different data. As you can see, the site names and the home pages and everything is slightly different. Now, suppose my dev site is having, say, a content type. That’s news and also a view, news, which pulls the data of that content type and displays it as a page. That functionality is not there on my staging site. Now, if I want to push this specific functionality from my dev environment to my staging environment, I first of all check if I have features module enabled, so I had downloaded and enabled the features module. So enable the module. Features functionality is available on the structure and features. There is no feature right now so I’ll just create a feature. I’ll give a name to my feature, let’s call it as “News”. Just give a unique description. A package, I can just give, say, “My features” and I’ll give a version for this particular feature.

Now, on the right-hand side, I can see various components that I can select. So inside this, what I’m going to select now is the news content type. It could automatically detect the various dependencies that are required to give news content type and I’ll also select news view. So I select all the features that I want to be bundled in this particular feature. I could either download the feature so that it will create code files and download it into a tar or open “Advanced options” and I’ll give a path where it can generate, give an existing path where it can generate the feature and I will click “Generate feature”. Now, if I go to my code base, I’ll find that under the site, so we’ll use the path which I’ve specified. It has created a new folder called the “news”. Inside, features has created several files which are these feature files. I’ll go back to my URL and go to features page again and I can see that it has created a new feature, the news feature which is currently disabled, so I’ll just enable it on the current environment.

Now, we’ll see the use kits; why we need it too or why we should enable it on the source environment. That we’ll be in a few minutes. So this is enabled, I have the news feature of news content type and view, now that’s bundled into a feature.

Now let’s move that to my target environment so just copy this module with folder, you go to my target environment and you’ll have the same folder features custom. I’ll just put it as that folder. Going back to my target environment, I’ll just check. I’ll verify features module is enabled, so you see that features modules is enabled. I can also see that this item module might be just inside that group, it’s the news module. I could either enable it from here or I can just go and check from my features site and I’ll see the news feature is added on my staging environment as well. I’ll enable it and bam, I have a news view added over here and the content types. I have the news content type added over here. So this has absolutely saved me a lot of time of rebuilding that content type as well as a view on the stage. It could be actually a bundle of like multiple content types and multiple views. You can bundle inside a single view, a single feature, and post it from one environment to another environment. So that’s the basic use case or basic use, basic application of features module.

Going further in the workflow of features module, what happens if we make changes to our configuration? So in the content type, say, news content type. If I want to add a new field later on, and I added a new field which is the location field and the text-based field. Now, this on the dev site, if I go to structures and features overview page, and I’ll also add inside the view, if I make some changes, say, I don’t know the behavior. So “no data”. So I’ve made some changes to my content type, I’ve made some changes to my view. If I go to structure and features now, it shows me the state as overridden. What that means is that the configurations which are stored in the code of features are now different than the configurations which are stored in the database. So I need to either to match them, I need to regenerate the code on my source site. So I’ll just click see what’s happening so that you can be sure that the database is different and I go to recreate, and under recreate, under advanced options, and just generate the feature. So after I generate, I’ll just view it again and make sure that it’s in the default state. Now, I need to copy the newly generated code from my source site, that’s my source site from where I’ll just copy this new and better code and I’ll just replace the code on my destination site.

So I’m just doing it fairly crudely over here. I really should be doing it and checking it in a version control system and checking out from that system in the real world. Now, if I go to my staging environment and go to structure, and features, just let me try clearing the cache. Okay, so it has the empty text as well as I can see that it has created on content types in news as either the new feed. So basically whatever changes I do on one environment, I can keep on adding, keep on just reflecting those changes or transferring those changes from one environment to another fairly easily with features module. Going back to our – let’s have some discussion on some other features of the features module. So some intricacies of features modules and how do we extend features module. There are some unique terminologies with features module. Those datasets that we saw on the features page, sometimes, that shows a state that’s overridden that we saw. There’s an option to revert or there’s an option to update the feature. So when we want to save, make changes, use site configurations in the database. When we do revert, actually what it does is that it changes the configurations in the database to match with that in the features module’s code. When we update a feature, what it does is that it creates and produces a newer version, a newer code versions between the configurations from the database.

So these two terms are used quite often with features module. The key question that people asked is that what exactly can be ‘feature’ized? So these are the things which can be ‘feature’ized or which the configurations can be stored in features module. From the core, we can store content types, we can store vocabulary definitions, user loads, permissions, field definitions, text formats, menus and menu items, and image styles. They all can be exported to a feature. From contributed modules, we can store the views definitions, panels, mini-panels, rules that we use for sites, context, as well as the display suite configuration. These all can be ‘feature’ized and many, many other contributed modules. They can export their own settings to features module. What cannot be ‘feature’ized are field like content. So things like nodes, terms, users, and your custom blocks that you add, and the native blocks that you add to the site. These cannot be ‘feature’ized because that’s content and they cannot be stored as a part of code.

A couple of advanced usages of features modules, if you use the module called the Strongarm module that exposes Drupal’s entire variables system to features which basically means that you can export things like your site name, the site slogan, or your team setting, and anything that is stored in the variables table that can be exported into a feature. If you use Diff module, you can actually compare when it shows that feature is overridden. It shows what exactly is the difference. That, you can be using Diff module. Features module has got fantastic integration with Drush. There are lots of Drush command like we can lift all the features, you can see the components of an individual feature. You can see the differences in the feature, in the database and the code. You can expose features, you can revert features, and of course you can update features. So these are all the extensions or advanced uses of the features module.

Just a little slide on resources, where you can find all these, so features module on drupal.org is at drupal.org/project/features, then comprehensive documentation along with examples on drupal.org, and the links for Strongarm module, and Diff modules. So this was a brief presentation about the features module, its use cases, and how to use that module. I’m open for questions now.

Moderator: Great. Thanks, Prasad. If anybody has any questions, could you please ask them now in the Q&A section? We had one come in so far. Can installation of features be automated during Drupal installation like installation profiles in some way?

Prasad Shirgaonkar: Yes, perfectly. It can be. So when you create features, they actually become like your modules. Sorry, just a minute, I just stopped sharing my desktop. Okay. When you create features, they become like modules and you can include them as part of installation profiles and they can be automatically enabled while installing new sites.

Moderator: Awesome. The next question is using Drupal 6 here still. Is there a very big difference between 6 and 7 in the features module?

Prasad Shirgaonkar: Yes. The main difference is in the URL features module but the core, I think, that it does. The core content, the core entity that can be exported. That hasn’t changed.

Moderator: Okay. As a reminder, slides and recording will be posted to our website. I think that’s it for questions. If anybody has any follow up questions, you can reach out to me or Prasad and we can get them answered for you. Prasad, would you like to end with anything?

Prasad Shirgaonkar: No. I just would like to say that for doing the normal day-to-day, Drupal Development workflow, and if you are especially working on complex projects, features is an absolutely must have step in your Drupal workflow. It saves a lot of time for development as well as keeps our code, our configurations completely under our control. So it’s absolutely worth spending time and exploring that module. Make sure that you use it and make it a part of your day-to-day workflow.

Moderator: All right, thanks so much everyone. Thanks Prasad.

Prasad Shirgaonkar: Thanks, bye.

- End of Recording -