January 2016


Hey there!

Today we're releasing 20 new videos in the "Front End Development" collection, this time covering the basics of Responsive Design and adding responsive images. This is some fun and mind-bending stuff if you've never seen it before. If you have, you might find some fun tidbits in there you didn't know.

Enjoy!


The pros and cons of using high resolution images New!

Screenshot for The pros and cons of using high resolution images

In this video we create a high resolution image, demonstrate how browsers interpret those extra pixels, and how we can wrangle the image with CSS to get it to display at the size we originally intended.

How to serve both low and high resolution images with Retina.js New!

Screenshot for How to serve both low and high resolution images with Retina.js

In the last couple of videos we explored the pros and cons of serving low or high resolution images to our visitors, but in this video we discuss a simple way to serve both using a JavaScript library.

How to set up a lightweight web server with Node.js to get around local file browser issues New!

Screenshot for How to set up a lightweight web server with Node.js to get around local file browser issues

So far we've simply been opening up a .html file in the browser in order to run our example. However, with the introduction of Retina.js, we're going to need a server of some kind since our browser is limited in the kinds of local files it has access to. Here we quickly install a Node.js extension that can spin up a lightweight server so we can get Retina.js working.

How to avoid 404 errors when using Retina.js New!

Screenshot for How to avoid 404 errors when using Retina.js

In the previous video we fixed some JavaScript errors, but we're still getting some 404 browser errors due to images that Retina.js is looking for and can't find. No worries, it's simple to tell Retina.js to look for images that actually exist.

What a 404 error is and why we should try to avoid them New!

Screenshot for What a 404 error is and why we should try to avoid them

The downside of using Retina.js to serve high density images to high resolution screens New!

Screenshot for The downside of using Retina.js to serve high density images to high resolution screens

The solution of serving a high-resolution image only to browsers that can support it is fantastic, but there are some downsides. Here we talk about what those are and pave the way for an alternative, future-proof solution that's sure to excite and enthrall!

