Professional Documents
Culture Documents
CSCE 120: Learning To Code: Organizing Code II Hacktivity 13.1
CSCE 120: Learning To Code: Organizing Code II Hacktivity 13.1
Organizing Code II
Hacktivity 13.1
Introduction
Prior to engaging in this hacktivity, you should have completed all of the pre-class ac-
tivities as outlined in this module. At the start of class, you will be randomly assigned
a partner to work with on the entirety of this hacktivity as a peer programming activity.
Your instructor will inform you of your partner for this class.
One of you will be the driver and the other will take on the navigator role. Recall that a
driver is in charge of the keyboard and computer while the navigator is in charge of the
handout and directing the activity. However, you are both responsible for contributing
and discussing solutions. If you were a driver/navigator in the prior activity, switch roles
for this activity.
1 Knowledge Check
1. What is a CDN?
2. Describe what hotlinking is; discuss the advantages and disadvantages of hotlinking
versus keeping a local copy of an asset in your project.
3. What is a minifier?
4. What is a transpiler?
5. What is a polyfill?
1
2 Project Organization
We have provided a nearly complete version of the Albums App from a previous module.
You will reorganize this project in several ways. To start, download the code weve
provided from GitHub using the URL, https://github.com/cbourke/AlbumsApp and
open the project in Light Table and evaluate the HTML file to reference how the page
should look (its not entirely functional yet).
All of the assets for the application are in the same root folder. Typically, different
types of assets are collected in different folders for organization.
1. Create an assets folder in your project as well as several subfolders to hold your
images, CSS file(s), and JavaScript file(s). Move each type of file into its respective
folder.
2. Since you moved some of the files, you will now need to make appropriate changes
to the index.html file to reference the new locations.
The application uses the jQuery, jQuery UI, and Bootstrap libraries, but does so by
loading them from a Content Delivery Network (CDN). We will now localize these
libraries by downloading them and using local copies.
Assuming you have everything correct, try the application out. Try adding an album.
Youll find that it does not work. This is because the app uses some features of EC-
2
MAScript 6 (ES6) and Light Table only supports ES5. To contrast, try opening the
index.html file in your favorite browser and try it out.
Though many browsers support ES6, we want to ensure that our application will work
in all browsers. However, we shouldnt let this prevent us from programming in the
latest versions and using the latest features of JavaScript. One solution would be to
use a transpiler such as Babel (https://babeljs.io/) to translate our ES6 code into
ES5-compliant code. However, this is a bit beyond this module.
Instead, well use a polyfill to enable the functionality that we wish to use.
Lets now make our applications JavaScript file more compact by minifying it.
5. Change the index.html to use this minified version instead of the original.
Similarly, minify the CSS file using the following online CSS minifier: http://cssminifier.
com/
That was a lot of work. Fortunately, there are many other technologies and frameworks
that make it easier. For example, build tools such as Grunt http://gruntjs.com/ can
be used to automate these processes.
3
3 Sharing Your Project
In the next hacktivity, well be using Git to share and collaborate on code. With the
time remaining and between now and the next hacktivity be sure to have registered with
GitHub and installed GitHubs client.