DEV Community: Christianaojo

Developing a Competitive Differentiation Strategy to Succeed in the Hyper-Competitive SaaS Market

Christianaojo — Sat, 17 May 2025 18:42:15 +0000

In the fast-paced and highly competitive world of Software as a Service (SaaS), standing out is no longer an option, it’s a survival skill.

With thousands of SaaS companies jostling for the same customer base, differentiation has become critical for growth. But what does it truly mean to differentiate? And how can you ensure your business isn’t lost in a sea of similar offerings?

Competitive differentiation is about more than just being different. It’s about offering a unique value that resonates with your target audience, compelling them to choose you over competitors. As Seth Godin famously said, “Surprise and differentiation have far more impact than noise.” In this crowded marketplace, you aim to rise above the noise by creating a clear, memorable, and valuable position for your business.

With over 16,000 SaaS companies in the US alone, the competition is fierce. Prospective customers have a plethora of options, each vying for their attention. The question is, how do you set your SaaS business apart?
This guide will walk you through the strategies and techniques used by successful SaaS companies to differentiate themselves and thrive in a saturated market.

Why Differentiation is Essential for SaaS Success

Michael E. Porter, author of What is Strategy, encapsulated the essence of competitive differentiation when he stated, “Competitive strategy is about being different. It means deliberately choosing a different set of activities to deliver a unique mix of value.”

In the SaaS ecosystem, differentiation goes beyond having a unique product. It’s about demonstrating the value you bring to the table in a way that aligns with your audience's needs and expectations. Without differentiation, your SaaS offering risks being perceived as a commodity, making it harder to attract and retain customers.

Differentiation not only establishes your identity in the market but it also drives customer loyalty and enhances your brand’s reputation. It’s the foundation upon which lasting customer relationships are built, enabling you to command higher prices, improve customer retention, and achieve sustainable growth. Whether through innovative features, exceptional service, or a compelling brand narrative, standing out is imperative to thrive in today’s hyper-competitive SaaS landscape.

Broad vs. Focused Differentiation Strategies

When it comes to differentiation, SaaS businesses generally adopt one of two main approaches: broad differentiation or focused differentiation. Each strategy has its strengths and is suitable for different business models and market dynamics.

Broad Differentiation Strategy

Broad differentiation targets a wide customer base by offering features or experiences that appeal to a broad audience. Companies employing this strategy emphasize universal value, ensuring their products resonate across diverse demographics.

Take Starbucks and Apple, for instance:

Starbucks transforms a simple coffee purchase into a delightful experience. From the inviting ambiance to the personalized service, Starbucks creates a sense of exclusivity and comfort that encourages customers to pay a premium.

Apple stands as a symbol of luxury and innovation. By offering sleek, user-friendly products that exude prestige, Apple has cultivated a loyal customer base willing to invest in their ecosystem.
For SaaS companies, implementing a broad differentiation strategy means ensuring that your product’s value is evident and compelling to a wide range of users. Whether through an intuitive user interface, comprehensive features, or exceptional support, the goal is to create a product that appeals universally.

Focused Differentiation Strategy

Focused differentiation, on the other hand, hones in on a specific niche or target market. This strategy involves tailoring your product and messaging to meet the unique needs of a well-defined audience.

A prime example is Lamborghini, which caters exclusively to affluent consumers seeking premium, high-performance vehicles. Their marketing efforts are laser-focused on a narrow segment, ensuring their brand remains synonymous with luxury and exclusivity.

For SaaS businesses, adopting a focused differentiation strategy can be particularly effective in niche markets. By understanding the unique pain points and goals of a specific audience, you can create a product that feels custom-built, fostering loyalty and driving customer satisfaction.

Identifying Your Competitive Differentiators

Differentiation starts with understanding what makes your business unique. Your competitive differentiators are the attributes that set you apart from others in the market. These attributes should not only reflect your strengths but also address the needs and preferences of your target audience.

Here are five key areas where you can differentiate:

Price Differentiators
Price can be a powerful differentiator, particularly when paired with flexible billing options or value-driven pricing models. Consider how your pricing strategy aligns with your audience’s expectations and willingness to pay.
Brand Differentiators
Your brand’s identity—encompassing its tone, style, and values—plays a pivotal role in how customers perceive you. A strong, consistent brand presence can make your business more memorable and trustworthy.
Product Differentiators
Unique features, exceptional performance, or innovative design can set your product apart. Highlight the capabilities that provide tangible benefits to your customers.
Channel Differentiators
The ways in which you deliver your product to customers, including your marketing and distribution channels, can also serve as differentiators. Think about how you can make your offering more accessible or appealing through these channels.
Service Differentiators
Outstanding customer support and personalized interactions can create lasting impressions. Whether through live chats, social media engagement, or proactive problem-solving, exceptional service fosters loyalty.

Crafting an Effective Differentiation Strategy

Developing a successful differentiation strategy requires a methodical approach. Here’s how you can create one that aligns with your goals and resonates with your audience:

Define Your Differentiator Begin by identifying what sets your product or service apart. Ask yourself: What unique value do we bring to our customers? Is it our pricing model, superior functionality, or exceptional user experience? Once you pinpoint your differentiators, focus on highlighting them in your messaging and branding.
Develop a Clear Value Proposition Your value proposition is a concise statement that communicates your product’s unique benefits. It should address the problems your product solves, its advantages over competitors, and the reasons customers should choose your brand. A well-crafted value proposition serves as the foundation for your marketing and sales efforts.
Embrace Storytelling Stories are a powerful way to connect with your audience on an emotional level. By weaving narratives that highlight your brand’s mission, values, or customer success stories, you can humanize your business and foster loyalty.

Consider the example of Huggies, which launched the “No Baby Unhugged” campaign to differentiate itself from Pampers. By emphasizing the scientifically proven benefits of hugs for newborns, Huggies created an emotional connection with its audience, leading to increased sales and engagement.

Leverage Customer Feedback Engage with your customers to understand their needs, preferences, and pain points. Their insights can help you refine your product, improve your services, and identify new opportunities for differentiation.
Monitor Competitors Stay informed about your competitors’ strategies and offerings. By understanding their strengths and weaknesses, you can identify gaps in the market and position your business to fill them effectively.

Differentiation in Action: Lessons from Leading SaaS Brands

Successful SaaS companies often employ creative differentiation strategies to stay ahead of the curve. Here are a few examples:
Slack transformed workplace communication by offering an intuitive, user-friendly platform that integrates seamlessly with other tools. Their focus on simplicity and collaboration set them apart in the crowded messaging app market.
HubSpot differentiated itself by providing an all-in-one marketing, sales, and customer service platform tailored to small and medium-sized businesses. Their emphasis on inbound marketing and educational content built a loyal community of users.
Zoom gained prominence by delivering a reliable, easy-to-use video conferencing solution with features that addressed specific pain points, such as meeting security and accessibility.
These brands succeeded by identifying and emphasizing their unique strengths, ensuring their offerings resonated with their target audiences.

Conclusion

In the ever-evolving SaaS market, differentiation is not just a strategy—it’s a necessity. You can stand out in even the most competitive environments by defining your unique value, crafting a compelling narrative, and consistently delivering exceptional experiences.

Remember, differentiation is an ongoing process. As customer needs evolve and market dynamics shift, stay proactive in refining your strategy to maintain your competitive edge. By doing so, you’ll position your SaaS business for sustainable growth and long-term success. It’s time to rise above the noise and make your mark.

Exploring Ethereum's New ERC-4337 Standard: A Revolutionary, User-Friendly Innovation for Blockchain Applications

Christianaojo — Tue, 16 May 2023 08:51:54 +0000

Introduction of Ethereum and Ethereum standards.

One of the most popular and widely applied blockchain technologies is Ethereum. While Ethereum's native coin, ether (ETH), litecoin (LTC) as well as bitcoin cash (BCH), can be used to make payments, Ethereum was built to be a much more adaptable and feature-rich blockchain system. Decentralized applications (dApps) and smart contracts can both be run on Ethereum. Additionally, it permits the augmentation of its fundamental protocol with tokens.

