Chapter 1: Modern CSS Architecture and Front-End Development

Written by Harry Roberts

• The Mechanical Revolution
• Amazon revenue
• Twitter boasting 200 million users
• Google employees
• Sky Bet
• Nicholas Gallagher: “Questioning Best Practices”
• “Our CSS best practices are killing us.”
• Object-Oriented CSS
• Nicole Sullivan
• Nicole Sullivan’s GitHub Wiki
• Jamie Mason
• “take care of the bits and the bytes will take care of themselves”
• SMACSS
• Nichole Sullivan’s media object
• Nicholas Gallagher: “About HTML semantics and front-end architecture”
• Jens O. Meiert: “Best Practice for ID and Class Names”
• CSS Wizardry
• “Web Designer Notebook”
• snook.ca

Chapter 2: Writing Maintainable, Future-Friendly Code

Written by Nicholas Zakas

• Google JavaScript Style Guide
• jQuery Core Style Guidelines
• Backbone.js
• SlideShare
• Ember.js
• Handlebars
• Louis Lazaris: “An Introduction to Object-Oriented CSS”
• OOCSS GitHub library
• SMACSS
• jQuery documentation
• Twitter Bootstrap
• Twitter Bootstrap getting started guide
• jQuery tutorials
• YUI library API documentation
• Chromium design documents
• JSDoc
• YUIDoc
• Docco
• KSS
• jQuery Plugin Registry
• NPM Registry
• WP Plugins traffic
• Explanation for blocking the Googlebot from the plugins directory
• http://www.nczonline.net/

Chapter 3: The Vanilla Web Diet

Written by Christian Heilmann

• Moore’s Law
• qooxdoo

Chapter 4: Culture of Performance

Written by Tim Kadlec

• HTTP Archive
• Amazon revenue increase
• Bing revenue decrease
• Mozilla performance improvement
• Shopzilla page load time cut
• “New Survey From Compuware Gomez Reveals Consumers Will Quickly Abandon Slow Websites”
• Abandoning a site after waiting three seconds
• WebPageTest.org
• Brad Frost: “Performance as Design”
• Jakob Nielsen: “Response Times: The 3 Important Limits”
• Keynote performance indices
• Designing and Engineering Time: The Psychology of Time Perception
• “Responsive Design on a Budget”
• Andy Hume: “Anatomy of a responsive page load”
• Slowy
• Charles
• Fiddler
• Brad Frost: “You can’t mock up performance in Photoshop.”
• Atomic Web Design
• Jeff Atwood: “Performance is a Feature”
• Study on default options for organ donors
• Jared Spool: “Do users change their settings?”
• Filament Group’s responsive carousel
• ImageOptim Command Line Interface
• ImageOptim
• ImageAlpha
• SocialCount
• Alex Sexton: Deploying JavaScript Applications
• Why Waiting Is Torture
• Mike Krieger: “Secrets to Lightning-Fast Mobile Design”
• Instagram
• Polar
• Luke Wroblewski
• Christine Perfetti and Lori Landesman: “The Truth About Download Time”

Chapter 5: Robust, Responsible, Responsive Web Design

Written by Mat Marquis

• Oakley
• Average Web page
• Cennydd Bowles: “Designing with context”
• Chris Zacharias: “Page Weight Matters”
• jQuery range slider
• AjaxInclude
• Normalize CSS reset
• Enhance.js
• Respond.js
• eCSSential
• Enhance.js
• Modernizr
• Grunt task-running framework
• QuickConcat
• Average website’s weight statistics
• Average website’s image weight
• Codec support
• Responsive Images Community Group
• Bruce Lawson: “HTML5 Semantics”
• [whatwg] <img srcset> for responsive bitmapped content images
• The srcset Attribute — First Public Working Draft
• Picturefill
• SouthStreet
• randomthink.net

Chapter 6: Finding and Fixing Mobile Web Rendering Issues

Written by Addy Osmani

• Mobile Web performance
• Facebook site performance
• Flickr site performance
• Pinterest site performance
• Images and Web traffic
• WebP
• mod_pagespeed
• ImageOptim
• JPEGMini
• HTML5 Rocks: Performance
• Tom Wiltzius: “Jank Busting For Better Rendering Performance”
• Making a 60fps mobile Web app
• Solving Rendering Performance Puzzles
• Scrolling Performance
• Paul Lewis: “Leaner, Meaner, Faster Animations with requestAnimationFrame”
• Paul Irish: “Why Moving Elements With Translate() Is Better Than Pos:abs Top/left”
• Promoting layers for mobile
• Optimizing scrolling and parallax
• Remote debugging
• http://jsfiddle.net/AxEJY/
• Layout thrashing
• http://jsfiddle.net/k4yM3/
• IE developer tools documentation
• Guide to the UI Responsiveness
• WebKit nightlies
• Jankfree.org

Chapter 7: Designing Adaptive Interfaces

Written by Aaron Gustafson

• Don Norman: Emotion & Design: Attractive things work better, 2002.
• Ben Hoh: “From degradation to enhancement”, Jan 30, 2012.
• Future-friendliness
• Graceful degradation
• Acid 3 test matrix for WebKit
• Do websites need to look exactly the same in every browser?
• Computer History Museum
• “The Shocking Truth About How Web Graphics Affect Conversions”
• Browser width
• employed media query
• Network speed
• Metered connection
• Web thang
• Demolition derby
• Document Outlines
• Web Developer Toolbar
• Github TabInterface.js
• Front end styleguides and pattern libraries
• Responsible deliverables
• PatternLab
• http://www.nczonline.net/
• http://adaptivewebdesign.info
• http://www.computerhistory.org/timeline/

Chapter 8: How to Fix The Web: Obscure Back-End Techniques and Terminal Secrets

Written by Paul Tero

• US Emergency Alert System
• Signal National d’Alerte
• J-Alert
• International Decade for Natural Disaster Reduction
• Power supply
• DNStools.ch
• YouGetSignal
• Apache market share
• Windows server market share
• Series of constants representing different types of errors in PHP
• coderholic.com

Chapter 9: The Next Steps for Web Typography

Written by Marko Dugonjić

• Typekit
• Universal Typography
• Tim Brown: “Breakpoints and range rules”
• Cennydd Bowles: “Designing with Context”
• The Chicago Manual of Style Online
• The Oxford Guide to Style
• UK Government Digital Service content principles
• Widon’t — preprocessor for fixing a widowed word at the end of a paragraph
• Jason Santa Maria’s definition of ‘readability’
• Gerry Leonidas: “The Newest New typography”
• eZ Publish
• National Public Radio
• National Public Radio created an API for its content
• Karen McGrane: “Adapting Ourselves to Adaptive Content”
• Andrew Clarke on responsive Web design
• Marko Dugonjić: “Designing For The Reading Experience”
• Jessica Hische: “Upping Your Type Game”
• Typophile
• 8 Faces magazine
• Commercial Type
• Hoefler & Frere-Jones
• Just Another Foundry
• Monotype Imaging
• Typonine
• Typotheque
• “Font-face rendering problem in chrome and firefox: use postscript outlines”
• Subpixel rendering BGR
• Use The Whole Font
• text-rendering CSS property
• -webkit-font-smoothing test page by Christoph Zillgens
• Text shadows
• text-size-adjust:none prevents text from zooming in
• BBC World Service
• Arabic alphabet
• “The Aesthetics of Reading”
• Candle task
• Remote associates task
• Article readability stats
• Flesch-Kincaid Reading Ease
• Automated Readability Index
• Combining Typefaces
• http://typedia.com/explore
• https://typekit.com/lists
• http://www.fontshop.com/blog/newsletters/fontbookipad/
• Fontcase
• Linotype FontExplorer X Pro
• Everything is a remix
• Font Feed
• Yves Peters: “Two Decades of Trajan in Movie Posters”
• Dubrovnik villas
• reset.css
• 66 characters
• Vasilis van Gemert: “Logical Breakpoints For Your Responsive Design”
• Language-based line lengths
• Baseline.js
• jQuery Baseline Align
• Web Font loader
• Font Squirrel Webfont Generator
• FF Subsetter
• Jeremy Keith on breakpoints
• Adding asterisks
• Lyza Gardner: “The EMs have it: Proportional Media Queries FTW!”
• jQuery plugins
• Responsive containers
• Satisfactory line length
• Tim Brown: “Molten leading (or, fluid line-height)”
• Molten Leading jQuery plugin
• Jon Tan: “12 Examples of Paragraph Typography”
• Smashing Book #1
• CSS3 Text Module Level 3 Working Draft
• Robert Bringhurst: The Elements of Typographic Style
• CSS3 Paged Media Working Draft
• CSS Text Level 4 Editor’s Draft from 2013
• combining pseudo-elements with the content property
• “Non-English usage of quotation marks”
• Automatic numbering to headings
• Modular Scale
• Tim Brown: “More Meaningful Typography”
• Marko Dugonjić: “Setting subheads with CSS”
• Demo page to “Setting Subheads with CSS”
• Anonymous Pro
• Character-based alignment in a table column
• iOS Retina type rendering issue
• Windows ClearType type rendering issue
• Information Architects
• Graded fonts
• Proximity API
• Calculate the distance between a user and the screen

Chapter 10: The Two Faces of Content Strategy: Balancing the Needs of Users and Editors

Written by Corey Vilhauer

• GatherContent
• Editorially
• Switch: How to Change Things When Change is Hard
• Jonathan Kahn: “Start Changing Your Organisation’s Culture Using Storytelling and Startup Techniques”
• Corey Vilhauer: “Audiences, Outcomes, and Determining User Needs”
• Online and On Mission
• Interviewing Users: How to Uncover Compelling Insights
• Design is a Job
• Melissa Rach’s and Kristina Halverson’s definition of strategy
• 101 Things I Learned in Architecture School
• James Robertson: “What Every Intranet Team Should Know”
• Jeff Eaton: “When Editors Design”
• Getting Things Done
• http://www.eatingelephant.com
• Black Marks on Wood Pulp

Chapter 11: Supporting Your Product

Written by Rachel Andrew

• Seth Godin: “Winning on the uphills”
• Perch
• Jim Rohn Twitter quote
• UserVoice
• Bootstrapped podcast
• UserScape
• HelpSpot
• Marilyn Suttle: “Customer Perceptions Matter More than the Truth”
• ExpressionEngine
• Rethinking Tech Support
• Thackerays
• Snappy
• Building A Better Human Helper
• Noah Lang: “Behind the Scenes: Twitter, Part 1”
• Support Ops
• Customer Complaints and Types of Customers
• Help Scout blog
• 37signals blog posts on customer support
• “Taking A Customer From Like To Love: The UX Of Long-Term Relationships”
• Bootstrapped
• rachelandrew.co.uk
• http://edgeofmyseat.com

Chapter 12: The Design of People

Written by Nishant Kothary

• Bruce Schneier: “Risk and the Brain” (PDF)
• Underestimating the time estimated needed to ship a product
• FORA.tv
• http://rainypixels.com/thereadinglist
• Minky

Chapter 13: On Creative Spirit

Written by Christopher Murphy

• Dream day
• 3M: “A Culture of Innovation”
• The Overnight Test
• Pretty Sketchy
• Gimme Bar
• Instapaper
• Instagram
• Rutger’s archive
• Dilbert
• The d.school
• The d.school’s napkin manifesto
• “Make a Space for Innovation”
• Make Space
• Erik Spiekermann on The Centralised Office
• Bloxes

Errata

Although we tried to do our best to avoid any mistakes or errors in the book, we did make some mistakes. We apoplogize for that. Here is the list of the mistakes we’ve found so far (you can also report mistakes and errors in the book):

• Page 133:
  var timing = performance.timing || {};
if (timing) { // <= This conditional will always pass
    var load_time = now - timing.navigationStart;
console.log('Load time: ' + load_time + 'ms');
}
• Page 230, “Images embedded using data URIs are typically three times larger than their binary equivalents”: Actually they are ∼ 137% larger. See Wikipedia.
• Page 338, “lacking support for more advanced features (e.g. data URI in IE6–8)”: Actually data URIs are supported in IE8 (source).
• Page 394: The sentence “Despite these hardships, he still likes to write at length about methodology, empathy and small business content strategy at www.eatingelephant.com Elephant (http://www.eatingelephant.com)” should actually be “Despite these hardships, he still likes to write at length about methodology, empathy and small business content strategy at Elephant (http://www.eatingelephant.com)”
• Page 476: The sentence “When you do, a suprising thing will happen.” should be “When you do, a surprising thing will happen.”