DEV Community: Vaibhav Namburi

Don't learn coding in 2021!

Vaibhav Namburi — Tue, 02 Feb 2021 07:14:54 +0000

Yup, I said it. If you're looking to be a programmer, you most likely shouldn't...iiiiiifff you've got certain characteristics and expectations set in mind.

I've covered those key points in this video.

After hating coding 10 years ago to now having our products be used by millions of users, generate multiple millions in monthly revenue across our clients - I've learnt a thing or two about those who should learn to code and those who shouldn't

I've also gone fairly in-depth into why you need to learn how to code and where exactly you can begin!

I won't spoil the video as I'm sure you'll enjoy it!

PS feel free to follow on me on twitter.com/veebuv if you like what you watched

15 Reasons Developers Need To Learn UX Design

Vaibhav Namburi — Tue, 05 Jan 2021 05:06:09 +0000

Knowing how to code alone won't be enough 2021 onwards. Understanding the experience layer and intent behind code is vital for developers to progress in their career both technically and laterally. In the end, code is being built to improve the customer's life, and by knowing the basic principles being UX will help developers create better experiences or use tools like bug reporting

Today the consumer market is moving towards Omni-channel experience, and the developer and UX designers need to focus more on web and mobile-friendly user experience than ever before. A developer and designer work more closely to provide a better user experience for the website or app they develop. Technical errors on the software are the critical reason for the app deletion.

Over 90% of the downloaded apps are erased after one use due to poor user experience. Similarly, according to expert's studies, 80% of users never return to a low user experience website. This is why UX design is a crucial factor in software or application development. The user expects extraordinary experience on apps, websites they use every day. They never provide 2nd change on the software. In this article, let's look in detail at why developers want to learn UI/UX design.

‍
The 15 reasons I've highlighted here for you:

‍

Interface vs. Experience
How User Experience Shapes Software Development
Excellent Ux Design Encourages to Develop of a More User-Centric Product
Make the Product More Popular With Ux Design.
Reduce Flaws and Development Cost
Ux Plays a Vital Role in Software Architecture
Limited Resource
Designing in the Browser
Front End Development & Ux Design
Ux Can Make You a Better Developer
Gets Higher Return on Investment (ROI)
Learn Skills That Complement Your Existing Talents
Gain Skills That Can’t Be Automated
Execute Your Code Towards the User Experience
User Empathy Will Help You Stand Out in the Business Market

1. Interface vs. Experience

Before we get down to detail, let's understand the difference between the User Interface (UI) and User Experience (UX).

User Interface is anything that the user interacts with the website or app. In another term, UI is the point where the user interacts with the digital product or service. They come in three categories Graphical user interfaces( GUIs), Voice-controlled interface (VUIs), and Gesture-based interfaces.

Graphical user interfaces: Users interact with electronic devices through graphic icons. The best example is the computer's desktop.

Voice-controlled interface: Users interact with the application through their voices. E.g., Siri, Alexa, etc.

Gesture-based interface: Users engage with 3D design spaces through real movements, e.g., Virtual reality (VR) games.

In contrast, User Experience is the complete look and feel of the website or application. UX is the final impression of the user about the product or service.

2. How User Experience Shapes Software Development**

UX and UI design are essential for any application development. Five significant reasons show you need to focus more on the design during product development. Research says that the product's experience influences 97% of customer decisions.

Usability

When software or application works great but is not user-friendly, people will not prefer to use it. The software has to attract and retain the user. User interface and experience are upfront on the development.

Lower development costs

Identifying the roadblocks and issues in the client experience before development with save you time on modifying code.

Faster development time

Great UX and UI configuration save time in the development cycle.

Increase revenue

People prefer to download or ready to pay for the application that suits their needs and easy to use. If you develop a product with useful UI and UX will increase the app's purchase or downloading.

Better Client retention

User-friendly apps will keep people returning. The application will become an integral part of their everyday life. If developing a poor UX will leave a lasting impression. The developer has to identify the design problems before deployment.

3. Excellent Ux Design Encourages to Develop of a More User-Centric Product

UX design offers insights about what your users want from the product that you are developing. It is the core point for product design. User research and usability testing at each step of the development prove how the user-friendly product evolved.

Before product development, conduct user research and speak with the end-users and understand their needs. The study will help to develop the best user experience application or software.

In the end the builders (in this case developers) need to have an understanding of the outcome of what they’re building.

4. Make the Product More Popular With Ux Design.

According to statistics, nearly 67% of consumers are more likely to purchase the product if they are happy with their user experience.

Creating a straightforward user journey or planning the best end-user experience makes client retention and retains the existing customers. This boost in product purchase.

bug reporting is a user feedback tool for websites and apps. It allows users to record full-length video feedback. The application also captures the data to replicate any errors that users face. A BugReporting software is an automatic tool that helps developers and designers view the exact bugs that are user-facing on the UI/UX.

5. Reduce Flaws and Development Cost

When you combine user's demands in your application's development process, it will considerably decrease UX problems in the later stage of the product journey.

A basic understanding of UX design will help understand which will not work for the user before product development. Mockups and prototypes will reduce user-related bugs' chances, and it will minimize the development cycle time. The developers can make a clear decision on software development with prototyping.

6. Ux Plays a Vital Role in Software Architecture

High performance and software stability can only be achieved by the developers. These two are the unsung heroes of user experience design.

For example, Website visitors will leave the page if they face low page loading. Unnecessary redirects, server delays, heavy images, heavy CSS, HTML, JavaScript files, fancy animated effects or page widgets, etc., may cause inadequate loading speed.

The developer needs to fix these defects to improve the user experience. Suppose there is a lag in site loading due to server delay. In that case, the coder needs to find suitable hosting for their website. In this way, the developer will enhance the user experience, product accessibility, and usability.

7. Limited Resource

In many startups or small businesses, there won't be any dedicated resource for design. Developers out there want to tackle projects entirely on their own, who can't afford to hire a designer (or require to spend the money elsewhere). They will be able to learn to design for their products until they identify the valuable resource.