On the Ethereum blockchain, the creation and management of tokens is governed by a number of token standards. The adoption of Ethereum in the decentralized finance (DeFi) ecosystem has been greatly aided by these token standards, which also include ERC-20, ERC-721, ERC-1155, and many others.

The new ERC-4337

A new Smart wallet standard called ERC-4337 was released on the Ethereum mainnet in March 2023 with the goal of enhancing user experience inside the blockchain ecosystem. It is intended to improve the compatibility and interoperability of various tokens on the Ethereum network, simplifying the creation and management of tokens on the blockchain for developers. It is a framework around submission of transactions on Ethereum without making direct changes to consensus. The capacity of ERC-4337 to let token holders to carry out specific operations without the need for third-party intermediaries is one of its primary advantages. This makes it simpler to develop new use cases and applications since it allows for greater autonomy and flexibility in managing tokens. Ethereum has significantly improved the usefulness and accessibility of blockchain technology for both users and developers with the launch of ERC-4337.

Features of ERC-4337 and availability

ERC-4337 is a game-changing breakthrough for the Ethereum blockchain ecosystem thanks to a number of its features. Account abstraction, one of its core characteristics, dramatically enhances user friendliness and makes it simpler for developers to generate and administer tokens on the blockchain. Additionally, it has sophisticated capabilities including batch transfers, transaction tracking, and cryptographic signatures for authenticating transactions. In addition, ERC-4337 allows for the production of non-fungible tokens (NFTs), which have grown incredibly popular in recent years due to their application in video games, collectibles, and digital art. Regarding accessibility, ERC-4337 is an open-source standard that anybody can use and expand on, making sure that it is still available to the larger blockchain community.

ERC-4337 is also available on networks compatible with the Ethereum Virtual Machine (EVM) such as Polygon, Avalanche, Arbitrum, and several others.

Benefits of ERC-4337

ERC-4337 allows for the use of smart accounts that are expected to be more user friendly for beginners

ERC-4337 allows for the use of smart accounts, which are expected to be more user-friendly for beginners due to their simplified management and increased flexibility. With smart accounts, users can set up predefined rules and conditions for token transfers, such as setting transaction limits, requiring multiple authorizations, or locking tokens for a specific time period. This reduces the complexity of managing tokens, making it easier for beginners to navigate the blockchain ecosystem. Additionally, smart accounts provide greater security and transparency by enabling users to track and verify their transactions using cryptographic signatures. This ensures that transactions are secure and tamper-proof, protecting users from potential fraud and theft.

It saves Time and reduce transaction fees

ERC-4337 enables dApp developers to cover all or part of the cost of users' transaction fees, which are frequently charged to users on dApps. Additionally, ERC-4337 enables users to pay fees using ERC-20 tokens rather than ETH. As a result, a decentralized fee market for smart contract operations should be created. Additionally, it supports the usage of aggregated signatures and enables several privacy-preserving features. Additionally, ERC-4337 is accessible on networks like Polygon, Avalanche, Arbitrum, and a number of others that support the Ethereum Virtual Machine (EVM).
ERC-4337 allows you to send several transactions when submitting transactions, which ultimately help you save time and money on transaction fees.

Account abstraction

By adopting account abstractiion, the ERC-4337, is aimed to increase adoption and improve interactivity. One of the major blocks of blockchain adoption is security- the fact that users would have to memorize security keys or save them off chain, and user may completely loose access to the wallet if they could not access or remember the secret keys. With Account abstraction, private keys for a crypto wallet can be stored on a smartphone's default security module. This would create what some would consider a hardware wallet within their phone.

Enhanced interoperability and compatibility

The compatibility and interoperability of tokens on the Ethereum blockchain network have been considerably improved by ERC-4337. This is accomplished by standardizing token transfers, which makes it simpler to transfer tokens between various wallets and decentralized applications (DApps) on the network. Because of this improved interoperability, tokens can now be utilized in a larger variety of applications, enhancing the Ethereum ecosystem's overall usefulness. Additionally, ERC-4337's interoperability with other Ethereum token standards makes it simple for developers to incorporate pre-existing tokens to fresh DApps or design new tokens that work with already-existing programs. The Ethereum community benefits from more collaboration and creativity as a result of the huge reduction in development time and expense.

Implication of ERC-4337 for Ethereum Adoption

The ERC-4337 standard has significant implications for the adoption of Ethereum as a blockchain platform. By improving the user experience and increasing the flexibility of managing tokens, it makes Ethereum more accessible and user-friendly to a wider audience. This, in turn, is likely to increase adoption by developers and users, driving the growth of decentralized applications and the Ethereum ecosystem as a whole. The enhanced interoperability and compatibility of tokens under ERC-4337 also allows for greater innovation and collaboration among developers, leading to the creation of new use cases and applications for the platform. Furthermore, the availability of ERC-4337 as an open-source standard ensures that it remains accessible and relevant to the wider blockchain community, further promoting the adoption and growth of Ethereum.

Conclusion

ERC-4337 lays the technical foundation for innovative cryptocurrency wallets. Based on what they can create, developers may alter the primary interface between users and cryptocurrencies. Nevertheless, in the years to come, it will be important to monitor how ERC-4337 affects user experience and cryptocurrency in general.

Resources

EIPS.ethereum.org

Build with Boba: The Future of Blockchain Development with Boba Network.

Christianaojo — Fri, 12 May 2023 10:04:45 +0000

Blockchain technology is undoubtedly the technology of the future. At its core, blockchain is a decentralized and distributed ledger system that enables secure and transparent transactions and data management, and Boba Network is at the forefront of the industry with its innovative take on this technology. With a unique approach, the Boba network aims to deliver a faster, cheaper, and smarter experience for blockchain's next billion users.

Boba provides a scalable, secure, and decentralized platform that is perfect for businesses and individuals alike. When it comes to blockchain technology, Boba is truly raising the bar as it is setting the standard for what the blockchain of the future will look like with its cutting-edge technologies.

Boba Network and Its Unique Features

From the foundational aim of scaling Ethereum, Boba Network has grown into a multi-chain scaling solution built on top of the blockchain industry's biggest protocol known as layer-2(L2), that now aims to become a universal scaling platform for all blockchains by providing a faster, cheaper, more dynamic and secure Web3 experience while ultimately increasing blockchain usability.

Using one of the most popular blockchain scaling solutions to date - Optimistic Rollups (ORs), Boba Network is working to significantly reduce transaction fees, increase throughput and expand the capacities of smart contracts on multiple(EVM) based protocols.

As the first scaling infrastructure deployed on multiple blockchains including Ethereum, Avalanche, Binance Chain, and more, it has full EVM compatibility which makes execution of any smart contract currently running on Ethereum or any EVM-compatible blockchain super easy without losing the underlying security.

For gaming users, Boba has a specialized gaming interface that enables players to seamlessly engage with their preferred games, exercise complete authority over their in-game possessions, and accumulate loyalty points.

The team behind Boba Network is working diligently to establish it as the preferred platform for both smart contract developers and individual users, even though it is still in its early growth stages, the response thus far has been overwhelmingly favorable, and we eagerly anticipate what the future holds for the network.

Recent Development and what it means for Developers

In April 2023, the team recently announced that its BobaBNB platform processed a record-breaking 2,863,240 transactions. This marked a significant surge compared to 585,818 transactions in March and 99,362 transactions in February.

The network boasts over 45,000 registered wallets and handles more than 100,000 transactions daily. These figures demonstrate a remarkable increase in adoption and activity on the network.

On the Boba network, users and developers can save an average of 80% on transaction fees while enjoying extremely fast transaction speeds. This achievement is a major milestone, representing the first instance of substantial L2 transaction volume on a non-Ethereum environment. It is expected to revolutionize transactions and attract more users to the network.

Also in April, the team announced a partnership with ROVI Network, this enables users to use Non-Custodial MPC Wallet, 1-click On/Off Ramp Infra, piggybacked upon already existing behavior of masses on WhatsApp Messaging, Payments and Gaming.

