Bootstrap Magic featuring Boostrap 3

http://pikock.github.io/bootstrap-magic/

by tsifei • 13 years ago

78 12 13 years ago

pikock.github.io

tlarkworthy2• 13 years ago

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

tsifei3• 13 years ago

Yeh definetely, we just update a new version. It is faster now.

daenney• 13 years ago

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.

tux1968• 13 years ago

Same here with Firefox unfortunately, making it essentially unusable.

6cxs2hd6• 13 years ago

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.

stblack• 13 years ago

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.

tsifei3• 13 years ago

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.

pajohnson• 13 years ago

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.

tlarkworthy2• 13 years ago

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

roryokane• 13 years ago

Pretty nice. But I think it needs better generality in values – more references to other variables, and color functions. If I make my primary brand color the light yellow #faf332 and the link color a very dark yellow, there are a lot of places on the page that still have unreadable white text on a yellow background, such as @btn-primary-color (which I set to #111) and @pagination-active-color (which I set to @link-color). Those values should use some function of @link-color or another variable as their default value. And colors should use appropriate functions to choose a light or dark color that maximizes contrast against their background.

Foxandxss• 13 years ago

It is indeed faster but I am sorry to say that this is a good example of "How to not develop an angular app".

DOM manipulation in a controller is something you can't do and who says controllers, says services too.

On the other hand, the double ng-repeat could be a hot spot for the bad performance.

Don't get me wrong, the app is awesome, awesome idea but the implementation doesn't respect the angular way so it is really slow.

Bootstrap Magic featuring Boostrap 3

Related Stories