Another main reason developers need to learn design is to work more effectively with designers. If the developer understands the basic design, it will help create stunning UI and create a better user experience.

Learning about design improves the relationship between designer and developer. The developer can easily understand the user interface correction that is provided by the designer. Learning makes the developer view the design on the designer's view for the application development.

8. Designing in the Browser

Many designers hesitate to perform designing on the browser because they need to know the necessary CSS and HTML programming or codes to create on the browser. That is the specific reason behind why it's an excellent fit for engineers getting into designing.

There are many tools and browser plugins available today, which assist you in designing the browser. Which makes the developer and designer's life easy. Here are some useful tools for coder and UI/UX designers includes Sketch, Axure, InVision Studio, Craft, Proto.io, Adobe XD, Webflow, Figma, and more

9. Front End Development & Ux Design

Not all designers need to know to write coding in contrast to the front-end developer, which doesn't mean it is necessary to know UX. But both the UX design and Front end development work more excellently together.

If a front-end developer has both, the knowledge will help in creating significant and usable applications. Learning will bridge the gap between the designer and developer and can complete the quality-assured application.

10. Ux Can Make You a Better Developer

The demand for programming engineers is developing by 22% consistently until 2029. Among all the developers with a special in user experiences are ahead of the job compilation. Users are the priority of any app or web app development, so many recruits look for candidates who have sound knowledge of software development, and UX design is considered more. As a developer, expand your career horizons by continuous learning. A basic understanding of UX design will increase the chance of landing your dream job.

11. Gets Higher Return on Investment (ROI)

UX impacts client satisfaction; as a result, it will generate higher ROI for the longer term. It is essential to develop the best user experience at the first interaction with your product.

Best UX design will engage your user with your application and create customer loyalty for your brands. People will also recommend the product if they are satisfied. It will increase your inbound leads and revenue. If the coder doesn't understand, UX's fundamentals will create a negative impact on UI. Research says that companies that spend on UX design can increase a minimum of 30% sales.

12. Learn Skills That Complement Your Existing Talents

By learning new skills like UX, you will come out of your comfort zone. Many platforms provide free and paid online courses about user experience design. Here are some of the websites with lessons that help you to upgrade your expertise in designing.

Coursera: Introduction to User Experience Design & UX Design Fundamentals

Learnux.io: Course on Usability

UX Design Institute: Professional Diploma in UX Design

You can find many similar online courses to grow your expertise in UI and UX design.

‍

13. Gain Skills That Can’t Be Automated

‍

Improve your expertise on the following

User Empathy: Understanding the customer's need is fundamental to UX design. The developer we need to build a product keeping customer wants in mind.

Improve Communication: The understanding of end to end development life cycle will help the coders better communicate among the team and outside of the organization. Better communication will reduce the gap between the development and designing team.

Prototyping: As a developer also have experience in prototype but not much on UX content. The study shows that 52.1% of designers spend their time on prototyping. If the developer also learns the UX prototype will help the coder to provide a good user experience.

14. Execute Your Code Towards the User Experience

See the user persona or client journey map, analyze the UML files associated with the product development, and better understand customer requirements. Without understanding user insight and developing a product feature that doesn't fit the user's need, it will waste time, resources, and money. It will not satisfy end-user needs.

Most in-house designers coordinate with the development team through the product development lifecycle to ensure quality assurance and avoid technical limitations.

15. User Empathy Will Help You Stand Out in the Business Market

If you understand the customer requirements and build the solution, it will make more customer satisfaction. User satisfaction will automatically create the possibility of a product's success.

Many recruiters seek a developer who understands the customer's requirements and developing user-friendly software. Learning UI and UX will help you with actual product development

Final Thoughts

UX design is a fun element of development. Developers with design knowledge can be creative and flexible, logical while building software. Design and development are interdependent. Mastering your expertise in design will encourage you to provide excellent apps continuously.

The above key points will be helpful to understand why UX design is the core for development. Upskill yourself and become a better developer. Its 2021, the age of the generalised specialist, especially in smaller work environments your ability to join to skills that are co-dependent but have large communication gaps will be highly respected and will be highly sought after

7 Vital AWS Concepts easily explained

Vaibhav Namburi — Thu, 28 May 2020 03:46:47 +0000

Let's face it, AWS can make you pull your hair out if you don't understand what's happening.

Scratch that, that's programming in general.

What I'm about to share with you is basically what I wish I knew 4 years ago when I was working at a company as the only dev and they told me these exact words:

"Hey V, We've decided to move to AWS, and the old dev quit, can you help"

Seems like a straightforward sentence, but what followed was a lot of stress. Stress because as someone who always did front end and some backend work, I wasn't fully aware of deployment infrastructures or devops systems

So this quick, and (what I think) simple guide, is to give you, an overview of AWS (conceptually) that I wish I had when I started - this is not a setup tutorial (that will come later)

40 Apps deployed, millions of requests maintained and an AI startup later, here we go:

What is an EC2? How does it work?

This is one of the building blocks of AWS. You will definitely interact with an EC2 instance at some point in your AWS journey provided you're not going completely serverless (more on this later).

EC2 stands for Elastic Cloud Compute, and it's an AWS service that provides you with a server (like a box, a MacBook without a screen) to run your application. You get to decide all sorts of configurations, memory, box size and power. But in short, it is a server with a public IP address (if you want it to be public) as well as an HTTP address

Once you build an EC2 instance, you can access it by SSHing into the box, i.e the equivalent of username and password into the server. Once inside you can do anything you want in a server

Run node jobs
Do a hello world application
Launch a server
Route your server localhost:3000 to the outside world using NGINX

PS if you're wondering how the configuration is set up, AWS has this concept called Amazon Machine Images, which are basically "blueprints" for server configurations

You might wonder, who decides what data goes in/out of the server and this is dependant upon the security group your EC2 belongs to as well as the VPC ACL (this will be in a follow up blog)

