DEV Community: Chandu

15 Trust badges from top B2B Services Review Platforms in 2020

Chandu — Sun, 07 Jun 2020 03:56:34 +0000

Today online review sites have become the most powerful form of word-of-mouth advertising. Listing your company or service offering in B2B services review platforms can significantly increase your acquisition rates as they host verified reviews of business-to-business services providers to help find reputable services providers such as SEO consultants, web, and mobile app designers & developers, etc. These platforms often issue a free badge that you can display on your website with a link to your business profile on their platform. If your company is featured in their top companies list, you get a special badge for that too. So, what’s special about these badges?

A trust badge from a top B2B Services Review Platform ensures your visitors that your company is legitimate and is accredited with the correct bodies or regulators.

There are a ton of free badges online but it’s very important to use the right trust badges — ones that people recognize. So let’s dive in to see the top 15 Trust badges from B2B Services Review Platforms in 2020.

Good Firms

GoodFirms is a full-fledged research and review platform that helps software buyers and service seekers to opt for the best software or firm. At the same time, it helps IT companies and software vendors to boost user acquisition stats, market share, and brand awareness. GoodFirms, just as the name suggests, is a dedicated community of “ performing “ IT companies as well as software solutions.

Some Interesting stats of goodfirms.co:

19,912 Global Alexa rank.
15000+ verified reviews.
9000+ companies listed.

Where to get goodfirms.co badges?

You can check out their badges here.

Clutch

Clutch is a B2B research, ratings, and reviews firm in the heart of Washington, DC. They connect small and mid-market businesses with best-fit marketing, advertising, design, development, and IT companies, consultants, or software. Their methodology considers verified feedback from client references, services offered, work quality, and market presence to compare and rank companies in a specific market.

Some Interesting stats of Clutch.co:

150,000+ Agencies listed
36,000+ Client Reviews
20,371 Global Alexa rank

Where to get Clutch.co badges?

You can check out their widget and badges offerings here.

Business Of Apps

Business of Apps is the leading media and information brand for the app industry and provides world-class news, analysis, data & marketplaces for app businesses. They host comprehensive B2B directories and marketplaces covering app ad platforms, app development, app marketing, influencers, and other specialist areas.

Some Interesting stats of businessofapps.com:

21,308 Global Alexa rank.
200k global audience each month.

Where to get businessofapps.com badges?

You can check out their badges here.

UpCity

UpCity is dedicated to helping our partners in our marketplace grow their businesses by providing the support and help they need to build their online recommendability. For businesses seeking services, the transparency and trust they provide through reviews and data-driven insights help dramatically improve the B2B partner selection and purchase experience.

Some Interesting stats of upcity.com:

23,804 Global Alexa rank
225,000 visitors each month

Where to get upcity.com badges?

You can check out their badges here.

AppFutura

AppFutura is a platform connecting buyers and service providers in the fields of app development, custom software development, and digital marketing. Their directories, created with a unique methodology, allow buyers to browse through thousands of companies listed and categorize them as per the needs of their projects.

Some Interesting stats of appfutura.com:

45,575 Global Alexa rank
8,000+ companies listed.
1,000+ reviews published.
40K+ visitors each month.

Where to get appfutura.com badges?

You can check out their badges here.

Software World

SoftwareWorld is a software review platform that showcases top software solutions suitable for various industries, providing a comprehensive review service by comparing the best software solutions available on the market. The platform creates unbiased lists of the top software solutions by category, helping businesses find the right solution for them.

Some Interesting stats of softwareworld.co:

59,743 Global Alexa rank.

Where to get softwareworld.co badges?

You can check out their badges here.

Design Rush

DesignRush Is A B2B Marketplace Connecting Brands With Agencies and acts as your guide to finding the best professional agencies, categorized by their areas of expertise. They analyzed and ranked hundreds of agencies to help brands find top full-service agencies, web design companies, digital marketing firms & top technology companies.

Some Interesting stats of designrush.com:

62,824 Global Alexa rank

Where to get designrush.com badges?

You can check out their badges here.

Top Developers

TopDevelopers.co is a dedicated directory of IT service providers. The list of IT companies is graded through discreet research and analysis on various industry-specific metrics to help the businesses in finding a reliable technical partner. Their verified reviews will also help you find the best partner to technically accelerate your business.

Some Interesting stats of topdevelopers.co:

80,601 Global Alexa rank

Where to get topdevelopers.co badges?

You can check out their badges here.

Extract

Extract.co examines software companies and digital agencies with key industry metrics, discover their reputation and quality standards and reveal the best effective companies. They help in understanding which services deliver well or which industry is more focused or what technologies the company/team is more effective at. They also do well research on previous customer experience before awarding a project to a new company.

Some Interesting stats of extract.co:

86,359 Global Alexa rank.

Where to get extract.co badges?

You can check out their badges here.

Techimply

TechImply is an IT Firm recommendation platform for all IT companies & technology vendors. More than 10,000 potential buyers use TechImply to find the right business software and IT Firms. You can easily get started on TechImply by creating your company/software profile.

Some Interesting stats of techimply.com:

116,848 Global Alexa rank

Where to get techimply.com badges?

You can check out their badges here.

It Firms

Ascertain the topmost Web Development, Mobile App Development, Software Development & eCommerce Development firms across the globe. ItFirms leave no stone unturned to let you discover some of the renowned firms that will coincide with your needs and delivers high-quality services. Keeping abreast of the latest statistics and data, they provide 100%true and trusted insights on top IT companies and trends worldwide.

Some Interesting stats of itfirms.co:

122,826 Global Alexa rank.

Where to get itfirms.co badges?

You can check out their badges here.

Wadline

Wadline helps clients find the best IT companies for projects in Web, Mobile, and Software development. Their commitment is to make the IT-sphere more understandable and convenient for customers all over the world. You will find the list with the best of them. Check any company you like, browse the customer rating and reviews, and make a good decision.

Some Interesting stats of wadline.com:

155,625 Global Alexa rank

Where to get wadline.com badges?

You can check out their badges here.

Selected Firms

Selected Firms is a pre-eminent source for finding and vetting the supreme eCommerce, mobile, web, and marketing companies on the web. It gives 100%true and believed bits of knowledge on top IT organizations and patterns around the world. They investigate every possibility to give you a chance to find a portion of the eminent firms that will concur with your needs.

