March 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.

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.

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:


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.