What "responsive design" means and a brief history New!
(This one's FREE!)

Screenshot for What 'responsive design' means and a brief history

If you started watching this series because you wanted to learn more about "responsive design," it probably seems like it's taken a long time to get to this point. But rest assured that everything you've learned so far will help to serve your understanding and mastery of responsive design. In this video we summarize what responsive design is and why it's better than some of the alternatives front end developers have used in the past.

What responsive design implies for the layout of our site New!

Screenshot for What responsive design implies for the layout of our site

Now that we know what responsive design is, we discuss the implications when it comes to the layout and design of our entire site.

What responsive design implies for our images New!

Screenshot for What responsive design implies for our images

While we'll find that it's relatively simple to support responsiveness for a number of HTML elements, one of our biggest challenges is working with images. It's not that they're impossible to work with, it's just that many of us have become used to the idea that images are a simple tag you can slap into the site and be done. Once we realign our expectations to include the diverse possibilities for our images, we'll be set up to enjoy what the following videos illustrate for a solution.

Why the browser can't serve the right images for the right scenario without our help New!
(This one's FREE!)

Screenshot for Why the browser can't serve the right images for the right scenario without our help

Browsers are smart because they know when to be stupid. If a browser makes too many calls to the server, or waits to load a page until it has all the information it could possibly use from the server, us users of the web would revolt because we've come to expect a faster web. Because of this, there are some things a browser can't know unless we tell them, and we explain how that works for images here.

How to use the "srcset" property in the image tag to help the browser fetch the right image New!

Screenshot for How to use the 'srcset' property in the image tag to help the browser fetch the right image

Even though browsers can't know the resolution and density of images on the server, we can tell them before they go fetch the image by using the "srcset" HTML attribute. Though browser support for this attribute is slim at the time of this recording, in the future all major browsers will support it.

How "media queries" work to pull in different CSS based on conditions in the browser New!
(This one's FREE!)

Screenshot for How 'media queries' work to pull in different CSS based on conditions in the browser

Giving the browser information about the resolution and density of images on the server is just part of the solution for building responsive images. The second factor has to do with telling the browser when different sizes of browsers might trigger a different layout, and thus a different image. The way we explain these scenarios to the browser is through something called a "media query."

How the "sizes" image attribute works to provide breakpoint information to the server New!

Screenshot for How the 'sizes' image attribute works to provide breakpoint information to the server

Now that we understand how media queries work, the "sizes" attribute for images will make a lot more sense. With "sizes," we can tell the browser what size the image will be in different browser situations, something the browser usually can't know until it loads the complete CSS from the server.

What a "breakpoint" means in connection to CSS media queries New!

Screenshot for What a 'breakpoint' means in connection to CSS media queries

From this point on, we'll be using the term "breakpoint" to make reference to media queries where the condition has to to the size of the browser. It's a cooler word, but is really more along the lines of slang in the front end world.

How to use the srcset attribute safely until there's bettter browser support with picturefill New!

Screenshot for How to use the srcset attribute safely until there's bettter browser support with picturefill

The "srcset" and "sizes" attributes are a lifesaver when it comes to coding responsive images, and because the attributes are part of the HTML spec now, eventually all browsers will support it. In the meantime, however, we need a way to improve browser support and the way we do that is through a JavaScript polyfill called "picturefill."

Setting up our logo image to match the mockup New!

Screenshot for Setting up our logo image to match the mockup

We've pretty much already created the code we need for our logo image, but here we cinch it up by checking the size of the image in our mockup and making sure our code matches up.

How to use SVG images for scalable vector graphics on the web New!

Screenshot for How to use SVG images for scalable vector graphics on the web

So far we've used a couple kinds of images: We've used a bitmap PNG file for our logo, and vector font icons for our icons. In this video we introduce another vector option that can give you greater versatility than a font icon, but with better scalability than a bitmap. That is, an SVG or "Scalar Vector Graphic" file.

The difference between bitmap and vector graphics, and saving our slideshow background images New!

Screenshot for The difference between bitmap and vector graphics, and saving our slideshow background images

In this video we talk a bit about the advantages and disadvantages of using bitmap versus vector graphics, and go through the process of creating various versions of our slideshow background image.

Adding the HTML and CSS scaffolding for our slideshow background image New!

Screenshot for Adding the HTML and CSS scaffolding for our slideshow background image

To get started building out the image background for our slideshow, we need a place for it to go. In this video we build up the basic HTML and CSS we need to get a working example.

How to set a background image so that it covers an element but does not repeat New!
(This one's FREE!)

Screenshot for How to set a background image so that it covers an element but does not repeat

In this video we explore several CSS properties at our disposal for adjusting the behavior of background images. While it's all good to know, we eventually discover the killer combination that will give us exactly what we want, which is to align the image to the bottom and have the image stretch to fit our entire element. It sounds like a tall order, but CSS has us covered.


Greetings, friends!

So, I'm not able to make it to DrupalCon Asia this year, but with the funds that I would have spent, I'd like to help some locals help get to the Con. So, I'm giving away 6 DrupalCon Asia tickets in a lottery next week. To enter the lottery, I ask the following:

1. That you live in or near India.

2. That you volunteer in some way at the Con (mostly because it's an awesome way to connect with the community).

3. That you plan on using the ticket yourself.

Just reply to this email with your Drupal.org profile page URL and email address and I'll enter you in.

I will be drawing winners next week on Tuesday, January 12th. If you win, I'll be sure to let you know by the 13th.

I'm also releasing 20 new videos in the "Upgrading to Drupal 8" collection this week. Enjoy!

How to rewite the output of a content (node) page using Views New!
(This one's FREE!)

Screenshot for How to rewite the output of a content (node) page using Views

In Drupal 7, Views can be used to rewrite the output of fields. With it, you can add HTML and text to a field as well as merge additional fields into a single field's display. Additional modules like Display Suite and Panels could also adjust your field output for content pages. In core Drupal 8 the only way to customize a field's output is through Views, so here we demonstrate here how to replace a content page entirely with a View so we can customize fields as needed without going through the theming system.

Comparing comment settings in Drupal 8 and Drupal 7 New!

Screenshot for Comparing comment settings in Drupal 8 and Drupal 7

In Drupal 8, comment settings are no longer part of the content type, but instead are associated with a comment field. This a welcome architectural change, and in this video we compare how to adjust comment settings in both 7 and 8.

How "comment types" work in Drupal 8 New!

Screenshot for How 'comment types' work in Drupal 8

Just like content and blocks, there are now comment "types," which allow you to create different groups of fields for multiple types. Here we walk through the interface for adding and manipulating comment types.

How to hide the comment "subject" field in Drupal 8 New!

Screenshot for How to hide the comment 'subject' field in Drupal 8

A common solution that Drupal 7 site builders seek out is a way to hide the "subject" input in the comment form. Doing this in Drupal 8 is fairly trivial, and in this video we walk through how.

Cleaning up our added comment field and how field "storage settings" works New!

Screenshot for Cleaning up our added comment field and how field 'storage settings' works

Here we delete a comment field and explain what the "storage settings" field operation means.

Comparing comment management in Drupal 8 and Drupal 7 New!

Screenshot for Comparing comment management in Drupal 8 and Drupal 7

Comment management in Drupal 7 and Drupal 8 is fairly similar, but we point out some important differences.

How to view a list of managed files in the Drupal 8 interface New!

Screenshot for How to view a list of managed files in the Drupal 8 interface

In this video we demonstrate Drupal 8's built-in listing of managed files - something that you would need a contributed module for in Drupal 7.

Comparing the block layout interface in Drupal 7 and Drupal 8 New!
(This one's FREE!)

Screenshot for Comparing the block layout interface in Drupal 7 and Drupal 8

There have been some huge improvements to the block interface in Drupal 8. Here we discuss some of the shortcomings in Drupal 7's block management page and how those have been resolved in 8.

Comparing workflows for adding or enabling a block in Drupal 8 and Drupal 7 New!

Screenshot for Comparing workflows for adding or enabling a block in Drupal 8 and Drupal 7

In Drupal 8, blocks work more like block factories. In Drupal 7, each block could only be used once, but in Drupal 8 a block can have multiple instances that are displayed in different locations and under different conditions. In this video we compare the workflow in both 7 and 8.

Comparing adding custom blocks and block types in Drupal 8 and Drupal 7 New!

Screenshot for Comparing adding custom blocks and block types in Drupal 8 and Drupal 7

Custom blocks in Drupal 8 have been vastly improved from Drupal 7. In addition to being able to create a new block and use multiple instances of it throughout the layout, we can also create new "block types" which include fields just like content types or comment types. Here we demonstrate how these work.

Reviewing the Drupal 8 form builder and comparing it with the Drupal 7 contact module New!
(This one's FREE!)

Screenshot for Reviewing the Drupal 8 form builder and comparing it with the Drupal 7 contact module

Drupal 8 ships with a form builder in the guise of the "contact" module. With it we can create field-able forms whose content gets emailed to form-specific email addresses. In many ways it mimics the contributed Webform module's toolset, which is a huge improvement over the Drupal 7 version of the "contact" module. In this video we compare the two.

Comparing the Webform module to the Drupal 8 form builder New!

Screenshot for Comparing the Webform module to the Drupal 8 form builder

Even though the Drupal 8 form builder is very useful, it's still missing some important features that come bundled with Webform. Here we demonstrate these features so you can figure out if you really need Webform or can use the core form builder instead.

Comparing the account settings in Drupal 7 and Drupal 8 New!

Screenshot for Comparing the account settings in Drupal 7 and Drupal 8

The "account settings" page is fairly similar in Drupal 8, with a few notable exceptions. In this video we outline the chances since Drupal 7.

Comparing user fields in Drupal 8 and Drupal 7 New!

Screenshot for Comparing user fields in Drupal 8 and Drupal 7

In Drupal 8, the user picture is now a field and we can make some additional adjustments to the user information page. Here we walk through the changes in both the field and display settings.

Where to find "IP address blocking" in Drupal 8 New!

Screenshot for Where to find 'IP address blocking' in Drupal 8

Spoiler alert: It's now hidden in the disabled-by-default Ban module.

How the admin role works in Drupal 8 and updated navigation for permssions and roles New!

Screenshot for How the admin role works in Drupal 8 and updated navigation for permssions and roles

I swear, some of these titles are longer than the actual videos. Just a couple adjustments with the admin role in Drupal 8, and a tiny shift in the menu hierarchy and boom! The video's over.

Overview of permission changes in Drupal 8 New!

Screenshot for Overview of permission changes in Drupal 8

In this video we go down the entire list of core permissions in Drupal 7 and Drupal 8 and point out when a permission has been added, removed or moved.

Comparing user shortcut management in Drupal 7 and 8 New!

Screenshot for Comparing user shortcut management in Drupal 7 and 8

User shortcuts in Drupal may not get you out of bed in the morning, but if you rely on them for your admin workflow, we're covering the Drupal 8 changes here.

Comparing taxonomy management in Drupal 7 and 8 New!

Screenshot for Comparing taxonomy management in Drupal 7 and 8

Not a ton has changed in regards to the taxonomy management page in Drupal 8, but we walk through the few changes there are.

Reviewing differences in the modules listing page and module disabling process New!
(This one's FREE!)

Screenshot for Reviewing differences in the modules listing page and module disabling process

If you're used to the process of disabling and uninstalling a module in Drupal 7, then Drupal 8's interface might be a little confusing. In 8, the disabling and uninstalling process has been merged into a single action, making it more straightforward, but also meaning that there's now no way to just disable a module without losing the data associated with it. Here we talk about this important change as well as a few differences in the modules listing layout.

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.