For example, a streaming giant like Netflix handles millions of requests per second. Managing such a massive infrastructure can be daunting and resource-intensive. However, Netflix realized the transformative power of going serverless with AWS. By leveraging serverless architecture, they were able to offload the burden of infrastructure management and focus on delivering an exceptional streaming experience. This move allowed them to scale seamlessly and optimize costs, leading to improved performance and user satisfaction.

In this article, we will explore the pros and cons of serverless architecture. We will point out the benefits it offers, such as effortless scalability, reduced operational overhead, and pay-per-use pricing models. Also, we will address the potential challenges and limitations, including vendor lock-in, cold start latency, and restricted control over the underlying infrastructure. By examining both sides of the serverless coin, we aim to provide valuable insights that will empower software developers and architects to make informed decisions when considering serverless architecture for their projects.

Prerequisites

Before diving into the pros and cons of serverless architecture, it is essential to have a basic understanding of cloud computing and its relationship to serverless computing.

To grasp the concept of serverless architecture, two fundamental components need to be understood: Function as a Service (FaaS) and Backend as a Service (BaaS). Here are the key points:

• Function as a Service (FaaS): FaaS is a cloud computing model where developers write code in the form of individual functions that run in response to specific events or triggers.
  These functions are short-lived and stateless, executing only when required, and scaling automatically based on the incoming workload.
  Examples of FaaS platforms include AWS Lambda, Azure Functions, and Google Cloud Functions.

• Backend as a Service (BaaS): BaaS is a cloud computing service that provides pre-built backend functionalities for applications, such as databases, user authentication, and push notifications.
  This allows developers to focus on the front end and application logic, offloading backend infrastructure management to the BaaS provider.
  BaaS platforms include Firebase, AWS Amplify, and Azure Mobile Apps.

What is Serverless Architecture

Serverless architecture, also known as Function as a Service (FaaS), is a revolutionary approach to cloud computing that simplifies the development and deployment of applications such that developers can focus solely on writing code for individual functionalities, which are triggered by specific events or requests. These functions execute in a stateless and ephemeral environment, scaling automatically to accommodate workload fluctuations.

By adopting a serverless architecture, developers can shift their attention from managing servers to crafting efficient and scalable code. The underlying infrastructure, including server provisioning, scaling, and maintenance, is abstracted away by the cloud provider. This allows developers to focus on delivering business value and accelerating the development process.

We can use the illustration below to visualize the structure of a serverless architecture.

In this diagram, the client (browser) interacts with various components of the serverless architecture. The Authentication service handles user authentication and authorization. The API gateway acts as a bridge between the client and other serverless functions such as the Purchase function and the Search function which are triggered by specific events. The Purchase function communicates with the Purchase database to process purchase requests, while the Search function interacts with the Product database to fetch relevant information. This decoupled and event-driven nature of serverless architecture enables flexible and scalable application development.

Pros of Serverless Architecture

Serverless architecture offers numerous benefits that make it an attractive choice for software development projects. Here are the key advantages of adopting a serverless architecture:

• Scalability: Serverless architecture excels in handling variable workloads. With traditional architectures, scaling infrastructure to accommodate fluctuating demand can be challenging and time-consuming. In contrast, serverless platforms automatically scale the execution environment based on the incoming workload. This elastic scalability ensures that applications can handle sudden spikes in traffic without compromising performance or incurring additional costs.

• Automatic Scaling: Serverless platforms automatically handle the scaling of resources based on demand. As the workload increases, additional instances of functions are provisioned to handle the increased traffic. Conversely, during periods of low or no traffic, the platform automatically scales down resources, ensuring optimal resource allocation and cost savings. This automatic scaling feature simplifies capacity planning and eliminates the need for manual intervention.

• Reduced Infrastructure Management: Serverless architecture eliminates the need for developers to manage servers or worry about infrastructure provisioning and maintenance. This frees up valuable time and resources that can be redirected towards focusing on core application logic and business functionality. Developers can simply focus on writing and deploying functions, allowing for greater agility and faster time-to-market.

• Cost Optimization: One of the significant advantages of serverless architecture is its cost-effectiveness. With traditional infrastructure, developers need to anticipate and provision resources to handle peak loads, which can lead to underutilization and unnecessary expenses during periods of low demand. In a serverless model, developers only pay for the actual execution time of their functions, resulting in cost savings and improved cost efficiency.

These advantages enable organizations to build efficient and scalable applications while focusing on delivering value to their users.

Cons of Serverless Architecture

While serverless architecture offers many benefits, it is important to consider the potential drawbacks associated with it. Here are some of the key challenges that developers and organizations may face when using serverless architecture:

• Vendor Lock-In: One significant concern with serverless architecture is the risk of vendor lock-in. Each cloud provider offers its own serverless platform with unique features and limitations. Once an application is built on a specific serverless platform, it becomes tightly coupled to that provider's ecosystem. Moving to a different provider or transitioning to a different architecture can be complex and time-consuming. It is crucial to carefully evaluate the long-term implications of vendor lock-in and consider the portability of applications built on serverless platforms.

• Cold Start Latency: Serverless functions have an inherent startup time, known as cold start latency, which occurs when a function is invoked for the first time or after a period of inactivity. During cold starts, the serverless platform provisions resources and initializes the environment, which can introduce delays in application response time. While the subsequent invocations benefit from low latency, the initial latency may impact real-time or latency-sensitive applications. It is important to evaluate the specific use cases and performance requirements to determine the impact of cold start latency on the application's overall user experience.

• Limited Control Over Infrastructure: Serverless architectures abstract away much of the infrastructure management, providing simplicity and ease of use. However, this abstraction can also limit fine-grained control over the underlying infrastructure. Developers have less control over the underlying hardware, networking, and system-level configurations. Customization and fine-tuning may be restricted, which can be a concern for applications with specific performance, security, or compliance requirements. It is essential to assess the level of control needed for the application and evaluate whether serverless architecture aligns with those requirements.

It is crucial to weigh the benefits against the limitations and evaluate whether the trade-offs align with the specific needs and goals of the project.

Addressing Misconceptions

Serverless architecture has gained popularity, but it is not without its share of misconceptions. Let's address some common myths associated with serverless architecture:

1. **Myth: Serverless architecture is always cost-effective.

   Reality**: While serverless architecture can offer cost savings, it is not universally cost-effective in all scenarios. The pay-per-use pricing model can be advantageous for applications with variable workloads. However, for applications with consistently high traffic or long-running processes, a traditional infrastructure approach may be more cost-effective. It is crucial to analyze the specific requirements and usage patterns to determine the cost-effectiveness of serverless architecture.

2. **Myth: Serverless architecture always provides superior performance.

   Reality**: Serverless architecture offers automatic scaling and resource allocation, which can enhance performance for certain workloads. However, cold start latency and dependency on external services may introduce performance overhead. It is essential to assess the performance requirements of the application and evaluate whether serverless architecture aligns with those needs. Performance optimization techniques, such as function optimization and warm-up strategies, can help mitigate these concerns.

3. **Myth: Serverless architecture eliminates DevOps or infrastructure management.

   Reality:** While serverless architecture abstracts away much of the infrastructure management, it does not eliminate the need for DevOps entirely. DevOps practices, such as continuous integration and deployment, monitoring, and troubleshooting, are still crucial for managing and optimizing serverless applications. Additionally, understanding the underlying infrastructure and architecture remains important for effective development and debugging.

By busting these misconceptions and understanding the reality, we can start making informed decisions about adopting serverless architecture. It is crucial to consider the specific requirements, challenges, and trade-offs associated with serverless architecture to determine its suitability for the intended use cases.

Top Serverless Architecture Providers

When considering serverless architecture, it's important to explore the top providers that offer the necessary infrastructure and services.

These providers specialize in delivering serverless capabilities, enabling developers to focus on writing code and building applications without the need to manage underlying servers. Here are some of the leading serverless architecture providers:

1. AWS Lambda: As part of Amazon Web Services (AWS), Lambda is a popular choice for serverless computing. It offers a wide range of integrations, scalability, and flexible pricing options. Lambda supports a variety of programming languages and provides seamless integration with other AWS services, making it a preferred choice for many developers.

2. Microsoft Azure Functions: Azure Functions is Microsoft's serverless computing offering. It provides a fully managed platform for running event-driven applications and supports multiple programming languages. With Azure Functions, developers can easily integrate with other Azure services and take advantage of Microsoft's extensive cloud ecosystem.

3. Google Cloud Functions: Google Cloud Functions allows developers to build and deploy serverless functions on the Google Cloud Platform. It supports multiple languages, provides automatic scaling, and integrates well with other Google Cloud services. Google Cloud Functions offers a reliable infrastructure and extensive monitoring capabilities.

4. IBM Cloud Functions: IBM Cloud Functions, based on the open-source Apache OpenWhisk project, provides a serverless computing platform that supports multiple programming languages. It offers seamless integration with other IBM Cloud services and provides flexible deployment options.

5. Cloudflare Workers: Cloudflare Workers is a serverless platform that runs JavaScript applications on Cloudflare's global network of edge servers. It enables developers to build serverless functions and deploy them close to the end-users, improving performance and reducing latency.

6. Netlify Functions: Netlify Functions is a serverless computing platform integrated with Netlify's static site hosting. It allows developers to create serverless functions using JavaScript or TypeScript, providing a seamless workflow for deploying serverless applications alongside static websites.

7. Vercel Functions: Vercel Functions, powered by the Next.js framework, is a serverless computing platform designed for modern frontend applications. It supports serverless functions written in Node.js, providing easy deployment and integration with Vercel's hosting platform.

Each provider has its own unique features, pricing models, and integrations, so it's important to evaluate and choose the one that best aligns with the specific requirements and goals of the project.

Real-World Use Cases and Success Stories

Serverless architecture has gained traction across various industries, with organizations leveraging its benefits to solve specific challenges and achieve notable outcomes. Here are some real-world use cases and success stories:

• Netflix: Netflix, the popular streaming platform, adopted serverless architecture to optimize its content encoding pipeline. By breaking down the encoding process into smaller functions, they achieved significant improvements in scalability, cost-efficiency, and reduced time-to-market for new features. Serverless allowed Netflix to handle fluctuating workloads efficiently, ensuring a seamless streaming experience for millions of users.

• Coca-Cola: Coca-Cola, the global beverage giant, implemented serverless architecture to enhance its marketing campaigns. By utilizing serverless functions, they developed interactive and personalized experiences for consumers, such as dynamic content delivery, targeted promotions, and real-time analytics. Serverless enabled Coca-Cola to handle high traffic volumes during campaign periods while keeping costs low and ensuring smooth user experiences.

• NASA: NASA, the space exploration agency, leveraged serverless architecture to process and analyze vast amounts of data from satellites and space missions. With serverless functions, they achieved scalable data processing, real-time event-driven workflows, and seamless integration with their existing infrastructure. Serverless allowed NASA to focus on scientific research and analysis, rather than managing complex server infrastructure.

• Airtable: Airtable, a collaborative work management platform, leveraged serverless functions to enable real-time collaboration and data synchronization across their user base. Serverless allowed them to handle concurrent requests efficiently and ensure data consistency without managing server infrastructure. This architecture choice contributed to improved user experience and seamless collaboration.

• Amazon Prime Video: While other organizations have succeeded using serverless infrastructure, the Video Quality Analysis (VQA) team at Prime Video initially used a distributed system architecture with serverless components such as AWS Step Functions and AWS Lambda which worked fine. However, they encountered scaling bottlenecks and high costs and needed to scale. To address these issues, they decided to rearchitect their infrastructure and migrate to a monolith application. In the new architecture, all components of the VQA service were packed into a single process. This allowed data transfer to happen within the memory, reducing costs associated with passing video frames between components. By moving to a monolith application, the VQA team was able to reduce infrastructure costs by over 90% and increase scaling capabilities. They were able to handle thousands of streams and still had the capacity for further scaling.

These examples demonstrate how organizations have successfully leveraged serverless architecture to solve specific challenges and achieve remarkable results. Organizations have successfully utilized serverless to address scalability, cost optimization, real-time processing, and agility in delivering innovative solutions.

Conclusion

In conclusion, serverless architecture offers numerous advantages such as scalability, reduced infrastructure management, and automatic scaling, making it an attractive option for many organizations. However, it is crucial to also acknowledge the drawbacks, such as vendor lock-in, cold start latency, and limited control over the infrastructure.

As you evaluate whether serverless architecture is suitable for your projects, you should carefully consider the requirements, scalability needs, and resource constraints of the project. While serverless architecture may not be a one-size-fits-all solution, it can be a powerful tool in the right context. By understanding the trade-offs and conducting proper due diligence, developers and businesses can harness the benefits of serverless architecture while mitigating its limitations.

Ultimately, the decision to go serverless should be based on a thorough analysis of the specific project requirements and goals. By considering the pros and cons discussed in this article, readers can make informed decisions that align with their objectives, optimize resource usage, and drive innovation in their software development.

As a startup founder or CTO who is eager to bring an innovative idea to life, you have a talented team, a solid business plan, and the drive to succeed. But before you can start building your product, you're faced with a critical decision: choosing the right programming language and framework for your startup. This choice is crucial because it will not only impact your team's productivity and the quality of your product but also determine how quickly you can bring your idea to market and scale your business.

Selecting the ideal programming language and framework can be a daunting task, especially with the ever-growing number of options available in the technology landscape. Startup founders, CTOs, and developers often struggle to find the perfect fit for their specific needs, taking into account factors such as team expertise, time to market, and long-term scalability.

This article aims to guide you through the process of choosing the best language and framework for your startup, providing expert advice and insights tailored to your unique requirements. We will delve into the essential selection criteria, including team strength, industry standards, and trends while comparing popular frontend, backend, and mobile app development technologies. Additionally, we will touch on blockchain development languages and frameworks and explore the challenges of migrating between technologies, should the need arise.

By the end of this article, you will have a comprehensive understanding of the key factors to consider when choosing a programming language and framework, empowering you to make informed decisions that set your startup on the path to success.

Prerequisite

Before diving into the process of selecting the ideal programming language and framework for your startup, it's essential to have a solid foundation in some key concepts. This article assumes that you have a basic understanding of programming languages and frameworks, as well as familiarity with software development processes. If you're new to these topics, we recommend brushing up on the following areas:

1. Programming languages: Grasp the fundamental concepts of programming languages, such as syntax, data types, control structures, and object-oriented programming. Being familiar with popular languages like Python, JavaScript, Java, and Ruby will be beneficial when comparing different options.

2. Frameworks: Understand the role of frameworks in software development and how they simplify and speed up the development process by providing reusable code, libraries, and tools. Learn about some of the widely-used frameworks, such as Django for Python, Ruby on Rails for Ruby, or Angular for JavaScript.

3. Software development concepts: Familiarize yourself with essential software development concepts like version control, software architecture, design patterns, and testing. This will help you appreciate the benefits and drawbacks of various languages and frameworks in different development scenarios.

4. Web and mobile app development: Gain a basic understanding of frontend and backend development for web applications and the process of creating mobile apps. This knowledge will be valuable when comparing languages and frameworks specifically designed for these platforms.

5. Development methodologies: Be aware of common development methodologies like Agile, Scrum, and DevOps, as they can influence the choice of language and framework to some extent.

By having a foundational understanding of these topics, you'll be better equipped to make informed decisions when choosing the best programming language and framework for your startup. This article is designed to be comprehensive and accessible for all experience levels, so don't worry if you're not an expert—our goal is to provide you with the practical advice you need to succeed.

What Are Languages And Frameworks?

To make informed decisions about the best programming language and framework for your startup, it's essential to understand what these terms mean and the roles they play in software development. Let’s take a closer look.

Programming languages

A programming language is a set of instructions, commands, and syntax used to create software programs. Developers write code in a programming language to communicate with computers and instruct them on how to perform specific tasks. There are numerous programming languages, each with its strengths and weaknesses, and they can be broadly classified into high-level languages (e.g., Python, JavaScript, Java, Ruby) and low-level languages (e.g., C, C++, Assembly). High-level languages are more human-readable and easier to learn, while low-level languages offer greater control over hardware and are often used for system-level programming.

Frameworks

A framework is a collection of pre-written code libraries, tools, and templates that simplifies and accelerates software development by providing a structure and reusable components. Frameworks are designed for specific programming languages(e.g., Django for Python, Angular for JavaScript) and help developers adhere to best practices while reducing the amount of repetitive code they need to write. By using a framework, developers can focus more on implementing unique features and functionality of their applications rather than reinventing the wheel.

Differences between languages and frameworks

While programming languages provide the fundamental building blocks for creating software, frameworks offer a structured environment and tools to streamline the development process. The choice of programming language determines the syntax and core features available to developers, while the framework dictates the development workflow, design patterns, and overall structure of the project. It's essential to understand that a framework is built on top of a programming language and cannot exist independently. Hence, choosing the right programming language and framework combination is crucial for efficient software development.

What Are The Selection Criteria?

When choosing the right programming language and framework for your startup, several crucial factors come into play. By considering the following selection criteria, you'll be better equipped to make an informed decision that best suits your project's unique needs:

1. Team strength: The skills and expertise of your development team play a significant role in determining the best technology choice. Evaluate your team's proficiency in various programming languages and frameworks, taking into account their learning curve and the potential need for additional training or hiring new talent.

2. Time to market: In the competitive startup landscape, getting your product to market quickly is essential. Consider the development and deployment speed offered by different languages and frameworks, including their learning curve, the ease of setting up a development environment, and the availability of pre-built modules and components.

3. Open-source resources: The presence of a robust open-source ecosystem can be a game-changer for startups. Assess the availability of open-source tools, libraries, and community support for each language and framework under consideration. Open-source resources can significantly reduce development time and costs while providing access to a wealth of knowledge and expertise.

4. Industry standards and trends: Analyze popular choices within your industry, as they can offer valuable insights into what works best for your specific use case. Staying aligned with industry trends can make it easier to find skilled developers, integrate with other tools and services, and receive community support.

5. Scalability: As your startup grows, so will your technical requirements. Ensure that the chosen language and framework can support the growth of your business by evaluating their performance, ability to handle increasing loads, and ease of maintaining and updating the codebase.

These selection criteria will guide you to choose the programming language and framework that best align with your startup's goals, resources, and technical requirements, setting the stage for your success in the competitive market.

Frontend Web Development Languages And Frameworks

Frontend web development focuses on creating the user interface and user experience of a web application. It involves designing the layout, visuals, and interactivity of a website or web app. When choosing frontend languages and frameworks for your startup, consider the following popular options and their best use cases:

Popular frontend languages:

• HTML (HyperText Markup Language): A markup language used to structure content on the web, HTML is essential for creating the basic layout of web pages. It's typically combined with CSS and JavaScript for styling and interactivity.

• CSS (Cascading Style Sheets): A stylesheet language used for describing the look and formatting of a document written in HTML, CSS is responsible for the visual appearance of web pages, including layout, colors, and typography.

• JavaScript: A versatile programming language used for adding interactivity to web pages, JavaScript can manipulate HTML and CSS, enabling dynamic content and responsive designs. It can be used with TypeScript for improved type safety and maintainability.

• TypeScript: A superset of JavaScript that adds optional static typing, TypeScript can catch errors at compile time, making it easier to maintain and scale large codebases. It's often used in conjunction with popular front-end frameworks.

Popular frontend frameworks:

• React: Developed by Facebook, React is a popular JavaScript library for building user interfaces. It uses a component-based architecture and a virtual DOM for optimized performance. React can be combined with Redux for state management and works well with TypeScript.

• Angular: A comprehensive framework developed by Google, Angular uses TypeScript as its primary language and offers a complete solution for building large-scale web applications, including dependency injection, routing, and form validation.

• Vue.js: A lightweight and flexible JavaScript framework, Vue.js is easy to learn and integrates well with existing projects. Its component-based architecture and reactive data binding make it ideal for building modern user interfaces.

• Svelte: A newer, compiler-based JavaScript framework, Svelte shifts the work from runtime to compile time, resulting in faster performance and smaller bundle sizes. It's an excellent choice for startups focused on performance optimization.

• Nuxt.js: A framework built on top of Vue.js that helps you create server-side rendered (SSR) and statically generated applications. It provides a convention-based setup and allows you to quickly scaffold a Vue.js application with server-side rendering capabilities. Nuxt.js simplifies the development of universal or isomorphic Vue.js applications and offers features like automatic routing, code splitting, and server-side rendering out of the box.

• Next.js: A framework for React that enables server-side rendering, static site generation, and client-side rendering all in one. It provides an opinionated setup for building modern web applications with React. Next.js offers features like server-side rendering (SSR), automatic code splitting, and API routes, making it suitable for building dynamic and performant web applications. It can be used with external servers or deployed as a standalone serverless application.

Based on your startup's specific needs, you can select the best combination that will deliver a seamless and engaging user experience for your web application.

Backend Web Development Languages And Frameworks

Backend web development focuses on server-side logic, data storage, and communication between the front end and back end. It is responsible for processing user requests, interacting with databases, and ensuring the overall performance and security of a web application. When selecting backend languages and frameworks for your startup, consider these popular options and their best use cases:

Popular backend languages:

• Python: A versatile, high-level programming language, Python is known for its readability, simplicity, and extensive library support. It's suitable for a wide range of applications, including web development, data analysis, and machine learning.

• Ruby: An object-oriented, dynamic programming language, Ruby is prized for its elegant syntax and readability. It's an excellent choice for startups focused on rapid web development and ease of use.

• Java: A widely used, platform-independent programming language, Java offers high performance, scalability, and extensive libraries. It's ideal for building large-scale enterprise applications and web services.

• JavaScript: Node.js is a JavaScript runtime built on Chrome's V8 engine. Node.js enables developers to write server-side code using JavaScript. It's well-suited for scalable and high-performance web applications, particularly when combined with popular front-end JavaScript frameworks.

• PHP: A popular server-side scripting language specifically designed for web development. It has a large user base and extensive community support. PHP is known for its simplicity, ease of integration with HTML, and compatibility with various databases. It's a good choice for startups focusing on building dynamic and database-driven websites or web applications.

• Go (GoLang): A statically typed, compiled programming language developed by Google. It emphasizes simplicity, performance, and concurrency. Go is well-suited for building scalable, efficient, and reliable server-side applications. It has a strong standard library and excellent support for concurrent programming, making it a good choice for high-performance web services and microservices architectures.

• Rust: A systems programming language that is known for its focus on memory safety, performance, and concurrency. It provides strong guarantees about memory management and has a strict compile-time checking system that prevents many common programming errors. Rust is often used for building highly reliable and secure backend systems, such as web servers and network services, where performance and safety are critical. Although it is usually recommended for most early-stage startups to use Rust (because it might affect the time to market).

• ASP.NET: A web development framework developed by Microsoft. It enables developers to build robust and scalable web applications using multiple programming languages, such as C# and Visual Basic. ASP.NET provides various tools, libraries, and frameworks for building web APIs, web services, and web applications. It is well-suited for developing enterprise-level applications and integrates well with other Microsoft technologies.

Popular backend frameworks:

• Django: A powerful Python web framework, Django follows the "batteries-included" philosophy, offering a comprehensive set of built-in features for rapid web development. It's known for its robustness, security, and scalability, making it an excellent choice for startups.

• Flask: A Python microframework that emphasizes simplicity and minimalism. It provides the basics for web development and allows developers to choose and integrate additional libraries based on their specific needs. Flask is lightweight and flexible, making it a popular choice for building small to medium-sized web applications.

• FastAPI: A modern, high-performance Python framework for building APIs with Python 3.7+ type hints. It combines the ease of use of Python with the speed of Node.js, making it a compelling choice for building robust and efficient backend APIs. FastAPI leverages asynchronous programming to provide excellent performance and is suitable for building microservices and high-performance web applications.

• Ruby on Rails: Often referred to as "Rails," this popular Ruby framework follows the "convention over configuration" paradigm, allowing for fast and efficient web development. Rails is particularly suitable for startups looking to build MVPs and prototypes quickly.

• Spring Boot: A Java-based framework, Spring Boot simplifies the creation of stand-alone, production-grade Spring applications. It offers a wide range of built-in features, including dependency injection, security, and data access, making it a powerful choice for enterprise-level applications.

• Express.js: A minimalist Node.js framework, Express.js simplifies the development of web applications and RESTful APIs using JavaScript. It's an excellent choice for developers already familiar with JavaScript and those seeking a unified language for both frontend and backend development.

• Laravel: A PHP web framework that is known for its elegance and expressive syntax. It follows the MVC (Model-View-Controller) pattern and provides a rich set of features for web application development, including routing, database ORM (Object-Relational Mapping), caching, and authentication. Laravel is widely used for building scalable and maintainable web applications.

• Symfony: A flexible and highly modular PHP framework that emphasizes code reusability and extensibility. It offers a wide range of components and tools to speed up development and ensure best practices. Symfony is suitable for both small and large-scale projects and provides excellent support for creating APIs.

• CodeIgniter: A lightweight PHP framework known for its simplicity and speed. It's easy to learn and offers a straightforward approach to building web applications. CodeIgniter has a small footprint and requires minimal configuration, making it a suitable choice for startups looking for a lightweight framework with good performance.

• Gin: A lightweight web framework for Go (GoLang). It offers a fast and efficient routing engine and provides essential middleware functionality. Gin is well-suited for building high-performance web applications and RESTful APIs in Go, with a focus on simplicity and minimalism.

• Echo: Another lightweight web framework for Go (GoLang) that emphasizes simplicity, performance, and productivity. It provides a straightforward API for building web applications and APIs and offers features like routing, middleware, and template rendering. Echo is a good choice for startups looking for a fast and flexible framework in Go.

• Fiber: A web framework for Go (GoLang) inspired by Express.js. It focuses on speed and efficiency, utilizing fast HTTP routing and middleware processing. Fiber offers an easy-to-use API for building web applications and APIs in Go, making it suitable for startups that prioritize performance and productivity.

• Actix: A high-performance, actor-based web framework for Rust. It provides a robust foundation for building concurrent and efficient web applications. Actix is known for its scalability, speed, and safety, making it suitable for building highly concurrent systems and network services.

• Rocket: A web framework for Rust that focuses on simplicity, ease of use, and developer productivity. It aims to provide a delightful web development experience while leveraging the performance and safety benefits of Rust. Rocket simplifies tasks like routing, request handling, and parameter parsing, making it an attractive choice for startups looking to build web applications in Rust.

