Link tags: drop

21

sparkline

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

Drop caps & design systems - Vox Product Blog

Sit down and listen to a story from uncle Ethan.

Design Patterns on CodePen

This ever-growing curated collection of interface patterns on CodePen is a reliable source of inspiration.

Easy Toggle State

I think about 90% of the JavaScript I’ve ever written was some DOM scripting to handle the situation of “when the user triggers an event on this element, do something to this other element.” Toggles, lightboxes, accordions, tabs, tooltips …they’re all basically following the same underlying pattern. So it makes sense to me to see this pattern abstracted into a little library.

FontDrop!

A handy browser-based tool for examining font files to see which features they support.

How To Make A Drag-and-Drop File Uploader With Vanilla JavaScript — Smashing Magazine

A step-by-step guide to implementing drag’n’drop, and image previews with the Filereader API. No libraries or frameworks were harmed in the making of this article.

Draggable JS – JavaScript drag and drop library

This looks like a very nice little JavaScript library for drag’n’drop. The site works as an example of the functionality in action.

Brought to you by Shopify, the company enabling Breitbart.

Progressive enhancement and team memberships

A really nice pattern, similar to one I wrote about a little while back. There’s also this little gem of an observation:

Progressive enhancement is also well-suited to Agile, as you can start with the core functionality and then iterate.

CSS Mega Dropdown | CodyHouse

I’m no fan of mega menus, and if a site were being designed from scratch, I’d do everything I could to avoid them, but on some existing projects they’re an unavoidable necessity (the design equivalent of technical debt). In those situations, this looks like a really nice, responsive approach.

You Know What? Fuck Dropdowns

An entertaining presentation from South By Southwest on the UI element of last resort.

It’s funny because it’s true.

Photo upload and progressive enhancement for FixMyStreet / mySociety

Matthew describes a very nice bit of progressive enhancement for drag’n’drop file uploads (similar to the CSS Tricks article I linked to recently).

It uses the Dropzone JS which looks like it aligns nicely with the progressive enhancement approach.

Drag and Drop File Uploading | CSS-Tricks

This is a terrific example of progressive enhancement in action: going from a simple file input to a lovely interactive drag’n’drop interface.

The code uses jQuery but it could be easily adapted to vanilla JavaScript, and anyway, it’s not so much the code that matters, it’s the approach.

Dead drops in Brighton (beat: James Burt’s weblog)

Looks like those dead drops that Jessica, Brian and I created haven’t survived the inclement weather.

Demo: CSS drop-shadows without images – Nicolas Gallagher

Some nice drop-shadow effects. Generated content is the key.

Dead Drops ‘How to’ - NYC on Vimeo

I should get out there and make a few drops in Brighton.

Dead Drops Database

London has its first data dead drop. Time to put Brighton on the map methinks.

Draggables

Watch this space. Glenn has a really interesting idea (and implementation) for exchanging structured data between browser windows using drag'n'drop.

Drop7

An iPhone game that mashes up Sudoku with Tetris. "Drop numbered discs into the grid. Whenever the number on a disc matches the amount of discs in its row or column it disappears. Keep the board open to keep scoring, and survive as long as you can. Clear the board or set off huge chains for big bonus points."

Newsvine - Newsvine Relaunches... Announcing Evergreen

Mike and the team have redesigned/realigned Newsvine with some nice customisation of the front page.