2kb JQuery for animated list in circle | Hacker News Reader

2kb JQuery for animated list in circle

playground.mobily.pl

57 pointskingsidharth17 comments

Semi-related, I don't understand why most JavaScript/HTML/CSS projects only have demonstrations tucked away on another page (or in the download package, or missing entirely).

This stuff works on the web, right? A demo is the first thing anyone should see when visiting your project.

A very good reason to put demo on a separate page is to simplify the implementation and make the html/css readable. I love demos where I can view-source, read the few pertinent lines of CSS/JS and have the library working within minutes. Putting demos on the main project page means going through non-essential site-specific code.

E.g. see my http://chir.ag/projects/drop-search/ project demo on: http://chir.ag/projects/drop-search/demo.shtml vs http://chir.ag/ - the search works throughout my site but it's very easy to see how to implement it on the simple demo page.

Most of the time you're using some framework on your site, and your neat little demo depends on that same framework.

But what if later on you want to upgrade the framework on your site, but it breaks the demo and its not worth fixing (for example, you're demoing proof of concept or a little study)? It's easier to keep the demo on its own site where you don't have to worry about conflicts with your main site js.

And sure, you should be keeping everything out of the global scope, but sometimes you have some legacy code, or maybe you don't know exactly how to do that, etc.

Other times it's a limitation of the CMS (You can't include scripts).

You could put it inline on your page, but its easier and less error-prone to toss it on its own page.

But yeah, if you're just making a stand-alone project page, you really shouldn't have the above problems.

There's a demo button in the right sidebar, it's easy to miss and I think it would be better to have an actual link in the post itself

Very nice. Particularly good example of how to hide that ever increasing number of social sharing links showing up everywhere.

Incidentally, does anyone actually use those links?

Source: http://playground.mobily.pl/assets/demo/blocks/js/mobilybloc...

Why are there variables called 'social' in the source?!

Also ... seems like it could be packed much smaller. The author should run it through the Closure Compiler. In the least, lots of local variables would be obfuscated.

The first example with the social network buttons was probably his inspiration, and the variable name is a hold-over.

Also, with such a small code base as that, a minifier like Closure Compiler is pointless. I ran it on http://closure-compiler.appspot.com/home with "Advanced" checked:

    Original Size:	2.13KB (940 bytes gzipped)
    Compiled Size:	1.28KB (660 bytes gzipped)

because it was likely designed for displaying social bookmarking links in a neat way.

Very cool. Reminds me of the "Circle of Friends" animations that the cell phone companies used to use.

That's 2KB of code that depends on 180KB library just to rotate and fade few circles.

Nifty effect, but I don't see anything newsworthy about it. Can we stop the fascination with every thing that moves in a browser? DHTML is over a decade old now.

Do we really need to keep rehashing how popular jQuery is, and how frequently it is cached client-side from various CDNs?

It's not simply that it moves, it's a slick presentation of a very boring element (namely unordered lists).

180KB? I only see jQuery (70KB uncompressed, it should be gzipped down to ~20KB) and the 2KB plugin on the demo page.

So that's about 22KB for this effect when most sites already are including jQuery anyway.

I'm actually impressed by this type of UI. Each button is equidistant from the center. This makes it a little bit easier to use for users lacking fine motor control (elderly, disabled, children).

Well, jQuery.com says 179KB. Yes, it gets minified and compressed to less.

My point is that there's nothing impressive about it:

• it's not novel. Circular UIs are old. DHTML and rounded corners are old.

• it's not some advanced code. Rotating equidistant circles is basic trigonometry, not a rocket science.

• it's not even a clever hack. JS1K contest had whole games in half of the size, without jQuery to help.

I don’t know, it’s giving undue weight to the bottom item. Too distracting to use in production anywhere.

Where's a working demo?

Button on the right side of the page: http://playground.mobily.pl/jquery/mobily-blocks/demo.html

Reply on news.ycombinator.com