PPS: With EC2 you can also run a "spot server", let's say you want to do a job once a week but don't want to pay for the server the whole time, a spot server basically turns on, charges you for the time it's operating, performs the task and then turns off. Saving you $$$

AWS S3

S3 is fantastic if you treat it right. Amazon S3 stands for Amazon Simple Storage Service (hope you're picking up their vibe with numbers in the abbreviations)

S3 is a programmatic dropbox. You can upload photos, videos, JSON, gzips, entire frontend web projects and let it get served via a public URL. It is also used for holding versions of your server when you're trying to auto-deploy your server using github or bitbucket (more on this later) - basically, it can host a heap of different s**t

The most common uses I've had for S3 have been 2 fold. One to host assets uploaded by users (if your customers upload a profile photo etc for example) and the second to serve my actual frontend website.

See S3 has this magical feature where it lets you upload the (for eg) the dist file of your Vue/React/Angular project into an S3 bucket and serve it to your customers. You can do this quite literally by routing your S3 URL (which they create for you automatically) with a CNAME you set up on godaddy or any hosting service.

In order for you to "Authenticate" or "secure (put https)" your S3 bucket website URL, you'll need to associate it with something called CloudFront (I know, F me so many things) which is Amazons CDN network, this service allows for you connect your actual custom domain "banana.com" to the S3 bucket by providing the S3 bucket as an "origin".

I won't go into the benefits of a CDN, so if your S3 bucket is a public-facing bucket, I wouldn't see why you wouldn't make it part of a CDN network (content delivery network) to pace up asset delivery

Message Queue Services via SQS

Amazon has its own service (of course) for message queues. If you're not completely aware of what a message queue is, here's my way of understanding it.

If you've ever stood in line at a McDonalds, you see this little holding area where there are bags of food sitting around waiting to be distributed by a staff member.

That is the queue, and the message (i.e the food) can only be processed once (i.e once a message to make food, or once the food is given to the customer, that's it)

Message queues are a form of async communication, the main role of Message Queues is to batch large loads of work, smoothen spiky workloads, and decouple heavyweight tasks (large cron job processing)

(Image credits AWS)

Queue services are used extensively in modern architecture to speed up application build and also simplify the process of building apps. Modern-day builds include several micro-services that are isolated from each other and SQS allows for data to be transferred from a producer (the one sending a message) to the consumer (the receiver) in fast and effective way. Since its async, there are no "thread blockages" that happen therefore stopping the entire service.

Going back to the McDonalds example, imagine how crap the service would be if only one order can be delivered at a time, and until one order is delivered the other can begin.

The process effectively works by sending and receiving message signals, the producer sends a message by adding a task to the queue (putting an order on the delivery table at an McDs) the message sits on that table until a receiver takes the message and does something with it (give it to the customer)

You might ask, okay how does this work when there are one producer and many receivers, this is called a Pub/Sub system (Publish/Subscribe)

An example would be, if a sale is made on a Shopify store, there would be multiple services hooked into that "topic of a sale" to perform multiple, different/isolated tasks. For eg. Send a Slack notification to the shop owner, print out an order label, trigger an email sequence.

Load Balancers

The name says it all, a Load Balancer's job is to sit on top of a network of (for this example) EC2 boxes and check to see if each server is currently on overload or not.

If a server is on overload, the job of the load balancer is to divert traffic to the next closest available server.

You might wonder, wait what if I have an open socket with a server behind the load balancer, how is that session magically maintained/transferred across to a whole new server running in parallel. The answer is if you do have situations like this, AWS Application Load Balancer is smart enough to sustain ongoing sessions (Just need to tick the make it sticky checkbox when creating a load balancer)

Another use case of load balancers is that they provide you with a SSL certified endpoint (don't need to add your own at least during testing), you can expose this route via a CNAME or a Masked route (https://server.myapp.com). At this point, you need to make sure your EC2 instances are only accessible internally (i.e remove any external IP access), this will make sure that any security threat is isolated to minimal points of entry

If you've liked reading so far, feel free to follow me for heaps more epic content

API Gateways

I learnt of API gateways during my quest to set up an SSL for an EC2 server. The first attempt was painful, I tried doing it within the EC2 instance, I was breaking my head (in hindsight, I overcomplicated things) but as a happy surprise, I came to learn of API gateways.

Think of an API gateway as a proxy, i.e its the middleman that receives your requests, do something to it if you want, and then sends that request to someone else you have no clue about.

There are many use-cases for API Gateways, but the 2 I'm mentioning, in particular, are acting as a secure proxy for an EC2 instance and second, wrapping a request with auth tokens.

Have you ever had that experience where you might need to make a request from the front end to a 3rd-party service, but the only way you can access that service is by adding to the request header an auth token, but that auth token is sensitive. You might think you need to go ahead and build an entire server to receive these requests, amend it and then send it to the 3rd party API. That's a very painful way, an easier way is using an API gateway, where it gives you the capability to mutate the request (in a limited way) before you send it off to the 3rd party API

Lambda Functions

AWS Lambda functions let you run "functions" in the cloud without needing to maintain a server. The function executes your code only when you need it to (certain time of day, or when it receives a request from somewhere) and it can scale really fast!

The common use I've seen is mainly to respond to changes in your DB, react to HTTP requests it receives from AWS API gateway.

So you can treat lambda functions as part of a "serverless" architecture.

Supply the code to a lambda function, tell it what event it needs to react to and let it run free.

Amazon VPC

A Virtual Private Cloud is a private cloud within AWS' public cloud. Think of it as your own little office space inside a WeWork (LOL) which is publically accessible to everyone

Within that room, you've got own systems set up your own processes and communication layer, however, it can only be accessed via a restricted endpoint i.e the front-door.

That's all for now, many more of these to come both in the format of a book and soon a course

8 Ridiculously Simple Javascript Tricks Not Taught on Tutorials

Vaibhav Namburi — Thu, 07 May 2020 06:54:19 +0000

I've been a little busy building cenario over the past few months and shining my coding skills again.

During this period I remembered/learnt a lot of simple tricks that might be useful for beginners or people looking to quickly upgrade their syntax knowledge

So here we go 🚀:

Null checker (optional chaining)

I used to use _.get from lodash, but since a little while I'm using a babel preset to use this pattern

PS this is available in Node 14, but if you want to use it in your current project you can use the optional chaining babel plugin

Destructuring Arguments in a function

It gets a little clunky to reference the same nested variable within the function, that could have been done on the argument level.

Reallocating variables

Naming variables is tougher than people think. Combine that with my low with destructuring, I found it painful that variables would conflict whenever I would destructure. This has been in my pocket for a few years now

Staying away from splice

I've stayed away from splice actively, just from seeing its internal working and knowing how slowly it operates. Yes you can also use splice for this

Maintaining the context of this easily in objects

Super simple shortcut

Typescript without Typescript

Okay I'm kidding, this is not typescript, but hey you can set arguments to be required values, vs doing null checks within the function

Unique array

This is a doozy and has been for so long, lodash has a uniq method too, I used to use that a lot until I remembered good mate JS allows for Sets and Maps (a topic for another day)

So you can create an array with unique values, in a very performant way, and in a clean way using Sets

Default away

Sometimes you want to ensure there's at least some default value set to the arguments of your function

There you go, all simple things and most importantly they don't ruin readability (like many hacks)

Hope you enjoyed this! Looking forward to getting more active again!

twitter: twitter.com/@veebuv
linkedin: linkedin.com/in/vaibhavnamburi
instagram: _veebuv

6 Easy ways to launch your startup to a MASSIVE audience

Vaibhav Namburi — Wed, 26 Feb 2020 23:51:59 +0000

If you’re fortunate enough to have an audience that already from being active on social media or just being great at storytelling, kudos to you.

You’ve got people who care about your thoughts and will listen when you
speak.

If you’re reading this while your product is in development, get started NOW! Get online, get on LinkedIn, TikTok, Youtube, and start sharing knowledge bits on things you know that will make the lives of people better . Trust me, you know something, often people fall into the trap of “Obvious Knowledge,” where they think that other people “Obviously” know what they know, here’s some news for you - nothing could be further from the truth!

There will always be someone who knows less than you and you will always know less than someone else. It’s up to you to share that knowledge and eventually the audience that respects what you share and talks about will form around you!

On the topic of launching, there’s definitely no set way to launch your startup, AirBnB for example, kept launching their start-up until it eventually got traction, people hype launches too much . Do you remember when WhatsApp launched? Or go back and think of one of your favourite apps, do you remember when they launched? It’s highly unlikely that you do for most products.

Products are often discovered via friends and word of mouth, you stumble across them in some blog, or you end up seeing a very attractive ad, you click through, and install the product.

However, here’s 6 ways you can easily launch your startup with the expectation of good traction in no order:

1) Silent launch

Get your product a landing page with the right copy structure . Reach out to targeted customers via LinkedIn, Facebook, or other digital platforms; give your customers a very quick and succinct description of what the product does (follow the PASO strategy for example) .

This landing page can be simple and be built using tools like Instapage, Landem, Landingpage, Webflow, etc .

Have one simple CTA, where the customer can subscribe via an email address, and you can reach out to them when they do .

2) Friends and family launch

To begin with, make sure the product is actually aimed for them . Don’t build a startup banking solution and give it to your friends and family who have no idea about the problems faced by a startup .

Ask them to give you very honest and critical feedback . I’d almost go as far as avoiding any good feedback and just focus on what needs to be improved .

Make sure they actually use your product and aren’t giving you feedback to be nice to you .

3) Stranger launch

