In the modern world of decision-making, you often stumble upon situations that makes you question the fine line between transparency and compassion. Well there is a term for this - "𝗕𝗲𝗻𝗲𝘃𝗼𝗹𝗲𝗻𝘁 𝗗𝗲𝗰𝗲𝗽𝘁𝗶𝗼𝗻"

It is basically the idea of withholding or distorting information with the intention of protecting the people you care for from harm or discomfort. For example, a doctor telling a very sick patient that they'll get better, even if that's not likely, to make the patient feel more hopeful and less scared.

or the CEO of a startup in crisis, may reassure the team of a solid recovery plan, even when the situation is dire, to boost morale and motivation. This whole deception as a concept has its fair share of ups and downs:

The ups 😇 

1️⃣ 𝗣𝗿𝗼𝘁𝗲𝗰𝘁𝗶𝗻𝗴 𝗳𝗲𝗲𝗹𝗶𝗻𝗴𝘀: truth sometimes can be emotionally crushing. Benevolent deception can shield people you care for from unnecessary pain, preserving their morale and mental well-being.

2️⃣ 𝗖𝗼𝗻𝗳𝗶𝗱𝗲𝗻𝘁𝗶𝗮𝗹𝗶𝘁𝘆: in situations where diving into all the facts is not possible, benevolent deception can help maintain trust and protect sensitive information.

3️⃣ 𝗡𝘂𝗿𝘁𝘂𝗿𝗶𝗻𝗴 𝗵𝗼𝗽𝗲: by sugar-coating certain realities, you can inspire your teams and keep them motivated in the time of hard situations.

The downs 😓

1️⃣ 𝗧𝗿𝘂𝘁𝗵 𝗲𝘃𝗮𝘀𝗶𝗼𝗻: it's tricky because there's a super thin line between not revealing the complete truth and misleading/avoiding the truth entirely which can lead to misunderstanding and wrong decision making.

2️⃣ 𝗘𝘃𝗼𝗹𝘃𝗲𝗺𝗲𝗻𝘁: shielding people from uncomfortable truths might hinder their progression by not giving them valuable learning experiences, fostering false confidence, and potentially causing stagnation too sometimes.

3️⃣ 𝗘𝗿𝗼𝗱𝗶𝗻𝗴 𝘁𝗿𝘂𝘀𝘁: it can can damage trust when the truth eventually surfaces. People may then become skeptical and lose their trust, feeling let down.

Here is my personal reflection of the whole concept from experiences:

There is no straightforward answer here and it's always going to be a delicate balancing act, a constant challenge of weighing the potential consequences, the impact on relationships, and the emotional well-being of those involved. I've realized the importance to have honest conversations & build trust with others because it's crucial to know when keeping information to protect someone is a kind act and when it could turn into a well-meaning but mistaken way of avoiding the truth.

TL;DR - it is a nuanced concept that has taught me the importance of empathy and thoughtful communication.

To Tell or Not To Tell? The Benevolent deception

As we move further into the 21st century, it's easy to get caught up in the excitement of all the new technologies and innovations that seem to be popping up every day. 

I mean, just look at all the cool stuff we have now - virtual reality, drones, self-driving cars, renewable energy sources. It's almost like every day brings something new and exciting 🤩. 

But have you ever stopped to think about where these technologies come from, and how they have evolved over time? It's fascinating to draw parallels with these technologies to something that existed in the ancient times.

🚘 𝗦𝗲𝗹𝗳 𝗱𝗿𝗶𝘃𝗶𝗻𝗴 𝗰𝗮𝗿𝘀

The use of horses or other animals to pull carts or carriages can be seen as a primitive form of autonomous transportation, as the animals were able to follow commands or take a predetermined path without direct human control.

👀 𝗩𝗶𝗿𝘁𝘂𝗮𝗹 𝗿𝗲𝗮𝗹𝗶𝘁𝘆

The ancient Greeks and Romans used large circular paintings that were mounted on the walls of special buildings called "panorama rotundas." Viewers could stand in the center of the rotunda and look around at the painting, which created the illusion of being transported to another location.

🚁 𝗦𝘂𝗿𝘃𝗲𝗶𝗹𝗹𝗮𝗻𝗰𝗲 𝗱𝗿𝗼𝗻𝗲𝘀

Historical Chinese records show, kites that were large in size were used for military purposes. Some were powerful enough to carry men up in the air to observe enemy movements, and others were used to signal messages over hostile forces.

📦 𝗔𝘂𝘁𝗼𝗻𝗼𝗺𝗼𝘂𝘀 𝗱𝗿𝗼𝗻𝗲 𝗱𝗲𝗹𝗶𝘃𝗲𝗿𝗶𝗲𝘀

