Tags: drop

19

sparkline

Thursday, May 31st, 2018

Design Patterns on CodePen

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

Tuesday, May 22nd, 2018

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.

Wednesday, March 21st, 2018

FontDrop!

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

Tuesday, January 16th, 2018

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.

Monday, October 2nd, 2017

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.

Wednesday, December 14th, 2016

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.

Monday, September 12th, 2016

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.

Wednesday, July 27th, 2016

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.

Sunday, February 7th, 2016

Enhance’n’drag’n’drop

I’ve spent the last week implementing a new feature over at The Session. I had forgotten how enjoyable it is to get completely immersed in a personal project, thinking about everything from database structures right through to CSS animations,

I won’t bore you with the details of this particular feature—which is really only of interest if you play traditional Irish music—but I thought I’d make note of one little bit of progressive enhancement.

One of the interfaces needed for this feature was a form to re-order items in a list. So I thought to myself, “what’s the simplest technology to enable this functionality?” I came up with a series of select elements within a form.

Reordering

It’s not the nicest of interfaces, but it works pretty much everywhere. Once I had built that—and the back-end functionality required to make it all work—I could think about how to enhance it.

I brought it up at the weekly Clearleft front-end pow-wow (featuring special guest Jack Franklin). I figured that drag’n’drop would be the obvious enhancement, but I didn’t know if there were any “go-to” libraries for implementing it; I haven’t paid much attention to the state of drag’n’drop since the old IE implement was added to HTML5.

Nobody had any particular recommendations so I did a bit of searching. I came across Dragula, which looked pretty solid. It’s made by the super-smart Nicolás Bevacqua, who I know shares my feelings about progressive enhancement. To my delight, I was able to get it working within minutes.

Drag and drop

There’s a little bit of mustard-cutting going on: does the dragula object exist, and does the browser understand querySelector? If so, the select elements are hidden and the drag’n’drop is enabled. Then, whenever an item in the list is dragged and dropped, the corresponding (hidden) select element is updated …so that time I spent making the simpler non-drag’n’drop interface was time well spent: I didn’t need to do anything extra on the server to handle the data from the updated interface.

It’s a simple example but it demonstrates that the benefits of starting with the simpler universal interface before upgrading to the smoother experience.

Saturday, December 19th, 2015

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.

Tuesday, December 1st, 2015

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.

Monday, April 4th, 2011

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.

Thursday, February 17th, 2011

Demo: CSS drop-shadows without images – Nicolas Gallagher

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

Monday, January 24th, 2011

Dead Drops ‘How to’ - NYC on Vimeo

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

Friday, December 3rd, 2010

Dead Drops Database

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

Monday, November 15th, 2010

Draggables

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

Wednesday, February 18th, 2009

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."

Friday, April 27th, 2007

Newsvine - Newsvine Relaunches... Announcing Evergreen

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

Tuesday, June 28th, 2005

script.aculo.us - web 2.0 javascript

A library of JavaScript classes: not very unobtrusive, not much graceful degradation. I think we need a bit less hype and a bit more questioning.