Considering these backend web development languages and frameworks based on your startup's specific requirements will ensure that you select the most suitable combination to power the server-side logic and functionality of your web application. Resulting in efficient processing, secure data storage, and seamless communication between frontend and backend components.

Mobile App Development Languages And Frameworks

As mobile app usage continues to grow, startups must consider the right programming languages and frameworks for developing their apps. Let’s look at some popular mobile app development languages and frameworks to help you make an informed decision for your startup's needs.

Popular mobile app development languages:

• Dart: Dart is designed for building high-performance mobile, web, and server apps. Its best use case is creating cross-platform applications with a single codebase.

• Objective-C: An object-oriented programming language, Objective-C is a primary language for iOS development. It's known for its strong typing and dynamic runtime, best used for developing iOS and macOS applications.

• Swift: Developed by Apple, Swift is a powerful, easy-to-learn language for building iOS and macOS applications. It offers fast performance, strong typing, and modern syntax, making it an excellent choice for startups targeting the Apple ecosystem.

• Java: A universal, platform-independent programming language, Java is widely used for Android app development. Its broad library support, strong community, and proven reliability make it a popular choice for many startups.

• Kotlin: A more modern alternative to Java, Kotlin is fully interoperable with Java and has become a preferred language for Android app development. Its concise, expressive syntax and built-in safety features make it an attractive option for startups.

• C++: A highly efficient, general-purpose language, C++ is well-suited for resource-constrained environments, such as mobile app development, gaming, and embedded systems.

• JavaScript: When paired with the right frameworks like React Native, JavaScript enables cross-platform mobile app development, allowing developers to write code that works on multiple platforms.

• Python: Although not primarily a mobile app development language, Python can be used in combination with tools like Kivy or BeeWare to build cross-platform applications.

Popular mobile app development frameworks:

• React Native: Developed by Facebook, React Native is a popular framework for building cross-platform mobile apps using JavaScript and the React library. It allows developers to write native-like applications for iOS and Android with a single codebase, significantly reducing development time and cost for startups.

• Flutter: An open-source UI toolkit from Google, Flutter enables developers to create natively compiled, visually appealing mobile applications for iOS, Android, and other platforms using the Dart programming language. Its hot-reload feature and rich set of pre-built widgets make it a popular choice for fast, iterative development.

• Ionic: A hybrid mobile app development framework, Ionic combines web technologies like HTML, CSS, and JavaScript to create platform-independent applications. It's best used for creating simple, cost-effective apps that can be easily deployed across multiple platforms.

• Xamarin: A cross-platform mobile app development framework from Microsoft, Xamarin enables developers to build native iOS, Android, and Windows apps using a shared C# codebase. With access to native APIs and performance optimizations, Xamarin is an excellent choice for startups seeking to leverage the power and familiarity of the .NET ecosystem.

By evaluating these languages and frameworks, you can choose the right combination for your startup's specific requirements. Considering factors such as platform support, performance, and development efficiency will help ensure the success of your mobile app in the competitive marketplace.

Blockchain Development Languages And Frameworks

Choosing the right language and framework for blockchain development plays a crucial role in ensuring robustness, security, and efficiency. Let’s look at some popular blockchain development languages and frameworks to guide you in selecting the most suitable ones for your startup.

Popular blockchain development languages:

• Solidity: A contract-oriented language specifically designed for developing smart contracts on Ethereum. It is best used for creating decentralized applications (DApps) and custom tokens looking to leverage the power and popularity of the Ethereum network.

• Vyper: A security-focused language for writing Ethereum smart contracts. Vyper prioritizes simplicity and audibility, making it ideal for creating secure and easy-to-understand contracts.

• Rust: A fast, reliable, and safe systems language, Rust is becoming increasingly popular in the blockchain space. Its memory safety features make it suitable for creating secure, high-performance blockchain platforms.

• C++: As a high-performance language, C++ is used in the development of various blockchain platforms, such as Bitcoin and Ethereum. Its versatility and efficiency make it ideal for creating resource-intensive blockchain applications.

• C#: A popular language in the Microsoft ecosystem, C# is often used to build blockchain applications on platforms like Stratis and NEO.

• JavaScript: A versatile language used for various blockchain applications, JavaScript can be utilized for developing DApps and interacting with blockchain platforms through APIs and libraries.

• Python: Known for its simplicity and readability, Python is widely used for creating blockchain prototypes and interacting with blockchain networks.

• Golang: A modern language developed by Google, Golang offers excellent performance and simplicity. It is used for creating high-performance blockchain platforms like Cosmos and Tendermint.

• Java: A versatile and popular language, Java is used for developing blockchain applications on platforms like Corda and Hyperledger Fabric.

Although JavaScript, Python, Golang and Java were not designed specifically for blockchain, they have been used to write blockchain and smart contract code, primarily due to their versatility, large developer communities, and the availability of supporting libraries.

Popular blockchain development frameworks:

• Ethereum: The leading smart contract platform, Ethereum enables developers to create decentralized applications using Solidity or Vyper. It has a large developer community and extensive resources.

• Hyperledger Fabric: A permissioned, modular blockchain platform that supports smart contracts in multiple languages like JavaScript, Go, and Java. It is suitable for building private, enterprise-grade blockchain solutions.

• Hyperledger Sawtooth: A highly modular and scalable platform for building, deploying, and running distributed ledgers. Sawtooth supports smart contracts in various languages through its "Seth" framework.

• Corda: A permissioned, distributed ledger platform designed for finance and other industries. Corda supports smart contracts in Java and Kotlin and focuses on privacy and interoperability.

• Quorum: A permissioned, Ethereum-based blockchain platform tailored for enterprise use cases, offering enhanced privacy and performance. It supports Ethereum's smart contract languages, Solidity and Vyper.

• Hardhat: A JavaScript development environment and task runner for Ethereum, Hardhat simplifies smart contract development and testing. It is particularly useful for creating and deploying Solidity-based projects.

• Cosmos: A scalable, interoperable blockchain ecosystem built on Tendermint and powered by Golang. Cosmos enables developers to build custom, high-performance blockchains with a focus on interoperability.

When selecting a language and framework for blockchain development, consider your startup's specific needs, such as the desired network (permissioned vs permissionless), required transaction speed and privacy, and the language expertise of your development team. The right choice will enable you to leverage the transformative power of blockchain technology effectively.

Migrating Between Languages And Frameworks

Although startups generally aim to select the most suitable programming languages and frameworks at the outset, there might be scenarios where migration becomes necessary. This section discusses such scenarios, strategies for a smooth migration process, and potential risks and challenges associated with migration.

It might be necessary for a startup to consider migrating from one programming language or framework to another in scenarios such as:

• Business requirements change, necessitating the adoption of a more appropriate language or framework.

• A newer technology emerges, offering more efficient solutions, better performance, or enhanced scalability.

• An existing language or framework loses community support or deprecates, making maintenance and updates difficult.

When a startup encounters any of these scenarios, and they have come to a conclusion that migrating is necessary, here are some strategies that can be employed to effectively migrate from the current programming language or frameworks used to the new ones:

• Plan: Conduct thorough research to identify the best target language or framework for your startup's needs. Create a detailed migration plan, including timeframes, milestones, and resource allocation.

• Divide and Conquer: Break down the migration into smaller, manageable tasks. Focus on core functionality first and prioritize tasks based on their criticality.

• Backup Data: Ensure data integrity throughout the migration process by creating backups, validating data structures, and thoroughly testing data migration procedures.

• Train the Team: Provide necessary training for your development team to familiarize them with the new language or framework. This will ensure a smooth transition and reduce downtime.

• Continuous Integration and Deployment: Adopt CI/CD practices to monitor and catch errors early, ensuring the migration process remains on track.

Even while using the best strategies, there are some potential risks startups should look out for like:

• Codebase break: Migrating to a new language or framework might result in some features becoming inoperable. Thorough testing can help identify and resolve such issues.

• Technical debt: Migration can potentially create technical debt if not planned and executed correctly. Avoid shortcuts, and allocate adequate resources to address migration-related tasks.

• Downtime: Migrating to a new language or framework might cause downtime during deployment, impacting your users and business operations. Plan the migration carefully to minimize downtime and disruptions.

While migrating between languages and frameworks can be a complex undertaking, a well-planned and executed strategy can ensure a smooth transition and help your startup continue

Conclusion

In this article, we have explored the complex process of choosing the right programming language and framework for your startup. We discussed the importance of understanding frontend, backend, mobile app, and blockchain development languages and frameworks, along with their respective use cases. We also covered the selection criteria, such as team strength, time to market, open-source resources, industry standards, and scalability.

As you consider your options, remember that the choice of programming language and framework should align with your startup's specific needs and goals. This decision has long-term implications for your project's success, so it's crucial to thoroughly analyze your options before making a commitment.

Lastly, the world of technology is constantly evolving. It's vital to stay up-to-date with industry trends and regularly evaluate your chosen technology stack. This will ensure that your startup remains competitive, flexible, and ready to adapt to new challenges and opportunities.

Now it's time to take action – begin by researching different languages and frameworks, and consult with your team to make the best choice for your startup. Remember, the success of your business depends on building a solid foundation with the right technology stack.

In today's fast-paced digital world, businesses, from startups to enterprise-level organizations, need to improve their efficiency and speed to market. A crucial area that significantly impacts a company's ability to achieve this goal is the management of its IT infrastructure. This is where infrastructure automation comes into play - the process of automating the deployment, configuration, and management of infrastructure components, such as servers, networks, and storage.

By leveraging automation tools, companies can achieve a streamlined deployment process that is faster, more reliable, and less prone to errors. For example, consider a software development team that needs to deploy a new application to a production environment. With infrastructure automation, they can quickly and easily spin up new servers, configure the necessary networking components, and deploy the application - all without the need for manual intervention.

The benefits of infrastructure automation are clear - increased efficiency, faster time to market, and improved reliability. In this article, we will delve deeper into the topic of infrastructure automation, exploring the various tools and techniques available, as well as providing practical guidance on how to implement automation within your organization.

In this article, we will explore the benefits of infrastructure automation and provide a practical guide on how to implement it in your organization. We will discuss the prerequisites for implementing infrastructure automation, tools and technologies for automation, and best practices for successful implementation. By the end of this article, you will have a better understanding of infrastructure automation and how it can help your business achieve greater efficiency and productivity.

Prerequisite

To effectively follow through with this article, the prerequisites below are recommended:

• Basic knowledge of infrastructure and deployment processes: Before implementing infrastructure automation, it is important to have a basic understanding of how infrastructure works and the deployment process. This knowledge will help in identifying the areas of the deployment process that can be automated. It will also help in determining the best automation tools to use.

• Familiarity with configuration management tools: Configuration management tools are essential in implementing infrastructure automation. These tools are used to manage and automate the configuration of servers and other infrastructure components. Familiarity with these tools is necessary to effectively automate the deployment process. Some of the popular configuration management tools include Ansible, Chef, and Puppet.

• A clear understanding of the infrastructure components to be automated: A clear understanding of the infrastructure components to be automated is necessary to ensure that the automation process is successful. It is important to identify the components that can be automated and those that cannot. This will help in determining the scope of the automation process and ensure that the process is efficient and effective.

What is Infrastructure Automation?

Infrastructure automation refers to the use of software tools and processes to automate the management and deployment of IT infrastructure. This includes servers, databases, storage, networking, and other components that make up an organization's IT environment. The goal of infrastructure automation is to reduce the amount of time and effort required to manage and deploy infrastructure while improving reliability and consistency.

In modern software development, infrastructure automation is crucial for several reasons. As organizations move towards more agile and DevOps-focused methodologies, they need to be able to quickly and efficiently deploy infrastructure changes to keep up with the pace of development. Infrastructure automation can help facilitate this by automating tasks such as server configuration, network setup, and database provisioning.

Tools for Infrastructure Automation

There are numerous tools available for infrastructure automation, ranging from open source to commercial solutions, each with its own unique features and capabilities. These tools allow for the creation, deployment, and management of infrastructure as code, enabling organizations to streamline their deployment processes and ensure consistency across environments.

Some of the most popular free modern tools for infrastructure automation include:

• Ansible: An open-source automation tool that simplifies complex IT tasks, such as configuration management, application deployment, and orchestration. Ansible uses a human-readable language called YAML to define automation scripts (playbooks) and relies on an agentless architecture, which eliminates the need for additional software on managed nodes.

• Terraform: An Infrastructure as Code (IaC) tool that enables you to define and provision infrastructure using a declarative configuration language (HCL). Terraform supports multiple cloud providers such as AWS, Azure, and GCP, and allows you to manage resources in a consistent and reproducible manner, promoting collaboration and reducing manual errors.

• Jenkins: An open-source automation server that facilitates continuous integration and continuous delivery (CI/CD). With its extensive plugin ecosystem, Jenkins can be customized to support various DevOps practices and integrates with numerous tools and services to streamline the software delivery process.

• Puppet: A configuration management tool that automates the provisioning, configuration, and management of servers. Puppet uses declarative language to define the desired state of your infrastructure and ensures consistency by enforcing the desired state across your environment.

• CircleCI: A cloud-based CI/CD platform that supports many programming languages and frameworks. With its fast build times, scalable infrastructure, and flexible workflows, CircleCI helps automate the software delivery process, reducing manual errors and accelerating deployment.

• Docker: A containerization platform that packages applications and their dependencies into a standardized unit called a container. Docker enables consistent and portable environments for running applications across different machines and operating systems, simplifying deployment and management.

• GitHub: A web-based platform for version control and collaboration using Git. It provides a centralized repository for code, enabling teams to collaborate, track changes, and review code efficiently. GitHub also offers features such as issue tracking, project management, and integrations with other tools and services.

• Chef: A configuration management tool that allows for the automation of infrastructure deployment and management. Chef provides a flexible and powerful platform for managing infrastructure as code and can be used to manage both on-premises and cloud-based environments.

• Kubernetes(K8s): A container orchestration platform that automates the deployment, scaling, and management of containerized applications. With features like automatic load balancing, horizontal scaling, and self-healing, Kubernetes is a powerful solution for managing complex, containerized applications.

• OpenStack: An open-source cloud computing platform that provides Infrastructure as a Service (IaaS) for building and managing public and private clouds. OpenStack offers a modular architecture, making it highly customizable and extensible to fit various use cases.

• SaltStack: An automation and configuration management tool that uses a remote execution model and a declarative language (YAML) to manage infrastructure. SaltStack is known for its speed and scalability, enabling you to manage thousands of servers simultaneously.

• Pulumi: An Infrastructure as Code (IaC) platform that allows you to define, deploy, and manage cloud resources using familiar programming languages, such as Python, TypeScript, and Go. Pulumi enables seamless integration with existing development workflows, enhancing collaboration and code reusability.

• Packer: An open-source tool for creating identical machine images across multiple platforms from a single source configuration. Packer supports popular virtualization and cloud platforms such as Amazon EC2, Google Compute Engine, and Docker, allowing you to build images for different platforms and environments. By automating the creation of machine images, Packer helps ensure consistency and reduce deployment times.

By understanding the unique features of each tool, decision-makers and influencers can make informed choices when selecting the right tool for their specific needs. Whether it's configuration management, containerization, or Infrastructure as Code, these tools provide the means to enhance speed, agility, code quality, and efficiency in modern software development practices.

Using Docker for Infrastructure Automation

Let's consider a practical example of a developer that needs to deploy a Node.js application to multiple servers in different environments. Traditionally, this process involves manually configuring each server, which is a time-consuming and error-prone task. However, with infrastructure automation, this process can be streamlined, and deployments can be made more efficient.

To implement infrastructure automation in this scenario, the first step is to select the right tool for the job. Depending on the specific needs of the organization, tools like Ansible, Jenkins, Docker, Kubernetes, and Puppet can be used to automate the deployment process.

Let's take the example of a Node.js application. In this scenario, we can use a tool like Docker for infrastructure automation. To create a plan for automation implementation, we need to identify the tasks that can be automated. These may include creating a new server instance, configuring the server, installing dependencies, deploying the application code, and starting the application server.

With Docker, we can easily manage our infrastructure by defining our infrastructure as code. Any changes to our infrastructure can be made in code and deployed automatically, reducing the risk of human error.

It uses a simple and easy-to-learn scripting language to automate tasks such as configuration management, application deployment, and infrastructure orchestration.

To begin with, we need to ensure that Docker is installed on our system. Docker can be installed on various operating systems like Linux, macOS, and Windows. Once Docker is installed, we can proceed with the following steps:

1. Create your Node.js project, and install the necessary libraries: You can either use a boilerplate or manually create your project structure using the command:

npm init

Follow the prompt in your terminal, till the project is set up with a “package.json” file. In this article, we would have a simple Node.js application with the following code in our “index.js” file:

const http = require('http');

const hostname = '0.0.0.0';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello, World!\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

This code creates a simple HTTP server that listens on port 3000 and responds with "Hello, World!" to any incoming requests. Once you have built and run your Docker container, you can access this server by visiting http://localhost:3000 in your web browser or by using a tool like cURL to make a request to the server from the command line:

curl http://localhost:3000

You can run the following command to start the server:

node index.js

If everything is working correctly, you should see "Server running at http://0.0.0.0:3000/" printed in the terminal or “Hello, World!” in the response body. Here is a test using Postman:

2. Create a Dockerfile in the working directory of your project: A Dockerfile is a script that contains instructions for building a Docker image. We will use a Dockerfile to define the environment for our Node.js application.
Create a file named “Dockerfile in the working directory of your Node.js application so that your project structure looks something like this:

Here's an example of a simple Dockerfile that installs Node.js and copies our application files into the container:

# Use an official Node.js runtime as a parent image
FROM node:14

# Set the working directory in the container to /app
WORKDIR /app

# Copy the package.json and package-lock.json files to the container
COPY package*.json ./

# Install the dependencies
RUN npm install

# Copy the rest of the application files to the container
COPY . .

# Expose port 3000 to the host
EXPOSE 3000

# Start the application
CMD ["node", "index.js"]

The Dockerfile defines a base image, sets a working directory, installs our application dependencies, copies our application files into the container, exposes port 3000, and starts our application.

3. Build a Docker image: Once we have defined our Dockerfile, we can use the Docker build command to build a Docker image. This command takes the name of the image and the path to the Dockerfile as arguments. Here's an example command:

docker build -t my-node-app .

This command will build a Docker image with the name my-node-app and you should find your Docker image in the Docker Console/Desktop just like mine below:

4. Run a Docker container: Once we have built a Docker image, we can use the Docker run command to run a Docker container. This command takes the name of the image as an argument. Here's an example command:

docker run -p 3000:3000 my-node-app

This command will run a Docker container with the name my-node-app and expose port 3000. You would see that the Node server starts and is running on port “3000” or whatever port you set it to just as below:

5. Test the deployment: After the Docker container has been started, it's important to test the deployment to ensure that it was successful. This can be done by accessing the server and verifying that the Node.js express API is serving.

You can start the server address in the browser, terminal(using cURL), or Postman. In my browser, I got this result:

6. Update the Dockerfile: As the deployment environment changes over time, it's important to update the Dockerfile to reflect these changes. We can modify the Dockerfile to install new dependencies, configure the environment, and perform other tasks.

Best Practices for Infrastructure Automation

Adopting best practices for infrastructure automation is critical for ensuring the efficient and effective delivery of applications. If best practices are not followed, the consequences can be significant. For example, if automation scripts are not properly tested and validated, there is a risk of unintended consequences, such as outages, data loss, and security breaches.

Let’s discuss four key areas of infrastructure automation and a list of dos and don'ts for each area:

Version Control and Configuration Management

Version control and configuration management are critical aspects of infrastructure automation. They ensure that changes to your infrastructure are tracked, and configurations are consistently applied across your environment.

Do(s):

• Use a version control system like Git to track and manage changes to your infrastructure code.

• Implement a configuration management tool like Ansible, Puppet, or Chef to manage infrastructure configurations.

• Regularly review and update your configuration management policies to ensure they remain relevant and effective.

Don't(s):

• Avoid using manual processes or ad-hoc scripts to manage infrastructure configurations.

• Don't ignore the importance of documenting changes to your infrastructure code and configurations.

• Avoid overcomplicating your configuration management policies, as this can make them difficult to understand and maintain.

Continuous Integration and Continuous Deployment (CI/CD)

Implementing a CI/CD pipeline can significantly enhance your infrastructure automation efforts by automating the testing, integration, and deployment of infrastructure changes.

Do(s):

• Set up automated testing for your infrastructure code to catch issues before they reach production.

• Implement a CI/CD pipeline using tools like Jenkins, GitLab CI, or CircleCI.

• Monitor and optimize your CI/CD pipeline to identify bottlenecks and areas for improvement.

Don't(s):

• Don't skip automated testing or rely solely on manual testing for your infrastructure code.

• Avoid deploying infrastructure changes without proper testing and validation.

• Don't ignore the need for continuous monitoring and optimization of your CI/CD pipeline.

Collaboration and Cross-functional Teams

Fostering collaboration and building cross-functional teams is essential for successful infrastructure automation initiatives.

Do(s):

• Encourage collaboration between development, operations, and other teams involved in infrastructure automation.

• Use collaboration tools like Slack, Microsoft Teams, or Trello to streamline communication and information sharing.

• Provide training and support for team members to develop the necessary skills for infrastructure automation.

Don't(s):

• Don't operate in silos or allow teams to work independently without collaboration.

• Avoid overloading team members with too many responsibilities, leading to burnout and reduced productivity.

• Don't assume that team members possess all the necessary skills for infrastructure automation without offering proper training.

Monitoring and Logging

Effective monitoring and logging practices are crucial for maintaining the health and performance of your automated infrastructure.

Do(s):

• Implement comprehensive monitoring and logging for your infrastructure using tools like Prometheus, ELK Stack, or Datadog.

• Set up meaningful alerts and notifications to proactively address potential issues.

• Periodically review and analyze logs to identify patterns and trends that may indicate problems or opportunities for optimization.

Don't(s):

• Don't rely solely on reactive monitoring or troubleshooting when issues arise.

• Avoid setting up excessive alerts that can lead to alert fatigue and decreased responsiveness.

• Don't neglect the importance of log analysis for continuous improvement and optimization of your infrastructure automation efforts.

Conclusion

Infrastructure automation is a critical aspect of modern IT operations and can have a significant impact on the efficiency, reliability, and security of your deployment process. Automation enables businesses to streamline their infrastructure management, reduce manual errors, and increase the speed of their deployments. By automating infrastructure, organizations can also improve their scalability and reduce their operational costs.

In conclusion, infrastructure automation should be implemented by all organizations. The benefits of automation are numerous and it's never too late to start automating your infrastructure; the process is much simpler than you might think. So, take the time to learn about the different automation tools and techniques available and start implementing them in your organization. The results will speak for themselves.

ITOps can be a maze packed with a series of puzzles. Legacy systems, sophisticated infrastructure designs, and a constant need for skilled professionals are just a few of the problems they face. These difficulties frequently limit their ability to quickly adjust to new technology and market demands, leading them to seek a better and more efficient solution.

This article will explore the fundamentals of NoOps and its application in a serverless architecture. After reading this article, you can make more informed decisions for your software development architecture.

So, without further ado, let's get started.

Evolution of IT Operations

The evolution of IT Operations has been a thrilling journey driven by the continuous pursuit of increased efficiency and adaptability in managing an organization's computing infrastructure.

ITOps has traditionally depended heavily on manual processes and dedicated professionals responsible for tasks such as:

• Server Provisioning: Manually setting up, configuring, and deploying physical servers to meet the organization's computing needs. It was a time-consuming process that required careful planning.

• Configuration Management: Configuring servers and maintaining consistency across the infrastructure was a meticulous task. Any changes or updates required manual adjustments and often led to configuration drift.

• Software Deployment: Installing and updating software on servers was a manual operation, which posed challenges in terms of consistency, version control, and deployment speed.

Over time, these approaches presented several challenges such as:

• Complexity: As organizations grew, managing a diverse array of servers and configurations became complex, increasing the risk of errors and inefficiencies.

• Costs: Maintaining physical servers and data centers demanded substantial financial resources for procurement, maintenance, and infrastructure scaling, making it an expensive endeavor.

• Agility: Traditional ITOps models often struggled to keep up with the rapidly changing needs of the business and the market, leading to delays and missed opportunities.

DevOps was introduced to address these issues. DevOps successfully addressed the challenges by providing enterprises with more streamlined, efficient, and responsive methods to manage their computing infrastructure, such as:

• Automation: DevOps focuses on automating routine and repetitive operations, reducing manual effort and enhancing operational efficiency. Server provisioning, configuration, and software deployment are all automated, reducing errors and speeding up operations.

• Continuous Integration/Continuous Deployment (CI/CD): Pipelines for continuous integration and delivery (CI/CD) allow for faster testing, integration, and deployment of software changes into production environments. This strategy improves software release speed and reliability.

• Infrastructure as Code (IaC): Managing infrastructure with code allows resources to be provisioned and managed by version-controlled scripts. This approach improves infrastructure management by ensuring consistency, repeatability, and version tracking, making it more efficient and error-free.

Comparison of ITOps, DevOps, and NoOps

To gain an in-depth understanding of the paradigm shifts in computing operations, it is crucial to compare and contrast the various techniques. Each of these techniques reflects a different stage in the history of infrastructure management, reflecting improvements in responsibility, automation, cost-effectiveness, and innovation capabilities.

The table below provides a detailed comparison between ITOps, DevOps, and NoOps, offering insight into how these techniques impact an organization's approach to IT infrastructure and operations.

Benefits of NoOps

NoOps, the future of IT operations in a serverless world, provides an abundance of benefits that streamline operations and enhance productivity. Organizations can improve cost-effectiveness, scalability, and flexibility by cutting down the need for infrastructure management tasks and leveraging automation.

Here are some of the major advantages of implementing NoOps in serverless computing:

1. Efficiency and Cost-effectiveness: NoOps allows enterprises to devote more time and resources to providing value-added services rather than managing infrastructure. As a result, it improves operational efficiency while reducing expenses associated with traditional IT operations (ITOps).

2. Elimination of Infrastructure Management Tasks: Organizations can use NoOps to shift their focus from managing servers and infrastructure to solving real problems. The underlying infrastructure can be handled by the cloud service provider, allowing developers to focus on developing creative solutions.

3. Increased Scalability and Agility: NoOps leverages automation to streamline tasks such as resource provisioning, application scaling, and deployment management. This automation allows businesses to rapidly grow their applications in response to demand, ensuring optimal performance and responsiveness.

