HN Explorer

37 comments

[ 2.9 ms ] story [ 80.6 ms ] thread
wnevets
If it uses JavaScript what does pure css3 mean?
tbirrell
Probably that it uses CSS as opposed to SASS or LESS or some other thing that requires preprocessing.
[deleted]
(comment deleted)
Johnny-the-eye
I meant that the main stuff is based on the Transform of CSS3 ;)
lubos
Pure CSS would imply to most people no Javascript. Nice work though.
dclowd9901
Don't know if it's just me, but there's a tiny bit of jank right after clicking in Chrome, where it seems to lag, jump a few frames, and then pick up in the middle of a zoom. Normally I wouldn't nitpick, but when something claims to be "super smooth", I become ultimately nit-picky ;)
ohpls
What version are you on? It seems to be fine for me on Chrome 69.0.3497.100
deckar01
I'm on the same version as you, but I am seeing something similar. The profiler shows an 83ms frame (12fps) on the 4th frame of the animation. Looks like a Chrome issue, maybe hardware dependent.

Profiler output: https://imgur.com/a/sjYQAJp

workingpatrick
Experiencing something similar in Firefox 62.0.2 Slight 'stutter' (lack of smoothness, jumping) when clicking to zoom into a 'box/tab' and then a full screen 'blink'/jump forward then back' when zooming out from a 'box/tab'.
workingpatrick
Forgot to note: Win7 Demo is smooth and flawless in Version 69.0.3497.100 (Official Build) (64-bit) on the same machine.
jmarcher
It seems to be resolution dependent. Full screen on at 4K is like a slideshow (or janky) on my late 2017 mbp. With a smaller window it's pretty smooth.
dcre
It's neat, but I'm not familiar with this use of the word "tab". I'm not sure what I would call this — maybe a zoomable grid.
Johnny-the-eye
yes, that fits better, I could not think of anything suitable :D
osterbit2
or make the name fit: I'd like to navigate my chrome tabs in a zoomable+scrollable grid view like this
nixpulvis
Except the name comes with all the baggage that makes it not applicable. Tabs were a thing long before tabs of a web browser. Remember tabbed folders?
[deleted]
(comment deleted)
ppetty
I agree with others here, re: “Tab” … this is a grid.

Some improvements that would be cool to see:

* keyboard shortcuts (up, down, left, right & esc to exit)

* the arrows behave differently when using the up & down vs left & right, up & down repeats grid items in the same column while left & right seem to shift to the previous or next row depending on where you are

* there’s a lot of JS on the page (it’s not just toggling classNames), maybe using CSS Grid or Flex could reduce some of that

* the HTML could probably be more semantic, less div elements, and maybe an actual list (ul or ol element), which could help make use of arrows more consistent

Johnny-the-eye
* keyboard shortcuts are implemented * the second point is so intentional * I'll take a look at my code :)
rglover
Nice work, fun UI pattern—will have to think of something to use this for :)
egeozcan
It seems to ignore input during the animation, is this intended or a bug?
pg_bot
Tested on firefox and chrome and the animation is inconsistently janky. Based on a quick overview of the source code I would suggest looking at requestAnimationFrame[0] to smooth out the problems. Other than that, looks interesting.

[0]: https://developer.mozilla.org/en-US/docs/Web/API/window/requ...

markdown
Pure CSS means no js :)

Looks good though.

djsumdog
Yea I was hoping for that too; misread the title. :-P

It's still very well put together. It'd be nice if this were possible without Javascript, but I don't think it is. It'd require some crazy scroll tricks to pull off, if it's even possible.

NathanCH
Might be a silly question, but I haven't seen this pattern before. Why keep your variables defined in a separate file?

Edit: I see why now

evo_9
Is there a reason the demo link is hidden on mobile?
mintplant
GitHub hides all but the first few lines of any repository's README on their mobile site, and the "Demo" link here just happens to fall below the cutoff. Click the "View all of README.md" link to see the rest.