You’re launching directly to complete strangers who may use your product and give you feedback on your startup .

You can do this directly by going to roadshows, expos, malls, marketplaces, and booths where your customers will be .

Make sure when you do this launch, it’s in an environment with strangers who are aware that you are a start-up because then people will approach it with the mentality that they are the first user and set their expectations .

4) Online community launch

This approach if done well has changed the trajectory of many companies . Launching on platforms like HackerNews, ProductHunt, Reddit, Betalist, or other public platforms can have a lot of benefits because there’s the added advantage of community vitality .

With platforms like HackerNews and Reddit, you need to be cautious with the way you word your post, the title needs to be very eye-grabbing and it should not be a “Look at me” title, the post should offer value and insights to the reader. This way you’ve gained some trust and authority with the person reading your post before you link your product offering at the end of the post.
With ProductHunt and Betalist, people come there to discover new companies, so the messaging can be a little different from the other forums mentioned above.

5) Request access launch

We’ve kind of spoken about this kind of launch when we chatted about building virality into your startup. A great example is SuperHuman/Hotmail, where they created a great product and attached the “Sent via SuperHuman” on each email.
Then go further and incentivise distribution by offering customers bonuses like skipping the waiting line, or discounts for sharing your product with customers.

6) Pre-order campaign launch

Many successful companies that have been bought for 100s of millions have started this way . Look at MVMT, the millennial watch company; they started on Indiegogo with a Handycam recorded video .

They raised 300k in pre- orders that gave them tonnes of validation that there’s a market and used this initial traction to build a full-scale business .

Much like the Online community launch, your messaging and video content needs to be very compelling to get potential buyers to purchase your product, but also share it with the rest of the world .

7) Social Media/Blogger launch (a bonus)

Social media influencers work because they use familiarity . Branding is familiarity and with familiarity comes trust . The job of a social media influencer is to be a familiar trustworthy face that already has a strong communication pipeline with your audience; you need to leverage these people to distribute your product.
Reach out to every influencer or expert in your niche and tell them about your product.
Offer the product for free or ask under goodwill to share . You’ll get a few f-offs, but also a few will accept and that might be all you need to change the entire game and trajectory of your business .

Feel free to follow my journey as I build cenario.co:

twitter
linkedin
instagram

The Best Way to use Actions in VueJS

Vaibhav Namburi — Mon, 06 Jan 2020 07:34:11 +0000

So back into it after a while 😀- happy new year everyone! Why this post? Simply because as a company we get to experience so many unique problems and need to come up with new patterns that help solve the problem.