“We are glad to see the growing adoption of BobaBNB with these remarkable transaction volumes. As an advanced layer-2 scaling solution on BNB Chain, Boba Network aims to accelerate the development of dApps and games, and we are excited to see what the future holds for this ecosystem”, ---Zoe Wei, Head of Marketing and DevRel at BNB Chain.

Previously, in November 2022, Boba Network became BNB Chain’s First Layer-2 Scaling Solution by deploying the first layer-two to BNB Chain, offering enhanced scalability and low fee computation to a top-3 popular blockchain by total value locked.

What this means for developers

For developers, in addition to incredible speeds and significantly lower fees, Boba offers a swap-based system for rapid L2->L1 exits. It enables normal interaction with L2 ETH by using familiar Ethereum methods such as msg.value, eth_sendTransaction, and provider.getBalance(address) instead of requiring WETH. The process of deploying smart contracts on the network is also smooth and fast. In fact, for most contracts, the deployment experience is exactly like deploying on Ethereum.

The official development stacks provided by Boba are simple and can be learned about here. You can also contribute to the project on the official repository.
Boba is a relatively new blockchain designed to be scalable and fast. It is already being used by several projects and has secured partnerships with other significant players in the industry.
All indications suggest that the Boba blockchain network is trending upward. Furthermore, its rapid short and long-term growth is acceptance points to a promising future. This is fantastic news for the entire blockchain ecosystem, demonstrating how blockchain technology is evolving and the wide range of adoptions and applications it can support.

Conclusion

As the blockchain industry continues to evolve, Boba Network's commitment to innovation, scalability, sustainability, and security positions it as a front-runner in the future of blockchain development. By embracing Boba Network and harnessing its capabilities, smart contract developers and businesses can unlock the full potential of blockchain technology, revolutionize industries, and create new possibilities for economic and social transformation.

The future of Boba Network is promising and bright, with ongoing advancements and innovations that will further solidify its position as a leading blockchain platform. Through its commitment to scalability, interoperability, sustainability, and governance, Boba Network will continue to attract developers, foster collaboration, and drive the next wave of decentralized applications that transform industries and shape the future of blockchain technology.

Frontend Development Essentials for 2023.

Christianaojo — Fri, 24 Mar 2023 11:31:19 +0000

Frontend development is an ever-changing field, and staying up-to-date with the latest trends and technologies is crucial for success. As we head into 2023, there are some essential frontend tools and technologies that every developer should be familiar with. In this article, we'll explore some of the most important frontend essentials for 2023.

React

React has been a dominant force in frontend development for years, and it's not going anywhere anytime soon. With its efficient rendering and reusable components, React is a great choice for building complex user interfaces. In 2023, React is still a must-know for frontend developers, and staying up-to-date with its latest features and best practices is essential.

TypeScript

TypeScript is a typed superset of JavaScript that helps catch errors before they become runtime issues. It provides better tooling, more reliable code, and improved scalability for large codebases. In 2023, TypeScript is becoming more and more popular, and many companies are adopting it as their primary language for frontend development.

CSS Grid

CSS Grid is a powerful layout tool that allows you to create complex layouts with ease. With its ability to handle both rows and columns, CSS Grid can help you create responsive and flexible designs that work on any device. In 2023, CSS Grid is a must-know for any frontend developer looking to create modern, dynamic layouts.

GraphQL

GraphQL is a query language for APIs that allows you to request only the data you need, making it more efficient than traditional REST APIs. With its ability to reduce network requests and improve performance, GraphQL is becoming increasingly popular in frontend development. In 2023, it's essential for developers to understand how to use GraphQL to optimize their web applications.

Next.js

Next.js is a React framework that allows you to build server-side rendered and statically generated websites with ease. With its simple setup and built-in optimizations, Next.js is a great choice for building fast and SEO-friendly web applications. In 2023, Next.js is becoming more popular, and it's essential for frontend developers to know how to use it to build modern web applications.

Tailwind CSS

Tailwind CSS is a utility-first CSS framework that allows you to build responsive designs with minimal effort. With its extensive set of pre-defined classes, Tailwind CSS can help you speed up your development process and create consistent, high-quality designs. In 2023, Tailwind CSS is gaining popularity, and it's becoming an essential tool for frontend developers.

WebAssembly

WebAssembly is a binary format that allows you to run code written in languages other than JavaScript, such as C, C++, and Rust, in the browser. With its ability to improve performance and reduce the size of web applications, WebAssembly is becoming more and more popular in frontend development. In 2023, it's essential for developers to understand how to use WebAssembly to optimize their web applications.

In conclusion, frontend development is an exciting and ever-changing field, and staying up-to-date with the latest tools and technologies is crucial for success. In 2023, the above tools and technologies are becoming essential for frontend developers. By mastering these essentials, developers can build modern, high-quality web applications that meet the needs of today's users

Utilizing the Benefits of Smart Contract Security Auditing

Christianaojo — Thu, 09 Feb 2023 16:16:05 +0000

There's a famous saying that with a smart contract, the code is the law. Meaning there is no room for error. The contract can run only as the coding dictates. And once smart contracts have been deployed, developers can't fix them. They must create a new version and deploy that, which can be costly and time-consuming. Smart contract security auditors can help ensure that coding is safe and secure.

This article will take us through a detailed analysis of a smart contract security audit, including its importance and benefits, working mechanisms, types, costs, and much more.

What are Smart Contracts?

Before finding out how to audit a smart contract, let's have a brief understanding of smart contracts. Smart contracts are computerized transaction protocols tailored for executing the terms of a contract. Primarily, smart contracts are tailored to address common contractual conditions while reducing accidental exceptions and the involvement of intermediaries.

Presently, smart contracts serve a wide range of use cases, such as supply chain management, ICOs, and electoral voting. So, where is the problem? Just like any other software, smart contracts come with security vulnerabilities. Therefore, a smart contract audit is necessary to ensure that smart contracts are free of security issues. At the same time, auditing also ensures that smart contracts are optimized to provide ideal performance levels.

What is a Smart Contract Security Audit?

A smart contract security audit involves a detailed analysis of the contract's code to identify security issues and incorrect and inefficient coding and to determine ways to resolve the problems. The audit process is essential to ensuring blockchain applications' security and reliability. A smart contract audit analyzes the source code to see if it follows the predetermined conditions and behaves as the developer intends. Auditing a smart contract aims to discover possible errors and security vulnerabilities in the code and recommend improvements and ways to fix them.

Smart contract security audits are widespread in the Decentralized Finance (DeFi) space. At the same time, most people understand the importance of audits for cybersecurity, but only some care to dive into the lines of code. However, considering investing in a project, it is better to consider its smart contract code review and decision.

Therefore, smart contract security auditing involves bringing in many potential scenarios and running endless, exhaustive tests with many third-party applications to find any bugs. After the initial testing, the auditors produces a report for the contract-building team to review. The team can address any problems before the audit is over. This offers them the opportunity to add any revisions to the final report.

Types of Smart Contracts Security Audits

An audit can be categorized in two ways: External and Internal Audit

External auditing signifies outsourcing smart contract auditing to a third-party unrelated to the project development. External auditing adds a different dimensionality to your smart contract. The external audit team consists of a specialized team of security professionals providing an unbiased perspective on your project. Also, hiring an outsider is typically cost-effective rather than maintaining a team of security professionals.

Internal auditing implies an internal team of security professionals to test projects for vulnerabilities. Undoubtedly, this could be the first line of assessment for your project. Also, unlike an external audit, there is no need to pre-plan an audit which can be done periodically. However, it can be costly to maintain a whole team of security experts.

Why are Smart Contract Security Audits Important?

After finding the answer to ‘what is a smart contract security audit?’ it is reasonable to look for its significance. Security is one of the formidable concerns for smart contract implementation in present times. The concerns of inefficiency, security issues, and misbehavior could lead to excessively high additional costs in implementing smart contracts on a blockchain network.

