Bootstrap Magic featuring Boostrap 3

#1

Post by tsifei » Tue, Sep 03, 2013, 1:04 PM UTC

Bootstrap Magic featuring Boostrap 3
pikock.github.io

Re: Bootstrap Magic featuring Boostrap 3

#2

Post by tlarkworthy » Tue, Sep 03, 2013, 2:13 PM UTC

Really cool, but slow. AngularJS Batarang might help profile the hot spots.

Re: Bootstrap Magic featuring Boostrap 3

#3

Post by daenney » Tue, Sep 03, 2013, 2:47 PM UTC

Digging the idea and I like the Apply feature.

However, I have no idea what your JS is doing but it spiked my browser CPU usage to 100% on a core and made the whole thing fairly unresponsive until I closed that tab.

Re: Bootstrap Magic featuring Boostrap 3

#4

Post by 6cxs2hd6 » Tue, Sep 03, 2013, 3:00 PM UTC

Some UX feedback from a dumb user: I spent a few minutes thinking there wasn't any preview. Finally I noticed the "Apply" button way down at the bottom --- and the "Auto" checkbox next to it. Maybe the "Auto" checkbox should be enabled by default.

Once I figured that out: Awesome.

Re: Bootstrap Magic featuring Boostrap 3

#5

Post by stblack » Tue, Sep 03, 2013, 3:22 PM UTC

6cxs2hd6 wrote: post #4

Some UX feedback from a dumb user: I spent a few minutes thinking there wasn't any preview. Finally I noticed the "Apply" button way down at the bottom --- and the "Auto" checkbox next to it. Maybe the "Auto" checkbox should be enabled by default. Once I figured that out: Awesome.

THIS.

I never noticed the "Apply" button, and I'm not on the page anymore.

I would guess that a significant proportion of users will quickly figure out the page does NOT auto-update and walk away having wasted time, never seen it work.

Like I did.

Re: Bootstrap Magic featuring Boostrap 3

#6

Post by tsifei » Tue, Sep 03, 2013, 3:24 PM UTC

6cxs2hd6 wrote: post #4

Some UX feedback from a dumb user: I spent a few minutes thinking there wasn't any preview. Finally I noticed the "Apply" button way down at the bottom --- and the "Auto" checkbox next to it. Maybe the "Auto" checkbox should be enabled by default. Once I figured that out: Awesome.

Hi, yes it's true. The issue that we are facing with the auto checkbox is that we need to recompile all the time, the whole bootstrap so it 's a kind of slow. We will look for a solution for the next version.

Re: Bootstrap Magic featuring Boostrap 3

#7

Post by [deleted] » Tue, Sep 03, 2013, 4:12 PM UTC

tsifei wrote: post #6

6cxs2hd6 wrote: post #4

Some UX feedback from a dumb user: I spent a few minutes thinking there wasn't any preview. Finally I noticed the "Apply" button way down at the bottom --- and the "Auto" checkbox next to it. Maybe the "Auto" checkbox should be enabled by default. Once I figured that out: Awesome.

Hi, yes it's true. The issue that we are facing with the auto checkbox is that we need to recompile all the time, the whole bootstrap so it 's a kind of slow. We will look for a solution for the next version.

[deleted]

Re: Bootstrap Magic featuring Boostrap 3

#8

Post by pajohnson » Tue, Sep 03, 2013, 4:19 PM UTC

tsifei wrote: post #6

6cxs2hd6 wrote: post #4

Some UX feedback from a dumb user: I spent a few minutes thinking there wasn't any preview. Finally I noticed the "Apply" button way down at the bottom --- and the "Auto" checkbox next to it. Maybe the "Auto" checkbox should be enabled by default. Once I figured that out: Awesome.

Hi, yes it's true. The issue that we are facing with the auto checkbox is that we need to recompile all the time, the whole bootstrap so it 's a kind of slow. We will look for a solution for the next version.

One suggestion would be to use timeouts to add a delay to the input event handler, so it would wait until the typing has stopped for a while rather than recompiling on every key press. That's just a line or two of extra js and should make the auto updating vastly more usable.

Re: Bootstrap Magic featuring Boostrap 3

#9

Post by tlarkworthy » Tue, Sep 03, 2013, 5:03 PM UTC

6cxs2hd6 wrote: post #4

Some UX feedback from a dumb user: I spent a few minutes thinking there wasn't any preview. Finally I noticed the "Apply" button way down at the bottom --- and the "Auto" checkbox next to it. Maybe the "Auto" checkbox should be enabled by default. Once I figured that out: Awesome.

make the Apply button flash on and off with a CSS animation?

Re: Bootstrap Magic featuring Boostrap 3

#10

Post by tsifei » Tue, Sep 03, 2013, 5:03 PM UTC

pajohnson wrote: post #8

tsifei wrote: post #6

Earlier quoted context omitted.

Hi, yes it's true. The issue that we are facing with the auto checkbox is that we need to recompile all the time, the whole bootstrap so it 's a kind of slow. We will look for a solution for the next version.

One suggestion would be to use timeouts to add a delay to the input event handler, so it would wait until the typing has stopped for a while rather than recompiling on every key press. That's just a line or two of extra js and should make the auto updating vastly more usable.

yeh, good suggestion, we just added your advice. There are a lot to parse with Bootstrap ... still thinking about making it lighter