TremulaJS(garris.github.io)
garris.github.io
TremulaJS
http://garris.github.io/TremulaJS/
20 comments
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.
I can scroll with my MBP's trackpad just fine.
For me horizontal scroll does nothing in Safari, in Chrome and Firefox it triggers the forward/back gesture.
[deleted]
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)
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 :)
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 :)
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)?
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)?
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.
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]
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.
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.
Mousewheel support might make this more accessible to people who don't quite get the swiping thing on desktop platforms..
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.
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.
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.
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.
it doesn't help that a demo page was linked rather than an explanation, either.
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?
The rest of your Javascript must also be free software. The implications are basically the same as native code.
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
> 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. 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.
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. 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.
Yes, as long as they are GPL-compatible. So 3-clause BSD, MIT, etc are all fine.
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.)
(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.)
There are probably some Webpack users reading this who have similar feelings about Browserify.
Webpack is so last year, man. Surely everyone is using jspm now!
This comment chain gave me slight anxiety. I hadn't heard of either Webpack or jspm before. Modern web dev is overwhelming.
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!
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.
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.
Even with jQuery today it's often easier to step out of the box a little and use more straight JS
You mean straight DOM not JS because as a matter of fact, jQuery didn't add a lot to the feature set of JS but contributed immensely to fix/smooth the DOM API.
You mean straight DOM not JS because as a matter of fact, jQuery didn't add a lot to the feature set of JS but contributed immensely to fix/smooth the DOM API.
Yes.. and DOM support across browsers is much better than when jQuery was first developed, also jQuery has a lot of utility methods that are already built into iteratables (Arrays).
[].concat(document.querySelectorAll('#foo > div')).forEach(function(div){
//got my div
})
$('#foo > div').each(function(){
var div = this;
//never liked this pattern, and even then why isn't "this" a jQuery object?
});
`.bind(this)` or an ES6 fat arrow solves the `this` problem in your jQuery example.
As to why... well, it makes more sense with jQuery's event listeners (`$(this)` being much shorter than `$(event.currentTarget)` and usually being what you actually want), and thus I guess in the name of consistency it's good to have all callbacks behave the same way. Why it's not a jQuery object... pass. More often than not that would be what you want, and if it's not, `.get(0)` or `[0]` is hardly a great stretch. Historical reasons, perhaps.
If I'm iterating over collections of elements and I have access to Underscore, I'll just use `_.each($("..."))`, which has the benefits of a more suitable `this` and the callback arguments in a sensible order (element then index).
As to why... well, it makes more sense with jQuery's event listeners (`$(this)` being much shorter than `$(event.currentTarget)` and usually being what you actually want), and thus I guess in the name of consistency it's good to have all callbacks behave the same way. Why it's not a jQuery object... pass. More often than not that would be what you want, and if it's not, `.get(0)` or `[0]` is hardly a great stretch. Historical reasons, perhaps.
If I'm iterating over collections of elements and I have access to Underscore, I'll just use `_.each($("..."))`, which has the benefits of a more suitable `this` and the callback arguments in a sensible order (element then index).
If I did a `bind(this)` in a jQuery event handler, I could never access the item that was being iterated, or the event was raised for... My problem with `this` in jQuery is that it's context that isn't passed.
$('#foo').click(function(foo,event){ ... });
$('#foo .item').each(function(item,index){...});
$('#foo').click(function(event){ var foo = $(this); ...})
$('#foo .item').each(function(index){ var item = $(this); }
$('#foo').bind('foo',myContextObject.handleFoo.bind(myContextObject));
Heh, yes. I just started using RequireJS in one of my projects for first time (previously was just using script tags). I don't even try to keep up with this stuff, besides being aware of it. I'll leave it to the 100% JS devs and the rock stars. I have a lot of other things on my radar, and web/JS development is less than 30% of my day. I don't have time to keep up with all the changes. If it works, ship it. If it ain't broke, don't fix it.
Once ES6 is well handled by the browsers a lot of these intermediate shims/libraries will go away anyways.
Once ES6 is well handled by the browsers a lot of these intermediate shims/libraries will go away anyways.
I wouldn't worry as much.. I don't think that jspm will stick in that it really doesn't do much do much over straight npm and I wouldn't be surprised to see git semver matching on tags for versioning as a support route.
As to webpack, conceptually it's awesome... though it just feels a bit alien to me in practice. Just a few layers too much PFM (pure f*ing magic) for my taste, when I am already using ES6/7 syntax more and more in addition to React, BabelJS, Browserify bits.
As to webpack, conceptually it's awesome... though it just feels a bit alien to me in practice. Just a few layers too much PFM (pure f*ing magic) for my taste, when I am already using ES6/7 syntax more and more in addition to React, BabelJS, Browserify bits.
IMO Webpack and browserify are on a pretty even playing ground, with pros and cons in each. I don't get the people who say one has made the other obsolete.
I sure get annoyed when the "headline" is just the name of a library with zero context indicating what it might even be.
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
> Otherwise please use the original title, unless it is misleading or linkbait.
[1] https://news.ycombinator.com/newsguidelines.html
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."
I've been using Swiper (http://www.idangero.us/swiper/demos/), can you explain how the goal of this lib is different?
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)
Chrome 43.0.2357.81 (64-bit)
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.
You need to wait a bit longer for the images to load.
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://" this would work.
Mixed Content: The page at 'https://garris.github.io/TremulaJS/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://ws-decor.art.com/api/decorProductSearch?engine=judy&p.... This request has been blocked; the content must be served over HTTPS.
Mixed Content: The page at 'https://garris.github.io/TremulaJS/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://ws-decor.art.com/api/decorProductSearch?engine=judy&p.... This request has been blocked; the content must be served over HTTPS.
I had the same issue. IN my case I had https everywhere addon installed. That forces https.
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.In my case it was the privacy badger plugin blocking calls to art.com, where the images are from.
I had the same experience (a grey page with not much on it), it could use a loading bar.
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.
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.
From their Github (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.
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.
The option called "mountain" should be named "pinwheel".
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.
Edit: same with Firefox. I have an Intel Celeron 2.6GHz system, /proc/cpuinfo gives two CPU cores at 5188 bogomips.
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.
Good job. Pretty smooth.
This is good
pretty smooth, using chrome
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.