By transitioning from traditional IT operations to NoOps in serverless computing, organizations can reap these benefits while embracing a more efficient and agile approach to software development and deployment.

Getting Started with NoOps

To guarantee success, an organized plan has to be followed while transitioning from traditional IT operations to NoOps. To begin this journey, you have to assess your current infrastructure thoroughly. Here's how to get going:

Assessing Current Infrastructure

Before venturing into NoOps, you must evaluate your current infrastructure. This evaluation involves a thorough examination of your present IT operations procedures and workflows to identify their suitability for a NoOps environment. Take special note of the following factors:

• Dependency on Manual Tasks: Identify which processes, such as server provisioning and software updates, currently rely on manual intervention. Take note of these as suitable candidates for automation in a NoOps environment.

• Scalability Limitations: Check if your infrastructure can scale seamlessly to meet increased demands without requiring manual intervention. Scalability is a key component of NoOps and requires careful consideration.

• Resource Utilization: Examine the efficiency of your resource allocation. Find out whether resources are underutilized or overprovisioned. Strategic automation and optimization can help to eliminate any shortcomings.

• Monitoring and Observability: Evaluate the effectiveness of your current monitoring and observability capabilities. Robust monitoring is indispensable for timely issue detection and ensuring optimal performance within a serverless environment.

Identifying Areas for Automation and Optimization

Automation and optimization are essential in NoOps. After you've examined your infrastructure, concentrate on identifying specific locations that will benefit the most from the renovations. Think about the following:

• Infrastructure Provisioning: By employing automation technologies like Terraform or AWS CloudFormation, you can speed up the provisioning of servers, containers, and other essential infrastructure components.

• Configuration Management: Automate the deployment and management of software configurations across your infrastructure using tools such as Ansible or Puppet.

• Deployment Pipelines: Implement continuous integration and continuous deployment (CI/CD) pipelines to automate the software release process. This can be facilitated through tools like Jenkins or GitLab CI/CD.

• Testing and Monitoring: Enhance reliability by automating the testing of your applications and infrastructure. Tools like Selenium or AWS CloudWatch are invaluable for early issue detection.

Choosing the Right Tools for NoOps Implementation

The choice of tools is pivotal to the success of your NoOps implementation. When selecting tools, consider the following factors:

• Compatibility: Ensure the tools you select are compatible with your existing infrastructure and technology stack.

• Ease of Use: Opt for user-friendly tools with a low learning curve, enabling your team to swiftly adopt and implement them.

• Integration Capabilities: Assess how well the chosen tools integrate with other systems in your environment, particularly with regard to monitoring and deployment tools.

• Community Support: Consider the availability of active community support, thorough documentation, and ongoing development for the tools you choose.

Implementing Best Practices for Successful NoOps Transition

A smooth transition to NoOps hinges on adhering to best practices. These practices encompass:

• Culture Shift: Cultivate a culture of automation and continuous improvement within your organization. Encourage collaboration between development and operations teams to drive innovation.

• Code Versioning: Enforce robust code versioning practices using platforms like Git or Bitbucket. This fosters efficient code management and simplifies collaboration among team members.

• Security and Compliance: Maintain a steadfast focus on security and compliance in a NoOps environment. Implement secure coding practices, stay vigilant in updating software dependencies, and proactively monitor for vulnerabilities.

By meticulously assessing your infrastructure, identifying opportunities for automation and optimization, selecting the right tools, and implementing best practices, you can navigate the transition from traditional IT operations to NoOps with confidence. Embrace the advantages that NoOps offers in streamlining operations, and positioning your organization for the future of IT.

Tools for NoOps Implementation

​​NoOps is an approach that aims to minimize or eliminate the need for traditional operations tasks in software development and deployment, emphasizing automation and self-service. While it doesn't create entirely "tool classes" on its own, NoOps relies on a combination of tools and practices to achieve its objectives.

These tools can generally be categorized into a few classes:

1. Automation and Deployment Tools:

   • Continuous Integration/Continuous Deployment (CI/CD) Tools: These tools automate the building, testing, and deployment of software, ensuring a streamlined and efficient release process. Examples include Jenkins, Travis CI, and CircleCI.

   • Infrastructure as Code (IaC) Tools: IaC tools like Terraform and Ansible enable the automated provisioning and management of infrastructure, treating it as code.

   • Containerization and Orchestration Tools: Tools like Docker and Kubernetes automate the deployment and scaling of containerized applications.

   • Serverless Frameworks: Serverless platforms like AWS Lambda and Azure Functions automate infrastructure management and scaling, allowing developers to focus on code.

2. Monitoring and Observability Tools:

   • Monitoring Tools: Tools like Prometheus, Nagios, and Zabbix continuously track the performance and health of applications and infrastructure components.

   • Log Management Tools: Platforms such as ELK Stack (Elasticsearch, Logstash, Kibana) and Splunk collect and analyze log data to provide insights into application behavior.

   • AIOps Tools: These leverage artificial intelligence and machine learning to enhance monitoring and provide predictive analytics. Tools like Datadog and New Relic fall into this category.

   • Tracing and Profiling Tools: Tools like Jaeger and Zipkin help trace requests and profile application performance for debugging and optimization.

3. Security and Compliance Tools:

   • Security Scanning and Analysis Tools: Tools like OWASP ZAP and Nessus automate security testing, vulnerability scanning, and compliance checks.

   • Policy as Code Tools: Policy as Code tools like Open Policy Agent (OPA) automate the enforcement of security and compliance policies.

4. Configuration Management Tools:

   • Configuration Management Tools: Tools like Puppet, Chef, and SaltStack automate configuration management and ensure consistency across infrastructure.

5. Self-Service Tools:

   • Self-Service Portals: These tools allow developers to self-service their infrastructure and application needs, reducing the dependency on traditional operations teams.

6. ChatOps Tools:

   • ChatOps Platforms: Tools like Slack and Microsoft Teams enable automation through chat interfaces, facilitating collaboration and actions from within chat.

NoOps doesn't mean eliminating operations but rather automating and streamlining operations to the extent that developers can manage much of the process independently. It's essential to select and configure the right combination of tools to align with the NoOps approach and achieve its goals.

Conclusion

NoOps is changing the way IT operations are done in a serverless world. By getting rid of the need for managing infrastructure and automating processes, organizations can make their operations more efficient.

In summary, here are the main benefits of using NoOps:

1. Streamlined operations: NoOps makes IT operations simpler and faster, so teams can focus on providing value instead of dealing with infrastructure.

2. Improved scalability and flexibility: Automation allows organizations to easily expand their applications and adapt quickly to new business requirements.

3. Cost savings: With NoOps, organizations can save money on managing and maintaining infrastructure.

You should consider implementing NoOps in your organization. By embracing this approach, you can make your operations better, increase productivity, and stay ahead in today's quickly changing digital landscape.

Take action now and start your NoOps journey. Embrace automation, follow best practices, and use the benefits of serverless computing to drive innovation and success in your organization.

Kubernetes simplifies container management through automated deployment, scaling, and monitoring across a node cluster. Its robust features and flexible architecture enable developers to focus on application development, rather than infrastructure concerns.

While alternatives like Docker Swarm and Apache Mesos exist, Kubernetes has risen as the container orchestration industry standard. Boasting an extensive ecosystem, active community support, and seamless integration with DevOps tools, Kubernetes stands out as the optimal choice for modern application deployment.

This article dives deep into Kubernetes: its introduction, architecture, and components, giving you a solid understanding of how it works under the hood. After reading this article, you'll have a good foundation to harness Kubernetes' capabilities, elevating your DevOps expertise.

Introduction to Kubernetes

Kubernetes is a cluster orchestration system that allows you to manage and deploy containerized applications at scale. It provides a platform for automating the deployment, scaling, and management of containerized applications. With Kubernetes, you can easily scale the deployment of your applications, update containerized applications seamlessly, and debug any issues that may arise.

Kubernetes Architecture and Components:

The architecture of Kubernetes consists of several key components that work together to create a robust and reliable container infrastructure. These components include:

1. Master Node:

   • The master node is responsible for managing the cluster and making all the decisions about scheduling and deploying applications.

   • It includes various components such as the API server, controller manager, scheduler, etc.

2. Slave Nodes (Worker Nodes):

   • The slave nodes, also known as worker nodes, are responsible for running the actual application workloads.

   • Each worker node runs multiple containers using container runtime engines such as Docker or Container.

3. Pods:

   • Pods are the smallest and most basic unit in Kubernetes.

   • A pod represents a single instance of a running process or application in the cluster.

   • It encapsulates one or more containers that are tightly coupled and share resources.

4. Services:

   • Services provide a stable network endpoint for accessing a set of pods.

   • They enable load balancing across multiple pods and allow for easy communication between different parts of your application.

5. Deployments:

   • Deployments provide a declarative way to manage application updates and rollbacks.

   • They ensure that a specified number of pod replicas are running at all times, making it easy to scale your application up or down.

Understanding the roles and responsibilities of these components is crucial for effectively deploying and managing applications in Kubernetes.

Installation and Setup

To begin your journey with Kubernetes, it is essential to understand the basics of installation and setup. Here, we will explore different installation options for Kubernetes on both local computers and cloud platforms.

When choosing an installation type, several factors should be considered, such as ease of maintenance, security, control, and available resources. Some popular installation options are:

1. Minikube: If you want to set up a single-node Kubernetes cluster on your local machine for development or testing purposes, Minikube is an excellent choice. It provides a lightweight Kubernetes implementation that runs inside a virtual machine (VM) on your computer.

2. Kubeadm: Kubeadm simplifies the process of setting up a production-ready Kubernetes cluster. It allows you to initialize cluster control-plane nodes and join worker nodes to the cluster effortlessly. Kubeadm is often used in combination with other tools like kubectl and kubelet.

3. Managed Kubernetes Services: Cloud providers such as Google Cloud Platform (GCP), Amazon Web Services (AWS), and Microsoft Azure offer managed Kubernetes services like Google Kubernetes Engine (GKE), Amazon Elastic Kubernetes Service (EKS), and Azure Kubernetes Service (AKS). These services abstract away the complexities of managing the underlying infrastructure, making it easier to deploy and scale your applications.

Each installation option has its advantages and considerations, depending on your specific requirements. The official Kubernetes documentation provides detailed step-by-step guides for each installation method, helping you get started quickly.

Remember that once you have set up your Kubernetes cluster, you can deploy containerized applications, scale deployments, update applications seamlessly, and debug any issues that may arise during runtime.

Deploying Applications with Kubernetes

In this section, we will explore the process of deploying applications using Pods, Services, and Deployments in Kubernetes. Let's dive in!

Step-by-step guide on deploying an application

1. Create a Pod: A Pod is the smallest deployable unit in Kubernetes, representing a single instance of a running process. To create a Pod, you define a YAML file that specifies the container image, resource requirements, and other configurations. Here's an example:

   apiVersion: v1 kind: Pod metadata:   name: my-pod spec:   containers:   - name: my-container     image: nginx     ports:     - containerPort: 80

2. Create a Service: A Service enables networking and load balancing for Pods. It provides a stable IP address and DNS name to access the deployed application. To create a Service, you define another YAML file. Here's an example:

   apiVersion: v1 kind: Service metadata:   name: my-service spec:   selector:     app: my-app   ports:   - protocol: TCP     port: 80     targetPort: 80   type: LoadBalancer

3. Create a Deployment: A Deployment manages the lifecycle of your application by ensuring the desired number of Pods are running and handling updates and rollbacks. To create a Deployment, you define yet another YAML file. Here's an example:

   apiVersion: apps/v1 kind: Deployment metadata:   name: my-deployment spec:   replicas: 3   selector:     matchLabels:       app: my-app   template:     metadata:       labels:         app: my-app     spec:       containers:       - name: my-container         image: nginx         ports:         - containerPort: 80

Methods to explore and interact with deployed applications

After deploying your application, you can interact with it in several ways:

• kubectl commands: Use the kubectl command-line tool to view information about your Pods, Services, and Deployments. For example, you can run kubectl get pods to see the status of your Pods.

• Dashboard: Kubernetes provides a web-based user interface called the Dashboard. It allows you to manage and monitor your cluster and deployed applications visually.

How to expose a deployed application publicly

To expose your deployed application publicly, you can use the Service resource with a type of LoadBalancer. This will automatically provision an external load balancer and assign it an external IP address. Here's an example:

Once the external IP address is assigned, you can access your application using that IP address.

Scaling, Updating, and Debugging Applications in Kubernetes

In the previous section, we discussed how to deploy applications using Pods, Services, and Deployments in Kubernetes. Now, let's explore how to scale, update, and debug containerized applications in Kubernetes.

Scaling Deployments

One of the key benefits of using Kubernetes is its ability to scale deployments easily. To scale deployment in Kubernetes, you can use the kubectl scale command. Here's an example:

This command scales the my-deployment deployment to have three replicas. Kubernetes will automatically distribute these replicas across available nodes in the cluster.

Updating Containerized Applications

Updating containerized applications in Kubernetes can be done through rolling updates. With rolling updates, you can update your application without downtime by gradually replacing old instances with new ones. The process is managed by updating the deployment's image version.

To perform a rolling update, you can use the kubectl set image command. Here's an example:

This command updates the image version of the my-container container in the my-deployment deployment to my-image:v2. Kubernetes will automatically handle the rolling update process, ensuring a smooth transition between versions.

Debugging Containerized Applications

Debugging containerized applications in Kubernetes can be done through various approaches. One common method is to use logging and monitoring tools provided by Kubernetes. You can access logs for containers using the kubectl logs command. For example:

This command retrieves the logs for the my-pod pod. You can also use labels and selectors to retrieve logs for multiple pods simultaneously.

Additionally, Kubernetes provides debugging facilities like exec into a container or attaching a debugging container to a running pod. These options allow you to troubleshoot and diagnose issues within your containerized applications effectively.

Kubernetes Features and Comparison with Docker Swarm

Kubernetes is a powerful cluster orchestration system that enables efficient management of containerized applications. With its robust architecture and rich feature set, Kubernetes has become the de facto standard for container orchestration in the software development industry.

Key Features of Kubernetes:

• Scalability: Kubernetes provides seamless scaling of deployments, allowing applications to handle increased workload without downtime or performance degradation. It automatically adjusts resources based on demand, ensuring optimal utilization and efficient resource allocation.

• High Availability: Kubernetes ensures high availability by automatically managing failures and distributing workloads across multiple nodes. It continuously monitors the health of containers and restarts them if necessary, reducing downtime and increasing overall reliability.

• Self-healing: Kubernetes automatically detects and replaces failed containers or nodes. It also provides replica sets and readiness probes to maintain the desired state of applications, making sure they are always up and running as intended.

• Rolling Updates: Kubernetes supports rolling updates, enabling seamless deployment of new versions of containerized applications without service interruption. It gradually replaces old instances with new ones, ensuring smooth transitions and minimizing user impact.

Comparison with Docker Swarm

While Docker Swarm is another popular cluster orchestration system, there are some notable differences between Kubernetes and Docker Swarm:

• Architecture: Kubernetes follows a more complex architecture with a master node responsible for managing the cluster and multiple slave nodes where containers run. On the other hand, Docker Swarm has a simpler architecture with manager nodes that control worker nodes.

• Scalability: Kubernetes provides more advanced features for scaling applications, such as auto-scaling based on metrics like CPU usage or custom metrics. Docker Swarm offers basic scaling capabilities but lacks some of the advanced features provided by Kubernetes.

• Community Support: Kubernetes has a larger community and ecosystem compared to Docker Swarm. This means that there are more resources, tools, and integrations available for Kubernetes users.

Both Kubernetes and Docker Swarm have their strengths and are suitable for different use cases. The choice between them depends on factors such as the complexity of the application, scalability requirements, and the level of community support needed.

Kubernetes Resources for Beginners

When getting started with Kubernetes, it can be helpful to have access to resources that provide guidance and support. Whether you are new to Kubernetes or looking to expand your knowledge, there are plenty of tutorials, cheat sheets, and interview question resources available. Here are some recommendations for beginners learning Kubernetes:

1. Kubernetes Tutorials: Online tutorials are a great way to learn the basics of Kubernetes and understand its architecture and components. Some popular resources include:

   • Kubernetes Documentation: The official documentation provides comprehensive guides and tutorials for all aspects of Kubernetes.

   • Kubernetes By Example: This website offers practical examples and walkthroughs to help you grasp different concepts of Kubernetes.

   • Katacoda: Katacoda offers interactive scenarios where you can practice deploying applications on a live Kubernetes cluster.

2. Kubernetes Cheat Sheets: Cheat sheets can be handy references when you need quick information about a specific command or concept in Kubernetes. Some popular cheat sheets include:

   • Kubectl Cheat Sheet: This cheat sheet provides an overview of common kubectl commands used to interact with a Kubernetes cluster.

   • Kubernetes Components Cheat Sheet: This cheat sheet explains the different components and services in the Kubernetes architecture.

3. Kubernetes Interview Questions: If you are preparing for a job interview or want to test your knowledge of Kubernetes, interview question resources can be valuable. Some websites that offer Kubernetes interview questions include:

   • InterviewBit: This website provides a collection of Kubernetes interview questions along with detailed answers.

   • LeetCode: LeetCode offers coding problems related to Kubernetes that can help you practice your skills.

By exploring these resources, beginners can gain a solid understanding of Kubernetes and its components. These tutorials, cheat sheets, and interview question resources will serve as valuable references throughout your learning process, enabling you to scale deployments, update containerized applications, and debug them effectively.

Conclusion

In this article, we explored the world of Kubernetes and its fundamental concepts. We discussed the architecture and components of Kubernetes, including the roles and responsibilities of master and slave nodes in a Kubernetes cluster.

We then discussed the installation and setup process, considering different options for local computers and cloud platforms. We also covered how to deploy applications using Pods, Services, and Deployments in Kubernetes, as well as methods to scale, update, and debug applications. We compared Kubernetes with Docker Swarm as container orchestration systems, highlighting their key features. We also provided recommendations for helpful tutorials, cheat sheets, and interview question resources for beginners learning Kubernetes.

Now it's time for you to practice what you have learned and explore Kubernetes further. Dive into hands-on exercises, experiment with different deployment scenarios, and continue expanding your knowledge of this powerful container orchestration tool.

The best way to learn is by doing. So roll up your sleeves and start exploring Kubernetes today!

TL;DR

Did you know that far beyond being a mere industry buzzword, decentralized communication represents a strategic response to the vulnerabilities inherent in centralized systems? It prioritizes privacy, security, and censorship resistance, making it an indispensable component in web developers' toolkits.

Traditional centralized communication systems have long struggled with censorship, single points of failure, and privacy concerns. With the rise of Web 3 and blockchain technology, decentralized communication solutions like Waku are emerging as a promising alternative. Waku offers a peer-to-peer (P2P) messaging system that is resilient to censorship, scalable, and secure, making it an ideal choice for dApp developers looking to build next-generation applications.

This article will guide you on how to build a decentralized application (dApp) using Waku, an uncompromising decentralized communication protocol, and Vue.js, a popular JavaScript framework for building user interfaces. Before diving into the hands-on development aspects of this article, it is recommended that you have a basic understanding of Vue.js, familiarity with Tailwind CSS for UI styling, and a grasp of web3.js for seamless wallet integration.

If these technologies are new to you, no problem – this guide is meticulously created for all levels of expertise, providing step-by-step guidance at every level.

And don't forget to drop a "💖🦄🔥🙌🤯".

Understanding Waku

Waku is a collection of decentralized peer-to-peer messaging protocols that enable secure and censorship-resistant communication over a decentralized network. Its features include end-to-end encryption, persistent/ephemeral messaging, and efficient peer discovery, providing a foundation for secure and reliable communication.

Waku operates within a peer-to-peer topology, creating a decentralized network that thwarts censorship and provides surveillance resistance. Its design supports scalability, with the ability to accommodate millions of users. It is designed to be the successor of Whisper, the messaging layer of the Ethereum blockchain P2P protocol suite, and outperforms it in scalability and resource efficiency.

Waku's architecture is underpinned by three distinct network interaction domains: gossip, discovery, and request/response. Although Waku is a cohesive whole in terms of capabilities, it encompasses three primary clients designed for different environments and several SDKs, including Rust, React Native, Kotlin, and Swift.

1. nwaku: The reference implementation in Nim.

2. go-waku: Tailored for native integration with Golang applications.

3. js-waku: A JavaScript implementation optimized for browser environments.

Waku consists of multiple protocols, each serving a specific function within the network. They include, but are not limited to:

• Waku Relay: The backbone of the Waku network, employing a pub/sub approach to peer-to-peer messaging. Emphasizes privacy, censorship resistance, and security, extending the libp2p GossipSub protocol.

• Waku Filter: A lightweight version of the relay protocol designed for resource-restricted devices. Allows light nodes to receive specific messages of interest from full nodes.

• Waku Store: Facilitates message retrieval for devices unable to participate in the Waku Relay network while offline.

• Waku Light Push: A request/response protocol enabling nodes with short connection windows or limited bandwidth to publish messages to the Waku network.

Understanding Waku's architecture and protocols lays the groundwork for proceeding into practical implementations.

Use Cases of Waku

Waku's versatile architecture and capabilities find relevance in a myriad of real-world scenarios where secure and decentralized communication is paramount. Whether it's facilitating private conversations between users, enabling data exchange between devices, or supporting communication among nodes within a network, Waku emerges as a robust solution.

Privacy-focused Communication

Waku's emphasis on privacy makes it an ideal choice for scenarios where safeguarding user information is of utmost importance. In applications dealing with sensitive data or confidential conversations, Waku's end-to-end encryption and decentralized architecture provide a secure environment, mitigating the risks associated with centralized communication platforms.

Censorship-resistant Messaging

Waku offers a beacon of hope for unrestricted communication in regions where internet censorship is prevalent. Its peer-to-peer topology prevents centralized authorities from controlling or monitoring messaging traffic, ensuring that users can communicate freely without fear of censorship. This makes Waku particularly valuable in promoting freedom of expression and supporting open communication channels.

Use in dApps for Decentralized Communication

Decentralized Applications (dApps) form a burgeoning ecosystem where Waku can play a pivotal role. Waku's integration into dApps enhances communication functionalities, enabling real-time interactions among users while maintaining the decentralized ethos. This proves particularly valuable in scenarios such as collaborative platforms, social networks, or any application where user engagement and communication are central components.

By exploring the features and capabilities of Waku, it becomes evident that Waku's applicability extends beyond theoretical advantages, finding practical application in diverse areas.

Building a dApp with Waku and Vue.js

Polling systems often face challenges related to centralization, privacy concerns, and susceptibility to manipulation. By integrating Waku and Vue.js, we can tackle these challenges, creating a decentralized voting poll application that leverages the power of peer-to-peer communication.

Here is the entire source code of my voting poll app on GitHub: https://github.com/wolz-CODElife/waku-vue-poll.git and the live application is hosted on Vercel.

Dev Tools I Used?

• Vite: To bootstrap the Vue3 application with the Tailwind template.

• Vue 3: To build the user interface.

• TypeScript: For type safety and potential for catching errors during compiling.

• Tailwind CSS: For styling the user interface.

• Web3.js: For implementing wallet connect.

• Node Polyfill Webpack Plugin: For providing polyfills necessary for emitting Web3.js events in the browser. Since Vue3 uses webpack v5, where polyfill Node core modules were removed.

• Crypto Hash: For hashing user address, where wallet is not available.

• Protobufjs: For serializing message data sent through Waku.

• @waku/sdk: For accessing Waku node methods in JavaScript.

Setting Up the Development Environment

To set up your development environment, ensure you have Node v18+ then open a new terminal in your working directory and run the following command:

npm create vite@latest

Which will begin a dialog in the terminal, you can choose options that work for you, or use the same options as I used:

Need to install the following packages:
  create-vite@5.1.0
Ok to proceed? (y) y
✔ Project name: … waku-poll-app
✔ Select a framework: › Vue
✔ Select a variant: › TypeScript

This should create a new Vue application in your working directory, navigate to the app, install the default dependencies and start the app using the following command:

cd waku-poll-app
npm install
npm run dev

Next, we want to create a file structure that allows us to componentize the various parts of the app. Your src path should have a file structure like this:

As we proceed we will update files with the necessary code, as for assets/3dpoll.jpg feel free to replace it with any image you see fit for your landing page.

Setting up Tailwind in Vue.js

To build our UI, we need to first install and configure Tailwind CSS in Vue 3. You can follow the official guide on Setting up Tailwind CSS.

Configuring Routes

To create multiple pages/routes in the app, we have to install Vue Router by running the following command in the terminal:

npm install --save vue-router@next 
# Install the latest version

In this app, we just need two routes: “Home” and “Polls” which we have inside the src/views folder. These routes will contain the Layout of each page, and then we can define the routes in the src/router/index.ts file by using the following code:

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '@/views/Home.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/polls',
    name: 'Polls',

    component: () => import('../views/Polls.vue'),
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

In the code snippet above, a Vue.js router configuration is defined. We import the necessary functions and types from 'vue-router' and the Home component from @/views/Home.vue.

The routes array contains route definitions for the Home and Polls components. The router is created using createRouter and createWebHistory functions, and the routes we defined earlier.

The component: () => import('../views/Polls.vue') is used to dynamically import the 'Polls.vue' component. This is a feature provided by Vue.js to asynchronously load the component when it's needed, which can help improve initial page load performance by splitting the code into smaller chunks.

Finally, the router is exported so we can access it in “main.ts”.

Next, we register router to the Vue app by including it in the “main.ts” file like this:

// main.ts or main.js
import { createApp } from 'vue';
import App from './App.vue';
import './css/index.css'

import router from './router'

createApp(App).use(router).mount('#app')

Next, we will create a Layout for our application with the following inside “App.vue”:

<script lang="ts">
</script>


<template>
  <div class="flex flex-col h-screen justify-between">
    <router-view class="container max-w-8xl mx-auto mb-auto px-4" />
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>

In the code above, we use router-view to dynamically load the components of the current route into the DOM.

Installing the Waku and Its Dependencies

To get started with Waku in our Vue 3 application, we need to install @waku/sdk which is a TypeScript implementation of the Waku protocol designed for web browser environments.

To install @waku.sdk run the following command in the terminal:

npm install @waku/sdk

It is also recommended to create a message structure for your app, typically Waku developers use Protocol Buffers for consistency, interoperability, compatibility and payload size. To install protobufjs, run the following command in the terminal:

npm install protobufjs

