Lesson 12

304 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
304
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lesson 12

  1. 1. Front-End Web Development Lesson 12 Review & Refactor
  2. 2. Agenda ● ● ● ● ● ● Refactor This Keyword Debugging Techniques Explore Plugins Lab: Personal Projects BCS National Championship
  3. 3. The Road Ahead Remaining Topics: ● Responsive design ● HTML forms ● jQuery animation
  4. 4. Refactor Making code more efficient without changing functionality.
  5. 5. Refactor Purpose: ● to reduce or eliminate redundancy ● to make code easier to read ● to make code more manageable
  6. 6. CSS Refactor ● ● ● ● ● Remove inline styling Replace repeated styles with classes Rename classes/ids for readability Organize CSS more ...
  7. 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. 8. JavaScript Refactor ● ● ● ● Use functions Use variables Use arrays more ...
  9. 9. JavaScript Refactor ● ● Combine jQuery selectors Combine jQuery property changes into objects ○ ● .css, .attr, etc. Chain jQuery function calls
  10. 10. Keyword: “This” jQuery: “this” refers to the selected object. toggleClass() example: $( "p" ).click(function() { $( this ).toggleClass( "highlight" ); });
  11. 11. Keyword: “This” Advanced reading: The “this” keyword
  12. 12. Debugging Why isn’t this working?
  13. 13. Debugging Always start by defining the problem: ● “The image is not moving.” ● “None of my code works.”
  14. 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. 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. 16. Debugging: Level 2 So no red errors but not getting the right answer? Try console.log
  17. 17. Debugging: Level 3 Homework: ● Chrome DevTools a. Debugging JavaScript
  18. 18. Debugging: Level 4 Get help: ● Google search ● Access forums (Stack Overflow) ○ Clearly articulate the problem ○ Provide links or code examples
  19. 19. Explore Plugins The jQuery Plugin Registry Search Registry: Cycle2 Google: Cycle2 plugin Google: Image Slider Using jQuery Cycle2 Plugin
  20. 20. Code Along Image Slider Using jQuery Cycle2 Plugin
  21. 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. 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. 23. Lab: Personal Projects Target Dates: 1. Session 19 | Project Lab ○ Monday, February 3, 2014 2. Session 20 | Presentations ○ Wednesday, February 5, 2014

×