Articles, Links, and Tools From An Event Apart Chicago 2017
Links, articles, tools, resources, and information from the speakers at An Event Apart Chicago 2017.
Community
- @aneventapart Twitter feed
- An Event Apart Facebook
- An Event Apart Google+
- Eventifier
- Twitter Search: #aeachi (AEA Chicago hashtag)
Speaker Links and Resources
Jeffrey Zeldman
- Sharing Our Work: Testing and Feedback in Design by Jessica Harllee
- A Primer on A/B Testing by Lara Hogan
- What Really Matters: Focusing on Top Tasks by Gerry McGovern
- Interviewing Humans by Erika Hall
- Managing Feature Requests by Rachel Andrew
- Beyond Goals: Site Search Analytics from the Bottom Up by Lou Rosenfeld
- Beyond Usability Testing by Devan Goldstein
- Design, White Lies & Ethics by Dan Turner
- The Distance to Here by Rian van der Merwe
- Connected UX by Aarron Walter
- Being Real Builds Trust by Steph Hay
- Audiences, Outcomes, and Determining User Needs by Corey Vilhauer
- Product Management for the Web by Kristofer Layon
- Testing Content by Angela Colter
- Quick and Dirty Remote User Testing by Nate Bolt
- Internal Site Search Analysis: Simple, Effective, Life Altering! by Avinash Kaushik
- 10 Fundamental Web Analytics Truths: Embrace 'Em & Win Big by Avinash Kaushik
- Is Conversion Rate Enough? It's A Good Start, Now Do More! by Avinash Kaushik
- Analyze This: 5 Rules For Awesome Impromptu Web Analysis by Avinash Kaushik
- How to Conduct Competitive Research by Inc. staff
- 10 Tips on How to Research Your Competition by Darren Dahl
- Book: Just Enough Research by Erika Hall
- How We Write Proposals in My Design Studio by Jeffrey Zeldman
Cameron Moll
Case Studies & Examples
Principles of Unity
Design System Examples
Prototyping Tools
PWAs
Mike Davidson
Chris Coyier
I have a book! It’s called Practical SVG.
Some good SVG primers
- Using SVG
- Everything You Need To Know About SVG
- Can I use… data for Basic SVG Support
- Make the Logo Bigger (Chrome Extension)
Graphs & Charts in SVG
- How to Make Charts with SVG
- Highcharts
- Animated SVGs: Custom easing and timing
- Chartist.js, An Open-Source Library For Responsive Charts
- Codepen: Interactive SVG Info Graph
- Codepen: Simple SVG Charts
- amCharts
SVG Shape Morphing
- How SVG Shape Morphing Works
- MorphSVG Greensock plugin
- Codepen: Donald Trump's Signature Morphing Into a Buttface
- Codepen: Mobiltelefonens Evolution (SVG Shape Morphing)
- Codepen: Shape Morph in CSS with d: path() + :active state
- The SVG
pathSyntax: An Illustrated Guide - Codepen: Simple Path Examples
- bodymovin - after effects to html library
- svg jou jou monster
SVG Line Drawing
Animating Interfaces
- Transitional Interfaces, Coded
- Codepen: SVG Page Hopper
- Codepen: SVG Balloon Slider
- Animating an SVG Menu Icon with Segment
- Codepen: morphing shape with spinning color stroke (svg + canvas)
- Loaders and Spinners
- Codepen: Morning Commute
- Codepen: Day 090 - Equalizer - version 1
- Codepen: Musical Chord Progression Arpeggiator
- Codepen: SVG Animated Guitar (Play Me!)
- Codepen: SVG Animated Bucket Drums
SVG Icon Systems
Art
- Codepen: BB8 from Starwars️ – with SVG & GSAP
- Codepen: SVG Fire
- Codepen: Mr. Potatohead SVG
- Codepen: Alex the CSS Husky
- Codepen: microlife
- Codepen: #Codevember 08 - Animated SVG Turbulence Filter
- Kubist
- Codepen: SVG Animated Low Poly Tiger
Diagrams
- Olympic Feathers
- film flowers
- The anatomy of responsive images
- The SVG
pathSyntax: An Illustrated Guide - SVG
textand Small, Scalable, Accessible Typographic Designs - Codepen: My First SVG Banner Ad
Headline Lockups
SVG in the Real World
- Tweet by Tami Brass
- Codepen: no sprite, no JS heart animation - click it!
- Codepen: Twitter Birthday Heart Animation in SVG
- Boxcar Press
Explain Your Product
Val Head
UI Animation Newsletter
Design Systems & Animation Tips
Traditional storyboarding
Rachel Andrew
- Code Collection of examples used
- Boring CSS
- Glish CSS
- The Noodle Incident Box Lessons
- Fractal
- Using Feature Queries in CSS
- CSS Grid Specification
- Flexbox Specification
- Box Alignment Specification
- CSS Shapes Specification
- Can I Use
- Being Where the People Are - a post about vendor prefixes
- Grid by Example
- MDN Grid Guides
- Box Alignment Cheatsheet
- Grid Fallbacks and Overrides Cheatsheet
Jen Simmons
- Examples from this talk
- A giant list of links to resources for learning CSS Grid
- Jen Simmons, The benefits of learning how to code layouts with CSS
- Jen Simmons, Six Layout Myths Busted
- Layout Land
- Video of Jen Simmons’ 2015 talk, Modern Layouts: Getting Out Of Our Ruts
- Video of Jen Simmons’ 2016 talk, Revolutionize Your Page: Real Art Direction on the Web
- Book recommendation, Graphic Design the New Basics
- The Vignelli Canon (free PDF)
- Mark Boulton, A Richer Canvas
- Mark Boulton, Five Simple Steps to Designing Grid Systems, Part 1
- The Marber example at Grid Set App (and find others, along with blog posts at https://gridsetapp.com)
- Nathan Ford, Content Out Layout
- Jen Simmons, CSS Writing Modes
- Jen Simmons, Using Feature Queries in CSS
- Grid Garden, a game for learning bits of CSS Grid
- An article on Fan Ho, the Hong Kong photographer with the beautiful vertical images
- Information on how to use CSS Grid and support Internet Explorer and browsers that don’t support Grid.
Eric Meyer
- Amazon AWS S3 outage is breaking things for a lot of websites and apps
- http://meyerweb.com/eric/thoughts/2016/12/08/not-on-this-day/
- Keith J. Grant’s tweet about unknowns
- Bug #14530 — “Cheatin’, uh?” is not helpful feedback for users or developers
- Bug #38332 — “Cheating” message insults; needs changing
- ‘Pokemon Go’ players stumble on hidden history
- ‘Pokemon Go’ Players Accidentally Cross Illegally Into U.S. From Canada
- From Bosnian Minefields To Iraqi War Zones, Pokemon Go Players Know No Bounds
- BURGER KING® | Connected Whopper®
- Google blocks invasive Burger King ad from taking over Google Home
- TV news report about unwanted Alexa orders triggers unwanted Alexa orders
- Inclusive - Microsoft Design
- Design for Real Life
Una Kravets
- Google Mobile Perf Study Results
- Internet Usage in India
- Wikipedia
- Progressive Rendering
- Putting your Images on a Diet
- WebP Documentation
- Video on WebP
- Zamzar Online Converter
- Homebrew
- BPG Web Encoder
- FLIF Format
- FLIF Polyfill
- magick-loader
- gulp-gm
- grunt-imagemagick
- node-imagemagick
- SVGOMG
- Comparing File Formats
- Introducing GIFV
- Social Media Sizes Cheat Sheet
- “Blur-Up” Technique
- Medium’s Image Loading Technique
- iOS Video Autoplay News
- Facebook Image Loading Technique
- Picturefill
- una.im/CSSgram
- Guetzli Compression
- Nginx Caching
- Cloudinary