Implementing Waku Logic

The application runs on two fundamental logic, which are the wallet connect and Waku communication integrations. We will create two composables “waku.ts” and “client.ts” inside src/composables.

“waku.ts” contains all the methods our Vue app needs to interact with the Waku protocol and transmit messages(polls) across users on the app. Inside this file, you should have the following code:

import { ref } from 'vue';
import protobuf, { Message } from 'protobufjs';
import {
    createLightNode,
    waitForRemotePeer,
    createDecoder,
    createEncoder,
    Protocols,
    IFilterSubscription,
} from '@waku/sdk';

interface PollOption {
    value: string;
    votes: number;
}

interface PollMessage {
    question: string;
    options: { [key: string]: PollOption };
}

interface Poll {
    msgid: string;
    timestamp: string;
    sender: string;
    message: PollMessage;
    // other properties...
}


export const status = ref<string>('connecting...');
export const sender = ref(localStorage.getItem('senderWalletAddress') ?? '');
export const polls = ref<Poll[]>(JSON.parse(localStorage.getItem('polls') ?? '[]'));


export const wakuNode = await createLightNode({
    defaultBootstrap: true,
});

export const waitForRemotePeers = async () => {
    // Wait for a successful peer connection
    await waitForRemotePeer(wakuNode, [
        Protocols.LightPush,
        Protocols.Filter,
    ]);
}

// Choose a content topic
export const contentTopic = '/waku-vue-poll/1/polls/proto';

// message encoder and decoder
export const encoder = createEncoder({ contentTopic, ephemeral: true });
export const decoder = createDecoder(contentTopic);

// Message structure with Protobuf
export const PollQuestionWakuMessage = new protobuf.Type('PollQuestion')
    .add(new protobuf.Field('timestamp', 1, 'string'))
    .add(new protobuf.Field('msgid', 2, 'string'))
    .add(new protobuf.Field('sender', 3, 'string'))
    .add(new protobuf.Field('message', 4, 'string'));

export const serializeMessage = (protoMessage: Message) => {
    return PollQuestionWakuMessage.encode(protoMessage).finish()
}

export function useWaku() {

    async function start() {
        status.value = 'connecting'        
        try {
            await wakuNode?.start().then(() => {
                if (wakuNode.isStarted()) return waitForRemotePeers()
            }).then(() => {
                return wakuNode.connectionManager.getPeersByDiscovery()
            }).then((data:any) => {
                if (
                    wakuNode.libp2p.getConnections().length ||
                    data.CONNECTED.bootstrap.length ||
                    data.CONNECTED['peer-exchange'].length
                ) {
                    subscribe()
                    status.value = "connected"
                }
            })
        }
        catch (error) {
            console.error('Error initializing Waku Light Node:', error);
            status.value = 'not connected';
        }
    }

    async function stop() {
        unsubscribe();
        wakuNode.stop()
        status.value = 'not conencted';
    }
    let subscription = {} as IFilterSubscription

    async function subscribe() {
        if (!wakuNode || status.value !== 'connected') await start();
        try {
          subscription = await wakuNode?.filter?.createSubscription();
          await subscription.subscribe([decoder], (wakuMessage) => {
            const messageObj = PollQuestionWakuMessage.decode(wakuMessage.payload).toJSON();
            const result: Poll = {
                timestamp: messageObj.timestamp,
                msgid: messageObj.msgid,
                sender: messageObj.sender,
                message: JSON.parse(messageObj.message ?? '{}')
            };
            handleSubscriptionResult(result);
          });
        } catch (error) {
          console.error('Error subscribing to Content Topic:', error);
        }
      }

      function handleSubscriptionResult(result:Poll) {
        const msgid = result.msgid;
        const existingPollIndex = polls.value.findIndex(poll => poll.msgid === msgid);

        if (existingPollIndex !== -1) {
          // Update the existing poll
          polls.value.splice(existingPollIndex, 1, result);
        } else {
          // Add the new poll to the array
          polls.value.unshift(result);
        }

        if (polls.value.length > 0) {
            localStorage.setItem('polls', JSON.stringify(polls.value));
        }
      }

    async function unsubscribe() {
        subscription.unsubscribe([contentTopic])
    }

    async function publish(sender: string, message: string, timestamp: string = new Date().toUTCString(), msgid: string = Date.now() + Math.floor(Math.random() * 90000).toString()) {    
        if (!wakuNode || status.value !== 'connected') await start()

        try {
            const protoData = PollQuestionWakuMessage.create({
                timestamp: timestamp,
                msgid: msgid,
                sender: sender,
                message: message
            })

            return wakuNode.lightPush.send(encoder, { payload: serializeMessage(protoData) })
        }
        catch (error) {
            console.error('Error publishing to Content Topic:', error);
        }
    }

    return {
        wakuNode,
        status,
        sender,
        polls,
        start,
        stop,
        subscribe,
        unsubscribe,
        publish,
    };
}

The above code enables interaction with the Waku network, enabling the creation and participation in polls within a Vue application.

Firstly, we import necessary functions and define data structure using TypeScript interfaces to set a standard for PollOption, PollMessage and Poll. These structures represent the questions and options available in a poll and the overall structure of a poll, respectively.

Reactive variables (status, sender, and polls) are defined to keep track of the connection status, the sender's information, and the list of polls. These variables will be necessary for updating the Vue application in response to changes in the Waku network.

Notice that we didn’t make WakuNode or any variable interacting with the Waku network directly reactive. As this will trigger issue #1746 due to Waku nodes being too complex for Vue mechanisms to handle, so we have to keep the WakuNode instance outside Vue’s reactive scope.

BTW, this took me almost 3 months to figure out 😭

The WakuNode connection is established using the createLightNode function, optimizing resource usage by creating a Waku light node. This node connects to the Waku network and waits for peers to join using the LightPush and Filter Protocols. We defined a specific Content Topic for this app to categorize messages and should have this format, /{application-name}/{version}/{content-topic-name}/{encoding}, make sure to replace WAKU_CONTENT_TOPIC with your actual Content Topic. and Protobuf is utilized for encoding and decoding messages efficiently to suit the PollQuestionWakuMessage message structure.

After connecting to the Waku network, interaction follows. We created a function called useWaku() that encapsulates and returns all the variables and methods needed to interact with Waku across the entire application.

First, we have the start() function that initiates the WakuNode connection, waits for peers to connect and subscribes to the chosen content topic, before updating the user’s status to status.value = "connected".

Next, we have stop() function that unsubscribes from the Content Topic and stops the WakuNode, before updating the user’s status to status.value = 'not conencted'.

Next, we have the subscribe() function that creates a subscription to the Content Topic using the Waku Filter, receives incoming poll messages, decodes them and updates the polls list. The handleSubscriptionResult function decodes incoming poll messages, checks for duplicates, and updates the list of polls accordingly.

Next, we have the unsubscribe() function that disconnects the app from the Content Topic.

Finally, the publish() function accepts the necessary parameters to create a new poll message and send the encoded poll message to the Waku network using the LightPush protocol.

Implement Wallet Connect Logic

The sender variable in the “waku.ts” composable stores the wallet address of the connected wallet. For us to implement wallet connect, we need to first install “Web3.js” by running the following command in the terminal:

npm install web3

Since Vue 3 uses webpack v5, we need to install Node Polyfill Webpack Plugin to provide the polyfills necessary for emitting Web3.js events in the browser. Run the following command in the terminal to install the Node Polyfill Webpack Plugin:

npm i node-polyfill-webpack-plugin

Then include it in the “vite.config.ts” so that your “vite.config.ts” looks like this:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@/': `${path.resolve(__dirname, 'src')}/`,
    },
  },
  optimizeDeps: {
    include: ['node-polyfill-webpack-plugin'],
  },
  esbuild: {
    supported: {
      'top-level-await': true
    }
  }
});

You will notice we are also supporting top-level-await, this is because we are instantiating WakuNode at a top-level and the Vite build doesn’t support this.

Inside the “client.ts” we will have the following code:

import Web3 from 'web3';
import { useWaku } from './waku';
import { sha256 } from 'crypto-hash';

declare global {
    interface Window {
        ethereum: any;
        web3: any
    }
}

const waku = useWaku()
export const generateUniqueID = () => {
    const userAgentHash = sha256(navigator.userAgent + Math.floor(Math.random() * 90000));
  return userAgentHash;
};

// Validate Ethereum Address
export const validateEthereumAddress = (address:any) => {
    return /^(0x)?[0-9a-fA-F]{40}$/.test(address);
}

export function useWalletConnect() {
    // Improved connectWallet Function
    async function connectWallet() {
        if (window.ethereum) {
            try {
                const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
                window.web3 = new Web3(window.ethereum);

                if (accounts.length > 0 && validateEthereumAddress(accounts[0])) {
                    const walletAddress = accounts[0];
                    waku.sender.value = walletAddress;
                    localStorage.setItem('senderWalletAddress', walletAddress);
                } else {
                    console.error('Invalid Ethereum address detected. Generating fallback ID.');
                    generateUniqueID().then((hashID) => {
                        const newHash = 'abcdef012345'[Math.floor(Math.random() * 12)] + "x" + hashID.slice(-20);
                        waku.sender.value = newHash;
                        localStorage.setItem('senderWalletAddress', newHash);
                    });
                }

                await waku.start();
            } catch (error) {
                console.error('Error connecting wallet:', error);
            }
        } else {
            console.log('No Ethereum wallet detected.');
        }
    }


    async function disconnectWallet() {
        localStorage.removeItem('senderWalletAddress');
        localStorage.removeItem('polls');
        // stop waku's light node
        await waku.wakuNode.stop();
        waku.stop()
        waku.sender.value = ""
        waku.status.value = "connecting..."
        waku.polls.value = []
    }
    async function signMessage(msgid: string, stringifiedMessage:string) {
        const messageToSign = `Message ID: ${msgid}, Content: ${stringifiedMessage}`;
        let signature;
        try {
            signature = await window.ethereum.request({
                method: 'personal_sign',
                params: [messageToSign, waku.sender.value],
            });
            return signature
        } catch (signError) {
            console.error('Error signing the message:', signError);
            return;
        }
    }

    return {
        connectWallet,
        disconnectWallet,
        signMessage
    };
}

The above code enables users to connect their crypto wallet to the app as a means of identification. In this scenario, we used the wallet address as the sender of the poll.

However, some users may not have wallets and we don’t want to limit the application to only users that have crypto wallets. To tackle this, we created the generateUniqueID() function to form a random hash from the navigator.userAgent address of the user’s browser. Then we store the sender’s address in localStorage as “'senderWalletAddress'”.

We also created a disconnectWallet() function to remove the wallet address from localStorage and stop the WakuNode running.

To claim ownership of the polls, users have to sign each poll message using their wallet, for this the signMessage function is executed.

The useWalletConnect composable encapsulates and returns the connectWallet, disconnectWallet and signMessage functions so that they are accessible across the application.

Building the UI Components

Now that we have our logic, we can build the UI to utilize the data and methods in our composables.

We have 3 major components in this app, the NavBar, Home and Polls. Feel free to create your user interface or use mine:

• NavBar: src/components/NavBar.vue

• Home: src/views/Home.vue

• Polls: src/views/.vue

Creating Polls

If you go through my NavBar component code, you will find that we have a ref called poll:

const poll = ref<Poll>({
  question: "",
  options: {
    a: { value: "", votes: 0},
    b: { value: "", votes: 0},
    c: { value: "", votes: 0},
    d: { value: "", votes: 0},
    e: { value: "", votes: 0}
  }
})

This ref is updated by the modal form, and on submit, we trigger the sendMessage function:

const sendMessage = () => {
  const stringifiedMessage = JSON.stringify(poll.value)
  const msgid = Date.now() + Math.floor(Math.random() * 90000).toString();
  const timestamp = new Date().toUTCString()

  // sign message
  signMessage(msgid, stringifiedMessage).then((signature) => {
    // send a message
    waku.publish(signature, stringifiedMessage, timestamp, msgid)

    // reset question state
    poll.value = {
      question: "",
      options: {
        a: { value: "", votes: 0},
        b: { value: "", votes: 0},
        c: { value: "", votes: 0},
        d: { value: "", votes: 0},
        e: { value: "", votes: 0}
      }
    }
    }
    onToggle()
    // redirect user to where the new poll is populated
    if (router.currentRoute.value.path !== "/polls") {
      router.push("/polls")
    }
  }).catch((error) => {
    console.error("Error sending message", error);
  })
}

In the above code, we stringify the poll data which includes the question, and options so that we can publish the poll as a message to Waku. Then we create a msgid and timestamp for the message, before using the user's wallet to sign the message. Once the message is signed, we call the waku.publish(waku.sender.value, stringifiedMessage) function to register the update for other users subscribing to the Content Topic.

Real-Time Voting and Result Polling

In the “Poll.vue” component, we have a handleVote() function:

const handleVote = async (msgid: string, selectedOption: string | number) => {
  loading.value = true
  try {
    // Find the selected poll in the polls array
    let selectedPollIndex = waku.polls.value.findIndex((poll) => poll.msgid === msgid);

    if (selectedPollIndex !== -1) {
      // Update the vote count before publishing
      waku.polls.value[selectedPollIndex].message.options[selectedOption].votes += 1;

      // Create a reactive copy to trigger reactivity
      const reactiveCopy = reactive({ ...waku.polls.value[selectedPollIndex] });

      // Publish the updated poll

      const stringifiedMessage = JSON.stringify(reactiveCopy.message);

      await waku.publish(reactiveCopy.sender , stringifiedMessage, reactiveCopy.timestamp, msgid);

      // Store the msgid in local storage
      votedPolls.value.push(msgid);
      localStorage.setItem('votedPolls', JSON.stringify(votedPolls.value));
    }
    loading.value = false
  } catch (error) {
    console.error('Error in handleVote:', error);
  }
};

This function is triggered when the radio input of any option is clicked. This function collected the msgid and the selectedOption as parameters. Then call the subscribe() function to fetch the latest version of the polls, before updating the vote counts of an option in the poll that has the msgid.

We created a reactive copy of the poll so that the vote count update will be reflected even if the state changes. Then we publish the reactive copy, which will send the updated poll results to all the users that are subscribed to the Content Topic of this app.

To track the polls a user has voted for, we store a “votePolls” array in the localStorage.

Feel free to play around with the functionality and optimize the performance to meet your application requirements.

Summary of the Article

In this comprehensive guide, we embarked on a journey to integrate Waku, a decentralized communication protocol, into a Vue.js application, creating a real-time voting poll dApp. Let's recap the key takeaways from the guide:

• Understanding Waku

  • Explored Waku as a family of protocols facilitating private, censorship-resistant communications over a decentralized network.

  • Examined Waku's features, architecture, and its focus on privacy, decentralization, and adaptability to various platforms.

  • Discussed the different components of Waku, such as Waku Relay, Waku Filter, Waku Store, and Waku Light Push.

• Use Cases of Waku

  • Discussed real-world scenarios where Waku proves invaluable, emphasizing its role in privacy-focused communication, censorship-resistant messaging, and decentralized communication within dApps.

• Building a dApp with Waku and Vue.js

  • Set up a Vue.js application using Vite and Tailwind CSS.

  • Established a connection to the Waku network, implemented wallet authentication using Web3.js, and integrated the @waku/sdk for decentralized communication.

  • Demonstrated the step-by-step process of building a real-time voting poll, connecting to the Waku network.

As you conclude this guide, consider taking the following actions to further explore and experiment with Waku:

1. Waku Documentation:: Visit the Waku documentation to delve deeper into the functionalities, protocols, and use cases of Waku.

2. Experiment with Additional Functionalities:: Extend the capabilities of your dApp by experimenting with additional functionalities provided by Waku. Explore features like ephemeral messaging, decentralized storage, and more to enhance your decentralized applications.

3. Join the Waku Community:: Engage with the Waku community on forums, social media, or developer channels. Connect with like-minded developers, share your experiences, and stay updated on the latest developments within the Waku ecosystem.

4. Contribute to Waku:: Consider contributing to the Waku project on platforms like GitHub. Whether it's reporting issues, submitting pull requests, or suggesting improvements, your contributions can play a vital role in the growth of this decentralized communication protocol.

For those who are unfamiliar with GitHub Universe, it's a yearly gathering of industry experts, developers, and professionals for two days of networking, conversation, and learning about the latest innovations. This year's theme was AI, security, and DevEx, covered in over 80 sessions with 1,000 speakers.

Opening Keynote

On Day 1, GitHub’s CEO, Thomas Dohmke, kicked off the event with an exciting presentation, revealing GitHub's latest advancements and initiatives.

GitHub's journey with generative AI began in 2020 with the Coding Oracle Paper, exploring the potential of OpenAI's GPT-3 model. This led to the development of Copilot, an AI-powered developer tool that has gained widespread adoption, enabling coding to be 55% more productive. Thomas showcased Copilot's evolution beyond code generation, integrating it into various aspects of the developer workflow, from coding to security scanning and pull requests.

During the keynote, Thomas demonstrated Copilot's integration into GitHub.com, which allows users to generate detailed pull request descriptions directly from the editor. Copilot Chat was also integrated into GitHub.com and various IDEs such as Visual Studio, Visual Studio Code, and JetBrains to provide AI assistance across code editors.

GitHub Copilot's expansion includes Copilot X, Copilot Workspaces, Copilot Enterprise, Copilot Partner Program, Advanced Security, Copilot Chat on mobile, AI-powered regular expression assistants, and integration with external services like LaunchDarkly and Postman. Copilot now provides customization features, allowing organizations to tailor it to their needs.

The keynote also highlighted Accenture's collaboration with GitHub in creating low-latency, interactive user experiences for stateless microservices and integrating Copilot into its automation platforms.

Microsoft CEO Satya Nadella expressed his enthusiasm for GitHub Copilot, emphasizing its transformative impact on his coding experience. He highlighted Copilot's role in reducing drudgery, bringing joy back to coding, and the potential of natural language as a universal programming language.

The keynote concluded with a surprise announcement of a new feature that allows users to edit Copilot's plans, steering it in the right direction for optimal code synthesis, reminiscent of Steve Jobs's famous "One more thing" moments.

So starting from February 2024, GitHub Copilot Enterprise will be generally available for $39 per user per month.

Copilot Enterprise allows developers to onboard quickly, search codebase and documentation, get suggestions based on private code, and review pull requests.

Keynote Day 2: The productivity platform for all developers

GitHub's Chief Product Officer, Inbal Shani, delivered an interesting keynote speech on the second day of the event, emphasizing GitHub's mission to build the best developer tools and empower users in software development.

Inbal discussed the increasing importance of AI across the software development lifecycle, and how GitHub is focused on meeting developer needs at every step. She highlighted the benefits of an AI-powered developer experience and GitHub's plans to provide an efficient workflow that not only serves as a business asset but also makes developers happy and addresses the world's toughest problems.

She also explained how GitHub's collaboration features, such as pull requests and discussions, simplify project management and enable scaling for distributed teams.

The keynote session also focused on GitHub's advanced security features, such as code scanning and dependency scanning, which have contributed to fixing 32 million security issues in 2023. This highlighted the importance of secure software development.

Automation was another key focus, with GitHub Actions helping developers automate workflows, reduce cognitive load, and improve efficiency. GitHub has introduced the new M1 Mac OS larger runners, which enable faster build times and improved scalability.

In the keynote, Inbal reiterated the importance of GitHub's commitment to collaboration and security, with features and tools for project planning and tracking. Advanced security features such as code scanning, secret scanning, and supply chain security contribute to fixing security vulnerabilities 7x faster than the industry average. Dependency scanning is made available cost-free to the open-source community to enhance the safety of applications using open-source.

She also highlighted GitHub's compliance controls for organizations, repositories, and users, which enable administrators to manage their GitHub footprint effectively. Granular access permissions and roles are leveraged to provide better control over access and permissions for repositories. These are made possible with the Enterprise identity integration and features for GitHub Enterprise Server.

Finally, Inbal shared GitHub's initiatives for open-source support, including GitHub Sponsors, GitHub Student Developer Pack, and making Copilot free for teachers, students, and maintainers. This demonstrated GitHub's commitment to supporting the developer community and education.

GitHub Awards 2023

At the event, exceptional projects and individuals in the GitHub Open Source community were recognized and celebrated for their contributions and achievements that have positively impacted the developer community.

The awards were presented across several categories, including Open Source, Education, Customer, and GitHub Stars.

GitHub Certification Testing

During the event, attendees were able to take the exclusive beta GitHub certification exams in person. Those who passed received an Official GitHub Certification in Foundations, Actions, Advanced Security, and Administration.

This certificate is industry-endorsed and demonstrates proficiency with GitHub technologies. It is also complementary to Microsoft's existing role-based certifications, which validate knowledge of foundational DevOps and cloud development concepts.

The certification program is expected to be generally available in early 2024.

Takeaways from GitHub Universe 2023

The GitHub Universe 2023 event was not just a showcase of cutting-edge technologies; it was an invitation to the global developer community to actively engage in the future of software development. The event called developers to action, urging them to explore the newly unveiled GitHub Copilot features, customize them to organizational needs, and contribute to the ever-expanding ecosystem. As we move beyond the event's confines, it's important to stay connected. GitHub encourages event attendees and enthusiasts alike to join community forums, participate in open-source projects, and leverage the recently introduced Copilot API. Embrace the collaborative spirit that GitHub Universe fosters by following GitHub's social media channels, tuning into webinars, and participating in ongoing discussions. The journey doesn't end here; it evolves with each line of code, and GitHub ensures you're part of the narrative.

You can watch the online live stream at your convenience on the Official GitHub Universe website.

Mark your calendars for GitHub Universe 2024, which will take place in San Francisco, CA on October 29-30, 2024. Presale tickets are currently 60% off until November 17, 2023, so don't miss out!

Understanding what motivates community members is key to your community's growth and impact. People in the blockchain and crypto space often join projects intending to find a lucrative source of income or investment while others genuinely believe in the mission and goals of the project. For instance, a developer seeking to build a secure dApp may gravitate toward the Ethereum community, given Ethereum's reputation as a secure blockchain network.

Your ultimate joy as a community manager lies in having members who genuinely believe in and contribute to the project's success. Decentralized communities also wield considerable influence over a project's direction. Hence, it's crucial to find effective ways to manage member behavior and expectations. This is where incentivization comes into play.

Incentivization is a proven strategy to encourage community members to actively contribute to a project's success. Incentives can take various forms, including bounties, referral programs, creative competitions, content creation, and airdrops. In this article, we'll focus on airdrops and how they can be leveraged as a rewarding mechanism within your community.

What Is an Airdrop?

An airdrop is a marketing and promotional strategy involving the distribution of small amounts of a project's assets to individuals' wallet addresses at no cost. Participants receive airdrops as a reward for completing specific tasks, such as advertisements or referrals. This strategy is particularly popular among blockchain startups, aiming to raise awareness and stimulate the circulation of a new token, often associated with an initial coin offering (ICO).

😃 Fun Fact: The term "crypto airdrop" was inspired by physical airdrops that used aircraft to deliver resources, such as weapons, food, or medicine.

Types of Airdrops?

Airdrops are versatile and can be tailored to suit the specific goals and objectives of a project. Understanding the different types of airdrops can help you as a community manager to make informed decisions when planning your incentive programs. Here are the three main types of airdrops:

1. Standard Airdrop

   • Simplicity in Distribution: Standard airdrops are perhaps the simplest form, making them accessible to a wide range of participants.

   • Minimal Requirements: Participants typically only need to provide a valid wallet address, and in some cases, no additional information is required.

   • Token Limits: These airdrops often have a predefined supply of tokens, and there may be a cap on the number of tokens each individual can receive.

   • Time Sensitivity: Some standard airdrops are time-sensitive, creating a sense of urgency to participate.

   • Potential Challenges: However, one challenge with standard airdrops is that individuals could create multiple wallets to maximize their rewards.

2. Bounty Airdrop

   • Task-Oriented Rewards: Bounty airdrops, on the other hand, require participants to actively engage in specific tasks or actions to qualify for free tokens.

   • Task Examples: These tasks may include promoting the project on social media, sharing posts, writing reviews, inviting friends, or participating in other project-related activities.

   • Point-Based Rewards: Participants earn points for completing these tasks, and the number of points often determines the size of their bounty airdrop.

   • Qualification Thresholds: Some bounty airdrops may have minimum point requirements for participants to be eligible for their airdrop.

   • Recruitment Incentives: There could also be referral bonuses or finder's fees for those who bring in new participants.

3. Holder Airdrop

   • Rewarding Loyalty: Holder airdrops automatically distribute tokens to users based on the amount of a particular cryptocurrency they hold in their wallets.

   • Public Ledger Transparency: The blockchain's transparent ledger ensures that token distribution is fair and verifiable.

   • Downsides and Requirements: However, this approach may not suit all participants, as some token holders may not desire additional airdrops.

   • Minimum Holdings: In some cases, holder airdrops may require participants to hold a certain quantity of tokens to qualify, while others may provide pro-rated awards based on holdings.

Each type of airdrop has its unique advantages and challenges, all you need to do is, understand your project's goals and target audience and select the most suitable.

How Do Airdrops Work?

Airdrops operate according to the goals and plans set by the project. Here's a typical process for how airdrops work:

1. Campaign Design: The company designs a campaign to announce airdrop details and eligibility requirements on its website, social media channels, or forums.

2. Collecting Participant Details: The company gathers information from interested participants, including proof of meeting eligibility requirements (such as a link to a post or receipt of a specific amount of token purchase), wallet addresses, and optionally email addresses for newsletters and promotions.

3. Eligibility Verification: The company validates participants' eligibility, often using smart contracts to capture instances that prove a participant met the criteria. For example, a snapshot might be taken to identify wallet addresses holding a minimum amount of tokens at a specific time and date.

4. Token Distribution: The company dispatches tokens to participants' wallet addresses, either immediately after meeting the criteria or at a predetermined date, often during a project's launch.

5. Usage and Benefits: Once participants receive their airdrops, they are free to use them as they see fit or follow the project's terms and conditions. Airdrops can take various forms, such as NFT access tokens for private events, in-game assets, or convertible assets.

Criticism Around Airdrops

Despite the growing popularity and success rate achieved by blockchain projects, there are still potential risks attributed to airdrops. Here are some criticisms that pose a challenge to airdrops:

• KYC Forms: Some airdrops require users to complete KYC (Know Your Customer) forms, which may conflict with the principles of privacy and anonymity in web3.

