9 ms·

TremulaJS

102 points by taivare 11y ago

lucassouza1 11y ago
Good job. Pretty smooth.
vosper 11y ago
I see a big grey space. There's a button in the top left "Config it if you dig it" that brings up some options, none of which do anything. Clicking on the name in the bottom right takes me to a blog post. Chrome 43.0.2357.81 (64-bit)
- kondro 11y ago
  You need to wait a bit longer for the images to load.
  - warp 11y ago
    I had the same experience (a grey page with not much on it), it could use a loading bar.
  - vosper 11y ago
    I waited for a few minutes and nothing happened. Don't know if the creator knows about this thread, but I checked the console, and saw the below error. I'm pretty sure the issue is that I have the HttpsEverywhere plugin installed, and this link is hardcoded to be insecure. I think if the source was changed to "//" instead of "http://" http://" this would work. Mixed Content: The page at 'https://garris.github.io/TremulaJS/' https://garris.github.io/TremulaJS/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://ws-decor.art.com/api/decorProductSearch?engine=judy&pageNumber=1&num…se&totalRetrieved=0&getDataFromThisUrl=null&totalFound=1000&pageReturned=4' http://ws-decor.art.com/api/decorProductSearch?engine=judy&p.... This request has been blocked; the content must be served over HTTPS.
    - anilgulecha 11y ago
      I had the same issue. IN my case I had https everywhere addon installed. That forces https.
  - taspeotis 11y ago
    I don't think waiting is going to fix this problem... XMLHttpRequest cannot load http://ws-decor.art.com/api/decorProductSearch?engine=judy&pageNumber=1&num…se&totalRetrieved=0&getDataFromThisUrl=null&totalFound=1000&pageReturned=4. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://garris.github.io' is therefore not allowed access.
  - smoe 11y ago
    In my case it was the privacy badger plugin blocking calls to art.com, where the images are from.
- kaoD 11y ago
  Same here. Errors in console: starting tremula getJSON problem. no target object selected Tremula: Warning. No data found on layout operation. no target object selected Tremula: Warning. No data found on layout operation. TypeError: reduce of empty array with no initial value no target object selected TypeError: reduce of empty array with no initial value no target object selected TypeError: reduce of empty array with no initial value no target object selected TypeError: reduce of empty array with no initial value Tremula: Warning. No data found on layout operation." no target object selected Tremula: Warning. No data found on layout operation. Firefox 38.0.1 (64 bit)
joshribakoff 11y ago
Right away my first reaction was "really cool name". I also saw a blank grey page until it loaded. If the user has a shoddy network & a request times out, they would see that indefinitely I'd assume. Should add a loading/error hander(s) because this is a really awesome product, and I'd hate for people to overlook it over that. Really good job. I especially like the "item level momentum". Only thing its missing is a virtual scroll bar and/or ability to interact via keyboard arrows (arrows arent doing anything, at least on my macbook air in chrome)
mbell 11y ago
The JS implementation is really cool and very smooth. The request to art.com's search API which is taking many seconds and probably isn't making their servers very happy, is not so cool, and possibly illegal.
- detaro 11y ago
  It's made by a developer at art.com, so I wouldn't worry to much about that
plaguuuuuu 11y ago
Mousewheel support might make this more accessible to people who don't quite get the swiping thing on desktop platforms..
- tracker1 11y ago
  Agreed, also, differentiating between "touch" and "mouse" events would be a good idea, using a mouse or touchpad for this was kind of a weird experience. Not to mention supporting left-right arrow key binding. That said, if this was for a mobile-only interface (Apache Cordova, or similar) might not be so bad. Didn't look to see the implementation details, but Angular, React and Bootstrap compatible versions of this as components would be awesome.
