Learn Drupal

June 30th, 2015

So where exactly is Drupal 8?

From the feedback I've gotten from BuildAModule subscribers, Drupal 8 is the thing you most want to learn about. But, before I can make more videos on Drupal 8, we need a release candidate. To make that happen, the Drupal Association and an array of core contributors have put together a fund called Drupal 8 Accelerate to help resolve the remaining issues blocking a release of Drupal 8.

Here's how it works: 1. Those who are looking forward to Drupal 8 donate $10 or more to the fund. 2. Other people (or the same people) apply for grants to work on specific issues or host Drupal 8 sprints. 3. A group of core contributors select which applications to fund based on how much it will help Drupal 8 development move forward (check out the grants that have been won for examples).

Why donate now? Well, 2 reasons. The first is that almost $220,000 of the original $250,000 goal has been met, and $30,000 feels very doable with a small, passionate group making reasonable donations. Second, you can enter a drawing to win a 1-year membership to BuildAModule by making a donation of any amount. And if more than 50 of you enter to win, I'll add another 1-year membership to the prize pool.

To enter the drawing, just send me an email with proof of your donation before July 13th (about 2 weeks from now).

Let's do a little something to help get Drupal 8 released!

Also, we're releasing 10 new videos in the "Front End Development'" collection today. Check out the rest of the newsletter below for details. Enjoy!

 


How 'unitless' CSS measurements work New!

Screenshot for How 'unitless' CSS measurements work

Since we're on the subject, we look at relative 'unitless' measurements, which are one additional way we can establish a relationship between properties like line height and font size.

Comparing resources for learning more about CSS units New!

Screenshot for Comparing resources for learning more about CSS units

Besides the units we've covered, there are a number of others that can come in handy from time to time. In this video we look at two resources for learning more about the less frequently used (but not less loved!) CSS units.