While blockchain technology is secure, blockchain applications have security vulnerabilities. One of the best-known security incidents involving smart contracts was a theft worth $50 million in 2016. Hackers exploited vulnerable code in a blockchain investment fund, the DAO, controlled through smart contracts. A smart contract security audit team can help mitigate such risks.

Blockchain enterprises are often troubled concerning smart contract implementation. Considering its irreversible nature, an attack once made can’t be rolled back—furthermore, risk of losing the entire contract and its assets due to security vulnerabilities in smart contracts.

Below are a few benefits of a smart contract security audit:

A security audit identifies major systemic flaws in your project and avoids costly errors. Auditing code early in the development lifecycle can prevent fatal flaws after launch.

Establishing trust with your investors and users is critical. An audit acts as a security stamp, adding a layer of security to your project.

Security audits are critical for developing risk assessment plans and mitigation strategies for organizations dealing with individuals’ sensitive and confidential data.

An audit will erect a hack-proof wall around your project, shielding it from potential threats.

Auditing not only detects code errors but also optimizes them for performance.

Process for Smart Contract Security Audit
A smart contract audit is a comprehensive process. A smart contract can consist of thousands or tens of thousands of lines of coding. Even obvious issues sometimes get lost in the sheer bulk. The testing tools and human auditors must discover errors and potential vulnerabilities in the coding as written and in what is missing. Let's break down the process of a smart contract security audit.

Documentation

The first step of an audit is to gather all relevant documentation. This includes the white paper, codebase, and any other material related to the smart contract. The auditor can gain a high-level understanding of the blockchain application by reading the design documentation.

Without access to documentation, the auditors will have no way of knowing what the smart contract is designed to do. Documentation, including a full specification for the project, is essential to the auditing process. For auditors to see the code working as intended, they must know what you want the code to achieve.

The developers and auditors must agree on a code freeze at this stage. No more code will be written, or the contract audit will not consider any code written after that point.

Unit Testing

Once the auditor understands the code and the application, they will run automated tests with various tools. At this stage, smart contract auditors use auditing tools and testnet, ensuring unit testing covers the maximum risk involved. This is by far the easiest way to detect potential issues. The auditors will take various steps, including integration tests exploring large amounts of code, unit tests looking at individual functions, and penetration testing to probe for security vulnerabilities.

Line coverage is an excellent measure of how well the tests cover the code. High line coverage indicates that the tests are doing an excellent job of exploring all of the lines of code in the application. Once the automated tests are complete, the auditor will move on to manual testing.

Manual Auditing

Even though automated tests can identify possible vulnerabilities in the code, they cannot understand what a blockchain developer is trying to achieve with their application. They can also turn up false negatives. This shows why a manual review of the code is essential. By reading the code and understanding how everything fits together, auditors identify potential issues that automated tests miss.

When an audit team analyzes the code, they can refer back to the project specification and any other supporting documentation to see whether the code performs as it should. A mixture of manual and automated testing is vital to ensuring nothing slips through the cracks.

Initial Reporting

Following manual and automated audits, an initial report highlighting the issues and their severity levels is compiled. Furthermore, the security team explained issues with the smart contract and its severity levels.

Code Refactoring

Once the auditor has found issues in the code, they will work with the project team to resolve them. This process can be long and complicated, but it is essential to the project's success. By resolving all issues, you can ensure that your smart contracts are ready for deployment.

When it comes to blockchain applications, security is of utmost importance. That's why it's essential to have a team of experienced auditors who helps identify and mitigate potential issues with your code. Before beginning the deployment process, ensure you have enough time for a complete security audit.

Audit report

Once the audit is complete, the auditor will provide a report detailing their findings. This report will be a valuable resource for the project team and anyone involved in the application. It will help to identify any potential issues that may have been missed and provide a roadmap for resolving them.

How much does a smart contract audit cost?

The cost of a smart contract audit varies depending on the size and complexity of the application. In general, smart contract auditors typically charge USD 5,000 to USD 15,000 but might charge more depending on the size and complexity of the contract.

If you are considering using a blockchain application, smart contract auditing by an experienced auditing team is a no-brainer. Smart contracts execute financial transactions and are relied upon for essential functions. Unlike with other types of software, bug-free code is vital here.

How to Become a Smart Contract Auditor?

A smart contract auditor is a security professional who manually examines the smart contract line by line and uses smart contract audit tools to check for bugs.

An auditor verifies that a contract is securely and correctly implemented on a blockchain network.

Demand for auditors has increased with the rising popularity of smart contracts and the growing crypto-heists associated with them. Although there could be several ways to become a smart contract auditor, here is a step-by-step that you can follow.

Learn programming - any language, whether Java, C++, or python, would work. The aim is for you to understand the fundamentals of coding.

Once you understand coding, move to Ethereum basics and token standards, including ERC20, ERC721, ERC777, ERC1155, ERC4626, and BEP20.

Learn Solidity - is an EVM-compatible programming language used for most smart contracts. And due to its widespread popularity, it has much documentation and study material compared to non-EVM-compatible languages.

Smart contract audit is not only about detecting bugs. It is responsible for optimized code functioning as well. Therefore, it is essential to read about gas optimization, upgradable and proxy contracts, smart contract helper libraries, blockchain protocols, and smart contract debugging.

Develop a clear understanding of decentralized finance(DeFi), the hottest area for auditing. Defi hacks are one of the most popular and recurring phenomena in the blockchain. Hence, you must have detailed knowledge about DeFi smart contract functioning and its vulnerabilities.

Try hands-on smart contract audit tools for a thorough review of the code.

Reporting is an integral part of an audit. Learn to report reading so that you can even develop one without errors.

To stay informed about blockchain security, follow and read the blog posts of top security researchers such as Samczun, Peck-shield, Mudit Gupta, and others.

Conclusion

A security audit is so essential it might as well be considered a part of smart contract development. It is quite clear that smart contract audits could be a promising tool for improving the functionality of smart contracts. What seemed almost impenetrable had some security vulnerabilities in them. The smart contract audit cost might vary considerably depending on the platform or tool you select to use.

Many other factors also affect the efficiency of smart contract audits, such as communication between the project team and the audit team. However, enterprises should work on identifying the challenges of smart contract audits to improve their effectiveness in leveraging smart contracts.

If you intend to become a professional smart contract auditor, you can check out ekolance. They help professionals start working on Blockchain, and they're also running ten weeks of free Smart Contract Audit Training

Build Refactor: A React app with the new Firebase v9.x Web SDK

Christianaojo — Mon, 28 Nov 2022 10:18:41 +0000

The release of version 9 of the Firebase Web SDK has introduced breaking changes in methods for managing users and querying databases. Code written in Firebase v8.x will throw errors when used in v9.x, which calls for refactoring.

In this article, we’ll learn how to refactor a React app that uses the Firebase Web SDK v8.x to v9.x., which is also called the modular Web SDK. For our example, we’ll use an Amazon clone built with v8.x and refactor it to v9.x. Let’s get started!

Prerequisites

To follow along with this tutorial, you should be familiar with React and Firebase v8.x. You should also have Node.js installed on your machine.

Introducing Firebase v9.x Web SDK

The new web SDK moves away from the namespace approach that was used in version 8. Instead, it adopts a modular format optimized for eliminating unused code, for example, tree shaking, resulting in a significant reduction in the JavaScript bundle size.

The transition to a modular approach has introduced breaking changes, making the new library backward incompatible and causing the code used in v8.x to throw errors in the new Firebase v9.x SDK.

The following code shows some of the breaking changes introduced in the new library:

// VERSION 8
import firebase from 'firebase/app';
import 'firebase/auth'; 

firebase.initializeApp();
const auth = firebase.auth();

auth.onAuthStateChanged(user => { 
  // Check for user status
});


// VERSION 9 EQUIVALENT
import { initializeApp } from 'firebase/app';
import { getAuth, onAuthStateChanged } from 'firebase/auth';

const firebaseApp = initializeApp();
const auth = getAuth(firebaseApp);

onAuthStateChanged(auth, user => {
  // Check for user status
});

Both code samples above monitor a user state. Although both are similar in the number of lines of code used, in v9.x, instead of importing the firebase namespace or the firebase/auth side effect, which augments authentication service to the firebase namespace, we are importing and using individual functions.

These changes take advantage of the code elimination features of modern JavaScript tools like Webpack and Rollup.

For example, the v8.x code above includes the following code snippet:

auth.onAuthStateChanged(user => { 
  // Check for user status
});

auth is a namespace and a service that contains the onAuthStateChanged method. The namespace also contains methods like signInWithEmailAndPassword, createUserWithEmailAndPassword, and signOut, which are not being used by the code. When we bundle our entire code, these unused methods will also be included in the bundle, resulting in a relative size increase.

Though bundlers like Webpack and Rollup can be used to eliminate unused code, due to the namespace approach, they will have no effect. Solving this issue is one of the primary goals of remodeling the API surface to take a modular shape. To learn more about the reasons behind the changes in the new library, check out the official Firebase blog.

Firebase compatibility library

The new SDK also includes a compatibility library with a familiar API surface, which is fully compatible with v8.x. The compatibility library allows us to use both old and new APIs in the same codebase, enabling us to progressively refactor our app without breaking it. We can use the compatibility library by making a few tweaks to the import paths as follows:

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

We’ll take advantage of the library when we refactor our Amazon clone app.

Firebase Web SDK v9.x benefits

In short, the Firebase Web SDK v9.x offers reduced size and increased performance overall. By taking advantage of code elimination features through JavaScript tools like Webpack and Rollup, the new web SDK offers a faster web experience. With the new modular shape, the new SDK is said to be about 80 percent smaller than its predecessors, according to the official Firebase Twitter account.

Firebase Tweet v9 80 Percent Size

Setting up our React app for refactoring

Now that we’re familiar with the new SDK, let’s learn how to refactor our v8.x app. The Amazon clone app that we’ll use in this section is an ecommerce app built using Firebase and Strapi.

In our app, we used Firebase to add features like managing user identity with Firebase authentication and storing products purchased by authenticated users with Cloud Firestore. We used Strapi to handle payments for products bought on the app. Finally, we created an API with Express.js that responds with the Strapi client secret of a customer who is about to purchase a product with Firebase Cloud Functions.

You can access a deployed version of the site, which looks like the image below:

Amazon Clone App

Feel free to play around with the app to better understand what we’re working on in this article.

Setting up the Amazon clone app

Before we begin coding, first, let’s clone the repo from GitHub and install the necessary npm packages. Open your terminal and navigate to the folder you would like to store the React app in. Add the following commands:

$ git clone https://github.com/Tammibriggs/Amazon-clone-FirebaseV8.git
$ cd Amazon-clone-FirebaseV8

Now that we’ve successfully cloned the repo, we need to change the Firebase version in the package.json file to v9.x before we install the packages.

In the root directory, open the package.json file and replace "firebase": "8.10.0" in the dependencies object with "firebase": "9.2.0". Now, let’s install our app’s dependencies by running the following command in the terminal:

$ npm install 
$ cd functions
$ npm install

Although we’ve set up and installed all of our app’s dependencies, if we try running the app with npm start, it will throw errors. To avoid this, we need to fix our app’s breaking changes, which we’ll do shortly.

React app structure

The structure for the src directory of our app is as follows, but we’ve removed all the style files to make it look shorter:

src
 ┣ Checkout
 ┃ ┣ Checkout.js
 ┃ ┣ CheckoutProduct.js
 ┃ ┗ Subtotal.js
 ┣ Header
 ┃ ┗ Header.js
 ┣ Home
 ┃ ┣ Home.js
 ┃ ┗ Product.js
 ┣ Login
 ┃ ┗ Login.js
 ┣ Orders
 ┃ ┣ Order.js
 ┃ ┗ Orders.js
 ┣ Payment
 ┃ ┣ axios.js
 ┃ ┗ Payment.js
 ┣ App.js
 ┣ firebase.js
 ┣ index.js
 ┣ reducer.js
 ┣ reportWebVitals.js
 ┗ StateProvider.js

We’ll only be working with the files that use Firebase services, firebase, App.js, Header.js, Login.js, Payment.js, and Orders.js,

Refactoring the Amazon clone to a modular approach

Let’s update to the v9.x compat library, helping us to progressively migrate to a modular approach until we no longer have any need for the compat library.

The upgrade process follows a repeating pattern; first, it refactors code for a single service like authentication to the modular style, then removes the compat library for that service.

Update imports to the v9.x compat library

Head to the firebase.js file in the src directory and modify the v8.x import to look like the following code:

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

With just a few alterations, we’ve updated the app to the v9.x compat. Now, we can start our app with npm start, and it won’t throw any errors. We should also start the Firebase function locally to expose the API that gets the client secret from Strapi.

In your terminal, change to the functions directory and run the following command to start the function:

$ firebase emulators:start

Refactoring authentication codes

In the Login.js, App.js, and Header.js, we used the Firebase authentication service. First, let’s refactor the code in the Login.js file, where we created the functionality to create a user and sign them in with the Firebase createUserWithEmailAndPassword and signInWithEmailAndPassword methods. When we scan through the Login.js file, we’ll see the following v8.x code:

// src/Login/Login.js
const signIn = e => {
    ...
    // signIn an existing user with email and password
    auth
      .signInWithEmailAndPassword(email, password)
      ....
  }

  const regiter = e => {
    ...
    // Create a new user with email and password using firebase
    auth
      .createUserWithEmailAndPassword(email, password)
      ....
  }

To follow the modular approach, we’ll import the signInWithEmailAndPassword and createUserWithEmailAndPassword methods from the auth module, then update the code. The refactored version will look like the code below:

// src/Login/Login.js
import {signInWithEmailAndPassword, createUserWithEmailAndPassword} from 'firebase/auth'

...
const signIn = e => {
  ...
  // signIn an existing user with email and password
  signInWithEmailAndPassword(auth, email, password)
  ...
}
const regiter = e => {
  ...
  // Create a new user with email and password using firebase
  createUserWithEmailAndPassword(auth, email, password)
  ...
}

Now, let’s refactor the App.js and Header.js files. In the App.js file, we used the onAuthStateChanged method to monitor changes in the user’s sign in state:

// src/App.js
useEffect(() => {
  auth.onAuthStateChanged(authUser => {
    ...
  })
}, [])

The modular v9.x of the code above looks like the following segment:

// src/App.js
import {onAuthStateChanged} from 'firebase/auth'

...
useEffect(() => {
  onAuthStateChanged(auth, authUser => {
    ...
  })
}, [])

In the Header.js file, we used the signOut method to sign out authenticated users:

// src/Header/Header.js
const handleAuthentication = () => {
  ...
     auth.signOut()
  ...
}

Update the code above to look like the code snippet below:

// src/Header/Header.js
import {signOut} from 'firebase/auth'
...
const handleAuthentication = () => {
  ...
    signOut(auth)
  ...
}

Now that we’re done refactoring all the authentication codes, it’s time to remove the compat library to gain our size benefit. In the firebase.js file, replace import 'firebase/compat/auth' and const auth = firebaseApp.auth() with the following code:

import {getAuth} from 'firebase/auth'
...
const auth = getAuth(firebaseApp)

Refactoring Cloud Firestore codes

The process for refactoring Cloud Firestore code is similar to what we just did with the authentication codes. We’ll be working with the Payment.js and Orders.js files. In Payment.js, we use Firestore to store the data of users that paid for products on the site. Inside Payment.js, we’ll find the following v8.x code:

// src/Payment/Payment.js
...
db
  .collection('users')
  .doc(user?.uid)
  .collection('orders')
  .doc(paymentIntent.id)
  .set({
    basket: basket,
    amount: paymentIntent.amount,
    created: paymentIntent.created
  })
...

To refactor the code, we first have to import the necessary functions, then update the rest of the code. The v9.x of the code above looks like the following:

// src/Payment/Payment.js
import {doc, setDoc} from 'firebase/firestore'

...
const ref = doc(db, 'users', user?.uid, 'orders', paymentIntent.id)
setDoc(ref, {
  basket: basket,
  amount: paymentIntent.amount,
  created: paymentIntent.created
})
...

