Front-EndWeb Development

Lesson 12Review & Refactor

Agenda

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

The Road Ahead

Remaining Topics:● Responsive design● HTML forms● jQuery animation

Refactor

Making code more efficient without changing functionality.

Refactor

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

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

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

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

JavaScript Refactor● Combine jQuery selectors● Combine jQuery property changes into

objects○ .css, .attr, etc.

● Chain jQuery function calls

Keyword: “This”

jQuery: “this” refers to the selected object.toggleClass() example:

$( "p" ).click(function() {$( this ).toggleClass( "highlight" );

});

Keyword: “This”

Advanced reading:

The “this” keyword

Debugging

Why isn’t this working?

Debugging

Always start by defining the problem:● “The image is not moving.”

● “None of my code works.”

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

Debugging: Level 1

Access debugging console in ChromePC: CTRL + SHIFT + JMac: COMMAND + OPTION + J

Check for errors (red text, aligned right) in console

Debugging: Level 2

So no red errors but not getting the right answer?

Try console.log

Debugging: Level 3Homework:

● Chrome DevToolsa. Debugging JavaScript

Debugging: Level 4Get help:

● Google search● Access forums (Stack Overflow)

○ Clearly articulate the problem○ Provide links or code examples

Explore Plugins

The jQuery Plugin Registry

Search Registry: Cycle2Google: Cycle2 plugin

Google: Image Slider Using jQuery Cycle2 Plugin

Code Along

Image Slider Using jQuery Cycle2 Plugin

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

Lab: Personal Projects

Milestones:1. Project Proposal / Wireframes

○ Session 12 -- Monday, January 6, 20142. Some Coding with Pseudo Code

○ Session 14 -- Monday, January 13, 20143. First Draft

○ Session 16 -- Wednesday, January 22, 2014

Lab: Personal Projects

Target Dates:1. Session 19 | Project Lab

○ Monday, February 3, 20142. Session 20 | Presentations

○ Wednesday, February 5, 2014