Some Interesting stats of selectedfirms.co:

354,957 Global Alexa rank

Where to get selectedfirms.co badges?

You can check out their badges here.

Top Firms

TopFirms is an IT Directory to say but delivers immense values to its users more than that. It is the modern way to find or acquire quality, reliability, and best value of the investment. They have conceptualized it after observing the struggling IT & software development service seekers in the market for the most reliable and suitable match for their bespoke requirements & budget.

Some Interesting stats of topfirms.co:

374,242 Global Alexa rank

Where to get topfirms.co badges?

You can check out their badges here.

Up Firms

UpFirms is a B2B research, rating, and review platform that helps service seekers to pick one of the best firms. At the same time, UpFirms assists IT companies to boost their user acquisition, market share, and brand visibility. They list the top-performing companies IT in various service categories according to their rank and rating. Service seekers can browse UpFirms categories for outsourcing any services solutions with verified reviews and ratings.

Some Interesting stats of upfirms.com:

491,400 Global Alexa rank.

Where to get upfirms.com badges?

You can check out their badges here.

Some tips for choosing the right B2B review platforms:

Choose the reviews platforms that best suit your industry
Create an account and apply to get listed
Understand the platform ranking factor
Ask your clients to write detailed reviews
Keep your company information up-to-date

Other trust badges you can look into:

Security seals: These types of seals ensure that the communication between the browser and your site is encrypted via security protocols like SSL and also the user privacy is maintained. These are generally issued by companies like Norton, McAfee, etc, on the technical security aspect of the website.

Certified Partner badges: These badges are awarded to technical professionals who have successfully passed a certification exam or achieved full certification. In other words, they validate your professional and technical expertise in that particular area.

Content protection badges: How often do you encounter a situation where other websites copy your hard work (content) and publish under their name? It’s frustrating! This is where content protection badges from companies like DCMA and Copyscape come into play. You can simply place the protective seal on your website which deters thieves from stealing your content. If at all you find your content elsewhere you can easily request a takedown.

E-Commerce trust badges: One of the key problems e-commerce site owners face is cart abandonment where users add items to their online shopping cart, but exit without completing the purchase. Here is a detailed report on how trust seals can increasing your purchase/conversion rates. There are different types of trust badges like payment methods accepted, free shipping, money-back guarantee etc., to ensure the trust of your customer.

Looking to create your own badge? I found this great website which allows you to design, customize, and get high-quality badges for free.

Wrapping up:

So this was my quick round-up on top B2B customer reviews platforms that you could consider signing-up and earning a trust badge. If you found this article interesting, consider sharing it with your business contacts and help them grow their business, give a 👏 and leave a comment below if you feel something was missed here. I would be more than happy to hear from you 😄.

Checkout my other stories and know more about me on 👉 chandan.dev. 👈

Recoil vs Redux | The Ultimate React State Management Face-Off

Chandu — Sat, 06 Jun 2020 05:37:27 +0000

Redux vs Recoil

React with its component-based approach has made the life of developers easy by managing separate state and logic for each component and the ability to re-use them when required. But what if you wanted to use a shared state between multiple components or maybe fetch data from an API once and make it available to all the components in your app? That’s when global state management libraries like Redux, MobX, etc., come into play.

The downfall of Redux:

With the release of React 16.3, the react community got to experience the new Context API which worked similar to Redux and allowed to manage state in multiple components using Context Object, Provider, and Consumer. However, the context API also came with a catch! Sebastian Markbage from the React team has mentioned that the new Context API was not built and optimized for high-frequency updates but rather for low-frequency updates like theme and user auth management inside your app. You can check out his comment here. Context API also had some limitations with code splitting and the ability to store indefinite values instead of a single value.

So, what’s next?

Facebook recently launched Recoil, which is a brand new experimental JavaScript state management library that addresses many of the problems larger applications face when using the existing Context API.

Recoil (Fan made logo — Chandan.dev)

The Basics of Recoil:

Recoil mainly comprises of two things — Atoms and Selectors.

Atoms:

Atoms are units of state. They’re updateable and subscribable: when an atom is updated, each subscribed component is re-rendered with the new value. They can be created at runtime, too. Atoms can be used in place of React local component state. If the same atom is used from multiple components, all those components share their state.

In simpler terms, Atoms are units of state that components can subscribe to.

Selectors:

A selector is a pure function that accepts atoms or other selectors as input. When these upstream atoms or selectors are updated, the selector function will be re-evaluated. Components can subscribe to selectors just like atoms, and will then be re-rendered when the selectors change. Selectors can also be used to calculate derived data that is based on state.

In simpler terms, Selectors transform the atom state either synchronously or asynchronously.

You should probably check out this video from the recent React Europe live stream to get a better understanding of recoil.

The face-off: Recoil vs Redux

Let’s start by creating a demo application with create-react-app which increments the count on the click of a button.

Demo app for recoil vs redux

Our application is going to consist of MainComponent.js which receives the count and handleFireClick function as props.

Configuring the store:

In redux, we start off by creating a basic store that acts like a global state for our application.

In recoil, there is no need to create a separate store. Wow! that’s awesome 🤩.

Creating a shared state:

In redux, we create the desired application state using reducers. Let’s create a simple counterReducer which increments the count by 1.

In recoil, creating a shared state is a straight forward approach using atoms. Each atom can be considered as a single shared piece of state. Now, let’s create an atom for holding our counter state.

Firing the actions:

In redux, actions are fired using the dispatch method provided by redux. Let’s create a file named actions.js which holds the action for incrementing the count.

In recoil, we fire off actions and modify the existing shared atom state using selectors.

Connect ’em all:

Finally, it’s time to connect the shared state with our MainComponent.js component and to differentiate Redux from Recoil, I’ll be creating two new wrapper components called ReduxExample.js and RecoilExample.js.

In ReduxExample.js, we use useSelector and useDispatch hooks provided by react-redux to get value from store and fire actions to update it.

Bonus : In ReduxExample.js we can also create a class component and wrap the component using connect HOC by redux and pass the shared state, actions as props using mapStateToProps , and mapDispatchToProps respectively.

In RecoilExample.js we can directly use the shared atom state value with useRecoilValue and update our state, as simple as doing a setState but with useRecoilState.

Note : Recoil is based on react hooks and will only work for functional components.

Final Wrap:

There is just one more step for your app to start working and that’s by wrapping your Example components with HOC components provided by Redux and Recoil.

For the Redux example, we use the Provider from react-redux and pass our ReduxExample.js component as children. Make sure to also supply the store you created in the first step.

Similarly, for Recoil, we wrap the RecoilExample.js component using the RecoilRoot component provided by recoil.

Let’s Go!

At this point, we have successfully created the shared state and actions to update it using both redux and recoil. Simply run npm run start and check if your code is working.

The main question — Will Recoil replace Redux?

That’s a tough one to answer today (at the time of writing this post) as it is still in the experimental phase but the new library looks promising and there is a high probability that developers will switch to Recoil from Redux shortly.

Why? Recoil lets you create a data-flow graph that flows from atoms (shared state) through selectors (pure functions) and down into your React components without having to deal with store creations and re-render the entire App component tree while the state updates.

Conclusion:

So, this was a quick comparison between recoil and redux for a simple increment counter app. You can check the live version of the app here (Redux-vs-Recoil) and source code on Github. It’s just a matter of time Recoil becomes the new standard for managing shared states in your react app and is ready to be used in production applications. Until then give it a shot and follow the community to keep yourself updated with the new releases. If you found this post helpful in understanding the basics of redux-vs-recoil give a 👏 and leave a comment on — What features would you love to see in Recoil? I’d love to hear any thoughts on this topic 😋.

How can a Next.js application grow your business online?

Chandu — Mon, 27 Apr 2020 03:31:55 +0000

Single Page Applications like React, Angular, and many frontend frameworks render the page content dynamically with JavaScript and Search engine bots - mainly Googlebot will have a hard time crawling the content of our pages resulting in lower SEO performances. This is where Next js comes to the rescue. It has all the core features of React and comes with Server-side rendering (SSR) and Static Site Generation (SSG) support for excellent SEO to increase your website visibility on Google.

This means the page can be rendered on a webserver and returned to the browser as easily readable HTML. This kind of webpage is treated as "icing on the cake" by GoogleBot because it doesn't have to use resources for rendering the page using javascript. So, happier the GoogleBot is, the higher your web page will rank in Google searches.

Additionally Next js has a comprehensive list of features that include hot code reloading and splitting, automatic routing, prefetching, typescript support but one feature you should be most excited about is the support for Headless CMS.

Headless CMS is a backend Content Management System that does not worry about how and where your content gets displayed rather a headless CMS focuses on only two things: storing your structured content and delivering it. So, do you need a developer for Next js development and every time to edit and update posts? Absolutely No, you just need an awesome Next js developer like me to set up and integrate your preferred Headless CMS for the first time. Post setting up you can simply log in to CMS provider's dashboard and publish as many blog posts and incredible content you want on the website.

This was just a quick round-up on Next.js. If you interested to know more about my experience with Next.js and web development in general and more detailed tech articles refer to the blog on my website or check out my medium profile here

“Zeit now” is now, Vercel. What does this mean to existing websites?

Chandu — Tue, 21 Apr 2020 18:37:11 +0000

When the entire world is fighting against the pandemic, spreading negative vibes everywhere, there is one reason for web developers to be excited about and that’s an email from Guillermo Rauch, CEO of Zeit. I mean the CEO of Vercel. Confused? This is what the email reads:

Zeit is now Vercel

Email from Vercel’s CEO (Formerly Zeit):

Hi there!

I hope this email finds you well. I bring special news today.

ZEIT has rebranded to Vercel. In addition, we have secured a $21M Series A to accelerate the development of Next.js and our platform.

Our latest blog post details our renewed focus, rebrand, and fundraise. Rest assured – none of your existing workflows, pricing plans, or projects are going to be affected in any way.

Read the Announcement →

Today, companies like Airbnb, The Washington Post, and Twilio trust the Vercel platform to develop, preview, and ship their ambitious projects. And Next.js powers 35,000+ production websites.

We count ourselves lucky for the tremendous support we receive from our community – I want you to know that we’re very, very grateful for it. This business is our passion, and we will continue delivering the exceptional developer experience we are known for.

Looking forward to your next project!

Guillermo Rauch,

CEO – Vercel Inc.

So what this means to us? Should we update anything ?

So after trying to visit now.sh it redirects to Vercel.com. So , the obvious questions that might come to your mind are, Should I update my name servers or create a new account in Vercel? What happens to my subscriptions? Does my hosted website perform a 301 redirect? Etc.,

The simple answer is, No! you don’t have to change anything, just sit back and relax. It’s simply a rebranding from ZEIT to VERCEL.

You can still continue to perform all of your previous actions and deployments without worrying about this change.

What is Vercel?

New Logo of Vercel

According to their blog post : Vercel strongly connects to the words versatile , accelerate , and excel.

So, what’s great about this rebranding?

Raising $21M in series A funding will open opportunities to explore and further improve one of our beloved frameworks Next.js. Main highlights from their blog are:

to provide the ultimate workflow for developing, previewing, and shipping Jamstack sites.
enable teams to develop , preview , and ship their apps faster, and with confidence.
the same passionate ZEIT team, with the same attention to detail.
continue investing in the open-source projects like Next.js.

Investors in Series A funding:

Experts who led early design at Facebook and Dropbox, created frameworks like React, and are running companies like GitHub, Sentry, and Auth0.

Top investors in Vercel

Conclusion:

With awesome frameworks like Next.js and deployment solutions to JAMStack, Vercel is ready to take the front-end experience for 11 million JavaScript developers to the next level. So this was the quick round-up on what’s the future of Next Js Development with Vercel is going to look like. Do checkout my awesome website I built using Next.js and Vercel. Don’t forget to leave a comment on — What improvements would you love to see in Next.js and Vercel? I’d love to hear any thoughts on this topic 😋.

👇 Read my other stories on Next.js below.

How to deploy Next.js app on AWS Elastic Beanstalk via Travis?

Are Single Page Applications still relevant in 2020?

How did we improve the performance of an E-commerce site using Next-Gen image formats?

How we improved the performance of an E-commerce site using Next-Gen image formats?

Chandu — Fri, 03 Apr 2020 11:47:28 +0000

How did we improve the performance of an E-commerce site using Next-Gen image formats?

