dabblet
dabblet copied to clipboard
LeaVerou
Sharing feature
Right now you can only share the link to the dabblet. It would be great if you could share the dabblet via twitter/facebook/whatever, and via an iframe.
You can add extra button with the dropdown after the one for save, so it would be easy to share.
I've created a dabblet with demo how it looks now if you'd place dabblet as it is in an iframe (along with the jsfiddle one): http://dabblet.com/gist/1485587.
It's already somewhat usable, however there are some things that you could improve here:
- You can detect if the dabblet is embedded, so you won't need to create an extra page or whatever just for embedding.
- I think, that on embedding it must show the result by default, however, it would be cool if you could change this in settings. So, the ideal situation: you can set the view mode for stand-alone dabblet and for embedded one as different settings, so there would be no need in cloning the dabblet just for sharing the result.
- Right now the background of dabblet is transparent, I think that can be cool in some cases, and that must be saved, so you could embed it in any design.
- I think, that in embedded variant, the header must be smaller, with lesser items and always shown, without need to hover it. You can make remove the login, saving and help buttons, and make everything else smaller, plus the new button to see the dabblet at a separate window.
It already detects whether it's embedded and does a few special things when it is, although you're right it's not as polished as it could be.
- I can't think of a good enough UI for setting the view modes separately for embedding and I wouldn't like to force result to be the default. I wouldn't like a dialog full of settings just for the view modes either :(
- It is smaller on embedded, as long as the iframe is small too (with media queries).
Well, I though a little on how the UI can be and came with this:
- On the first line there is an input/textarea with the link to share, with the current page's link as default.
- Then this is followed by two (or more) radio-buttons (like in the Settings dropdown):
link|iframe code, with thelinkselected. Changing this would change the code in input above to the code for inserting the textarea. - On the third line there can be three radio-checkboxes (where only two of them can be checked and when there are two of them clicking on the checked one would uncheck it, and clicking on the third one would turn it on while turning off the previous one). So, with that control you could check what do you want to share: only Result/CSS/HTML or two of them.
- And on the fourth line there are radios for behind/horizontal/vertical view mode, which are disabled when only one radio-checkbox selected and are enabled when there are two.
And, optionally, there can be a lone checkbox at the end, selected by default, like “include dabblet frame”, disabling which would end with the “dabblet.com/result/…” link/iframe.
Well, here is a quick sketch showing the layout (without the proper icons for almost everything), however I think that for such complex one the current style for checkboxes/radios is too heavy.
Maybe if the hash was #css or #html or #result, the according tab was loaded, regardless of the gist's saved settings. That would solve the issue of the result being first.
I like your idea about the radio buttons. As for the iframe code or link, I don't think it would hurt if they were shown at the same time.
I'm trying to think of an icon for sharing, but can't come up with anything.
Also, all the sharing properties mustn't be saved in a dabbler's gist, but must be saved in localstorage, so user could setup the sharing options once and then use the same again the next time he would want to share another dappled.
And one more thought: the three last lines (css/html/result+behind/horizontal/vertical+checkbox) can be hidden after another button like “Sharing options…”, so they won't clutter the interface, so the dropdown would look like the following sketch by default and would become the one above only when you'd click on “…” button.
Maybe if the hash was #css or #html or #result, the according tab was loaded, regardless of the gist's saved settings. That would solve the issue of the result being first.
I like your idea about the radio buttons. As for the iframe code or link, I don't think it would hurt if they were shown at the same time.
Yes, yes! For the hash I wanted to create another issue, 'cause it's can be done with what the dabblet have now (like when you're opening someone else' dabblet and change the view mode it would be set in the address, so you could share this without cloning the dabblet). And it's a good idea to show both link and the iframe code!
I love the expander idea!
I still don't know what icon "sharing" should have (settings have a gear, file has a floppy etc). Preferrably something in the unicode table.
Yeah, the symbol for sharing is almost a holy grail, I hadn't seen anything that would be close enough to it…
However, the closest symbols that I've thought about are stars, arrows and, hmm, links. Arrows are not that good since there is already dropdowny arrow here, but star or the “☍” symbol (which resembles the chain links a bit) maybe would suit the sharing:
I don't want to use a star or a heart, as I might use these for a "Like" feature. The ☍ symbol doesn't really show what it's for.
I think this requires more thought (I've been trying to come up with something for days).
And just the word ”share” won't fit? :) It seems that there is enough space for it and it would surely show what it's for. At least for the first time just the word can be ok, and then if someone would find a better symbol, you could always replace the word with it.
BTW, designers at our company, on the same quest, came with rss-shouting pac-man: 
, which is fun but, well…
The word "Share" won't fit on mobile or embedded view, even though it's still needed there. I like the idea of the shouting pacman, haha, might use that!
