1. Front-End
Web Development
Lesson 12
Review & Refactor

2. Agenda
●
●
●
●
●
●
Refactor
This Keyword
Debugging Techniques
Explore Plugins
Lab: Personal Projects
BCS National Championship

3. The Road Ahead
Remaining Topics:
● Responsive design
● HTML forms
● jQuery animation

4. Refactor
Making code more efficient without changing
functionality.

5. Refactor
Purpose:
● to reduce or eliminate redundancy
● to make code easier to read
● to make code more manageable

6. CSS Refactor
●
●
●
●
●
Remove inline styling
Replace repeated styles with classes
Rename classes/ids for readability
Organize CSS
more ...

7. CSS Refactor
●
●
●
●
Group by section
Order by precedence (tag selectors at top, id
selectors at bottom)
Create classes for large CSS changes in JS
Remove unnecessary CSS

8. JavaScript Refactor
●
●
●
●
Use functions
Use variables
Use arrays
more ...

9. JavaScript Refactor
●
●
Combine jQuery selectors
Combine jQuery property changes into
objects
○
●
.css, .attr, etc.
Chain jQuery function calls

10. Keyword: “This”
jQuery: “this” refers to the selected object.
toggleClass() example:
$( "p" ).click(function() {
$( this ).toggleClass( "highlight" );
});

11. Keyword: “This”
Advanced reading:
The “this” keyword

12. Debugging
Why isn’t this working?

13. Debugging
Always start by defining the problem:
● “The image is not moving.”
●
“None of my code works.”

14. Debugging
Always start by defining the problem:
● “The image is not moving.”
○ Find the code that makes the image move
●
“None of my code works.”
○ Syntax error: check console

15. Debugging: Level 1
Access debugging console in Chrome
PC: CTRL + SHIFT + J
Mac: COMMAND + OPTION + J
Check for errors (red text, aligned right) in
console

16. Debugging: Level 2
So no red errors but not getting the right
answer?
Try console.log

17. Debugging: Level 3
Homework:
●
Chrome DevTools
a.
Debugging JavaScript

18. Debugging: Level 4
Get help:
● Google search
● Access forums (Stack Overflow)
○ Clearly articulate the problem
○ Provide links or code examples

19. Explore Plugins
The jQuery Plugin Registry
Search Registry: Cycle2
Google: Cycle2 plugin
Google: Image Slider Using jQuery Cycle2 Plugin

20. Code Along
Image Slider Using jQuery Cycle2 Plugin

21. Explore Plugins
How to Add Carousel (Slider) to a Website
Using Caroufredsel
Getting Started with jQuery Masonry
Creating a Parallax Scrolling Webpage Using
Jarallax.js

22. Lab: Personal Projects
Milestones:
1. Project Proposal / Wireframes
○ Session 12 -- Monday, January 6, 2014
2.
Some Coding with Pseudo Code
○ Session 14 -- Monday, January 13, 2014
3.
First Draft
○ Session 16 -- Wednesday, January 22, 2014

23. Lab: Personal Projects
Target Dates:
1. Session 19 | Project Lab
○ Monday, February 3, 2014
2.
Session 20 | Presentations
○ Wednesday, February 5, 2014