• Dusting Attacks: Malicious actors may use airdrops to send small amounts of tokens (dust) to trace recipients' transactions, attempting to de-anonymize them.

• Illiquid Altcoins: In some cases, illiquid altcoin projects may use airdrops as a means to inflate token value temporarily and then "pump and dump" them, leaving investors with worthless tokens.

Web3 users must conduct due diligence and verify the legitimacy of projects before sharing personal details or wallet addresses for airdrops.

What's Next?

Now that you have a comprehensive understanding of airdrops and how they operate, you may be eager to explore this incentive mechanism. However, exercise caution to avoid falling victim to fraudulent projects.

Airdrops are just one element of the diverse tokenomics models available to web3 startups. If you are a community manager for a web3 project, consider crafting a strategic plan that aligns with your budget and the project's needs. And, if necessary, explore other marketing and promotional strategies to enhance your community's engagement and growth.

Code can be written in any text editor, but IDEs provide an environment specifically for software development processes like writing the code, testing, building and deploying. Some IDEs have inbuilt browsers, CLIs, databases, version control etc. while some allow you to install extensions of these tools into your IDE.

Among the popular IDEs are IntelliJ IDEA for Java programming, RubyMine which primarily supports Ruby, PyCharm for Python programming, PhpStrom for PHP programming, Eclipse which supports multiple languages, Android Studio for Andriod app development and supports Kotlin and Java, Xcode for IOS app development and supports Object-C, C++ and Swift, AWS Cloud9 IDE which is cloud-based and support multiple languages, Arduino which is mostly used for hardware programming, NetBeans which is one of the best IDE that support multiple languages and finally the IDE we will focus on in the article, although the list continues, Visual Studio Code(VSCode) which is Microsoft-powered IDE and supports the multiple languages.

Each IDE caters to distinct developer preferences, and understanding their capabilities is crucial for selecting the right environment.

Emphasizing the Need for Extensions

Senior developers recognize that while IDEs are robust on their own, they must enhance their capabilities through extensions. This is not just a preference; it's a necessity in today's dynamic coding landscape. AI extensions, in particular, are vital for more efficient and optimized development processes.

This doesn’t mean junior developers should not explore these tools, but you do not want to fully depend on them, as you need to learn some basic processes and understand how these things work before handing them over to AI to do them for you.

Traditionally, for a developer to implement version control in a new environment he/she might need to install a couple of software, set up configuration/authentication/authorization, and then run a series of commands in an external CLI tool. IDEs like VSCode have made these processes seamless by providing extensions that can automate some of these processes with just a single click or shortcut combination.

For instance, in VSCode, there is a GitHub extension that allows developers to quickly search, edit and commit to any remote repository they have access to directly from the VSCode environment.

Life is not hard, you don't just have the right amount of information to make your life easier than it is. 😝

Top VSCode AI Extensions

Now, let's explore the AI extensions that can truly supercharge your coding experience in VSCode. These are the top AI extensions designed to make your development process smoother, more efficient, and more enjoyable:

GitHub Copilot:

Look at Copilot as an assistant developer, developed by GitHub and OpenAI that helps you generate code from simple prompts that describe what you want to implement.

Here is an example of GitHub Copilot in use:

Blackbox:

Blackbox is an AI coding assistant that helps you provide code completion on the go, documentation and debugging suggestions. It also offers features like code chat, auto-completion, AI commit, code and comments suggestions and difference tracking.

Here is an example of Blackbox in use:

Tabnine:

Tabnine, another remarkable coding assistant, offers code chat, unit tests, documentation, legacy code explanation and code completion suggestions based on your code’s structure.

Here is an example of Tabnine in use:

Intellicode:

Intellicode by Microsoft provides easy access to API usage example codes. With just a single click, you can access examples of 100k+ APIs and let you simulate how other developers will use APIs/functions given.

Here is an example of Intellicode in use:

GitLens AI:

GitLens provides rich code authorship visualization via Git blame annotations and CodeLens, allowing you to seamlessly navigate and explore Git repositories and gain valuable insights on repositories using powerful comparison commands.

Here is an example of GitLens AI in use:

Bito:

Bito, powered by ChatGPT and OpenAI, allows you to interact with a chatbot that supports GPT-4 and GPT Turbo 3.5 models in your VSCode. The chatbot provides complex code explanation, text creation, code editing, documentation and more.

Here is an example of Bito in use:

Mintlify Doc Writer:

Mintlify Doc Writer is your savior when it comes to code documentation. It supports multiple documentation formats and programming languages and helps you create documentation once you highlight a code.

Here is an example of Mintlify Doc Writer in use:

Denigma:

Denigma reads and explains code blocks in natural language. Simply highlight a section of code, right-click, and select to explain with Denigma. This tool comes in handy for technical writers.

Here is an example of Denigma in use:

CodiumAI:

CodiumAI powered by GPT-3.5&4 & TestGPT-1, analyzes code and generates tests to catch bugs before you ship. It detects functions and blocks that need testing and creates test cases for each of them.

Here is an example of CodiumAI in use:

What’s Next?

I shouldn’t tell you what’s next, but I will do you the favour.

As we conclude our exploration of these remarkable VSCode AI extensions, it's your turn to take action. Experiment with these tools, elevate your development game and embrace the power they bring to your coding experience.

In this article, I will explain how Intersection Observer can be used to implement this autoplay and pause feature by creating a React custom Hook for use in a TikTok clone.

As a developer, you might want to implement an autoplay feature in a video player application, lazy load an image, or detect when an advertisement is in the viewport of a user’s browser. With Intersection Observer you can do all these.

What is Intersection Observer?

Intersection Observer is a JavaScript browser API that asynchronously monitors the position of DOM elements with respect to the client’s viewport or a root element.

How Intersection Observer works

Basically, the Intersection Observer API triggers a callback function in specific situations.

These situations include when the position of the selected element comes into the client’s viewport, when a selected element intersects a parent or root element, or when the observer is initially declared.

Specifications and browser compatibility

At the time of writing this article, the specifications are still a working draft. However, updates can be found here.

As for the browser compatibility, here is the current report:

Applications for Intersection Observer

Intersection Observer can be used for a wide variety of various applications outside of the scope of this article.

They include optional rendering of DOM elements, lazy loading, loading content on-demand with infinite scrolling, rendering advertisements and animations, and creating carousels.

The example I am using in this article (creating a custom autoplay Hook for a TikTok clone) can help you become familiar with the Intersection Observer API in order to start exploring the other options it can offer your apps.

Using Intersection Observer

Firstly, we want to find out if our browser supports the Intersection Observer API.

We can write a condition to check, like so:

if ('IntersectionObserver' in window) {
    console.log("IntersectionObserver is supported!");
} else {
    console.log("IntersectionObserver is not supported!");
}

The ItersectionObserver object is usually structured like this:

let options= {
    root: null,
    rootMargin: '0px',
    threshold: 0.5
};

const callback = (entries){ // entries = array of targeted elements
    entries.forEach(entry=>{
        // what happens each entry
    })
}

let observerObj = new IntersectionObserver(callback, options);
observerObj.observe();

Here, the IntersectionObserver object accepts two arguments. The callback function, which is triggered after Intersection Observer is executed, and an optional options object. This is an object with certain properties that determine when, and how, the Intersection Observer works.

The callback function

When the callback the function is executed, a list of targeted elements is checked by the Intersection Observer. These elements all have specific properties.

Examples of those properties are:

• boundingClientRect:

• intersectionRatio:

• intersectionRect

• isIntersecting

• rootBounds

• target

• time

These properties are used to check the current element’s behavior relative to their root element.

In this article, we will be using isIntersecting to check if the current entry is intersecting with the root. This will be the indicator that our video is in the viewport, and therefore ready to begin playing.

The options object

The options object contains the following properties:

The root is the browser’s viewport by default, or if set as null. If an element is specified as the root, it has to be a parent to the targeted element. The root is what the targeted element needs to intersect with before the callback function is triggered

The rootMargin sets the margin around the root element before detecting the intersection. By default, it is 0 (which triggers the action exactly when the root property enters the viewport), but it can be valued in the same manner as a CSS margin in case you’d like the callback function to occur at a different moment.

The threshold represents what percentage of the targeted element should intersect root before the callback function is executed. It can be either a number or an array of numbers; the accepted values range from 0 to 1.

If it is 0, it means the first pixel of the target element needs to intersect with the root element before the callback function is executed. if it is 0.5, 50 per cent of the target element needs to intersect with the root, and so on.

Targeting an element to be observed

To target an element with JavaScript, we have to use the querySelector function, which will search the DOM for a given id or class.

In React, we can use the useRef Hook to target an element. Then, we pass targetElement as a parameter in the observe function, like so:

/*
In JavaScript we can use querySelector to select a DOM element like this...
*/
let targetElement = document.querySelector('#item')
observerObj.observe(targetElement)

//In React we can use the useRef hook like this...
let targetRef = useRef(null); //Set a component to be ref of targetRef
let targetElement = targetRef.current
observerObj.observe(targetElement)

In the TikTok clone, we will be using the useRef Hook to target each video component in order to track when it comes into the viewport.

Creating an Intersection Observer custom Hook in React

To create a reusable Intersection Observer Hook, we will create a new function called useElementOnScreen and implement Intersection Observer using options and targetRef we passed in as props:

import { useEffect, useMemo, useState } from 'react'
const useElementOnScreen = (options, targetRef) => {
    const [isVisibile, setIsVisible] = useState()
    const callbackFunction = entries => {
        const [entry] = entries //const entry = entries[0]
        setIsVisible(entry.isIntersecting)
    }
    const optionsMemo = useMemo(() => {
        return options
    }, [options])
    useEffect(() => {
        const observer = new IntersectionObserver(callbackFunction, optionsMemo)
        const currentTarget = targetRef.current
        if (currentTarget) observer.observe(currentTarget)

        return () => {
        if(currentTarget) observer.unobserve(currentTarget)
        }
    }, [targetRef, optionsMemo])
    return isVisibile
}
export default useElementOnScreen

Having understood what the options and targetRef are, we need to pass them as props to the useElementOnScreen Hook, as we will need them as parameters for a new Intersection Observer function.

Then, we set a default state for the element’s visibility as null.

Inside the callback function, we are setting the isVisible state to the value returned if the targeted Element isIntersecting (we are always expecting true or false).

After observing the target element, we return the isVisible state. The returned value of isVisible is what we will use to decide when a video should play or stop.

If the isVisible state of a video component is true we play the video, else if it is false we stop the video.

Using the Intersection Observer custom Hook in a TikTok clone

Setting up the application

For the sake of brevity, I have created a starter project that contains the entire source code of the TikTok clone where we will implement the Intersection Observer hook we just created above. It is available on my GitHub repository.

To start the application running, open your terminal to a new work folder and run the following commands:

git clone https://github.com/wolz-CODElife/Tiktok-clone.git

cd Tiktok-clone

npm install

In the folder downloaded, the following files and directories should be present:

The files and folders we are working with are inside the src.As shown above, I have already included the Intersection Observer hook that we created in the previous section of this article in the hooks directory. All that is remaining to do is to import the useElementOnScreen hooks in the TikTok application.

Setting up autoplay

Now, let’s update the Video.js component to play and stop a video depending on its visibility status.

Inside the Video.js file, put the following code:

import React, { useEffect, useRef, useState } from "react";
import "./Video.css";
import VideoFooter from "./VideoFooter";
import VideoSidebar from "./VideoSidebar";
import useElementOnScreen from './hooks/useElementOnScreen'
import VideoPlayButton from "./VideoPlayButton";
const Video = ({ url, channel, description, song, likes, messages, shares }) => {
  const [playing, setPlaying] = useState(false);
  const videoRef = useRef(null);
  const options = {
      root: null,
      rootMargin: '0px',
      threshold: 0.3
  }
  const isVisibile = useElementOnScreen(options, videoRef)
  const onVideoClick = () => {
    if (playing) {
      videoRef.current.pause();
      setPlaying(!playing);
    } else {
      videoRef.current.play();
      setPlaying(!playing);
    }
  };
  useEffect(() => {
    if (isVisibile) {
      if (!playing) {        
        videoRef.current.play();
        setPlaying(true)
      }
    }
    else {
      if (playing) {        
        videoRef.current.pause();
        setPlaying(false)
      }
    }
  }, [isVisibile])


  return (
    <div className="video">
      <video className="video_player" loop preload="true" ref={videoRef} onClick={onVideoClick} src={url}></video>
      <VideoFooter channel={channel} description={description} song={song} />
      <VideoSidebar likes={likes} messages={messages} shares={shares} />
      {!playing && <VideoPlayButton onVideoClick={onVideoClick} />}
    </div>
  );
};
export default Video;

Here, we imported the custom Hook (useElementOnScreen), then used the value returned (which could be true or false) as the isVisible value.

Note that we set the following options for the Intersection Observer: root is null, which means we are using the window as a parent element. rootMargin is 0px, and threshold is 0.3 which means once 30 per cent of the target element is in the viewport, the callback function is triggered.

Next, we use UseEffect to change the playing state of the video if the isVisible value changes, like so:

if (isVisibile) {
      if (!playing) {        
        videoRef.current.play();
        setPlaying(true)
      }
    }
    else {
      if (playing) {        
        videoRef.current.pause();
        setPlaying(false)
      }
    }

This code means that, if the video is visible, the playing state is set to true. If it is not yet playing, and if the video is not visible, the playing state is set to false.

With this done, we can run the application with the following:

npm start

If everything goes well, we should have something like this:

If you wish to change the videos or even use a live database, edit the video state in App.js.

Currently, we have the following array of objects:

[
    {
      url: 'https://res.cloudinary.com/codelife/video/upload/v1633232723/tiktok-clone/tiktok2_qxafx3.mp4',
      channel: 'DanceCrew',
      description: 'Video by Lara Jameson from Pexels',
      song: 'Bounce - Ruger',
      likes: 250,
      messages: 120,
      shares: 40
    },
    {
      url: 'https://res.cloudinary.com/codelife/video/upload/v1633232725/tiktok-clone/tiktok1_np37xq.mp4',
      channel: 'Happyfeet',
      description: '#happyfeetlegwork videos on TikTok',
      song: 'Kolo sound - Nathan',
      likes: 250,
      messages: 120,
      shares: 40
    },
    {
      url: 'https://res.cloudinary.com/codelife/video/upload/v1633232726/tiktok-clone/tiktok3_scmwvk.mp4',
      channel: 'thiskpee',
      description: 'The real big thug boys💛🦋 The real big thug boys💛🦋 ',
      song: 'original sound - KALEI KING 🦋',
      likes: 250,
      messages: 120,
      shares: 40
    },
  ]

Conclusion

Having created the application successfully, we should have learned how Intersection Observer works and how you can use it to implement an autoplay feature similar to that in TikTok or Instagram.

With this knowledge, you can try implementing lazy loading images, carousels or even an infinitely scrolling blog feeds page!

You can check the live demo of my TikTok clone here.I advise viewing it on a desktop browser for the best experience.

If you have any questions or remarks, please feel free to let me know in the comments.

In this article, we will discuss what a proxy server is, why you should use a proxy server in development, and use cases for proxying requests in a React application. Then, we will implement a real-life example of setting up a proxy server in React.

What is a proxy server?

A proxy server is a system or application that acts as a conduit between a client application and the server when it requests resources.

The diagram above illustrates how proxy servers work.When you make a request to a server, it is routed through the proxy, which receives the response from the server and transmits the information back to the client.

Why you should use a proxy server in development

You might be asking why it’s necessary to route some requests through a proxy before sending them to the server. The following scenarios need the use of a proxy server:

Need to protect your client from cross-site attacks? Proxy servers add an extra degree of protection by allowing server responses to be validated before being delivered to the client.They can be used as web filters and firewalls.

To avoid crashes, bandwidth must be conserved and server traffic must be regulated. Proxy servers can cache requests and server responses so that not all queries are transmitted to the server at the same time. This is typically done when dealing with static information and huge files.

Proxy servers are useful when client data must be protected or a request must be made anonymously.Proxy servers do not provide information to the server, such as the client’s location or IP address. Because the requests are not sent on a known network, this helps clients keep their data private by preventing hackers from intercepting important information.

Additionally, proxy servers can specify which requests are allowed and which are not. And finally, proxy servers can be used to log requests and the clients that make them within organizations that require it.

Use cases for proxying requests in a React application

After understanding why proxy servers are required, it is critical to understand real-life scenarios in which proxy servers can be implemented. Some examples of proxying requests in React applications are listed below.