E-Commerce is a growing industry that offers convenience to shop online. According to research, visual content is the best way to give users the same experience online as they get it in-store. However, the better the visual content, the larger the page size is going to be and this, in turn, affects the website’s load time. This decrease in website performance could result in losing out on a lot of potential shoppers. So how can we ensure high-resolution image delivery without hurting the performance of the website? Read on to know more.

Improving website performance using WebP image format

How to serve images without compromising the site performance?

With the advancement in web technologies, we now have a few Next-Gen image formats that have better compression and quality characteristics compared to their older JPEG and PNG counterparts. Serving your images in these formats will load websites faster and consume less bandwidth. Here is the list of next-gen image formats currently available:

WebP
JPEG 2000
JPEG XR

Why did we choose WebP?

WebP is a new format that was developed by Google in 2010 to provide improved lossless and lossy compression for images. A major benefit of using WebP images is their reduced size and according to Google on average WebP images are 30% smaller in size compared to PNGs and JPEGs. If you look at the total payload of web pages, the images on most sites account for over half of that payload. So by using WebP images with up to 30% size reduction in images, you will see a noticeable impact on your site’s performance metrics.

JPG vs WebP

Restraint we faced while implementing WebP

One of the major facts you need to be aware of WebP images is cross-browser support. Although about 79% of the global users surf using a browser that supports WebP, we still needed to serve JPG images to iOS and Mac users with Safari browser.

WebP cross-browser support.

Now that you see the problem just as we did, you do not need to brainstorm ideas to find the apt solution. Here are two techniques I have discovered to overcome the problem -

Make changes on the user-facing platform by using a tag to serve multiple versions of the same images.
Use/Develop a service that optimizes and serves WebP images from a CDN cache, on-the-fly by detecting the user’s browser.

I would recommend using the second option as there no changes required on the application. Now, if you are interested in learning more about the service (AWS Lambda Function and CloudFront to serve WebP images) we developed, check our technical guide here.

Why did we do it this way?

Image optimization — our way.

There are a lot of services that offer image optimization on the fly but important things we had to keep in mind are:

Storage : Most of the image optimization services out there require you to store the images in their databases and serve it from there. Since we already had over 20,000 high-resolution images in our AWS S3 bucket, we didn’t want to take the hassle of migrating it elsewhere.
Modifications : We wanted to implement a solution that had the least alterations to our frontend and backend systems which means the existing code in both UI and API will continue to work.
Recurrent Costs : With hundreds of visitors on the site every day, the price to pay for the bandwidth consumed from any optimization service is significantly higher. So we used our own function on AWS lambda@Edge and S3 to optimize the images at almost no additional costs.
Processing: Converting the whole library of images into WebP format is again an arduous task and could take a lot of time. So, we only convert images into WebP on their first request. As an added bonus we also process and store different dimensions of the images in the cache to achieve instant delivery from edge locations.
Modularity : Our solution can be easily deployed to any of our other platforms without the need for remodeling.

Our results:

With, WebP efficiently compressing the images and preserving the quality and our edge functions caching the images we didn’t have to tradeoff between image quality or the number of images to serve to achieve faster load speed.

Image formats size comparison.

Google has indicated that site speed is one of the signals used by its algorithm torank pages higher. With the above techniques and improved performance, we were also able to obtain higher scores in page audits.

Google Lighthouse — audit scores.

By serving the images from AWS Lambda@Edge, we were able to load Gehna’s homepage in under 5 seconds.

Decreased load time of web page.

The below graph shows the improvement in page speed provided by GTmetrix.

GTmetrix page speed after WebP images.

Wrapping up:

Next-gen image formats like WebP offer an incredible saving in file size with relatively little to zero compromises in image quality and when coupled with AWS Lambda@Edge, it provides great value in boosting the performance of a website. WebP definitely seems to be a promising image format for the web with anticipation of Apple’s Safari supporting WebP images in the near future.

Also, do check out the awesome E-commerce website Gehna we built at Commutatus using Next.JS.

Gehna (E-commerce jewellery platform) built with ❤️ at Commutatus using Next.js

If you find this article useful in improving the performance of your web site, give an 👏 and leave a comment on — What other techniques can make your page load faster? I’d love to hear any thoughts on this topic 😋

Dashboard to show flattening of the curve

Chandu — Mon, 23 Mar 2020 09:11:30 +0000

COVID-19 / Coronavirus has led to a pandemic that is threatening every country today. The promising strategy to limit the damage caused by this pandemic is to flatten the curve.

Source: Wikipedia

What is an epidemic curve?

During any pandemic, healthcare resources like hospitals, ICU beds, and healthcare staff can be overwhelmed by the more number of patients, beyond the baseline number of patients who are already being cared for by the healthcare system. An epidemic curve is drawn to visualize the progress of a disease outbreak over time.

This curve gives us a brief regarding the number of new outbreak cases by date of onset of the disease and hence the overall shape of the curve can reveal the type of outbreak we’re dealing with.

Healthcare capacity line:

The horizontal line represents the capacity of the country’s healthcare system. This capacity can be defined as the number of beds, staffing, and other measures available for patient care. Today, due to COVID-19 most of the countries are already operating close to the capacity line and the curve posses a threat of crossing this line as the virus spreads very rapidly.

What happens when the line is crossed?

When the epidemic curve crosses the healthcare capacity line, the healthcare system can no longer meet the needs of COVID-19 patients and the other types of patients. At this point, people may not get the best care and the mortality rate starts to rise rapidly.

What is flattening the curve?

A large number of lives can be saved by just ensuring that people get sick at a slower rate. This is termed as flattening the epidemic curve. A flattened curve indicates that the same number of people ultimately get infected with coronavirus but spread over a longer period which leads to a less stressed health care system.

When does flattening the curve happen?

The most important key factor to flatten the curve is social distancing. The objective of social distancing or self-isolation is to reduce the probability of close contact between persons carrying an infection, and others who are not infected, thus minimizing the virus transmission. This is the underlying reason why governments are closing schools, non-critical businesses, social/sports events and other places where a ton people gather.

Can social distancing alone flatten the curve?

By limiting interactions between individuals, we can limit the spread of the disease but that doesn’t mean it is the only effective way to flatten the curve. There are several other factors that you can do to aid flatten the curve such as practicing good hygiene by washing your hands, using sanitizers, cleaning frequently touched surfaces and self-isolating in confirmed and suspected cases.