So what is the problem?

We needed to work out an extremely easy way to subscribe to active HTTP requests, for global loader states and other reasons.

If we were using REST as an HTTP protocol layer, then we could have used axios' interceptors to simply commit a mutation to a vuex module tracking the state of an HTTP event. We could do this by creating an object where the keys represent the HTTP event name (something unique) and the value is something truthy, a binary 1 or just some string.

Then we subscribe a button or a loader to that object to find the corresponding active state it's responsible for. This decentralises the necessity to ever actively code each button or modal to maintain a loader state and instead gives us a chance for writing code in a DRY way.

HOWEVER...

Not everything was that simple for us because we're using graphql and apollo, and we're doing it in a non-usual way, where we're using apollo GQL, but not apollo state, so the GQL requests are made using apollo mutations and queries but the data response is stored in plain Vuex.

The main issue was not the apollo state, the issue was that, atleast for now, we couldn't track how to intercept GQL queries in the same way as an axios interceptor and mutate Vuex each time with the right metadata, so a super simple solution we used was.... drum roll ... creating proxy actions.

Whats a proxy action?

Its quite literally what it says, it a proxy to the main event.


async proxyAction({ dispatch }, { actionName, data, setLoading = true }) {
      dispatch('setLoading', setLoading, { root: true });
      try {
        const response = await dispatch(actionName, data, { root: true });
        dispatch('setLoading', false, { root: true });
        return response;
      } catch (e) {
        dispatch('setLoading', false, { root: true });
        this._vm.$toasted.error(BE_API_ERROR_MESSAGE);
        return false;
      }
    }

The above code snippet shows we dispatch a setLoading action who's job is to toggle the active HTTP request binary value to 1 or 0 (and we subscribe our loader states to this). In addition, we also dispatch the action that was meant to be executed, which is the GQL HTTP query.

So this way, all across the project, we don't need to add multiple lines in the mapActions spread operator within the methods object of a VueJS file's JS section. Instead you just need to do the below:

...

methods: {

  ...mapActions({
      proxyAction: 'proxyAction',
    }),
}
...

And whenever a CTA is called or an action needs to be executed, you can simply do the below

methods: {
 buttonCalled() {
    await this.proxyAction({
        actionName: 'user/followVaibhavOnLinkedin',
        data: {
          url: "https://linkedin.com/in/vaibhavnamburi",
        },
      });
 }
}

This way, as mentioned above, you don't need to have multiple lines in the mapActions spread for all the actions you need, instead, you can simply add it via text and call whatever actionName you want to call and pass whatever data you want to pass!

Pros of using proxy actions:

Global Button loaders
Buttons can be disabled to make another API request if one is in progress(For example, clicking on signup button twice is prevented)

Hopefully, this helped you out!

If you think this is a helpful tip please feel free to share it around for others as well on twitter/ youtube or wherever you'd like 😃 and feel absolutely free to tag me too! (@veebuv )

PS if this pattern is common, then I definitely wasn't aware of it in the VueJS/Vuex community, but in the case it is, I'd love to be tagged to the original discussion so I can see how they've done it!

PPS: Special thanks to Dinesh for being pivotal in the experimentation of ideas and implementation of this!

twitter: twitter.com/@veebuv
linkedin: linkedin.com/in/vaibhavnamburi
instagram: _veebuv

Five Lessons I learned going from 3 to 7 figures as a Techie

Vaibhav Namburi — Tue, 10 Dec 2019 06:22:05 +0000

disclaimer: I implore you to look past the title, really not "showing off" at all, I wanted to share the mistakes I made as a tech person building a business - hopefully this helps you

Entrepreneurship is never easy, but you can make it a little better with improved processes

White on white. A row of empty desk space, with a singular chair. The blank canvas in front of me, mirroring the state of my business. This was two years ago, when I launched my business with just $500 and a lot of optimism.

As every founder will tell you, it’s never easy. There is what people see, and then the looooong [sic] hours which we often humbly brag about on social media, or socially when we do make it out of the office. We wear it with pride. Yet too often it’s a sign that we need more or improved processes in place.

As a technical founder, I have three main roles. The ‘entrepreneur’ who seeks to grow and scale the business. The ‘manager’ who’s sweating, always straining for quicker delivery or more aligned planning. And the heart of operation, the ‘technician’ who loves coding and building the whole thing out. And there are different leadership qualities needed for each of these.

I wanted to share what I’ve learned scaling my business as there are things I wish I’d known before starting it all.

Learn to separate.

I know I’m not alone in this problem. I suspect it could be the single hardest balancing act for founders. As a ‘technician’ I had the temptation to step in and correct mistakes on projects as they arose. But the ‘manager’ in me knew this wouldn’t develop my team. And the ‘entrepreneur’ screamed that there’s no value in a business which was solely reliant on my input. So I had to resist.

It became easier. I’d recommend going on a holiday. Just for a week, when you’re starting to feel that it will all fall down if you went away, to prove to yourself and your team, that you’re not as needed as you project you are.

Productise your offering

When you’re feeding 12 people, you need to make sure individuals are being taken care of in a recurring way. As a global services business we had to develop systems and processes, by asking what we could repeat at scale. We were cultivating cultural growth. So I ensured that when the company won, so did the individual. We wanted the team to feel like they were more than just their title, and by introducing a rotating team lead for the week, we ensured that variety, responsibility and accountability. You can’t make a project manager a developer, but you can certainly try to make a developer, the lead.

Develop a niche

This is something we did well at the start. Almost all of our work for the first 12 months was in Vue.js or blockchain technology. It helped build our reputation, which was massive as we were a services based business. The majority of our new business came through referrals, which was a nice position to be in, yet it didn’t lay the groundwork for scaling. I wish we’d focused on SEO and digital marketing at an earlier stage to help with inbound requests.

Hire for aptitude not knowledge.

