Web Development Recipes

Modern web development takes more than just HTML and CSS with a little JavaScript mixed in. Clients want more responsive sites with faster interfaces that work on multiple devices, and you need the latest tools and techniques to make that happen. This book gives you more than 40 concise, tried-and-true solutions to today's web development problems, and introduces new workflows that will expand your skillset. You'll see a full spectrum of cutting-edge web development techniques, from UI and eye candy recipes to solutions for data analysis, testing, and web hosting. Make buttons and content stand out with simple cross-browser styles; do animations that work on mobile devices without plugins; build and test HTML emails; and build a flexible layout that works on desktops and mobile devices. You'll use the Backbone and Knockout JavaScript frameworks to build responsive user interfaces, and you'll learn how tools like CoffeeScript and Sass offer better ways to develop and maintain your client-side code. You'll write tests for your code that run in multiple web browsers, use Git to keep track of your work, and even get a little one-on-one time with the Apache web server. Whether you're new to front-end development, or you've got a few years of experience, you'll become a more versatile developer by finding out how--and why--to use these solutions in your next web development project. **What You Need:** Your favorite text editor, Mozilla Firefox 3.5 or higher, Google Chrome or Safari, and a working knowledge of HTML and JavaScript. Cover......Page 1 Table of Contents......Page 6 Acknowledgments......Page 8 Mike Weber......Page 9 Aaron Godin......Page 10 What's in This Book?......Page 11 What You Need......Page 13 Online Resources......Page 14 1. Eye-Candy Recipes......Page 16 Recipe 1. Styling Buttons and Links......Page 17 Recipe 2. Styling Quotes with CSS......Page 21 Recipe 3. Creating Animations with CSS3 Transformations......Page 28 Recipe 4. Creating Interactive Slideshows with jQuery......Page 33 Recipe 5. Creating and Styling Inline Help Dialogs......Page 39 2. User Interface Recipes......Page 48 Recipe 6. Creating an HTML Email Template......Page 49 Recipe 7. Swapping Between Content with Tabbed Interfaces......Page 60 Recipe 8. Accessible Expand and Collapse......Page 67 Recipe 9. Interacting with Web Pages Using Keyboard Shortcuts......Page 74 Recipe 10. Building HTML with Mustache......Page 82 Recipe 11. Displaying Information with Endless Pagination......Page 88 Recipe 12. State-Aware Ajax......Page 94 Recipe 13. Snappier Client-Side Interfaces with Knockout.js......Page 99 Recipe 14. Organizing Code with Backbone.js......Page 108 3. Data Recipes......Page 126 Recipe 15. Adding an Inline Google Map......Page 127 Recipe 16. Creating Charts and Graphs with Highcharts......Page 133 Recipe 17. Building a Simple Contact Form......Page 141 Recipe 18. Accessing Cross-site Data with JSONP......Page 149 Recipe 19. Creating a Widget to Embed on Other Sites......Page 153 Recipe 20. Building a Status Site with JavaScript and CouchDB......Page 159 4. Mobile Recipes......Page 168 Recipe 21. Targeting Mobile Devices......Page 169 Recipe 22. Touch-Responsive Drop-Down Menus......Page 174 Recipe 23. Mobile Drag and Drop......Page 178 Recipe 24. Creating Interfaces with jQuery Mobile......Page 185 Recipe 25. Using Sprites with CSS......Page 194 5. Workflow Recipes......Page 198 Recipe 26. Rapid, Responsive Design with Grid Systems......Page 199 Recipe 27. Creating a Simple Blog with Jekyll......Page 208 Recipe 28. Building Modular Style Sheets with Sass......Page 216 Recipe 29. Cleaner JavaScript with CoffeeScript......Page 224 Recipe 30. Managing Files Using Git......Page 231 6. Testing Recipes......Page 241 Recipe 31. Debugging JavaScript......Page 242 Recipe 32. Tracking User Activity with Heatmaps......Page 248 Recipe 33. Browser Testing with Selenium......Page 251 Recipe 34. Cucumber-Driven Selenium Testing......Page 256 Recipe 35. Testing JavaScript with Jasmine......Page 269 7. Hosting and Deployment Recipes......Page 280 Recipe 36. Using Dropbox to Host a Static Site......Page 281 Recipe 37. Setting Up a Virtual Machine......Page 285 Recipe 38. Changing Web Server Configuration Files with Vim......Page 290 Recipe 39. Securing Apache with SSL and HTTPS......Page 296 Recipe 40. Securing Your Content......Page 300 Recipe 41. Rewriting URLs to Preserve Links......Page 304 Recipe 42. Automate Static Site Deployment with Jammit and Rake......Page 309 Windows......Page 318 Mac OS X and Linux with RVM......Page 319 A2. Bibliography......Page 321 Index......Page 322 " ... Make buttons and content stand out with simple cross-browser styles, do animations that work on mobile devices without plugins, build and test HTML emails, and build a flexible layout that works on desktops and mobile devices. You'll use the Backbone and Knockout JavaScript frameworks to build responsive user interfaces, and you'll learn how tools like CoffeeScript and Sass offer better ways to develop and maintain your client-side code. You'll write tests for your code that run in multiple web browsers, use Git to keep track of your work, and even get a little one-on-one time with the Apache web server ..."--Back cover A full spectrum of cutting-edge web development techniques, from UI and eye candy recipes to solutions for data analysis, testing, and web hosting. Become a more versatile developer by finding out how - and why - to use these in your next web development project