leaverou / dabblet Goto Github PK

Not working on Opera 11.60 / OS X

After adding some content to the CSS area, when refreshing or trying to leave the page, the confirm navigation window pops up. In this window the word "false" appears. Using Chrome 16.0.912.63.

If the text cursor is placed on some property that triggers the previewer appearance and then you'll scroll the code a bit, the previewer, since it's positioned from the outside of the editor's frame, stays at the same place.

The solution is to recount the position of the previewer on scroll.

It's just a minor issue, but it's also is easy to fix: in the top menu in Safari there can be some antialiasing jumps. In webkits there is a bug that sometimes occurs: using 3D transitions sometimes disables sub pixel antialiasing for some blocks.

In your case, I think, you'd want to disable it at all for menu: it won't be buggy and the text won't look so bold.

Here is a video, showing the bug (don't look at flickering, it's the video defect).

To fix this issue, just add -webkit-font-smoothing: antialiased; to <header>.

really nice!
but why do you write your own editor instead of using ace or codemirror.

most issues on this list will be solved with ace, plus you get codefolding and vim mode for free.

i can help with ace integration if you want.

I'm pretty sure it's by design, but it's very bad UX: you hover over "HTML" and the toolbar changes location so your mouse doesn't hover over "HTML" any more, so you have to move it again.

Im also not a fan of the delay in hiding the toolbar, but I guess that's personal. (And maybe so is the other thing.)

I you paste something at the beginning or the end of the line, then nothing happens. But if you paste anything in the middle of the line, then the next newline symbol is eaten. So, for the

aabb
cc

If you'd paste anything between the aa and bb, you'd get

aaanythingbbcc

Note: this happens only in webkits, in Fx everything is fine.

If there is a lot content, so it overflows the width of an editor, then if you'd scroll a bit to the right and show the previewer, it would be positioned like there were no scroll:

Changing to Japanese input method and trying to enter Japanese generally results in nothing being entered except for carriage returns, although occasionally the first two characters typed are entered as a hiragana character. To test:

• add a multibyte input method: (in MacOS X 10.6) System Preferences > Personal: Language & Text > Input sources > Kotoeri (Hiragana), plus check “Show Input menu in menu bar” or remember keyboard shortcut (same deal as Greek input method)
• change to new input via menu bar or keyboard shortcut
• Try typing “nihongo” then pushing space in TextEdit, Gmail etc and see what happens (n → に → にh → にほ → にほn → にほんg → にほんご → (push spacebar) → 日本語)
• Typing the same in Dabblet gives に or nothing
• Remember to remove Japanese from Input method list when done ;)

If there are soft wraps in the code block on jsfiddle for CSS (at least), then when you're pasting it, the places on these soft wraps are joined without the whitespaces. So, for the CSS there could appear some bugs from it, like this one:

The code in jsfiddle:

And after pasting:

If there is a multiline token, then there would be gaps, caused by the line-height:

(I highlighted the hover area here)

This is not critical, but when you'll show a previewer by hover, it would disappear when you'll be on gaps, so on multiline values the bubble would flicker.

You can fix it by compensating the line-height by paddings on inline elements:

.token {
    padding: .15em 0;
}