First is requesting HTTPS APIs in development (https://localhost). Browsers have cross-origin limitations that block HTTPS API requests from HTTP sites running on localhost. Proxy servers can assist in redirecting requests to APIs without having to go via the browser’s default request options, which helps to evade several cross-origin limitations.

The second step is fetching data from cross-origin APIs that don’t support CORs in web browsers. Certain APIs, regardless of the Hypertext Transfer Protocol, don’t support CORs for security concerns, and browsers impose same-origin policies to protect users from cross-site scripting (XSS). Proxy servers can be used to make API calls and then transmit the results to the web browser.

Finally, there is obtaining media resources from the server. A proxy server can be used to cache media files from the server, eliminating the need to send requests for such files to the server every time they are needed.

How to set up a proxy server in React

There are two common approaches to setting up proxy servers in React applications developed using CRA. We have the default CRA proxy option as well as the npm package http-proxy-middleware.

Please note that these methods are only effective in the development. I recommend following these guides to implement proxies in production:

• How to implement proxy server in Express

• How to use Nginx as a reverse proxy server

First, we will set up the application with CRA so we can set up the proxy servers.

Create React App setup

Make sure you have Node installed on your computer to use CRA. Then, in a new directory, start a terminal and run the following command:

npx create-react-app proxyclient && cd proxyclient

The command above will create a new directory called proxyclient and set the terminal directory to /proxyclient.The following folders and files should be present in the folder:

The package.json file should also have a similar structure:

{
  "name": "proxyclient",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.3",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Edit the App.js file in the src folder to include the following code:

import React, { useEffect } from 'react'
const App = () => {
  useEffect(() => {
    fetch('https://google.com/search?q=javascript')
      .then(resp => {
        console.log(resp);
        console.log('======success=======');
      })
      .catch(err => {
        console.log('======failure=======');
        console.log(err);
      });
  }, [])
  return (
    <div>App</div>
  )
}
export default App

Above, the fetch function is used to make a request to the cross-origin URL https://google.com/search?q=javascript.

The application server should then be started so that we can view the response. Run the following command in the project directory’s terminal to start the application server:

npm start

By default, the above command will start listening on port 3000 on localhost or 127.0.0.1.If you open a browser and type “localhost:3000,” you should see something like this in the console:

Using a CRA default proxy

To avoid this problem, we’ll define our CRA’s default proxy by including a proxy field in the package.json file like this:

{
  ...,
  "proxy": "https://www.google.com",
  ...
}

Then, in the App.js file, change the fetch request like so:

fetch('/search?q=proxy')

Above, we removed the origin and structured the request URL as if it were a same-origin request. The request should be successful, as shown in the browser console. It should output something like this:

Take notice of the URL in the response; it was transmitted to the browser as a same-origin, which resulted in http://localhost:3000/search?q=proxy, and the CORs error was gone.
The browser receives the request and transmits it to the proxy server, which then redirects the request to the actual API server specified in the package.json file.

We may also make requests to several servers by specifying the routes that should be used to target a specific domain. To accomplish this, we’ll structure our proxy field in the package.json file like so:

{
  ...,
  "proxy": {
    "/search" : {
      "target" : "https://www.google.com",
      "changeOrigin" : true
    },
    "/jobs" : {
      "target" : "https://stackoverflow.com",
      "changeOrigin" : true
    }
  }
  ...
}

Above, we defined two paths: /search and /jobs, which targets two separate domains.

When we execute a fetch request on /jobs, the browser sends the request as http://localhost:3000/jobs, but the proxy server forwards it as https://stackoverflow.com/jobs.

Using a manually created proxy in Create React App

If you don’t want to use the default CRA proxy, you may use the http-proxy-middleware npm package. Just note that this feature is available in react-scripts@2.0.0 or higher.

This package must be installed as a project dependency before it can be used. To do so, open a terminal and execute the following command in the project directory:

npm i http-proxy-middleware --save

Ensure you don’t have proxy defined in the package.json file, then create a new file named setupProxy.js in the src directory. Add the following code snippet to the setupProxy.js file:

const { createProxyMiddleware } = require('http-proxy-middleware');
const proxy = {
    target: 'https://www.google.com',
    changeOrigin: true
}
module.exports = function(app) {
  app.use(
    '/search',
    createProxyMiddleware(proxy)
  );
};

The code snippet above exports a function to the application so that the proxy middleware is registered to the application as soon as the development server starts up, without the need to import it into any file. Once the application is launched, it will start automatically.

We used createProxyMiddleware from http-proxy-middleware that we installed previously to register a proxy target for /search.

In cases when there are several proxy targets, we simply call the app.use function as follows:

const { createProxyMiddleware } = require('http-proxy-middleware');
const proxy = {
    target: 'https://www.google.com',
    changeOrigin: true
}
const proxy2 = {
    target: 'https://www.stackoverflow.com',
    changeOrigin: true,
}
module.exports = function(app) {
  app.use(
    '/search',
    createProxyMiddleware(proxy)
  );


  app.use(
    '/jobs',
    createProxyMiddleware(proxy2)
  );
};

Above, we called the app.use method after creating another object named proxy2 that included the proxy parameters of the other target domain in order to construct a proxy middleware.

Conclusion

You may expect better security, confidential requests, regulated requests, and other benefits when you use proxy servers in your client applications. Now that you know why and how to use a dev proxy server with CRA, I encourage you to put it to use in your next project.

Every design system’s essential characteristic is space, which determines whether or not other components can be accommodated and where they are placed. The concept of spacing and the standardization of UI component spacing are grouped under a design ideology called the spacial system.

In this article, we will look at how the spatial system affects design systems, how to standardize spacing using spatial system principles, and some best practices for spacing components in design systems.

The only thing you will need to understand this tutorial is working knowledge of HTML and CSS.

How a spatial system plays a role in a design system

A spatial system is a collection of design guidelines that coordinate the spacing, sizing, and measurement of UI components in white space. Prioritizing the spatial system ensures uniformity and consistency, and enhances the user experience.

The following are four examples of spatial systems that can be used and suggested:

4-point grid system

The 4-point grid system is a rigid grid layout based on incrementing space values by multiples of four.

8-point grid system

This spatial system, like the 4-point grid system, is based on increments of space values by multiples of eight.

Simple grid system

This spatial system is built on a 12 column rule offered by the standard CSS style guide. Every row with a 100vw of media has these 12 columns.

Flexbox grid system

The flexbox grid system is derived from the basic CSS flex display property.

What to consider when implementing a spatial system

Spatial systems may be applied to UI attributes such as margins, paddings, z-indexes, and borders, among many others.

You should always specify a base unit before adding spatial systems to a design. This will help you to evaluate which spatial system you will use in your design. You’ll notice certain differences in the pattern of size increments in different designs. Some designs employ 4pt, 5pt, 6pt, 8-point, and 10pt increment schemes, as well as irregular increments. There’s nothing wrong with picking a different system to use, as long as it’s defined and there’s a good rationale for it.

There are several variables to assess when selecting a spatial system to decide whether it is appropriate for the use case. The following are some of these variables:

User needs

Consider how users will interact with your design when considering spatial systems. Do they require larger typography to access information, or do they require less space to access a feature? Before deciding which spatial system is appropriate, user testing and surveys should be conducted for how users will interact with a design.

Adaptability

This is a feature of a design that allows it to be displayed in any format, including landscape or portrait in small and large devices. When constructing a design with this attribute, the spatial system’s flexibility and size alternatives are critical.

Responsiveness

A responsive design is flexible and adaptable to changing circumstances. Choosing a spatial system for this sort of design will also necessitate a great deal of size flexibility and control.

Strictness

This design is difficult to adapt to changes and is difficult to fit into a variety of layouts or media sizes. As a result, it’s critical to choose a spatial system that will maintain the design acceptable on every layout it’s displayed on.

These variables are also influenced by the units used to measure the design dimension’s points. As stated previously, there are designs that allow for flexibility or rigidity in both the units and the designs.

The three most common design units are em, rem, and pixels. Pixels are rigid and precise, but ems and rems are variable and based on the parent element’s font size.

Comparing em, rem, and pixel units

Em is the em value multiplied by the parent element’s font size’s pixel value. As a result, if an element’s parent has a font size of 32px, the element’s 10em will look like

Rem is the pixel value of the root element’s font size of an HTML page multiplied by the rem value. As a result, if an element’s root font size is 64px, the element’s 5rem will be

The pixel value of the element size is the actual pixel value. If the element’s size is 1px, so is the pixel value.

Let us look at some instances of how to apply a spatial system design now that we have a better understanding of the elements that decide which spatial system to employ, and the units of spatial systems in design.

Applying a spacial system in web design

Because it is a fairly popular and suggested system to adopt, I have picked the 8-point grid system to show how spatial systems might be used in design in this article. We’ll talk about how to apply this approach to the following spatial properties.

First, let’s discuss the margin. The margin is an empty space between UI components that is offset from the component’s border. Here’s an example of how to use margins in an 8-point grid system.

The padding is the empty space between a UI component’s border and its content; it is inset to the component’s border and outset to the component’s content. Here’s an example of how to use paddings in an 8-point grid system.

The border is a visibly spaced line around the boundaries of a component. Here’s an example of how to use borders in an 8-point grid system.

The line height is the gap that contains the content of a line of text. The size of the text that may be handled in one line is determined by the line height. Here’s an example of how to use line height in an 8-point grid system.

Shadows are a visual effect that uses space slightly out or inside an element to project the light’s perspective on it. Depending on the shadow style, shadows have either a margin or padding overlay (inset or outset). Here’s an example of how to use shadow in an 8-point grid system.

8 best ways to define component spacing in a design system

When designing, using the best or most suggested spatial system is insufficient. There are a number of other practices that can help to improve a design’s outcome. Let’s take a look at some of the best practices for spacing components in design systems.

The first step is to create a wireframe for your white space design. Before commencing the real design, it’s critical to map out the information hierarchy and how to handle white space. This will limit the number of extraneous edits or modifications.

Second, try adopting the Gestalt principle of proximity. Using the Gestalt principle helps us learn how to quickly communicate information to our audience through the utilization of space. This will aid in maximizing existing resources for information transmission, even if they are insufficient.

Third, set memorable base numbers and expectations. Most people are familiar with a base 10 number system, so this makes predicting the next value in a sequence easy.

Fourth, try scaling with fixed increments. When working with components of varying sizes, remembering the next level of measurement might be challenging. It will be easy to figure out which value comes next in succession if the measurement has a set pattern of increments.

Fifth, name dimensions for easy reuse. Sizes and measurements named for easy memorization and reusability by others, as embraced by design systems like Bootstrap and Material UI, are helpful.

A collection of dimensions, for example, may be called as follows:

margin: 8px; // m-sm
margin: 16px; // m-md
margin: 32px; // m-lg
margin: 64px; // m-xlg

People will be able to read meaningful names to the measurements instead of remembering figures, or having to do a calculation every time the dimensions are needed, if standard size naming is used, such as sm (small), md (medium), and lg (large).

Sixth, use the grid as a component and not as space. Grid is a component that utilizes space, yet it is frequently misunderstood as a space itself. Even when utilizing grids, it’s still vital to manage space (margin, padding, gutter, and so on).

Seventh, handle overwriting the default line height. When dealing with textual content, many individuals overlook the amount of space that the text takes up. There will be inconsistent line height, especially in circumstances where the font size fluctuates, which will affect the design by creating disordered whitespace or even clusters.

Finally, organize content and visual hierarchy. Prioritizing the arrangement of information is critical when using space. Communication may not be effective if content is not organized logically according to its importance.

Conclusion

After reading this article, readers should have a better understanding of the importance of spacing in design systems and how to use spatial systems. There are a number of other design system aspects that were not covered in depth in this article. To discover more about design systems, visit https://www.designsystems.com/.

If you have any more questions or comments, please leave them in the comments section below.

Many developers create PWAs (progressive web applications) to create accessible, native-like experiences for their users, but they do not understand what they are or why they are called “progressive.”The phrase “progressive enhancement,” which we will discuss later in this article, is inspired the “progressive” in PWA. As a developer, it’s important to know why progressive enhancement is a necessary piece of knowledge to have in your tool belt.

In this article, we’ll go over the basic principles of progressive enhancement, as well as the relevance and criticisms of using it in web development.

What is progressive enhancement?

Progressive enhancement is a web design methodology that ensures that the content of the web app reaches all users first, regardless of their digital advantage, before those with more advanced browser features and internet connection receive augmented content.

In “graceful degradation,” web content is designed for the best experience and delivered to users with the latest browser versions first, then degraded to work well with older browser versions. Progressive enhancement does the opposite.

The rule of “separation of presentation and content, separation of content and style, or separation of semantics and presentation” is also known as progressive enhancement in markup circles.

Core principles of progressive enhancement

There are a number of guidelines that will help you stick to the progressive enhancement approach to web design. They are as follows:

First, all web browsers should be able to access basic content.There are a variety of web browsers available, each with its own set of features and capabilities.It may be hard to design a website that works with all of the different browsers available. However, there are global web standards that are accepted by all browsers.

Prior to implementing new features to explore specific browsers, websites should follow web standards to ensure that they are accessible to everyone.

Second, basic functions and standard events should be available in all web browsers. Before implementing custom events to handle advanced functionalities, it is vital to use all of the normal DOM events to manage user experience while constructing websites.

Third, all content should be contained in minimal, semantic markup. In web design, it is critical to focus on content delivery rather than aesthetics. The content of the website should be correctly structured, as allowed by standard semantic HTML. For example, instead of pictures of text, suitable typography HTML semantics can be used to show text. This enhances the website’s content accessibility for people who may not be able to view images.

Fourth, externally connected JavaScript should provide enhanced functionality. The usage of third-party JavaScript libraries to provide expanded functionality should come after the site has proven that it can provide basic functionality to users who do not have access to such third-party libraries.Even though certain web browsers do not enable JavaScript, users should still be able to access and interact with some information.

Fifth, CSS that is externally connected should provide improved layout. Users should be able to see the website without any CSS styling and it would still be presentable.The purpose of CSS styling is to improve the layout of a website and offer some additional designs that HTML cannot supply.The usage of CSS should not be misused to the detriment of the website’s accessibility. For experimental or nonstandard style attributes, CSS additionally supports vendor prefixes.

Lastly, end-user web browser preferences should be respected. Users should be able to use whichever browser they wish, and should not be compelled to use a certain browser in order to access website content.

Practical examples of progressive enhancement

Have you ever come across a website feature that is available when your computer is connected to the internet, but unavailable when your computer is disconnected from the internet? This is a regular occurrence in progressive web applications (PWAs), which are a perfect demonstration of progressive enhancement.

There are other examples, such as alternative content if JavaScript is not enabled in the client’s browser. In frameworks like Angular, Vue, or React, an error handler is required to show alternative content from the application if JavaScript is not enabled in the client’s browser. This is because the application will not operate properly if JavaScript is disabled, thus, rather than putting the user through the pain of accessing an application that isn’t entirely functioning, the developer provides alternate content.

It’s common practice in React to add a noscript tag with a message indicating that JavaScript is necessary for the app to execute. This tag may be found in the body tag of the index.html file in the public folder in apps produced with create-react-app. It appears as follows:

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
</body>

Web fonts are another example of progressive enhancement. When custom fonts are used to style a website, they may not be supported by all browsers, or may take a long time to load. If the custom font fails to load, the developer provides a fallback font.

Here’s an example of importing an alternate font, but using the default font:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body{
   font-family: 'Open Sans', sans-serif;
}

Above, we imported Open Sans and set the body font-family to Open Sans, sans-serif. sans-serif, which was added to the font list, is a generic typeface that is supported by nearly all browsers. If the imported font (Open Sans) fails to load, the font-family will be changed to san-serif.

Our final example of progressive enhancement concerns HTML5. When using the HTML5 video element, you may define the text that will be displayed if the browser does not support videos or the file type. It’s often done by inserting text between the opening and closing tags, as shown below:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

If your browser does not support the video element, the words “Your browser does not support the video tag” will appear in the video’s section.

Why you should apply progressive enhancement to your web app

When it comes to online content delivery, there are a variety of challenges that might arise that can be caused by either the user or the developer. Progressive enhancement is a solution that was created to mitigate the consequences of these issues, or at the very least provide the end-user with some, if not all, information.

Other reasons to consider practicing progressive enhancement include:

• Improved SEO: using HTML semantics correctly on a website will boost the SEO of that site, because the information will be more accessible to screen readers, web spiders, and search engines

• Improved compatibility and accessibility: the website’s content should be able to load on a variety of devices, so if a user’s device or browser does not support the language used to develop the website, there will be fewer errors

• Simple scalability: the website should reach its widest audience while still delivering adequate information.Programmers should be sure they can raise their workload while still delivering information to users

• Improved speed and user experience: using suitable semantics enhances the rate at which the contents are loaded, and when a website loads its contents quickly, the user experience is enhanced

How to implement progressive enhancement

The fundamentals of progressive enhancement in web design are to supply the user with the appropriate content they need if the upper layer of the web design is unavailable.

For example, say we have a site designed with JavaScript as the third layer, CSS as the second layer, and HTML as the first layer. The site design should work fine even if the JavaScript isn’t there, implying that JavaScript is only a supplement to what is already working properly.

Let’s have a look at how this works with a sample dropdown button.

First layer: HTML

This layer is a semantic markup that allows text-based, archaic browsers, screen readers, and user agents to correctly browse and access the website’s content.

For the dropdown button, here’s an example of semantic markup:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dropdown</title>
</head>
<body>
    <button id="dropbtn">Navigation Menu</button>
    <ul id="ul">
        <li><a href="/home"></a>Home</li>
        <li><a href="/about"></a>About</li>
        <li><a href="/contact"></a>Contact</li>
        <li><a href="/signin"></a>Signin</li>
    </ul>
</body>
</html>

The dropdown menu is organized in an unordered list, and the button is currently not functional. As a result, the menu list will remain static, with no ability to collapse or expand it.

When you run the above code in your browser, you should see the following:

Second layer: CSS

This is the initial layer of additional functionality. CSS may or may not bring functionality to a webpage; it is mostly used to organize and enhance the layout in order to give the website a more visually appealing appearance.

An example of a CSS enhancement is as follows:

<style>
    button {
        border-radius: 20px;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        background: #ccc;
        transition: all ease 0.2s;
    }
    button:hover {
        box-shadow: 2px 2px 4px rgb(90, 90, 90);
        filter: invert(1);
    }
    ul {
        list-style: none;
        padding: 0px;
        width: 250px;
    }
    .active {
        height: 0px;
        overflow-y: auto;
    }
    li {
        height: 25px;
        padding: 10px;
        background-color: #ccc;
    }
    li:hover {
        filter: invert(1);
    }
    li a {
        height: 100%;
        width: 100%;
        color: black;
        text-decoration: none;
    }
</style>

The dropdown should appear like this after adding the CSS styles between the head and body tags of the webpage:

Third layer: JavaScript

This layer is the functionality layer; we may choose to manipulate the DOM in any way we want to generate new user experiences, but it’s not required.

Without this layer of JavaScript, our dropdown is still accessible. Let’s have a look at what it’ll look like once we’ve added additional functionality scripts.

Here’s an example of JavaScript functionality that our dropdown may have:

<script>
    window.addEventListener('load', () => {
        dropDownMenu = document.querySelector('#ul')
        btn = document.querySelector('#dropbtn')

        dropDownMenu.classList.add('closed')
        btn.addEventListener('click', (e) => {
            e.preventDefault()
            dropDownMenu.classList.toggle('closed')
        })
    })
</script>

In the code above, we listen to the window.onload event, then use querySelector to select the dropDownMenu and btn. We then add the default class closed to the dropDownMenu to collapse it. The closed class is then toggled whenever the btn is clicked.

Having added this script just before the body closing tag of the webpage, the dropdown should look like this when the page load in the browser:

The menu list is collapsed; however, if you click the Navigation Menu button, the menu list should expand as follows:

We were still able to offer access to the menu list before adding each successive layer of enhancement, even though this is a very user-friendly experience.

Criticism of progressive enhancement

As appealing as the concept may appear, there are still many opposing viewpoints on progressive enhancement.

Some individuals believe it is a waste of time, while others believe that users should upgrade their browsers to match the website’s standards. Progressive enhancement is also thought to be for users who disable JavaScript in their browser on purpose, which is incorrect. Regardless of whether JavaScript is disabled intentionally or not, the user should be able to view the website’s content.

Others believe that progressive enhancement is only available in outdated browsers. But users may use whichever browser they like, regardless of how old or new it is. It is the developers’ responsibility to ensure that the website is compatible with any browser that attempts to access the website’s contents.

Closing thoughts

Progressive enhancement is more concerned with a website’s long-term viability. It will be easier to expand and transition to better frameworks and technologies in the future if you use this methodology.

I hope that readers will understand the concept of progressive enhancement and start putting it into practice. To put your knowledge of progressive enhancement to the test, create a progressive web application (PWA) and evaluate if it fits the progressive enhancement standards discussed in this article.

For Ethereum-based applications, ERCs (Ethereum Request for Comments) are standards that include name registries, package formats, libraries, and token requirements. To enable other developers to predict how a set of functions are implemented even without access to the source code of apps that adhere to these standards, this set of standards describes how those functions will be implemented or interacted with in applications and smart contracts.

Given the size of the Ethereum community and the diversity of developer skill levels and implementation methods, ERCs are essential to the Ethereum ecosystem. These guidelines serve as a framework to guarantee that applications and smart contracts are constructed in a consistent manner so that other people can contribute to them.

Before ERC-4626, about 25 ERC standards have been successfully deployed, including ERC-20 (fungible tokens), ERC-721 (non-fungible tokens, or NFTs) and ERC-1155 (the single smart contract multi-token).

There has not been a simpler way to implement yield vaults than ERC-4626. By providing a single API that allows minting tokens from multiple chains on a shared interface, ERC-4626 made varying protocols interoperable.

This article will explain what ERC-4626 is, how yield-bearing vaults work, and how to create a yield-bearing vault ERC-4626 token smart contract.

What are yield-bearing vaults?

Smart contracts are created to ensure that agreements between various blockchain transactions are fulfilled.A yield-bearing vault is a smart contract that allows users to deposit different ERC-20 tokens to a pool of tokens in exchange for vTokens (vault tokens).

Users redeem vTokens for initial capital, plus any profits made. The deposited tokens are commutated (pooled) with other comparable crypto assets and distributed over many protocols with the ability to yield profit in the shortest amount of time.

A yield-bearing vault ranks different protocols according to which are the most profitable, and then distributes a fraction of the token pool to the best yielding protocols while keeping a reserve of tokens for users who want to withdraw their funds. The vesting procedure repeats after the harvesting profits are made. Then, the vault converts them back to the initially deposited tokens.

The following diagram depicts how yield-bearing vaults work:

The diagram above may be broken down into a process as follows:

To begin, vault participants must deposit tokens. The vault groups similar ERC tokens into a pool. Participants in the vault are allocated vault tokens, which reflect their claim to the tokens in the pool.

To optimize yield, the vault utilizes a preprogrammed strategy. This strategy looks for the opportunity with the highest yield, and reallocates a percentage of the tokens to optimize pool profits while keeping some in reserve.

When users withdraw their tokens, they are first taken from the vault reserve and then from the yield pool. A withdrawal charge is calculated as the sum of gas fees, strategy fees, and treasury fees when participants withdraw.

Use cases for yield-bearing vaults

You might be wondering how to use yield-bearing vaults now that you know how they work. The following are some examples of yield-bearing vault applications:

• Funding: DAOs and governments employ yield-bearing vaults to raise funding without crowdsourcing

• Crypto lending: companies like Yearn Finance provide protocols that allow users to maximize their profits by lending and selling crypto assets

• DCA (Dollar Cost Averaging) vaults: DCA vaults employ yield-bearing strategies to optimize profits

What is ERC-4626?

The “tokenized vault standard,” also known as ERC-4626, is a standard protocol for tokenized vaults that represents shares of yield-bearing tokens and builds on the ERC-20 token standard.

In other words, ERC-4626 is an extension of ERC-20 that adds new functionality to allow users to profit from their stakes. Previously, using ERC-20 standards, users could only withdraw less than or equal to the amount of tokens they deposited in their account. ERC-4626 allows users to withdraw more than their initial payment over time, based on the amount of profits the vault has generated.

As an extension of ERC-20, ERC-4626 implements the following:

• Deposits and withdrawals

• Vault balances

• Interfaces

• Events

History of ERC-4626

On December 22, 2021, Joey Santoro, the creator of Fei Finance, and five other writers proposed ERC-4626 as an Ethereum Improvement Proposal (EIP) to address the absence of standardization for yield-bearing tokens, which is a problem in decentralized finance.

If you’ve ever wondered how the number “4626” came to be, T11s, a coauthor of the ERC-4626, revealed in a tweet that Joey had suggested the numbers to him during a workout and that the name sounded better than the original proposal of “4700.”

How to write an ERC-4626 vault contract

After establishing your license identifier and version, the first step in building our vault is to create your ERC20 and ERC4626 interface, also known as IERC20 and IERC4626. Keep in mind that your contract must use every function in your interface; Solidity’s interface has a defined function that is implemented together with the logic. They are inherited, and the original contract makes use of their functions.

Below is an IERC20 interface:

// SPDX-License-Identifier: MIT
pragma solidity 0.8.7;

interface IERC20{

    function transferFrom(address A, address B, uint C) external view returns(bool);

    function approve() external view returns(uint256);

    function decimals() external view returns(uint256);

    function totalSupply() external view returns(uint256);

    function balanceOf(address account) external view returns(uint256);

    function transfer(address D, uint amount) external ;
}

Below is an IERC4626 interface:

//SPDX-License-Identifier: MIT
pragma solidity 0.8.7;

interface IERC4626 { 
    function totalAssets() external view returns (uint256); 
}

After creating your interface, import them into your contract with the ERC20 token standard.

The next step is to write your contract. Give your contract a name, and import the necessary files and libraries.

//SPDX-License-Identifier: MIT
pragma solidity 0.8.7;

// Import the necessary files and lib
import "./Interfaces/IERC4626.sol";
import "./Interfaces/IERC20.sol";
import "https://github.com/Rari-Capital/solmate/blob/main/src/tokens/ERC20.sol";

// create your contract and inherit the your imports
contract TokenizedVault is IERC4626, ERC20 {

}

Then, create events. Here, there will be two events: a deposit event for users to deposit tokens, and a withdrawal event for users to request withdrawals:

// create an event that will the withdraw and deposit function
    event Deposit(address caller, uint256 amt);
    event Withdraw(address caller, address receiver, uint256 amt, uint256 shares);

The ERC-20 token you imported will be an immutable asset to be used as a constructor. To do this, you will create an immutable variable called asset that references your ERC20.

After that, make a mapping to demonstrate the user’s status as a shareholder following the deposits:

// create your variables and immutables
    ERC20 public immutable asset;

// a mapping that checks if a user has deposited
    mapping(address => uint256) shareHolder;

Next, create a constructor that assigns the asset variable to the underlying token whose address associates with the address, name, and symbols of your ERC20 token:

constructor(ERC20 _underlying, string memory _name, string memory _symbol )
     ERC20(_name, _symbol, 18) {
        asset = _underlying;
    }

Now, write the function for your vault after configuring the contract’s assets and events. A user should be able to deposit tokens for the contract to function as a vault; the user receives proof of deposit after deposit, referred to as “shares”. The user will use this to claim ownership of her shares during withdrawal:

// a deposit function that receives assets from users
    function deposit(uint256 assets) public{
        // checks that the deposit is higher than 0
        require (assets > 0, "Deposit less than Zero");

        asset.transferFrom(msg.sender, address(this), assets);
// checks the value of assets the holder has
        shareHolder[msg.sender] += assets;
// mints the reciept(shares)
        _mint(msg.sender, assets);

        emit Deposit(msg.sender, assets);

    }

Before the function transfers or accepts the token into the vault, perform a check to ensure the user is depositing an actual token (and not zero tokens). The user becomes a shareholder, and each shareholder owns shares equal to the amount they deposited in vault tokens; so, if they deposited 50 ETH, they now own shares equal to 50 iETH.

The following function gives the total amount of assets deposited in this vault:

// returns total number of assets
    function totalAssets() public view override returns(uint256) {
        return asset.balanceOf(address(this));
    }

Implementing a redeem function will come next. This internal function will check whether a user has shares, and if the number of shares is more than zero. If the user is a shareholder, he may redeem any number of shares from the holdings assigned to him.

Before executing the burn functions that convert the shares into the same asset tokens that were initially deposited, we assign a fixed ten percent interest on the number of shares the user owns.

Note that the contract owner may adjust the interest rate on shares as desired.

Finally, it emits the withdrawal event to grant the user access to the assets:

// users to return shares and get thier token back before they can withdraw, and requiers that the user has a deposit
function redeem(uint256 shares, address receiver ) internal returns (uint256 assets) {
        require(shareHolder[msg.sender] > 0, "Not a share holder");
        shareHolder[msg.sender] -= shares;

        uint256 per = (10 * shares) / 100;

        _burn(msg.sender, shares);

        assets = shares + per;

        emit Withdraw(receiver, assets, per);
        return assets;
    }

The withdraw feature is last. A vault that permits deposits but not withdrawals is considered malicious.

To withdraw, the redeem function is invoked by the withdraw function, which converts shares into asset tokens and calculates interest on the asset. Then, the user can withdraw her assets and interest using the following:

// allow msg.sender to withdraw his deposit plus interest

    function withdraw(uint256 shares, address receiver) public {
        uint256 payout = redeem(shares, receiver);
        asset.transfer(receiver, payout);
    }

}

The whole contract code can be found in this GitHub gist.

Conclusion

After reading this article, you should hopefully have a better understanding of what an ERC, ERC-4626 tokens, and yield-bearing vaults are, and how to write a yield-bearing vaults smart contract for ERC-4626 tokens.

You can also read the documentation I wrote on the Ethereum official website for ERC-4626. Feel free to leave a comment in the comment section below! 🥂

Contribution to open source projects raises concerns within the Solidity community because these projects have real-world consequences for people’s money, and when developers from different backgrounds collaborate on a project, it is almost certain that there will be errors and code conflicts in the applications. This is why practicing proper standards for DApps is so critical.

To maintain excellent standards, eliminate risks, mitigate conflicts, and construct scalable and secure smart contracts, it is necessary to study and use the correct implementation of design patterns and styles in Solidity.

This article will discuss the Solidity design pattern; you must be familiar with Solidity to follow along.

What is a Solidity design pattern?

As a developer, you can learn to use Solidity from various resources online, but these materials are not the same, because there are many different ways and styles of implementing things in Solidity.

Design patterns are reusable, conventional solutions used to solve reoccurring design flaws.Making a transfer from one address to another is a practical example of frequent concern in Solidity that can be regulated with design patterns.

When transferring Ether in Solidity, we use the Send, Transfer, or Call methods. These three methods have the same singular goal: to send Ether out of a smart contract. Let’s have a look at how to use the Transfer and Call methods for this purpose. The following code samples demonstrate different implementations.

First is the Transfer method. When using this approach, all receiving smart contracts must define a fallback function, or the transfer transaction will fail. There is a gas limit of 2300 gas available, which is enough to complete the transfer transaction and aids in the prevention of reentry assaults:

function Transfer(address payable _to) public payable {     
  _to.transfer(msg.value); 
}

The code snippet above defines the Transfer function, which accepts a receiving address as _to and uses the _to.transfer method to initiate the transfer of Ether specified as msg.value.

Next is the Call method. Other functions in the contract can be triggered using this method, and optionally set a gas fee to use when the function executes:

function Call(address payable _to) public payable {
    (bool sent) = _to.call.gas(1000){value: msg.value}("");
    require("Sent, Ether not sent");
}

The code snippet above defines the Call function, which accepts a receiving address as _to, sets the transaction status as boolean, and the result returned is provided in the data variable. If msg.data is empty, the receive function executes immediately after the Call method. The fallback runs where there is no implementation of the receive function.

The most preferred way to transfer Ether between smart contracts is by using the Call method.

In the examples above, we used two different techniques to transfer Ether. You can specify how much gas you want to expend using Call, whereas Transfer has a fixed amount of gas by default.

These techniques are patterns practiced in Solidity to implement the recurring occurrence of Transfer.

To keep things in context, the following sections are some of the design patterns that Solidity has regulated.

Behavioral patterns

Guard check

Smart contracts’ primary function is to ensure the requirements of transactions pass. If any condition fails, the contract reverts to its previous state. Solidity achieves this by employing the EVM’s error handling mechanism to throw exceptions and restore the contract to a working state before the exception.

The smart contract below shows how to implement the guard check pattern using all three techniques:

contract Contribution {
  function contribute (address _from) payable public {
    require(msg.value != 0);
    require(_from != address(0));
    unit prevBalance = this.balance;
    unit amount;

    if(_from.balance == 0) {
      amount = msg.value;
    } else if (_from.balance < msg.sender.balance) {
      amount = msg.value / 2;
    } else {
      revert("Insufficent Balance!!!");
    }

    _from.transfer(amount);
    assert(this.balance == prevBalance - amount);
  }
}

In the code snippet above, Solidity handles error exceptions using the following:

require() declares the conditions under which a function executes. It accepts a single condition as an argument and throws an exception if the condition evaluates to false, terminating the function’s execution without burning any gas.

assert() evaluates the conditions for a function, then throws an exception, reverts the contract to the previous state, and consumes the gas supply if the requirements fail after execution.

revert() throws an exception, returns any gas supplied, and reverts the function call to the contract’s original state if the requirement for the function fails. The revert() method does not evaluate or require any conditions.

State machine

The state machine pattern simulates the behavior of a system based on its previous and current inputs. Developers use this approach to break down big problems into simple stages and transitions, which are then used to represent and control an application’s execution flow.

The state machine pattern can also be implemented in smart contracts, as shown in the code snippet below:

contract Safe {
    Stages public stage = Stages.AcceptingDeposits;
    uint public creationTime = now;
    mapping (address => uint) balances;

    modifier atStage(Stages _stage) {
      require(stage == _stage);
      _;
    }

    modifier timedTransitions() {
      if (stage == Stages.AcceptingDeposits && now >=
      creationTime + 1 days)
      nextStage();
      if (stage == Stages.FreezingDeposits && now >=
      creationTime + 4 days)
      nextStage();
      _;
    }
    function nextStage() internal {
      stage = Stages(uint(stage) + 1);
    }
    function deposit() public payable timedTransitions atStage(Stages.AcceptingDeposits) {
      balances[msg.sender] += msg.value;
    }
    function withdraw() public timedTransitions atStage(Stages.ReleasingDeposits) {
      uint amount = balances[msg.sender];
      balances[msg.sender] = 0;
      msg.sender.transfer(amount);
    }
}

In the code snippet above, the Safe contract uses modifiers to update the state of the contract between various stages. The stages determine when deposits and withdrawals can be made. If the current state of the contract is not AcceptingDeposit, users can not deposit to the contract, and if the current state is not ReleasingDeposit, users can not withdraw from the contract.

Oracle

Ethereum contracts have their own ecosystem where they communicate. The system can only import external data via a transaction (by passing data to a method), which is a drawback because many contract use cases involve knowledge from sources other than the blockchain (e.g., the stock market).

One solution to this problem is to use the oracle pattern with a connection to the outside world. When an oracle service and a smart contract communicate asynchronously, the oracle service serves as an API. A transaction begins by invoking a smart contract function, which comprises an instruction to send a request to an oracle.

Based on the parameters of such a request, the oracle will fetch a result and return it by executing a callback function in the primary contract. Oracle-based contracts are incompatible with the blockchain concept of a decentralized network, because they rely on the honesty of a single organization or group.

Oracle services 21 and 22 address this flaw by providing a validity check with the data supplied. Note that an oracle must pay for the callback invocation. Therefore, an oracle charge is paid alongside the Ether required for the callback invocation.

The code snippet below shows the transaction between an oracle contract and its consumer contract:

contract API {
    address trustedAccount = 0x000...; //Account address
    struct Request {
        bytes data;
        function(bytes memory) external callback;
    }
    Request[] requests;
    event NewRequest(uint);

    modifier onlyowner(address account) {
        require(msg.sender == account);
        _;
    }
    function query(bytes data, function(bytes memory) external callback) public {
        requests.push(Request(data, callback));
        NewRequest(requests.length - 1);
    }
    // invoked by outside world
    function reply(uint requestID, bytes response) public
    onlyowner(trustedAccount) {
    requests[requestID].callback(response);
    }
}

In the code snippet above, the API smart contract sends a query request to a knownSource using the query function, which executes the external callback function and uses the reply function to collect response data from the external source.

Randomness

Despite how tricky it is to generate random and unique values in Solidity, it is in high demand. The block timestamps are a source of randomness in Ethereum, but they are risky because the miner can tamper with them. To prevent this issue, solutions like block-hash PRNG and Oracle RNG were created.

The following code snippet shows a basic implementation of this pattern using the most recent block hash:

// This method is predicatable. Use with care!
function random() internal view returns (uint) {
    return uint(blockhash(block.number - 1));
}

The randomNum() function above generates a random and unique integer by hashing the block number (block.number, which is a variable on the blockchain).

Security patterns

Access restriction

Because there are no built-in means to manage execution privileges in Solidity, one common trend is to limit function execution. Execution of functions should only be on certain conditions like timing, the caller or transaction information, and other criteria.

Here’s an example of conditioning a function:

contract RestrictPayment {
    uint public date_time = now;

    modifier only(address account) {
        require(msg.sender == account);
        _;
    }

    function f() payable onlyowner(date_time + 1 minutes){
      //code comes here
    }
}

The Restrict contract above prevents any account different from the msg.sender from executing the payable function. If the requirements for the payable function are not met, require is used to throw an exception before the function is executed.

Check effects interactions

The check effects interaction pattern decreases the risk of malicious contracts attempting to take over control flow following an external call. The contract is likely transferring control flow to an external entity during the Ether transfer procedure. If the external contract is malicious, it has the potential to disrupt the control flow and cause the sender to rebound to an undesirable state.

To use this pattern, we must be aware of which parts of our function are vulnerable so that we can respond once we find the possible source of vulnerability.

The following is an example of how to use this pattern:

contract CheckedTransactions {
    mapping(address => uint) balances;
    function deposit() public payable {
        balances[msg.sender] = msg.value;
    }

    function withdraw(uint amount) public {
        require(balances[msg.sender] >= amount);
        balances[msg.sender] -= amount;
        msg.sender.transfer(amount);
    }
}

In the code snippet above, the require() method is used throw an exception if the condition balances[msg.sender] >= amount fails. This means, a user can not withdraw an amount greater the balance of the msg.sender.

Secure Ether transfer

Although cryptocurrency transfers are not Solidity’s primary function, they happen frequently. As we discussed earlier, Transfer, Call, and Send are the three fundamental techniques for transferring Ether in Solidity. It is impossible to decide which method to use unless one is aware of their differences.

In addition to the two methods(Transfer and Call) discussed earlier in this article, transmitting Ether in Solidity can be done using the Send method.

Send is similar to Transfer in that it costs the same amount of gas as the default (2300). Unlike Transfer, however, it returns a boolean result indicating whether the Send was successful or not. Most Solidity projects no longer use the Send method.

Below is an implementation of the Send method:

function send(address payable _to) external payable{
    bool sent = _to.send(123);
    require(sent, "send failed");
}

The send function above, uses the require() function to throw an exception if the Boolean value of sent returned from _to.send(123) is false.

Pull-over-push

This design pattern shifts the risk of Ether transfer from the contract to the users. During the Ether transfer, several things can go wrong, causing the transaction to fail. In the pull-over-push pattern, three parties are involved: the entity initiating the transfer (the contract’s author), the smart contract, and the receiver.

This pattern includes mapping, which aids in the tracking of users’ outstanding balances. Instead of delivering Ether from the contract to a recipient, the user invokes a function to withdraw their allotted Ether. Any inaccuracy in one of the transfers has no impact on the other transactions.

The following is an example of pull-over-pull:

contract ProfitsWithdrawal {
    mapping(address => uint) profits;
    function allowPull(address owner, uint amount) private {
        profits[owner] += amount;
    }
    function withdrawProfits() public {
        uint amount = profits[msg.sender];
        require(amount != 0);
        require(address(this).balance >= amount);
        profits[msg.sender] = 0;
        msg.sender.transfer(amount);
    }
}

In the ProfitsWithdrawal contract above, allows users to withdraw the profits mapped to their address if the balance of the user is greater than or equal to profits alloted to the user.

Emergency stop

Audited smart contracts may contain bugs that aren’t detected until they’re involved in a cyber incident. Errors discovered after the contract launch will be tough to fix. With the help of this design, we can halt a contract by blocking calls to critical functions, preventing attackers until the rectification of the smart contract.

Only authorized users should be allowed to use the stopping functionality to prevent users from abusing it. A state variable is set from false to true to determine the termination of the contract. After terminating the contract, you can use the access restriction pattern to ensure that there is no execution of any critical function.

A function modification that throws an exception if the state variable indicates the initiation of an emergency stop can is used to accomplish this, as show below:

contract EmergencyStop {
    bool Running = true;
    address trustedAccount = 0x000...; //Account address
    modifier stillRunning {
        require(Running);
        _;
    }
    modifier NotRunning {
        require(¡Running!);
        _;
    }
    modifier onlyAuthorized(address account) {
        require(msg.sender == account);
        _;
    }
    function stopContract() public onlyAuthorized(trustedAccount) {
        Running = false;
    }
    function resumeContract() public onlyAuthorized(trustedAccount) {
        Running = true;
    }
}

The EmergencyStop contract above makes use of modifiers to check conditions, and throw exceptions if any of these conditions is met. The contract uses the stopContract() and resumeContract() functions to handle emergency situations.

The contract can be resumed by resetting the state variable to false. This method should be secured against unauthorized calls the same way the emergency stop function is.

Upgradeability patterns

Proxy delegate

This pattern allows upgrading smart contracts without breaking any of their components. A particular message called Delegatecall is employed when using this method. It forwards the function call to the delegate without exposing the function signature.

The fallback function of the proxy contract uses it to initiate the forwarding mechanism for each function call. The only thing Delegatecall returns is a boolean value that indicates whether or not the execution was successful. We’re more interested in the return value of the function call. Keep in mind that, when upgrading a contract, the storage sequence must not change; only additions are permitted.

Here’s an example of implementing this pattern:

contract UpgradeProxy {
    address delegate;
    address owner = msg.sender;
    function upgradeDelegate(address newDelegateAddress) public {
        require(msg.sender == owner);
        delegate = newDelegateAddress;
    }
    function() external payable {
        assembly {
            let _target := sload(0)
            calldatacopy(0x01, 0x01, calldatasize)
            let result := delegatecall(gas, _target, 0x01, calldatasize, 0x01, 0)
            returndatacopy(0x01, 0x01, returndatasize)
            switch result case 0 {revert(0, 0)} default {return (0, returndatasize)}
        }
    }
}

In the code snippet above, UpgradeProxy handles a mechanism that allows the delegate contract to be upgraded once the owner executes the contract by calling the fallback function that transfers a copy of the the delegate contract data to the new version.

Memory array building

This method quickly and efficiently aggregates and retrieves data from contract storage. Interacting with a contract’s memory is one of the most expensive actions in the EVM. Ensuring the removal of redundancies and storage of only the required data can help minimize cost.

We can aggregate and read data from contract storage without incurring further expenses using the view function modification. Instead of storing an array in storage, it is recreated in memory each time a search is required.

A data structure that is easily iterable, such as an array, is used to make data retrieval easier. When handling data having several attributes, we aggregate it using a custom data type such as struct.

Mapping is also required to keep track of the expected number of data inputs for each aggregate instance.

The code below illustrates this pattern:

contract Store {
    struct Item {
        string name;
        uint32 price;
        address owner;
    }
    Item[] public items;
    mapping(address => uint) public itemsOwned;
    function getItems(address _owner) public view returns (uint[] memory) {
        uint\[] memory result = new uint[\](itemsOwned[_owner]);
        uint counter = 0;
        for (uint i = 0; i < items.length; i++) {
            if (items[i].owner == _owner) {
                result[counter] = i;
                counter++;
            }
        }
        return result;
    }
}

In the Store contract above, we use struct to design a data structure of items in a list, then we mapped the items to their owners’ address. To get the items owned by an address, we use the getItems function to aggrgate a memory called result.

Eternal storage

This pattern maintains the memory of an upgraded smart contract. Because the old contract and the new contract are deployed separately on the blockchain, the accumulated storage remains at its old location, where user information, account balances, and references to other valuable information are stored.

Eternal storage should be as independent as possible to prevent modifications to the data storage by implementing multiple data storage mappings, one for each data type. Converting the abstracted value to a map of sha3 hash serves as a key-value store.

Because the proposed solution is more sophisticated than conventional value storage, wrappers can reduce complexity and make code legible. In an upgradeable contract that uses eternal storage, wrappers make dealing with unfamiliar syntax and keys with hashes easier.

The code snippets below shows how to use wrappers to implement eternal storage:

function getBalance(address account) public view returns(uint) {
    return eternalStorageAdr.getUint(keccak256("balances", account));
}
function setBalance(address account, uint amount) internal {
    eternalStorageAdr.setUint(keccak256("balances", account), amount);
}
function addBalance(address account, uint amount) internal {
    setBalance(account, getBalance(account) + amount);
}

In the code snippet above, we got the balance of an account from eternal storage using the keccak256 hash function in enternalStorageAdr.getUint(), and likewise for setting the balance of the account.

Memory vs. storage

Storage, memory, or calldata are the methods used when declaring the location of a dynamic data type in the form of a variable, but we’ll concentrate on memory and storage for now. The term storage refers to a state variable shared across all instances of smart contract, whereas memory refers to a temporary storage location for data in each smart contract execution instance. Let’s look at an example of code below to see how this works:

Example using storage:

contract BudgetPlan {
        struct Expense {
                uint price;
                string item;
        } 
        mapping(address => Expense) public Expenses;
        function purchase() external {
                Expense storage cart = Expenses[msg.sender]
                cart.string = "Strawberry" 
                cart.price = 12
        }
}

In the BudgetPlan contract above, we designed a data structure for an account’s expenses where each expense (Expense) is a struct containing price and item. We then declared the purchase function to add a new Expense to storage.

Example using memory:

contract BudgetPlan {
        struct Expense {
                uint price;
                string item;
        } 
        mapping(address => Expense) public Expenses;
        function purchase() external {
                Expense memory cart = Expenses[msg.sender]
                cart.string = "Strawberry" 
                cart.price = 12
        }
}

Almost like the example using storage, everything is the same, but in the code snippet we add a new Expense to memory when the purchase function is executed.

Closing thoughts

Developers should stick to design patterns because there are different methods to achieve specific objectives or implement certain concepts.

You will notice a substantial change in your applications if your practice these Solidity design patterns. Your application will be easier to contribute to, cleaner, and more secure.

I recommend you use at least one of these patterns in your next Solidity project to test your understanding of this topic.

Feel free to ask any questions related to this topic or leave a comment in the comment section below.

Editor’s note*: This React Router migration guide was last updated on 25 October 2022 to include information about* useNavigate vs. useHistory, changes to NavLink, and more information about React Router v6.

When we maintain React apps, we’ll need to upgrade dependency libraries by changing our existing codebases over time. For example, upgrading the React Rounder v5 dependency to v6 requires step-by-step changes in your existing codebase. It may be challenging to transition from React Router v5 to v6 because several changes have altered how things were done in React Router v5. In addition, several new features have been introduced, so it is recommended to upgrade to v6 even if the transition is slightly annoying.

To upgrade from React Router v5 to v6, you’ll either need to create a new project or upgrade an existing one using npm. React Router v6 also extensively uses React Hooks, requiring React v16.8 or above. In this article, we’ll look at issues with React Router v5, what changed, how to upgrade to v6, and what benefits this upgrade offers.To follow along, you should be familiar with React Router.

Issues with React Router v5

React Router v5 came close to perfection, but there were still some flaws. The v5 library has some issues with the routing algorithm and routing configuration defaults (JSX component prop defaults). Also, the v5 came with some inconsistent, somewhat complex APIs that affect the developer’s productivity. Moreover, v5’s bundle size weighs more compared to what it offers as a React library. Here is a detailed explanation of the major issues that every developer faces in React Router v5:

Path-matching issues

Routes queries route paths with the most similar naming instead of with exact naming. For instance, a route name /dashboard would still be called if the browser route is /dashboard/test, or /dashboard/testagain, etc., which is not expected by app developers. Developers have to explicitly specify the prop exact to strictly query route names.

Also, defining routes with the same path but optional parameters requires special arrangements. For instance, the parameter is required when defining the route /games and another route with the same name. Thus, developers need to arrange the definition, so the route with the parameter comes first. Otherwise, the routes won’t work as expected because of the issues in v5’s routing algorithm.

Look at the following example that demonstrates the ranking problem in the v5’s routing algorithm:

The correct way: Here, /games will render the Games component but not SelectedGame, because it does not have a parameter id. While /games/:id will render only the SelectedGame component:

<Router>
  <Route path="/games/:id" component={SelectedGame} />
  <Route path="/games" component={Games} />
</Router>

The incorrect way: Here, either /games or /games/:id will render the Games component:

<Router>
  <Route path="/games" component={Games} />
  <Route path="/games/:id" component={SelectedGame} />
</Router>

The above code snippets illustrate the right and wrong way to order routes that are related by paths or parameters according to React Router v5. The first example is the most suitable order, while the second allows only the route /games to render for any situation with a parameter.

According to v5’s perspective, the second approach is incorrect, and developers need to use the exact prop or re-order (as in the first code snippet) to fix it. However, the v5 route ranking algorithm could be intelligent enough to identify the most suitable route without explicit ordering or exact usage.

For developing nested routes, developers had to write more code with the useRouteMatch Hook, Route, and Switch components. For nested routes, developers had to find the entire route because there is no relative route handling in v5:

// ----
<Switch>
  <Route path="/dashboard" component={Dashboard} />
</Switch>;
// ----

function Dashboard() {
  const { path } = useRouteMatch();
  return (
    <div>
      <h1>Dashboard</h1>
      <Switch>
        <Route path={`${path}/charts`} component={Charts} />
      </Switch>
    </div>
  );
}

Issues in API consistency and simplicity

When a specific library offers inconsistent and somewhat complex APIs, application codebases become less maintainable and more error-prone. So, software library developers always try to offer consistent and simple APIs for app developers to manage their codebases better. However, library developers can’t offer the most optimal API design for app developers with their first release. API improvements typically come with the open-source developer community’s feedback, bug reports, and feature requests.

React Router v5 has some inconsistent APIs and unfamiliar naming. Also, app developers had to write more boilerplate code than they expected to configure and integrate React Router v5 into their apps. For example, for programmatic navigation, v5 offers the useHistory Hook, but almost all React Router newcomers expect useNavigate.

Also, the Route component offers two different props to link components: component and render, but it’s possible to offer one element prop as the Suspense API does. Moreover, for defining your routes with JavaScript objects in v5, you have to use the separate react-router-config package.

Excessive bundle and code size

As we already know, when we use heavy dependencies, our applications also become heavy. Similarly, if we use a library that requires writing verbose API calls, our application bundles also contain excessive code, which leads to heavy bundle sizes.

React Router v5 latest stable release (v5.3.4) ‘s bundle size is about four times larger than React!Having considered the issues with React Router v5, we will now discuss how to migrate and what has changed that makes React Router v6 different.

Migrating to React Router v6

The following sections will teach you how to upgrade to React Router v6 in projects where React Router is already installed and from scratch.

Upgrading React Router in a project where it is already installed

To upgrade the React Router version, open a terminal and navigate to the project directory where you wish to upgrade it.

To see a list of the project’s dependencies, use the following command:

npm ls
# --- or ---
yarn list

You should see a list like this:

Although the list generated may not be exactly the one above, you should see an entry with its installed version if you have React Router installed.

Next, run the following command to initiate an upgrade:

npm install react-router-dom@latest
# --- or ---
yarn install react-router-dom@latest

If you execute this command without being connected to the internet, it will fail because some files must be downloaded during the installation. If everything is in order, you should see something similar; in our case, the version is v6.0.2:

If everything goes well, we should notice that React Router has been updated when we run the npm ls or yarn list command again:

Installing React Router from scratch

First, open a terminal in a project directory where React Router isn’t installed.

To install a specific version of React Router, run the following:

npm install react-router-dom@[VERSION_TO_BE_INSTALLED]

Replace [VERSION_TO_BE_INSTALLED] with the version you want to install, for example, 6.0.2.

Or, run the following code to install the newest version:

npm install react-router-dom
# --- or ---
yarn install react-router-dom

This installation also demands the use of the internet. If the installation went well, you should see something similar to this:

What’s changed in React Router v6?

It’s important to understand what changed so we can see why upgrading to React Router v6 is helpful. Note that in certain circumstances, developers will downgrade a program to increase functionality or avoid issues.

We will go through the changes in React Router v5 that one should consider when choosing which version to implement in a project.

Setting up routes

We had three different techniques for generating routes in React Router v5, which caused confusion. The first technique is to pass the component and path as props of the Route component:

<Route path="/games" component={Games} />

This works well, however, we cannot pass props to the rendered component. The second is to pass in the component as a child of the Route component:

<Route path="/games">
  <Games count=”10” category=”Action” />
</Route>

We may pass custom props to the component we want to render using this approach. The third and final technique is to use the render prop where a function returns the component to be rendered:

<Route path="/games" render={(props) => <Games {…props} />} />

This also works and lets us give props to the component we’re rendering. However, it is ambiguous and prone to inaccuracy.

In React Router v6, routes have been simplified to the point that we no longer need to utilize Switch to query them. Instead, we utilize a “required” component called Routes, which only searches for routes by name. The * character can be used to query using a wildcard.

We then supply the component to be rendered to the Route component as element props. We can also supply custom props to the components in each route we wish to render.

The code snippets below demonstrate how to define routes in v6:

<Routes>
  <Route path="/games" element={<Games />} />
  <Route path="/movies" element={<Movies genre="Action" age="13" />} />
</Routes>

You can also use useRoutes to query the routes in the app. To do this, we must alter the index.js content, where we change the App wrapper from React.StrictMode to BrowserRouter as below:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom'

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

Then, in the App.js file, we define the routes by performing the following:

import { Outlet, useRoutes } from 'react-router-dom';
const App = () => {
  const routes = useRoutes([
    {
      path: '/',
      element: <div>Hello Index</div>
    },
    {
      path: 'games',
      element: <Games />,
      children: [
      {
        path: '',
        element: <div>Games Index</div>
      },
      {
        path: ':id',
        element: <div>Game Details</div>
      }]
    }
  ]);
  return routes;
}

const Games = () => {
  return (
    <div className="Games">
      <div>This is the Games page</div>
      <Outlet />
    </div>
  );
}

export default App;

Here, we imported Outlet and useRoutes. The useRoutes allows us to define the routes as an array of objects in which we can specify a path, the element to be rendered when the path is browsed, and sub-paths. Outlet helps us render the child route that matches the current path.

useNavigate vs. useHistory

In React Router v5, we use useHistory() for handling navigation programmatically. There have been concerns with this technique, such as naming confusion and having two methods for navigation, history.push and history.replace.

To implement navigation in v5, we usually do the following:

import { useHistory } from 'react-route-dom';

const App = () => {
  const history = useHistory();
  const handleClick = () => {
    history.push('/home');
  }
  return (
    <div>
      <button onClick={handleClick}>Go Home</button>
    </div>
  ) 
}
export default App;

We use the history if we need to replace the current history frame.replace('/home') method call.

In v6, we use useNavigate instead of useHistory:

import { useNavigate } from "react-router-dom";

const App = () => {
  const navigate = useNavigate();
  const handleClick = () => {
    navigate("/home");
  }
  return (
    <div>
      <button onClick={handleClick}>Go Home</button>
    </div>
  );
}
export default App

Instead of history.replace, we can call the navigate method with an options object as follows:

const handleClick = () => {
  navigate('/home', { replace: true });
}

So, what happened to the go, goBack, and goForward methods in the legacy history API in v5? In v6, we can call the same navigate function with numbers. For example, look at the following code snippet that demonstrates go back, forward, and 2nd history frame navigation:

navigate(-1)   // v5's history.go(-1) or history.goBack()
navigate(1)    // v5's history.go(1) or history.goForward()
navigate(2)    // v5's history.go(2)

Also, v6 replaces Redirect with a declarative version of useNavigate, Navigate:

import { Navigate } from 'react-router-dom';

function App() {
  return <Navigate to='/home' replace state={state} />;
}

Moreover, the navigate API is now suspense-ready. You can inspect a sample suspense-based router implementation from this source file on GitHub.

Understanding changes in NavLink

The v6 versions also changed the NavLink component interface that helps you create breadcrumbs, tabs, and navigation menus with dynamic styles. This is a frequently used component in most React Router-based apps, so you may have to allocate more time for NavLink related rewrites.

Specifying exact route paths in NavLink

In v5, we use the prop when enforcing an exact path or route. To implement this, we do the following:

<NavLink to="/dashboard" exact>Go Home</NavLink>

In v6, we use the end prop to ensure exact routes:

<NavLink to="/dashboard" end>Go Home</NavLink>

The React Router team renamed this prop to align the library with the React ecosystem’s practices.

Styling an active NavLink

In React Router v5, we use the activeClassName or activeStyle props to style a NavLink that is currently active.

For instance:

<NavLink 
  to="/home" 
  style={{color: 'black'}} 
  activeStyle={{color: 'blue'}} 
  className="nav_link" 
  activeClassName="active" >
  Go Home
</NavLink>

In v6, we have to use a function with the destructured argument {isActive} to condition the style or className to be used for an active NavLink.

For instance:

<NavLink 
  to="/home" 
  style={({isActive}) => ({color: isActive ? 'blue' : 'black'})} 
  className={({isActive}) => `ln-${isActive ? ' active' : ''}`} >
  Go Home
</NavLink>

These changes also fix the consistency and simplicity issues in the v5 legacy API. However, if your React app uses the above-deprecated props extensively, you can make your migration process faster and smoother by creating a temporary wrapper for v6’s NavLink as follows:

import * as React from 'react';
import { NavLink as BaseNavLink } from 'react-router-dom';

const NavLink = React.forwardRef(
  ({ activeClassName, activeStyle, ...props }, ref) => {
    return (
      <BaseNavLink
        ref={ref}
        {...props}
        className={({ isActive }) =>
          [
            props.className,
            isActive ? activeClassName : null,
          ]
            .filter(Boolean)
            .join(" ")
        }
        style={({ isActive }) => ({
          ...props.style,
          ...(isActive ? activeStyle : null),
        })}
      />
    );
  }
);

The above code converts the v6 NavLink to a v5-like NavLink and lets you deploy the app with v6 by keeping working v5-styled NavLinks that you can re-write without a rush.

Use useMatch instead of useRouteMatch

In v5, useRouteMatch was used to create relative sub-route paths that matched a particular route. We can use this Hook with or without the pattern argument as follows:

// Receive the matched path and url of the current <Route/>
const { path, url } = useRouteMatch();

// Receive the matched route details based on the pattern argument
const match = useRouteMatch('/users/:id');

In v6, we use useMatch for this. Using the useMatch Hook requires a pattern argument and does not accept patterns as an array. So, the following code snippet is valid for v6:

const match = useRouteMatch('/users/:id');

However, v6 throws an error if you don’t pass the pattern argument to the Hook. The above match constant will receive details about the route match.

Relative routes support for nesting

In v5, creating JSX-based nested routes generated more boilerplate code segments since we had to construct full URLs explicitly. Consider the following example code snippet:

// ----
<Switch>
  <Route path="/dashboard" component={Dashboard} />
</Switch>;
// ----

function Dashboard() {
  const { path } = useRouteMatch();
  return (
    <div>
      <h1>Dashboard</h1>
      <Switch>
        <Route path={`${path}`} component={Summary} />
        <Route path={`${path}/stats`} component={Stats} />
        <Route path={`${path}/charts`} component={Charts} />
      </Switch>
    </div>
  );
}

Here we need to manually construct the full path for each’s path prop using the useRouteMatch Hook. So, when you develop complex apps, you can see this boilerplate code everywhere.

React Router v6 made JSX-based nested routes definitions so minimal. Look at the following v6 re-write of the above v5 sample code snippet:

// ---
<Routes>
  <Route path="/dashboard" element={<Dashboard/>}>
    <Route path="" element={<Summary/>}/>
    <Route path="stats" element={<Stats/>}/>
    <Route path="charts" element={<Charts/>}/>
  </Route>
</Routes>
// ---

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet/>
    </div>
  );
}

