
Show HN: NatUIve 2.0 – lightweight, rich, open web - rado
https://natuive.net/
======
vortico
Wait a second. None of the demos are the actual company's page but are clones
with the company's images.

[https://natuive.net/demos/hasselblad/](https://natuive.net/demos/hasselblad/)
uses natUIve, but [https://www.hasselblad.com/](https://www.hasselblad.com/)
doesn't.

[https://natuive.net/demos/postbank/](https://natuive.net/demos/postbank/)
uses natUIve, but [https://www.postbank.bg/](https://www.postbank.bg/)
doesn't.

[https://natuive.net/demos/tutsplus/](https://natuive.net/demos/tutsplus/)
uses natUIve, but [https://tutsplus.com/](https://tutsplus.com/) doesn't.

[https://natuive.net/demos/cnn-travel/](https://natuive.net/demos/cnn-travel/)
uses natUIve, but [https://www.cnn.com/travel](https://www.cnn.com/travel)
doesn't.

etc.

I've never seen this practice before. Is this common? Sites like
[https://threejs.org/](https://threejs.org/) only list projects that actually
use the library.

~~~
ckluis
I think it would have been more honest if it said: see the following pages
rebuilt with NatUIve.

~~~
rado
Done, thanks!

~~~
ckluis
To really it hit it home, I would have put something like:

Original: 15,000 Classes, 2mb Reimplemented: 1,200 Classes, 20kb

All those are fake numbers, it would have shown the "lightweight" concept.

------
yellowapple
Wow, this feels pretty solid and snappy, at least on desktop (Firefox 67). The
scrolling effect's a bit weird, but I'm sure that can be customized. I
switched off JS expecting everything to rapidly fall apart, but it actually
works surprisingly well; the homepage on the demo site is broken (displays
fine, but doesn't response to mouse events like scrolling and clicking; arrow
keys work fine for scrolling), but the other tabs work significantly better
than I'd ever expect a site this visually-complex to work without JS.

On mobile the demo site does feel weird (a taller-than-wide screen and a
vertical tab bar don't exactly mix), but it's still plenty usable and snappy
on Firefox for Android. The sample sites are much more normal in terms of
mobile site UX.

A lot of people here seem to be bagging on it for silly reasons (like "I have
to press the back button multiple times after clicking on multiple things!";
gee, turns out clicking on links adds entries to your browser history, who'da
thunk?). Don't listen to them. You've done a fantastic job with this
framework, and I look forward to using it for my own projects.

I will say that one thing I'd change is to provide the option of making it a
little more opinionated/invasive. I shouldn't have to say <table
class="n-table"> everywhere; I'd rather just say <table> and be done with it.
I'm sure I could figure out how to customize this to add that
opinionation/invasiveness, but it'd be nice if it was an (opt-in!) out-of-the-
box option.

EDIT: In the spirit of "let's really break this thing", I fired up the Haiku
Nightly VM I've got laying around and tried loading the homepage and some of
the demo pages in both WebPositive (WebKit-based) and NetSurf (uses its own
rendering engine). WebPositive handled everything like a champ (albeit with
some severe loading lag on the homepage; the demo pages all loaded fine).
NetSurf failed entirely on the homepage (shows the nav and nothing else, even
after clicking on nav entries), but the demo pages work reasonably well
(they're at least viewable, even if the proportions are wonky in a lot of
places).

Either way, the fact that the framework itself works okay even on an obscure
operating system running in a virtual machine with only 1024MB of RAM is
delightfully impressive.

~~~
rado
Hi, I got important feedback on 1.0 here years ago and every comment is
valuable. The opinionation topic is very tricky, I thought a lot about that
and decided to go unopinionated for maximum compatibility. On the other hand
some CMSs simply won't allow adding a table class so there should be an
opinionated option or something.

A major principle is CSS-only functionality, accessibility and stability (it
probably has the only proper modal window on iPhone Safari).

Happy to see you found it useful and I hope at least people will be inspired
to give the open web a chance. Thanks.

------
dhritzkiv
Is it just me, or do a lot of these interactions and styles feel… a bit
uncanny? Certainly not native (as only the framework name would suggest)

~~~
Zee2
Yeah, something looks and feels very weird about these pages. The antialiasing
behavior on some of the shapes+text is very strange looking, as well as some
weird scrolling behavior. Seems very... uncanny, as you say.

------
einr
Do not hijack my arrow keys. I need them for scrolling.

~~~
rado
Hi, the arrow keys do scroll. Is it a problem with natuive.net or the demos?
Thanks

~~~
yellowapple
On Firefox, it looks like there's some JS or something that's capturing the
arrow up/down presses and interpreting them as "move to the next/previous
page/tab". Turning off JS causes keyboard scrolling to work fine.

~~~
rado
There is a custom full-page tabs element and arrow keys control it when focus
is on body. When focus is inside a tab, arrow keys scroll as normal.

~~~
yellowapple
Gotcha. Yeah, I think in that case the tab list is stealing focus by default
(instead of the tab contents), which makes it look like scrolling is "broken".

Also, the current implementation means I can't use the arrow keys to scroll
through the list of tabs; even by navigating to the lower tabs, the scroll
doesn't follow. I'd say if you're going to do that, the scroll position for
the tab list should follow the selected tab.

I'm assuming this can be turned off if we don't want this particular feature?

~~~
rado
List of tabs can be scrolled only by the tab key. Arrow keys are nice to have
for sure. Thanks

------
amanzi
Wow, I really dislike the weird scrolling/navigation behaviour on that site.
Seems the opposite of "native" to me - more alien than anything.

~~~
vortico
I'd prefer that all CSS/JS libraries not just disable this by default, but
entirely remove it from the codebase to prevent uninformed designers from
enabling it without thinking of the UX consequences.

------
redwards510
I viewed the source of the JetBlue demo and it's pretty cool how clean the
markup looks. It also seems pretty compact for what at first glance looks like
a complex page.

I'd like to see a paragraph somewhere explaining what exactly this framework
is all about tho, not just a long list of features. It's a CSS framework like
Bootstrap? What does it do differently than Bootstrap?

~~~
rado
It's like BS without opinionated style, dependencies, limitations (in
embedding components) and bloat. Regards

------
viraptor
Looks really messy / disorganised on a mobile. Also I need to tap "back" twice
to get out of that page. I'm not even at examples and I'm already not
impressed.

~~~
rado
Hi, this is a reference site. It's documentation for devs, not end customers.
Not meant to be used on mobile.

~~~
jarym
So documentation for devs can somehow be poorer and we can throw out mobile-
support for that audience too? Why? Why is it ok to sideline a group you’re
presumably coveting?

~~~
rado
Because you don't read docs on a phone.

~~~
vidarh
I do. And the site instantly put me off.

~~~
badsectoracula
And i do like to use my web browser non-maximized in my 1366x768 monitor yet
every other site forces me to maximize because it thinks that since my
browser's width is less than 1024 or whatever threshold they come up with, it
is actually a mobile phone and switch to that, making the already overenlarged
UI elements cover as much real estate as my entire fist.

Which sucks.

But that is the world we live in. The more tools we give the designers, the
more they will abuse everything they can.

CSS was a mistake, the web should have stayed in HTML 3.2.

~~~
rado
Hi, there is no threshold. What is the issue at 1024px? Thanks.

~~~
badsectoracula
Sorry i wasn't clear, i was referring to other sites in general (e.g. YouTube)
that switch to mobile UIs when my window is too narrow. Your site doesn't do
that, although TBH i find the design too wasteful for screen real estate (e.g.
too much space between elements in the sidebar). Here is how it looks on my
browser (this is with the window maximized vertically but not horizontally
since it is easier for me to read text - i cropped out the browser UI and
taskbar, but this is Firefox running on Windows 10):

[https://i.imgur.com/FLG0HiF.jpg](https://i.imgur.com/FLG0HiF.jpg)

~~~
rado
Hello, now I understand the main content area can be wider and the tabs are
taking too much space on narrow screens. This can be improved in the future.
Thanks

------
networkimprov
Would be nice to see a comparison with Bootstrap, UiKit, etc.

~~~
rado
Thanks, I should get on that. It lacks BS's limits like only one modal window,
rounded edges etc. JS is not required, loading is seamless, the modal window
actually works on iPhone Safari... The file size is less than half of
Bootstrap's. It has the most features per KB compared to any framework that I
know. Yet size isn't the top priority: accessibility and functionality are.

------
saagarjha
Argh, this messes with my scrolling :(

~~~
rado
Hi, this is the docs site. It shows info about the library/framework. Not a
representation of a site built with the library/framework. Thanks

~~~
mataniko
It's not a docs site, it's the project site that consists mostly of docs, and
it's built using the library/framework.

It doesn't inspire confidence considering it the first touch for developer
(who else is this for?)

~~~
rado
It's custom built upon the framework for a specific reason: to display
components info, which is consumed by devs on laptop/desktop. Still accessible
on phone, but that's not the target. Thanks