In the Orders.js file, we used the onSnapshot method to get real-time updates of the data in Firestore. the v9.x code looks like the following:

// src/Orders/Orders.js
....
db
  .collection('users')
  .doc(user?.uid)
  .collection('orders')
  .orderBy('created', 'desc')
  .onSnapshot(snapshot => {
     setOrders(snapshot.docs.map(doc => ({
       id: doc.id,
       data: doc.data()
     })))
  })
...

The v9.x equivalent is as follows:

import {query, collection, onSnapshot, orderBy} from 'firebase/firestore'

...
const orderedOrders = query(ref, orderBy('created', 'desc'))
onSnapshot(orderedOrders, snapshot => {
     setOrders(snapshot.docs.map(doc => ({
       id: doc.id,
       data: doc.data()
     })))
  })
...

Now that we’re done refactoring all the Cloud Firestore codes, let’s remove the compat library. In the firebase.js file, replace import 'firebase/compat/firestore' and const db = firebaseApp.firestore() with the following code:

import { getFirestore } from "firebase/firestore";
...
const db = getFirestore(firebaseApp)
...

Update initialization code

The final step in upgrading our Amazon clone app to the new modular v9.x syntax is to update the initialization code. In the firebase.js file, replace import firebase from 'firebase/compat/app'; and const firebaseApp = firebase.initializeApp(firebaseConfig) with the following functions:

import { initializeApp } from "firebase/app"
...
const firebaseApp = initializeApp(firebaseConfig)
...

Now, we’ve successfully upgraded our app to follow the new v9.x modular format.

Conclusion
The new Firebase v9.x SDK provides a faster web experience than its v8.x predecessor, thanks to its modular format. This tutorial introduced the new SDK and explained how to use its compact library to reflector a React app. You should be able to follow the methods and steps outlined in this article to upgrade your own apps to the newest version.

Getting Started with Blockchain Development: A Step-by-Step Guide to Deploying Your First DApp.

Christianaojo — Fri, 07 Oct 2022 12:54:21 +0000

With the birth of Ethereum, the first programmable blockchain, web2 developers started delving into the new exciting blockchain development, dApp and the whole decentralized world. And since we are still relatively early into the web3 space, it is important, either as a web2 developer testing your feet on web3 or as a newbie just trying to get a hang around the software development to pay attention and learn the steps required for building projects on blockchain.

Creating your first and subsequent dApps requires the basic knowledge of the web3 tech stack and the steps you will use in the development. Generally, there are different stages and processes required. In this step by step guide, you will find the necessary steps, tools, and stages required for your first dApp deployment.

Is Blockchain Different From Smart Contract:

Smart contracts and blockchain are two distinct ideas that are closely related to one another. A blockchain is a type of digital network that is created and maintained by many computers running certain software. A distributed ledger tracking transactions makes up the blockchain. Such transactions' information cannot be changed once it has been entered into the system. Since blockchains are completely decentralized, no single entity has control over them.

What are dAapps and How Important Are They?

To get a full idea of what dApps means, we will need to split the word “dApp”. Breaking the word “D-app”, the ‘D’ stands for decentralized and the "app" stands for application. This already gives a much clearer meaning. Just like in web2 here we have decentralization. dApp could be a decentralized mobile application, decentralized websites, decentralized games e.t.c. Conclusively dApps are defined by interaction with the blockchain network.
In the following section, we will be building a mood detector app that communicates with the blockchain, let’s delve in.

Prerequisites:

To build a fully functioning Dapp, you will need to work on three main stages/components which require different stacks. Here are the basic pre requisites.

First you will need to develop your application’s frontend (A basic html web page): This will come easy for you if you are a web2 developer as we will be using tech stacks you are familiar with. To do this you will need;

