4 ms·

2kb JQuery for animated list in circle

57 points by kingsidharth 16y ago

bluedevil2k 16y ago
Very cool. Reminds me of the "Circle of Friends" animations that the cell phone companies used to use.
jameskilton 16y ago
Very nice. Particularly good example of how to hide that ever increasing number of social sharing links showing up everywhere.
- baddox 16y ago
  Incidentally, does anyone actually use those links?
chrisbroadfoot 16y ago
Source: http://playground.mobily.pl/assets/demo/blocks/js/mobilyblocks.js 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.
- zephjc 16y ago
  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 http://closure-compiler.appspot.com/home with "Advanced" checked: Original Size: 2.13KB (940 bytes gzipped) Compiled Size: 1.28KB (660 bytes gzipped)
- noodle 16y ago
  because it was likely designed for displaying social bookmarking links in a neat way.
Sidnicious 16y ago
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.
- chime 16y ago
  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/ http://chir.ag/projects/drop-search/ project demo on: http://chir.ag/projects/drop-search/demo.shtml http://chir.ag/projects/drop-search/demo.shtml vs http://chir.ag/ 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.
- miniatureape 16y ago
  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.
geuis 16y ago
Where's a working demo?
- Osmose 16y ago
  Button on the right side of the page: http://playground.mobily.pl/jquery/mobily-blocks/demo.html http://playground.mobily.pl/jquery/mobily-blocks/demo.html
Sukotto 16y ago
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
pornel 16y ago
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.
- tjarratt 16y ago
  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).
- rdoherty 16y ago
  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).
  - pornel 16y ago
    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.
alanh 16y ago
I don’t know, it’s giving undue weight to the bottom item. Too distracting to use in production anywhere.

57 points by kingsidharth 16y ago

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

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

baddox 16y ago
Incidentally, does anyone actually use those links?

chrisbroadfoot 16y ago

Source: http://playground.mobily.pl/assets/demo/blocks/js/mobilyblocks.js 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.

zephjc 16y ago
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 http://closure-compiler.appspot.com/home with "Advanced" checked: Original Size: 2.13KB (940 bytes gzipped) Compiled Size: 1.28KB (660 bytes gzipped)
noodle 16y ago
because it was likely designed for displaying social bookmarking links in a neat way.

Sidnicious 16y ago

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.

chime 16y ago
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/ http://chir.ag/projects/drop-search/ project demo on: http://chir.ag/projects/drop-search/demo.shtml http://chir.ag/projects/drop-search/demo.shtml vs http://chir.ag/ 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.
miniatureape 16y ago
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.

geuis 16y ago

Where's a working demo?

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

Sukotto 16y ago

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

pornel 16y ago

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.

tjarratt 16y ago
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).
rdoherty 16y ago
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).
- pornel 16y ago
  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.

alanh 16y ago

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