September 2015

It's been a while, and I'm sorry about that. If you're like me, you probably enjoy a break from a steady newsletter stream sometimes, so hopefully you're refreshed and ready to take a minute to catch up. If you want to just skip to the new videos, do a quick scroll down. Otherwise, here's a few select ditties you might be interested in:

BADCamp (Bay Area Drupal Camp) training is on!

4 years ago at BADCamp 2011, we piloted a new training program called "Mentored Training." Since then, dozens of Drupal camps and events from all around the world have used the training model to get lots of people trained in a way that's super fun and really works. This year, we're continuing the BADCamp tradition and doing 2 solid days of training on Thursday Oct. 22 and Friday Oct 23. A team of volunteer Drupal experts will be at the ready to help to answer questions and guide you through tricky spot. Join us, you won't regret it. And did I mention it's FREE?!

I've been working really hard (not an exaggeration) on "Front End Development," and I appreciate your patience. This is going to be a HUGE collection, twice as big as any I've ever released before. It's been quite the undertaking, but the work is starting to pay off. If you're in the market to learn some front end, I'm really excited for you. If you're not, maybe you should be.

If you're a BuildAModule fan (or critic, for that matter), you might have some questions, like:

"Why are you doing a bunch of videos on the front end, isn't this a Drupal training site?", or:

"I'm more of a site builder, I don't really need to know front end stuff, right?", or:

Great questions (and comment)! Let me tackle the broad question first of "Why should I be interested in this stuff?"

Reason #1: You do Drupal in some way*. Drupal automates and hides a bunch of the choices and messy mash-ups you would have to make if you were building a web site or application from scratch. Most of the time, this speeds us up and makes us more productive. But, at some point nearly everyone has to dig into the HTML or CSS code behind Drupal and figure out how to do something that Drupal doesn't do out of the box. If you don't know your way around both of those, you're stuck. You need someone else to fix the problem, and that's not always an option. If you get a grip on the front end, you will become much more independent and more valuable to your project or team.

Reason B): Every web site or application has a front end, regardless of the back-end. Back-ends vary tremendously, but nearly all front-ends use a common toolbox. Learning the front end gives you a skill set that's portable and opens you up to a ton of job opportunities or flexibility within your own work. Organizations and digital agencies are hiring front end developers like crazy. It's a good time to learn.

Reason iii. The tools required for front-end work have become much more powerful, but also magnitudes more complicated. On your own, it will take a while to piece together the parts that you need, and you'll end up spinning your wheels on ideas or techniques that aren't going to be that important in the long run. I built "Front End Development" to synthesize a vast amount of material into a cohesive, practical whole. It could be one of the best places to lay your front end foundations.

Okay, good enough? You in? Alright! So, now a little bit about the strategy behind releasing this collection now:

1) Completeness. For years now there's been a big gap in what you could learn on BuildAModule when it comes to the front end. That's okay, but I personally know how important it is to be able to work on the front end if you ever want to create your own business site or online app, and since BuildAModule is a way for people to learn the skills to become more and more independent in their work, that gap has bugged me. In my mind, ideally someone should be able to come to BuildAModule, spend some time learning, and walk away with a complete toolbox that will let them jump into whatever web project they want to make. But without front-end** coverage, BuildAModule has had a big gap. Now I think there's a much better foundation to build on with lots of low-level videos to reference, especially as we get into Drupal 8 theming and services.

2) Style. There's a lot of screencasters out there, many of whom cover front-end topics, and I don't claim to be the best. But from the feedback I've gotten over the years, there's a style to the BuildAModule screencasts that seems to work for a lot of people. Part of that has to do with leaving no steps out of complicated processes (of which there are quite a few in "Front End Development"), and I knew that in order to demonstrate how to create a responsive design, how to use icon fonts or deal with typography, that I had to cover it in context. So, the idea behind the series is to build an entire modern, responsive site straight from a mockup, with no steps skipped. The amount of knowledge required to do that was kind of astonishing to me as I worked my way through the planning and recording process, which makes it even more important to show how it all connects.

3) It stands alone (like the cheese). On BuildAModule, most of the video collections are Drupal-specific, but a couple stand on their own like "PHP Programming Basics" and "Change Management and Version Control." These cross-over collections, I hope, allow the Drupal community to build skills that are useful outside of Drupal***, and also help bring non-Drupalers into BuildAModule from time to time. I think that's good for the community, and it makes sense as an overall strategy for BuildAModule as well.

Drupal 8?

