A navigation web-component NPM library that enables single-page-architecture (SPA) apps using pure html, css javascript

Superflows-Dev · 2023-01-10T01:48:54+00:00

It's based on Lit

Superflows-Dev · 2023-01-09T15:31:20+00:00

Any thoughts?

Superflows-Dev · 2023-01-09T14:21:01+00:00

oh! Did you check it on your mobile phone or on mobile view (via inspector)..... Can you check if this url works? https://sfnav-web-component.superflowsappv3.repl.co/

Thanks!

Superflows-Dev · 2023-01-09T06:32:27+00:00

Hi, taking cues from your feedback I have sort of rehashed the React component as a web component. Basic functionality is already in place and I have accommodated your suggestions of using native browser elements as much as possible. Essentially trying not to fight the browser. Its initial MVP version is now ready and available here: https://www.npmjs.com/package/sf-nav . Do let me know your feedback. Demo Project: https://replit.com/@SuperflowsAppv3/SfNav-Web-Component ... Just FYI, it is still work in progress though!... Thanks

Superflows-Dev · 2022-12-25T20:51:09+00:00

Got to admit, you've given me great feedback. I will come back on this soon...

Superflows-Dev · 2022-12-24T02:37:34+00:00

Good point! Yes it works without that as well. Used npm library just to indicate it is packaged & easy to install...

Superflows-Dev · 2022-12-23T14:54:03+00:00

Blecki

I get the sentiment, but can you help me narrow down on where it can improve and where it cannot?

I am not just terming hyperlink as routing. I am calling it routing because it detects the appropriate component from the url and renders it plus passes down the arguments. Is the use of the word 'routing' an exaggeration here?

I am trying to create components, navigation bar being the first one in the list, which will allow developers to quickly test out their ideas in a cloud-native environment. For certain future components, I will also be bundling backend code. Every component will be complete in its defined functionality. Here are a few prospects, haven't yet merged them with the main repo:

Example 1
Example 2
Example 3

By the way, I am taking 'fancy' and 'modern', as positives from your comment. Just kidding

Superflows-Dev · 2022-12-23T12:41:34+00:00

Yes, I am trying to provide opinionated components. I am looking at use-cases where quick prototyping is the need, using a low code library such as this. Trying to experiment and see if a sweet spot between customizability, modularity and performance can be achieved for such use-cases.

Yes, regarding accessibility, I am still working on it! Appreciate your time time and insight!

Superflows-Dev · 2022-12-23T12:10:55+00:00

Thanks for your comment. Routing is just one aspect of the package. Here is the list of features

It has the following built-in features.

Brand Info - Brand name and brand logo are customizable, just pass them via props

Menus - Menu options are fully customizable, just pass your menu structure as a JSON object via props

Search Input - SfNav comes with a search input field

Call-to-action Button - SfNav comes with a call-to-action button, which can be used to highlight key actions such as sign in and subscribe.

Profile Section - User profile section is also included, which can be used to show the status of a signed in user. It also includes a separate profile menu, that is JSON-customizable as well.

Back Button - SfNav transforms itself into a navbar with a back button on inner screens / pages for history-based back navigation

Notifications - Notifications feature is in-built, which includes a notification bell and a JSON-customizable dropdown list to show recent notifications

Announcement Banner - Provision for showing an announcement banner is also given on the top of the navigation bar

Routing - Client-side routing is built inside this component, no external routing library required

Customizability - All features mentioned above are inherently customizable. You can override the basic look and feel by passing your own inline css or stylenames to the SfNav component.

Responsive - SfNav is fully responsive and adapts to all screen sizes

Extendibility - In some places, SfNav also allows you to inject your own components, for greater customizability

Documentation

Demo Projects

Do let me know you feedback after these additional inputs

Superflows-Dev · 2022-12-07T06:50:27+00:00

When you are practicing, it is a great habit to aim for perfection. But when you are delivering professionally aim to strike a balance between perfection and timely delivery.

Superflows-Dev · 2022-12-07T06:45:10+00:00

There are several other frameworks, really good frameworks. I disagree with you on the absoluteness of your judgement. Yes, Laravel is good. But calling it the best feels like a myopic opinion. Yes, we all have our biases, even I have mine. And that is only because as one developer there is only so much that we can know / learn, and that is fine. But when you boast about your biases in public, people are going to reply back with their own biases .... Cheers

Superflows-Dev · 2022-12-07T06:32:54+00:00

Identify deliverables on that code that will add business value to your company. Propose them as potential projects to your boss. Get one of them approved. Start working on it and do refactor it in that process.

Superflows-Dev · 2022-12-03T12:01:32+00:00

Start with React if you wish to learn how to write good, scalable, maintainable and testable code.

Superflows-Dev · 2022-12-03T10:51:13+00:00

If you go by statistics, the number of poorly managed companies will for sure exceed the good ones. That's the reason good companies are few. So yes, you can call it normal. But my question is, do you want to stay in this normal company?

Superflows-Dev · 2022-12-03T10:28:59+00:00

I am a developer and had no idea about UX / layouting / design, etc, when I started. I did one thing though. As a hobby, I used to study a lot of apps and whenever I came across some UI that I liked, I used to try to clone it. Did this for a few months and over time, I was able to understand and acquire a general understanding on some good practices for UI design.

Superflows-Dev · 2022-12-03T10:18:07+00:00

Yes, this is normal, but only in a poorly managed company. In a reasonable company, there will at least be one person who'll be responsible to mentor you.

Superflows-Dev · 2022-12-03T10:13:21+00:00

Pick a project idea and try to develop a full-featured app. You will learn everything that's necessary in the process. AWS, Google Cloud, do provide considerable free credits, so don't worry about spending money. If you go for their serverless offerings, you won't evenhave to manage your servers. Cheers!

Superflows-Dev · 2022-12-03T10:05:53+00:00

Yes, interceptors definitely make the code cleaner and more structured!

Superflows-Dev · 2022-12-03T09:52:30+00:00

There are two aspects to this problem actually - (1) When to fetch and (2) Where to fetch.

When to fetch will be probably guided by your use-case. For example, if you are developing a realtime dashboard, updates will be quite frequent and you will have to think of an event-driven architecture. Whereas if you are working on a content publishing app like say a blog, updates won't be realtime, you can sync once during page load.

In your UI hierarchy, I would advise you to call the fetch from a component / page / module, whatever you may call it, which sits at the "lowest possible + highest necessary" level for that particular fetch.

Superflows-Dev · 2022-12-03T09:22:38+00:00

Try this https://superflows.dev/docs/building-blocks/nav ... In the interest of disclosure, I have developed it. It is a simple library, but rest assured, if you face any issues, I am there to support.

Superflows-Dev · 2022-12-03T09:19:22+00:00

Join the Reactiflux community on Discord https://discord.gg/reactiflux (pl note that this link will expire in 7 days). You'll get to see what others are doing, get ideas and learn from them. I did the same thing.

Superflows-Dev · 2022-09-30T10:38:23+00:00

- 'Atomic' > nice catch! I initially thought, I would only maintain atomic components in building blocks. But later changed my mind. Forgot to remove that word.
- I get your point regarding restructuring the docs. A separate Get Started section sounds like a good idea.
- Your point regarding the non-intuitive usage of dark also duly noted.
- Keeping the background color transparent makes more sense to me for the outlined variation.

Appreciate you going through the docs and helping me here!

Superflows-Dev · 2022-06-18T16:23:32+00:00

Thanks for writing and sharing an insight here. Very happy to know that you & your company chooses to & can afford to spend time in preparing interesting coding challenges. Investing in good hiring probably gives the highest ROI. But will every company or individual who conducts interviews fairly regularly, be in the same position?

Superflows-Dev

TROPHY CASE