Where can I see the curves for each country?

We at Commutatus, developed a dashboard to show the flattening of curve by each country. Feel free to check it out here : https://flattening-the-curve.commutatus.com/

Dashboard to show flattening curve of each country

How can we help in flattening the curve?

As the severity of COVID-19 rises, it’s clear that our best option is to flatten the epidemic curve. So here is the list of things every individual is recommended to follow :

Wash your hands as frequently as you can.
Practice efficient social distancing.
Stay home.
Proper usage of sanitizers.
Don’t go for hospitals unless necessary.
Don’t overbuy essential medical supplies like N95 masks which are required by healthcare providers while treating patients.
Most importantly, don’t panic!

Let’s all unite against the COVID-19 pandemic and fight ourselves out of the difficult times.

Source: WHO

How to deploy Next.js app on AWS Elastic Beanstalk via Travis?

Chandu — Sat, 19 Oct 2019 14:27:22 +0000

How to deploy Next.js app on AWS Elastic Beanstalk via Travis?

Single-page JavaScript applications can be pretty challenging these days due to client-side routing, page layout, APIs, server-side rendering and mainly SEO. This is where Next.js helps you build server-side rendered, SEO friendly apps with high customisability.

Why deploy to AWS?

Next.js was built by Zeit back in 2016 and has quickly gained traction to the point of becoming one of the most popular tools of its kind. The same team built Zeit Now — the easiest way to deploy websites and host your web projects with zero configuration. Unfortunately, it doesn’t give us full control of AWS instances and lambda functions where our apps are hosted. Since most companies like to host apps on their own AWS servers for privacy concerns, let’s see how we can deploy a Next.js application on AWS.

If you are building a serverless Next.js app, do checkout Serverless Next.js Component by Daniel Conde which allows you to deploy Next.js apps to your own AWS Lambda@Edge functions in every CloudFront edge location across the globe with almost no configuration. But if you are using Express server in your app for other functionality, you might want to host it on AWS Elastic beanstalk.

Steps to host your Next.js app on AWS Elastic beanstalk via Travis:

Step 1 : Make sure your app has a server for example Express and next.config.js doesn’t have the target set to serverless.

Next.js app on express for AWS hosting

Step 2 : Edit package.json to execute your scripts for development, staging and production environments.

"scripts": {

        "dev": "NODE\_ENV=development node ./server.js",
        "build": "next build",
        "start": "next start",

        "deploy-staging": "NODE\_ENV=staging next build && NODE\_ENV=staging node ./server.js",

        "deploy-production": "NODE\_ENV=production next build && NODE\_ENV=production node ./server.js"

},

Step 3 : Time for AWS! Go to your AWS dashboard and click on Elastic Beanstalk.

AWS Elastic beanstalk for Next.js

Step 4 : Click on Create New Application and enter a name for your application.

Create an application on AWS Elastic Beanstalk for Next.js

Step 5 : Once you have created the application, under Actions dropdown, click on Create environment

Step 6 : Choose Web server environment and click select.

Elastic beanstalk web server environment for Next.js app

Step 7 : Now, enter the environment name for example next-app-staging or next-app-production and choose a domain. Make sure to select Node.js under Platform settings and click on Configure more options at the bottom.

Step 8 : Click on modify of the Software tab and type npm run deploy-staging or npm run deploy-production in the Node command field based on your environment.

Deploy Next.js on AWS

Step 9 : Click on Create Environment and wait for a few minutes to let AWS set up everything for you.

Note : Don’t worry if your application Health status shows Severe because we still didn’t upload our app to run the node command. At this point, if you want to upload the app manually, you can do so by simply zipping the entire project folder without next build folder. But, come on just one more step to automate the whole deployment process.

Step 10 : Now let’s integrate Travis for CI. You can check out several online tutorials on how to set up Travis with your GitHub repository. Create a travis.yml file in the root directory and configure it as follows:

Note : The above configuration lets you deploy to different environments staging and production.

Step 11 : Login to your Travis dashboard and click on your project repository. Go to more options > settings > Environment variables and add your AWS access keys and S3 bucket.

Travis for next.js app deployment on aws

Note : You can copy the S3 bucket name after Step: 9 is completed by going to AWS Console > Services > S3. We just need to copy the bucket name and not the path.

Step 12 : That’s it! Just push your code to Github, sit back and relax. Travis will automatically trigger a build and deploy the latest version of your Next.js app on AWS Elastic Beanstalk.

Bonus tip : To avoid any downtime of 5–10 min during the deployment process, create multiple EC2 instances/load balancers and enable rolling updates.

Additional Information: (Alternative build process)

The above steps will build and run your Next.js application on AWS Elastic Beanstalk and Travis is just used to push your code from GitHub to AWS. But if you want to build your app on Travis and then run it on AWS, here are the configuration changes you will have to make:

In package.json,

"scripts": {

"dev": "NODE\_ENV=development node ./server.js",

"build": "next build",

"start": "next start",

"build-staging": "NODE\_ENV=staging next build",

"deploy-staging": "NODE\_ENV=staging node ./server.js",

"build-production": "NODE\_ENV=production next build",

"deploy-production": "NODE\_ENV=production node ./server.js"

},

In travis.yml, add the following lines before deploy:

before\_script:
 - npm install

script:
 - npm run build-${NODE\_ENV}

before\_deploy:
 - cd $TRAVIS\_BUILD\_DIR
 - sed -i '/.next/d' .gitignore
 - git add . && git commit -m "latest build"

The above code will install npm on travis virtual machine and build your application. You can add an NODE_ENVenvironment variable in travis available only to a specific branch. For example:

Env variable to branch in travis

This will ensure the right build (staging/production) is made on travis. Finally, the before_deploy: will go to your build directory, remove .next from .gitignore and commit the changes temporarily on travis.

Now that your application is built on Travis, you just need to start your app server on AWS as mentioned in this tutorial.

Phew! Feeling tired ? Clone my Github repo. 😉

Gehna (E-commerce jewellery platform) built with ❤️ at Commutatus using NEXT.js

Conclusion:

If you find this article useful as a guide to deploying your Next.js app running on the express server to AWS Elastic Beanstalk via Travis CI, give an 👏 and leave your queries in the comment section below? I’d love to answer them 😋. Also, do check out the awesome E-commerce website Gehna that we built at Commutatus using Next.js running on AWS Elastic beanstalk.

How to configure a reverse proxy in AWS?

Chandu — Sat, 19 Oct 2019 09:42:55 +0000

Setting up reverse proxy in aws.

Ever tried setting up multiple web applications under the same domain? Where users can access applications running on the same server with different path names? For instance, you hosted a react app at www.example.com and desire to have a Wordpress blog at www.example.com/blog. This is where the concept of reverse proxy kicks in and helps you accomplish what you are looking for.

What’s a proxy and the difference between the forward & reverse proxy?

A simple definition for “proxy” means that data is passing through a third party, before reaching to the actual location. Forward or regular proxies are servers that encapsulate the original identity of the requestor i.e., users stay anonymous to the host server.

Forward Proxy

Reverse proxy as the name suggests does the opposite of what a forward proxy can do. It takes requests from the user and forwards them to the host web servers acting as a load balancer. We can leverage this behaviour to serve different apps under the same hood.

Reverse Proxy

To summarise, the forward proxy hides the clients whereas a reverse proxy hides the servers.

Enough of theory, let's get to work!

Photo by Jordan Harrison on Unsplash

How to configure a reverse proxy in AWS?

Before we move onto configuration, make sure your web application is deployed to AWS elastic beanstalk. If it’s not, check out this article ( Easy steps to deploy a node application on AWS ).

Step: 1

Go to your EC2 instances from the AWS console.

Step: 2

Scroll to the bottom and click on Load balancers to check if your instances are in an active state.

Choose Load Balancers in EC2

Load balancers in Active State

Step: 3

Create a Target Group for your instance

Create a Target Group

Step: 4

Name your target group and click ‘ Create ’. Default settings are fine here.

Naming your target group

Step: 5

Select the target group you just created and click ‘ Edit ’.

Editing the target group

Step: 6