This applies across disciplines. You can always teach someone the finer points of your house style and approach. It’s why we developed a hiring method which involved giving new recruits a tech test, in a language they weren’t fluent in. We were able to understand their problem solving capabilities when looking at how quickly they were able to adapt. Often you don’t want a new hire to be so experienced with ‘what they know’ that they won’t be willing to be a generalist. For us that’s exactly what we needed.

So work out what you want to be famous for and where potential holes may currently lie in your current team and hire studiously. We were bootstrapped and so another hat I wore was HR too. I hired those who could work autonomously and hold themselves to account. We learned that to maintain an engaged workforce, we had to be transparent about the finances and what we were all working towards, and having a collective consciousness about the goal we were all aiming at.

Experiment more

I mentioned earlier that our inbound marketing funnel was nowhere near as strong as it should have been early on. We had to build our presence on social, so I took to posting daily on LinkedIn, joining groups and eventually vlogging my new startup and hosting a podcast series. Find which channels work best for your business.

We were always aiming for momentum based growth rather than movement, by which I mean, being busy is irrelevant if you’re not having an impact where it matters for the business.

For us SEO and digital marketing proved two valuable channels for generating new leads. But I wished we had taken more risks in our approach at an earlier stage. There are a host of free resources on YouTube of those looking to tout their expertise, so start there but try and do it yourself as it’s good to know what works, and because it can influence other decisions in the business, which, for us, included creating a podcast.

While the team expanded rapidly in a short space of time, the cyclical nature of the projects we were working on often meant that we had underutilised resources. So after some careful thought, I’ve since moved to a virtual model, scaling up and down as needed on projects. I’m able to still deliver high-end niche platforms now with an even wider pool of expertise to draw on. We now offer systems, which breed talent. By codifying processes, like on-boarding new engineers for example, I can trust that the team will be building something repeatable. This is what you need to focus on when looking to scale. How far can you remove yourself from the business and everything still work flawlessly?

My advice for founders who are looking to grow: experiment. See what works for your business for sales, HR, etc, preferably before it’s too late and you’re scrambling to retrofit solutions.

PS Original article is here 👉 Entrepreneur

If you liked this, feel free to find me here:

twitter: twitter.com/@veebuv
linkedin: linkedin.com/in/vaibhavnamburi
instagram:_veebuv

How to build your first prototype and what to expect

Vaibhav Namburi — Mon, 09 Sep 2019 09:56:18 +0000

Spoiler: No Code is involved

There are tonnes of ways you can get around this, I’ll share a few and the linear process I take to deliver stuff QUICK but more importantly of extreme immediate value that “further validates my cause”!

PS: If you haven’t at this point already read Hooked or Evil by Design, you should give them a go - life changing and pivotal for any founder.

So step one is to use your research from the previous article (if you read it) to work out what the pain points your customers have faced are, how often they face it, and what about their current solution bothers them the most (important)

Get a piece of paper and write in big bold letters the total time you’ll spend on this. And make sure you stick to this timing, its important to establish prioritisation ASAP. Create 3 columns, Needs, Wants, Outcomes

Write down all the Needs YOU think are necessary to make the product a success, then write down all the wants and make sure sure you write down the outcome you expect when you create this “needs” for a product (can be something like push notifications)

Alright, now wipe out all the wants, just focus on the needs for this very moment. Wants are luxuries. So with the list of needs and outcomes, work out which outcomes are MOST important to your customer, all research from our last email.

Conform yourself to 2-5 features and then let’s start building with complete focus on outcome-driven success.

Go to a tool like proto.io , framer.com/prototyping, axure.com - all super simple and beginner-friendly tools that have HEAPS of prebuilt components like MAPS, contact lists the usual stuff ready.

This is where you need to recheck your goal very often, what is the goal of building this prototype? Is it to just demo a concept? Is it to show people a new way of doing something? Is it a new way of thinking about an existing solution?

Make sure you build your prototype around your validation goal, or just goal. And REMEMBER, not everyone will get your prototype - people are visual creatures and most people are not innovators (The 5 Stages of Technology Adoption | OnDigitalMarketing.com) literally if you have a sample group of 100 people, only 2.5 of them will kinda get what you’re doing - so don’t be discouraged.

So yeah, take the feedback you get from here with a pinch of salt - you’re looking for words like “oh this is great”, “whoa that would be awesome”, “ah yeah I get that”, nice but subtle reactions

Build a simple clickable prototype and then send it to friends and ask pressing questions such as “does this approach solve the problem you have right now?”, “will you pay for something that does this?”, “Do you see yourself every using this?”

Collect all the feedback you get from people you’ve shared this with and go back to the drawing board clustering patterns of similarity and complaints - build around the customer and use your innovative mindset to offer that special sauce.

Timebox yourself again and spend a little more time around addressing the feedback your audience have given, mainly around your approach solving their problem, and if it did or didn’t do so.

Iterate around three pillars, your goals, your customer's goals and the highest level of impact to deliver optimal value to your customer. With this you should have built an extremely minimal and ridiculously basic version of your product you can then look at sharing with a professional designer or engineering it yourself!

I've learnt this helping and observing all the successful startups and companies we work with at five2one and I encourage you to use a test and build approach as well

If you liked this, definitely follow me on for the similar stuff:

twitter: twitter.com/@veebuv
linkedin: linkedin.com/in/vaibhavnamburi
instagram:_veebuv

5 Ways To Easily Validate Your Idea Before Its Too Late

Vaibhav Namburi — Thu, 05 Sep 2019 16:03:33 +0000

If you're a software engineer you've definitely thought about building your own app at some point, and if you haven't you should - you've got the superpowers to do it anyway!

On that note, You’d be surprised at how many established startups are still “validating” trying to get product-market fit.

Now before we go into validation, lets learn about the most over-used phrase in startups, no - not #hustle or #entrepreneur - product/market fit, this is the phenomenon where what you're building serves an incredible pain point to the exact audience you want, its a moment when you're no longer pushing your product but pulling back, telling your customers to hold off because you can't handle this scale - your numbers will no longer make sense to you, and you're just scratching to keep your app online

Product-Market fit is the nirvana every founder wants to achieve, I mean I don’t know about you, but the above sounds like a problem I’d want everyday, all day - and hey it’s different for every company, be aware.

1 Competitor Analysis

Yeah, I say this a 1000x a month, there is no idea in the world that hasn’t been tried in some way, you’ve just got to find out how they failed - and out execute. Competition is inevitable, if your product does well, you WILL have competition.

Remember if all your USP is, is an idea, you have a hobby not a business.

With that said, going onto the market, thinking like your prospective customer, type in solutions you’d expect to find. Analyse what competitors are doing - if you’ve got them, then you don’t need to spend much time on validation of the idea but instead validation of the execution.

Go to their facebook pages, their social media ads, and look at the comments and scout for the main pain points people are facing at the moment (can be UX, price, expense) and formulate your approach around that.

2 Talk to the customer

Sounds obvious but a good percentage of founders never talk to the customer, they just assume its a problem people have because its “obvious” . No - talk to your customer from day 1, you should be either building product or talking to customers, that’s your own job in the initial stages.

If you don’t know who to talk to or where to find them, that’s your first problem, why would you build a product for someone you don’t even know exists ?

So yes, talk to your customer, and ask them if they have this problem, if they’re in pain because of it, how much it costs them to solve it (important to know they actually solve the problem) and how often the encounter this issue.

In doing so, you almost build up a meta customer persona

3 Share a promise

Another super simple way is to build a website or landing page, the goal of the page is to gauge interest.

Now, its not as simple as throwing up a website and using interest to that site as a metric for success, your copy and messaging needs to be correct.

Compare the two below:

“Share car rides with random people using a mobile app to find them, and pay less than a taxi”
Vs
“Hate waiting for taxis ? With a click of a button, you have your own personal chauffeur, who’s cheaper than a taxi”

Get my point ? Don’t just vomit out a landing page and expect it to blow up, get the messaging right, test a few word versions and based on the conversion you can use it to gauge the interest you have on the product.

Share it with influencers in your space, with friends and people within your direct reach that might be effected by your product - make sure you share it with early adopters and innovators - if I shared the idea of Uber with my Dad he would have thought I was high.

Make sure your outreach audience has an appetite for innovation. In addition post it in forums and groups - reddit, hacker news, communities where your target market lives

4 Sell Before you build

This one tests your sales skills but at the same time lets you understand if people really see value in what you’re doing. We’re building a product for a client right now and he’s been invited to present at seminars and events based on his “idea”.

Is it new ? NOPE - there’s about 6 competitors in the market, but he was able to articulate the gap in the market and pinpoint the exact pain areas people are facing with existing solutions at the moment.

If you can gather interest, people actually sign an agreement on a product you can deliver, that’s some pretty decent validation you have going there.

This is basically what kickstarter is built for - get a prototype or even less and share the product and see if you can get paying customers

5 Analytics overload

This is when you’ve built out a small prototype already, don’t just launch and stay blind, analytics will be the bloodline of your business when you start.

Analytics and feedback loops - make sure you’re talking to your customer as often as possible, understanding what they like and don’t like about the product.

Observe drop off points, I.e places in the app that might be confusing or difficult for the customer in addition set up tools like intercom/drift so your customer can chat with you directly and you can build a stronger relationship with them

This way even with a small prototype that took you a couple of weeks to build, you’ll be able to confirm your hypothesis and add more fuel to the fire.

I've learnt this helping and observing all the successful startups and companies we work with at five2one and I encourage you to use a test and build approach as well

If you liked this, definitely follow me on for the similar stuff:

twitter: twitter.com/@veebuv
linkedin: linkedin.com/in/vaibhavnamburi
instagram:_veebuv

The Perfect Wrapper Components in Vue 2.6 and soon Vue 3.0

Vaibhav Namburi — Mon, 12 Aug 2019 15:09:42 +0000

Do you want to build a codebase that looks like a teenagers bedroom or do you want to build one that looks like its straight out of IKEA.

The difference in clean, predictable and quick code and code that is inconsistent, buggy and takes centuries to add features to boils into a couple of components.

The component we’re talking about today comes in the form of design system components, mainly wrapper components. As a Vue / Frontend developer — you NEED to work with your designer buddy to make sure the design system being built is concise and “inheritable”.

Inheritable? Yeah — inheritable, i.e design pattern that builds on top of itself, evolving design, rather that components that look like they belong to different projects — this is exactly how we built https://flowyse.com

Alright — enough fluff, how do we build a strong wrapper component structure? Let’s use in our example an input field and a button.

Step 1:

Solution architecture questions:

What states does the input field have ?
Where is data being fetched and sent
Will it be maintaining it’s own data layer or absorbing from a parent
Do I directly sync all my input fields straight to a central management store like Vuex ?

Step 2:
Answers

Hover, OnFocus, Error
Parent component
No it won’t, data layer is from the parent (in this instance, you can do it your way)
No, we’re syncing all data to the parent of the input Great now thats done, lets look at a very simple input component.
We have a root label wrapping the input component
We bind the input component to $attrs (more on this very soon)
We listen to “$listeners” (whatever that is)
Lastly we listen to on “input” changes and emit “change” event to the parent

VueJS knew that wrapper components were idealistic and natural of every component driven framework. A part of the “prop” proposition is that attributes or “directives” passed down from the parent not recognised as props by the child automatically get attached to the root of the child…confusing

Imagine passing greeting into the input wrapper, if greeting wasn’t registered as a prop — it would be added as a field onto the wrapper of our input field, by setting inheritAttrs to false we prevent that, and instead override that and pass all the meta data directly into the input component.

This way you don’t need to register EVERY prop in the input wrapper, but essentially it passes itself through the wrapper naturally (as a wrapper should allow)

Secondly we have this thing called $listeners — this is Vue’s great way of basically bubbling all events the component listens to up to the parent, this way you don’t need to register each event manually — again, a great way to create a wrapper component.