rburhum 11y ago
GPLv3 license for a javascript library. I understand the implications for native code, but what is the reasoning + consequence of this in a javascript application?
- TD-Linux 11y ago
  The rest of your Javascript must also be free software. The implications are basically the same as native code.
  - pcthrowaway 11y ago
    Can you also make use of other non-GPL libraries on your website then? I would assume this would realistically only affect the portion of your code that interacts with Tremula
    - jahewson 11y ago
      > I would assume this would realistically only affect the portion of your code that interacts with Tremula Yes if those portions are separate pages, otherwise no. The GPL doesn't permit linking to (i.e. calling into or calling from) non-GPL'd code . The GPL FAQ states that an exception to the GPL is needed in order to permit JavaScript library calls, see http://www.gnu.org/licenses/gpl-faq.html#WMS http://www.gnu.org/licenses/gpl-faq.html#WMS. Any application code which interacts with Tremula must be under the GPL and any libraries it uses must be GPL compatible. Any code which calls into that application code will also need to be under the GPL too.
    - TD-Linux 11y ago
      Yes, as long as they are GPL-compatible. So 3-clause BSD, MIT, etc are all fine.
nodesocket 11y ago
Great job. How far we've come from JavaScript lightboxes using prototype.js. It still blows my mind the amount of quality libraries and frameworks available today.
NamTaf 11y ago
The user interaction of this sucks on desktop with a mouse. If I click+hold and move my mouse fast, then bring it to a stop and let go, the thing spins off into the abyss because it's as if I swiped fast when I did not. I repositioned the cursor to a set point and let go - it stopped and should stay stationary. If I move my cursor slowly there is absolutely no inertia. If I move my cursor above some arbitrary speed, the thing spins like it's trying to take off. edit: Sorry, there is a very narrow band of inertia levels. Most of the 'slow' mouse movement sits below the lower bounds and so has 0 inertia, and if I go even just a bit faster I exceed the upper threshold and shoot off into infinity. The first thing I did was try to use my mouse wheel to scroll, like just about every other desktop implementation of such a list. Nothing happened and I wondered if it was just a fixed image I was interacting with wrongly. edit: FF 38.0.1, Win7 x64, default mouse settings (6/11 slider setting, "enhance pointer precision" acceleration on, presumably 400 dpi on this generic dell workstation mouse). edit #2: I should clarify: graphically, this is neat and I like it. I haven't tried it on my phone but I sense that it'd work well and look good, but on a PC it just keeps moving in ways you don't want it to and feels all wrong. I keep having to 'catch' the images after flying over them several times.
- jahewson 11y ago
  My first instinct was to use my MacBook Pro's multi-touch to scroll. Unfortunately that doesn't work either. Looks pretty though and the animations are smooth.
  - davelnewton 11y ago
    I can scroll with my MBP's trackpad just fine.
    - jahewson 11y ago
      For me horizontal scroll does nothing in Safari, in Chrome and Firefox it triggers the forward/back gesture.
- deleted 11y ago
  [deleted]
chuckcode 11y ago
Really smooth and fast way to browse lots of images easily. Definitely play around with the "config it if you dig it" options to see what else is possible. Kudos to the author for the work and making it available to everyone. Have to dig a little deeper to see if I can make a way to have images enlarge when clicked. Great to see high quality options for sharing photos outside of putting them all on dropbox/google/flickr/etc. Does anybody know of any similar functionality from other packages? I haven't seen anything close but haven't looked hard lately.
tempodox 11y ago
So, is this an art fake generator, or what? It leaves you guessing at what's the point of it all. Some presentations are just not made for a broader public that doesn't have a crystal ball to give the answers the site builders forgot to include.
- sam_goody 11y ago
  It's a image gallery, designed for displaying large collections of images.
  - vladsanchez 11y ago
    Like your name. I still remember Sam Goody. =D
- serf 11y ago
  it doesn't help that a demo page was linked rather than an explanation, either.
