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

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.

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.