Bronze Challenge: Adding Visual Effects to Messages
by Todd Gandee, Chris Aquino
Front-End Web Development: The Big Nerd Ranch Guide
- Title Page
- Acknowledgments
- Table of Contents
- Dedication
- Introduction
- I. Core Browser Programming
- 1. Setting Up Your Development Environment
- 2. Setting Up Your First Project
- 3. Styles
- 4. Responsive Layouts with Flexbox
- 5. Adaptive Layouts with Media Queries
- 6. Handling Events with JavaScript
- Preparing the Anchor Tags for Duty
- Your First Script
- Overview of the JavaScript for Ottergram
- Declaring String Variables
- Working in the Console
- Accessing DOM Elements
- Writing the setDetails Function
- Returning Values from Functions
- Adding an Event Listener
- Accessing All the Thumbnails
- Iterating Through the Array of Thumbnails
- Silver Challenge: Link Hijack
- Gold Challenge: Random Otters
- For the More Curious: Strict Mode
- For the More Curious: Closures
- For the More Curious: NodeLists and HTMLCollections
- For the More Curious: JavaScript Types
- 7. Visual Effects with CSS
- II. Modules, Objects, and Forms
- 8. Modules, Objects, and Methods
- Modules
- Setting Up CoffeeRun
- Creating the DataStore Module
- Adding Modules to a Namespace
- Constructors
- Creating the Truck Module
- Debugging
- Initializing CoffeeRun on Page Load
- Bronze Challenge: Truck ID for Non-Trekkies
- For the More Curious: Private Module Data
- Silver Challenge: Making data Private
- For the More Curious: Setting this in forEach’s Callback
- 9. Introduction to Bootstrap
- 10. Processing Forms with JavaScript
- 11. From Data to DOM
- 12. Validating Forms
- 13. Ajax
- 14. Deferreds and Promises
- 8. Modules, Objects, and Methods
- III. Real-Time Data
- 15. Introduction to Node.js
- Node and npm
- Hello, World
- Adding an npm Script
- Serving from Files
- Error Handling
- For the More Curious: npm Module Registry
- Bronze Challenge: Creating a Custom Error Page
- For the More Curious: MIME Types
- Silver Challenge: Providing a MIME Type Dynamically
- Gold Challenge: Moving Error Handling to Its Own Module
- 16. Real-Time Communication with WebSockets
- 17. Using ES6 with Babel
- Tools for Compiling JavaScript
- The Chattrbox Client Application
- First Steps with Babel
- Using Browserify for Packaging Modules
- Adding the ChatMessage Class
- Creating the ws-client Module
- For the More Curious: Compiling to JavaScript from Other Languages
- Bronze Challenge: Default Import Name
- Silver Challenge: Closed Connection Alert
- For the More Curious: Hoisting
- For the More Curious: Arrow Functions
- 18. ES6, the Adventure Continues
- Installing jQuery as a Node Module
- Creating the ChatForm Class
- Creating the ChatList Class
- Using Gravatars
- Prompting for Username
- User Session Storage
- Formatting and Updating Message Timestamps
- Bronze Challenge: Adding Visual Effects to Messages
- Silver Challenge: Caching Messages
- Gold Challenge: Separate Chat Rooms
- 15. Introduction to Node.js
- IV. Application Architecture
- 19. Introduction to MVC and Ember
- 20. Routing, Routes, and Models
- 21. Models and Data Binding
- 22. Data – Adapters, Serializers, and Transforms
- 23. Views and Templates
- 24. Controllers
- 25. Components
- 26. Afterword
- Index
Give new messages a visual effect. You can fade them in or have them slide in. (Check jQuery’s Effects documentation for options.)
For an added challenge, apply this effect only to truly new messages – not to messages already in the chat that are loaded by the app when users first sign on or refresh their browser.
How can you tell which messages are old and which are new? Each message has a data attribute that can help you tell whether it is more than a second or two old.
-
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.