Show HN: NatUIve 2.0 – lightweight, rich, open web | Hacker News Reader

Show HN: NatUIve 2.0 – lightweight, rich, open web

natuive.net

54 pointsrado47 comments

Open articleView on HN

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/ uses natUIve, but https://www.hasselblad.com/ doesn't.

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

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

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

etc.

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

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

Done, thanks!

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.

I've seen that before, but the demos actually looked like the sites they were meant to represent, a la recreations, and not just similar to them. Also, I guess 35 demos is technically dozens, but I might have described the quantity a bit differently. Really, that whole site just looks and acts odd to me.

Hi, those are demos based on actual sites, in order to demonstrate versatility. Please describe what is odd and how it should be done properly? What would you want from such library/framework? Thanks

I think I'd make it very clear that these are real sites re-implemented to show that it can be done in the framework. Not just list them without an explanation to imply that they are using the framework.

You are using their brands to boost yours even though they are unrelated.

So I'd either build sites that look similar but don't have real logos / names which should be enough to show what kind of things are possible with the framework or if you want to stick to the re-implementations of real sites add something like:

"Reimplemented real world examples"

Will do that now, thank you.

At minimum, use robots to keep crawlers out of these sites. Or you're going to be getting letters. Cloning people's content in ways google finds isn't cool.

Thank you, adding rule to robots.txt. Regards

It's not common, first time I'm seeing as well, and I'm a designer — I check out these kind of things often. It's misleading. It should be made very obvious that those are recreations and not the actual websites.

Also, likely copyright infringement on multiple counts. (Not a lawyer, though.)

Thanks, amended. Cheers

Thanks for the note, updated with more clarity. Cheers

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.

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.

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)

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.

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

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

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.

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.

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?

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

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

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.

This is only the docs site. It's native as in usable and accessible without JS.

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?

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

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.

everything you click on adds an entry to the history. i had to "back" like 10 times to actually leave the page because i was clicking through the various samples..

This shouldn't be surprising; most sites do exactly what this site does (if you don't believe me, go to any Wikipedia article, click an entry in the TOC, and click the back button; you'll probably go back to the TOC, not all the way back out of the article). That's how it should work, and I was pleasantly surprised to see that this framework preserves that.

One thing NatUIve does appear to get wrong is that (at least with JS enabled) if you use the forward button too rapidly it'll get confused and renavigate to the page/tab you're on, thus preventing you from going further forward (because it adds an extra entry to the history). This doesn't happen when you turn off JS, so I'm pretty sure it has to do with the scroll effect.

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

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?

Because you don't read docs on a phone.

I do. And the site instantly put me off.

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.

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

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

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

And the site allows that, it's just not very convenient.

It is also a front page for "Show HN" (which lots of people will read on their mobiles) and it is related to web design.

There are readable references: https://getbootstrap.com/docs/3.4/css/ https://vuejs.org/v2/api/ https://docs.python.org/3.7/reference/index.html

Even just saying in the page that it's not supposed to work well on my device would be better.

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

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.

Argh, this messes with my scrolling :(

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

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

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

Reply on news.ycombinator.com