8 ms·
Show HN: NatUIve 2.0 – lightweight, rich, open web
- einr 8y agoDo not hijack my arrow keys. I need them for scrolling.
- rado 8y agoHi, the arrow keys do scroll. Is it a problem with natuive.net or the demos? Thanks
- yellowapple 8y agoOn 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 8y agoThere 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 8y agoGotcha. 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 8y agoList of tabs can be scrolled only by the tab key. Arrow keys are nice to have for sure. Thanks
- dhritzkiv 8y agoIs 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 8y agoYeah, 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.
- amanzi 8y agoWow, I really dislike the weird scrolling/navigation behaviour on that site. Seems the opposite of "native" to me - more alien than anything.
- vortico 8y agoI'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.
- rado 8y agoThis is only the docs site. It's native as in usable and accessible without JS.
- vortico 8y agoWait 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 8y agoI think it would have been more honest if it said: see the following pages rebuilt with NatUIve.
- stronglikedan 8y agoI'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.
- 8y ago
- saagarjha 8y agoArgh, this messes with my scrolling :(
- rado 8y agoHi, 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 8y agoIt'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 8y agoIt'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
- viraptor 8y agoLooks 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.
- maccio92 8y agoeverything 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..
- yellowapple 8y agoThis 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.
- rado 8y agoHi, this is a reference site. It's documentation for devs, not end customers. Not meant to be used on mobile.
- redwards510 8y agoI 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 8y agoIt's like BS without opinionated style, dependencies, limitations (in embedding components) and bloat. Regards
- networkimprov 8y agoWould be nice to see a comparison with Bootstrap, UiKit, etc.
- rado 8y agoThanks, 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.
- yellowapple 8y agoWow, 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 8y agoHi, 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.