bshimmin 11y ago
Looking at the source, I noticed this uses RequireJS, which provoked in me a slight feeling of nostalgia. That's rather telling, since it's probably less than three years since RequireJS was absolutely the first choice as far as JavaScript module libraries went. (We were early Browserify adopters, two years or so ago, and haven't looked back since - or even bothered to evaluate any of the newer alternatives, in fact.)
- insin 11y ago
  There are probably some Webpack users reading this who have similar feelings about Browserify.
  - bshimmin 11y ago
    Webpack is so last year, man. Surely everyone is using jspm now!
    - Cederfjard 11y ago
      This comment chain gave me slight anxiety. I hadn't heard of either Webpack or jspm before. Modern web dev is overwhelming.
      - bshimmin 11y ago
        Fear not. I delivered a project for a client a few weeks ago which featured plain HTML, CSS, and "vanilla" JavaScript, with no libraries apart from the venerable jQuery, and not a pre- or post-processor in sight. It was quite liberating!
        tracker1 11y ago
        There's something to be said for that... Even with jQuery today it's often easier to step out of the box a little and use more straight JS. With IE8 finally falling off, and IE9/10s days numberd it's pretty liberating. That said, I love my ES6/7 syntax sugar, and write a lot of server-side JS too, so the transpiling doesn't really bug me.
tacone 11y ago
A Javascript library licensed as GPL? Good luck at guessing how "static/dynamic linking" applies to javascript. Then wonder nexus between the concept of "distributing" and HTTP downloading. It's license trolling at its finest :)
- tracker1 11y ago
  Wow, I hadn't even noticed that... Other than ExtJS (which is dual licensed, and their intent is clear), I don't think I've seen JS licensed under something that isn't very close to MIT/ISC or similar. And as to static/dynamic, absolutely.. if it's properly abstracted, does dynamic mean just leaving it in its' own file (separate script tag in the browser)?
  - belorn 11y ago
    None of the requirement or rights in GPLv3 mentions dynamic or static linking, so one do not need apply such concepts to javascript. Scope of the work however is not well defined on the web. Is each page a separate work, or should the domain of a site define the limits where one work begin and one work ends? Does a image count as part of the work, or abstracted and separated? What about links? And then we got Javascript. Personally, I lean towards JS and images being in the same boat. If an image creates a derivative work when added to a website, then JS surely does the same.
- deleted 11y ago
  [deleted]
amelius 11y ago
On Linux with Chromium, I get quite some flicker when swiping horizontally. Is that just me? Edit: same with Firefox. I have an Intel Celeron 2.6GHz system, /proc/cpuinfo gives two CPU cores at 5188 bogomips.
oknoorap 11y ago
pretty smooth, using chrome
iamthepieman 11y ago
Clearly this is a mobile only library currently. It looks really nice and there's nothing wrong with having a mobile only site/js library/tool. However I'm currently consuming morning news and media at my PC and don't want to get out a tablet to check this out so I will never really know how good it might have been on mobile. Desktop-only interactions on mobile just makes a site seem simple. Touch=click, swipe=scroll. As long as buttons are big enough and have enough padding no one complains and they use it fine. Mobile-only interactions on desktop though are generally horrible.
talmand 11y ago
The option called "mountain" should be named "pinwheel".
hellovi 11y ago
This is good
davelnewton 11y ago
I sure get annoyed when the "headline" is just the name of a library with zero context indicating what it might even be.
- artjumble 11y ago
  Agreed. Why not use part of this line from the blog "Put another way, TremulaJS can be thought of as an extremely bad-ass image slider."
- 8ig8 11y ago
  At times, I agree, but the guidelines [1] say: > Otherwise please use the original title, unless it is misleading or linkbait. [1] https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html
mwexler 11y ago
From their Github (https://github.com/garris/TremulaJS https://github.com/garris/TremulaJS): Picture Streams + Momentum Engine + Bézier Paths + Cross-Browser + Cross-Device TremulaJS is a client-side javascript UI component providing Bézier-based content-stream interactions with momentum & physics effects for mouse, scroll and and touch UIs. Put another way, TremulaJS can be thought of as an extremely bad-ass image carousel.
aries1980 11y ago
I've been using Swiper (http://www.idangero.us/swiper/demos/ http://www.idangero.us/swiper/demos/), can you explain how the goal of this lib is different?

102 points by taivare 11y ago

Good job. Pretty smooth.

I see a big grey space. There's a button in the top left "Config it if you dig it" that brings up some options, none of which do anything. Clicking on the name in the bottom right takes me to a blog post. Chrome 43.0.2357.81 (64-bit)

kondro 11y ago
You need to wait a bit longer for the images to load.
- warp 11y ago
  I had the same experience (a grey page with not much on it), it could use a loading bar.
- vosper 11y ago
  I waited for a few minutes and nothing happened. Don't know if the creator knows about this thread, but I checked the console, and saw the below error. I'm pretty sure the issue is that I have the HttpsEverywhere plugin installed, and this link is hardcoded to be insecure. I think if the source was changed to "//" instead of "http://" http://" this would work. Mixed Content: The page at 'https://garris.github.io/TremulaJS/' https://garris.github.io/TremulaJS/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://ws-decor.art.com/api/decorProductSearch?engine=judy&pageNumber=1&num…se&totalRetrieved=0&getDataFromThisUrl=null&totalFound=1000&pageReturned=4' http://ws-decor.art.com/api/decorProductSearch?engine=judy&p.... This request has been blocked; the content must be served over HTTPS.
  - anilgulecha 11y ago
    I had the same issue. IN my case I had https everywhere addon installed. That forces https.
- taspeotis 11y ago
  I don't think waiting is going to fix this problem... XMLHttpRequest cannot load http://ws-decor.art.com/api/decorProductSearch?engine=judy&pageNumber=1&num…se&totalRetrieved=0&getDataFromThisUrl=null&totalFound=1000&pageReturned=4. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://garris.github.io' is therefore not allowed access.
- smoe 11y ago
  In my case it was the privacy badger plugin blocking calls to art.com, where the images are from.
kaoD 11y ago
Same here. Errors in console: starting tremula getJSON problem. no target object selected Tremula: Warning. No data found on layout operation. no target object selected Tremula: Warning. No data found on layout operation. TypeError: reduce of empty array with no initial value no target object selected TypeError: reduce of empty array with no initial value no target object selected TypeError: reduce of empty array with no initial value no target object selected TypeError: reduce of empty array with no initial value Tremula: Warning. No data found on layout operation." no target object selected Tremula: Warning. No data found on layout operation. Firefox 38.0.1 (64 bit)

joshribakoff 11y ago

Right away my first reaction was "really cool name". I also saw a blank grey page until it loaded. If the user has a shoddy network & a request times out, they would see that indefinitely I'd assume. Should add a loading/error hander(s) because this is a really awesome product, and I'd hate for people to overlook it over that. Really good job. I especially like the "item level momentum". Only thing its missing is a virtual scroll bar and/or ability to interact via keyboard arrows (arrows arent doing anything, at least on my macbook air in chrome)

mbell 11y ago

The JS implementation is really cool and very smooth. The request to art.com's search API which is taking many seconds and probably isn't making their servers very happy, is not so cool, and possibly illegal.

detaro 11y ago
It's made by a developer at art.com, so I wouldn't worry to much about that

plaguuuuuu 11y ago

Mousewheel support might make this more accessible to people who don't quite get the swiping thing on desktop platforms..

tracker1 11y ago
Agreed, also, differentiating between "touch" and "mouse" events would be a good idea, using a mouse or touchpad for this was kind of a weird experience. Not to mention supporting left-right arrow key binding. That said, if this was for a mobile-only interface (Apache Cordova, or similar) might not be so bad. Didn't look to see the implementation details, but Angular, React and Bootstrap compatible versions of this as components would be awesome.

rburhum 11y ago

GPLv3 license for a javascript library. I understand the implications for native code, but what is the reasoning + consequence of this in a javascript application?

TD-Linux 11y ago
The rest of your Javascript must also be free software. The implications are basically the same as native code.
- pcthrowaway 11y ago
  Can you also make use of other non-GPL libraries on your website then? I would assume this would realistically only affect the portion of your code that interacts with Tremula
  - jahewson 11y ago
    > I would assume this would realistically only affect the portion of your code that interacts with Tremula Yes if those portions are separate pages, otherwise no. The GPL doesn't permit linking to (i.e. calling into or calling from) non-GPL'd code . The GPL FAQ states that an exception to the GPL is needed in order to permit JavaScript library calls, see http://www.gnu.org/licenses/gpl-faq.html#WMS http://www.gnu.org/licenses/gpl-faq.html#WMS. Any application code which interacts with Tremula must be under the GPL and any libraries it uses must be GPL compatible. Any code which calls into that application code will also need to be under the GPL too.
  - TD-Linux 11y ago
    Yes, as long as they are GPL-compatible. So 3-clause BSD, MIT, etc are all fine.

nodesocket 11y ago

Great job. How far we've come from JavaScript lightboxes using prototype.js. It still blows my mind the amount of quality libraries and frameworks available today.

NamTaf 11y ago

The user interaction of this sucks on desktop with a mouse. If I click+hold and move my mouse fast, then bring it to a stop and let go, the thing spins off into the abyss because it's as if I swiped fast when I did not. I repositioned the cursor to a set point and let go - it stopped and should stay stationary. If I move my cursor slowly there is absolutely no inertia. If I move my cursor above some arbitrary speed, the thing spins like it's trying to take off. edit: Sorry, there is a very narrow band of inertia levels. Most of the 'slow' mouse movement sits below the lower bounds and so has 0 inertia, and if I go even just a bit faster I exceed the upper threshold and shoot off into infinity. The first thing I did was try to use my mouse wheel to scroll, like just about every other desktop implementation of such a list. Nothing happened and I wondered if it was just a fixed image I was interacting with wrongly. edit: FF 38.0.1, Win7 x64, default mouse settings (6/11 slider setting, "enhance pointer precision" acceleration on, presumably 400 dpi on this generic dell workstation mouse). edit #2: I should clarify: graphically, this is neat and I like it. I haven't tried it on my phone but I sense that it'd work well and look good, but on a PC it just keeps moving in ways you don't want it to and feels all wrong. I keep having to 'catch' the images after flying over them several times.

jahewson 11y ago
My first instinct was to use my MacBook Pro's multi-touch to scroll. Unfortunately that doesn't work either. Looks pretty though and the animations are smooth.
- davelnewton 11y ago
  I can scroll with my MBP's trackpad just fine.
  - jahewson 11y ago
    For me horizontal scroll does nothing in Safari, in Chrome and Firefox it triggers the forward/back gesture.
deleted 11y ago
[deleted]

chuckcode 11y ago

Really smooth and fast way to browse lots of images easily. Definitely play around with the "config it if you dig it" options to see what else is possible. Kudos to the author for the work and making it available to everyone. Have to dig a little deeper to see if I can make a way to have images enlarge when clicked. Great to see high quality options for sharing photos outside of putting them all on dropbox/google/flickr/etc. Does anybody know of any similar functionality from other packages? I haven't seen anything close but haven't looked hard lately.

tempodox 11y ago

So, is this an art fake generator, or what? It leaves you guessing at what's the point of it all. Some presentations are just not made for a broader public that doesn't have a crystal ball to give the answers the site builders forgot to include.

sam_goody 11y ago
It's a image gallery, designed for displaying large collections of images.
- vladsanchez 11y ago
  Like your name. I still remember Sam Goody. =D
serf 11y ago
it doesn't help that a demo page was linked rather than an explanation, either.

bshimmin 11y ago

Looking at the source, I noticed this uses RequireJS, which provoked in me a slight feeling of nostalgia. That's rather telling, since it's probably less than three years since RequireJS was absolutely the first choice as far as JavaScript module libraries went. (We were early Browserify adopters, two years or so ago, and haven't looked back since - or even bothered to evaluate any of the newer alternatives, in fact.)

insin 11y ago
There are probably some Webpack users reading this who have similar feelings about Browserify.
- bshimmin 11y ago
  Webpack is so last year, man. Surely everyone is using jspm now!
  - Cederfjard 11y ago
    This comment chain gave me slight anxiety. I hadn't heard of either Webpack or jspm before. Modern web dev is overwhelming.
    - bshimmin 11y ago
      Fear not. I delivered a project for a client a few weeks ago which featured plain HTML, CSS, and "vanilla" JavaScript, with no libraries apart from the venerable jQuery, and not a pre- or post-processor in sight. It was quite liberating!
      - tracker1 11y ago
        There's something to be said for that... Even with jQuery today it's often easier to step out of the box a little and use more straight JS. With IE8 finally falling off, and IE9/10s days numberd it's pretty liberating. That said, I love my ES6/7 syntax sugar, and write a lot of server-side JS too, so the transpiling doesn't really bug me.

tacone 11y ago

A Javascript library licensed as GPL? Good luck at guessing how "static/dynamic linking" applies to javascript. Then wonder nexus between the concept of "distributing" and HTTP downloading. It's license trolling at its finest :)

tracker1 11y ago
Wow, I hadn't even noticed that... Other than ExtJS (which is dual licensed, and their intent is clear), I don't think I've seen JS licensed under something that isn't very close to MIT/ISC or similar. And as to static/dynamic, absolutely.. if it's properly abstracted, does dynamic mean just leaving it in its' own file (separate script tag in the browser)?
- belorn 11y ago
  None of the requirement or rights in GPLv3 mentions dynamic or static linking, so one do not need apply such concepts to javascript. Scope of the work however is not well defined on the web. Is each page a separate work, or should the domain of a site define the limits where one work begin and one work ends? Does a image count as part of the work, or abstracted and separated? What about links? And then we got Javascript. Personally, I lean towards JS and images being in the same boat. If an image creates a derivative work when added to a website, then JS surely does the same.
deleted 11y ago
[deleted]

amelius 11y ago

On Linux with Chromium, I get quite some flicker when swiping horizontally. Is that just me? Edit: same with Firefox. I have an Intel Celeron 2.6GHz system, /proc/cpuinfo gives two CPU cores at 5188 bogomips.

oknoorap 11y ago

pretty smooth, using chrome

iamthepieman 11y ago

Clearly this is a mobile only library currently. It looks really nice and there's nothing wrong with having a mobile only site/js library/tool. However I'm currently consuming morning news and media at my PC and don't want to get out a tablet to check this out so I will never really know how good it might have been on mobile. Desktop-only interactions on mobile just makes a site seem simple. Touch=click, swipe=scroll. As long as buttons are big enough and have enough padding no one complains and they use it fine. Mobile-only interactions on desktop though are generally horrible.

talmand 11y ago

The option called "mountain" should be named "pinwheel".

hellovi 11y ago

This is good

davelnewton 11y ago

I sure get annoyed when the "headline" is just the name of a library with zero context indicating what it might even be.

artjumble 11y ago
Agreed. Why not use part of this line from the blog "Put another way, TremulaJS can be thought of as an extremely bad-ass image slider."
8ig8 11y ago
At times, I agree, but the guidelines [1] say: > Otherwise please use the original title, unless it is misleading or linkbait. [1] https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html

mwexler 11y ago

From their Github (https://github.com/garris/TremulaJS https://github.com/garris/TremulaJS): Picture Streams + Momentum Engine + Bézier Paths + Cross-Browser + Cross-Device TremulaJS is a client-side javascript UI component providing Bézier-based content-stream interactions with momentum & physics effects for mouse, scroll and and touch UIs. Put another way, TremulaJS can be thought of as an extremely bad-ass image carousel.

aries1980 11y ago

I've been using Swiper (http://www.idangero.us/swiper/demos/ http://www.idangero.us/swiper/demos/), can you explain how the goal of this lib is different?