Here v6 lets developers use the Route component in a nested way to define nested routes. Note the Outlet component that renders nested components: Summary, Stats, and Charts. Here we don’t need to prepend /dashboard/ to all nested routes, unlike v5, since v6 supports relational path definitions.

What was removed from React Router v6?

In React Router v6, some features are no longer supported because they are ambiguous or faulty. So far, two features were found to have been removed:

Prompt, usePrompt, and useBlocker

• usePrompt (JSX Prompt): Was used to confirm whether a user wants to exit a page when the page is in a state that does not require the user to leave

• useBlocker: Similar to usePrompt, and was used to prevent users from leaving a particular page

These two features are similar and have the same issue. In a situation where a user tries to navigate outside a page and navigation is restricted by either usePrompt or useBlocker, the URL path changes even though the navigation is prevented.

Although there were issues raised about useBlocker and usePrompt, the creators are still considering adding them back to v6 after they release a stable version. Check here for more details. Meanwhile, the developer community created libraries like react-router-prompt for app developers who need these removed features in React Router v6.

Nested routers support

Using one BrowserRouter component is enough for developing advanced React app navigations. Some app developers who used React Router v5 practiced using nested routers in their apps to isolate complex components. For example, most developers used v5’s MemoryRouter inside the BrowserRouter instance to insolate modals and tab groups. Unfortunately, v6 dropped supporting nested routers and motivated app developers to use only one preferred router implementation.

Most app developers who built nested routers now request the deprecated feature back in v6 to upgrade their v5 React Router dependency to v6. Some developers worry about this breaking change in v6 and even consider migrating to another React routing module.

According to this discussion, it seems that maintainers are not focusing on nested router support during the current development timeline. But, the developer community may support maintainers to at this deprecated feature soon! Or, maintainers will offer a production-friendly workaround for this issue.

The developer community found the following workaround (rather a hack) to enable nested routers in v6, but it’s not production-friendly due to unexpected behaviors:

<UNSAFE_LocationContext.Provider value={ null }>
  <MemoryRouter>
    { /* some routes not related to the outer router */ }
  </MemoryRouter>
</UNSAFE_LocationContext.Provider>

Subscribe to issue #7375 on GitHub and get updates related to the v6 nested routers.

Why doesn’t React Router v6 work in your app?

You might notice unexpected behaviors, error messages, and warning messages once you complete the migration process. You may have to solve a bug due to a breaking change in v6. We can’t ship apps to production with routing issues. So, detecting routing issues with a string test plan is better.

Your React Router integration won’t work correctly after upgrading to v6 because of the following issues.

The history.push method won’t work properly

You’ve probably updated the history package to the latest without updating React Router to v6. The v5 history package is compatible with React Router v6, not React Router v5. To solve this, first, update React Router, then it will automatically download a compatible history version. If you still need to run React Router v5, use history v4 (i.e., v4.10.1). See this issue.

Export x was not found in react-router-dom

You are importing a Hook or component that was removed or renamed in v6. For example, useRouteMatch won’t work in v6. To solve this, make sure that you don’t import deprecated v5 Hooks or components.

Nested routes won’t render components

Make sure to add <Outlet/> in the parent component that embeds nested route components. Check the previous Dashboard component as a reference implementation.

x is not a <Route> component

In v6, Routes can contain only Route or React.Fragment children, so make sure to move other HTML elements and components to suitable places from the Routes component.

meta.relativePath.startsWith is not a function

You are using an object in the path prop of Route. In v6, you can’t use Regex objects or arrays as a path. Make sure that you use only strings for paths.

Here we discussed some frequently occurring issues. But, you might get a unique error message you can’t find on the internet. Inspect your codebase thoroughly for deprecated API usage in such scenarios, then open a new discussion thread in React Router.

Benefits of React Router v6 over v5

It’s pointless to migrate if one version doesn’t offer any advantages over the other. In this section, we’ll talk about the benefits of upgrading from React Router v5 to v6.

One of the most important considerations for developers is the application’s portability. The size of React Router v6 has been reduced significantly compared to previous versions. The difference between v5 and v6 is around 60 percent.

Here is a comparison from Bundlephobia:

Compiling and deploying apps will be easier and faster due to the size reduction. In addition, the bulk of the modifications in React Router v6 that we covered are more beneficial and have fewer issues.

As previously mentioned, React Router v6 allows routes to accept components as elements when constructing routes, and pass custom props to components. We may also nest routes and use relative links as well. This helps us prevent or reduce the definition of new routes inside various component files and makes it easy to pass global data to components and props.

When redirecting instead of using useHistory, the new approach using useNavigate has been designed to offer better navigation API. It allows us to set the new route easily via navigate() instead of using multiple methods: history.push(), history.replace(), and history.goBack(). Also, the new v6 API is so minimal and developer friendly. It lets you reduce boilerplate code and complex route definitions to make your app codebase clean.

Finally, the navigation link NavLink allows us to condition active links, which makes our code neater and simpler, instead of passing two different props for an active and inactive state. By doing this, we can easily use a ternary operator to condition which style will be affected when a link is active or not.

Conclusion

After reading this article, I hope you are able to upgrade your React Router version and restructure your codebases to work seamlessly with React Router v6. Updating your code based on the above points helps you to migrate any React Router-based app. But, if your app’s routing is so complex and extensively uses deprecated v5 features, you can consider using the official incremental migration guide from maintainers.

Not only should React Router v5 be upgraded to v6, but Reach Router should be switched to v6 as well.

Regularly upgrade React Router v6 and review the documentation for any changes to stay up-to-date with new releases.

Tatum offers a relatively simple way to interact with the blockchain without requiring developers to create new smart contracts and have any knowledge of Solidity or Truffle. Although it requires subscribing to different paid plans from which gas fees will be covered, there is a free plan for small-scale applications.

In this article, I'll discuss Tatum and demonstrate how to mint NFTs in javascript using Tatum NFT Express. You'll need a basic understanding of blockchain and JavaScript to follow along. You may not need to become proficient in any blockchain programming language like Solidity to create smart contracts.

With this, let's jump right in 🚀.

What is Tatum?

Tatum offers a unifying framework for thousands of digital assets and more than 40 different blockchain protocols(🤯). It is a versatile platform that aids programmers in minimizing the complexity of most blockchain development processes.

To assist in the reduction of complexity and the faster and simpler scaling of blockchain applications, Tatum offers features like:

• NFT Express: This feature enables users instantly mint NFTs on various blockchains with just one API call.

• Virtual Account: With this feature, you can access multi-currency wallets, make fee-free transactions, and receive alerts via webhook notifications.

• Notification Station: This feature is the simplest and most effective way to be notified about blockchain events.

Minting NFTs with Tatum NFT Express in JavaScript

Tatum is designed to make minting NFTs easier than any other platform that assists developers with this functionality. Since the monthly credit allocation of your paid plan covers gas costs, you can successfully mint any NFT with just one API request and as many as you wish.

You must register on the Tatum dashboard to mint your first NFT using Tatum. As demonstrated below, you can register using either social authentication or an email address and password:

After signing up, you will be redirected to your dashboard, where you can choose between using the Mainnet or Testnet and have access to two free API keys.

📌 NOTE: When deploying your application to real users, you should use the Mainnet rather than the Testnet.

API keys should be kept secret or limited to authorized people, such as the program's developers. If they fall into the wrong hands, they could compromise the security of the application and its users.

In the top-right corner of the dashboard, there is a button labelled "Create API key". By subscribing to a new billing plan, you can create new API keys with extra functionalities, as displayed below:

You can integrate Tatum into your application once you have an API key. You need to configure Tatum first in your IDE or development environment.

Firstly, install the Tatum NFT Express JavaScript SDK by running the command given below in a terminal of your project directory:

npm install @tatumio/tatum

After installing the SDK, we must configure the required environment variables; for the sake of this tutorial, we only need to set the TATUM_API_KEY environment variable. Run the following command in the terminal of your application directory to do this:

export TATUM_API_KEY="YOUR_TATUM_API_KEY"

You should now be able to retrieve the value of your API key from your terminal by executing the following in your application:

console.log(process.env.TATUM_API_KEY);

If everything is well done, we want to use Tatum's mintNFTWithUri() method to implement the functionality for minting NFT. For now, we need to import Tatum into a file called "index.js". Next, call the method with the necessary parameter as shown below:

const Tatum = require('@tatumio/tatum');
Tatum.mintNFTWithUri(false, {
    chain: Tatum.Currency.CHAIN_SYMBOL,
    to: 'ADDRESS_OF_RECEIVER',
    url: 'URL_OF_NFT_METADATA'
}).then(transactionHash => {
    console.log(transactionHash);
});

You will notice no private key or signature ID in the code snippet above. That is because NFT Express uses a default private key, token ID, and built-in smart contracts offered by Tatum to make blockchain requests.

We then logged the 'transactionHash' as the output of the mintNFTWithUri() method, which took the following arguments:

• chain: This is the blockchain protocol you want to use to mint NFTs. Tatum permits minting for chains including ETH, MATIC, BSC, CELO, ONE, and KLAY on both the Mainnet and Testnet.

• to: The NFT is sent to this blockchain address after it has been minted.

• url: this is the metadata of the NFT.

This is my actual code:

const Tatum = require('@tatumio/tatum');
Tatum.mintNFTWithUri(false, {
    chain: Tatum.Currency.ETH,
    to: '0xC34bCC0Be78C84EB94e9544982C5027861ec0D6b',
    url: 'https://i.postimg.cc/Wp0GZFK4/image.png'
}).then(transactionHash => {
        console.log(transactionHash);
});

I want the NFT to be sent to this address: 0xC34bCC0Be78C84EB94e9544982C5027861ec0D6b. Open the terminal in the program's root directory and enter the following command to execute the application and mint the NFT:

node index.js

You should get something similar to this:

I looked up the transaction hash on EtherScan to see if the mint had been successful, and this is what I found👀:

🥳 TADA! We successfully minted an NFT seamlessly.

Final Thoughts🤔

You will work with the blockchain seamlessly now that you are aware of Tatum, especially if you are a front-end developer. Tatum contains practically everything you may need while working with blockchains. You can also learn more about:

• Tatum frameworks.

• Tatum developer documentation.

• Tatum supported blockchains.

Maintaining updates may be demanding for developers because they have to reinstall several packages and libraries and even replace ones that become deprecated. Different solutions have been developed by some businesses to address this issue.

In this article, we will discuss how developers can use Renovate to manage dependencies. To follow through with this article, you will need a basic knowledge of libraries, modules, and version control.

What are Dependencies?

Dependencies are a collection of tools, typically modular fragments of code that other applications rely on to carry out specific tasks. Dependencies are mostly supported in object-oriented programming (OOP), where classes extend functionalities to other applications.

Dependencies in JavaScript are referred to as libraries or packages, and they are distributed to consumers using package managers like NPM and Yarn. These package managers provide CLI(Command Line Interface) for managing dependencies in your development environment. For instance, NPM installs packages using the following command:

npm install PACKAGE_NAME

While Yarn uses install to install all the dependencies in a Yarn project.

yarn install

And uses add to install a single dependency in a Yarn project.

yarn add PACKAGE_NAME

After a package has been installed using the CLI, the package name and version are added to the list of dependencies in the "package.json" file in the application folder.

The "dependencies" object in the "package.json" file contains the list of dependencies, where the package names are the keys, and the versions of each package are the values. Here is an example of a list of dependencies:

 "dependencies": {
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
 }

What is Renovate?

Renovate is an open-source software approved by GitHub and other version control solutions to detect changes to dependencies and automatically create PRs(Pull Requests) to resolve these changes. Renovate can be used on various platforms, like GitHub, GitLab, Azure DevOps, Bitbucket Cloud, Bitbucket Server and Gitea.

Customers including Prisma, Mozilla, Yarn, Netlify, Envoy, Telus, Red Hat, Uber, Cypress, eBay, Algolia, Hashcorp, Atlassian, Microsoft, Sourcegraph, and Buildkite also use Renovate.

Let's now look at how Renovate can be set up in your workflow to automate dependencies management.

Configuring Renovate in Your Workflow

Renovate can be installed on the version control system of your choosing. In this article, for example, we will use GitHub.

On the GitHub Marketplace, search for the Renovate app and click install. Select the organization or account where you wish to install Renovate. Next, choose whether to install Renovate across all of your repositories or just one particular one. We will only select one repository in this article.

Proceed to install Renovate and complete the necessary authentication.

You can sign in using GitHub or GitLab, then you will be redirected to the Renovate Dashboard. Complete the following forms, then submit your registration. If everything goes correctly, you'll be able to access the Renovate Dashboard.

Navigate to the project where Renovate was installed. You should see a screen like this:

Renovate hasn't found any dependency modifications yet, hence the result is "null."

When you visit the GitHub repository for the project where Renovate was installed, you will see a new PR titled "Configure Renovate."

From this PR, you may learn everything you need to know about Renovate in your workflow. The PR also contains a list of detected packages, a list of what to expect(dependencies that need update) and a commit that adds the “renovate.json” file to your project.

Settings for customising Renovate in your project are defined in the "renovate.json" file. However, merge the PR to add the file in the repo.

After merging the onboarding PR, you may determine how frequently Renovate creates PRs of updates by changing the value of the variable "prhourlylimit".

{
  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
  "extends": [
    "config:base"
  ],
  "prhourlylimit": 3,
}

Having set all the necessary configurations, commit the changes. Renovate will create PRs for the dependencies that need updates after a few minutes.

The update PRs target a single dependency and sets the version in the “package.json” file to the latest version available for that dependency. In this case, the previous version of “@testing-library/jest-dom” was version “^5.16.2”, Renovate updated the version to “5.16.5”. Ensure to check the change logs of the dependencies to learn of any breaking changes, before merging the PR.

Congratulations!🥳 You have successfully configured Renovate in your workflow.

Conclusion

Dependency management can be painstaking sometimes, as developers might need to refactor their implementation due to breaking changes in the dependencies. But the major issue is knowing when these updates are available. Thanks to Renovate, your application wouldn’t have to break before you notice a change in dependencies.

Check out the official documentation to learn more about how to use Renovate to manage dependencies automatically.

Many people are talking about how important developer experience is to the success of most enterprises. And with time, a lot more businesses will become aware of the impacts and realize their significance.

In this article, we will have a closer look at developer experience and how it differs from user experience, the importance of a successful developer experience, what are dev portals, how to develop a working dev portal and the importance of dev portals.

Let’s jump right in!🚀

What is Developer Experience?

The term "developer experience," often referred to as "DevEx" or "DX," is a new user persona/perception that many companies have embraced to evaluate how developers engage with the tools and systems that support their products.

A great developer experience should enhance the workflows, environments, and procedures that developers use on a daily basis. Although user experience and developer experience are closely related, they are not the same. They should be taken into account while creating a product, but individually.

For instance, let's say that while developing an API, user experience requires taking into consideration factors like request speed to ensure that consumers do not have to wait long for the API to respond. The developer experience, on the other hand, will require taking into consideration factors like speed but also more technical ones like error handling, modularity, documentation, and so on.

Below is an illustration showing the relationship between developer experience and user experience:

Difference Between DevEx and UX

The simplest approach to understanding developer experience is to see it through the perspective of the common idea of user experience, but not to assume them as interchangeable.

Yes! The concepts of developer experience and user experience are distinct due to significant differences.

The approach used to create each experience differs significantly. User experience is more concerned with end consumers using the product, as opposed to developer experience, which focuses more on enabling developers to use the product to build solutions for other end users.

User experience strives to provide equal support to all users, regardless of technical capabilities, unlike developer experience, which aims to provide varying levels of support based on various users' technical capabilities.

PayPal is an excellent real-world example; the user experience makes it simple for customers to make purchases with a few clicks, and the developer experience clarifies which API endpoints or methods to use and how to use API keys to make requests.

Now that you can distinguish between user experience and developer experience, you might want to answer the question of why developer experience is important.

Importance of Developer Experience

The growth of a company is greatly influenced by the experience of its developers. If you are unfamiliar with the term "ramp-up", it generally refers to the capacity to expand a team fast by bringing on a new developer when a project requires scaling. This term introduces us to the ramp-up problem, which arises when a team tries to scale a project by adding new developers. The organization has a ramp-up problem if it takes a long time for new developers to become comfortable with the new environment before they can contribute usefully.

Companies need to improve their developer experience when ramp-up problems are noticed. To onboard new engineers more quickly, they might need to pay closer attention to internal tooling, documentation, and developer support.

Additionally, when developers feel comfortable and secure in their working environment, their work will be of a high quality, which results in timely releases, improved end-user experience, and a boost in the company's revenue.

Finally, developer experience provides stability(reliability, consistency), clarity(intuitive visuals, clear displays), ease of use(quick access, shortcuts, speed), and function for your software development ecosystem(expected behavior, feature-rich).

What are Developer Portals?

Developer portals are single sources of truth or centralized repositories where resources and tools are maintained for developers who use the software of a specific company. Developer portals can be internal or external, and they can regulate who has access to which external or internal resources.

Developers frequently encounter challenges when integrating SDKs, consuming APIs, or contributing to legacy codebases. The developer portal, which we can refer to as the central repository for all relevant documentation and support, can be used to address these challenges.

An ideal developer portal can create an ecosystem around the developer experience of a product, as depicted in the image above.

Most developer portals' primary objective is to provide a sufficient knowledge base free of SME assistance by offering functional and technical documentation.

How to Create a Developer Portal

The idea of developer portals sounds excellent right?🤩

Since developer portals are designed to hold extensive information about a company, setting one up might take a long time, followed by regular maintenance.

Port is a developer-focused platform that provides organizations with a single source of truth for all operational and infrastructure resources. Blueprints, Entities, and Relations are the three main building blocks of Port, which can be used to establish a complete software catalog, unified standards, or governance over processes in your organization.

To start creating your portal, you might want to check the pricing and plans Port offers. You can use a free unlimited plan, and there are paid plans with additional features. To subscribe to any plan of your choice you need to sign up on Port first by navigating to the screen below:

You can sign up with Google or manually fill in the necessary credentials; you will be required to sign up with a work email. Verify your email and setup your organization, and you should see a screen like the image below:

If you reach this point, your authentication is successful, and you can now begin building your self-service developer portal.

Next, we want to design a new blueprint for services. When you click the "Add Blueprint" button in the top-right corner of the blueprint page, a JSON template listing the microservices we can connect to will come up. A service blueprint will appear on the blueprint page after you click "Save".

To examine all of the services included in this blueprint, expand the services pane and customize the ones you need. When the pane is expanded, a pop-up appears that looks like this:

As in the image above, you can adjust each service's properties in the pop-up window. Make sure to click save after editing.

To define an environment blueprint, simply follow the steps above but set the identifier to "environment" instead of "microservice". If you require more details, please see the related documentation.

We want to create entities after creating service or environment blueprints. An entity is a module of software (microservice) that follows a specific blueprint. To create a new Entity, select "Service" from the list of options under "Software Catalog" in the left sidebar. You should then see a screen similar to this one:

At the top-right corner, click “+ Service” to create a new Entity under this blueprint. You should see a form like below, or use the JSON template to create the new Entity.

Click “Create” after filling in the appropriate information, and the new Entity will be added to the list of Entities under the parent blueprint.

We are nearly done. The final building block is Relations, which comes after defining our data model using Blueprints and storing data objects using Entities.

A Relation is a connection between two blueprints and their entities. Relations are only required when multiple Blueprints depend on one another. You can have your entities without creating Relations in a case where the blueprints are independent.

In our case, there is only one service and one blueprint, but if you have more than one and need to synchronize your blueprints, you can use the official documentation as a guide to set up a Relation.

Having successfully created your blueprint, entities and relations for your software infrastructure, feel free to explore the Port environment, you can also define self-service actions and check out the Port complete use case to fully set up your software catalog.

Congrats!🥳 You have successfully created your developer portal using Port. Developer portals can be created using other tools like Backstage, Apigee, Pronovix, or 3Scale.

Importance of Developer Portals

A functional developer portal shares almost the same significance as a good developer experience. We can highlight some other importance of developer portals like:

• Easy onboarding: Developer portals contain tools for easy navigation, search, code samples, or tutorials on how to get started using a specific asset.

• Awareness: Developer portals make it easy for developers to comprehend specific workflows and encourage service exploration.

• Increased productivity: Instead of spending time looking for information, developer portals enable developers to concentrate on executing their work.

• Easy collaboration: Developer portals promote a culture of documentation that ensures all the information a developer needs to access a particular resource is properly documented.

Next Steps

Improving developer experience can have a significant beneficial impact on a company's success. The quality of developers will increase internally and externally, resulting in a ramp-up for the company.

Visit the Port blog for relevant articles if you still have questions regarding developer experience or how developer portals improve developers' experience.

Even if you are familiar with SEO, you may not be getting the best results.

Whether you have an ecommerce website or any other site, you might need to optimize it for search engine ranking.

In this article, we will discuss how to optimize your ecommerce website for higher search engine rankings. This will help increase traffic and sales for your business. You will also learn about link building, content marketing, and keyword research. You can then create an effective SEO strategy for your ecommerce website using the tips provided in this article.

Let’s dive in!

What does SEO mean?

Search engine optimization (SEO) involves creating relevant content based on the keywords that people use in search queries to help search engines algorithms understand the content of a website. It also involves adding links and other elements to make the site easy to access and navigate. SEO can help a website rank higher at the top of the search engine results pages (SERPs), increasing its visibility to people searching for specific information.

Additionally, SEO entails improving the website to make it user-friendly and better crawling and indexing by search engines. SEO in ecommerce is specifically intended to boost a product's visibility in search engine results pages to increase sales and conversion rates.

Below is an image of a Google search engine result page showing the result of a search with “Laptop for sale amazon” as the search query.

Why is SEO important in ecommerce?

SEO is important in ecommerce and shouldn't be taken for granted. You can effectively target customers who are looking for goods or services available in your online store.

SEO raises your search engine ranking, which increases organic traffic to your website, creating chances of generating more inquiries and sales rise as a result. Since it provides potential clients with relevant, accurate, and current information, SEO also aids in establishing credibility and trust with them. In the end, SEO aids in boosting revenue and sales for your ecommerce store.

Best SEO practices for ecommerce websites.

Here are some tips for effectively implementing SEO on your website now that you know why it's important for ecommerce websites.

1. Use relevant keywords properly across your website to improve search engine optimization. You may boost your website's rating by researching keywords and adding relevant keywords to content, title tags, and meta descriptions.

   The intentions of your keywords are important. The purpose a user has in mind when searching for a specific keyword is known as keyword intent. There are four different types of keyword intent:

   • Directional Intent: users use these keywords to search for a specific website or place. For example, "How far is", "where is", and "Direction".
   • Educational Intent: users use these keywords to find information on a specific subject. Examples include "What is" and "How to".
   • Transactional Intent: users use these keywords to look for products or services to make a purchase. Examples are "How much" and "Payment".
   • Lateral Intent: users use these keywords to look for products or topics related to one another. Say, "An alternative for". It is also recommended to use keyword research tools like Google Keyword Planner, SEMrush, Ahrefs, Moz, Wordtracker, Ubersuggest, AnswerThePublic, Keywords Everywhere and KWFinder

2. Improve your product pages: since product pages have the most impact on conversions, they are undoubtedly the most crucial ones on an ecommerce website. You can improve the content of your product pages by using relevant keywords in product titles, meta descriptions and product descriptions. You should also use a product-tagging system to ensure that products are precisely classified and effectively optimized for relevant keywords.

3. Use image alt text: since search engines cannot read images, providing alt text to your product images enables them to know what the image is about. It becomes easier for search engines to crawl your website and raises its position in search results.

4. Web performance optimization: a slow website might result in a high bounce rate and a low search engine rating. Ensure that you use content delivery networks(CDN), image compression, and code minification to increase the speed at which your website loads.

5. Utilize structured data: using structured data will help your ecommerce website perform better in search engine results. Structured data allows you to provide details about products and services, such as customer reviews, ratings, and discounts. Structured data can also assist search engines in better understanding the context of your website and index your content.

6. Create unique content: for ecommerce SEO, developing unique content about your products and services is essential. You can increase the organic traffic to your website by creating educational and helpful content. Additionally, you can boost traffic and conversions by including links to product pages within your content.

7. Optimize your URLs: users may find it simpler to understand what is on each product or category page if URLs are simplified. URLs should be brief and descriptive, contain relevant keywords, and use hyphens to separate words. As a result, the URL will be easier to read, and indexing the page will be simpler for search engine crawlers.

8. Monitor your site performance: to ensure the success of your SEO efforts and achieve your desired results, it is essential to regularly monitor the performance of your website. This will help you identify any areas that may need improvement. This can help you make necessary adjustments and improvements to your website in order to increase its visibility and improve its performance in search engine results pages.

   You may track your page load times, server response times, and other metrics by using tools like Google Analytics, webpagetest.org, and Pingdom to keep an eye on the performance of your website.

   To evaluate the effectiveness of your page and pinpoint areas for development, you can also employ browser development tools. You may also set up alerts or notifications to be informed if the performance of your website drops below a predetermined level. Monitoring your site's performance on a regular basis will help you find and fix any performance problems and make sure that your site is operating effectively.

9. Monitor your backlinks: by keeping track of your backlinks, you can find any broken links or spam links that can affect your search engine rankings. You can watch and monitor backlinks using tools like Ahrefs or Moz and then utilize the information to improve your ecommerce SEO strategy. This can assist you in determining which websites add value and which might harm the reputation of your website.

   A backlink tracking tool allows you to track and evaluate the backlinks to your ecommerce website. It provides data on the quantity, quality, relevancy, and the domains of the backlinks. This information can help you improve your website's search engine rankings.

   To monitor your backlinks, you can follow these steps:

   • Join a backlink tracking service and add your website to the service.
   • Create a list of your backlinks with the tool. A list of the websites and pages that are linked to your website will normally be provided by the program.
   • Examine the list of backlinks and judge the value and significance of each. Avoid links from spammy or low-quality websites and seek out backlinks from pertinent websites.
   • Follow any alterations or additions to the backlinks throughout time. Usually, the program will send messages or alerts whenever new backlinks are added or old backlinks are deleted.
   • Increase the number of high-quality backlinks to your website by optimizing your link-building strategies using the data from the backlink monitoring tool. By doing this, you can raise your website's search engine rankings and increase traffic.

10. Utilize internal linking: internal linking is a fantastic technique to enhance user experience on your website and facilitate easy content crawling for search engines. Be careful to connect from each page to the appropriate product pages and categories.

    An ecommerce website can use internal linking in the following ways:

    • Links to comparable or related products should be added to product pages so that customers can simply find related things and browse your whole catalog.
    • Link to category pages from the main navigation: To make it easier for users to reach the various product categories on your website, provide links to your category pages in the main menu.
    • Link to product pages from category pages: On each category page, include links to specific product pages so visitors may quickly access this information and add things to their cart.
    • Link to popular or featured products: To draw attention to your best-selling or most popular things, include links to popular or featured products on your homepage and other prominent pages.

    Utilizing internal linking can make it easier for consumers to explore your website and find new products, which will increase the likelihood that they will make a purchase.

    With these tips, you should see a significant change in your ecommerce search engine ranking, and also a noticeable improvement in sales and engagements.

Building SEO-enabled ecommerce websites with Medusa

Medusa is a powerful open-source platform for building ecommerce websites that allows you to quickly and easily create highly optimized online stores. The platform is designed to assist business owners and entrepreneurs in setting up profitable online shops that are search engine optimized.

With Medusa, it's simple to manage customer orders, keep track of inventory, and develop aesthetically pleasing user-friendly websites. Advanced capabilities like real-time analytics and automated inventory management are also available on the platform.

To further help you build a unique website experience, Medusa gives you access to a variety of configurable themes and plugins. Medusa is a great choice for organizations that want to quickly create an ecommerce website with SEO capabilities. This is because Medusa has a user-friendly design that is easy to use.

Conclusion

In conclusion, SEO plays a crucial role in the success of any ecommerce website. You can make sure that your website is optimized for search engines by using the advice provided in this article. This will help you rank higher, attract more visitors, and eventually boost sales. Your ecommerce website will also stand out from the crowd and realizes its full potential with a little effort and commitment.

You can reach out to the Medusa team via Discord if you have any inquiries about Medusa or if you run into any problems using it. You can get personalized assistance and get your questions answered in real-time by contacting the Medusa team on Discord.