1. Terminal (e.g Command Prompt)
2. Code editor (e.g Visual Studio code or Atom)
3. Basic knowledge of html and CSS. 
4. Install the http server. Use anything you like, but for this tutorial we will use [`lite-server`(https://www.npmjs.com/package/lite-server):
- Install Node.js ([Download and Instructions](https://nodejs.org/en/download/))
- Install Lite-server (with NPM in the terminal/command prompt):

Next, you will need to create a basic smart contract: This will require
1. Metamask account
2. Smart contract editor (e.g IDE Remix or Hardhat); for this tutorial we would recommend IDE Remix.

Create your first dApp:

We will create a mood decentralized application that simply reads and writes value to the blockchain. We will need a label, input, and buttons.

Create your dApp’s frontend

This should be a simple html webpage that displays your dApp’s user interface.

To do this:
In your terminal (for this tutorial we are using command prompt, create a new folder using the command ‘mkdir ’

In your code editor (for this tutorial we are using Visual Studio Code), open the folder you have just created in your terminal.

In your folder, create a new file called index.html

Open index.html and then create HTML boilerplate

<!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>My First Dapp</title>
  </head>
  <body></body>
</html>

We will create a simple app that reads and writes value to the blockchain. We will need a label, input, and buttons.

Next, inside the body tag, add some text (Your project tittle), a label and input.

<body>
  <div>
    <h1>This is a Mood Decentralized App!</h1>
    <p>Here we can either set or get the mood:</p>
    <label for="mood">Input Mood:</label> <br />
    <input type="text" id="mood" />
  </div>
</body>

Then add buttons

<button onclick="getMood()">Get Mood</button>
<button onclick="setMood()">Set Mood</button>

Customize your app and make it look nicer, you can use your preferred style, color, font size and family

<head>
<style>
  body {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
  }

  div {
    width: 20%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
  }

  button {
    width: 100%;
    margin: 10px 0px 5px 0px;
  }
</style>
</head>

Serve the webpage via a terminal/command prompt from the directory that has index.html in it and run: lite-server.

Congratulations! you have just completed stage one and your front-end is fully ready.
Go to http://127.0.0.1:3000/ in your browser to view your page!

IT’S TIME TO CREATE A BASIC SMART CONTRACT.

To create a Solidity Smart Contract, you will need an editor and for this guide we will use the online IDE Remix.

PS: Not sure how to use it then check this video

Open Remix and ensure the "Solidity Compiler" and "Deploy and Run Transactions" tabs are present. If they are not present, enable them in the plugin manager.

It’s Now time to write your contract

First specify the solidity version and add a license
Create a new solidity file in remix named mood.sol

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.1;
- Define the contract
contract MoodDiary{

}
- Inside the contract create a variable called mood
string mood;
- Next, create Read and Write functions
//create a function that writes a mood to the smart contract
function setMood(string memory _mood) public{
mood = _mood;
}

//create a function the reads the mood from the smart contract
function getMood() public view returns(string memory){
return mood;
}

Your Smart Contract code is now ready and all your code put together should look like this.

 // SPDX-License-Identifier: MIT
 pragma solidity ^0.8.1;
contract MoodDiary{
 }
string mood;
//create a function that writes a mood to the smart contract
 function setMood(string memory _mood) public{
     mood = _mood;
 }

 //create a function the reads the mood from the smart contract
 function getMood() public view returns(string memory){
     return mood;
 }

Now that we have our contract ready, the next step is to deploy the contract. We will be deploying the contract on the Goerli Testnet.

To deploy your smart contract,

Connect your Metamask to the Goerli Testnet.
Select the correct compiler version to match the solidity contract. (In the compile tab)
Compile the code using the "Solidity Compiler" tab.
Deploy the contract under the "Deploy and Run Transactions" tab
Under the Deployed Contracts section, you can test out your functions on the Remix Run tab to make sure your contract works as expected!

Congratulations!
you have now deployed your Smartcontract.

PS: Your contract will not be deployed if you do not compile it first.

Create a temporary folder to save important details.

The folder will hold

The deployed contract's address.
The contract ABI

Connect Your HTML Webpage to Your Deployed Smart Contract

in your local text editor in index.html, add the following code to your html page:

Import the Ethers.js source into your index.html page inside a new set of script tags:

<script
  src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"
  type="application/javascript"
></script>

<script>
  ////////////////////
  //INPUT YOUR CODE HERE
  ////////////////////
</script>

Inside the script tag, import the contract ABI (what is that?) and specify the contract address on our provider's blockchain:

const MoodContractAddress = "<contract address>";
  const MoodContractABI = <contract ABI>
  let MoodContract;
  let signer;

For the contract ABI, we want to specifically navigate to the JSON Section. We need to describe our smart contract in JSON format.

Since we have two methods, this should start as an array, with 2 objects:

const MoodContractABI = [{}, {}]

From the above page, each object should have the following fields: constant, inputs, name, outputs, payable, stateMutability and type.

Your end result should look like this:

const MoodContractABI = [
        {
                "inputs": [],
                "name": "getMood",
                "outputs": [
                        {
                                "internalType": "string",
                                "name": "",
                                "type": "string"
                        }
                ],
                "stateMutability": "view",
                "type": "function"
        },
        {
                "inputs": [
                        {
                                "internalType": "string",
                                "name": "_mood",
                                "type": "string"
                        }
                ],
                "name": "setMood",
                "outputs": [],
                "stateMutability": "nonpayable",
                "type": "function"
        }
]

Next, Define an ethers provider. In our case, this is Goerli:

const provider = new ethers.providers.Web3Provider(window.ethereum, "goerli");

Request access to the user's wallet and connect the signer to your metamask account (we use [0] as the default), and define the contract object using your contract address, ABI, and signer

provider.send("eth_requestAccounts", []).then(() => {
  provider.listAccounts().then((accounts) => {
    signer = provider.getSigner(accounts[0]);
    MoodContract = new ethers.Contract(
      MoodContractAddress,
      MoodContractABI,
      signer
    );
  });
});

Create asynchronous functions to call your smart contract functions

async function getMood() {
  const getMoodPromise = MoodContract.getMood();
  const Mood = await getMoodPromise;
  console.log(Mood);
}

async function setMood() {
  const mood = document.getElementById("mood").value;
  const setMoodPromise = MoodContract.setMood(mood);
  await setMoodPromise;
}

Connect your functions to your html buttons

<button onclick="getMood()">Get Mood</button>
<button onclick="setMood()">Set Mood</button>

After the above step, your index.html file should have the following code

<!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>My First dApp</title>
    <style>
        *{
            background-color: beige;
            font-size: larger;
        }
        body {
          text-align: center;
          font-family: Arial, Helvetica, sans-serif;
        }

        div {
          width: 20%;
          margin: 0 auto;
          display: flex;
          flex-direction: column;
        }
        p{
            font-size: large;
        }

        button {
          width: 100%;
          margin: 10px 0px 5px 0px;
        }
      </style>
  </head>
  <body>
    <div>
        <h1>This Christie's First Decentralized App!</h1>
        <p>Here we can set or get the mood:</p>
        <label for="mood">Input Mood:</label> <br />
        <input type="text" id="mood" />
        <button onclick="getMood()">Get Mood</button>
        <button onclick="setMood()">Set Mood</button>
      </div>
      <script
  src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"
  type="application/javascript"
></script>
<script>
  const MoodContractAddress = "0xd9145CCE52D386f254917e481eB44e9943F39138";
  const MoodContractABI = [
    {
        "inputs": [
            {
                "internalType": "string",
                "name": "_mood",
                "type": "string"
            }
        ],
        "name": "setMood",
        "outputs": [],
        "stateMutability": "nonpayable",
        "type": "function"
    },
    {
        "inputs": [],
        "name": "getMood",
        "outputs": [
            {
                "internalType": "string",
                "name": "",
                "type": "string"
            }
        ],
        "stateMutability": "view",
        "type": "function"
    }
]
  let MoodContract;
  let signer;
  const provider = new ethers.providers.Web3Provider(window.ethereum, "goerli");
  provider.send("eth_requestAccounts", []).then(() => {
  provider.listAccounts().then((accounts) => {
    signer = provider.getSigner(accounts[0]);
    MoodContract = new ethers.Contract(
      MoodContractAddress,
      MoodContractABI,
      signer
    );
  });
});
async function getMood() {
  const getMoodPromise = MoodContract.getMood();
  const Mood = await getMoodPromise;
  console.log(Mood);
}
async function setMood() {
  const mood = document.getElementById("mood").value;
  const setMoodPromise = MoodContract.setMood(mood);
  await setMoodPromise;
}
</script>
  </body>
</html>

Congratulations! You now have a fully functioning decentralized application that can set or get mood.

Time to test your work.

Got your webserver up? Go to http://127.0.0.1:3000/ in your browser to view or open your index.html file in your browser!
Test your functions and approve transactions as needed through Metamask. Note block times are ~15 seconds... so wait a bit to read the state of the blockchain
See your contract and transaction info via https://goerli.etherscan.io/
Open a console (Ctrl + Shift + i) in the browser to see if the magic happens as you press those buttons

Conclusion:

Celebrate! You've just created a website that communicates with an online Ethereum testnet that is operational and active. Few people can proudly claim to have done it!
In this article, we have learned about the basics of blockchain and how to create your first smart contract even if you are a complete beginner.
Resources:

-Github

Back to Basics: Build a Price Page Component With CSS Grid.

Christianaojo — Tue, 04 Oct 2022 08:54:22 +0000

Goal:

In this tutorial, you will learn about how to use basic HTML and CSS to create and design a highly responsive single price grid component. This is a very beginner-level challenge from frontend mentor.
The main assignment is to build out this landing page based on the designs provided in the starter code. Your users should be able to:

View the optimal layout for the page depending on the screen size

Desktop View:

Mobile View:

Prerequisite:
- Basic knowledge of HTML and CSS.

Getting Started

For some people, this challenge might be a walk in the park such that you can easily do with your eyes closed, while some it might be challenging and you will be learning one or two new concepts from. So, whether you are a beginner or a pro, this tutorial will be of great health to further develop your skills.

The first step is to use HTML to create a rough draft or blueprint of the single price grid . A single price grid Component's appearance and feel will then be created in accordance with the Design using CSS.

Define Basic HTML Components/Structure

This defines the project type as HTML and gives it the language English.

   <!DOCTYPE html>
    <html lang="en">
    </html>

Now define the head tag within the HTML tag.

    <head>
       <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
      <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
       <title>Single Price Grid Component</title>
    </head>

Just below the head tag, create a body tag.

  <body>
</body>

After this step, your code should look like this:

<!DOCTYPE html>
<html lang="en">

<!-- Head Section-->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="style.css">
   <title>Single Price Grid Component</title>
  </head>

<!-- Body Section-->
<body>
</body>

Create the Main Structure of the Single Price Grid Component

As you can see in the design there are three main sections, One section has a white background, the second with a cyan background and the third section with a light cyan background. So what we do is:
- First, we divided the three sections as header sections for the white background, price section for the cyan background and why us for the light cyan.
- Then we wrap those three sections inside a parent container called `container`.


<!-- Parent Wrap-->
<div class="container">
   <!-- white background-->
   <header id="main-header">
   </header>
   <!-- cyan background Section-->
   <div class="price">
   </div>
<div class="why-us">
   </div>
</div>

We are now done developing the main structure for the single price grid component. It is time for us to work on each section and fill them with the necessary contents.

As you can see, the white background has taken the full container. Therefore what we do is instead of using white as an we use a background color to fully cover the background and we then input the provided content.
When we move to the second section, there is a heading and a subheading, then we have the paragraph and underneath we have a call to action (CTA) button called sign-up.
For the third section, we have the heading and the body text.

At the end of this section, your code should be very similar to this

    <div class="container">
    <header id="main-header">
      <h4 class="primary">Join our community</h4>
      <p class="secondary">30-day, hassle-free money back guarantee</p>
      <p class="gray small-text">
        Gain access to our full library of tutorials along with expert code reviews. 
        Perfect for any developers who are serious about honing their skills.
      </p>
    </header>
    <section id="price">
      <h4>Monthly Subscription</h4>
      <p><span class="large-text">&dollar;29</span><span class="off-white"> &nbsp per month</span></p>
      <p class="small-text">Full access for less than &dollar;1 a day</p>
      <a class="btn" href="#">Sign Up</a>
    </section>
    <section class="why-us">
      <h4>Why Us</h4>
      <p>Tutorials by industry experts</p>
      <p>Peer &amp; expert code review</p>
      <p>Coding exercises</p>
      <p>Access to our GitHub repos</p>
      <p>Community forum</p>
      <p>Flashcard decks</p>
      <p>New videos every week</p>
    </section>
  </div>

You can copy the content in the above code from my github repository.

Add the Footer Section

<footer>
    <p class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
      Coded by <a href="#">Christiana Ojo</a>.
    </p>
  </footer>

— — And with that, we are done with the html blueprint. It’s time for us to check the output.

Here is the output of our HTML code, and it looks quite ugly???
But wait, don’t judge too soon, it is just the beginning and the best part is yet to come.

In the following section, we will be adding CSS to our application, let's delve in:

Styling With CSS

We have reached the best part as we are now ready to add color and style to our project, it’s time to get our hands dirty as we will be styling the desktop view first. This means we'll start the styling for the mobile view first and then we’ll adjust the styling for the smaller screens using media queries.

Import the External Style Sheet into the HTML file

      <link rel="stylesheet" href="style.css">

This line of code will link the CSS styling with our html file.

It’s now time to create our CSS file style.css as defined in our HTML file.

Import external fonts into the CSS file

@import url('https://fonts.googleapis.com/css?family=Karla&display=swap');

Use ::root to declare the colors you will be using.

:root {
  --light-gray: hsl(204, 43%, 93%);
  --cyan: hsl(179, 62%, 43%);
  --off-cyan: hsla(179, 62%, 43%, 0.699);
  --bright-yellow: hsl(71, 73%, 54%);
  --grayish-blue: hsl(218, 22%, 67%);
}

You may be thinking it is easier to just input the colors at every point so why use ::root?

The :root CSS pseudo-class matches the root element of a tree representing the document. Also, :root is where you have declared and initialized the global vars that you can reuse throughout your stylesheet.
Here the var() function is used to insert the value of a CSS variable. When you use CSS variables it has access to the DOM, which means that you can create variables with local or global scope, change the variables with JavaScript, and change the variables based on media queries.
We will be using :root rather than copy and paste the colors over and over again, so we can simply place them in the variable and reuse the var() value throughout the stylesheet. It’s simple and easy.

Style the Universal Selector (*)

we are using a universal selector (*) to act as the default styling throughout the page. Therefore rather than repeating the same styling in every class, we can simply define the styling in a universal selector once and it will serve as the default styling throughout the page.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 1.6;
}

Style the `body element` section.

It's now time to add color, background, and give the design style inside of the body element.

body {
  font-family: 'Karla', sans-serif;
  background: var(--light-gray);
  height: 100vh;
  padding: 5rem 2rem;
}

Give H4 and the P Tags the Necessary Margin

h4, p {
  margin: 1rem 0;
}

Style the Different Classes

.primary {color: var(--cyan); }
.secondary {color: var(--bright-yellow);}
.gray {color: var(--grayish-blue);}
.off-white{color: rgba(255, 255, 255, 0.705);}
.large-text{font-size: 1.5rem;}
.small-text{font-size: .9rem;}

/*button*/
.btn {
  display: block;
  text-align: center;
  color: #fff;
  font-weight: 600;
  width: 100%;
  background: var(--bright-yellow);
  padding: .5rem 1.25rem; 
  text-decoration: none;
  border-radius: 8px;
  box-shadow: .1rem .1rem .9rem .2rem  rgba(92, 90, 90, 0.25);
}
.btn:hover {
  background: var(--light-gray);
  color: var(--cyan);
}

/* class container */
.container {
  background: white;
  border-radius: 5px;
  box-shadow: .1rem .1rem .9rem .2rem  rgba(150, 148, 148, 0.25);
}

.container #main-header {
  padding: .15rem 1rem;
}
/* Price Section */
.container #price {
  background: var(--cyan);
  padding: .15rem 1rem 1.5rem 1rem;
  color: #fff;
  border-bottom-left-radius: 4px;
}
/* Why us */
.container .why-us {
  background: var(--off-cyan);
  padding: .15rem 1rem .5rem 1rem;
  color: #fff;
  line-height: 0;
  border-bottom-right-radius: 4px;
}
.container .why-us p {
  font-size: .9rem;
  line-height: .15;
  color: rgba(255, 255, 255, 0.705);
}

Fix Mobile Responsiveness To Adjust the Styling According to Device Size

For the style for mobile responsiveness, we will be using @mediaquery tag

@media screen and (min-width: 594px) {
  body {
    max-width: 700px;
    margin: 0 auto;
  }
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 200px 250px;
  }
  .container #main-header {
    grid-column: 1 /span 3;
    padding: 1rem 2rem;
    justify-content: center;
  }
  .container #price {
    padding: .75rem 2rem;
  }
  .container .why-us {
    padding: .75rem 2rem;
  }
  .container .why-us p {
    line-height: .4;
  }
}