Thousands of years ago, homing pigeons were used by the ancient Egyptians, Greeks, and Romans to carry messages and small documents across empires. Today we have GPS but pigeons used natural ability to navigate using the sun, the earth's magnetic field, and other cues.

♾️ 𝗛𝘆𝗽𝗲𝗿𝗹𝗼𝗼𝗽 (𝘁𝘂𝗻𝗻𝗲𝗹𝘀)

The use of underground tunnels has a long history, multiple kingdoms from the past we know have already used underground passages as a way to enable secret and fast mobility for moving people or goods without being detected. Here we are once again looking at underground transportation systems as a solution to some of the challenges we face today.

What other examples can you think of where modern technologies have connections to the ancient past?

#ancientwisdom #moderntechnology #inspiration 

How modern technologies have evolved from ancient roots?

I asked OpenAI’s ChatGPT bot to write a LinkedIn post for itself and this is what it gave me 👇
.
.

GPT-3 (short for "Generative Pretrained Transformer 3") is a large-scale language generation model developed by OpenAI. It has 175 billion parameters, making it one of the largest language models ever trained.

GPT-3 has the ability to generate human-like text in a variety of styles and formats, including natural language, code, and structured data. This allows it to perform a wide range of language tasks, from answering questions and generating summaries to translating languages and creating original content.

One of the key advantages of GPT-3 is its ability to learn from large amounts of unstructured data. This allows it to learn the nuances of natural language and generate more human-like text than previous language models.

GPT-3 has been used in a number of applications, including chatbots, personalized content generation, and automatic translation. Some of the most impressive examples of GPT-3 in action include a chatbot that can hold natural conversations with users and a system that can generate human-like text from just a few words of input.

Despite its impressive capabilities, GPT-3 has also faced criticism for its potential to generate biased or offensive text. In response, OpenAI has implemented a number of measures to prevent the model from generating harmful content, including training it on a diverse range of data and using human review to filter out inappropriate text.

Overall, GPT-3 is an exciting development in the field of natural language processing and has the potential to revolutionize the way we interact with machines. It remains to be seen how the technology will be used in the future, but it is certain to have a major impact on a wide range of industries and applications.

#openai #gpt3 #chatgpt #chatbot

Img rights: OpenAI

What happens when you ask ChatGPT to write about itself?

I recently got intrigued by launch of Defy by Pravaig Dynamics👇

While the product was still a prototype and not the final production version, the company’s story and journey for over a decade was quite interesting 🤔

⏳So it all dates back to 2011 when Siddhartha Bagri & Dhawal Khullar were looking out for an off-roading car with high performance & they couldn’t find anything in the market

🔥 What do car enthusiasts generally do? Settle with the closest car and modify it right? But guess what the two folks decided to do. Yes! they went ahead and built an off roading car from scratch themselves, which turned into a company we know today Pravaig Dynamics

🛠️ Their first off-roading car was named Abiogenesis and they continued optimising it & built other prototypes with better aerodynamics and durability which eventually lead to Protodonata & T-Rex variants

⚡️With these learnings over the years they went on to build their first EV with completely in-house components & batteries. There is also news on out there that they have also developed & supplied portable battery packs for European armed forces for using it on battle field.

Interesting plot twists already isn’t it? Wait until you read the business model that Pravaig wants to operate in

💰Instead of building a product and selling it to end customers, they want to lease it out to fleet operators like Ola & Uber under a monthly subscription cost and provide the customers a luxury commute experience with great comfort.

- roughly a consumer car spends about 96% of its lifetime idle in a garage. The value of a car & resources put into building it is not being utilised to its fullest.

- to save customer’s money (upfront/maintenance) and time (driving/time spent in traffic)

🙄 Ok but then what about the recent Defy SUV unveil?

This is a bit contradictory to their initial plans of going against car ownership in India. Considering the limited units, they might be a up for taking a similar approach like the Tesla roadster to top-up their balance for further using those funds to build more affordable cars & eventually be able to execute their actual plan.

Similar to how Tesla went onto build a multitude of EV solutions like cars/semi/solar, I think Pravaig dynamics will also evolve into a company that solves for customer’s mobility through various means like leveraging AI to operate self drive fleet and not just build EV cars.

It’s quite fascinating on various turns the company has taken over the past 10 years to stay afloat for creating an impact. In the recent unveil they showcased another durability focused electric vehicle called Pravaig Veer which will be used by Indian defence forces as well.

What do you think? Will the internet claims of Pravaig being the Indian Tesla turn out true?

Made in India EV - Defy by Pravaig dynamics

It is an ambitious initiative by Jack Dorsey (ex-CEO Twitter) to decentralise social media and build a protocol that can stand against the government censorships and moderations done by a single entity.

