Basics of web3 development, JS new releases this week, cool npm modules and open-source packages
Tags: news, web3, blockchain, programming
Published: 2024-06-22 11:16:14

Hello friends, 

Welcome to this iHateReading newsletter. Read directly on [website](ihatereading.in)

Well, I always worry about covering all the domains of software development in my newsletter. I even try to put things is simple words so that non-developers in this subscribers list will also be able to understand at least the nuances.

Let's begin with Web3 today because I'ven't talked about anything related to web3 app development and surprisingly I have been working in the web3 domain for the past 2 years. 

All about Web3 || Blockchain
============================

When I was entering into web3 domain the first question as a developer was what's the application, I read tonnes of blogs then back, I am taking about 2 years ago and recently got this blog on [10 Unusual Blockhain applications](https://www.erlang-solutions.com/blog/10-unusual-blockchain-use-cases/?ref=dailydev#Bjorn_Borg_and_same-sex_marriage).

I started the [blockchain development journey](https://medium.com/coinmonks/learning-blockchain-development-32222c234557) by simply reading about the basics and developing a small few-hour project. 

But after researching and reading the basics I found the technology under the hood is different and that doesn't affect much on frontend or client side, more often the changes are in the backend domain and of course if you writing smart contract then you have to switch to solidity as the programming language.

[Web3 and Solidity Roadmap](https://vitto.cc/web3-and-solidity-smart-contracts-development-roadmap/)

Here is the basic roadmap for blockchain development ,[https://roadmap.sh/blockchain](https://roadmap.sh/blockchain)

Once you get the basics my advice is to create a small project using Moralis to understand the concepts well.

[https://docs.moralis.io/web3-data-api/evm/quickstart-nextjs](https://docs.moralis.io/web3-data-api/evm/quickstart-nextjs)

Some of the most used npm packages in web3 are the following ones

[ether.js](https://docs.ethers.org/v5/)

[web3.js](https://web3js.readthedocs.io/en/v1.10.0/)

my personal react npm module for web3 provides tonnes of hooks and features to develop easily, [Wagmi](https://wagmi.sh/). 

Web3 for backend development needs solidity to get started, [here is the introduction](https://youtu.be/IkCfIE1VoRo).

[Truffle](https://archive.trufflesuite.com/) and [Hardhat](https://hardhat.org/) both are quiet and commonly used packages

Our Blogs ✍️ 
=============

You know most of the times I share the third-party links as the resources to learn, sometimes I do share my own writtings.

[Top 35 Email APIs for developers](http://www.ihatereading.in/t/5lDAaNTTc7nNQxYVomIv/Top-35-Email-APIs/Services-for-Developers)

[10 Powerful one-liners JS methods](http://www.ihatereading.in/t/RclED522rioV2sZN3W2c/10-Powerful-One-Liners-JS-methods-to-Simplify-Your-Code)

[10 must known JS/TS tools for 2024](http://www.ihatereading.in/t/CGdRrsgvv6wIEe8YDgVh/10-Must-Know-JavaScript-and-TypeScript-Tools-for-2024)

Open-Source
===========

This section should be loved among the readers, the open-source world is amazing, just wow.

https://omnivore.app/

 , I was looking for a way to store website links, all web links for programming, dev and software development and I found this cool open-source tool to manage all read later stories in one place.

[GSAP: Animate anything with javascript](https://gsap.com/)

GSAP is certainly the easiest and quite loved animating library in frontend, it brings joy while writing animations and especially if you don't love CSS a lot this is cake-walk for you.

[Toast library for React application](https://www.npmjs.com/package/react-toastify?activeTab=readme)

[ShadcnUI is again gaining a lot of popularity](https://ui.shadcn.com/), a frontend UI library for React apps

Lightweight
===========

[This week in React, what changed, what's new](https://thisweekinreact.com/newsletter/190) 

[htmx version 2.0.0 released](https://htmx.org/posts/2024-06-17-htmx-2-0-0-is-released/), but before that, let's understand what is htmx.  [Introduction to htmx](https://htmx.org/) || [Read Awesome things about HTMX](https://github.com/rajasegar/awesome-htmx)

🔍 👉🏻  [here is the glimpse of what's happening this week in javascript](https://javascriptweekly.com/issues/693)

Ever need to work on Maps then here is the bunch of packages to surely check, [Mapbox](https://www.mapbox.com/) and [Leaflet](https://leafletjs.com/)

Serverless apps or apps without a backend or app that controls your backend, all are the same and for frontend and backend devs Firebase and Supabase are quite useful and trending along with other serverless databases such as [Appwrite](https://appwrite.io/) and  [PocketBase](https://pocketbase.io/) 

Frontend Roadmap Template
=========================

I've shared quite a few times on this newsletter itself as one can find this on our website iHateReading as well.

[Frontend roadmap template](https://shreyvijayvargiya.gumroad.com/l/frontend-development-roadmap?layout=profile), I am updating this template from time to time, adding projects, few new resources, links and so on. It's been an year since I've created this template so far this have made 100+ sales in 50+ countries.

I am not leaving this anywhere in between and if everything goes well I will create a dedicated website for this as well so that everyone in future can have a look and learn frontend.

Let's not make it boring over here, see you in the next friday

Shrey