Conclusively, your CSS code input put together should look like this

@import url('https://fonts.googleapis.com/css?family=Karla&display=swap');
:root {
  --light-gray: hsl(204, 43%, 93%);
  --cyan: hsl(179, 62%, 43%);
  --off-cyan: hsla(179, 62%, 43%, 0.699);
  --bright-yellow: hsl(71, 73%, 54%);
  --grayish-blue: hsl(218, 22%, 67%);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 1.6;
}
body {
  font-family: 'Karla', sans-serif;
  background: var(--light-gray);
  height: 100vh;
  padding: 5rem 2rem;
}
h4, p {
  margin: 1rem 0;
}

.primary {color: var(--cyan); }
.secondary {color: var(--bright-yellow);}
.gray {color: var(--grayish-blue);}
.off-white{color: rgba(255, 255, 255, 0.705);}
.large-text{font-size: 1.5rem;}
.small-text{font-size: .9rem;}
.btn {
  display: block;
  text-align: center;
  color: #fff;
  font-weight: 600;
  width: 100%;
  background: var(--bright-yellow);
  padding: .5rem 1.25rem; 
  text-decoration: none;
  border-radius: 8px;
  box-shadow: .1rem .1rem .9rem .2rem  rgba(92, 90, 90, 0.25);
}
.btn:hover {
  background: var(--light-gray);
  color: var(--cyan);
}


.container {
  background: white;
  border-radius: 5px;
  box-shadow: .1rem .1rem .9rem .2rem  rgba(150, 148, 148, 0.25);
}

.container #main-header {
  padding: .15rem 1rem;
}
/* Price Section */
.container #price {
  background: var(--cyan);
  padding: .15rem 1rem 1.5rem 1rem;
  color: #fff;
  border-bottom-left-radius: 4px;
}
/* Why us */
.container .why-us {
  background: var(--off-cyan);
  padding: .15rem 1rem .5rem 1rem;
  color: #fff;
  line-height: 0;
  border-bottom-right-radius: 4px;
}
.container .why-us p {
  font-size: .9rem;
  line-height: .15;
  color: rgba(255, 255, 255, 0.705);
}
@media screen and (min-width: 594px) {
  body {
    max-width: 700px;
    margin: 0 auto;
  }
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 200px 250px;
  }
  .container #main-header {
    grid-column: 1 /span 3;
    padding: 1rem 2rem;
    justify-content: center;
  }
  .container #price {
    padding: .75rem 2rem;
  }
  .container .why-us {
    padding: .75rem 2rem;
  }
  .container .why-us p {
    line-height: .4;
  }
}

YEAH!! Now we are done with the basic frontend development for the Single Price Grid Component. Now the time has arrived to check the output of what we have done.

Now, check your own output and let me know your thoughts. Did it come as you expected?

Conclusion:

In this article, we have learned about the basics of CSS grid by building a single price grid component using HTML and CSS.
Thank you for checking this guide out, and do leave your questions in the comment section.

Resources: