I'm trying to move the pieces so that the lines are continuous along all the faces with no dead ends. This would actually make a pretty fun minigame if it was achievable.
Not sure why it matters that it's an open source project homepage? If treated as a webpage in general among all other webpages, the design isn't that special. It's not awful, but pushing a ton of deep blue in your face would not be considered good design by many.
I appreciate the minimalism they're going for, the thick borders and that they aren't afraid of color, but the blue is too much. This trend of one-page fancy-scrolls grew from catering to mobile devices. On average, it seems like their only goal is to avoid bad design on mobile and ignore all other devices. These giant scrolling minimalist pages are often bad design on desktop, mediocre design on tablets and ok design on mobile.
Do not forget that webpages at their core are about information design. I just had to scroll almost 8 pages in order to read a few paragraphs and most of the paragraphs didn't have the information that was interesting to me.
The page that really had the information I wanted was hidden behind a "Contribute" button which makes no sense and you have to scroll all the way back up to the top to get to if you've read down to the bottom.
The style it's going for is fine, but I'm not sold on it being good information design for all devices, if any. :/
> Do not forget that webpages at their core are about information design.
I believe your are confusing web pages with graphic design. A graphic designer's job is based in information architecture. Webpages were originally designed for simple document sharing, however since '96 - we still have some simple documents, but we also have non-trivial games, and extremely complex applications that run businesses.
This open source project happens to be for the mid to latter, so it seems appropriate then that they actually demo some of the features of the library. Also, one could make the argument that a beautiful design can inspire another developer to make something beautiful. API's are often pretty dull. I find this design to be delightful.
BTW, you can always use shortcuts provided by your browser/OS. Tap in the header on mobile, press "Home" on Windoze, and Cmd+Up on Mac.
> I believe your are confusing web pages with graphic design.
I'm not. I remember the times of Bulletin Board Systems you had to dial into and then the transition to the popularity of the web. It has always been about navigating information. Sometimes the information is art. Sometimes the information is the interactivity itself. Most of the time the information is text. Once people realized that packaging was important, just like a hardback book with a wonderful cover and table of contents versus a manuscript-like stack of impenetrable pages, it became a matter of business. Nobody says a book can't have pop-up cut-outs that unfold when you open a page, but whatever the quality of a book is, it can be measured.
What I'm saying is that, I can appreciate what this webpage is doing, but I also would not say that it is a fantastic example of web design.
> Also, one could make the argument that a beautiful design can inspire another developer to make something beautiful. API's are often pretty dull. I find this design to be delightful.
My complaints with it should be possible to fully resolve while maintaining every one of those qualities you like about it.
> BTW, you can always use shortcuts provided by your browser/OS. Tap in the header on mobile, press "Home" on Windoze, and Cmd+Up on Mac.
I am aware of that, but often people are navigating mostly with the mouse and requiring the user to move their hand away from the mouse isn't user friendly. There is a human in front of the machine. It isn't just about the capabilities of the machine. Proper design is about the complete stack, including the biological part of it.
I don't mind if other people like a page. My concern is that people take it as excellent design that should be replicated, including its faults. If someone reads these comments and appreciates that, maybe it will do some good.
> pushing a ton of deep blue in your face would not be considered good design by many.
Sorry to see that you're getting downvoted. Backlit, saturated colors like that are really unpleasant for some people. Designers should take that into account. Same goes for animation on pages that are meant to be read (another trend which is definitely not accessible for many people).
(Other than the color intensity, the page is great.)
There is a gray area in there. Animation is an accessibility problem, even when the result is only that the user can't use the website. Colors less so, unless the contrast is low. Material Design has had really bad influence on both animation and color saturation practices over the past couple of years so I tend to group them together.
Maybe my phone is too old? Runs horribly on Firefox/note3
Didn't even realize it was I teractive u til half way through when my phone started spitting out audio then a second or two later I saw a block randomly move(well bot randomly but no abim while it was catching up).
Tried to long press to slowly do something, still no joy.
Edit/note, I do look forward to seeing this on a PC though, judging from the comments :-)
Edit: slightly older version of chrome did work better(although note the edge report lower)
Edit 2: I was bored. No audio in brave browser :-p
It does not work well on Microsoft Edge too. It is a bit is sluggy and touch support seems non-existent (or not working because it scrolls the page too).
Running terribly on Firefox for Android here as well, but really smooth in whatever browser my HN app uses (I assume Chrome). That said, the Chrome(?) version kept dropping blocks early and Firefox was more accurate...
unfortunately, force touch is not supported by all Macs. it's unfortunate that this doesn't work in the battery-saving browser of choice for a lot of people (myself included), because the website is gorgeous.
I'm a long time Mac user but didn't realized that my Macbook has force touch functionality until now. Cannot see how 'force touch' adds any value, though.
> Cannot see how 'force touch' adds any value, though.
I guess if you want to scroll the page instead of dragging elements - having force touch helps distinguish two actions. I know it's different but in google maps for example it's super annoying when instead of scrolling down the page - the map iframe is trying to zoom out.
Not sure I follow, scrolling and dragging are two completely different gestures? Overloading scroll to mean zoom is problematic, but that's not happening here. You need to click "deeper" than usual for seemingly no reason. Fwiw I also thought the page was broken in Safari, never used force touch before on a website except to preview links.
I was referring about the 3d touch on iPhones. Maybe safari on mac and on iphone share something in them which makes 3d touch on iphone act like a force touch on macs.
Breaks scrolling on mobile, if you happen to start a scroll at the wrong place. I would be seriously pissed if I’m just trying to scroll but this thing stopped me.
Cute examples, but nothing useful as far as building out a drag and drop UI. I assume this is being used on the Shopify template editor and not a new web game engine they're working on... would love to see examples that are a bit more practical.
It also took me a while to even realize the landing page was interactive. A good DnD UI should make it clear to the user what pieces are interactive.
Same experience here - I scrolled up and down that page many times looking for a 'Demo' link, and it was only by chance that I clicked and dragged a block and realised "Oh, these block thingies are more than just decorative art!".
And to echo your other point - I am actually currently looking for a good drag and drop library for our web app. I would really like to see a more 'boring' demo which demonstrates some sort of Kanban board like functionality, dragging images or text blocks between boxes. I also want to see ability to restrict dropping or sorting etc. on a granular level.
The current 'demo' is cute, but not really translatable to my concept of what I want. I am more likely to dismiss this library as a games engine rather that something that could be used in an enterprise tool based on my experience to date.
I used this as well. Very impressed. Upon revisiting thr site that I built with it I have noticed chrome no long stops scrolling whike you are dragging an element on mobile. So that's a bummer.
If you want to target legacy browsers and don't mind download size, it's better to stick with jqueryui if you can. I have used combination of jqueryui and jsplumb to accomplish similar real world web apps. Jqueryui is pretty old school and too heavy(size), but lets you get the job done quickly. It also can expand beyond drag and drop into sortable and provide extensive customisation support via hooks to go beyond the out-of-the-box features. Because it's very mature there are tons of help and practical examples available both in their site and in stack oveflow / jsfiddle.
I'm not sure what about it isn't useful? Having implemented something like this previously and trying to wrestle with the native drag and drop API this is a huge win. The different interactions needed are all in the demo.
Definitely some bugs in the Collidable section on Firefox 55.0.3 (macOS). I ended up duplicating a block twice. They were stuck on my screen and followed scroll.
In Firefox Nightly on Windows I quickly got the Swappable section confused with touch, just from tapping and dragging things around a little. And after reloading the page Sortable fell apart on my very first touch-and-drag. Yeah, despite being pretty cool it seems unusably buggy at present.
That touching to scroll stops working if you’re in an area where there are things to drag is also super annoying.
When I scroll down to the "Interaction" section of their home page, and let the blocks move for a few seconds, the music from my Spotify app turns to static. Every time.
Why would they showcase the drag and drop coupled with this intriguing isometric block UI? It really takes the focus away from the core functionality of the library.
I was totally focused on how the blocks interact. It's not anywhere close to the type of apps I build so the examples do not really give me a feel how well it may work for typical CRUD use cases.
> Why would they showcase the drag and drop coupled with this intriguing isometric block UI?
Because it looks and feels awesome!? :-)
Seriously though, I didn't think it took that much away from the core functionally. I quite enjoyed testing the limits of the functionality with the demo.
I really like the page, but I think that there could be a section with much clearer real-world use cases would be helpful, especially if it showed the actual syntax. There's not even a link to the documentation (though it's in the README if you click "Contribute").
My takeaway was that they wanted to show that anything can be made draggable, i.e. isometric blocks created using CSS transforms. The browser actually maps mouse/touch events from the transformed space back to the untransformed cartesian x,y point. In other words, if I scale a 100x100 <div> 3x then hover exactly in the center of it, I'll get 50,50 regardless of the scale/skew/rotation/matrix. This is really useful for collision detection, which they are trying to demo.
I am really surprised at the backlash toward the demo. It's simple and fun. Dragging and dropping is a pretty simple concept anyway, you're going to have to build your logic into it.
The reason this is cool is because cross browswer drag and drop is difficult with the native APIs. Not having to deal with them for basic drag and drop is great and likely the point of the library.
I think, at least from a Shopify perspective, this will be used to drag items to a cart. I forget where but I have seen drag-to-cart before, I believe in some WooCommerce themes. Cool tech but not high on the list of things I look for when testing a site.
While not as beautiful, your library is a lot more performant to be sure. After throttling my CPU by 6x, everything still felt really smooth with interactjs, while Shopify's lib began to choke. There are pretty big differences though. Shopify offers swapping and sorting, and even supports feature like force touch.
wow this is a very polished site for a javascript library, I might just have to use this, the marketing is working definitely.
I usually don't like sound effects on my web, but this one is very well executed
121 comments
[ 4.1 ms ] story [ 163 ms ] threadAny other entries that even come close?!
I appreciate the minimalism they're going for, the thick borders and that they aren't afraid of color, but the blue is too much. This trend of one-page fancy-scrolls grew from catering to mobile devices. On average, it seems like their only goal is to avoid bad design on mobile and ignore all other devices. These giant scrolling minimalist pages are often bad design on desktop, mediocre design on tablets and ok design on mobile.
Do not forget that webpages at their core are about information design. I just had to scroll almost 8 pages in order to read a few paragraphs and most of the paragraphs didn't have the information that was interesting to me.
The page that really had the information I wanted was hidden behind a "Contribute" button which makes no sense and you have to scroll all the way back up to the top to get to if you've read down to the bottom.
The style it's going for is fine, but I'm not sold on it being good information design for all devices, if any. :/
I believe your are confusing web pages with graphic design. A graphic designer's job is based in information architecture. Webpages were originally designed for simple document sharing, however since '96 - we still have some simple documents, but we also have non-trivial games, and extremely complex applications that run businesses.
This open source project happens to be for the mid to latter, so it seems appropriate then that they actually demo some of the features of the library. Also, one could make the argument that a beautiful design can inspire another developer to make something beautiful. API's are often pretty dull. I find this design to be delightful.
BTW, you can always use shortcuts provided by your browser/OS. Tap in the header on mobile, press "Home" on Windoze, and Cmd+Up on Mac.
I'm not. I remember the times of Bulletin Board Systems you had to dial into and then the transition to the popularity of the web. It has always been about navigating information. Sometimes the information is art. Sometimes the information is the interactivity itself. Most of the time the information is text. Once people realized that packaging was important, just like a hardback book with a wonderful cover and table of contents versus a manuscript-like stack of impenetrable pages, it became a matter of business. Nobody says a book can't have pop-up cut-outs that unfold when you open a page, but whatever the quality of a book is, it can be measured.
What I'm saying is that, I can appreciate what this webpage is doing, but I also would not say that it is a fantastic example of web design.
> Also, one could make the argument that a beautiful design can inspire another developer to make something beautiful. API's are often pretty dull. I find this design to be delightful.
My complaints with it should be possible to fully resolve while maintaining every one of those qualities you like about it.
> BTW, you can always use shortcuts provided by your browser/OS. Tap in the header on mobile, press "Home" on Windoze, and Cmd+Up on Mac.
I am aware of that, but often people are navigating mostly with the mouse and requiring the user to move their hand away from the mouse isn't user friendly. There is a human in front of the machine. It isn't just about the capabilities of the machine. Proper design is about the complete stack, including the biological part of it.
I don't mind if other people like a page. My concern is that people take it as excellent design that should be replicated, including its faults. If someone reads these comments and appreciates that, maybe it will do some good.
Sorry to see that you're getting downvoted. Backlit, saturated colors like that are really unpleasant for some people. Designers should take that into account. Same goes for animation on pages that are meant to be read (another trend which is definitely not accessible for many people).
(Other than the color intensity, the page is great.)
* https://www.webaccessibility.com/best_practices.php?technolo...
* http://simplyaccessible.com/article/animations/
Didn't even realize it was I teractive u til half way through when my phone started spitting out audio then a second or two later I saw a block randomly move(well bot randomly but no abim while it was catching up).
Tried to long press to slowly do something, still no joy.
Edit/note, I do look forward to seeing this on a PC though, judging from the comments :-)
Edit: slightly older version of chrome did work better(although note the edge report lower)
Edit 2: I was bored. No audio in brave browser :-p
I guess if you want to scroll the page instead of dragging elements - having force touch helps distinguish two actions. I know it's different but in google maps for example it's super annoying when instead of scrolling down the page - the map iframe is trying to zoom out.
Also, a typo:
> If you needed a feature that wasn’t already available, chances are the community needs it to.
It also took me a while to even realize the landing page was interactive. A good DnD UI should make it clear to the user what pieces are interactive.
And to echo your other point - I am actually currently looking for a good drag and drop library for our web app. I would really like to see a more 'boring' demo which demonstrates some sort of Kanban board like functionality, dragging images or text blocks between boxes. I also want to see ability to restrict dropping or sorting etc. on a granular level.
The current 'demo' is cute, but not really translatable to my concept of what I want. I am more likely to dismiss this library as a games engine rather that something that could be used in an enterprise tool based on my experience to date.
This is what I am using. It's not perfect and was a pain in the ass to get running with Vue.js, but now I am kinda happy and my clients are as well.
Neat library though!
That touching to scroll stops working if you’re in an area where there are things to drag is also super annoying.
Super cool, thanks for sharing!
Bonus points: fully functional w/o having to any change uMatrix or uBlock settings!
Latest Chrome on Windows desktop.
I was totally focused on how the blocks interact. It's not anywhere close to the type of apps I build so the examples do not really give me a feel how well it may work for typical CRUD use cases.
Because it looks and feels awesome!? :-)
Seriously though, I didn't think it took that much away from the core functionally. I quite enjoyed testing the limits of the functionality with the demo.
The reason this is cool is because cross browswer drag and drop is difficult with the native APIs. Not having to deal with them for basic drag and drop is great and likely the point of the library.
The example page might not be as flashy, but it seems more reliable across browsers.
https://github.com/RubaXa/Sortable