For the More Curious: Common Solutions (and Bugs) with Flexbox Layouts
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
Philip Walton is a developer who maintains two very important flexbox resources. The first is the Solved by Flexbox site (philipwalton.github.io/solved-by-flexbox), which offers demos of common layouts implemented using flexbox and all the information you need to create them yourself. Some of the layouts are very difficult to achieve without flexbox.
The second resource is the Flexbugs page at github.com/philipwalton/flexbugs. Flexbox is wonderful, but it is not perfect. Flexbugs provides solutions and workarounds for common problems that developers run into when using flexbox. The information is provided by members of the development community who have encountered these bugs, and the list is well maintained.
-
No Comment