Why some people use older browsers New!
(This one's FREE!)

Screenshot for Why some people use older browsers

A front-end developer's dream is a world willing to standardize on the latest version of a single browser. In this video we talk about why that hasn't happened and how to account for those users that are running older versions of various browsers.

How to use 'caniuse.com' to evaluate browser support for CSS and HTML New!
(This one's FREE!)

Screenshot for How to use 'caniuse.com' to evaluate browser support for CSS and HTML

Even for the seasoned front-end developer, it can be hard to keep track of which versions of which browsers support which versions of what CSS properties and HTML tags. Here we talk a bit about a useful site called 'caniuse.com' and how to use its interface.

How we're going to decide if we can use rem CSS units New!

Screenshot for How we're going to decide if we can use rem CSS units

Deciding on whether to use a mostly-supported CSS value is not a cut-and-dry task, and the answer isn't always the same. In this video, we explain how we came to the conclusion that it's okay to use rem units in this particular project.

How JavaScript polyfills can fill the gap in browser support New!

Screenshot for How JavaScript polyfills can fill the gap in browser support

While we're not going to dive deep into polyfills just yet, we spend a minute giving them a mention since they're often a useful way to implement newer CSS properties and HTML tags as browsers play catch-up.

Why we would want to use a CSS preprocessor like SASS New!

Screenshot for Why we would want to use a CSS preprocessor like SASS

In this series, we've explored most of what the CSS syntax has to offer. The more you use CSS, the more you'll start to feel limited by it. You are forced to repeat property values and selectors, and that makes changing things later more painful and error-prone. We need something more, and that's where CSS preprocessors like SASS come into play. In this video we talk briefly about the main reasons we'd want to use a CSS preprocessor at this point.

Why we're using SASS instead of LESS and Stylus New!

Screenshot for Why we're using SASS instead of LESS and Stylus

There are a few CSS preprocessors out there, and you'll find fans of each. However, in the Drupal world, most front-end developers use SASS. SASS has been powerful for a long time, is relatively easy to pick up, and it has a lot in common with the other CSS preprocessors. Here we discuss a bit more about why we're focusing on SASS.

Why we're using the command line version of SASS New!

Screenshot for Why we're using the command line version of SASS

The command line isn't for everybody. Or isn't it? Using a CSS preprocessor on the command line is faster and more powerful than leveraging helper apps, and in this video we reassure you that we're not going down the path of unrelenting geekdom here. There's a good reason to go the CLI route.

How to install SASS on a Mac New!

Screenshot for How to install SASS on a Mac

Most front-end developers gravitate toward using a Mac, and one of the reasons is how straightforward it is to use the command line. Installing SASS on a Mac should be a breeze, but we walk through the steps carefully, just in case.

June 22nd, 2015

Greetings!

This week we're releasing 20 new videos, and boy do they cover a lot of ground. We talk a little bit about CSS preprocessors, CSS resets, package managers and even a bit of Node.js! We're introducing some critical concepts here that will weave compelling threads throughout the reset of the series.

I hope you're enjoying the series so far, and stay tuned next week for even more.


Adding our second styled paragraphs New!

Screenshot for Adding our second styled paragraphs

Now that we've conquered our first paragraph, it's it's time to move to the next. In this video we move down our design and tackle the next multi-lined typographical element.

Creating markup for our article snippet text New!

Screenshot for Creating markup for our article snippet text

Before we start to style our next paragraph, we need to set up our HTML structure. Here we follow suit with our approach so far using SMACSS.

How to style an anchor tag and use the same CSS with multiple selectors New!
(This one's FREE!)

Screenshot for How to style an anchor tag and use the same CSS with multiple selectors

An anchor tag (i.e. a link) is one of the most basic elements of the web, but styling it is more complicated than any other element we've tackled so far because it has multiple states. In this video we walk through styling an anchor tag and also how to use the same CSS rules on multiple selectors without repetition.

How we will soon reduce repetition with a CSS preprocessor called SASS New!

Screenshot for How we will soon reduce repetition with a CSS preprocessor called SASS

This video is a preview of coming attractions. As we go through our CSS, we will start to see places where we've repeated things like hexadecimal colors or selectors. While we can't do much about that in plain CSS, a CSS preprocessor will soon come to the rescue.

How to use the font-style CSS property and finishing the snippet text New!

Screenshot for How to use the font-style CSS property and finishing the snippet text

While we talked about the font-style property before, this is the first time we've actually had a chance to use it. In this video we wrap up the styling for our snippet text, including using this fairly common property.

How to override the browser's default styles with the 'body' selector New!

Screenshot for How to override the browser's default styles with the 'body' selector

One aspect of "cascading" in Cascading Stylesheets that we haven't addressed is that styles in an element cascade into its descendants. In this video we demonstrate one way to set default styles for all elements on a page (with some exceptions) with the "body" selector.

How to use the universal CSS selector and the problems with doing so New!
(This one's FREE!)

Screenshot for How to use the universal CSS selector and the problems with doing so

Using the "body" selector in the previous video resulted in us applying styles to many of the elements we wanted to adjust, but there were some that slipped through the cracks. In this video we talk about using the universal CSS selector (which is an asterisk - *) to override the browser's default styles, and then come back around to talk about the potentially troublesome implications of using it.

How to deal with slight color variations and the benefits of a standard color palette New!

Screenshot for How to deal with slight color variations and the benefits of a standard color palette

Imagine a painter in the throes of inspiration, casting his brush upon his palate, unknowingly meshing colors and creating slight variations that to the untrained eye have no decreeable difference, but can only be seen with those who possess a keen sensitivity to the spectrum. Thus is how designers often use a color picker to fetch these slight, imperceptible variations of color for their designs. Here we talk about why it makes sense to standardize on a smaller set of colors instead of following the design precisely.

How to set sensible default styles without a universal selector New!
(This one's FREE!)

Screenshot for How to set sensible default styles without a universal selector

Even though we've ruled out the universal selector as a tool for applying styles across all of our typographical elements, there are still options for overriding the browser's stylesheet with defaults that are more in tune with our design. In this video we illustrate these options.

Reviewing other typographical styles to determine if they should override the browser New!

Screenshot for Reviewing other typographical styles to determine if they should override the browser

In an earlier video we started exploring the idea of overriding the browser's default CSS, and in this video we continue the process by looking at various font-related properties and if we should make those properties more natural defaults for our headings and other typographical elements.

How to resume from this point (part 1, step 17) New!

Screenshot for How to resume from this point (part 1, step 17)

If you want to hop into this video series from here, this video will show you how to get your examples squared away.

Why to consider cross-browser consistency with CSS early on New!

Screenshot for Why to consider cross-browser consistency with CSS early on

It's easy to put off cross-browser testing until later on in your development process, but it pays off to make some basic considerations early in the process. In this video we talk about why.

How the Universal Selector CSS Reset works New!

Screenshot for How the Universal Selector CSS Reset works

Earlier in this series we talked about the universal CSS selector and its potential dangers. Here we explore one way that the universal selector can be useful, and even though we won't ultimately use this solution, it's good to know what can be achieved with a couple lines of fairly simple CSS.

How the Eric Meyer's CSS Reset works New!

Screenshot for How the Eric Meyer's CSS Reset works

In this video we look through another approach to a CSS reset. This one is a little more detailed, but it avoids the universal selector and addresses some other issues with consistency across browsers.

Comparing the pros and cons of using a CSS reset New!
(This one's FREE!)

Screenshot for Comparing the pros and cons of using a CSS reset

Now that we've scoured the code of a couple of CSS resets, we step back and look at what they're helping us achieve, as well as discuss one of the major downsides of using a CSS reset.

How Normalize.css works New!

Screenshot for How Normalize.css works

Having explored the potential pitfalls of a CSS reset, we're in a position to appreciate the usefulness of normalizing. In this video, we look at a bit of the code and talk about why we're ultimately choosing this approach.

How to download and integrate Normalize.css New!

Screenshot for How to download and integrate Normalize.css

Now that we know that we want to use Normalize.css, we go through the (somewhat tedious) process of downloading and integrating it with our template.

What a package manager is and why we would want to use one New!

Screenshot for What a package manager is and why we would want to use one

Integrating a couple of third party libraries in our project and keeping them up to date manually isn't too much of a challenge, but it's error-prone and we'll start to really resent the process as the number of these libraries grow. So in this video we talk about how a package manager can help solve our problems and why it's work the trouble to get one installed and configured.

How to install Node.js and npm on a Mac New!

Screenshot for How to install Node.js and npm on a Mac

In a previous video we discussed how we were going to download and install the Bower package manager. In this video we set up Node.js, a requirement if we want to get Bower up and running.

How to install Node.js and npm on Windows New!

Screenshot for How to install Node.js and npm on Windows

The process for installing Node.js on Windows and a Mac are similar, but we walk through the steps on Windows in this video and show the uninitiated how to access the command line.

June 8th, 2015

Greetings!

This week we're releasing the next 10 videos in the "Front End Development" series, starting with a dive into SMACSS, a scalable system for organizing CSS (psst... it's more fun than it sounds).

Enjoy!


What SMACSS is and how we'll use it throughout this series New!
(This one's FREE!)

Screenshot for What SMACSS is and how we'll use it throughout this series

Given how flexible the CSS syntax is, it's easy to get trapped in analysis paralysis, trying to figure out the best way to name classes, create selectors, and apply your CSS styles. SMACSS, which stands for "Scalable, Modular Architecture for CSS" is one standard that can help clear the way. In this video, we talk about how we plan on applying SMACSS principles throughout the rest of the examples.

What a component (or module) is in CSS and HTML New!

Screenshot for What a component (or module) is in CSS and HTML

In this video we identify what a "component" is, a concept we're borrowing from SMACSS that refers to structured chunks of the interface. In SMACSS, this is called a "module", but we're going to use the term "component" to disambiguate it from Drupal's use of the term.

How sub-components work and how to name their classes New!

Screenshot for How sub-components work and how to name their classes

Sometimes we'll want to reuse a certain HTML structure throughout our project, but with a slight variation. Sub-components or sub-modules is how we'll achieve this, and so in this video we'll explore the naming conventions and rules that govern how we'd use them.

Why we're focusing so much on HTML and CSS principles and standards New!
(This one's FREE!)

Screenshot for Why we're focusing so much on HTML and CSS principles and standards

It may seem like we're working kind of slowly when you look at how much of the design we still have left to convert to a template, but you've actually come a long way. In this video we let you know why we're taking the time to cover subjects like SMACSS at the outset instead of waiting until we're knee-deep in code.

How to resume from this point (part 1, step 10) New!

Screenshot for How to resume from this point (part 1, step 10)

In this video we demonstrate how to set up your file structure so you can hop into this series from this point without having to watch all of the previous videos.

Deciding what to do next and adding HTML for our next heading New!

Screenshot for Deciding what to do next and adding HTML for our next heading

Having knocked out another heading, we return to our design, rub our hands together eagerly, and figure out what we'll tackle next.

Adding styles for our H3 heading New!

Screenshot for Adding styles for our H3 heading

In this video, we work through the process of styling our first H3 tags to match the design. Since we've already covered all of the CSS we'll need to finish the job, that task goes much quicker than our previous headings. Can you tell we're gaining some momentum?

Adding our last headings to our template New!

Screenshot for Adding our last headings to our template

And... BAM! In this video we complete the process of templating our final headings. It's time to funnel the sheer power of your newly found skills into other typographical elements, let's go!

How the line-height CSS property works and converting our first paragraph New!

Screenshot for How the line-height CSS property works and converting our first paragraph

Now that are headings our complete, we look at our first paragraph. This element introduces a new factor that we didn't consider with our first elements: how to deal with the spacing between multiple lines. In this video, we answer this particular question by demonstrating how to use the CSS "line-height" property.

How to factor in line-height when determining margin New!

Screenshot for How to factor in line-height when determining margin

You thought we were done talking about spacing, weren't you? Well, not so fast. In this video we talk about how to deal with margin - something we covered in previous videos - but this time factoring the extra space that line height adds. Believe me, this is something that many aspiring front-end developers have scratched their heads over and it will be good to get it squared away before we move on.

June 2nd, 2015

Greetings!

As promised, I'm plunking down a solid 50 new videos today in the new Front End Development collection. We have a lot of ground to cover, and we're going to start by building a strong foundation in basic HTML and CSS. For the next several weeks, we'll continue on this track, with some deeper concepts and implications weaved gently throughout.

Instead of cramming 50 screenshots in a single newsletter, I'm going to split the video descriptions over two weeks. But, the full 50 videos are ready for the viewing right now. Enjoy!


Getting set up with our mockup and resource pack New!
(This one's FREE!)

Screenshot for Getting set up with our mockup and resource pack

In this video we get our source files set up and take a quick look at the mockup that we'll be working towards converting into a template through this series.

What HTML is and a simple HTML example New!
(This one's FREE!)

Screenshot for What HTML is and a simple HTML example

Here we talk briefly about how HTML works and review a simple example. As with most development work the best way to learn is to do, so we try to focus on a practical implementation right away. We'll come back around later and talk about the nuances of HTML structure and syntax.

A simple CSS example and what HTML attributes are New!
(This one's FREE!)

Screenshot for A simple CSS example and what HTML attributes are

You can accomplish a lot with straight-up HTML, but to get it to look a specific way you will need some CSS, or Cascading Style Sheets. Again, we're going to focus on practical examples now and we'll come back to the implications later.

How to structure an HTML document and how DOCTYPE works New!
(This one's FREE!)

Screenshot for How to structure an HTML document and how DOCTYPE works

Browsers have been around for a while, and they've lived through many versions of HTML. In this video we learn how to tell the browser which version we're using so that we don't end up with some difficult-to-troubleshoot issues down the road.

How CSS can be used to make any element look like any other element New!
(This one's FREE!)

Screenshot for How CSS can be used to make any element look like any other element

Nearly every bit of visual style we see in the browser boils down to CSS. Here we look at how we can strip existing elements of their default styles and give them our own, giving us the ultimate visual control. Mwa ha ha ha!

Why to use meaningful HTML tags, also known as semantic HTML New!
(This one's FREE!)

Screenshot for Why to use meaningful HTML tags, also known as semantic HTML

If you're not aware of the HTML structure of web pages you visit, then it's likely that you're not using assistive software to get around the web. There are millions of people who rely on HTML structure to navigate web sites, which is reason enough to focus on meaningful markup, but search engines and other developers also find it valuable.

How to choose an HTML tag that matches the meaning you want to convey New!
(This one's FREE!)

Screenshot for How to choose an HTML tag that matches the meaning you want to convey

Knowing what we know now about how CSS can be used to style any HTML element, we're no longer tied to using certain HTML just because of how it looks. So, how do we decide which element is the right one to use for a particular context? That's exactly what we start to explore here.

How every HTML element is a box New!
(This one's FREE!)

Screenshot for How every HTML element is a box

Even though the shapes of HTML elements appear on the surface to cover the entire geometric spectrum, you may find it a bit surprising to find out that they're all just rectangles of some kind. Knowing this will help us figure out how to control the nuances of layout and design as we move forward.

A review of our design, what typography means and how to choose a starting point New!
(This one's FREE!)

Screenshot for A review of our design, what typography means and how to choose a starting point

One of the hardest parts to those new to front end development of converting a design into a mockup is figuring out just where to start. In this video we talk about one approach, beginning with typography.

How to create an image from part of a Photoshop design New!
(This one's FREE!)

Screenshot for How to create an image from part of a Photoshop design

In this video we demonstrate one technique that will prove indispensable throughout your templatizing career, which is moving freely from Photoshop to flat image elements. Don't worry if you don't have Photoshop, you'll still be able to follow along.

A comparison of w3schools.com and developer.mozilla.org as HTML references New!
(This one's FREE!)

Screenshot for A comparison of w3schools.com and developer.mozilla.org as HTML references

As you learn HTML, you'll develop a sense of where to look when you need more information. Here we talk about an compare two useful sites that also happen to show up in the top of search engine result pages.

Why to use HTML and CSS instead of images New!
(This one's FREE!)

Screenshot for Why to use HTML and CSS instead of images

Knowing how to clip images from a Photoshop design is useful, but it's easy to use an image sometimes when there would be serious advantages to using HTML and CSS instead. In this video we talk about what these advantages are.

The advantages and disadvantages of spending the time to do things right New!
(This one's FREE!)

Screenshot for The advantages and disadvantages of spending the time to do things right

As soon as you have a deadline on your hands, you'll soon be faced with a conundrum: Spend the time to figure out how to do things the right way, or just get something done with the techniques you're already familiar with. Here we look at two schools of thought and why you'll find yourself borrowing from both.

How to choose an HTML heading level New!
(This one's FREE!)

Screenshot for How to choose an HTML heading level

Now that we're starting to covert our design over to a template, it's a good opportunity to discuss how we figure out what HTML element to use. Sometimes the solution isn't totally clear, so we'll come back to this question repeatedly as we bump into ambiguous possibilities.

How to use the font-family CSS property New!
(This one's FREE!)

Screenshot for How to use the font-family CSS property

Here we go! This is the start of becoming master manipulators of every visual component of a web page. But, we have to start with a single CSS property, and what a visually subtle yet powerful one it is.

How to measure parts of your screen and use the font-size and font-style CSS properties New!

Screenshot for How to measure parts of your screen and use the font-size and font-style CSS properties

Being able to measure elements on your screen is nearly as vital to your early work as the ability to grab clips from Photoshop, so we talk about a couple of tools you can use to get the job done and introduce you to a couple of new CSS properties while we're at it.

How to use the font-weight CSS property New!

Screenshot for How to use the font-weight CSS property

In this video we continue the journey of converting our first design element into HTML and discuss the implication of font weight.

How to select colors on your screen and use the CSS color property New!

Screenshot for How to select colors on your screen and use the CSS color property

Next to measuring your screen and grabbing image clips from Photshop, sampling colors from your screen is likely the third most valuable tool you'll use in the early stages of your work. Color plays a huge role in web interfaces, and getting the colors right is a big deal when it comes to having a template represent the original design.

How to hide the advertisements on w3schools.com New!

Screenshot for How to hide the advertisements on w3schools.com

While it's not critical to your success as a front end developer to avoid advertisements, it can help keep the distraction level down if you end up spending as much time on w3schools.org as I did when I was first learning HTML and CSS.

How to use text-transform to uppercase text New!

Screenshot for How to use text-transform to uppercase text

Using CSS to convert text to uppercase feels like a minor superpower, especially if you've found other ways to do the same thing without CSS.

How to use the text-indent and letter-spacing CSS properties New!

Screenshot for How to use the text-indent and letter-spacing CSS properties

In this video we explore a couple of new CSS properties, including the elusively named letter-spacing, and get our template even closer to our original design.

Why to use CSS selectors instead of adding styles inline New!
(This one's FREE!)

Screenshot for Why to use CSS selectors instead of adding styles inline

So far we've used the "style" HTML property to apply our CSS to specific elements. But, when we have multiple elements that share the same CSS, we can avoid the problems of copying and pasting identical code by using selectors. In this video we introduce you to selector basics.

How to resume from this point (part 1, step 7) New!
(This one's FREE!)

Screenshot for How to resume from this point (part 1, step 7)

If you want to hop into this video series from here, this video will show you how to get your examples squared away.

How to decide which element a CSS style should be applied to when there are multiple options New!
(This one's FREE!)

Screenshot for How to decide which element a CSS style should be applied to when there are multiple options

At this point in the series, we're looking at where to apply a nice thin CSS border. Does it belong to the heading it's under? Does it belong to its own element? Should that element contain the heading? Tricky questions, but here we try to address some principles to help you answer this question as it comes up.

How to work with border properties in CSS New!
(This one's FREE!)

Screenshot for How to work with border properties in CSS

Now that we know which element to add our border to, we look at the various controls we have around how borders look. Getting a grip on borders will prove valuable to you in much of your front-end work.

May 26th, 2015
Front End Development Cover

At long last, we're announcing a new series called Front End Development. Woot! Today the first two videos are being released, but next week we're going to drop 50 videos all at once. BAM! For those of you that have been waiting for some new material, this will be a humble thank you for your patience.

This collection has been a lot of fun to make. It took a ton of research and planning, but the result is something that I believe can become a critical part of the journey for anyone wanting to become a front end developer or modernize their existing front end skill set. And, (nudge, nudge) those skills are becoming more and more in-demand.

Here's a few highlights from the vast number of topics covered:

  1. How to use Basic HTML and CSS
  2. How to write semantic HTML
  3. How to code a responsive design
  4. How to work with responsive images
  5. How to code for accessibility
  6. How to measure and improve front-end performance
  7. How to use CSS preprocessors like SASS
  8. How to use the SMACSS system for structuring CSS
  9. How to automate time-consuming tasks with Grunt
  10. And more!

You can start this series without any prior experience with HTML or CSS and work your way up to using the tools and techniques some of the most advanced front-end developers employ. Check out the videos below to learn more and get started.

A couple other things

First, I released a few bug fixes. Now you can use the SPACEBAR to start and pause the movie without clicking on the video first. Also, clicking the transcript to navigate the video works a bit more predictably.

Second, I'm exploring the idea of adding some live-action videos to BuildAModule to explore topics that are a bit more behind-the-scenes. Stuff that's maybe hard to cover using a screencast or animation. If you get a chance, take a gander at this first attempt and let me know what you think. They'll get better and more tuned to what you're looking for over time, I promise, but this is just a test to see how it flies.

Screenshot for Would you like to hear more about behind-the-scenes at BuildAModule?

Thanks, and enjoy the new videos! Remember to keep an eye out for the massive release next week as well.


Why this series exists and what we'll be covering New!
(This one's FREE!)

Screenshot for Why this series exists and what we'll be covering

I've been looking forward to making this series for a long time now. The front-end world has changed dramatically over the last few years and there are some excellent tools that makes it possible to build and manage much more complicated projects. But, a lot of us are also starting from scratch, with little or no experience with the three basic web site building blocks: HTML, CSS and JavaScript. So, this series is intended to both cover the basics and help us get to the point where we can integrate tools like the CSS preprocessor SASS, Grunt and Gulp, responsive design and those elusive responsive images. Along the way we'll also tackle accessibility, performance and SEO.

What front end development means New!
(This one's FREE!)

Screenshot for What front end development means

Before we dive in, we take a few minutes to talk about what we mean by 'front end', and why many developers are focusing on building their front-end skill set.

December 16th, 2014

Today we're releasing the last videos in the Drupal 8 Developer Prep series. I hope you've been enjoying these as they've been rolling out, and that you're excited to test your chops on a Drupal 8 project soon.

I've been working hard on the planning process for the next video collection on BuildAModule and will be starting recording shortly. I'll share more details as soon as I get a little further in the process, but it will be an important addition to the library and I think many of you will enjoy it quite a bit. If you don't hear from me in a while, just know that I'm hard at work building it out.

Enjoy and have an excellent week!

- Chris Shattuck

New! How to use the dump tool in Twig to see just the names of the available variables

Screenshot for How to use the dump tool in Twig to see just the names of the available variables

In a previous video we looked at using the dump tool in our template to get more information about a variable. In this video we show you how to show some basic information about each variable available to you without running the risk of crashing your browser.

New! (FREE!) How to figure out what Twig template file is reposible for any output on the page

Screenshot for How to figure out what Twig template file is reposible for any output on the page

In Drupal 6 and 7 we had to use a contributed module to figure out what template files were responsible for what output, but in Drupal 8 the tool is built right in! In this video we show you how the debugging tools in Twig add comments to the HTML to let you track down the source of any code you want to modify.

New! Congratulations and a quick review of what we covered in this course

Screenshot for Congratulations and a quick review of what we covered in this course

Nice work! In the final video in this series we do a brief overview of what we covered and give you some final thoughts on the big picture.

November 24th, 2014

It's a good day!

This week we're releasing a few new videos and offering 50% off new memberships. If you or someone you know might be interested in a membership, just use the code CYBERWEEK2014 when checking out anytime between November 26th and December 1st. Here's the fine print:

  • The code is only good for new memberships, but if you are currently a member, we can expire your account early if you'd like to take avantage of the discount. Please just send me an email saying you'd like to expire your account.
  • To purchase a membership as a gift, you must log out and make the purchase under a new account, which you would then pass that new account onto the individual you made the purchase for.
  • The coupon is only good for memberships.

Enjoy and have an awesome week!

- Chris Shattuck

New! How to decide how granular a template file should be

Screenshot for How to decide how granular a template file should be

With our use case, there are two different ways we can go with the templates. Do we break it down into two templates that can be used more granularly for other purposes, or do we consolidate it into one? In this video we discuss the pros and cons of each.

New! (FREE!) How to see what variables you have to work with in a Twig template using "dump"

Screenshot for How to see what variables you have to work with in a Twig template using \

In this video we look at how to use the “dump” tool to look deep into the variables passed into your template. Be careful, though, because it could crash your browser if you’re not careful.

New! How to do a foreach loop in a Twig template

Screenshot for How to do a foreach loop in a Twig template

It’s tough to use the “find a unique string” method to dig up a template in core Drupal that would show us how to do a loop, so we identify some additional online resources we can use to figure it out.

November 11th, 2014

Greetings!

First, we will be offering 24-hour BuildAModule memberships FREE for individuals and groups during the Drupal Global Training Days on November 14 and 15th. If you would like access, just go to the free page on those days to redeem a 24-hour pass.

Next, we had two days of amazing free training at BADCamp this last week, where we trained over 150 people at all levels of Drupal. There are several Mentored Trainings planned for the upcoming months, but also keep in mind that you can organize a Mentored Training for free in your area or for your organization. Find more information here on organizing a Mentored Training for free.

Here's a few kind words that one attendee had for the team of amazing Mentors we had for the training:

"At long last I feel like I have a handle on Drupal thanks to your BAM help. My boss had signed us up for an account after BADcamp last year, but I really needed the help you provided at camp. Thank you so, so much for your help without attitude and your kindness. Please pass it along to all the people who helped whose names I have forgotten. I am now a BAM zealot."

Enjoy the new videos this week and have an awesome day!

- Chris Shattuck

New! How to use Twig filters and translate content in a template with the t filter

Screenshot for How to use Twig filters and translate content in a template with the t filter

In previous versions of Drupal we were forced to use the translate function, t(), in weird places to ensure our strings were translatable. In Drupal 8, we can use the idea of Twig filters to making strings translatable straight from the template. When you see this in action, it will make a lot of sense.

New! How to replace variables in a translated string using the "t" filter in a Twig template

Screenshot for How to replace variables in a translated string using the \

After getting the “t” filter to work in our template, the next part is getting replacements to work in the translatable text. In this video we do that and also explain what resources we used to figure this one out.

New! How to set up a new variable to use in our Twig template file

Screenshot for How to set up a new variable to use in our Twig template file

At this point we have our template file functional, and we’ve demonstrated the multiple steps needed to get a variable passed from the theme invocation over to the template file. In this video we do it all again in one fell swoop.

November 4th, 2014

Greetings!

This week we're releasing 7 videos on getting a Drupal environment set up with the relatively new Acquia Dev Desktop 2, and how to take advantage of Acquia Could Free for hosting a live site. Even if you've been a BuildAModule user for a while and have a Drupal environment set up, you might enjoy taking a look at the streamlined workflow these tools provide for future projects.

We also go through the process of setting up SSH keys on Windows and Mac, something you'll find handy when using other third party tools as well.

Hopefully I'll be seeing some of you at BADCamp this week, perhaps at our 2-day Mentored Training, but if not, have an awesome week!

- Chris Shattuck

New! (FREE!) How and why to install Acquia Dev Desktop

Screenshot for How and why to install Acquia Dev Desktop

In this video, we walk through the steps of how to install Acquia Dev Desktop and point out a couple reasons why Dev Desktop makes sense as a tool for setting up your Drupal project on your local machine and in a live environment.

New! (FREE!) How to import a local Drupal site into Acquia Dev Desktop

Screenshot for How to import a local Drupal site into Acquia Dev Desktop

The first way we're going to install Drupal using Dev Desktop is through the import tool. This will let you use an offline copy of default Drupal or an existing Drupal site. This is the only method that works when completely disconnected from the internet.

New! (FREE!) How to install Drupal distributions or default Drupal from within Dev Desktop

Screenshot for How to install Drupal distributions or default Drupal from within Dev Desktop

Another option for installing Drupal in Dev Desktop is by selecting one of the supported Drupal distributions and downloading it, including default Drupal. This saves a few steps in the process of downloading and setting up Drupal manually.

New! (FREE!) How to make a site live by pushing to Acquia Cloud Free

Screenshot for How to make a site live by pushing to Acquia Cloud Free

Acquia provides a way to launch a development and staging site free through their Acquia Cloud service. In this video we take the site we set up locally and push it to the cloud.

New! (FREE!) How to generate a SSH key on a Mac and set it up with Acquia Cloud

Screenshot for How to generate a SSH key on a Mac and set it up with Acquia Cloud

In order to complete the process of pushing a site to Acquia Cloud, we need to set up an SSH key. Here we walk through how to generate and set up the keys on Mac OSX.

New! (FREE!) How to generate a SSH key on Windows and set it up with Acquia Cloud

Screenshot for How to generate a SSH key on Windows and set it up with Acquia Cloud

In order to complete the process of pushing a site to Acquia Cloud, we need to set up an SSH key. Here we walk through how to generate and set up the keys on Windows.

New! (FREE!) How to create a Drupal site on Acquia Cloud Free and sync it with Dev Desktop to work locally

Screenshot for How to create a Drupal site on Acquia Cloud Free and sync it with Dev Desktop to work locally

In the last videos, we took a local Drupal site and pushed it to a live site on Acquia Cloud. In this video we go the other direction, creating a second Drupal site on Acquia Cloud and pulling it down into Dev Desktop.

October 27th, 2014

Greetings!

This week brings another 4 videos in the Drupal 8 Developer Prep collection where we discuss how to use variables in Twig and debug Twig templates.

I will also be heading to BADCamp in a week to do 2 days of Mentored Training with a small band of awesome Drupalists from around the country. If you're going to be there for the training or the rest of the conference, I'll be looking forward to crossing paths.

Enjoy and have an awesome week!

- Chris Shattuck

New! How to set up a Twig template file and a brief description of Twig variables

Screenshot for How to set up a Twig template file and a brief description of Twig variables

In this video we create our first Twig template file, get it set up in the right place, and then talk a bit about how variables work in a template.

New! How to register a Twig template file with hook_theme()

Screenshot for How to register a Twig template file with hook_theme()

After creating our template file, the next logical step is to register it with hook_theme() so Drupal knows where it is.

New! How to wire up a Twig template to a render array

Screenshot for How to wire up a Twig template to a render array

Now that we have our Twig template in the theme registry, it’s time to actually use it. In this video we show one approach to using the template file, which is pushing it through a render array.

New! (FREE!) How to easily debug Twig templates by reloading updated template files automatically

Screenshot for How to easily debug Twig templates by reloading updated template files automatically

One thing that you might be missing if you’re upgrading from Drupal 7 is the flexibility of being able to use PHP in your template to figure out what variables you have to work with. Luckily, Twig comes with a nice feature that allows you do exactly that without the security risk of using PHP directly.

October 20th, 2014

Greetings!

I'm happy to announce that BuildAModule HD has been released! HD is free for all members and is enabled by default, so you don't need to do anything to activiate it. Now your videos will look cleaner and smoother, and the site loads faster than ever.

If you're not a member yet, now is an awesome time to join!

Below are some of the details of what we've been working on. I hope you enjoy the free upgrade, and have an amazing week!

- Chris Shattuck

Highlights of BuildAModule HD, including performance boost, smoother framerate and lots more!

October 14th, 2014

Greetings!

Throughout the last couple of weeks, we've been gradually updating a Drupal 7 module to Drupal 8. This week we tie up some loose threads by updating a few of our leftover hooks like hook_permission, hook_cron and hook_help. Finally, we're releasing a FREE video explaining how the Twig templating language works and why it's so useful.

Enjoy and have an awesome week!

- Chris Shattuck

New! Updating our .module file's hook_permission() and hook_help()

Screenshot for Updating our .module file's hook_permission() and hook_help()

The conversion of our modules user interface is complete, but there’s a few things under the hood that we still need to review. In this video we start working through our .module file and discover a lot of code that we can simply yank out, and a couple bits that needs some upgrading.

New! Cleaning up our .module file and updating hook_cron()

Screenshot for Cleaning up our .module file and updating hook_cron()

In this video we complete the process of bringing our .module file up to speed with Drupal 8.

New! How to fix an "Undefined offset" error

Screenshot for How to fix an \

If you have your error reporting set to show notices, you might see a big red block of errors at the top of your otherwise beautiful block showcase page. In this video we explain where these errors are coming from and how to get around them.

New! (FREE!) Overview of how Twig works and why Twig is so useful

Screenshot for Overview of how Twig works and why Twig is so useful

Drupal 8 comes with several improvements to the theme layer, not the least of which is the switch to using the Twig template engine. In this video we explain briefly about what Twig is and the role it plays in Drupal.

October 6th, 2014

BuildAModule HD. Better resolution, better audio, better device support, free for members

That right, folks. We've been working hard to cook up a pretty awesome upgrade that will be rolling out in the coming weeks and will be absolutely free for all members. Keep an eye out in the newsletter and Twitter for the release of HD.

Have an awesome week!

- Chris Shattuck

September 30th, 2014

After several weeks of building our first block in Drupal 8, this week we wrap it up by troubleshooting some block configuration form issues and also take a broader look at ways we can improve what we've done so far. Enjoy!

(FREE!) How to use the Configuration API as a service - 1:48

In previous examples we were passed a configuration object we could work with, but in our block configuration form we have to figure out how to tap into the dependency injection container and get the service ourselves.

Testing out our module settings and troubleshooting a problem with saving the value - 1:32

In this video we give our module settings page a trial run and discover a bug we’ll have no problem squashing.

Troubleshooting our block configuration form - 3:35

Here we do our final tie-in to make sure our block configuration form is on speaking terms with our module configuration. Again, we run into an unexpected issue but our spirits are not daunted.

Adding a second block and ways to improve our block configuration - 1:24

Now that our block plugin is working exactly like we wanted it to, we step back and discuss what might make it even better.

Have an awesome week!

- Chris Shattuck

September 22nd, 2014

Last week we looked at the Configuration API - the natural successor to the variable_set() / variable_get() API - while building a block in Drupal 8. This week we continue working on our block and associated settings by adding a menu item. In Drupal 7, creating a menu link was done in the ever-useful hook_menu(). In Drupal 8, however, hook_menu() is gone and we have a couple new conventions to replace it. Along the way, we'll also look at yet one more way to store configuration specifically for blocks.

Which files to use if you're starting this series from here - 0:34

In this video we point you in the right direction for getting your files set up if you’re just jumping in or haven’t been copying our changes in real time.

How to register a menu link and find the ID for an existing menu link - 5:03

In Drupal 7, hook_menu() took care of creating menu items for us while also defining our routes. In Drupal 8, however, the routing and menu items have been split apart. In this video we look at how to create a menu item by using a menu links YAML file, and also how to dig up the menu link ID for another menu item if we want to add our link as part of a hierarchy.

How to show a link to our module configuration form from the module listing page - 1:13

To complete our module configuration form, we need to add a link from the Extend page to the form, and that’s what we do in this video.

How to set up a block configuration form, and a benefit of using plugins - 5:27

So, we’ve built a configuration form for our module, but how do we edit the one that comes with our block plugin? In this video we walk through how to find a good example in the Drupal 8 code base and we start modifying it to suit our needs.

(FREE!) How to use block settings in a block configuration form - 3:35

After we figure out how to store block settings (which is yet one more storage system different from the Configuration API and the State API), we demonstrate how to actually use the settings in our configuration form.

Have an awesome week!

- Chris Shattuck

Add to playlist

Add to , or

Add to new playlist:

Add to playlist
This is a member-only feature
But, it's easy to become a member

Add to cart:

Syndicate content

Loading...
Contact us

Below are the supported keyboard shortcuts for our video player.

space
Start / stop video
shift
Go to next video
shift
Go to previous video
Increase or decrease player speed by 20%
Skip ahead or go back by 15 seconds
1...9
Jump to a percentage (2 is 20%, for example)
f
Toggle full screen
Videos Pricing More Search
BuildAModule Logo Icon BuildAModule Logo Icon
Become a member!
$29
1 month
$156
6 months
10% off
$276
12 months
20% off
All memberships come with the following:
24 / 7 access to the entire 1800+ video library
An innovative video player with a rolling transcript
Extensive Drupal and cross-platform training
A thorough and thoughtful training style
Progress tracking
Take notes on specific video sections
Intuitive multi-user management
How many users?
user
Go solo with a single user, or give multiple team members access through one account and get discounts by bundling multiple users into a single membership.