As a developer, there are many tools you’ll use to make building applications easier and more efficient, to collaborate on projects with other people, to manage dependencies, and much more. This is a short section on different tooling you’ll find yourself using regularly.
yarn. Package managers allow you to keep track of which versions of which external code libraries your application uses as well as how the project’s code is structured, how to run different tests, how to run your program, and various other miscellaneous tasks.
As you build more complex applications it is good to learn the depths of your package manager, how to structure
package.json files, how to write scripts that automate the boring stuff, how to set up a CI/CD pipeline (we’ll talk about this in a bit), and more.
Styling / Animation
- styled-components (CSS in JS)
- Tailwind.css (CSS framework)
- Framer Motion (Animations framework)
- Chakra UI (component library)
- Material UI (component library)
- Sass (CSS pre-processor)
- PostCSS (CSS pre-,post-processor)
- awesome-CSS (CSS learning repo)
Linting / Formatting
A linter is a static code analysis tool used to flag programming errors, bugs, stylistic errors, and suspicious constructs and a code formatter makes sure that the code you write has a homogenous style structure and abides by the formatting rules of a specific programming language (i.e. PEP8 for Python). When you’re writing code, it’s easy to miss a space, a tab, a colon, an opening or closing bracket, or to write code with bad and inconsistent styling. That’s where linters and formatters will come in handy as they automate the task, they can be configured to run on saving and on commit, so that badly styled code never gets into production or into a public repo. The most popular choices are:
CI/CD stands for continuous integration / continuous deployment, they are a set of tools that allow you to create automatic processes that execute whenever a change is made to the codebase usually hosted on the cloud so that the production servers running your application get automatically updated with the newly pushed code. These actions can also modify and run tests on the code before it gets pushed into production, if tests fail the commit or update will not go through and collaborators will get notified of this. Once projects become bigger and they have big teams of contributors a solid CI/CD pipeline is very important so as to maximize the security and correctness of code being pushed into production. Examples of popular CI/CD tooling are:
ENS domains are human-readable domains for Ethereum addresses, the registrar for these domains is fully on-chain and the protocol is decentralizaed and governed by a DAO. ENS domains serve as an on-chain identity mechanism which many Ethereum users use to express themselves on-chain and to display information about themselves through ENS profile metadata containing contact information like email, Twitter, Discord or links to websites, a profile picture (NFT image metadata) and more. As a web3 front end developer you can tap into this registrar and display users' information once they’ve connected to your application with their web3 wallet.
The best way to get started with ENS is their official documentation, here you can get a general understanding of the ENS protocol. For integrating ENS into your dapp, visit this section. You need to perform 3 steps in order to support ENS within your application:
If you are interested in how the on-chain parts of ENS work, check out the smart contract development section