Join Morten Rand-Hendriksen for an in-depth discussion in this video Using the exercise files, part of Developing for Performance: HTTP/2.
- View Offline
- [Voiceover] This course is intended as an intro to performance optimization with HTTP/2. So if you want to, you can just sit back and watch. Or, if you want to follow along with your own code, I've created exercise files for you. To use them, you need a code editor like Atom, and a working command line with Node.js support. More on that later in the course. So here's how you use the exercise files. First, download them from the course page and place them somewhere on your computer. You'll get this folder, and inside you have individual folders for each of the movies.
Now, not every movie will have exercise files. The files only exist for movies where there's actual code or other assets that you can work with. The majority of examples that you'll get in this course rely on command line tools that are powered by NPM, or the Node Package Manager. So if you go into, say 03_05, you'll see here we have a Grunt file with the Grunt tasks, a Gulp file with Gulp tasks, and package.json. Now, if you want to follow along step by step, here's what I recommend you do. Don't work straight out of the exercise files folder.
Instead, create a new folder for yourself. Call it something like my_project, and then copy the files from the exercise files, into the my_projects folder. From here on forward, you'll always be working out of the my_projects folder. Now here's why you want to do this. If you go look at the files in 03_05, and in particular package.json, you'll see the project has a set of devDependencies. These are node modules we need to have installed to be able to run all our processes. We have autoprefixer, and grunt, gulp, and gulp-postcss, and gulp-webserver, and so on.
Now all these have to be installed into your folder, for everything to work properly. And I can't ship these modules because they're gigantic, and if we ship them, you would never be able to install them onto your computer. So you have to install these manually through NPM. Now once you start off with 03_05, and place the files into the my_projects folder, run NPM on all of these different packages to get them installed inside the my_project folder. Then, when you move onto another movie, where you have new packages, say 03_07, simply copy all the files from 03_07, and paste them into my_projects folder.
This will overwrite anything you already have in my_project, except it will not touch the node modules folder. Then, all you have to do to get up to date on the current movie, is open package.json, check out if there are any new dependencies. There usually are for each movie. Install those through NPM, and you'll be able to keep going. That way you only need to install the node modules once, and you can still use the exercise files as you move forward in the course. So, create a new folder for your own project, dump the exercise files for the current movie you are working with into that folder, install the node modules, and you're good to go.
- What is website optimization?
- Understanding how browsers render content
- Measuring performance
- Optimizing images
- Optimizing code
- Compressing data with GZIP
- Optimizing file caching
- Leveraging CDNs