The goal of the wrapper is to essentially provide some design conformity — PS wrappers should 100% be responsible for custom logic as well, you can easily add as much custom logic to a wrapper component as needed, you can get access to the value of the input field by registering value as a prop.

What we’re left with is an input wrapper with the model defined in the scope of the component where the wrapper is created, and attributes that are meant to be passed directly to the input component will be register as expected.

This is exactly how the entire Flowyse project is built out, and one of the reasons why I could ship it out in 5.5 weeks.

🚨WHOA WHOA — SOMETHING HUGE IS UP🚨

With Vue 3.0 you don’t need so much config when creating your base wrapper component

Our component gets MUCH more simpler to use

Notice we no longer have $listeners or inheritAttrs

In Vue 3.0 there’s no more automatic inheritance of attributes, which means $attrs automatically includes all non-prop related attributes without needing to define inheritAttrs: false .

Even with the listeners v-on compiles straight to the attributes @enter compiles to on-enter . By simply doing v-bind="attrs".

"attrs" include all non-emitted listeners as well, and the best part is….

v-model compiles into model-value and on-model-update by doing v-bind="$attrs" so no more model option nor do we need to override the native input event like we did before

5 Simple Security Practices For Startups You NEED To Do

Vaibhav Namburi — Fri, 09 Aug 2019 00:09:29 +0000

I know you’re running a company and gunning at 500 miles an hour, trust me I make a living building things fast, so I get it. However, you don’t need to go to the nth level of security but at least do basic things when building out your product so you don’t end up in the news for the wrong reasons.

Here’s a super short article on some of the basic things you can do to ensure your product is “safe” to some extent. Of course, you can really amp this up with ridiculous security practices, pen-testing, ML-based anomaly detection software, internal LAN networks and firewall and 2 Factor Authentication - the list can go on.

This article is going to use a node and AWS as an example - I'm pretty confident the same principles will apply to your stacks too.

1. Hashing passwords

Yes I know, its taught in bootcamps and 1st-year Uni, yet its sad that I need to bring it up. Hash your passwords using bcrypt and salt rounds. Salting is a randomised string generated and represents the cost factor, and the goal of salting is to prevent your system from getting hit with a rainbow table to brute force passwords.

Some bcrypt best practices:

Perform UX research to find what are acceptable user wait times for registration and authentication.
If the accepted wait time is 1 second, tune the cost of bcrypt for it to run in 1 second on your hardware.
Analyze with your security team if the computation time is enough to mitigate and slow down attacks.

2. Load all ENV variables through your pipeline

Using AWS Parameter Store, Elasticbeanstalk set up, and your pipeline system, use variable identifiers in your pipeline such as DB_URL=$DB_URL to inject sensitive values into your backend environments.

Make sure the variables are different for your prod and staging environment.

Make sure those variables are accessed by restricted IAM accounts.

3. VPC Networks

Its super simple to set up but a Virtual Private Cloud in simplest terms can be thought of as a house where all the people in the house can freely communicate with each other and only a certified person is allowed to open the door. This house is in a community that is freely accessible.

Think of the community as a public cloud and the house a private cloud within the public cloud.

The official wiki definition is: A virtual private cloud (VPC) is an on-demand configurable pool of shared computing resources allocated within a public cloud environment, providing a certain level of isolation between the different organizations (denoted as users hereafter) using the resources.

You can set up the DB so that only systems within the VPC can access your DB.

If you want external access to your DB make sure in your inbound rules, you whitelist all IPs.

Image creds to znetlive.

4. CORs Access

A super simple thing to set up in a node environment and only allow request access from whitelisted domains.

This will prevent anyone just using your auth token to then get access to the DB without the restrictions of the UI (so to speak)

5. CRTFs

Whenever you're doing social authentication like Google, FB or LinkedIn(compulsory)

Its worth setting up a secret (hard to guess) key when you make your redirect call. On return of the call make sure the secrets match, this ensures there hasn't been any tampering done to the request and the request is pure.

Here's a quick link of what https://en.wikipedia.org/wiki/Cross-site_request_forgery is.

6. Bonus mention

Don't copy production data to weaker environments to test your product. Make sure production is untouched and development environment covers the edge cases you're solving for.

Creds Alex Joyce

There you go, some super simple and basic things to set up that won't take more than a few minutes.

Using this a bare minimum base, you can amp it up to the nth level - I'll be sure to update this as I can think of simpler ones.

And of course, if you've got more that you'd like to share, please put them in the comments because it'll help me and others alike!

What happens when you type in www.xyz.com

Vaibhav Namburi — Mon, 05 Aug 2019 05:00:46 +0000

How Does the Domain Name System work?

How does the internet know what to get you and how to get you your website?

This blog will be relatively shorter than most because it’s straightforward to explain, considering that a few steps are going to be skipped and only the main necessary logic points will be explained!

Lets go!🚀

Side note: have a look at the diagram, that should simplify things for you 😀

When you type in www.xyz.com in your browser what happens?

You set up a “query” or a question to send to a server. The first server your query hits is called the Recursive Resolver, which is usually operated by your internet service provider (Vodafone, Telstra). The recursive resolver knows which other DNS server or domain name system servers to ask the original question of “What is the IP of www.xyz.com” — IP stands for internet protocol, think of it as an address, or perhaps like your phone number.

The first DNS server the recursive resolver talks to is the Root Server which are servers running all over the world and have information about Top Level Domains such as .com/.net. So the recursive resolver asks the root server for DNS info regarding .com. — Note that there's 1000s of servers supporting the root and its the DNS’ job to find the answer to your query quickly!

The Top Level Domain DNS server stores information regarding the second-level domains i.e the .com sever stores information regarding xyz.com. I.e the TLD DNS server responds back with the IP address of the domain’s name server, which gives us the next clue!

The recursive resolver then takes this IP and sends a query to the domain’s name server, this DNS server knows the IP address of our website www.xyz.com and returns to the recursive resolver the IP address of our website.

After all this, the website appears in our browser, and voila done!
PS all this happens in a fraction of a second!

Nothing in programming is magic. Except CSS...