My curated lists of useful stuff
#TODO
##Styleguides / Design Systems
- Color in Design Systems
- Style Guide Best Practices
- Building a Pattern Library
- BBC GEL
- Starbucks
- Mozilla Style Guide
- Style Guides are the new Photo Shop
- Styleguide and Boilerplate Comparison
- Intuit Kitchen Sink*
##UX / Process / Workflow
- UX Methods and Deliverables
- Flexible Design Prototyping
- Prototype: How to Previsualize the Experience - UX How
- Interface Inventory
- Atomic Design
- Atomic Design Presentation
- The ULTIMATE List of 24 Free eBooks on UX and Interface Design
- Style Tile Browser
- Excuses to Skip Research
- Product Roadmapping
- Product Roadmapping, Prioritisation and Portfolio Management
- HTML Wireframes
- Designing in the Browser
- Resources for Mapping the Experience with Alignment Diagrams
###Usability
- Measuring Usability with SUS
- usability.gov SUS
- Collaborative User Testing
- HTML Outliner Accessibility, semanticism checker
- ARIA Rules
- Personas on Usability.gov
- DIY User Personas
- Silverback - Guerilla usability testing Mac only
- 5 Second Tests
- UI QA Checklist
##Typography
- Butterick's Practical Typography
- Guide to CSS Font Stacks
- Subheading Styling
- Typograph - realtime type scaling
- Typographic Style Applied to Web
- Republic Gothic
- Unit Gothic
- Google Font Explorer
- Questa Free Font
- Overpass Font
- Viewport Based Typography
##CSS
- CSS Guidelines
- Absolute Centering
- Aspect Ratios ALA source I've seen too
- Collapsing Header
- Background Size
- Breadcrumbs
- Using Flexbox Now
- Flexbox in the Real World
- 10 CSS One Liners to Replace Native Apps
- Penthouse - Critical path above the fold CSS
- Solved by Flexbox
- Attribute Model CSS Framework
- Flexbox Fibibacci
- HTML Container Width = Content Width
- CSS Regression Testing
- The Media Object Saves Hundreds of Lines of Code
- Blur up image loading technique
- Calc use cases
- CSS Clip Path Editor
#SASS/SCSS
#SVG
- http://www.svgeneration.com/
- https://philiprogers.com/svgpatternshttps://philiprogers.com/svgpatterns
- http://buseca.github.io/patternbolt/
- http://eskimoblood.github.io/gerstnerizer/
- SVG Clipping
##Javascript / jQuery
- JSONP
- Zepto
- Typeahead
- Mobify image resizing
- Responsive Carousel
- Human Javascript Gitbook
- Opinionated AngularJS Styleguide
- Grunt vs Gulp
- Defer vs Async Attributes
##Performance
###Tools
- Performance - An abbreviated performance checklist with helpful resources
- Web Page Test Great performance analyzer
- Google Page Speed Insights
- HTML Minifier Also interesting for his dev setup (grunt/gulp, unit tests)
- Tools for Image Optimization
- Smush.i Image Converter - Progressive JPGs
- Grunt UNCSS - Remove unneeded CSS
- Grunt Imagemin
- Perf Tooling Today Site
- Clumsy - Network Degradation Tool
- Lazy Load Images Script
- Image Lazy Loading
- Lazy Sizes - a really good lib
- User Timing and Custom Metrics
- https://compressor.io/ - Image compression
###Articles
- Avoiding Unnecessary Paints
- Preventing Custom Font Performance Hit
- Google Font Performance (Character-Sets and Specific Characters)
- RWD Performance - How we make RWD Load Fast as Heck
- Responsive design can be lightning fast
- HEAD ordering to improve performance
- Image sprites or data URIs? Icon fonts or SVGs? A Grunt workflow for the ‘gold’ standard
- Progressive JPGs
- Fast Enough
- Performance Costs of MVC Frameworks
- Resource Network Timing
- Caching and CDN Primer
##Development
- External Repository Submodules
- Code Guide Front End Best Practices
- Responsive Images \ Picture Element Use Cases
- Grunt + Jekyll
- Build a blog with Jekyll and Github Pages
##Tutorials
##SEO
##Apps / Sites
- Lipsums, especially Arrested Development!
- PDF to HTML
- Finch - View Local websites on any internet connected device
- SnazzyMaps
- SnappySnippet - Chrome extension that allows easy extraction of CSS and HTML from selected element.
- Image Converter
- Noise Texture Generator
- Hemingway Text Readability Analyzer
- Whiteboard Fox
- Regex 101
- SVG Path Builder
###Zurb Apps
- Clue Test what people remember on a site or image in 5.5 seconds
- Spur Critique a site in Grayscale, Intersections, Contrast, Blur, Mirror, Rotate and 50% Zoom
- Chop Provide a short code snippet with comments
- Bounce Add feedback to a site or image
- Reel Present design slides and get thumbs up/down feedback
- Plunk Test mobile hit targets
- Strike Collaborative Task List
##RWD
- Selling Responsive Design
- Responsive Deliverables Gold
- Responsive Design Process
- Starting a RWD Project
- Responsive CSS
- ESPN Traffic Now Mostly Mobile
- RWD Bloat Debunked.
- RWD Bloat 2
- Making ubuntu.com responsive
- Designing in the browser
- 25 RWD Tools
- The Guardian's Take on Mobile First Responsive Design and IE8
- To picturefill Picturefill vs sizes vs srcset
- Tweet: RWD Impact to Guardian on Pageload
- Responsive Nav Plugin
- The Guardian Goes Responsive
- PonyFrame Device Iframe Tester
##News
##Freelancing/Business
- Agile Billing
- Web Related Registry
- User Testing Pay for usability testing, get paid to perform testing.
- How We Work - markboulton
- How to Sell a Responsive Adaptive Atomic Design Process
- Being Profitable
- Hosted Project Management Application
- Help! My portfolio sucks!
- Creating a Stormproof Invoicing Process
##CMSs
- Postach.io + Evernote Really simple!
- Tumblr Good for small small things perhaps.
- Wordpress Plugins I Use - CSS Tricks
##Hosting
- How To Serve Multiple Ghost Blogs on One VPS Using Nginx Server Blocks | DigitalOcean
- Host non-Ghost webpage with Nginx and Ghost | DigitalOcean
- How do I configure compression with a ghost droplet | DigitalOcean
- Improving Performance on a Ghost Blog and Digital Ocean
- nginx Caching | Ghost and Digital Ocean
- NearlyFreeSpeech gzip workaround
##Freebies
###Graphics/Images/Icons
- Unsplash sweet! thanks ooomf!
- Raumrot another great curation
- Stock Photo Aggregations
- Stock Photo Search
- Getty Open Content Images
- User Interface User Placeholder
- 1000 Free Icons
- Matt or Gloss Icon Set
- Kitchen Vector
- Animated Icons Not free but still cool
- Icomoon Icon Font Generator Icon font generator
- Font Awesome Good Icon font
- Iconmelon SVG Icons
- SVG Loaders
- Clip Art Alternatives
- Free Photos
- More Free Photos
- Free alternatives to popular fonts
###Color Tools
- [http://color.hailpixel.com/](Full screen color picker)
- Paletton Color Picker
- Color Monster
- Contrast Analysis
- Gradient Explorer
###Standalone Components
- Standalone Like Button
- Parallax Scrolling Framework
- HTML Entities
- Epic Editor Embeddable JavaScript Markdown Editor
- Dash Javascript Video Player
- Data Image jQuery Plugin
- CSS Spinner
- ListJS
- reveal.js HTML Presentations
- Gradient Animator
- SVG Generation from Patterns
- Animate CSS
- Hover CSS
- Formspree - form on static HTML
- HTML Glyphs
###Fonts
##Video / Presentations
##Random Blog Posts
- Design Check Lists
- Case Study Showcase
- Developing Chrome Extensions
- Periodic Table
- Wordpress Theme Anatomy
- Wordpress Theme Customization
- Blog Typography
- Colours
- Shame.css A place to put your quick fix css after launch
- What Screens Want
- The Web's Grain
- Why are software development estimates regularly off by a factor of 2-3 times?
- One Woman Cannot Have A Baby in Nine Months Mythical Man Month Related
- Responsive Design Intranets
- Dark Patterns Illegal
- Why hourly time tracking doesn't work for software
- Three Mile Island Accident Bad UI Example
- The Emerging Global Web
- Gov.uk Design Principles
- MLS Team Redesign Concept
- Microsoft Rebrand
- Drawer Navigation - Testing
##Quotes / Tweets
- “It is not the strongest of the species that survive nor the most intelligent but the one most responsive to change.” - Charles Darwin
- Paul Irish on Web Perf Tuning
- Paul Irish on CSS Perf Tuning
- Two CSS Properties Walk into a Bar
- “It is not enough to conquer; one must learn to seduce.” - Voltaire
##Other Aggregations
##Wish List
- The User Experience Team of One
- Async and Performance
You Are My Favorite ClientResponsive and Responsible
##Inpiring Examples of The Web at Its Best