Select a running instance you want to register with your target group (in this case, it's a WordPress blog) and click ‘Add to registered ’.

After it shows up in the Registered targets, click on ‘ Save ’

Registering our instance with the target group

Step: 7

Now, go back to your load balancers and select the one you want to proxy. Click on Listeners tab and click on “ View/edit rules ” of the HTTPS: 443 listener you configured while setting up SSL.

Editing listeners for reverse proxy

Step: 8

Tap on the + icon and click “ Insert Rule ”

adding forwarding rules

Step: 9

Add the following 2 rules to proxy the blog server every time a user hits the blog path:

IF Path is /blog THEN Forward to example-blog

IF Path is /blog/* THEN Forward to example-blog

rules to reverse proxy blog

Step: 10

Let’s see this in action!

Reverse proxying /blog path

Give an 👏 if this article was helpful and leave your queries in the comments section below.

My experience of the arbor program by Commutatus

Chandu — Thu, 15 Aug 2019 18:21:01 +0000

My experience of The Arbor Program by Commutatus

My experience of the arbor program by Commutatus over the past year.

Quick intro:

Hey ! 👋 I am Chandan, a 2019 computer science graduate from SRM University in Chennai. I am here to talk about my experience working in Commutatus.

One of the key experiences everyone recommends during your college time is to do an internship. I wanted to intern in a company that would give me an idea of what it was like to actually be a developer. By the time the college placements started, I was looking for a company that could give me such an experience. Commutatus was one of those companies. The Arbor Program (TAP) was an initiative by Commutatus to nurture young talent and train them in technical development skills while they were still in college, so that they would be ready to tackle real-world problems head-on by the time they graduated. The program was also backed with an attractive offer letter by the company while I was still studying. This excited me as I was looking to explore a career path and develop new skills that would give me an edge in the job market.

Hiring-process :

The selection procedure was quite simple. Starting off with a pre-screening round comprising of an online test and an easy assignment. This was followed by a case study round to where they gave us a problem that the company had faced in one of their partner’s products and asked asked us to solve it to evaluate our problem-solving skills. The final round was a relaxed, face-to-face interview with a few experienced developers and the CEO of Commutatus. I felt this was a perfect example of how interviews should actually happen. The whole thing felt like a conversation rather than an interview.

Beginning of awesomeness :

I was thrilled on receiving company’s offer letter, confirming my selection the day following my interview. Upon arriving at the Commutatus office on the first day of my internship I was filled with mixed emotions, anxiety and excitement. I was accompanied by five other students. This being my first position in an office atmosphere, I didn’t know exactly what to expect. However, the environment at Commutatus was quite relaxed. We had an onboarding to understand the core principles of the company it’s vision. During my initial phase, I was given small weekly tasks that would aid in building up my web development skills.

Students selected for TAP 1.0 (I am the one on extreme right 😎)

The journey so far :

My internship at Commuatus has taught me more than I could have imagined. It all started from simple HTML/CSS websites to large scale, advanced single-page applications. Your role (frontend/backend/full-stack developer) in the company is decided based on your interests and performance in the weekly tasks assigned to you. As I was keen to learn Javascript and showed interest in building a wonderful user experience, I was given tasks related to the role of frontend dev. Soon after I completed my training in core concepts and advanced javascript, I was introduced to the team I’ll be working with. At this point, I was extremely happy getting inducted into the React team. ( For those who don’t know what’s React, it’s a modern javascript library used to build web applications like Facebook, Instagram, Netflix, Codecademy, etc.,).

Meet my React team at Commutatus ❤️

What I learned during TAP?

Skills I acquired during the arbor program in Commutatus

Amazing projects I have worked on :

The biggest benefit of TAP is that it offers a space for students and graduates to gain work experience by working on live projects. In the past year, I have worked on numerous projects :

Partners of Commutatus

AIESEC: Yes, that’s right! Commutatus manages all global scale development for AIESEC’s platforms which facilitate leadership development and cross cultural experiences in over 120 countries. I am part of the development team that built the management portal — EXPA, to manage and analyze global operations from CRM tools to complex analytic functions.
Educatly: A student platform to explore over 1,50,000 study-abroad opportunities worldwide. Educatly was my first project as a React developer that gave me an exceptional learning experience and an opportunity to apply the skills I acquired during TAP. I also wrote my first ever tech blog on medium, addressing a problem I faced during development and it has over 2000 views till date 🤩.
Gehna : An e-commerce platform for custom handmade jewellery, built on NEXT.JS (first of it’s kind at Commutatus). This project has taught me a ton of new skills as I got an opportunity to build it from scratch and integrate core dependencies, all by myself in just 3 months. I am one of the key developers of this platform and I built the whole user interface (or maybe 90% of it 😛).

Perks of working in Commutatus :

Be a Polymath : You are free to wear any hat in the company. (Wait! not this 🎩) I mean you have opportunities to explore any domain you like and diversify your skills. It’s been less than a year at Commutatus and I got a chance to recruit for TAP 2019. How cool is that ? I just graduated in May and three months later, I am revisiting my college as a recruiter. Yup! Let’s meet in the interview.
No hierarchy 😎 – we don’t address anyone as ‘ sir ’ instead we use the ‘ bro ’ code.
Flexible work hours ⏰ — although there isn’t a fixed time we usually work from 11 am to 6 pm and you also have an option to work from home.
Employee fitness and health 💪 — the company provides medical insurance to all its employees and also focuses on doing fitness activities/challenges. We also play football/cricket every Thursday.
Special days 🎉- We celebrate & do employee engagement activities on occasions like World Tug-of-war day / World Pizza day etc.,
*Free lunch *!! 🥗 🍴

Celebrating world Pizza day at Commutatus

Oh, wait!

I almost forgot to mention this. We also have Tiger in the office.

Fun-fact: Our Tiger got featured in Times of India.

Our beloved office cat 🐱- Tiger

Conclusion :

As mentioned earlier, this internship (The Arbor Program) has improved my skills a ton, both off the paper and on paper. It not only served as a positive learning experience but a resume builder as well. It’s just been 3 months since I officially graduated out of college and now I am a full-fledged React developer. I thank my team leader, CEO and all other people who assisted me in building a strong portfolio & develop my technical skills. Finally, I am proud to be part of the Commutatus family.

Team Commutatus at annual conference (ComCon)

How friendly are Single Page Applications to SEO?

Chandu — Thu, 08 Aug 2019 07:08:52 +0000

Are Single Page Applications still relevant in 2020?

SEO on Single Page Applications

Let’s start with the most popular JavaScript framework out there, REACT!

Single page applications built using React provide seamless user experience and incredible performance but come with a catch. Out of the box, SPAs are not SEO friendly which is a must when it comes to online presence. Search engine crawlers see a blank page because the website renders on the client side. The solution is to render the web page on the server. Knowing the pros and cons of client-side rendering versus server-side rendering can help you build the best application to suit your needs.

Let’s get to the past :

Travelling back to the history of web development, browsers would just send a request to server asking to load the page and the server would comply by sending back one or more simple files like a HTML/ CSS. When the browser receives them, they’re ready to be rendered and hence they’ll almost instantly appear on the screen. We named these simple pre-built websites static since they are hosted on file server which simply send files as they neither require any processing beforehand nor special hardware.

The modern web:

Today, if we want to build what’s known as a web application which is what people are talking about when they say web 2.0, we need something more dynamic with the advent of JavaScript frameworks like react and angular. Client-side rendered single page applications saw a huge spike in popularity year on year.

Single page applications growth over the years.

Overview of client-side rendered (CSR) — SPA’s :

In client-side rendering all codes like HTML, CSS , JavaScript and even images like SVG’s are sent in a single bundle. This bundling is done in advance with the help of a module bundler like webpack that resolves all external dependencies like libraries / imports and combines all the code into one single file which is then sent on the initial page load from server to client. In the case of react, the application is built initially and managed by something called the virtual DOM which monitors for changes and updates the page with JavaScript when necessary.

Now, is it possible to have multiple pages on a single page application ?

Yes. Routing between pages in a SPA is simulated with something called client-side routing using tools like react router. You can see the views and updated browser endpoints in the URL bar but the requests never reach the server. The big advantage of client-side rendering is that there is only one request to your server for loading the web page and thereby reducing the load on your server. Page to page navigation through client-side routing is very fast as everything is pre-loaded on initial page load. React comes client-side rendered out of the box with most of the documentation written for CSR. Finally the most popular react starter framework create react app is also client-side rendered by default.

How can CSR hurt your website ?

Consider a web app with many pages and a lot of JavaScript on each one of those pages. Loading the initial bundle, if it’s large can take a significant amount of time and make your site slow. It’s not surprising that with all the dependencies in your project, the bundle can reach upto two megabytes or more overtime.

Website speed for SEO

The solution :

Before you breakup with SPA’s , we can optimize our performance of single page apps by using server-side rendering with modern JavaScript frameworks. This form of server-side rendering loads each page in stages, reducing the time to first pixel by using a method called hydration. Under the hood it’s like a combination of the old-school static sites and client-side rendering where JavaScript will illustrate the DOM.

How does server-side rendering (SSR) work ?

The modern server-side rendering works in four different stages:

The client requests for a web page and plain markup files generated on the server are sent to the browser.
The browser then renders the markup without having any dynamic features like event listeners loaded.
The server sends JavaScript which might be a large bundle or a code split smaller bundle to the browser.
The page is finally hydrated in the browser with JavaScript making the DOM dynamic and responsive to user actions and data inputs.

In simple terms, SSR works by generating the mark-up in advance to reduce the time to first pixel as the user will see the fully rendered page. However it won’t be fully loaded until the actual javascript bundle downloads from the server. This whole process makes the perceived load time of the page much faster.

SEO in CSR vs SSR :

Search Engine Optimisation for CSR and SSR

The key advantage of server-side rendering is it’s implication for search engine optimisation or SEO. The Google web crawler or bot that ranks websites on Google search has notoriously had problems crawling client-side rendered applications which rely on JavaScript to generate their markup. With the server-side rendering you don’t have this problem as the markup page guarantees that you’re gonna have good SEO every time.

Ready for building a SSR app?

Before you start with the project, it’s better to know the downsides SSR has. The main one being server requests. At least one new server request happens for every page loaded. So 20 page loads will result in 20 separate requests although each one will be smaller. The good news about this is javascript shared between the pages will be reused and then page specific JavaScript will be sent in a separate bundle only when you load that page. This is commonly referred to as code splitting or lazy loading i.e., just the code you need for the current view.

Conclusion:

There are many ways to implement it from scratch with your existing react app but doing so is very time consuming and difficult to maintain. So, I suggest you to go with a lightweight framework called NEXT.JS for building server-rendered React applications because it offers tons of features you don’t get with create react app. Not only do you get server-side rendering without configuration but you also get lazy loading of modules, built in code splitting and a lot of different things that will boost the performance of your app. If you want to learn more about how to incorporate NEXT.JS in your projects please visit the official documentation here. Also do checkout the awesome E-commerce website Gehna that we built at Commutatus using NEXT.JS.

Gehna (E-commerce jewellery platform) built with ❤️ at Commutatus using NEXT.js

Bonus tips:

You can go a step further and improve your application’s google search rankings by following the best practices for SEO.

Structure the U-R-L

A semantic well defined URL improves the user experience and visibility on google search. This will boost your SEO as the keyword present in your title, description and URL of the page helps google determine relevance of the content for the term searched. For example having the keyword or name of the product in your url :

https://www.gehnaindia.com/product/ritzy-diamond-and-18k-gold-dangler-earrings

instead of having the product number or id in url as follows :

https://www.gehnaindia.com/product/82436

Tag your pages

Meta tags are invisible but make it easier for search engines to determine what your content is about and how relevant it is with the search term, thereby improving your SEO. Next JS provides you ‘next/head ‘ which can be used to set the meta title and meta description for the page. Example snippet would be :

import Head from 'next/head';

<Head>
 <title key="title">{props.title}</title> 
 <meta key="description" 
  name="description" 
  content={props.description} 
 />
</Head>

You also have an option to use next-seo that simplifies managing your SEO in Next.js projects.

Get it secured

Loading a website over HTTP impacts SEO in a negative way. Google gives priority to secure content loaded over HTTPS while ranking pages for a keyword. So it’s important to make sure that your site content and assets load over HTTPS for better search rankings and visibility.

https for better SEO

A map for the bot

Imagine yourself visiting a place without a map. You are very likely to get lost. It’s a similar story for web crawlers and bots that try to index the pages on your site. A simple directory or ‘sitemap’ that has the information regarding pages contained in the web application, makes it easier for the bots to understand the page hierarchy.

Sitemap helps the crawlers understand your website better

Don’t neglect images

Images and graphics play a crucial role for user experience on your website. But search engines crawlers can’t interpret images and the only way to overcome this is by using the ‘alt’ tags. Specifying proper alt tags on images helps the crawler index it for relevant search terms. For example, having alt tags on product photos in e-commerce site improves the store’s SEO.

Image with proper alt tags example.

<img src=”emerald-earrings.png” alt=”gold dangle earrings with emerald stones”>

If you find this article useful in improving SEO on single page applications , give an 👏 and leave a comment on - What improvements would you love to see in the upcoming frameworks for making them SEO friendly? I’d love to hear any thoughts on this topic 😋.

Heuristic Fragment matcher warning ! How to fix it?

Chandu — Thu, 16 May 2019 17:08:03 +0000

Heuristic Fragment matcher warning! How to fix it?

How to fix the heuristic fragment matcher warning in GraphQL Apollo client

Apollo client is widely used for managing data fetched via GraphQL and caching is one of the main features it offers. If you are using Unions or Fragments in GraphQL , by default the apollo client uses Heuristic Fragment matcher to map the fields(fragments).

heuristic fragment matching going on !

Why do you see it?

Before you freak out why this warning occurs, understand the fact that Apollo Client doesn’t know our GraphQL schema and hence it cannot accurately map the fragments. So this will end with the following warning on your console:

“You are using the simple (heuristic) fragment matcher, but your queries contain union or interface types. “

Error: You are using the simple (heuristic) fragment matcher, but your queries contain union or interface types.

Should you worry about this?

Heuristic fragment matcher works fine in some cases but Apollo Client will not verify the server response i.e., it doesn’t stop you from manually writing an invalid data into the store using writeQuery or updateQuery. So, it’s not ideal to ignore the warnings.

Thano’s Snap

Thano’s Snap! Make the warning disappear:

So, for this warning to go away, you can query the schema to get the required information about unions and interfaces. Thereafter, provide this knowledge to the InMemeoryCache of apollo client using the IntrospectionFragmentMatcher as described in the docs.

Step by step guide – using IntrospectionFragmentMatcher

Let’s see how we can make apollo client accurately map the fragments (unions & interfaces) and validate them before writing it to the store.

Step 1: Create the schemaQuery file

As the initial step, go to the project ‘ src ’ folder and create a file named schemaQuery.js and add the following code:

The above code, will query your schema and store it in fragmentTypes.json (This json file is created automatically, you don’t have to create it). However, you can change the creation path of the fragmentTypes.json file. Finally, remember to replace the api.example.com with your actual API server.

Step 2: Pass the fragmentTypes to InMemoryCache

Go to the file where you initialise apollo client cache and type in the following code :

import {IntrospectionFragmentMatcher} from 'apollo-cache-inmemory';

import introspectionQueryResultData from '../../../src/fragmentTypes.json';

const fragmentMatcher = new IntrospectionFragmentMatcher({

introspectionQueryResultData

});

Note: The path for fragmentTypes.json file needs to be the same as step 1.

Now, pass the fragmentMatcher with schema data to Apollo’s InMemoryCache as follows:

cache: new InMemoryCache({fragmentMatcher})

After you have added all the above code, your file should look something like this :

Step 3: Build and fetch the Schema object into fragmentTypes.json

Using node, in package.json set up a build script for querying the schema and writing it in fragmentTypes.json file. For example:

 "build-fragment” : “node src/schemaQuery.js”

Run “ npm run build-fragment ” and let the magic happen!

The fragmentTypes.json file gets created and all your schema information related to unions and interfaces are stored as an object.

Optional step : Set the schemaQuery.js script to run at build time

To introspect the server every time we build the project, it is recommended to run a parallel node thread for your “start” script in package.json as follows :

“start”: “ npm-run-all -p start-server build-fragment”,

“start-server”: “node server.js”,

“build-fragment”: “node src/schemaQuery.js”

Now, running “ npm run start ” will trigger both your node server and the schemaQuery script that we just added.

Watch the video below on How to Fix this Warning.

Conclusion

Hope you found this article helpful in getting rid of the heuristic fragment matcher warning. Checkout Educatly (student platform to explore over 1,50,000 study-abroad opportunities worldwide), where we used the IntrospectionFragmentMatcher to deal with heuristic fragment warnings caused by caching unions and interfaces.