Show HN: Super Smooth Tab View – Made with Pure CSS3 and JavaScript | Hacker News Reader

Show HN: Super Smooth Tab View – Made with Pure CSS3 and JavaScript

github.com

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

* keyboard shortcuts are implemented * the second point is so intentional * I'll take a look at my code :)

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...

Same here, in Linux. Built from

https://hg.mozilla.org/releases/mozilla-release/rev/7d280b7e...

Name: Firefox

Version: 61.0.1

Build ID: 20180704194802

OS: Linux 4.13.0-46-generic

I get a not found page for this (https://github.com/Johnny-the-Progger/Smooth-Tab-View).

Does anyone have a copy or fork of the project? Was looking forward to playing with it!

Looks like the github account has been deleted?

Too much heat, or -- maybe someone is collecting statistics on what flies and what flies not on hn.

That's really weird.

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.

or make the name fit: I'd like to navigate my chrome tabs in a zoomable+scrollable grid view like this

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?

yes, that fits better, I could not think of anything suitable :D

Nice work, fun UI pattern—will have to think of something to use this for :)

If it uses JavaScript what does pure css3 mean?

I meant that the main stuff is based on the Transform of CSS3 ;)

Pure CSS would imply to most people no Javascript. Nice work though.

Pure CSS is basically false advertising...

That's okay, nobody got hurt.

Probably that it uses CSS as opposed to SASS or LESS or some other thing that requires preprocessing.

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 ;)

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'.

Forgot to note: Win7 Demo is smooth and flawless in Version 69.0.3497.100 (Official Build) (64-bit) on the same machine.

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.

What version are you on? It seems to be fine for me on Chrome 69.0.3497.100

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

Pure CSS means no js :)

Looks good though.

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.

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

It seems to ignore input during the animation, is this intended or a bug?

That is so intended.

Is there a reason the demo link is hidden on mobile?

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.

I wish this had keyboard event handlers.

I will still install this :)

Reply on news.ycombinator.com