Learn Drupal

September 20th, 2016

Greetings!

Just a quick heads-up that if you'll be attending BADCamp this year in Berkeley, CA, that we're offering two days of free BuildAModule-based training on October 20 and 21. If you want to get up to speed with Drupal (especially Drupal 8) and would prefer a hands-on training with no long lectures and lots of one-on-one help when you need it, this training might be right up your alley.

You can learn more about how our unique training model works here, but if you're on the fence just know that we've had great reviews from our trainees every year for the last 5 years. Chances are very good you'd learn a lot and have a great time.

Here's the link for the Thursday, October 20th signup.

And here's the link for the Friday, October 21st signup.

We'd love to see you there and help you make a big leap up the learning curve. It will be a lot of fun.

Cheers!

August 16th, 2016

Drupal 8 Site Building

Greetings!

Today I'm releasing a new video collection called Drupal 8 Site Building. Not just the first chapter or two, but all 265 videos of it, all at once. This is something I've never done before. If you're interested in hearing what makes this series unique, read on. But if you're ready to dive in now, there are 20 or so free videos to get you started even if you don't have an active membership. Click here to begin watching Drupal 8 Site Building.

The goal of the series is to provide a solid foundation for every new Drupal user and a rapid and thorough review of best practices for veteran Drupalists. It's also thoughtfully categorized into discrete videos that are easily searchable by title, description and transcript in order to make it a valuable reference even for those that aren't going to watch the series from start to finish.

A work of art

I've spent the last three months doing very little besides researching, designing, recording and editing this collection. While it's the Drupal 8 spiritual successor of the Build Your First Drupal 7 Web Site collection with several aspects of Advanced Site Building in Drupal 7, it's more tightly edited and carefully planned than any other collection I've put out. Some additional features include:

  • Quizzes at the end of each chapter
  • Challenges at the end of each chapter
  • Solutions for the quizzes and challenges in step-by-step video format
  • File and database snapshots of each chapter so you can easily start from anywhere in the series, along with clear and easy to follow instructions for restoring from the backups. I've also included a snapshot of the finished project.
  • Support for minor Drupal release updates
  • Sound effects and humor (experimental, let me know what you think)

Practical and complete

Drupal can be complicated, and it's impossible to learn it thoroughly without understanding how each part of Drupal relates to the other parts. To demonstrate these important connections, we focus on building a single project from start to finish. The backstory and ongoing narrative around the project also provides a memorable context to make it easier to remember what was learned later when working on real world projects.

Why all at once?

I really wanted members to be able to view this collection all at once, instead of waiting for months to see it to its end. It will give you more freedom in how you view the series, and as a consumer I know that's something that I appreciate (thank you, Netflix).

Another factor is that Drupal 8 is moving faster than any other major Drupal release. For the first time in Drupal history, minor releases of Drupal can contain new features. Right now Drupal is at version 8.1, and will soon be at 8.2. When that new version is released, it will contain some excellent improvements and a lot of squashed bugs. If I released this collection in smaller batches it would stretch over several minor versions of Drupal, meaning that those who were watching the series as it was released would need to upgrade as they go, and I don't cover upgrading until the last chapter!

So yeah, what about those updates to Drupal?

It's a really, really great thing that Drupal 8 is getting minor releases every several months. It gives core Drupal developers a chance to see their work in action quickly, and gives the project many more opportunities to iterate on ideas. And it means that users of Drupal 8 get to bank on these improvements with minimal risk of breaking existing integrations, something never possible before.

But it sure makes the job of trainers more difficult. In seven weeks, Drupal 8.2 will be out and a number of the videos in this series will need updates. 6 months after that will be another minor release, and I'll need to put together another round of updates.

I mention this not to garner pity (but pity is welcome, too!), but just to illustrate that this new pace of change in Drupal is something that I planned for in this series. I will be making new chapter snapshots with each minor release and will also work hard to keep video updates up-to-date, so any changes in the interface don't get in the way of learning.

From the heart

I poured my heart into this series. That doesn't mean that you have to like it, but I think it means that there's a greater chance you will. After screencasting for the last six years, I've come to embrace it as an art form, and I tried some new things in this series that I hope you like. Learning through videos should feel like a natural, enjoyable and efficient exchange between the trainer and the learner, and everything that gets in the way of that should be set aside. I'm learning more about how that works every time I produce a new series, and I expect I'll keep learning more as I go. This series, though, is my best work so far. Fingers crossed that it works for you, too.

Thank you so much, and enjoy!

August 9th, 2016

Greetings fellow learners!

Here it is, the final installment in the "Front End Development" series. In this last batch of videos, we look at what ARIA tags are, how they can improve the accessibility of your site, and how to implement them. We also take a look at a tool for Firefox that scans your site for accessibility issues and offers suggestions for fixing them.

This has been our longest video series by far, and for a good reason. Going from a mockup to a functioning template requires a ton of knowledge and awareness of numerous angles. I hope that if you've been a watcher of the series that you've seen your toolset grow and been able to put some pieces together that might have been difficult to put together on your own.

Thanks as always for watching!

 

About using meaningful images as CSS backgrounds and accessibility New!

About using meaningful images as CSS backgrounds and accessibility

Chromes Accessibility Developer Tools gives us a warning to check if we're using meaningful images for CSS backgrounds where they're hidden from screen readers. We are, and we discuss some alternatives to make sure our textual browser users get the meaning of these images.

How contrast ratios and WCAG ratings work New! (This one's FREE!)

How contrast ratios and WCAG ratings work

The contrast between the foreground and background color can be a big factor in readability. In this video we use the accessibility audit as a jumping off point for discussing what contrast ratio means, and how it is one factor in seeking a higher WCAG rating.

Reviewing links with unclear link text New!

Reviewing links with unclear link text

Our accessibility audit turned up a few links that had potentially unclear text. We review these and describe how we're making these elements more accessible.

How to run an accessibility audit with Firefox's AInspector Sidebar add-on New! (This one's FREE!)

How to run an accessibility audit with Firefox's AInspector Sidebar add-on

Chrome's accessibility audit tools are concise and quick, but the "AInspector Sidebar" add-on for Firefox is more complete. We get this installed and open up the sidebar to see what our Chrome audit might have let slip through the cracks.