📝. In simpler terms - Today, millions of apps run on top of Android OS. Similarly, Bluesky aims to be an open-source platform where multiple social media apps could run independently without any central governance and Twitter just being one app on the platform. 

𝗪𝗵𝗮𝘁 𝗱𝗼𝗲𝘀 𝘁𝗵𝗶𝘀 𝗺𝗲𝗮𝗻 𝘁𝗼 𝘂𝘀𝗲𝗿𝘀?

Imagine tens and thousands of social communities built on top of this protocol with different news feed recommendation algorithms, brand new interfaces and more while still making the content posted on one app available to all other apps in the network as everything is decentralised.

Yes, this would absolutely be possible as apps will follow certain guidelines and protocol standards while being built on Bluesky. A system like this will enable communities to decide their own terms like which content and users to allow or ban from the platform.

𝗪𝗵𝗲𝗻 𝗱𝗶𝗱 𝘁𝗵𝗶𝘀 𝗮𝗹𝗹 𝘀𝘁𝗮𝗿𝘁?

The Bluesky initiative was announced back in December 2019 and Parag Agrawal (then CTO, now CEO Twitter) was appointed to find a lead who can steer the entire initiative forward. A small group of 5 open source architects, engineers and designers were funded by Twitter to kick start the project and find existing decentralised solutions that can be scaled or build a completely new one from scratch.

𝗧𝘄𝗶𝘁𝘁𝗲𝗿 𝗼𝘂𝘁𝗹𝗶𝗻𝗲𝗱 𝟯 𝗳𝗼𝗰𝘂𝘀 𝗮𝗿𝗲𝗮𝘀 𝗮𝘀 𝗴𝗼𝗮𝗹𝘀 𝗳𝗼𝗿 𝘁𝗵𝗲 𝗽𝗿𝗼𝗷𝗲𝗰𝘁 𝗕𝗹𝘂𝗲𝗦𝗸𝘆 𝘁𝗼 𝗮𝗱𝗱𝗿𝗲𝘀𝘀:

1️⃣ To facilitate enhanced efforts to address abuse and misleading information

2️⃣. To enable users and the broader community to have more input into platform algorithms

3️⃣. To improve conversational health by giving people more input into platform rules

𝗥𝗲𝗰𝗲𝗻𝘁 𝗮𝗻𝗻𝗼𝘂𝗻𝗰𝗲𝗺𝗲𝗻𝘁𝘀:

In August 2021, Twitter announced that Jay Graber (founder of decentralized social platform Happening), will be leading the BlueSky initiative while Twitter will continue to fund it. Earlier this year she has published a broader vision of how the BlueSky - decentralised social ecosystem should be and is currently in the process of making the project come to life.

While the entire project is still in the early development stages and could take a few more years to get into proper shape, it'll be interesting to wait and see if BlueSky becomes a standard protocol for all decentralised social media apps in the future.

Do you think a protocol like BlueSky (by decentralising social media) will help solve existing problems like hate speech and violence online or add more fuel to it as there is no central entity to moderate the content? 

#twitter #bluesky #decentralization #socialmedia

Have you heard of Twitter's BlueSky project?

Are you happy in life? I wish there was a metric we can look at and say that we're x% happy in life but we know there can't be one. Why? Simply because people think about their happiness, and it is a very subjective one that can't be generalised to a wider audience.

So how do we answer this question? Yesterday I came across a framework that originated from Japan called the "𝐢𝐤𝐢𝐠𝐚𝐢" - which translates to "purpose of life". Everything that you do in life is broadly classified into 𝟰 𝗾𝘂𝗮𝗱𝗿𝗮𝗻𝘁𝘀.

❤️ 𝗬𝗼𝘂 𝗹𝗼𝘃𝗲 𝗱𝗼𝗶𝗻𝗴 𝗶𝘁

For example, you love travelling and meeting new people. You do this because you get pleasure & satisfaction out of it.

🏆 𝗬𝗼𝘂'𝗿𝗲 𝗴𝗼𝗼𝗱 𝗮𝘁 𝗶𝘁

For example, you can be good at coding due to your experience in tech and practice. You do this because you've mastered a skill and perform better than others in it.

💰 𝗬𝗼𝘂 𝗴𝗲𝘁 𝗽𝗮𝗶𝗱 𝗳𝗼𝗿 𝗶𝘁

For example, the job that you do or anything that helps you pay the bills. Basically, these are the things that earn you money. 

🌎 𝗧𝗵𝗲 𝘄𝗼𝗿𝗹𝗱 𝗻𝗲𝗲𝗱𝘀 𝗶𝘁

For example, showing love and compassion towards animals or donating to a cause. You do this so that others around you are happy and you win as a whole.

When you are in a stage of life where you are doing things that check off all the above four, that means you've found your "𝐢𝐤𝐢𝐠𝐚𝐢" i.e., the purpose of your life.

I've always felt something missing from my life but didn't know how to fulfil it. At least now, when I see the world through the lens of ikigai, I know what quadrants I should be chasing after & focus to find the purpose of my life and live happily.

#ikigai #lifeadvice #lifeandhealth #happinesss

Today was crazy! Bhavish Aggarwal just revealed the hyped Ola Electric S1 scooters and here is why I think it is a great product taking a leap into the future 👇

While the company advertised it to have the best in class performance of 0-40kmph in 3 seconds, top speed of 115kmph and a driving range of 190km on a single charge, I was even more excited for the futuristic features they've added to the product.

Two-wheelers have always been a bit of a pain when riding for long distances as you need to hold the throttle at the same position, constantly applying pressure on your wrist. Although this feature has been there in cars for over a century and recently in high-end superbikes, getting this feature to the mass market is really crazy. 

Nothing very fancy in this feature right? We've known it for so long and companies like Bounce have made the ride-sharing experience keyless already with mobile app-based unlock. But, the crazy part is the OLA scooter has proximity sensors that'll sense when you are near and automatically unlocks with a greeting "Hi, Bhavish" and locks itself when you walk away.

Well, now you can party on the roads with a two-wheeler. You don't need to pack your Bluetooth speakers when you're going on a road trip. This also doubles up to provide engine feedback to match the sounds of a real petrol engine.

Just say "Hey OLA!" and the scooter listens to you. This just makes the riding experience completely hassle-free. You can take calls, navigate to a location and play music without even touching anything.

We all love personalization in everything we buy. When you think of what you can personalise in the S1, it's not just the exterior colour but even the instrument cluster can be customised to match your mood - bolt, care, vintage, modern. This is just like changing your phone's theme. You also get options to change how your vehicle sounds when you're driving from a plethora of Indian instruments. Last but not least, widgets like maps, speed, music player etc.,

We all know how the Netflix account is used, right? Each person will have their own taste and want the content to be personalised for them. This is where profiles came into play - one product, multiple users. I think introducing this feature into the OLA scooter was a genius move. Scooters are shared by family members or your friends and having these profiles can come in real handy. You can set max speed limits, geo area and time limits for each profile and worry less.

All these high-end features on a scooter for about 1-1.25L is just insane. Now, with a new OLA electric scooter planned to be manufactured every 2 seconds, this is called a true revolution at scale! 

Why S1 by Ola electric is a great product?

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.

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.

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 mainly comprises of two things — Atoms and Selectors.

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.

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.

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

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

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 🤩.

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.

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.

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.

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.

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.

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 drop me a message in chat on — What features would you love to see in Recoil? I’d love to hear any thoughts on this topic 😋.

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

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.

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.

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.

You can check out their widget and badges offerings here.

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:

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.

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.

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:

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:

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:

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.

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.

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.

15 Trust badges from top B2B Services Review Platforms in 2020

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:

Email from Vercel’s CEO (Formerly Zeit):

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.

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.

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.

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.

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

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 😋.

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

E-Commerce is a growing industry that offers convenience to shop online. According to research, visual content gives 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, which 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.

How to serve images without compromising the site performance?

With the advancement in web technologies, we 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 is a new format 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.

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.

Here are two techniques I have discovered to overcome the problem -

Make changes on the user-facing platform by using a <picture> 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 are 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.

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 remodelling.

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

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

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

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

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.

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 😋

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

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.

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.

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.

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

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

Step 6: Choose Web server environment and click select.

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.

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:

language: node_js
node_js:
 - "11.6.0"
branches:
  only:
  - staging
  - master
deploy:
  - provider: elasticbeanstalk
    access_key_id: ${AWS_ACCESS_KEY_ID}
    secret_access_key: ${AWS_SECRET_ACCESS_KEY}
    region: "ap-south-1"       
    app: "next-app"                     
    env: "next-app-staging"                     
    bucket_name: ${AWS_S3_BUCKET} 
    on:
      branch: "staging"

  - provider: elasticbeanstalk
    access_key_id: ${AWS_ACCESS_KEY_ID}
    secret_access_key: ${AWS_SECRET_ACCESS_KEY}
    region: "ap-south-1"       
    app: "next-app"                     
    env: "next-app-production"                     
    bucket_name: ${AWS_S3_BUCKET}
    on:
      branch: "master"

after_deploy:
  - echo "Application Deployed!"

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.

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:

"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 installscript:
 - 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:

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.