The Snowdrop: Lost In the Arctic
If you liked David Grann’s book The Wager, here’s another shipwreck tale, this time from the other side of the world.
Link tags: drop
25
Designing Beautiful Shadows in CSS
This is a great tutorial—I just love the interactive parts that really help make things click.
mmm.page
This is a fun drag’n’drop way to make websites. And I like the philosophy:
Websites shouldn’t all look the same. We prefer campy, kitschy, messy, imperfect.
Motion Paths - Past, Present and Future | Codrops
This is superbly in-depth and easy-to-follow article from Cassie—everything you need to know about motion paths in SVG and CSS! It’s worth reading just for the wonderful examples.
4 Rules for Intuitive UX – Learn UI Design
- Obey the Law of Locality
- ABD: Anything But Dropdowns
- Pass the Squint Test
- 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.