30 New Videos on Grunt and Accessibility

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.

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.