What ARIA is, how "landmarks" work and adding a "main" landmark New! (This one's FREE!)

What ARIA is, how "landmarks" work and adding a "main" landmark

ARIA (Accessible Rich Internet Applications) is a specification that helps us create rich interfaces for our websites without sacrificing usability for screen readers. Most of what's covered in ARIA's scope is beyond what we need at this point in our site development, but there are a couple techniques we'll end up using, the first being adding landmark roles to our site to more easily identify the role of each element.

How and why to use the "navigation" role on HTML "nav" elements New!

How and why to use the "navigation" role on HTML "nav" elements

Even though the "nav" element pretty clearly has a navigation role, some browsers don't add that role by default. Here we reference a useful web page that lists possible elements and default ARIA roles and explain why sometimes we have to be so explicit.

Adding container elements with ARIA roles and why to use HTML tags instead of ARIA roles New!

Adding container elements with ARIA roles and why to use HTML tags instead of ARIA roles

Many HTML elements have roles built-in, and whenever possible, using a specific HTML tag instead of setting the role of a generic HTML tag makes the HTML more readable and reduces redundancy. In this video we knock out another accessibility violation of our site by adding container elements and discuss the benefits of using HTML tags when we can.

How and why to add ARIA landmark labels New! (This one's FREE!)

How and why to add ARIA landmark labels

In order to pass our accessibility audit, we look into adding ARIA labels to distinguish landmark elements on the page with the same ARIA role.

How to add a language code to your web page New!

How to add a language code to your web page

Here we make it explicit that our site's language is English.

Reviewing our other "Styles / Content" accessibility audit checks New!

Reviewing our other "Styles / Content" accessibility audit checks

Having conquered all of the violations for our site in the "Styles / Content" section of our audit, we explain how the "manual check" line items work and move on.

Reviewing our AInspector Sidebar "Links" accessibility violations New!

Reviewing our AInspector Sidebar "Links" accessibility violations

Here we see that an issue that came up in our other accessibility audio with our link text not being descriptive, and again we move on.

How to add text in a link for accessibility but hide it from view New!

How to add text in a link for accessibility but hide it from view

We saw in the Flexslider navigation how it's possible to add text to a link but hide it from view, and here we do the same thing to the empty submit button in our search form. It's a nice trick to know.

Fixing an accessibility issue with our hidden labels New!

Fixing an accessibility issue with our hidden labels

An earlier decision we made to hide any labels with the CSS "display" property that weren't supposed to be visible in graphical browsers threw a red flag in our accessibility audit, so we explore another approach to hiding them visibly that gets a pass.

How to use the "fieldset" and "legend" HTML tags for input groups New!

How to use the "fieldset" and "legend" HTML tags for input groups

Our accessibility audit suggested the use of a "fieldset" tag around our group of radio buttons, so we add one in along with a caption like "legend", and get it styled to match our mockup.

Wrapping up our accessibility audit review New!

Wrapping up our accessibility audit review

In this video we address a few odds and ends from our accessibility audit.

Congratulations on completing "Front End Development!" New!

Congratulations on completing "Front End Development!"

Holy cow! Did you really make it through the entire "Front End Development" series? That's no small feat, and the skills you have now put you in a great position to work on virtually any web based project as a front end developer. Great work!

Bonus: How to add a favicon to your site New!

Bonus: How to add a favicon to your site

Even though we've covered an incredible amount of material throughout this series, I thought we should leave the series in a spirit of learning, since you'll find yourself constantly learning more as you further develop your skills. Good luck moving forward!

July 26th, 2016

Hello friends,

So here they are, 30 more front end videos, I hope you like them. Only one more batch and the collection will be complete! In this batch we wrap up our coverage of Grunt - the tool we're using to automate the tedious tasks of minifying and concatenating JavaScript and CSS files - and begin to review our site for accessibility.

One of the videos I'm releasing as free is the "How web accessibility is a continuum," and this was an important lesson for me. Unless it's baked into your system and you are obligated to conform to accessibility standards by law, it's tough to justify the extra time to learn and implement full-on accessibility. But, the guilt of not implementing accessibility doesn't need to be paralyzing. Even many the most accessible sites could use some improvements. Being aware that it's not an all or nothing thing helped me feel more confident about acting on what I knew and slowly increasing my knowledge.

Hope all of you learners out there having a great summer, or winter depending on your hemisphere. If you look out your window and see some snow, consider sending me a shovelful or two.

Enjoy!

Why to move custom JavaScript to a separate file, and why JavaScript file load order matters New!

Why to move custom JavaScript to a separate file, and why JavaScript file load order matters

As a convenience, we've been adding our JavaScript configuration to the head of our HTML file, but if multiple files are going to share the JavaScript it will need to end up in its own file eventually. So here we move our custom JavaScript to a file.

Wrapping up the configuration of our JavaScript concatenation and generating a concatenated file New!

Wrapping up the configuration of our JavaScript concatenation and generating a concatenated file

In this video we move over the rest of our JavaScript file paths and generate our concatenated file. Nice!

Setting up the Grunt configuration to concatenate our CSS files New!

Setting up the Grunt configuration to concatenate our CSS files

In the last videos we set up our Grunt concatenation configuration to pull multiple JavaScript files into a single file, and here we do the same with our CSS files.

Reviewing the performance effect of concatenating our JavaScript and CSS New! (This one's FREE!)

Reviewing the performance effect of concatenating our JavaScript and CSS

In this video we talk a look at how many files we no longer have to load due to concatenating them into a single CSS and JavaScript file. Yea!

How minifying CSS works New!

How minifying CSS works

Minifying JavaScript is an intense task where function and variable names get swapped out, but CSS is a little simpler. Here we explain what we can take out of CSS to get the file size more compact.

How to minifiy JavaScript with Grunt and Uglify New!

How to minifiy JavaScript with Grunt and Uglify

Uglify is a commonly used library for minifying JavaScript, and there's a nice Grunt plugin that lets us use it in our automation. Here we install the grunt-contrib-uglify plugin, configure it, and then give it a spin.

How to minify CSS with Grunt and the grunt-contrib-cssmin plugin New!

How to minify CSS with Grunt and the grunt-contrib-cssmin plugin

We need a separate plugin for minifying CSS, so here we download the grunt-contrib-css min Grunt plugin and get our CSS file size down by half.

Reviewing our performance gains from concatenating and minifying both JavaScript and CSS New!

Reviewing our performance gains from concatenating and minifying both JavaScript and CSS

After both concatenating and minifying our code, we've made a lot of improvement when it comes to performance. Here we summarize our gains.

How to use grunt-injector to add JavaScript and CSS file references in your template on demand New!

How to use grunt-injector to add JavaScript and CSS file references in your template on demand

Now, it's great that we can concatenate and minify our JavaScript and CSS, but most of the time we won't want to actually use the compressed versions of our files. What we need is an easy way to switch between using the original versions and the concatenated versions. Luckily, there's a nice Grunt plugin called grunt-injector that will let us swap out which CSS and JavaScript files are included in our templates. In this video we install grunt-injector, configure it and see it in action.

How to add a second configuration to a Grunt plugin New!

How to add a second configuration to a Grunt plugin

So far we've only needed one set of configuration for each Grunt plugin, but we need to be able to run two different configurations for grunt-injector now, one for development and the other for production. Here we set up a second configuration, something we can do for any of our plugins.

How to add separate dev and production tasks in our Gruntfile.js New!

How to add separate dev and production tasks in our Gruntfile.js

Being able to swap out which Grunt plugin configurations we use by simply editing a single key in our Grunt task is great, but we can improve this further by adding a second Grunt task so we can run either task on the command line at any time. Super cool.

How to fix our concatenated CSS by removing our concatenation separator setting New!

How to fix our concatenated CSS by removing our concatenation separator setting

After getting our concatenation and minification automation squared away, we cross our fingers and hop to the browser to see if everything is solid. Oops! Looks like we've got a bit of an issue with our custom fonts not being pulled in. In this video we track down the issue to a setting in our Grunt concatenation settings where a semi-colon is being added between files, breaking a rather critical line of CSS code where we pull in our font.

Comparing the performance of our optimized site with our pre-optimized version New! (This one's FREE!)

Comparing the performance of our optimized site with our pre-optimized version

Finally, we get to the fun part where we see the results of all our hard work manifest. At first, we notice that even though we've dramatically reduced the number of files download and the overall size of our site, the optimized version of the site appears to actually load slower than our original version. In this video we get to the bottom of this strange behavior and demonstrate how in less optimal conditions, our optimized site performs way better across a number of different metrics.

How and why to make our paths relative by configuring the grunt-injector plugin New!

How and why to make our paths relative by configuring the grunt-injector plugin

So far we haven't really needed to worry about absolute paths in our CSS and JavaScript files, but if we want to put a site in a sub-folder, we need to use relative paths. Here we demonstrate how to alter our configuration a bit in grunt-injector to get what we want.

Why browser prefixing CSS manually or with Compass is problematic New!

Why browser prefixing CSS manually or with Compass is problematic

We've discussed adding browser prefixes for our CSS multiple times throughout the coding of our template, and have explained why adding the prefixes manually can be error-prone. Here we also explain why were bypassing Compass' built-in functions for creating prefixed CSS rules, and how post-processing our CSS to add prefixes is a much better approach.

How to use the Grunt Autoprefixer plugin to add and update browser prefixes in our CSS New!

How to use the Grunt Autoprefixer plugin to add and update browser prefixes in our CSS

Here we install the grunt-autoprefixer plugin and explain how it queries the "caniuse.com" database to decide which browser prefixes to add to our CSS, and which ones to remove.

How to configure grunt-autoprefixer, and comparing our CSS before and after prefixing New!

How to configure grunt-autoprefixer, and comparing our CSS before and after prefixing

In this video, we dig a bit deeper into the Autoprefixer settings to see how we can support specific browsers or browser groupings, and we compare our CSS before and after prefixing.

Switching back to development mode by running Grunt New!

Switching back to development mode by running Grunt

Here we get ready for our next steps by switching from using the concatenated, minified versions of our files to the development-friendly versions.

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

How to resume from this point (part 1, step 45)

If you'd like to hop into this series but don't want to start from the beginning, you can watch this to get your environment set up and ready to start the next videos.

What "accessibility" means in terms of the web New! (This one's FREE!)

What "accessibility" means in terms of the web

The term "accessibility" generally means to make a resource available to everyone, not just those in the majority. When it comes to the web, this usually means making a site accessible to those along a continuum of physical ability. Here we talk briefly about with accessibility means and what it implies for developers of web sites.

Section 508 versus WCAG and how to justify spending resources on accessibility New! (This one's FREE!)

Section 508 versus WCAG and how to justify spending resources on accessibility

In this video we briefly talk about the two standards for web accessibility that you're likely to run into as a front end developer and lay out some arguments for building accessibility into a budget for a project.

How to use the WCAG Quick Reference to improve your understanding of accessibility New!

How to use the WCAG Quick Reference to improve your understanding of accessibility

Here we use the handy WCAG (Web Content Accessibility Guidelines) Quick Reference checklist as a jumping off point for testing how accessible our site is, and mention that it's a good idea to read through this list to get a sense of common accessibility issues and solutions.

How web accessibility is a continuum New! (This one's FREE!)

How web accessibility is a continuum

Making a site accessible isn't an on / off thing. Instead, each site lands somewhere on the continuum between absolutely not accessible and very accessible. As we improve our awareness of accessibility, we improve our chances of making our sites more accessible during the building process, even without spending any additional time.

How to test support of keyboard navigation on your site New!

How to test support of keyboard navigation on your site

Making a site compatible with keyboard navigation means that we're not assuming the user has access to a mouse. Here we start the process of testing our site for navigability with a keyboard and find it lacking in a couple respects.

How to make custom radio buttons accessible with the keyboard New!

How to make custom radio buttons accessible with the keyboard

As we used the "tab" key to jump between different inputs in our template, we noticed that we were unable to focus on the radio buttons since they were hidden with CSS. Here we demonstrate another way we can hide our default radio buttons but still make them accessible.

How to allow users to skip to the main content of a page with the keyboard New!

How to allow users to skip to the main content of a page with the keyboard

Most web site headers include a barrage of links that are easy to scroll by, but time consuming to tab through on the keyboard. Here we demonstrate a solution where we add a "skip to content" link that is hidden by default but displays as soon as the user beings leveraging the keyboard for navigation.

How to use Chrome's Accessibility Developer Tools to audit a site for accessibility New!

How to use Chrome's Accessibility Developer Tools to audit a site for accessibility

Even though it's a great idea to get a handle on the various accessibility pitfalls and solutions and apply them to your templating process as you go, it's also nice to be able to run an audit on your template to get a sense of where your missed opportunities are. Here we demonstrate one, a Chrome Add-on called "Accessibility Developer Tools," and start the process of adjusting our site to make it more accessible.

Adding labels to our search form for accessibility and hiding them New!

Adding labels to our search form for accessibility and hiding them

One big red warning from our accessibility audit was that many of our form inputs were missing labels. That's fine for those that can view the site since there are enough visual queues to give the user a sense of what to do with those inputs, but screen readers are going to have a much harder time. Here we add some labels to our search form but hide them for those who are using visual browsers.

Adding labels to our contact form and hiding them with a SMACSS state New!

Adding labels to our contact form and hiding them with a SMACSS state

As we continue adjusting our site to fix accessibility issues, we add some labels to our contact form but have to use a different approach to hiding the labels than we did with our contact form, since we only want to hide specific labels. We discuss some options but end up using a SMACSS state, something we haven't pulled out of our toolbox for a while.

Adding an "alt" attribute to our logo New!

Adding an "alt" attribute to our logo

How did we miss adding some alternative text to our logo?! This kind of thing happens all the time, and checks like the one were doing are an excellent way to patch up accessibility issues that slip through the cracks.

July 8th, 2016

Hey, it's Friday!

There's no reason you should have noticed, but usually I do this newsletter thing on Tuesdays. But it's Thursday night and a viewer just wrote a really polite email asking when more videos in the Front End Development collection were coming out. Would you believe that I've just been sitting here for the last few weeks with my palm hovering over a giant green "publish" button, just waiting for the right catalyst? Well, I wanted you all to know how much your voice matters. Thank you, polite writer. The publish button has been pushed with a vengeance.

This week we cover a lot of ground, using several of Chrome's DevTools features. An FED "ah-ha!" moment for many of us is when we realize that file size can be much less important than file quantity. In these videos we explain why that is and how we can measure the effect of downloading a plethora of files instead of mashing them all together in a single lump of a file.

Speaking of mashing files together (i.e. concatenating and minifying), it's not as much fun as it sounds. So, we begin the process of exploring automating boring, error-prone tasks with a tool called Grunt. This is good, good stuff. Freeing you all from all manner of tedium is part of my unwritten mission statement, and it's nice to cover a tool that is so good at that.

Enjoy, my friends!

 

PS: Hey, I know this email contains a load of screenshots and a fair bit of scrolling. If any of your email clients have a problem with the length of this newsletter, please give me a heads up.

Reviewing our template in Chrome for Windows New!

Reviewing our template in Chrome for Windows

After having reviewed our template in a couple of Mac browsers, we head over to Windows to give a couple browsers there a try, starting with Chrome.

Reviewing our template in Firefox for Windows New!

Reviewing our template in Firefox for Windows

Following up on Chrome, we test our template in Firefox for Windows.

Overview of strategies for testing a site on multiple versions of Internet Explorer New!

Overview of strategies for testing a site on multiple versions of Internet Explorer

Internet Explorer has long been the bane of many a front end developer. One challenge with IE is that there's not a reliable way to test multiple versions of it on a single machine, and sometimes using even a virtual machine can cause Internet Explorer to act differently than it would on a native installation. Here we talk briefly about a couple of strategies for testing multiple versions of IE.

Reviewing our template in Internet Explorer New!

Reviewing our template in Internet Explorer

Internet Explorer is still a popular browser, so it's important that our site be beautiful and functional in it. Here we give our template a spin in Internet Explorer 9.

How cross-browser reviews typically work with completed sites New!

 How cross-browser reviews typically work with completed sites

Over the last several videos we've done a quick review of our template across multiple browsers, but this kind of review is only part of what goes on once you have a full functioning site in place. Here we point out how that kind of review might be different.

What we've covered in terms of front end performance, and what we'll cover now New! (This one's FREE!)

What we've covered in terms of front end performance, and what we'll cover now

We've addressed front end performance a bit throughout this series, specifically when it comes to CSS. For the next several videos we're going to look at the other aspects of front end performance, including how to increase loading speed by reducing download sizes and the number of files we need for our site.

How to open the network dialog in DevTools and disable local caching New! (This one's FREE!)

How to open the network dialog in DevTools and disable local caching

The Chrome browser's DevTools "Network" dialog is a critical tool for identifying performance bottlenecks. In this video we demonstrate how to open it and how to disable local caching so that each time we load our page, it downloads fresh assets from the server. This way we can accurately reproduce what a visitor will experience the first time they visit our site.

Why front end performance (i.e. speed) is important New! (This one's FREE!)

Why front end performance (i.e. speed) is important

In many projects you can get by without thinking too hard about front end performance. However, the research that's out there indicates that a second extra loading time can mean the difference between a sale and an unhappy visitor. Here we summarize some of research to give us a sense of why focusing on speed is important.

How to view the number of downloaded files and their sizes in the Chrome DevTools network tab New!

How to view the number of downloaded files and their sizes in the Chrome DevTools network tab

In this video we review some of the basic information that the network tab gives us, including the number of downloaded files and the size of each one.

Why the site loading speed on your machine might not reflect an average experience New!

Why the site loading speed on your machine might not reflect an average experience

Chances are that if you're watching these videos, you're a developer or aspiring developer, and you have a speedy computer to reflect your focus. If you are in a country with high-bandwidth internet, you might also have an above-average experience when it comes to using the web. Here we explain how we can't depend solely on our own experiences testing our web sites, but instead need to understand how other experiences can vary across the world.

How download size is often not the biggest factor in site loading speed New! (This one's FREE!)

How download size is often not the biggest factor in site loading speed

Reducing the file sizes on your site's assets are sure to improve the loading speed of your site, right? Probably, but there are other factors that come into play that have a much greater impact on load time. Here we summarize what those are.

How the "DNS Lookup" bar works in the DevTools network tab New!

How the "DNS Lookup" bar works in the DevTools network tab

As we review the steps that went into downloading our index.html file, we walk through each step and explain what's happening. In this video we start with the "DNS Lookup" bar, which is the time it took to figure out the IP address attached to the domain of the site.

How the "Initial connection" bar works in the DevTools network tab New!

How the "Initial connection" bar works in the DevTools network tab

Once the browser knows the IP address of a site, it sends a request to the site to see if it's okay to start downloading files from it. Here we break down the parts of this request.

What "Round Trip Time" (RTT) and "handshake" mean in the context of downloading files New!

What "Round Trip Time" (RTT) and "handshake" mean in the context of downloading files

A couple of our steps outlined in the "Network" DevTools tab involve a request sent to the server followed by a message back. Here we explain how the terms "RTT" and "handshake" might be used to reference this exchange.

How the "Request sent" and "Waiting (TTFB)" - Time To First Byte - bars work in DevTools New!

How the "Request sent" and "Waiting (TTFB)" - Time To First Byte - bars work in DevTools

In this video we continue our walkthrough of the steps required to download a file. After a request is sent to the server and we get the OK to download, the browser sends another request or a specific file and waits for the file to come back.

What we can and can't do to optimize the loading time of our index.html file New!

What we can and can't do to optimize the loading time of our index.html file

It would be great if we had complete control over loading time for our assets, but there's a lot that's out of our hands. Here we review the different steps involved with the download and what we can and can't do to improve the speed.

How to sort files in the DevTools network tab to reflect actual download order New!

How to sort files in the DevTools network tab to reflect actual download order

By default, Chrome DevTools orders files in the Network tab a particular way, but that doesn't necessarily reflect the actual download order. Here we fix that so it's easier to review what actually happened during the download of our site.

Reviewing the loading time for our jquery.js file New!

Reviewing the loading time for our jquery.js file

We've gone through the step-by-step process of how a file is downloaded with our index.html file, and now we continue evaluating performance by looking at the next file that downloaded.

How the browser opens multiple connections to download files in tandem and sequentially New!

How the browser opens multiple connections to download files in tandem and sequentially

A web site is usually comprised of a number of files, and the browser will download several of these files at once to optimize the use of bandwidth and reduce the number of request that have to be sent to the server in sequence. Here we explain how this works and how to read the sequence of files in the Network tab of DevTools.

Summary of where load time comes from for downloaded files New!

Summary of where load time comes from for downloaded files

We just covered a lot of material around performance, and here we summarize how to read the file loading graphs in the Network tab.

How we can reduce the size and number of files through minification and concatenation New!

How we can reduce the size and number of files through minification and concatenation

Here we foreshadow some steps we will take to improve the performance of our site, briefly covering the ideas of minification to reduce the file size of our JavaScript and CSS, as well as concatenation to reduce the number of files we need to download.

What the DOM is and what "DOMContentLoaded" time means New!

What the DOM is and what "DOMContentLoaded" time means

We talked about the DOM a bit earlier in this series, but here we discuss it in a different context. The DOM - which is a mirrored structure of our HTML that JavaScript uses - has to load before our JavaScript can run. The Network tab in DevTools gives us some important information about the loading of the DOM and here we point out where we can find that info.

What an empty bar might mean in the Chrome DevTools network tab New!

What an empty bar might mean in the Chrome DevTools network tab

There's one last mystery as we review what the steps are for each of our files to load, which is a clear bar in the loading graph for one of our images. Here we take our best stab at explaining what this bar is likely for since we were unable to turn up any documentation at the recording of this video.

How and why to research internet speeds in other parts of the world New!

How and why to research internet speeds in other parts of the world

Internet is surprisingly different across the globe. If you're targeting a specific region or building an international site, it's important to be able to look up what to expect so you can mimic various bandwidth scenarios with your template.

How to determine Round Trip Time (RTT) to a site from other parts of the world New!

How to determine Round Trip Time (RTT) to a site from other parts of the world

There are some nice tools out there for pinging a site (which just means making a round trip to a site) from various locations around the world at one time. Doing this can be a great reality check when it comes to determining how a site loads worldwide.

Why we're going to concatenate and minify our files, and why we'll use automation to do it New! (This one's FREE!)

Why we're going to concatenate and minify our files, and why we'll use automation to do it

We've alluded to how we're planning on concatenating and minifying files before, but here we summarize the reasons to do it and begin the process of figuring out the best tools for the job.

How to concatenate multiple JavaScript files manually and why it's a bad idea New!

How to concatenate multiple JavaScript files manually and why it's a bad idea

Before we use an automation tool to concatenate our CSS and JavaScript files, it's valuable to understand just what we're getting out of the deal. Here we go through the process of concatenating just a couple files and discussing the implications of maintaining our concatenated file over the lifetime of our project.

How to minifiy code by hand, what minification does and why it's tough to debug New!

How to minifiy code by hand, what minification does and why it's tough to debug

Now that we have a concatenated file, we can run it through a minification process to compress the file size down. In this video we explain what minification does in a bit more depth than we have previously, and demonstrate how to do it manually.

Why we would swap out concatenated, minified code for separate files while testing New!

Why we would swap out concatenated, minified code for separate files while testing

One more thing that we'll want to do that's tough to accomplish manually is swapping out our un-minified files for the concatenated, minified versions every time we want to push our project to production. Here we discuss why this is important, and how automation could really come to the rescue.

How automation can save time, reduce error and get a team on the same page New! (This one's FREE!)

How automation can save time, reduce error and get a team on the same page

Now that we've seen how painful it is to minify and concatenate our code by hand, we're in a great position to appreciate what automation can offer us. Here we summarize a couple of the major benefits of learning an automation tool like Grunt or Gulp.

Why we're using the Grunt automation tool for this project New!

Why we're using the Grunt automation tool for this project

There are several front end automation tools available, the most popular being Grunt and Gulp. For our project, we're going to use Grunt because at the time of this recording, it's still the most popular tool with the most extensions available. In the future, you'll be able to use many of the same techniques for other automation tools as well, as they become more widely supported.

How to install Grunt New! (This one's FREE!)

How to install Grunt

Here we install the Grunt automation tool so we can begin using it. Yea!

How to install a project-specific version of Grunt New!

How to install a project-specific version of Grunt

In the last video we installed a global instance of Grunt so we could use it anywhere in our file system, but here we install a specific version for this project only, making it easier for other teammates to install the correct Grunt version as well.

How to install a Grunt extension for concatenating files New!

How to install a Grunt extension for concatenating files

In this video we install our first Grunt extension, this one being the go-to extension for concatenating files.

How the different parts of a Gruntfile.js file work New!

How the different parts of a Gruntfile.js file work

The Gruntfile.js file might look a little scary at first if you've never worked with JavaScript, but once we break it down you'll see that it's really pretty simple. Here we walk through the parts and identify where our various configuration pieces will end up.

How to configure grunt-contrib-concat in our Gruntfile.js New!

How to configure grunt-contrib-concat in our Gruntfile.js

Now that we understand the structure of a Gruntfile.js, we move on to explore how to configure the "grunt-contrib-concat" extension specifically to bring our JavaScript and CSS files together.

How to run the default Grunt configuration on the command line New!

How to run the default Grunt configuration on the command line

In this video we test out some basic configuration by running the default Grunt task on the command line. Simple, but powerful!

How to create Grunt task variations and run specific ones when our task runs New!

How to create Grunt task variations and run specific ones when our task runs

Because Grunt tasks are tied to extensions, we often need to create configuration variations to be able to use the same extension in multiple contexts. Here we demonstrate how these variations work and how to trigger them when our tasks run.

Adding our JavaScript files to our Grunt concatenation configuration New!

Adding our JavaScript files to our Grunt concatenation configuration

Here we move a number of file paths over from our index.html file to our Grunt configuration.

The advantages of putting JavaScript at the end of the body tag instead of the beginning New!

The advantages of putting JavaScript at the end of the body tag instead of the beginning

Throughout this series, we've been adding our JavaScript files to the top of our index.html file for the most part. In this video we explain why it's a better overall strategy to put JavaScript at the end of the HTML instead of the beginning.

June 14th, 2016

Yo peeps!

Happy summer to you. If you have kids in your life - at least in the States - then summer is a magical time where schedules potentially become less complicated and school-age kids have several weeks to discover what they miss about school. If you have young ones, (like I do) consider the opportunity at hand and how few summers might have left to share with them.

For those of you sans-kids, then please enjoy this season as you would any other (you and all your free time!).

This week I'm rolling out another batch of Front End Development videos. We cover some fun CSS stuff, like how z-index layering works, how to to create a beautiful curved drop shadow under any element, and when it makes sense to use a max-width breakpoint instead of min-width.

Enjoy!

Making the menu in our header bottom responsive New!

Making the menu in our header bottom responsive

In this video we begin the process of making our header bottom responsive, starting with the header menu.

How to simulate mobile and desktop devices with Chrome DevTools New! (This one's FREE!)

How to simulate mobile and desktop devices with Chrome DevTools

Browser developer tools have many useful and awe-inspiring features, and the device simulator in Chrome's DevTools is one of those. Here we begin a short walk-through of the simulator's features, starting with how to simulate specific devices like iPhones or Android phones. This is pretty cool stuff, and it gets even better in the following videos.

How to use the "viewport" meta tag to tell the browser a site supports mobile devices New! (This one's FREE!)

How to use the "viewport" meta tag to tell the browser a site supports mobile devices

By default, a mobile browser assumes that a website was built for larger screens, and it zooms out to fit the whole site. However, with the "viewport" tag, we can tell mobile browser that we support whatever size they are, making our site usable without zooming or horizontal scrolling.

How to test a site at different download speeds with Chrome DevTools New!

How to test a site at different download speeds with Chrome DevTools

We haven't gotten to the performance section of this video series yet, but since we're looking at the device simulator's interface, it makes sense to point out a feature where we can adjust the simulated internet speed so we can test how our site might work on slower connections.

How to see how media queries affect a site with the Chrome device simulator New!

How to see how media queries affect a site with the Chrome device simulator

In the last videos we saw how we can use Chrome's DevTools to simulate various devices, and here we demonstrate one additional feature, which is seeing which breakpoints are coming into play with particular viewport sizes. This is really nice if your CSS style changes are subtle and hard to pinpoint.

Styling our header bottom to be responsive New!

Styling our header bottom to be responsive

In this video we put some of what we talked about earlier into action and add the breakpoints needed to get our header bottom looking solid at any browser width.

When it makes sense to use "max-width" and converting header breakpoints to "min-width" New!

When it makes sense to use "max-width" and converting header breakpoints to "min-width"

Even though we've explained the benefits of coding our CSS mobile-first, meaning adding breakpoints with "min-width" instead of "max-width", there are still situations where using "max-width" makes sense. Here we explain one such scenario.

Adjusting our slideshow CSS for smaller viewports New!

Adjusting our slideshow CSS for smaller viewports

The slideshow at the top of our page is the last component we have left to adjust for smaller browser windows, and after having cut our teeth on the previous components, the task is pretty easy.

Converting our slideshow breakpoints to "min-width" New!

Converting our slideshow breakpoints to "min-width"

Just like we've done as we've added breakpoints for other sections of our layout, we're starting with "max-width" breakpoints, and then converting them to "min-width." Here we do the same thing for our slideshow CSS.

Evening out the vertical padding in our slideshow New!

Evening out the vertical padding in our slideshow

A designer's eye might have caught a bit of uneven padding in our slideshow. Here we fix that so you don't have to worry.

Reviewing our template at different browser sizes for possible touch-ups New!

Reviewing our template at different browser sizes for possible touch-ups

Our template is looking really good, and we're at a point where we can give the template as a whole a final look-through to find any stray styling that we might have missed. We test out a few different viewport sizes and find a bit of margin to adjust, but almost everything else looks great.

How the "z-index" property works and how layers are positioned by default New! (This one's FREE!)

How the "z-index" property works and how layers are positioned by default

Throughout this templating process, you may have become aware that there are layers to content. Each element is kind of its own layer, and later layers will overlay earlier layers. However, we can override the default layering of content with the "z-index" property, and we demonstrate how this works here.

Why z-index poses issues as templates get more complex, and how to solve those issues New!

Why z-index poses issues as templates get more complex, and how to solve those issues

The "z-index" CSS property is super useful, but in complex templates with modals and overlays, you may find that the z-index number you're using gets out of hand, and maybe even starts to exceed the browser's ability to support it. In cases like this, it makes sense to create distinct z-index layers, which is a lot easier through SASS variables.

How to test if z-index will solve a layer ordering issue New!

How to test if z-index will solve a layer ordering issue

We started talking about the "z-index" property as a potential way to solve a problem we were seeing with our selectize input. Here, we see if z-index will work by using a really high number.

Fixing the layering issue with our selectize dropdown New!

Fixing the layering issue with our selectize dropdown

After discovering that the "z-index" property wasn't going to help us with our selectize dropdown menu, we look for other answers and turn up a property that will give us what we need to fix the layering issue.

Talking through how to create a rounded drop-shadow under a rectangular element New!

Talking through how to create a rounded drop-shadow under a rectangular element

In this video we talk through the approach we're going to take to adding a rounded drop shadow to our slideshow. If you've never seen this before, it's a pretty slick technique.

How to add a curved drop shadow to an element with CSS New!

How to add a curved drop shadow to an element with CSS

In the previous video we explained our strategy for creating a rounded drop shadow, and here we go through the process of implementing it in the browser. And boy is it pretty!

Moving our curved drop shadow CSS to SASS to make the changes permanent New!

Moving our curved drop shadow CSS to SASS to make the changes permanent

Now that we have a functional rounded drop shadow working in our browser, we take a moment to make the styles permanent by porting the styles to our SASS.

Basic approaches to testing a template in multiple browsers New! (This one's FREE!)

Basic approaches to testing a template in multiple browsers

Congratulations! We've completed the layout of our template, and that's something to celebrate for sure. However, we haven't looked at our site in other browsers for a while, so after we party for a moment, we come back to reality and start the process of opening and reviewing our template in multiple browsers to see if anything is off.

Reviewing our template in the Firefox browser for Mac New!

Reviewing our template in the Firefox browser for Mac

Since we're recording this on a Mac, we tackle checking our site template in Mac Firefox first.

May 31st, 2016

Happy Tuesday!

I hope you stateside viewers had a thoughtful and relaxing Memorial Day. For the rest of you, I hope your week started out solid.

This week heralds another batch of Front End Development videos. Some of you are like 'come on, MORE FED videos?! When is this collection going to be done?! I want some D8!' I understand. We're getting there. This series is going to set a solid foundation to refer to when we get to D8 theming, I promise.

This week we tighten up our slideshow controls, embark on our header and begin ordering our content in the way we see it in the mockups. Fun stuff!

Have an excellent rest of the week, friends!

Fixing horizontal scrolling issue created by our "snippet" carousel New!

Fixing horizontal scrolling issue created by our "snippet" carousel

As we make our browser window smaller, we see that the snippet carousel is also causing a little bit of horizontal scrolling. In this video we explore possible solutions to the problem.

Adjusting our carousel to stretch across smaller browser windows New!

Adjusting our carousel to stretch across smaller browser windows

Here we apply a breakpoint to our carousel to have it stretch across the entire browser window whenever the browser gets small enough. This results in some strange behavior with our next and previous buttons, so we'll end up hiding them in an upcoming video.

Converting our carousel's "max-width" breakpoints to "min-width" New!

Converting our carousel's "max-width" breakpoints to "min-width"

As we've done before, we started by coding our CSS with a desktop in mind, but here we convert the CSS to a "mobile-first" approach by swapping our "max-width" media queries with "min-width."

How to hide Flexslider navigation in smaller browser windows New! (This one's FREE!)

How to hide Flexslider navigation in smaller browser windows

Here we hide the Flexslider previous and next navigation on smaller browser windows where the icons become more of an eyesore and less useful.

Adjusting the styles of our alt hero section title to be responsive New!

Adjusting the styles of our alt hero section title to be responsive

Our carousel slideshow is looking pretty good, but we notice an issue in the title of the hero section that contains it that we tackle before moving on.

Adjusting the contact form CSS to be responsive New! (This one's FREE!)

Adjusting the contact form CSS to be responsive

In this video we move onto our contact form and see that with a simple adjustment in a single breakpoint, we can make the entire form responsive.

How to use the CSS "whitespace" property to prevent text from wrapping to another line New! (This one's FREE!)

How to use the CSS "whitespace" property to prevent text from wrapping to another line

When we added a breakpoint to the contact form, we noticed that the labels on our radio buttons could look a bit wonky if they get split into multiple lines. Here we correct that by using the "whitespace" CSS property and setting it to "nowrap," a nice tool to have in your CSS tool belt.

Re-ordering the content in our template to match the mockup New!

Re-ordering the content in our template to match the mockup

Throughout this series, we've been able to focus on each of the components of our site independently, meaning it didn't matter where exactly it appeared in our template. We're getting to the point now, however, where we're finalizing our overall layout and getting the full site matching the mockup. So, we spend a couple minutes reordering the content on our site to set us up for touching up our styles.

Discussion of how we plan to adjust the header for different viewport sizes New!

Discussion of how we plan to adjust the header for different viewport sizes

In this video we think about how the overall header should behave as the viewport gets smaller.

Adding the HTML and CSS scaffolding for our top header section New!

Adding the HTML and CSS scaffolding for our top header section

Before we can add meaningful CSS, we need some HTML scaffolding and some CSS classes to pin our styles on. Here we build those out and get ready to add some styles.

Positioning our top header elements in the browser New!

Positioning our top header elements in the browser

Now that we have our header scaffolding, we're ready to start positioning the logo, search nav and account icon.

Moving our top header CSS from the browser into our stylesheets New!

Moving our top header CSS from the browser into our stylesheets

After adjusting our header top CSS in the browser, we bring the styles into our SASS stylesheets to make them permanent.

How we want our top header to behave as the browser gets smaller New!

How we want our top header to behave as the browser gets smaller

Here we look at how we want the various elements in the header top to react to changes in the viewport size.

Adjusting our header bottom to stretch across the entire browser and center its content New!

Adjusting our header bottom to stretch across the entire browser and center its content

In this video we modify the styles of our header bottom to stretch across the browser, and along the way we adjust the styling of our overall header to accommodate this.

Aligning the elements in the header bottom and adding a border New!

Aligning the elements in the header bottom and adding a border

Here we adjust the positioning of the elements in the header bottom and add a nice, clean border to the top to separate it from the top heading.

Removing extra padding from the header bottom section New!

Removing extra padding from the header bottom section

Earlier we foreshadowed the possible need to remove some padding in our header bottom, and lo and behold, it has come to pass!

Adding responsiveness to our top header by adjusting CSS in the browser New!

Adding responsiveness to our top header by adjusting CSS in the browser

Our top header functions fairly well already as we reduce the size of the browser, but visually it could use some touching up. Here we adjust the CSS of the header in the browser until we get something that looks good.

Moving our responsive header CSS from the browser to our SASS files New!

Moving our responsive header CSS from the browser to our SASS files

Having gotten a set of CSS modifications that make our header look a bit better on smaller browser windows, we commit those changes over to our SASS.

Adding a breakpoint to stretch the logo the full browser width on small screens New!

Adding a breakpoint to stretch the logo the full browser width on small screens

One final thing to do in the header top is get the logo to fit the screen when we bump the browser down below the last breakpoint we set. In this video we do just that.

Why it's important to add extra padding for touch screens New! (This one's FREE!)

Why it's important to add extra padding for touch screens

With touch screens, it's easy to accidentally tap the wrong button or input if they're positioned to close to one another. Here we take a couple of seconds to point out that we can add some padding to items to help alleviate that issue.

May 17th, 2016

Hello friends!

Last week was the US-based DrupalCon, and I hope that those of you who went had a great time. New Orleans is a fascinating city, and one of my favorite places in the world.

I had a lot of really interesting conversations throughout the week, with a couple common refrains. First, was the need for in-depth Drupal 8 training, and a particular desire for the BuildAModule style of learning. Okay, guys, I'm on it. You gave me a good idea of what the most pressing needs are and I am already working on meeting those.

Second was the disappointment from many government, education and large company customers that Acquia was going to stop bundling BuildAModule with their network memberships next month. "What?" many of you will say. "That was a thing?" Indeed it was, and Acquia's willingness to include BuildAModule meant that many institutions with a drawn out, painful purchasing process had direct access to BuildAModule's training with minimal logistics.

I don't know the full strategy behind Acquia's decision to stop including third party video training with their subscription service, but you have to admit that it makes sense. Acquia has had a mature line of services for a while now, and being able to integrate these services with self-delivered training has the potential to be a big win. Seeing as I work hard to remain vendor-neutral, there's not much I could have done to help with that.

Acquia also recently released a free video training program called Acquia Academy. If any single company has the resources to pull off thorough, free Drupal video training, it's Acquia. From a purely marketing perspective, I don't think it would make much sense for them to also include paid video training unless it was an up-sell from the Academy.

For the record, Acquia did a great job of managing the transition of dropping BuildAModule from their offering. They were gracious and thoughtful, and I have no complaints.

However, what this means is that if organizations that previously used BuildAModule through Acquia want to continue to use BuildAModule, they will have to establish a direct relationship with us. That means more logistics, but I would like to do everything I can to make that transition easier.

First of all, as many Acquia subscribers already know, I'm offering 4 months free to institutions making the transition to give some wiggle-room for purchasing cycles and paperwork. To claim this, just visit the move page and follow the instructions there.

For the second part, I need your help. At DrupalCon I learned that one government group was unable to purchase BuildAModule because we aren't on the right vendor lists. I've learned a lot about how universities and governments work over the years, but I still have some gaps. If you have any interest in getting BuildAModule for your team, please help me help you by telling me what you need from BuildAModule to make that happen.

I talked with several people who independently mentioned that there was a lot of positive energy at DrupalCon this year, more than in the last couple years. I had the same experience. DrupalCon is a place where people get to talk about what they actually think about Drupal and how it affects their lives. There's both hype and disillusionment, but there's also honest assessment and re-positioning of the role that Drupal has in the web technology ecosystem. People seem to feel freer to admit that Drupal has become only one tool in their tool belt, albeit an extremely useful one in for solving a a broad set of problems.

Hey, thanks for listening. I hope you have a great week, and I'll do my best to have the same.

Cheers!

PS: New videos down below! This week we're jostling grids of content around in a responsive way and throwing in a couple of Drupal 8 videos on translation (spoiler: it's a lot more fun in Drupal 8 than it was in 7).

Adjusting the margins within and around our icon box New!

Adjusting the margins within and around our icon box

Here we get the margins between the text elements in our icon box working, and then adjust the margin on the outside of the box to accommodate the re-positioned circle icon.

Aligning the icon boxes to the center and adding margin between them New!

Aligning the icon boxes to the center and adding margin between them

In this video we continue to refine the layout of our icon boxes by aligning them to the center of the browser and giving them a little space.

What we want our icon boxes to look like as the browser gets smaller New!

What we want our icon boxes to look like as the browser gets smaller

Here we spend a few seconds thinking about how we want our icon boxes to behave as the browser gets smaller.

How to figure out how the site's padding and overall layout should work from a mockup New!

How to figure out how the site's padding and overall layout should work from a mockup

A mockup is a frozen snapshot, and because of this there are a few things we have to figure out for ourselves, especially if we don't have a mockup of the site at smaller sizes. One is what we do at the edges of the browser window as the browser expands and contracts. Does the padding stay fixed while the content adjusts, or does the padding expand and contract? Here we look at our mockup, review our options, and pick a course of action.

Adding the overall layout CSS to our "qualities" section New!

Adding the overall layout CSS to our "qualities" section

Now that we know what we want to do with our layout, we build up the CSS in the browser until we get something functional.

Options for applying site layout styles to multiple elements New! (This one's FREE!)

Options for applying site layout styles to multiple elements

There are a few different ways we can apply the same layout styles to multiple elements, like we need to do with our stacked hero sections. Here we discuss how we can use a wrapper element, a class, or a SASS placeholder to get the job done.

Setting up a SASS placeholder for full-browser layout styling with breakpoints New!

 Setting up a SASS placeholder for full-browser layout styling with breakpoints

Having reviewed our options, we decide that using a SASS placeholder is best for applying our layout styles to whatever broad elements need them. In this video, we build up that placeholder style, add a breakpoint, and then apply it in our "qualities" section to give it a test run.

Adjusting spacing so all icon boxes fit, and figuring out where our icon box breakpoint should be New!

Adjusting spacing so all icon boxes fit, and figuring out where our icon box breakpoint should be

Here we adjust the margin between our icon-box items so that they fit on larger viewports, and then we work out the details of where the breakpoint should be when we want the 4-across grid to bump down to 2-across.

Adding a breakpoint to our "qualities" section to go from 4 boxes across to 2 New!

Adding a breakpoint to our "qualities" section to go from 4 boxes across to 2

Now that we know the width of our breakpoint, we just need to figure out where it goes. Here we add the breakpoint to our SASS.

Fixing the margin between the "qualities" title and the icon boxes New!

Fixing the margin between the "qualities" title and the icon boxes

As we've worked through our styling of the "qualities" section, something happened to throw our margins off. No problem, this kind of thing happens all the time when you're working with CSS. In this video we fix the issue and move on.

How the "max-width" CSS property works New! (This one's FREE!)

How the "max-width" CSS property works

We've seen the "max-width" and "min-width" properties in our breakpoints, but there's also a CSS property we can use that almost functions as a media query shorthand. Here we demonstrate how we can use the "max-width" CSS property to respond to changes in the viewport without adding any additional breakpoints.

Adjusting our icon box margin one last time New!

Adjusting our icon box margin one last time

Are you kidding? More margin woes? Again, we adjust the margin for our icon boxes and get it squared away once and for all.

How you can use these layout strategies for any grid of elements New!

How you can use these layout strategies for any grid of elements

The techniques we just used to lay out multiple elements in a flexible grid can be used for other situations where you need to adjust the number of items displaying horizontally. Here we just take a minute to let you know.

How to adjust a Flexslider carousel to work at different breakpoints New!

How to adjust a Flexslider carousel to work at different breakpoints

In this video we move on to adjust our carousel slideshow that displays our article snippets so that it functions well in smaller browser windows. We adjust the CSS and demonstrate how we can sometimes get what we need by hiding superfluous content with "display:none."

Making our responsive carousel CSS permanent New!

Making our responsive carousel CSS permanent

In the last video we worked through the CSS changes we needed to get our Flexslider carousel to adapt to smaller screens, and here we start to move those styles over to our SASS files.

Adding a breakpoint to change the position of our carousel navigation on small screens New!

Adding a breakpoint to change the position of our carousel navigation on small screens

Here we work on adapting our carousel snippet content to even smaller screens by repositioning the navigation back over the content.

How to generate CSS source maps in Compass, and reconnecting the source files in Chrome New!

How to generate CSS source maps in Compass, and reconnecting the source files in Chrome

Earlier in this series, we used Chrome to edit our SASS files directly, but that ability broke when we started using Compass to generate our CSS. In this video we configure our Compass project to generate CSS source maps, and reconnect our browser files back to the source so we can edit them directly in the browser.

Adding a breakpoint to hide superfluous snippet content on smaller screens New!

Adding a breakpoint to hide superfluous snippet content on smaller screens

On the smallest screens our carousel slideshow content is still a little too big. Here we add another breakpoint to hide some of the content that's not absolutely necessary so our slideshow fits.

How to fix unexplained white space that forces horizontal scrolling New!

How to fix unexplained white space that forces horizontal scrolling

As we scroll down our site, you may notice that somewhere along the lines we ended up with some strange whitespace hidden to the side. If you do a flick-scroll, like you might on a mobile browser, it results in unnecessary horizontal scrolling. Here we get to the bottom of where this extra space is coming from and get it fixed.

How to remove the white border around the Flexslider slideshow New!

How to remove the white border around the Flexslider slideshow

Once we get the horizontal scrolling issue pinned to the adjustments we made to the Flexslider styles and fix it, we now have a small margin around the slideshow. Here we dig in, figure out that it's a white border posing as margin, and we extract it.

How to import a language and translate the interface in Drupal 7 and Drupal 8 New! (This one's FREE!)

How to import a language and translate the interface in Drupal 7 and Drupal 8

In this video we walk through the process of importing a language into Drupal 7, enabling it and switching to using it by adjusting the URL. In Drupal 8 we also enable a language, but because of the improvements to multilingual support in 8, it's a much quicker, easier and less error prone process.

How to translate content in Drupal 7 and Drupal 8 New! (This one's FREE!)

How to translate content in Drupal 7 and Drupal 8

Here we demonstrate the difference in workflows and output when translating content in Drupal 7 and Drupal 8. Spoiler alert: Drupal 8 is way more powerful and intuitive.

April 26th, 2016

Hola ladies and gents!

A happy Tuesday to you. This week BuildAModule is gracing your inboxes with yet another installment in Front End Development. This week we continue looking at what the term "Mobile-First" means and then - since we've completed the process of sorting out our content into syntactically correct chunks - we start fine-tuning our CSS to match the look of our mockup AND add responsiveness, starting with the footer.

And why is this exciting? Because if you've been watching this series from the beginning, you've finally reached a level of sophistication in FED that allows us to add responsive design considerations without heads exploding!

Oh, and one of my favorite videos in this series is coming out this week, which discusses the "Fixed Breakpoint" versus "Expand the browser until it looks like s***" approaches to responsive design. For a long time I've been wanting to explain the two approaches and discuss the merits of each. This week I can check that one off my bucket list.

If the front end material has been new to you, I hope you've had a chance to apply some of what you're learning to your work. If you haven't, consider moving forward on an idea you've had for a a web project and incorporate some of these concepts. The quicker you can apply what you're learning, the stronger the techniques and concepts will stick.

For those of you in the northern hemisphere, I hope you're enjoying spring. It's such a beautiful... beautiful ... aAAAA CHO!!!!!

What "mobile first" means in terms of CSS New! (This one's FREE!)

What "mobile first" means in terms of CSS

Even when the constraints of our project mean that we can't take a mobile-first approach to design or strategy, we can still take a mobile-first approach with our CSS. Here we explain exactly what that means (hint: it has something to do with "min-width" vs. "max-width."

Summary of which ways we can approach this project "mobile first" New!

Summary of which ways we can approach this project "mobile first"

Now that we understand what "mobile first" means, we can look at what ways we can use a mobile-first approach in our project.

Comparing fixed breakpoints to the "expand until it looks bad" responsive design approaches New! (This one's FREE!)

Comparing fixed breakpoints to the "expand until it looks bad" responsive design approaches

There are two common approaches to coding a responsive site based on mockups. The first is beginning with mockups for specific breakpoints - most commonly for phones, tablets and desktops - and using those fixed breakpoints throughout your CSS. The next is to code for a single size, and then either expand or contract the browser until things start to look out of place, at which point you add breakpoints for specific elements. Here we walk through these two approaches and the benefits to each.

How our footer will react to differences in browser size New!

How our footer will react to differences in browser size

Before we can start to code the CSS for our site, we have to think about what we want the site to actually do when the browser size is different. Here we explore our options for getting the footer to fit in the browser window regardless of its size.

How we will code our footer CSS desktop-first and then compare with a mobile-first approach New!

How we will code our footer CSS desktop-first and then compare with a mobile-first approach

To begin with, we're going to code our CSS for desktop first, since that's the kind of mockup we have. Later, we'll convert it over to a mobile-first approach.

How to group elements with wrapper div tags for layout styling New!

How to group elements with wrapper div tags for layout styling

In order to lay out groups of elements, we'll need to add some container elements so we can style them separately. In this video we wrap the footer elements that need a container.

Reorganizing our CSS to work with wrapper elements New!

Reorganizing our CSS to work with wrapper elements

When we added our wrapper elements, it changed how one of our CSS child selectors worked. In this video we troubleshoot the issue and re-align our selectors to work with our new wrapper elements.

How to use "float" to align elements to the right and left of the browser in a flexible way New!

How to use "float" to align elements to the right and left of the browser in a flexible way

Floats can be very useful for layout out elements in a flexible way that will adjust to variations in browser size. Here we use the "float" property to get a flexible three-column layout going in our footer.

How moving around markup for layout can be an accessibility issue New! (This one's FREE!)

How moving around markup for layout can be an accessibility issue

Sometimes it seems like it would make sense to adjust the order of elements in our HTML in order to make them easier to lay out, but it's important to consider the implications for accessibility if we re-order our content in a way that doesn't make sense.

Using negative margin to align our footer elements New!

Using negative margin to align our footer elements

Here we adjust some stubborn spacing in our footer with a bit of negative margin.

Adjusting styles to collapse the footer into a single column New!

Adjusting styles to collapse the footer into a single column

In this video we work through the changes that need to be made to our footer CSS to collapse it down to a single column.

Adding breakpoints to collapse our footer into a single column using "max-width" New!

Adding breakpoints to collapse our footer into a single column using "max-width"

Having worked through the CSS needed to get our footer content into a single column, we make the changes permanent and conditional by moving the style changes to breakpoints in our SASS. If this is your first time seeing breakpoints affect your layout, you'll really enjoy seeing this in action.

Adding a breakpoint to collapse our footer navigation New!

Adding a breakpoint to collapse our footer navigation

In previous videos, we added breakpoints to collapse our footer elements into a single column, and in this video we complete the process of making our footer fluid by adding a breakpoint to our navigation that makes it span the browser, whatever width it is.

How to convert desktop-first CSS to mobile-first CSS by switching to "min-width" New!

How to convert desktop-first CSS to mobile-first CSS by switching to "min-width"

When you have a desktop-based mockup, it's conceptually easier to begin coding the desktop version and then add smaller variation breakpoints later. However, there are some benefits in adjusting the CSS code to load mobile CSS first, and then add in the desktop version, and in this video we do just that.

Discussing how the "qualities" section should react responsively New!

Discussing how the "qualities" section should react responsively

Moving onto the next section we want to add responsiveness to, we think about how we'd want the icon boxes in the "qualities" section to adapt to smaller browser sizes.

Adjusting the padding in our stacked hero sections New!

Adjusting the padding in our stacked hero sections

As we work through the changes we need to make to our CSS, we realize that some of the changes we want to make are common for all of the stacked hero sections, so we adjust the CSS accordingly.

How to bump an element out of the container box and center it above the content New!

How to bump an element out of the container box and center it above the content

In the mockup of our icon boxes, the icon rests half-in, half-out of the actual content box. Here we explore a couple of approaches to bumping that icon out of the box and then centering it to whatever the width of the box might be.

Adjusting the text position and layout in our "qualities" boxes New!

Adjusting the text position and layout in our "qualities" boxes

Now that we have the layout of the icons squared away in our icon boxes, we move onto look at the adjustments we need to make to bring the text of the icon boxes in line.

When it makes sense to use relative units for width, and moving our CSS to our SASS files New! (This one's FREE!)

When it makes sense to use relative units for width, and moving our CSS to our SASS files

Earlier in the series we discussed the implication of using relative units for width, and how doing so can sometimes break a layout. In this video we explain how there are exceptions to the rule and how we might code our icon boxes to adjust nicely to a flexible width and height.

Making the relationships of our SASS values explicit with variables and equations New!

Making the relationships of our SASS values explicit with variables and equations

As we built out the CSS for our icon boxes, we were just playing with pixels in the browser to get things to look right. However, the final values we want in our SASS have relationships with other values, and where we can, it makes sense to make these relationships explicit with simple equations.

April 12th, 2016

'Ello!

At the risk of becoming too predictable, this week I'm releasing another 20 videos in the Front End Development collection. This week's videos wrap up our effort to style a Flexslider carousel using CSS and SASS, and then we get to dive into something I've been looking forward to covering for years now...

Responsive design!

Being a little late to hop on the bandwagon of responsive design coverage has its advantages. As we progress through the next videos, you'll get to see how we can use an additional layer of tools including SASS plugins, Bower components and automation tools like Grunt to make it a lot more possible to build something once and progressively refactor it over time as needs change. Learning what I needed to in order to make these videos changed I worked in an essential, really positive way, and I hope many of you will make similar strides.

I also wanted to say thanks to all of you readers / watchers out there who help make the work I do meaningful. Without you, I would be lost.

Have a beautiful week!

 

How to add margin between grouped, floated elements New!

How to add margin between grouped, floated elements

In some recent videos we explored how to create columns of content by using the "float" CSS property. However, when dealing with a set of floated items that are separated into groups, we need to use some particular CSS to adjust how they're positioned in relation to one another.

Why it makes sense to apply CSS changes in the browser before committing them to code New!

Why it makes sense to apply CSS changes in the browser before committing them to code

Throughout this series, we've used a process where we've made changes to CSS code in the browser, and then we copy that code over to our CSS files later. In this video we explain why it's a good idea to start in the browser and then make those changes permanently later.

Reviewing how we added margin between snippets and making the CSS permanent New!

Reviewing how we added margin between snippets and making the CSS permanent

The process of adding margin between our snippet elements was kind of involved, so we take a moment in this video to review what we did before we start duplicating the CSS changes in our code.

The implications using absolute or relative units for content layout New!

The implications using absolute or relative units for content layout

As we go through the process of moving some of our CSS to our SASS files, we have to consider if it makes sense to use relative or absolute units for the elements in our snippets. Earlier we discussed the benefits of using relative units when it comes to accessibility, but now we're starting to also have to take our layout into consideration.

Testing variations in base font size with our layout and making corrections New!

Testing variations in base font size with our layout and making corrections

Because we've consistently been using relative units for many of our elements, we can easily test a change in browser font size by editing the size of our font in the "html" tag selector. This is also a handy way to adjust the size of your entire site for different scenarios with media queries.

When it's better to use absolute units for sizing when dealing with layout New!

When it's better to use absolute units for sizing when dealing with layout

Once we've figured out what CSS properties in our snippet code to make relative, and which to keep absolute, we now have a good example to draw from when later deciding when it makes sense to absolute or relative units for an element.

How to set up Flexslider to work as a carousel New!

How to set up Flexslider to work as a carousel

Now that we've got the basic HTML and CSS structure set up for our second slideshow, we explore how just a couple additional options can turn Flexslider into a versatile carousel.

How to set the width and spacing of our Flexslider carousel to fit the template New!

How to set the width and spacing of our Flexslider carousel to fit the template

Once we add the JavaScript to get Flexslider to work with our snippet components, we can start refining the look. To begin with, we get the spacing right so that two elements fit nicely in the viewport.

How to use Font Awesome for icons in our Flexslider carousel and hide the paging navigation New!

How to use Font Awesome for icons in our Flexslider carousel and hide the paging navigation

Earlier in the series we adjusted the previous and next navigation icons for Flexslider, and in this video we do the same thing, but with the added benefit of being able to leverage Font Awesome for the icons.

Modifying the colors in our carousel previous and next icons New!

Modifying the colors in our carousel previous and next icons

Over the last few videos we've been wrangling our carousel slideshow into a form that matches our mockup. In this video we get the coloring right for our previous and next navigation.

How to move an element outside of its container with the "left" or "right" CSS properties New!

How to move an element outside of its container with the "left" or "right" CSS properties

Earlier we covered how "absolute" positioning works. What we didn't mention was that using absolute positioning unlocks the ability to also use the "left" and "right" CSS properties to move an element around based on where it would normally be. Here we demonstrate how to use those properties.

Moving our carousel CSS from the browser to our SASS New!

Moving our carousel CSS from the browser to our SASS

We've done a lot of CSS work in the browser, and in this video we work through moving that CSS to our SASS files.

How to simulate a hover state in the browser in order to style CSS New!

How to simulate a hover state in the browser in order to style CSS

Styling a hover state in the browser can be a real challenge until you know this trick, since you can't hover over an element and modify it's CSS in the browser at the same time. However, Chrome DevTools (and other browser development tools) lets you turn on the hover state even when you're not hovering, allowing you to easily modify the CSS.

Refining our carousel slideshow CSS to use SASS variables for common values New!

Refining our carousel slideshow CSS to use SASS variables for common values

Here we do some brief refactoring to get common values out of our SASS rules and into variables.

Congratulations for rendering all of the elements in our mockup, and moving onto layout New!

Congratulations for rendering all of the elements in our mockup, and moving onto layout

Hey, if you've been following along with this series from the beginning, you deserve a huge congratulations. We just completed rendering all of the elements on our page into HTML and CSS, and that's huge. Now, we just need to get it all laid out.

How fluid and fixed layouts worked before responsive design became more ubiquitous New! (This one's FREE!)

How fluid and fixed layouts worked before responsive design became more ubiquitous

Before responsive design, there were a couple schools of thought when it came to laying out sites: keep the site the same size regardless of the browser size, or shrink and grow it to fit the browser window. Here we summarize the benefits and downsides to each.

The limitations of maintaining a separate mobile site New! (This one's FREE!)

The limitations of maintaining a separate mobile site

As we mentioned earlier in this series, building and maintaining a separate mobile site to complement a desktop site greatly increases the amount of work you have to do. Here we summarize the problems with this approach.

Variations in how clients will approach a responsive project New! (This one's FREE!)

Variations in how clients will approach a responsive project

With our project, we have a mockup for a desktop-based site and we need to use our front end skill set to translate this to other browser sizes. However, some projects will start with different mockups for different sizes or no mockup at all. Here we discuss the different ways a project might start and why there are these variations.

What "mobile first" means in terms of business strategy New!

What "mobile first" means in terms of business strategy

At some point, you'll run into the term "mobile first." In the next few videos we'll talk about what this means and how it applies to strategy, design and coding the CSS.

What "mobile first" means in terms of design New! (This one's FREE!)

What "mobile first" means in terms of design

When it comes to design, "mobile first" means focusing on the mobile version of a design first, and then scaling up, instead of the other way around. In this video we discuss why this approach makes so much sense.

March 29th, 2016

Howdy!

I hope you had an awesome spring break and did something fantastic. Or nothing at all, which is its own kind of fantastic.

I come to you on this fine Tuesday, hopefully after you've worked through your weekend email and are diving into actually getting something done, to let you know that I'm releasing 34 minutes of new material in the Upgrading to Drupal 8  and Front End Development collections. So, if you don't already have plans for your lunch break...

Judging from the emails I get from you guys, there's a lot of interest around Drupal 8 theming, and I wanted to point out what we currently have on BuildAModule to get you started.

First, we have an entire chapter in Drupal 8 Development Prep dedicated to theming in Twig, starting here. Even though the focus of this chapter is theming for module building, the same principles apply to theming for a Drupal 8 theme.

Second, a big reason I'm working on Front End Development is to set a solid foundation for theming in Drupal 8. D8 is the first Drupal to come bundled with themes built for legit front end developers. Theming in Drupal 8 doesn't need to only involve hacking existing templates - though that's still a valid approach - but it can mean building templates from the ground up to custom fit specific goals. Drupal 8 can get out of the way to let that happen, but to make it work you have to know what you're doing with CSS and HTML. So, if you're aching for more D8 theming content, consider taking a look at Front End Development and maybe you'll find some important gems that will help you along the way.

And of course I plan on tacking D8 theming before too long head-on, so hang tight.

Have a beautiful day, and here's the latest new stuff on BAM.

Overview of our strategy for overriding third party library CSS selectors New!

Overview of our strategy for overriding third party library CSS selectors

We've been copying and pasting Flexslider selectors straight from the CSS source, but here we explain explicitly why we're taking this approach and how to make it a sustainable strategy for any third party library with CSS.

Fixing some CSS errors introduced through sleep-deprived developer error New!

Fixing some CSS errors introduced through sleep-deprived developer error

If you have a keen eye, you may have noticed a couple of bugs in the last batch of code for overriding the look of our pagination elements. Here we introduce an element of practicality (that is, no developer is perfect!) and correct our errors.

How to change the spacing between Flexslider paging elements New!

How to change the spacing between Flexslider paging elements

Our pagination almost looks perfect. In this video we tighten up the space between the pagination elements to make it look even better.

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

How to resume from this point (part 1, step 43)

If you want to hop in this series without starting from the beginning, we walk you through the software we have running and what you need to start getting to work from this point.

How to create multiple vertical columns for content using float and margin New!

How to create multiple vertical columns for content using float and margin

Here we start dipping our toes into layout by figuring out how to create multiple columns using just divs. First, we use a simple strategy employing a single float and a margin - a strategy that works well for elements that have variable width.

Using the float and margin strategy for our author image and snippet content New!

Using the float and margin strategy for our author image and snippet content

Having explored the idea of using an element with float and another with margin to create columns of content, we employ the strategy in the browser on our snippet content.

How to use multiple floats to separate content into columns New! (This one's FREE!)

How to use multiple floats to separate content into columns

The technique we just used to create vertical columns works great with a single pair of elements, but using a series floats is a common approach to creating a longer set of vertical columns. Here we talk through how to do that.

How to use the CSS "overflow" property New!

How to use the CSS "overflow" property

We came across the "overflow" CSS property earlier when we were digging into the Flexslider CSS, but here we talk about how it can be used to hide content or correctly wrap around floated elements.

Refining the margins for our snippet content New!

Refining the margins for our snippet content

In this video we correct some margins in our snippet content to bring it more in like with our mockup.

Moving our snippet styles from the browser to permanent SASS rules New!

Moving our snippet styles from the browser to permanent SASS rules

Having created a working set of styles in the browser that split our snippet content into vertical columns, we work through the process of porting our changes to our SASS partials.

Reviewing improvements to caching and performance in Drupal 8 New! (This one's FREE!)

Reviewing improvements to caching and performance in Drupal 8

We've alluded to the improvements to performance in Drupal 8 in previous videos, but here we explain how the caching works in greater depth as well as its implications.

Comparing the "Logging and errors" page in Drupal 7 and Drupal 8 New!

Comparing the "Logging and errors" page in Drupal 7 and Drupal 8

In Drupal 8 there is now a backtrace option, which can be useful for debugging errors - particularly with contributed modules.

How to avoid overriding important changes with importing configuration in Drupal 8 New! (This one's FREE!)

How to avoid overriding important changes with importing configuration in Drupal 8

In some earlier videos we demonstrated how to use the "Configuration Synchronization" tool to export and import configuration, but in this video we take that a bit further and demonstrate how to avoid accidentally overriding changes when using the tool for migrating updates from one instance of your site to another.

Comparing changes to the file system settings in Drupal 7 and Drupal 8 New!

Comparing changes to the file system settings in Drupal 7 and Drupal 8

The file system settings in Drupal 8 have been tightened up a bit, making it harder to accidentally change the location of the file directories.

Comparing changes to the image styles interface in Drupal 8 and 7 New!

Comparing changes to the image styles interface in Drupal 8 and 7

For the most part, image styles in Drupal 7 and Drupal 8 work the same, though in Drupal 8 we now have the the ability to convert an image into a particular image file type, like PNG or JPG.

Comparing the Image Toolkit interface in Drupal 7 and 8 New!

Comparing the Image Toolkit interface in Drupal 7 and 8

The interface for selecting the image toolkit in Drupal 8 hasn't changed much, but contributed modules can now easily create plugins to extend this to use other libraries.

Comparing search configuration in Drupal 7 and Drupal 8 New!

Comparing search configuration in Drupal 7 and Drupal 8

Search configuration in Drupal 8 has been improved quite a bit, and the concept of "search pages" has been introduced. In Drupal 7, it came bundled with a search page for users and content, but in Drupal 8 you can spin up new search pages that weight content against different criteria. It's pretty cool, though you'll still need the Views module for advanced searching.

How clean URLs work in Drupal 8 New!

How clean URLs work in Drupal 8

In Drupal 8, the interface for toggling clean URLs has been removed. Instead, the system will automatically sense when clean URLs are being used and will format all future URLs accordingly.

How date and time formats have been improved in Drupal 8 New!

How date and time formats have been improved in Drupal 8

In Drupal 7, the configuration around date formats was a big ambiguous and maybe overly complicated. In Drupal 8 the interface has been simplified and is much more straightforward. In this video we demonstrate how the changes might affect your workflow.

How the "Trusted host settings" option works New!

How the "Trusted host settings" option works

For the most parts, the "Reports" pages have remained the same. However, the status report now shows an alert for "Trusted host settings" by default. Here we explain exactly what this means.

March 15th, 2016

WHEW!

It's been a busy few months, and I'm finally to a point where I get to show you some of what I've been up to, though there's still a good bit more coming down the pikes that I'm also pretty excited about.

Most of what I've been focused on is re-writing the BuildAModule code base so that it's vastly more sustainable - a task I pretty much have to enjoy by myself - but along the way I've also been able to make some changes to the BuildAModule user experience that you've been requesting for a long time. Here we go:

Pay with PayPal

Finally, right? For those of you without US credit cards, I'm really sorry that it's taken so long to support PayPal. But here it is. PayPal support for any form of membership, with recurring billing and everything.

Share your membership

In the past, you would have to purchase a membership with 2 or more seats to get the ability to reassign those seats to other users. I've opened this up for single-seat memberships, which has a couple of neat implications.

First of all, if you're responsible for purchasing a membership but you won't be the one using it, you can keep the purchasing account and user account completely separate. Second, if you want to share your membership with someone else while you're not using it, you can do that! You can also easily purchase memberships for other people as gifts. These are all things that have been requested by members, and I'm very happy to actually have a solution for you now.

Multiple membership support

In the long ago times, you could only purchase a single membership per account. Now you can have as many as you need. This is particularly useful for institutions like universities where there will be a single entity managing all memberships, but billing schedules will be different. Each membership can also have multiple seats, making it super flexible.

Improved onboarding videos with Linux

I've added a new collection called Setting Up a Web Environment With Drupal. This collection streamlines the process of getting a web environment set up locally, with or without Drupal. I've archived a number of legacy introductory videos to further speed up the process of getting started.

And Linux! For those of you nerds out there showing me up with your crazy 'how do I do this on Linux' questions, I finally bit the bullet and learned enough about Linux to demonstrate a fairly painless way to get a web server and Drupal installed. Happy now? ;)

Video re-organization

I've also removed the Appendix collection and merged the Working With Files and the Files API collection with Drupal 7 Development Core Concepts. Again, I'm just trying to simplify the organization of videos on the site and remove any cruft that you don't really need in your way.

HTTPS on all pages

I didn't realize how much work it is to add a single s to all URLs on a site, but BAM! It's done. Now instead visiting pages on http://buildamodule.com, it's https://buildamodule.com. Exciting, yeah? The payoff is that wherever you are on BuildAModule, the data you send and receive is encrypted and secure. That's cool for you when you log in or make orders, and for me, it means that I can do fancy stuff to make BuildAModule operate more like an app and less like a website with beaucoup page refreshes. I guess that's also cool for you, too.

Improved account page, checkout and navigation

You may have noticed some differences if you've been to the site lately. I've pushed these changes silently and slowly to make sure there weren't any major issues before announcing them. But there they are! I hope you think the rotating loading graphic on the account page is amazing. I've had dreams about doing that for years.

Easter egg

From what I understand, the point of an easter egg is that you get to find it on your own, and then you're excited because you're part of some elite group that has managed to uncover a secret that the regular folk don't have the patience or time for. But, I just don't know if my easter egg is noteworthy enough to even make viewers realize they just saw it. I've never had time to make an easer egg before, so I'm experiencing a lack of confidence in this area. However, it took me a stupidly long time to make, so I'm mentioning it here.

Since I haven't told you what it is, I hope it still counts, and that you get a sufficient intrinsic reward from discovering it.

More to come

I'm about halfway through another round of updates that I think will be even more exciting to you learners out there. Know that I'm downstairs in my basement office working my butt off to get it to you as soon as I can. So stay tuned!

New videos?

Of course. This week I'm releasing 10 new videos on how to style Flexslider, one of the most commonly used components for responsive slideshows. This is part of the Front End Development collection, where we walk through the process of creating a responsive template using a modern approach.

How to adjust Flexslider settings with some simple JavaScript New!

How to adjust Flexslider settings with some simple JavaScript

We haven't adjusted any of Flexslider's settings, but there's a lot of customization that's supported right out of the box. In this video we make a small adjustment to keep our slides from continually scrolling as we work.

How to change the size of the Flexslider next and previous icons New!

How to change the size of the Flexslider next and previous icons

In a previous video we replaced out our Flexslider icons, and in this one we adjust the size so that they match the mockup.

How to adjust the position, color and shadow on the Flexslider next and previous navigation New!

How to adjust the position, color and shadow on the Flexslider next and previous navigation

Here we continue on our journey to get Flexslider to match our mockup, adjusting a few CSS bits in the icon navigation.

Moving the styles for our next icon from the browser to permanent code New!

Moving the styles for our next icon from the browser to permanent code

So far we've been playing with our Flexslider CSS in the browser, where we can play with the code in relative safety. Here we move the files over to a permanent location.

Styling our previous slideshow icon and troubleshooting spacing New!

Styling our previous slideshow icon and troubleshooting spacing

Our "next" navigation icon is looking pretty snazzy, but we need to adjust some styles in our "previous" icon to get it to look right. Here we play with some adjustments to the CSS.

How to hide the text of an anchor element by using a fixed width New! (This one's FREE!)

How to hide the text of an anchor element by using a fixed width

Earlier in the series we alluded to a method where you could include text in an anchor tag but hide the text visually. Flexslider uses one such method which is good to see in action.

Using negative margin to position our slideshow's previous icon New! (This one's FREE!)

Using negative margin to position our slideshow's previous icon

In this video we figure out how to adjust the position of our previous icon to get it aligned similarly to what we see in the mockup.

How to adjust the position of the slider page navigation New! (This one's FREE!)

How to adjust the position of the slider page navigation

Now that we've gotten the previous and next buttons styled, the next glaring feature of our slider that needs adjustment is the pagination elements at the bottom. Here we tackle re-positioning it over the slideshow content.

How to set Flexslider to not cycle automatically New! (This one's FREE!)

How to set Flexslider to not cycle automatically

Because our slideshow keeps rotating through content, it's making it a challenge to edit the CSS of the slides in Chrome's DevTools. Here we figure out how to stop the cycle once and for all.

How to modify the look of the Flexslider pagination with CSS New! (This one's FREE!)

How to modify the look of the Flexslider pagination with CSS

Our Flexslider pagination is in place, but it's totally hidden due to poorly contrasting colors. In this video we adjust the colors so they pop out over the dark background.

February 29th, 2016

Hey friends!

This week I'm releasing another batch of 20 videos in the "Front End Development" collection. In these, we walk through multiple approaches to vertically aligning content - something that ends up being ridiculously tricky to do consistently - and also customizing the look of Flexslider, one of the most commonly used components for creating responsive slideshows.

Enjoy!


How the CSS 'flex' display, or 'Flexbox', works New!
(This one's FREE!)

Screenshot for How the CSS \

In an ideal world, CSS would give us a sure-fire way to align our content vertically without having to bash our heads against a wall. In this video we explain the 'Flexbox' spec, which - among other things - gives us the ability to do just that, and how you can learn more about it.

How to use Flexbox to vertically align a block element New!

Screenshot for How to use Flexbox to vertically align a block element

Here we apply the Flexbox model to our slideshow content and sit back, pleased at the easy with which we were able to accomplish this task.

Why using Flexbox doesn't make sense for every project New!

Screenshot for Why using Flexbox doesn

In this video we explain that while Flexbox is pretty much ideal in terms of the freedom and flexibility it gives us, it's not ideal when it comes to browser support, and there's no JavaScript polyfill out there that will help us get what we need. So for this project, we have to abandon this simple solution and dig around a bit more for something that works.

Why we can't vertically align compound elements with the 'vertical-align' property New!

Screenshot for Why we can

Having let go of the idea of the promise of Flexbox, we look into some other options for vertical alignment, starting with the deceptively named 'vertical-align' property. Ultimately, this won't work for what we need, but we get some insight into why.

Why vertically aligning with 'line-height' doesn't work for multi-line elements New!

Screenshot for Why vertically aligning with \

In previous vertically aligned elements, we've used the 'line-height' property. In this case, however, that's not going to work. Onward!

How HTML tables work and why they were once used for layout New!

Screenshot for How HTML tables work and why they were once used for layout

We've sure made it a long way in this series without discussing tables. In this video we talk through the basic HTML table syntax, and explain why table cells have historically been a go-to solution for challenging layout issues.

How to make any element work like a table cell with CSS New!

Screenshot for How to make any element work like a table cell with CSS

With modern CSS, we can make any element behave like any other element. Here we look at using the 'table-cell' display value to attempt yet another go at getting vertical alignment to work.

Using the absolute positioning and negative margin solution for vertically aligning an element New!

Screenshot for Using the absolute positioning and negative margin solution for vertically aligning an element

In this video we continue exploring various solutions to issue of vertically aligning an element. This one uses position and margin, and works well for a single group of elements, but not as great for multiple slides in a sider.

How to use a CSS transform to vertically align an element New!
(This one's FREE!)

Screenshot for How to use a CSS transform to vertically align an element

After working through number vertical alignment solutions, we've finally come to the one that's most ideal for our situation. In this video we use a CSS 'transform' to position the element halfway down its container. Nice.

Reviewing browser support for CSS transforms New!

Screenshot for Reviewing browser support for CSS transforms

As with most of the newer CSS properties, it's good to check out browser support before we standardize on a solution that uses them. In this video we hop over to caniuse.com to see how we're doing for support of the 'transform' property. Spoiler: Prospects look good.

February 15th, 2016

Hey-o!

We have some fun videos out this week, including several on styling sliders and one on how the 'position' CSS property works - a tool that many of use use regularly but haven't taken the time to really suss out. We also walk through what some of the new modules in Drupal 8 are for.

Enjoy!


What the "Core (Experimental)" section is for and how Inline Form Errors works New!
(This one's FREE!)

Screenshot for What the 'Core (Experimental)' section is for and how Inline Form Errors works

In Drupal 8 there is a new group of experimental modules that are being worked into Drupal core but still have known bugs or an unstable API. Here we talk about these modules and what one of the experimental modules is for.

What the Migrate and Migrate Drupal modules are for New!

Screenshot for What the Migrate and Migrate Drupal modules are for

The fact that the Migrate module ships with Drupal 8 is a huge win for those who might be looking to upgrade their Drupal 6 and Drupal 7 sites. In this video we explain what both the Migrate and Migrate Drupal modules are for and hopefully get you excited enough to give them a shot. Later on in this series we'll be demonstrating how these work in detail.

How the Datetime, Link and Telephone modules work New!

Screenshot for How the Datetime, Link and Telephone modules work

Formerly contributed modules, the Datetime, Link and Telephone modules supply HTML5 native fields that also get some robust server-side validation right in Drupal 8 core.

What the "Web Services" modules are for New!

Screenshot for What the 'Web Services' modules are for

Here we explain briefly what the "Web Services" group of modules is for and why you might still end up using the contributed Services module if you need to build a robust API for your project.

Comparing the "Site information" and "Cron" admin pages in Drupal 8 and Drupal 7 New!

Screenshot for Comparing the 'Site information' and 'Cron' admin pages in Drupal 8 and Drupal 7

For the most part, the "Site information" and "Cron" configuration pages are the same, but in this video we work through the minor changes.

Merging our "slide" and "slideshow" components and refactoring our classes New!

Screenshot for Merging our 'slide' and 'slideshow' components and refactoring our classes

Earlier in this series we created a "slide" component to house some CSS that didn't belong anywhere else. Now that we've created the "slideshow" component, it's looking like the slide CSS actually belongs in there. In this video we merge two components - something that you will likely find yourself doing again.

How we will approach styling our circular, bordered images New!

Screenshot for How we will approach styling our circular, bordered images

Here we summarize the styles that we'll need to get a nice circular image.

Why we're using a background image for our circular images, and building out the basic CSS New!

Screenshot for Why we're using a background image for our circular images, and building out the basic CSS

In this video we start the process of coding the circular author images that we'll use in our "snippet" component. We also explain the accessibility implications of using a background image for an author image and how we'll address problems with it later in this series.

How to style a circular image with a border and drop shadow New!

Screenshot for How to style a circular image with a border and drop shadow

Here we build on the previous video and add some rounded corners, a border and a nice drop shadow to our author image.

Adding our second image, and moving our snippet HTML to the right place New!

Screenshot for Adding our second image, and moving our snippet HTML to the right place

For completeness sake, we add our second snippet image and move the whole HTML chunk to the component where it will live out it's HTML-y life. Is this starting to feel like a real web site yet?

Reviewing what functionality we need for our slideshow sliders New!

Screenshot for Reviewing what functionality we need for our slideshow sliders

Our mockup doesn't move, but we can tell a lot about the implied functionality in our slideshows just by doing a bit of detective work. In this video we review the mockup and figure out what our requirements are going to be for our slideshows and what makes each slider unique.

Overview of the "Flexslider" feature set and review of examples New!

Screenshot for Overview of the 'Flexslider' feature set and review of examples

We're going to use the "Flexslider" JavaScript library to generate our slideshows, and here we review the examples on the Flexslider site to get a sense of the feature set available to us and to appreciate just how much the library does for us.

How to install Flexslider and add a working example New!
(This one's FREE!)

Screenshot for How to install Flexslider and add a working example

In this video we use Bower to download Flexslider and then get a simple example working in our template. Along the way, we run into an issue with Bower's search functionality not working, and find a workaround using the name of the Github project and the command line.

How to connect Flexslider to existing HTML to convert it to a slider New!

Screenshot for How to connect Flexslider to existing HTML to convert it to a slider

The example that we copied over worked great, and here we re-connect the slider with our own content.

Tracking down why the Flexslider navigation does not appear over the slider New!

Screenshot for Tracking down why the Flexslider navigation does not appear over the slider

After we attach Flexslider to our slideshow, we are able to see it working, but the navigation for the slideshow is in a totally unrelated place on the page. Here we start a drill-down to figure out what's going on.

How the relative, absolute, static and fixed CSS "position" values work for element layout New!
(This one's FREE!)

Screenshot for How the relative, absolute, static and fixed CSS 'position' values work for element layout

As we alluded to in the previous video, the problem with our Flexslider navigation not being positioned properly had to do with the default value of the CSS "position" attribute on our elements. In this video we explore what is often a confounding but absolutely critical CSS property for layout, and how the different values work in relation to one another.

Why adding left padding to slides in our slideshow container doesn't work New!

Screenshot for Why adding left padding to slides in our slideshow container doesn't work

In this video we take a stab at getting the content in our slideshow to visually match the mockup. The first order of business is adding some padding to the left, and for very good reasons we try adding the padding to the slides instead of the slideshow container. By doing this, we witness first hand the difficulty in modifying the CSS of third-party libraries, and move on to another possible solution.

Solving our slideshow left padding issue by applying padding to the slideshow container New!

Screenshot for Solving our slideshow left padding issue by applying padding to the slideshow container

Here we manage to find a solution to our left padding issue by adding the styles to the slideshow container instead of the individual elements. By doing this we lose some flexibility, but it works and that's all we need right now.

Setting the width of our slideshow slides New!

Screenshot for Setting the width of our slideshow slides

Having set the left padding, the next style to add to our slideshow is the width of the content. Here we do just that.

A discussion of options for vertically aligning our slideshow content New!

Screenshot for A discussion of options for vertically aligning our slideshow content

We've had to vertically align numerous elements so far in this series, and in this video we discuss the how the possibilities we're familiar with might help us with the current task of vertically aligning our slides.

February 1st, 2016

Happy Tuesday!

This week we're releasing 20 new videos, 10 from the "Front End Development" collection and another 10 in "Upgrading to Drupal 8." In these we get to explore media queries and breakpoints and how many of the core modules in Drupal have changed from Drupal 7 to Drupal 8.

For those of you who are making the leap to Drupal 8, keep up the good work and I will continue to add new videos to help you get your bearings.

Thanks!


How to create a media query to swap background images based on the browser width New!

Screenshot for How to create a media query to swap background images based on the browser width

Here we demonstrate how to switch which image gets used for the background of an element based on the width of the browser. Swapping CSS based on browser size is likely the most common use you'll find for media queries as a front end developer.

How to swap images with a media query based on screen resolution New!

Screenshot for How to swap images with a media query based on screen resolution

While we ultimately won't check the screen pixel density in our media queries, it's important to understand how to do it for possible future CSS adjustments.

How to use "min-width" to set multiple breakpoints in your CSS based on browser width New!
(This one's FREE!)

Screenshot for How to use 'min-width' to set multiple breakpoints in your CSS based on browser width

Earlier we set a media query using the "max-width" condition. There are definitely uses for "max-width," but we'll discover multiple reasons to use "min-width" instead as we move through this series. In this video we set up a series of media queries to serve up different background images based on the growing width of the browser window.

How the SASS "breakpoint" extension works, and troubleshooting installation New!

Screenshot for How the SASS 'breakpoint' extension works, and troubleshooting installation

As we take a gander at our series of media queries, it becomes apparent that they're pretty inefficient. In each one we're having to duplicate the selector that we want to modify. Wouldn't it be better if we could reverse the structure, and add media queries within the selector? Well sure, and the "breakpoint" SASS extension will help us do that. As we go through the installation process, we run into a couple of issues with dependencies, so we take care of those as well.

How to install Compass New!

Screenshot for How to install Compass

We've gone quite a ways through this series without needing Compass, and if you're crafty you could keep moving forward without it. However, in order to use the "breakpoint" SASS extension, we're going to need Compass first, and so in this video we work through that process.

Encouragement for when you run into dependency issues with Ruby, node.js or Compass New!

Screenshot for Encouragement for when you run into dependency issues with Ruby, node.js or Compass

Chances are that at some point in this series, you will run into issues that we haven't covered explicitly. Most likely, these will happen on the command line as you attempt to install one of the components we use, and often you won't know what to do about it at first. In this video I explain how I ran into an issue installing Compass and how I overcame it. Along the way I try to distill the principles for overcoming this kind of "dependency hell" and offer encouragement. This stuff really is useful, and it pays off to figure out how to get it installed, even if it takes a long time.

How to set up a Compass project New!

Screenshot for How to set up a Compass project

Now that we've installed Compass, we have one more step before we can use it. In this video we create a SASS project and set up some of the basic variables in our config.rb file.

How to set up the breakpoint extension with Compass and use it to simplify our SASS New!

Screenshot for How to set up the breakpoint extension with Compass and use it to simplify our SASS

Having installed Compass, we're now ready to use the breakpoint extension. Here we get it set up in our Compass configuration file and see first-hand how nice it is to bring some sanity to our media queries.

Summary of why the "breakpoint" SASS extension is so useful New!

Screenshot for Summary of why the 'breakpoint' SASS extension is so useful

In this short and sweet video, we remind ourselves why we wanted to start using the breakpoint SASS extension in the first place.

Summary of how many projects set up their media query breakpoints New!
(This one's FREE!)

Screenshot for Summary of how many projects set up their media query breakpoints

When we added our media queries to swap out our slideshow background image, we build our queries to roughly match the size of the images. Most projects, however, standardize on a handful of breakpoints and uses those to swap out images and other CSS. Here we briefly explain how this works.

Changes to the Actions, Trigger, Tracker, Automated Cron, Ban and Blog modules New!

Screenshot for Changes to the Actions, Trigger, Tracker, Automated Cron, Ban and Blog modules

From here we're going to work our way down the modules page and review each module that has moved, had a name change, be removed or added. That will eliminate a huge number of surprises as you work through the process of upgrading your own workflow to match Drupal 8.

How the Breakpoint and Responsive Image modules work in Drupal 8 and how to view breakpoints in the UI New!
(This one's FREE!)

Screenshot for How the Breakpoint and Responsive Image modules work in Drupal 8 and how to view breakpoints in the UI

Both the Breakpoint and Responsive Image modules offer significant front end tools to developers. Breakpoints are difficult to centralize across the back and front ends, but the Breakpoint modules supplies an API to connect the two. Responsive Images are also deceptively tricky and the interface for managing them is intuitive and thoughtful. Here we walk through the basics of each and show how you can review global breakpoints supplies by modules and themes through the Responsive Image module.

Changes to CKEditor, Configuration Manager, Custom Block and Dashboard on the module page New!

Screenshot for Changes to CKEditor, Configuration Manager, Custom Block and Dashboard on the module page

The Dashboard module is gone in Drupal 8, but there's a number of concessionary modules that have been added to reduce the hurt.

Changes to File, Image and List on the modules listing page New!

Screenshot for Changes to File, Image and List on the modules listing page

Spoiler alert: The File and Image modules have been re-grouped under the "Fields" section, and the List module has been merged with the "Options" module.

How multilingual modules have been adjusted on the modules listing page in Drupal 8 New!

Screenshot for How multilingual modules have been adjusted on the modules listing page in Drupal 8

Later on in this series we'll demonstrate the workflow for translating the interface and content in both Drupal 7 and Drupal 8, but in this video we simply talk through how the modules from Drupal 7 have been adjusted and re-named in 8.

Why the Open ID and Overlay modules were removed in Drupal 8 New!

Screenshot for Why the Open ID and Overlay modules were removed in Drupal 8

There may not be many tears shed over the removal of Open ID and Overlay, but just in case you're curious why they disappeared Drupal 8, we spend a minute explaining their departure.

Why the PHP Filter module was removed in Drupal 8 New!
(This one's FREE!)

Screenshot for Why the PHP Filter module was removed in Drupal 8

Most developers will rejoice at the news that the PHP Filter module has been removed from Drupal core. It means fewer maintenance issues, easier migrations and a much lower risk of security holes spontaneously opening up. If you're one of those that will miss it - and I'm with you there - there's still a contributed module to give us the same feature.

Why the Poll module was removed and what the Responsive Images and Text Editor modules do New!

Screenshot for Why the Poll module was removed and what the Responsive Images and Text Editor modules do

In this video we explain why the Poll module is no longer in Drupal core and briefly explain what the Responsive Image and the Text Editor modules are for.

Demonstration of how the Tour module can provide contextual step-by-step help in overlays New!

Screenshot for Demonstration of how the Tour module can provide contextual step-by-step help in overlays

Drupal 8 includes a much more robust contextual help tool called "Tour." Tour is a Drupal implementation of the Joyride library, and it provides an API for modules and themes to offer inline, step-by-step help that points out areas of the interface and gives an explanation of what each area is for. It's super cool, and here we give Tour a tour.

The difference between the Views and Views UI modules in Drupal 8 New!

Screenshot for The difference between the Views and Views UI modules in Drupal 8

You may have already gleaned this from your previous work with Drupal 7, but here we briefly explain why Views is split into two modules.

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.