Of course! I'm super excited about Drupal 8, and we've been in a chicken-and-egg situation for a while where I need a few things from Drupal 8 before I can start to cover it in a sustainable way. I was able to release "Drupal 8 Developer Prep," which I hope enables more aspiring Drupal developers to give Drupal 8 a go, but I still can't make a site-building collection that reflects what it would really be like to build a site in D8. There's a ton of amazing stuff in there, site-building-wise, and I'm itching (really itching, I can feel it now) to expose some of that stuff on BuildAModule. It's not time yet, but it will be soon.

Are you reading this?

As I take a breath from a non-stop editing workflow to reach out to you, I have to wonder. Are you reading this? Were you actually curious about the origins and purpose behind Front End Development? Do you care about Mentored Trainings in Berkley, California? Are you excited in any way that there are 60 new videos out? If so, take a minute to send me a quick email that says something like "no" or "yes" or "HECK, YES!"

Thanks for being there, folks, and I look forward to putting more of these FED videos out over the coming weeks.

In earlier videos we began converting most of our absolute units over to relative units. In this video we complete the process by working through all of our component partial files and getting them squared away.

In previous videos, we worked through the process of styling our two rows of footer navigation and copied a number of styles between them. In this video we review our principles for CSS class naming and come up with a solid approach to sharing CSS styles between multiple elements that have a lot in common.

Here we wrap up our styling of the footer menus by adding a border between the two rows and discussing where the best place is to put border and margin styling when working in the space between two elements.

It's pretty satisfying to discover how to center an element on an HTML page for the first time. No longer do you need to be dissatisfied with the lopsided nature of a default left-justification. Wield the power of centering, with just a couple simple lines of CSS!

In an earlier video we discussed how to use the footer element as we went through the process of constructing our site footer. In this video we discuss the header element, which has many similarities but one very important distinction.

Sometimes you will want a certain CSS style to apply only in certain situations. For example, maybe a button will look different when you hover over it, or when it is disabled. Here we talk about the SMACSS convention for creating CSS classes that apply only in certain scenarios, called "states."

When you're first getting started with CSS, one common gotcha is running into an element that inexplicably overlaps some other element. What the hay? In this video we discuss what's typically causing this and how to resolve it using the CSS property "display."

It's important to evaluate the level of browser support we can expect for newer CSS properties. In previous videos, we used the "caniuse.com" site to check this support and what percentage of our potential audience might not be seeing exactly what we intended. Here we do the same thing with a new CSS property and ultimately decide that the potential downsides are small.

Adding vendor prefixes every time you want to use a newer CSS property can be painful and also increases repetition, making possible mistakes more likely. Here we explain that there are solutions that will take the sting out of vendor prefixes, though we'll wait until later videos to actually use them.

Plus 40 more! Just click one of the videos above to view the full list of newly released vids!

* You do, right? Ha, I knew it! I'm not psychic, but you *did* sign up for a Drupal-ish newsletter, so ... you know. Just putting the pieces together.

** Which looks better to you, "front end" or "front-end?" I standardized on the no-dash version but man, I really want to add that dash in sometimes. Thanks for humoring me.

*** Not because Drupal is going away, but mostly because the specific job landscape around individuals changes rapidly and being able to transition into new work that might not involve Drupal is a great risk-reducer.

This week we walk through the initial steps of creating a horizontal navigation. We start out by blowing away the commonly held belief that navigation should be structured as HTML list elements, and then we move on to optimize our CSS with SASS. We wrap up this week demonstrating how to write a function in SASS. Functions? with CSS? Wild!

In many tutorials covering HTML and CSS, the suggestion of using lists to organize navigation is put forth. In many ways this makes sense, but those who use screen readers would more likely prefer that you use generic container elements like divs and spans. In this video we explain a bit more.

Now that we're converting our first navigation element over to the template, it's a good time to look at what our options are in terms of a container element. Here we do a quick search and turn up the 'nav' element.

In this video we begin the process of converting many of our absolute pixel units over to relative units. Specifically, we look at whether it makes sense to use an 'em' or 'rem' unit for our footer navigation margin and what calculation we can use to get what we need.

Much of what you can do with a programming language like JavaScript or PHP you can also do in SASS. In this video we demonstrate how to calculate 'em' units with an operation, and then pull multiple strings together into a single value with a concatenation operator.

In this video we write a function in SASS to calculate 'em' units based off of a pixel unit value. Once we have this squared away, we'll be able to use the function instead of writing out the calculations by hand.

It looks like there might be an issue playing videos in this browser. We're working on better cross-brower experience, but in the meantime please try the latest Chrome or Firefox browsers. Or, you may be able to watch the video directly without progress tracking or transcript: