Class Resources List - J4502-SS19/class GitHub Wiki

Here you'll find a list of class resources that will help you through various assignments. Check back as this page will be frequently updated.

Books

• Resilient Web Design
• How to Code in HTML5 and CSS3

Web Philosophy and History

• A Dao of Web Design
• The Slow Web
• The Web We Have To Save
• Continuum
• The Long Web
• An Oral History of the Hamburger Menu
• What Comes Next is the Future
• What We Get Wrong About Technology
• 12 Things Everyone Should Understand about Tech
• Sarah Parmenter for coders, designers and really anyone with dreams in general.
• The Missing Building Blocks of the Web
• The Building Blocks of the Indie Web
• Dear Developer: The Web Isn't About You

Designing With Kindness

• Inadvertent Algorithmic Cruelty
• Well, That Escalated Quickly
• Content For Kindness
• What Would a Human Do?
• Instagram uses 'I will rape you' post as Facebook ad in latest algorithm mishap
• Creating distraction free reading experiences

Accessibility

• Inclusive Design (Microsoft)
• Vox Media Accessibility Guidelines
• Getting Started with VoiceOver
• Empathy Prompts
• Designing for Accessibility (SOFLUX)
• Accessibility is Not Enough
• Building Accessible Websites and Apps is a Moral Obligation
• All technology is assistive

Design Philosophy

• Style Versus Design
• Object-Oriented UX
• What the Heck Is Inclusive Design?
• BBC Global Experience Language
• Content As Medium
• Web Design: The First 100 Years
• Discourse in Web Design
• How Designers Destroyed the World
• Researching Design Systems
• On Writing Less Damn Code
• Content Display Patterns
• Design Patterns for Humans
• Why Data is Never Raw

Git and Github References

• Git Tutorials
• A Guide to Using Github Pages
• Github Pages (Official Guide)

HTML References

• HTML Tutorial
• HTML tag definitions
• HTML Validator
• Marksheet, an HTML reference
• Don't Fear the Internet
• Web Platform Docs
• Elements of HTML (from the W3C)
• HTML5 Please
• Dive Into HTML5

CSS References

• Rachel Andrews' Guide to CSS Layout
• Resilient CSS
• Learn Layout
• CSS Font Sizing
• CSS Validator
• Can I still use "px"?
• CSS3 Cheat Sheet
• Vertical Alignment in CSS
• Using Viewport Units in CSS
• Positioning
• Backgrounds
• Transparent Backgrounds

Miscellaneous CSS Tricks and Fun Stuff

• Quick Reminder that Details/Summary is the Easiest Way Ever to Make an Accordion
• Javascript Free Accordions
• Three ways to build Crouwel's Hiroshima poster in CSS
• Create a Sticky Hero Section with CSS

Grid (Background) References

• CSS Grid Builder
• Grid Calculator
• The Infinite Grid

Image References

• Responsive Image Breakpoints Generator
• Awesome, Free, Customizable SVG Icons

Flexbox

• Learn Layout: Flexbox
• Flexbox Froggy
• A Complete Guide to Flexbox
• A Visual Guide to CSS3 Flexbox Properties
• Dive Into Flexbox
• CSS Writing Mode (Vertical type) explainer

Grid (CSS Specification)

• Labs by Jen Simmons
• Grid By Example
• Grid Cheat Sheet
• Adding Grid to an existing design
• CSS Grid Garden
• Here's a Super Quick Way to Try out CSS Grid
• CSS Grid Gotchas and Stumbling Blocks
• This website now uses Grid layout
• CSS Grid Layout & Flexbox City (big link dump from Zeldman)
• Flexbox and Grids, your layout’s best friends
• Best Practices for Grid Layout

JavaScript

• PlainJS
• Robust JavaScript
• Eloquent JavaScript

Typography

• Web Design Is 95% Typography
• Butterick's Practical Typography
• Thinking With Type
• Professional Web Typography
• Font Joy (Font Picker)
• The Equilateral Triangle of a Perfect Paragraph
• Type Connection (A Typography Dating Game)
• Jason Santa Maria at AEA: "On Web Typography"
• Typograph: Scale and Rhythm
• Jessica Hische's Gatsby type game
• Intro to Font Metrics
• Why San Francisco, part 1 (type primer)
• Fonts In Use
• A Visual Lexicon
• A Few Basic Typefaces
• Why do pull quotes exist on the web?
• Web Safe Fonts from W3
• Turning Type Sideways

Browser Testing

• Can I Use _____?

Content Blocking

• Content Blocking Primer
• Tab Closed, Didn't Read
• Helping Users Easily Access Content on Mobile

Bad Computing

• Programming Sucks
• Everything Is Broken
• The Internet with a Human Face
• The Website Obesity Crisis

Journalism Games

• ReBuilding Haiti
• Pirate Fishing
• Pirate Fishing Story

Design Inspiration

• Stuck Kids
• The Merchant Fleet of Late Medieval and Tudor England, 1400–1580
• Color Wheels, Charts and Tables Throughout History

Nontraditional paging:

• The Serengeti Lion
• Borderland

Meant to be seen, not read:

• Trump's Lies
• Every time Ford and Kavanaugh dodged a question, in one chart

Annotations:

• A field guide to the musical leitmotifs of Star Wars
• Elizabeth Wurtzel on discovering the truth about her parents

Big animations:

• Can China Turn the Middle of Nowhere Into the Center of the World Economy?
• Data Ghosts
• Stuck in Seattle
• The History of the Option

Maps:

• US Land Use

Other:

• Notre Dame fire
• WaPo on solar eclipses
• Summers Are Getting Hotter
• Captain DaCosta
• Ship Map
• A Single Div
• Dogs of NYC
• Beyond the Breach
• Overlooked
• Dallas Pension Fund Explainer
• MLB Launch Angles
• SB Nation's World Cup Bracket 2014
• The Web is Read/Write
• The Ada Initiative
• Polar Bear Selfies

AR/VR/360 experiences

• The Winning View from Chicago
• A Year In Bloopers
• House to House: The Battle for Mosul (AP)
• Life on Mars (NYT)
• Capturing Everest (SI)
• Greenland Melting
• Beneath These Restless Skies
• Eisenhower VR (US Navy)
• Apple ARKit
• Intro to ARKit (WWDC)

Coaching Resources

• Digital Women Leaders
• News Nerdery (Site and Slack channel)
• IRE Listservs
• An editors guide to creating an online portfolio

Video Inspiration

• Jeffrey Zeldman: 20 years of Web Design and Community
• The Future Mundane
• Webstock ‘13: Mike Monteiro - How Designers Destroyed the World
• Resilience by Jeremy Keith

Google Maps API and tutorial information

• Using Google Fusion tables to build maps
• Google Maps documentation guide
• Google News Lab reporting tools
• Google Street View resources
• Streetview Embed
• Streetview Embed on Github
• Embedding VR view from Google

Mapping and Visualization

• Always Make A Map (But Don't Always Publish It)
• The Data Visualization Catalogue
• Ann K. Emery's Chart Choosing Tool

Service Workers

• Minimal Viable Service Worker
• Service Worker Resources

Embedding Youtube and Twitter

• Fluid Width Video
• Twitter Publish

Great Style Guides or Brand Guidelines

• BBC GEL
• The Guardian's Design Guide
• Yelp
• Heroku
• Github
• Apple HIG
• Google Android Guidelines
• Dropbox
• Twitter

Creative Brief Resources:

• UI Names
• UI Faces
• UI Goodies

Storyboard Resources

• Prototyping: Fake It Till You Make It (Apple)
• Interface Sketch Templates
• Draw.io sketching website
• Sneakpeekit (printable grids for drawing)

One-Liners

• If someone from the 1950s suddenly appeared today, what would be the most difficult thing to explain to them about life today?
• Do websites need to look exactly the same in every browser?
• Should I use a carousel?
• How To Pronounce "Gif"
• "Typography isn't a pressing issue"

Resources from panel

• Making Data Approachable for Younger Audiences
• First Jupyter/Python Notebook

Wordpress Help

• Google Fonts for Wordpress plugin