dabblet

blog

Text

Dabblet’s first month in review

Dabblet turned one month old four days ago, on January 15th. The response from the community has been overwhelming, thousands of people are using it daily to create and share CSS and HTML experiments and in some cases even entire website templates.

As for the numbers, dabblet got 4K unique visitors on its first day and 11K on its second. During its first month, it got a total of 65K unique visitors and 90K visits. It also got almost 600 twitter followers. At least 845 tweets were linking to it.

I’d like to thank you all for your support, and I promise I will do my best to keep improving dabblet.

Text

Dabblet update: URL & Entity previewers, subtle scrollbars and more

I decided that rather than working on a separate experimental branch and eventually merging the whole thing with the mainstream version of dabblet, to keep them both separate and integrate features from the experimental branch once they mature.

So, today I’ve integrated some features that seemed stable enough in the private beta:

  • URL & entity previewers
  • Nicer scrollbars in Webkit. Julien Cabanes helped with that by figuring out a clever way to give spacing between the scrollbar and the edge of the editing area.
  • Nicer checkboxes in Webkit
  • Help is now a separate section, in order to make the actual application lighter
  • Changed the save icon to something more current than a floppy disk
  • Ampersand in font stack previews
  • Font stack previews now show both normal and italic font-styles, since many fonts are entirely different when italicized (especially serif fonts).
  • Transitions for showing and hiding the previewers
  • More polished transitions for the tabs
  • More robust header positioning
  • “New dabblet” menu command moved to top to match established conventions
  • Removed annoying confirmation popup before the page was closed. It didn’t serve any purpose anyway, as unsaved edits are saved in localStorage anyway.
  • A number of bug fixes

Sadly, line numbers and tab templating didn’t make it. I think they need to be tested a bit more, as they involve major code changes.

Hope you like the changes! As always, please report any bugs on dabblet’s bug tracker.

Photo
Coming in dabblet v1.1: Current line highlight & number. I think most use cases of line numbers are covered by knowing the current line number (McRabbit’s Espresso knows this, and dims the other line numbers a lot), so I can avoid adding that kind of clutter. 

Coming in dabblet v1.1: Current line highlight & number. I think most use cases of line numbers are covered by knowing the current line number (McRabbit’s Espresso knows this, and dims the other line numbers a lot), so I can avoid adding that kind of clutter. 

Tags:
Text

URL and entity previewers in upcoming dabblet v1.1

URL previewer

A URL previewer was a very common request. I had my qualms at first but I decided it’s useful enough to outweigh the disadvantages. It should work for everything displayable in an <img> element, including SVGs and data: URIs.

Entity previewer

Along with that, I’ve also implemented an entity previewer, which is useful when you’re not sure whether you remember an HTML or CSS entity correctly.

Photo
New feature in upcoming dabblet v1.1: Complete control over number and layout of tabs. The &#8220;template&#8221; accepts a syntax similar to what the grid-template property does, assuming r is for the result pane, c is for the CSS pane and h is for the HTML pane.
The &#8220;see through code&#8221; option will make the result full-size and the code will have a transparent background through which the result can be seen. Similar to current &#8220;Behind code&#8221; view but more customizable.

New feature in upcoming dabblet v1.1: Complete control over number and layout of tabs. The “template” accepts a syntax similar to what the grid-template property does, assuming r is for the result pane, c is for the CSS pane and h is for the HTML pane.

The “see through code” option will make the result full-size and the code will have a transparent background through which the result can be seen. Similar to current “Behind code” view but more customizable.

Tags: