June 2015

Win a 12-month membership by donating to Drupal 8 Accelerate (plus 10 new videos!)

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!

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!

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

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

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!

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!

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!

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!

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!

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!

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.

New BuildAModule videos on CSS preprocessors, resets, Node.js and more!

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!

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!

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

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!

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!

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!

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

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!

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

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!

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!

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!

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!

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!

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

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!

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!

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!

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!

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!

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.

10 New Videos Released Today in "Front End Development"

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

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!

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!

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

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!

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!

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!

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!

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!

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!

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.

50 New Front End Development Videos Released Today!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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!

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!

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!

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!

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!

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!

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

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

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

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

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.