Top Banner
Front-End Web Development Lesson 12 Review & Refactor
23
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Lesson 12

Front-EndWeb Development

Lesson 12Review & Refactor

Page 2: Lesson 12

Agenda

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

Page 3: Lesson 12

The Road Ahead

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

Page 4: Lesson 12

Refactor

Making code more efficient without changing functionality.

Page 5: Lesson 12

Refactor

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

Page 6: Lesson 12

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

Page 7: Lesson 12

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

Page 8: Lesson 12

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

Page 9: Lesson 12

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

objects○ .css, .attr, etc.

● Chain jQuery function calls

Page 10: Lesson 12

Keyword: “This”

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

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

});

Page 11: Lesson 12

Keyword: “This”

Advanced reading:

The “this” keyword

Page 12: Lesson 12

Debugging

Why isn’t this working?

Page 13: Lesson 12

Debugging

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

● “None of my code works.”

Page 14: Lesson 12

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

Page 15: Lesson 12

Debugging: Level 1

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

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

Page 16: Lesson 12

Debugging: Level 2

So no red errors but not getting the right answer?

Try console.log

Page 18: Lesson 12

Debugging: Level 4Get help:

● Google search● Access forums (Stack Overflow)

○ Clearly articulate the problem○ Provide links or code examples

Page 19: Lesson 12

Explore Plugins

The jQuery Plugin Registry

Search Registry: Cycle2Google: Cycle2 plugin

Google: Image Slider Using jQuery Cycle2 Plugin

Page 22: Lesson 12

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

Page 23: Lesson 12

Lab: Personal Projects

Target Dates:1. Session 19 | Project Lab

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

○ Wednesday, February 5, 2014