Tags: example

17

sparkline

Friday, August 23rd, 2019

4 Rules for Intuitive UX – Learn UI Design

  1. Obey the Law of Locality
  2. ABD: Anything But Dropdowns
  3. Pass the Squint Test
  4. Teach by example

Friday, December 14th, 2018

GitHub - frctl/awesome-fractal: A curated list of awesome things related to Fractal

A starter list of Fractal examples and links. You can expand it.

Wednesday, March 21st, 2018

Documenting Components – EightShapes – Medium

Part one of a deep dive by Nathan into structuring design system documentation, published on Ev’s blog.

Friday, December 8th, 2017

Design Principles

Collections of design principles that you can contribute to.

The aim of the site is to help us analyse what good Design Principles are. How Design Principles are created and measured. How they develop.

Sunday, July 2nd, 2017

Starting a React-Powered Comment Form | CSS-Tricks

This is a really great screencast on getting started with React. I think it works well for a few reasons:

  • Sarah and Chris aren’t necessarily experts yet in React—that’s good; it means they know from experience what “gotchas” people will encounter.
  • They use a practical use-case (a comment form) that’s suited to the technology.
  • By doing it all in CodePen, they avoid the disheartening slog of installation and build tools—compare it to this introduction to React.
  • They make mistakes. There’s so much to be learned from people sharing “Oh, I thought it would work like that, but it actually works like this.”

There’s a little bit of “here’s one I prepared earlier” but, on the whole, it’s a great step-by-step approach, and one I’ll be returning to if and when I dip my toes into React.

Monday, April 10th, 2017

Web Performance Optimization Stats

If you ever need to pull up some case studies to demonstrate the business benefits of performance, Tammy and Tim have you covered.

Friday, October 21st, 2016

Building Social: A Case Study On Progressive Enhancement – Smashing Magazine

A step-by-step walkthrough of layering on enhancements to a site. The article shows the code used, but it isn’t really the code that matters—it’s the thought and planning that went into it.

Monday, September 19th, 2016

lyzadanger/pragmatist-service-worker: Pragmatist’s Guide to Service Worker

Lyza put together some example code for her Smashing Conference talk on service workers. If you haven’t written a service worker before, these are really nice examples of how to grok it bit by bit.

Friday, April 15th, 2016

Layout Demos by Jen Simmons

If you want to keep up to date with all the coolest stuff landing in CSS, I recommend bookmarking this ever-changing page.

Friday, April 1st, 2016

simpl.info

This is a very handy resource—a collection of minimum viable implementations of HTML5 features and JavaScript APIs.

Thursday, April 2nd, 2015

Accessibility Wins

Marcy’s Tumblr blog of examples of accessibility in action on the web.

Monday, March 2nd, 2015

Harnessing Flexbox For Today’s Web Apps - Smashing Magazine

More flexbox!

This time it’s a great article by Karen Menezes filled with practical examples showing where you can use flexbox today.

Tuesday, February 17th, 2015

Grid by Example

We were discussing the CSS3 grid layout module in the Clearleft office today, so naturally Rachel’s name came up. This is such a great resource for diving into this stuff.

Monday, July 14th, 2014

simpl.info

A handy reference for HTML, CSS, and JavaScript features. Each feature has a bare-bones demo at a nice guessable URL e.g. http://simpl.info/datalist/

Practical ARIA Examples

Heydon Pickering put together a great collection of accessible self-contained interface patterns that demonstrate smart use of ARIA.

Friday, January 23rd, 2009

AJAX APIs Playground

A nice way to play around with Google's APIs. Example code is provided which you can edit and immediately see the results.

Saturday, March 4th, 2006

Samuel's Blog

The working example from Richard's chapter in Blog Design Solutions. It's a home-rolled PHP/MySQL blog for Samuel Pepys featuring beautiful typography... natch.