If the focus is in the ”Result“ tab (you get the focus if you click in it's content or get to this tab by pressing keyboard shortcut CMD+3), then the shortcuts for switching tabs and save don't work.

Due to contents being overwritten on each keystroke, the undo/redo stack gets destroyed.

Must implement an artificial undo/redo stack.

If you show the previewer when the text cursor is on the value, then it would be nice not to hide it when you move the mouse cursor over and out of it.

And if you hover the mouse over another value, you must show it's previewer, but if you move he mouse out of it, then, after you hide the previewer from the hovered value, you must show it again over the one where the cursor stands.

I don't know if it's possible to set the cursor's position from the script, but if it's possible, then it would be cool to have it stay in the same place before tab switching, so after I switch to the HTML and then return to the CSS, I'll be in the same position in the code.

Another minor issue, but which easily catches my attention every time: In the logo the tops of the letters sometime disappear. It seems, that it's some webkit rendering bug, I've managed to reproduce it in two ways:

• by changing the view modes in Safari: look at the top left corner of this video.
• by scrolling the page on Lion: reproduces both in Chrome and Safari. Video.

I've tried to find a way to fix this, but with no luck for easy solutions. The not-so-nice one is to just add the usual “webkit's zoom” hack to header>h1: -webkit-transform: translateZ(0) or similar.

Using Safari 5.1.2. on Windows.

After fixing the #24 the gap appeared between the button and the dropdown, so if you'd move cursor slowly, the drop down would close.

It's easily fixed by6 for example, adding padding-bottom: 3px to .with-dropdown blocks, so their hoverable area would be a little bit bigger than the button.

It's good to have the ruler-in-the-bubble for the top-left-width and other kind of dimensions, but font-size is the special one. Actual font-size is not related to the actual number of pixels, which is also hard to understand on horizontal ruler. So it would be better to remove this bubble for the font:12px sans-serif and font-size:12px properties or even better: replace it with the same bubble as for the font-family but with A letter sized to the given font-size.

There is a strange bug in previewer for angles: if there is a 3D transform in iframe, then the SVG in previewer is buggy in webkits:

I saw that there is a translateY(64px) on the svg that fixes the similar case that appears if there is no 3D transform in the iframe. I've replaced the translateY(64px) fix with the translateZ(0) one, and that fixed all the cases: without 3D transform in the iframe and with one.

It seems that the cut currently is not in undo/redo control: If you'd cut something (CMD+X), then press Undo, then you'd see that it would revert the action that was before the cut.

The same problem can be seen when you'd drag'n'drop some text in code: you can do this by selecting something and then hold the click and then move the text in the code. The cut in such case would undo the previous action.

Also, the Redo in such cases can be a bit strange if there were actions after the cut&paste.

There should be a way. :)

A very minor issue, but I'll file it anyway :)

If you're placing some code on the first few lines (~3), then it's previewer would go after the page's top edge, so it would be partially hidden:

It seems that since the ~ and + selector bugs are fixed in webkit, the attribute selector one hadn't (or changed only later, so it works ok in Chrome).

The problem is that Safari don't update the styles for selectors with attributes in them, like [data-view="split"]. This causes at least two seriuos problems now:

1. Changing the View modes don't work.
2. Changing Tabs (CSS/HTML/Result) don't work.

One of the ways to fix it, is to add the bugfixing animation to the element, for whom you use attribute selector, so, adding

@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }
body {
-webkit-animation: bugfix infinite 1s;
}

fixes the problem. However, this bugfix could cause some drop in performance, so it should be tested a bit.

