Front-End Web Development Lesson 12 Review & Refactor
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