(I've tested in Safari 5.1.1, there is a problem and the suggested fix fixes it.)

Would be great to have zen coding inside dabblet -http://code.google.com/p/zen-coding/

If you'd try to preview the, for example, transition: 0s;, then the circle'd become empty and then changing it to any other wouldn't do anything (it would still be empty).

Hi, very little thing to report:
when I'm typing "alt gr" (right alt on my french azerty keyboard) i'm redirected to the tab "results" and the # caracter is not inserted.

It's a shame because I can't test this very well without my beloved #

Great job though !

It would be insanely annoying and obtrusive if the browser could hassle the client with custom confirm() popups onbeforeunload and choose if the user can close this window. (The user should have (and has) that power.)

The app now tries to prompt. Incorrect. Chrome dev tools tell me this: http://screencast.com/t/wzHmfxJG3c

Correct: https://developer.mozilla.org/en/DOM/window.onbeforeunload

window.onbeforeunload = function() {
  return 'You have unsaved changes. Are you sure?'
}

In the contenteditable blocks at least in webkits there is a spellchecking:

I don't think, that you need the spellchecking in code, so you can add spellcheck="false" attribute to the <pre>.

Also, you can then add spellcheck="true" only to the .token.comment, so it would be available only for comments. For HTML there are no tokens to the text nodes, but if you'll add them, then you can also turn the spellchecking on for them.

Hi,
on FF 3.6, I get this Firebug error :

Object.defineProperty is not a function --------------> dabblet.js (line 257)

[Break On This Error] set: function(saved) {

Result : no display of CSS effect and CSS def

Nav bar looks OK

Keep up the good work.

The first one is “You have unsaved changes” the second one (after clicking yes, I'm sure) is just “true”.

I saw it a few times, but now I can't reproduce it :-
But if someone else will come up with the same problem then he wouldn't be alone.

When I go to ant page like 1454889, and then click on the logo, everything is reseted, but there is an error in console (the same as before: Uncaught Error: INVALID_CHARACTER_ERR: DOM Exception 5 on line 786, and there is nothing in CSS tab.

But switching tabs fixes that, so the problem is only on the startup of the project's root page.

Uncommenting is buggy for HTML. Same goes for undoing the commenting action.

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:

1. You can detect if the dabblet is embedded, so you won't need to create an extra page or whatever just for embedding.
2. 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.
3. 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.
4. 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.

Sometimes you have to press Enter twice to get a newline after a semicolon, but that doesn't always happen. If anyone can figure out a series of steps that reproduces the problem every time, let me know.

Screenshot

Browsers that do this: Chrome 16 (stable) & Chromium 18 (nightly) on Ubuntu 11.10

If the text cursor is over the value and the previewer is shown, then after switching the tabs (by clicking on them or by shortcuts), the previewer is still shown.

Text cursor seems to jumps to first line when:

• my text cursor is at the last line; and
• I hit backspace or delete key; and
• after hitting backspace/delete key, the line is empty.

It appears that the previewer stops to be shown on hover at some moment. It's a little hard to explain in few words, so I recorded a little screencast

Maybe this issue is somewhat connected to #14

Very minor issue, but, well… :) Since the buttons for dropdowns are made by div with form for dropdown inside them, when you're hovering or pressing buttons in dropdown, the hover and active state are else triggered on the button. And for pressed state for hover it's ok, then for active state and the tooltip for the title on a div is rather strange.

Here is a video.

Maybe, you should consider adding extra element for button, so you could move the title from the div to it, also you could trigger the hover as it is now, but move the :active state to the inner element.

Pasting the code from the jsfiddle works really strange: in Chrome all the newlines are stripped and a lot of nbsp's are inserted.

So, there is a need to sanitize the input somehow, so that all the visual formatting from the original code would be stripped (though, the algorithm for that must be strong enough, so it wouldn't strip anything that is meaningful. However, stripping some nbsps would be better than current situation.
(I've tried to paste code from http://jsfiddle.net/kizu/zfUyN/), and this is and ID of what I got: 1466567

It's just so commonly used shortcut that if you're “heavy keyboard user” you should probably use it ;)

Since the triangle is made using square pseudo-element and rotate, it's “hidden” part overlays the bubble itself:

It's not so easy to see, but it somewhat bugs me :)

You can fix this if you'd replace the solid #2E3538 background with diagonal gradient, so that it's edge would go right near the edge of the bubble. The loss of noise on so small triangle wouldn't be that bad anyway, like with this one:

linear-gradient(-45deg,transparent 48%,#2E3538 48%,#2E3538 100%)

In the example http://dabblet.com/gist/1441328, there's one property with negative angle transform: rotate(-.125turn);
The tooltip is showing a positive angle.
I wonder if this is a bug or is it deliberately done this way?

I'm not sure why, but in Safari 5.1.2 for Mac OS Lion keyboard shortcuts for switching panels doesn't work with Cmd key, only with Ctrl. It works fine in Chrome though.

While clicking on the tabs changes the tabs, pressing the shortcuts stopped working: after pressing the shortcut the following error occurs in console:

Uncaught Error: INVALID_CHARACTER_ERR: DOM Exception 5 on line 774.

For easing values the preview is positioned incorrectly. Here is a picture:

When I copy text from the dabblet editor and paste there, line breaks are added before and after the pasted text. It doesn't happen when I copy from somewhere else (I tested with the adress bar)
Windows, Chrome.

If you'd have a previewer for abslengths lesser than 17px, then the bubble would be smaller than the triangle for it, so for small ones like 1px if would look weird: