What Exactly is Developer Advocacy?

Sometimes it’s called developer relations and, in some cases, developer evangelism. We see a lot of tech Twitter famous folks who go into these types of roles and grow their followers. It is not all likes and follows. Most developer advocates don’t have quite the following as the handful of niche ones you might see popping up on your Twitter feed.

So once we cut through the noise, I’ve found developer advocates on different teams have these types of responsibilities:

• Building a community around a specific developer product or service, like an API.

• Mentoring newcomers by teaching and introducing new technical concepts in blog posts, video content, Twitter threads, or courses.

• Speaking at events, like talks and workshops, conferences, meetups, or hackathons.

• Bridging between developers and internal product teams and leading efforts on improving the developer experience.

This is not an exhaustive list; overall, this position can differ slightly depending on where you work, but these are some typical duties I’ve seen pop up during my time interviewing for a role as a developer advocate.

Why this Career Choice?

It started when I attended Full Stack NYC 2019. I didn’t understand what a developer advocate was, but several folks introduced themselves and gave terrific talks. I thought I would love to be able to come to events like this and make an impact on other people wanting to get into the tech industry.

I kept this thought in my head as I began my journey as a front-end developer. I loved that I achieved my goal of switching over to being an engineer, but I wasn’t sure if I was satisfied with where I was. Thus began quite a lot of experimentation and side projects.

I tried to launch a start-up in the mental health industry, and although my team and I were not able to get it off the ground, I learned a lot during that process. I learned about marketing instead of just adding new features; I learned about talking to others about what I was working on and sharing progress and things I learned on both the technical and entrepreneurial sides.

My main takeaway from this whole experience was that I like experiencing new things and teaching others about them, especially if I fail and can lead them to do something better than I managed to do.

In the meantime, I went through a couple of different jobs as a frontend engineer. I also started to teach at the Columbia University Coding Bootcamp run by 2U as a teaching assistant. I loved teaching coding concepts to people new to the space; I loved seeing people grow from almost no code experience into building real full-stack applications and pursuing their dreams in the tech space.

Empowering People to Build

I gave myself a mission - empower people to go out there and build. I started doing more talks at conferences, both technical and on the mental health side.

Around January of 2021, I decided to start learning a little more about Web3. I saw the NFT scene start its astronomical rise. I decided to learn Web3 and dive into Solidity. It was a slow-going process. I wasn’t building anything but writing out some functions here and there, not going beyond any small conceptual contracts.

Eventually, I started seeing better educational resources pop up like the chainlink boot camps, which jumpstarted my foray into Solidity and doing projects in communities like Buildspace. I attempted to deploy my first smart contract onto the Ethereum Mainnet and found the unfortunate blocker of not having over $1000 in Eth to cover the gas costs. Ouch.

I continued learning and working on test nets and, at the same time, became more active in Developer DAO which I had joined early on as a moderator. During that time, I got my first job in web3 as a Frontend Engineer at Rabbithole. I enjoyed it, but I wasn't enjoying my job as much as I loved the company. So I decided to contribute to different DAOs and push myself into becoming a developer advocate.

Organizing web3con while Building an NFT Project

I reached out to Nader Dabit, the creator of Developer DAO, about leading efforts for a conference that members of the DAO would put together. Thus web3con was born, and I found myself putting together a team of Developer DAO members to organize a virtual conference and hackathon.

At the same time, I did something I probably shouldn’t have done in hindsight. I also signed up to be the only developer at an extensive NFT project for their first drop. On the one hand, it pushed my Solidity building to new heights, but on the other hand, I did not prepare for what it would take to run a conference and develop a smart contract like this all at the same time.

Several nights came by where I was up until 2 am, or 4 am working through things on both projects and was utterly unable to even spend time with my wife and daughter. I felt like I hadn’t seen them in days, and I lived with them.

This thought is true for anything, but in this case, learn to say no and don’t take on the weight of so many different new and uncertain projects.

Interviewing for a Job in Web3

Now, I was still doing even more in the background of all of this. I was interviewing with several different Web3 companies and protocols; I was receiving offers but hadn’t found something I felt like I wanted. For the first time in my career, I decided not to take the first yes that came to me and go in and figure out what I wanted and where I wanted to work. Through some of our sponsorship channels for web3con, I was introduced to the awesome folks at Polygon by a fellow Developer DAO member, Nas (not the rapper).

Some initial conversations took place. The process jumpstarted further after Eth Denver, and soon I found myself with an offer from a place I did not expect even to consider me for a position.

However, I had a couple of excellent offers at this point, so I decided to make my final choice. What pushed me to Polygon was remembering when I tried to deploy my first smart contract onto Mainnet and could not afford it. I wanted to make development more accessible to a broader audience. Polygon allowed me to do just that; to help folks work with different layer 2 options of building on top of Ethereum, lowering that cost barrier, and working in Web3 in a more eco-friendly way.

Finishing My Open Tasks

I accepted my offer, but I still had two things to finish. Web3con and this NFT project needed to get to the finish line. I was utterly exhausted from this marathon of job interviews and pulling off a conference with my friends at Developer DAO. But I still needed to finish a smart contract for the project, and I needed to finish building out the frontends for minting said contract while dealing with life and running on a half-empty tank. The weekend of the conference came, and as a team, we got through it, but I was tired.

Those last couple of nights I spent in my home office shaking, learning through Merkle trees that I did not implement correctly. I had to pivot directions in our smart contract before it needed to launch. There were so many times I just wholly wanted to crash and give up; I took on way too much work all at once.

It was hell, rocky, and quite frankly a traumatic experience that I’ve been unpacking with my therapist, but we got through it. With some encouragement and pushing from the founder of the NFT project, I was able to get through it while consulting on help from developers from a couple of other NFT projects. Although I was still tired and barely functional, that experience led me to improve my skills further while learning from more experienced developers in the field. I learned a lot; I don’t recommend learning this way, I almost didn’t make it through, but I learned.

I learned about myself and what my limits are. I learned when I needed to push and when I needed to take a breath. Most of all, I learned I just needed to say no to myself and others. I got through it, and now my goal is slightly updated. I want to help people smarter than me to build, but I want to help people enjoy what they create. I want them to enjoy the results, to have that relief of accomplishment that I couldn’t get until much later.

Conclusion

I wasn’t planning on writing this article here; I was going to gloss over it. But earlier today, I saw a tweet about how people share stories about how quickly and painlessly they entered the tech space.

My journey wasn’t without pain; I nearly destroyed my mental health, and my physical health took a huge toll. I hope folks can take from this experience and learn not to push themselves beyond their capabilities. It’s important to explore our limits, but not at the expense of our health.

Let’s build and take care of ourselves simultaneously; that's what I want to advocate for in this new career.

In this tutorial, we’re going to take a look at building a small dashboard that will give us some insights into the gas fees for the most recent blocks on Ethereum. We’re going to get a gas fee history from the 20 latest blocks and display that information in a graph and small chart so our users can get an idea of how the gas fees are at the moment.

Step 1: Setting up our environment

Step 1A: Alchemy API Key

First off, let’s create an API key on Alchemy which is going to be our Node Provider and will give us an awesome tool to quickly create this project. Once you’ve created an Alchemy Account let’s create an App and grab an API Key.

To create an app - click on Apps in the navigation bar of your dashboard and click Create App.

I named my App Gas Fee Estimator and kept all of the default values when creating it since I’m going to be connecting to the Ethereum Main net in this case. Once you’ve got this set up you can hit view details on your app and navigate to View Key to grab your API Keys. We’re going to need this in just a sec so keep this handy!

Step 1B: Set up your local environment

I’m going to assume you have Node JS installed on your local machine, if you don’t you can grab that here. I’m going to be using the Yarn package manager in this tutorial but I’ll include the commands for using NPM which comes prepackaged with Node!

Navigate to a fresh new folder in your Terminal and run one of these commands

yarn create next-app

or

npx create-next-app

Follow the prompts to scaffold out your new project and open that up in your favorite IDE. Let’s also install two dependencies we’re going to need for this project.

yarn add @alch/alchemy-web3 recharts

Alternatively you can use the npm install command instead!

Step 1C: Add your Alchemy URL as an Environment Variable

One last thing to add before we dive into the fun stuff! Let’s create a .env file at the root of our folder and populate it with our Alchemy API Key URL we got earlier. Your env file just needs one line:

ALCHEMY_URL=https://eth-mainnet.alchemyapi.io/v2/<your api key>

That’s it for our environment set up, let’s start getting into the code!

Step 2: Getting Gas Fee Data Server Side

Next JS is a React framework with a lot of cool features. We’re going to be leveraging a feature called getServerSideProps which will allow us to make a server side request for all the data we need and pass that data down as props to our Component. To get Started I removed a lot of the boilerplate code in my index.js file in the Pages directory and now just have this:

import styles from "../styles/Home.module.css";
import { createAlchemyWeb3 } from "@alch/alchemy-web3";


export default function Home() {

  return (
    <div className={styles.container}>

    </div>
  );
}

export async function getServerSideProps(context) {

}

I’m importing createAlchemyWeb3 from one of the dependencies we installed. This is a nice replacement for the popular Web3 JS package which follows the same API but is configured to work seamlessly with Alchemy.

Our work in this section is going to be centered around the getServerSideProps function! We can quickly leverage the power of web3 with this one line added to our function:

export async function getServerSideProps(context) {
  const web3 = createAlchemyWeb3(process.env.ALCHEMY_URL);
}

This creates an instance of web3 for us and gives us access to all of the Web3 JS API’s. The method we’re most interested in is web3.eth.getFeeHistory. What we want to do is utilize this method to get information about the last 20 blocks and since users are usually accustomed to it we want to display fees at low, medium, and high priority transactions.

We can get that information like so:

const historicalBlocks = 20;
  const history = await web3.eth.getFeeHistory(
    historicalBlocks,
    "latest",
    [25, 50, 75]
  );

The first argument we pass is the amount of blocks we want to get the history for, we want the latest information about this blocks, and finally the array represents the 25th, 50th, and 75th percentile of priority fees which we are using to match to our low, medium, and high priority transactions.

Now if we were to log out this object there would be quite alot going on, so let’s focus on what actually matters for our use case. We want to calculate the gas fees for all of these blocks. According to EIP-1559 we need to get a base Fee as well as the reward for our wonderful miners and add those together to understand what the total gas fee would be for those transactions. I’m going to grab those two bits of information as well as the oldest block number to help us reference which blocks we are getting information on:

const { reward, baseFeePerGas } = history;
const oldestBlock = Number(history.oldestBlock);

I de-structured out the reward and base fee information and converted the oldest block to a number to make it more readable for us.

Let’s create an object with all of the information we’re going to need to send over to our frontend once this server code executes.

 const latestGasEstimates = reward.map((block, i) => {
    const allGasInfo = {
      blockNumber: oldestBlock + i,
      baseFeePerGas: Number(baseFeePerGas[i]),
      priorityFeePerGas: block.map((x) => Number(x)),
    };
    return {
      blockNumber: allGasInfo.blockNumber,
      low: allGasInfo.baseFeePerGas +               allGasInfo.priorityFeePerGas[0],
      medium: allGasInfo.baseFeePerGas + allGasInfo.priorityFeePerGas[1],
      high: allGasInfo.baseFeePerGas + allGasInfo.priorityFeePerGas[2]
    };
  });

Lot’s going on here! Let’s break it down:

My objective here is to create an array of objects with gas fee information so I decided to map over Rewards which gives me an array of the amount miners receive for confirming transactions at each of the. That array looks something like this:

reward: [
    [ '0x6fb9cbef7', '0x161dea08f7', '0x28be4928f7' ],
    [ '0x10378b36e1', '0x1bdbc6aae1', '0x20fb1406e1' ],
    [ '0x112fcac6f6', '0x1dfe0c2cf6', '0x287841aef6' ],
    [ '0x1dfc552db', '0x59971f2db', '0xd8400c6db' ]
  ]

If you print the reward in your terminal you’ll get 20 results instead of these four arrays since we’re dealing with the last 20 blocks.

Now back to our code: while mapping over this array I’m also getting the block numbers for each block by starting from the oldest block given to us from the history and adding the index every time we iterate.

Next I’m grabbing the baseFeePerGas on each block, that is an array that looks like this:

baseFeePerGas: [
    '0x1d1b1b8f09',
    '0x1e5962991f',
    '0x1d6123090a',
    '0x210ced0925',
    '0x252e208712'
  ]

I convert each of these to numbers so we can use them properly in our object. The last part here is to take the rewards and make sure they become numbers as well.

priorityFeePerGas: block.map((x) => Number(x))

Awesome now we have some of the information we need let’s construct the final object we need for our frontend. This is what I returned in the code above:

return {
      blockNumber: allGasInfo.blockNumber,
      low: allGasInfo.baseFeePerGas +               allGasInfo.priorityFeePerGas[0],
      medium: allGasInfo.baseFeePerGas + allGasInfo.priorityFeePerGas[1],
      high: allGasInfo.baseFeePerGas + allGasInfo.priorityFeePerGas[2]
    };

I’m tracking all of the block numbers and then adding base fee for the gas to each of the gas priority fees so we can display an object that has the associated fees for each level of priority.

This is enough to create a nice visualization on the frontend, but let’s also get an average gas fee over the last 20 blocks so we can give our users an extra data point.

I’m adding a generic function that calculates the average of all the numbers in an array here:

const calculateAverage = (arr) => {
    const sum = arr.reduce((a, v) => a + v)
    return Math.round(sum/arr.length)
  }

Next let’s get the current base fee using the web3.eth.getBlock method.

const currentBlock = await web3.eth.getBlock("pending");
  const currentBaseFeePerGas = Number(currentBlock.baseFeePerGas)

Finally we’re gong to calculate the averages and then return all of our information inside of a props object that can be accessed from our frontend component.

const lowAverage = calculateAverage(latestGasEstimates.map(estimate => estimate.low));
  const midAverage = calculateAverage(latestGasEstimates.map(estimate => estimate.medium));
  const highAverage = calculateAverage(latestGasEstimates.map(estimate => estimate.high));

  return {
    props: {
      latestGasEstimates,
      averages : {
        low: lowAverage + currentBaseFeePerGas,
        medium: midAverage + currentBaseFeePerGas,
        high: highAverage + currentBaseFeePerGas
      }
    },
  };

Don’t forget to add the base fee before sending the averages off to the frontend!

If you’ve been following along with this tutorial then at this point your getServerSideProps function should look something like this:

export async function getServerSideProps(context) {
  const web3 = createAlchemyWeb3(process.env.ALCHEMY_URL);
  const historicalBlocks = 20;
  const history = await web3.eth.getFeeHistory(
    historicalBlocks,
    "latest",
    [25, 50, 75]
  );
  const { reward, baseFeePerGas } = history;
  const oldestBlock = Number(history.oldestBlock);
  const latestGasEstimates = reward.map((block, i) => {
    const allGasInfo = {
      blockNumber: oldestBlock + i,
      baseFeePerGas: Number(baseFeePerGas[i]),
      priorityFeePerGas: block.map((x) => Number(x)),
    };
    return {
      blockNumber: allGasInfo.blockNumber,
      low: allGasInfo.baseFeePerGas + allGasInfo.priorityFeePerGas[0],
      medium: allGasInfo.baseFeePerGas + allGasInfo.priorityFeePerGas[1],
      high: allGasInfo.baseFeePerGas + allGasInfo.priorityFeePerGas[2],
    };
  });

  const calculateAverage = (arr) => {
    const sum = arr.reduce((a, v) => a + v)
    return Math.round(sum/arr.length)
  }

  const currentBlock = await web3.eth.getBlock("pending");
  const currentBaseFeePerGas = Number(currentBlock.baseFeePerGas)
  const lowAverage = calculateAverage(latestGasEstimates.map(estimate => estimate.low));
  const midAverage = calculateAverage(latestGasEstimates.map(estimate => estimate.medium));
  const highAverage = calculateAverage(latestGasEstimates.map(estimate => estimate.high));

  return {
    props: {
      latestGasEstimates,
      averages : {
        low: lowAverage + currentBaseFeePerGas,
        medium: midAverage + currentBaseFeePerGas,
        high: highAverage + currentBaseFeePerGas
      }
    },
  };
}

In your Frontend code if you pass down props into the component and log it you should see all of the information above in a nicely formatted array of objects!

export default function Home(props) {
  console.log(props)
  return (
    <div className={styles.container}>
        <h1>Hello World </h1>
    </div>
  );
}

Let’s move on to displaying this in a nice visual!

Step 3: Line Graphs and Charts!

Let’s build out our little dashboard now! One of the dependencies we installed at the start of this tutorial was recharts. This is a lightweight and easy to use library for helping us construct really awesome looking charts for visualizations! I’m going to import the components we’re using from recharts below:

import {
  LineChart,
  Line,
  Legend,
  XAxis,
  YAxis,
  Tooltip,
} from "recharts";

Seems like a lot, but all of these components do a lot of amazing work for us without us needing to fiddle around with SVG’s and designs for too long. Let’s grab the data we need from our props.

export default function Home({ latestGasEstimates, averages }) {
  const maxValue = Math.max.apply(Math, latestGasEstimates.map( value => value.high));

  const minValue = Math.min.apply(Math, latestGasEstimates.map( value => value.low));

  const { low, medium, high} = averages  

return (
    <div className={styles.container}>
        <h1>Hello World </h1>
    </div>
  );
}

I destructured out our gas estimates and averages from the props and also calculated some minimum and maximum values for our gas estimates. This is to make our chart easier to read because the amount of Wei returned in this calculations can be extremely high.

I also destructured out our low, medium, and high averages which we will also be displaying.

Let’s get to the interesting part: the line graph!

<h1>Latest Gas Estimates</h1>
      <h2>Last 20 Blocks Fees in Wei</h2>
      <p>Hover For breakdown of high, medium, and low priority transaction</p>
      <LineChart width={650} height={500} data={latestGasEstimates} margin={{ left: 65, top: 80, right: 50}}>
        <Line type="monotone" dataKey="high" stroke="red" />
        <Line type="monotone" dataKey="medium" stroke="blue" />
        <Line type="monotone" dataKey="low" stroke="green" />
        <XAxis />
        <YAxis type="number" domain={[ minValue, maxValue]} />
        <Tooltip />
        <Legend />
      </LineChart>

I replaced the hello world with the JSX above! Let’s focus on the chart:

The Line Chart component takes a width and height and a data key with some optional margin to make it look nice. The important part here is making sure we pass the latestGasEstimates to data so that the recharts package can work it’s magic to convert that data into a chart.

I’m using three lines to represent our three data points for each priority fee. The important part here is to make sure that the dataKey prop matches the associated key in the gas estimates object. I’ve left the X axis alone so that it defaults to showing us regular numbers and formatted the Y axis to use the minValue and maxValue that we calculated before. Again this is just because our numbers are extremely large in wei.

I dropped in the Tooltip and Legend without any props so we can get the default styling on these. Now with all these props in the right places if you run your frontend using the command:

or

npm run dev

You’ll get a nice little chart that looks like this:

Really nice looking chart right? All we had to do was pass it the right data and recharts took care of the rest for us! You can even hover across each tick to get the values at each block!

Let’s also wrap this up by adding some additional information:

<div>
      <h2>Average gas fee in wei over the last 20 blocks</h2>
      <ul>
        <li>High Priority: {low}</li>
        <li>Medium Priority: {medium}</li>
        <li>Low Priority: {high}</li>
      </ul>
      </div>
      <div>
        <h2>Last 20 blocks</h2>
        {latestGasEstimates.map((estimate, i) => <li key={i}>{i}. {estimate.blockNumber}</li>)}
      </div>

With this I’m displaying the average fees across different priorities for the last 20 blocks and letting the user know what block number we are on for the last 20 blocks as well.

This is optional but here is my JSX code with some class names for styling. You can also copy the styles into your Home.module.css so it’s all a little bit nicer to look at. I definitely encourage you to make this your own!

  return (
    <div className={styles.container}>
      <div className={styles.innerContainer}>
        <div>
      <h1>Latest Gas Estimates</h1>
      <h2>Last 20 Blocks Fees in Wei</h2>
      <p>Hover For breakdown of high, medium, and low priority transaction</p>
      <LineChart width={650} height={500} data={latestGasEstimates} margin={{ left: 65, top: 80, right: 50}}>
        <Line type="monotone" dataKey="high" stroke="red" />
        <Line type="monotone" dataKey="medium" stroke="blue" />
        <Line type="monotone" dataKey="low" stroke="green" />
        <XAxis />
        <YAxis type="number" domain={[ minValue, maxValue]} />
        <Tooltip />
        <Legend />
      </LineChart>
      </div>
      <div>
      <div>
      <h2>Average gas fee in wei over the last 20 blocks</h2>
      <ul>
        <li>High Priority: {low} wei</li>
        <li>Medium Priority: {medium} wei</li>
        <li>Low Priority: {high} wei</li>
      </ul>
      </div>
      <div>
        <h2>Last 20 blocks</h2>
        {latestGasEstimates.map((estimate, i) => <li className={styles.blockItem} key={i}>{i}. {estimate.blockNumber}</li>)}
      </div>
      </div>
      </div>
    </div>
  );
}

CSS:

.container {
  padding: 0 2rem;
}

.container ul {
  list-style: none;
}

.innerContainer {
  display: flex;
}

.blockItem {
  list-style: none;
}

Nothing Fancy we’ll just make this readable for now! The end result will look something like this:

Now we’ve got a dashboard that can help us take a look at the gas fee history over 20 blocks! As you can see the fees can vary wildly between the low and high priority fees at times!

Hope you enjoyed this tutorial! If you would like to dive into the source code the final code can be viewed on this repository:

https://github.com/Rahat-ch/Alchemy-Gas-Fee-Dashboard

If you want to learn more just about the script here is another repository focusing just on the script for getting the gas fees:

https://github.com/Rahat-ch/Alchemy-Gas-Fee-Calculator

https://twitter.com/Rahatcodes/status/1476208367760773133

So as I’m writing this it is now January 19th and I’ve been mulling over how best to do this and I’ve come to a couple of plans I’m hoping to execute this year.

First up - Tweeting out referrals to folks who are hiring.

https://twitter.com/Rahatcodes/status/1483827760443408390

This is a fairly easy way of helping out. I get a lot of inbound interest from folks needing frontend work in the web3 space. Rather than saying no, I can leverage my network to help connect other folks into the space. As of writing this the tweet above is referring to an active position so if you’re reading this anytime soon and are interested - get on that!

Next up, my course platform FrontendToWeb3. This isn’t up yet but I’ve been spending my nights and weekends getting this to a place where we can launch a beta.

https://twitter.com/Rahatcodes/status/1482370684152164359

This is a platform specifically for learning the skills you would need to pivot into web3 as a frontend developer. There isn’t a lot of focused content out there right now and there are quite a lot of Protocols struggling to find the right frontend engineers! This platform is being designed to help fulfill that need and get people into those open positions. More on this very soon, I’ve hired two interns to help me out in getting this shipped quickly.

Finally, and one I’m really looking forward to: Twitter Spaces! Twitter spaces are powerful networking tools that I’m hoping to leverage as a way to connect more employers with job seekers. My goal with spaces: host conversations with Founders and Hiring Managers in the web3 space and have some casual chats about what they’re building and what kind of folks they’re hoping to hire.

https://twitter.com/Rahatcodes/status/1483811168728797185

I want to use my platform to help folks grow in this space and this is one of the best ways of doing so. We love throwing out the term wagmi in web3 land but we need to do more to make sure everyone is going to make it. This is the birth of #100Web3 - looking forward to connecting with the first 100 devs I help and the hundreds more we can all help along the way.

0xd2f8ed343386FB042178c7e133A837CB8043d0dc

Ew right? This isn't the greatest way of displaying a username. You could do something like create a form and ask for a preferred username or we could leverage the decentralized web and look at using existing ENS usernames in our applications.

Let's take a look at how we can do this using React and the Ethers library.

I started off by scaffolding out a react application using:

npx create-react-app

Then I installed a dependency I need using yarn. (You can use npm instead if you prefer).

yarn add ethers

Afterwards I went into App.js and got rid of everything inside the div and then imported the ethers library and useState from React to keep track of the username of the signed in person. If you want to code along with this blog then here is what my App.js looked like:\

import './App.css';
import { useState } from 'react';
import { ethers } from 'ethers';

function App() {
  const [name, setName] = useState("");
  return (
    <div className="App">
      <h1>{name}</h1>
    </div>
  );
}

export default App;

Not too much going on just yet. Let's add a button inside of our app div and give it a function that can execute on click.\

<div className="App">
      <button className ="button" onClick={() => handleWalletConnect()}>connect</button>
      <h1>{name}</h1>
    </div>

So this handleWalletConnect function is going to accomplish a couple of things. We want to make sure we get access to the users wallet as well as their ens username if they have one. Here is the function which I'll break down line by line:\

const [name, setName] = useState("");
  const handleWalletConnect = async () => {
    const { ethereum } = window;
    if(ethereum) {
      const provider = new ethers.providers.Web3Provider(ethereum)
      await provider.send("eth_requestAccounts", []);
      const signer = provider.getSigner()
      const address = await signer.getAddress()
      const ens = await provider.lookupAddress(address);
      if (ens !== null) {
        setName(ens)
      } else {
        setName(address)
      }
    } else {
      alert('no wallet detected!')
    }
  }

The first thing we're doing is destructuring the Ethereum object from the Window:

const { ethereum } = window

This is something that is injected into the window from a wallet like Metamask. As long as it exists we will continue on with the rest of our code, otherwise we want to alert the user that we aren't detecting any wallets in their browser.

Next up is creating a provider that will give us access to a lot of methods that makes our life easier.

const provider = new ethers.providers.Web3Provider(ethereum)

A provider is a nice little abstraction of the connection to the Ethereum network. We're leveraging the work that the nice folks at Ethers have already done for us instead of reinventing the wheel.

The first thing we want to do with our provider is ask for permission to connect to the users wallet which is taken care of with this line:

await provider.send("eth_requestAccounts", [])

This sends a request over to the wallet asking the user to allow connection with our dApp.

Next we want to get information about the user. We do this by creating a signer object:

const signer = provider.getSigner()

This gives us access to more methods like this handy one for getting the signer's address:

const address = await signer.getAddress()

Now in theory we have everything we need to start building out our dApp. We have the address but we want to make things a little more human readable. Our provider has a nice little method of doing a reverse lookup to see if the Ethereum address is linked to an ENS username and that's done in the line below:

const ens = await provider.lookupAddress(address)

This will return the ens username if it exists otherwise we will get back null. Now we can either set the name to be the username or just fall back to the address if they do not have an ens username.

Now that we can access our user's decentralized identity we can allow for a greater user experience instead of forcing our users to fill out yet another form on profile details for a new service.

The final code for this can all be found on this repository:

https://github.com/Rahat-ch/reactensusernames

You can also watch a quick video of this tutorial below:

Note: None of the companies or projects mentioned in this blog post are paying me to write this. Would be cool though lol.

Recently announced my full time dive into the web3 space and a few folks have been asking me what kind of roadmap or resources I used to get into the space. I’ll open with an honest and maybe brutal truth: anyone who tells you there is a definitive list of things you can do to just become a dev in this space is probably feeding you some bullshit. That said, there are a lot of cool resources out there that can help but there is no one size fits all roadmap. That will ultimately depend on you, the journey you want to take, and where you want to end up in this space.

I’m going to share the resources I used along with an explanation of why I feel they are good. Not all of these resources will work for everyone, please keep that in mind. My take on this is going to probably be biased towards front end devs, why? Because I’m a frontend dev and that’s where I can share my expertise. I am learning and teaching blockchain development as well but as I am not someone with a paid job as a solidity or smart contract developer take what I say with a grain of salt.

First up is one of my favorite things and a great initial primer for learning solidity concepts! Crypto Zombies!

https://cryptozombies.io/

I like this a lot for practicing and learning some fundamentals of Solidity! If you want to practice Solidity in an interactive way then this is definitely a great way to start. You essentially start making smart contracts that support the creation of a Zombie Factory. It’s fun but I’m not going to lie, for me at least it gets a little dry after the first couple of sections. I like this as a way to skim through the start of some Solidity stuff but I don’t like the fact that you’re writing Solidity in an environment that does not mimic a production environment. Some important things that I don’t really get from this is well how do I start my own environment for my smart contracts? How do I deploy stuff?

So if you’re like me and like building stuff this might not keep your attention for too long. Speaking of building stuff though the next resource is one of my favorites.

https://buildspace.so/

Buildspace is awesome because you get to work on cool projects in a cohort based online environment that still allows you to go at your own pace if you choose. Buildspace usually launches a project on a weekend and the launch will be accompanied by a cool livestream that goes over what you will build as well as giving you an overview of some coding concepts that will help you with your project. I’ve done several of their projects and their tagline is definitely accurate. You learn some stuff, you use that to build, and then you ship.

Buildspace was instrumental for me in tying together a lot of the Solidity concepts I was learning with the frontend work that I was already doing. They do an incredible job in making sure that you have what you need to ship and get other people trying things out. While it is cohort based it is still almost entirely self paced and async as you can choose to hack away with others in the discord channel and occasionally receive or give help to other hackers while working on the projects. These cohorts are completely free and they even try to help you get a job in web3 if you complete some of their projects!

Some concerns I had have already been addressed as well. Previously you would have to wait for the day of the kick off to access the project but now you can just dive right in without waiting. They’ve even started trying to help fund some of the best projects that come up to get them launched on a main net so you can get a real life product onto the blockchain!

A person who shares a lot of cool resources to learn from is Nader Dabit. Here are some really helpful blog posts from him:

https://dev.to/dabit3/how-to-get-into-ethereum-crypto-web3-as-a-developer-9l6

https://dev.to/dabit3/building-scalable-full-stack-apps-on-ethereum-with-polygon-2cfb

I really enjoyed learning about Polygon while going through the NFT marketplace tutorial. It helped to get more exposure to things outside of the Ethereum main network which is fairly inaccessible for a lot people right now.

Other than these main resources a lot of my journey has just been trying to help people with their projects, teach what I learn, and just be active on crypto twitter in both following and interacting with people who are building cool things. A great place to find different resources that might bet better suited to your way of learning is this awesome site:

https://www.useweb3.xyz/

These are curated lists of tutorials, books, videos, games and challenges that can help you learn the things you need to dive into the space and get a job in web3. My advice is, don’t worry too much about how others, including myself, are learning. Get a feel an idea for it and then look at these resources to figure out what is the best way for you. What works for me might now necessarily work out for you and thats totally cool. I think a lot of folks would have more success much more quickly if they focused more on finding their own methods of learning rather than trying to emulate exactly what was successful for others. I’m happy to give pointers but remember, your journey is yours!

I did this with an earlier post on a web3 music platform. I’ve been wanting to take any ideas I have for dApps and jot them down in case I move forward in building them or someone else can pick it up and bring it to life. This is a live writing things down as I think about the idea exercise. You aren’t reading it live but I’m thinking of it live and just jotting it down to see if it sounds feasible.

I’ve been thinking a lot about web3 events both in person and virtual and am currently flirting with the idea of putting together a web3 dev conference. Side note: if that’s something you want to collaborate on please do let me know :D. Anyway, so thinking through this I wondered what a token gate streaming platform could potentially look like. An event platform that lets you buy a ticket in the form of minting an NFT and uses authentication via wallet and NFT to allow you access to the event. A fun way of incorporating actual web3 technology in the virtual web3 events that may or may not end up taking place.

Let’s start with the technology that I would want to use to build this:

I’ll probably go with my old friend Next JS on the frontend. It’s versatile lets you have both static and dynamic content and the server side rendering is no joke. My UI would be built using Tailwind and probably using Rare Blocks Tailwind components. Damn now as I’m thinking about this I’ll probably start building it.

As for the backend I would need a way to have new account holders be able to mint their own NFT’s for usage in their event. I’m still looking into it but I think Third Web is what I would use to quickly get a prototype of this out. It looks like I can probably just tap into their javascript sdk and get this out. Will likely choose to deploy this on Polygon to save on gas fees.

For any additional off chain data storage for the site I would probably want to go with something like Supabase. Just to make things quick and easy to save some data I would want to quickly get. Things like allowing the admins of the event to save their discord/telegram chats for easy access, saving general information about the event etc.

The big part of this however will probably be around incorporating LivePeer for the video streaming. Fully decentralized video streaming platform with token gating instead of ticket gating!

Now what would an actual minimal viable product for this actually look like?

A user should be able to go the website and authenticate with their wallet, then they should be able to create an event. On their event page they should be able to do things like adding information about their event, setting how many NFT’s there should be for minting, adding a discord or telegram invite link that would be shown to people who mint the NFT, and a link to the eventual stream. I will probably want to add in Arweave to the tech stack for hosting files and maybe also the website itself. I think this covers all the necessary elements of a virtual event. Further interaction with their community would be done off the platform on discord. A chat system for the platform itself is something that might be feasible later on but is probably not part of the MVP.

For the NFT itself I think we can generate an SVG that would be somewhat customizable. I won’t get too fancy here just an SVG with the information about the event is probably enough to start. Anything beyond this would be post mvp and after there are actual users.

Now I’m wondering how this gets monetized. I’ll probably have to look into LivePeer pricing to figure out how much to charge but I’m thinking it will be based on the number of NFT’s being minted I can add on a certain fee. This will take some finessing but let’s get that MVP shipped.

Hmm I’m free on Friday maybe I’ll see if I can ship a prototype of this.

The whole space was really cool, I loved the concept of a new creator economy. As a former musician (I know I’ve complained about this a lot but I’m still salty) I remember paying way more to keep my music on platforms like Spotify and Itunes than I actually earned from several thousands of plays.

The more I started trying out different things like buying more Eth and then trying to stake it and doing the same for Solana and then minting my first NFT the more I just fell down the web3 rabbit hole. This pun is going to be super fun in a second.

I decided to go all in on web3 in a way that I knew would work for me - I would learn and then teach others what I learned to further solidify the concepts I was taking in. To keep myself accountable I joined one of Joe Previte’s accountability groups. This was definitely a great choice! I was learning web3 concepts alongside a couple other folks and was able to ask questions to people more experienced in the field like Miguel Piedrafita. The group shared a bunch of resources as we learned together and I decided to participate in a hack weekend (Farza hates when we call it a course) on Buildspace. I highly recommend doing any of those hack weekends when they come up, its a project based way of learning web3. Also I think I’m the only one who calls it a hack weekend?

Doing this project on Buildspace inspired me to move in on creating more content in the web3 space. I wrote about interacting with the Ethereum blockchain with React, and started sharing more of my journey on the web. I admittedly had some projects that I haven’t taken further but hope to revisit like my 30 second solidity lessons. And my web3 podcast SideChain. I’ve been spending most of my time doing various project work, live talks and workshops, and working on a full length course on slip.so all about the fundamentals of building on Ethereum. I was super inspired by Samina Codes and the way she was constantly sharing everything she was learning in the web3 space and that pushed me into doing a lot of this work. She is definitely someone to follow if you are new to the web3 space!

It’s a lot of stuff, I had made a goal that I wanted to move into the web3 space by the end of the year. I was networking on twitter following people and sharing when all of a sudden a dope company called RabbitHole tweeted that they were hiring. See where the pun is coming back into play now? I decided to shoot my shot and apply and realized oh! Someone I had been in one of Joe’s accountability groups already worked there and we chatted with him helping me out in getting an interview. He’s a cool dude, you should go follow Ryan!

Did a couple interviews and some contract work with them and now I’m happy to say that I’m going to be going full time in web3 as a Frontend Engineer at Rabbithole.gg! A dope place where you can learn about new and emerging tech in the web3 space and earn some crypto and cool NFT’s as you learn!

I’m hoping that if you’re reading this and wanting to get into the web3 space then maybe part of my journey and the resources I shared can help you out. I’m also happy to help in any way I can, theres a lot of room in this space and its just getting started! You can always hit me up on Twitter anytime!

https://twitter.com/Rahatcodes

I’ve been in and out of more than a few discords over the past couple of months. Some are just too jam packed to feel like I gain anything from it. But the hype is great isn’t it? When you’re able to ape into a cool looking PFP project or getting that NFT to join some exclusive web3 group. All the FOMO, gas wars, rugs, and loot derivatives get you pumped and you’re thinking , “bear market? I don’t know her!”

I’ve been wondering what happens when some of this hype does die down. When the majority of NFT projects don’t go anywhere. When yields in defi aren’t as wild as they are right now. Thats a ton of dopamine that isn’t going to be there anymore.

Now I’m not here trying to spread some NGMI vibes. Let’s just look at some of the bullshit we’re falling for in this space right now that is going to lead to a ton of burnout. We’ve got folks telling you the future is to join every DAO you find and make money off of all of them. I love DAO’s but after trying to participate in like three I’m already at my limit and will be dropping at least one of them. This whole “quitting your 9-5 to work 24/7” in web3 aesthetic isn’t a good look. I don’t care if it’s a meme, those things have power nowadays. I mean…people memed buying the constitution into existence for a DAO.

Join the stuff you enjoy, stick around for what you can and if the vibes aren’t what you expect then bounce. There might come a time where you aren’t seeing a new discord group being opened and thats ok too. Web3 doesn’t have to be the end all be all and the only thing you do all day. Shit moves fast but you don’t need to hurt yourself moving faster than you should.

Burnout fucking sucks and there isn’t really a one size fits all approach to getting out of it when you’re in it. Talking walks and another nature bullshit might work for some people but everyone has different things that keep them going.

We’re building a new phase in technology and have the power to be a better inclusive community. Let’s forget the frat mentality of current tech and apes who need more excitement in their lives and build up a sustainable future for us as people. Don’t forget your mental health when you do your deep dives and help create communities where we give a shit about everyones mental well being.

https://twitter.com/Rahatcodes/status/1458594408413245440

So the idea came to me based on some of my own experiences. I was a very mediocre rapper once upon a time and used to pay a third part service an annual fee to keep my music up on places like Spotify, Itunes etc. The thing is as great as this services are for the consumer they don’t really reward the creator very much. In comes web3 however with some power to propel the creator economy, lets take a look at how this could work in one project for musicians.

Ultimately this would be some sort of music discovery platform. You can check out new and upcoming bands, kpop groups, rappers, singers, whatever and take a listen to some of their music. These artists create profiles for you to look through and discover the material they put out. They would also give you the ability to purchase a coin representing their brand or an NFT representing their brand. Holding these assets could give you exclusive access to meet and greets as well as limited edition merch. Exclusives for you as a fan who supported them from the start of their career.

Let’s pause here and look at how this would work.

A new user navigates to our site and can use a sign in with wallet feature to create an account. Upon creation of the account they can choose from one of two user types:

• Fan

• Artist

Fan’s would have less utility on their accounts because they probably won’t care much beyond browsing and supporting new groups they have discovered. Artist accounts however would have additional powers like creating profiles and uploading music/videos/other media.

Now back to the functionality!

How do we make artists “discoverable”. One way is to have a feed of artist activity based on the types of genre’s that the listener is interested in. This could be supplemented by looking at coin purchases like an “upvote” system. Artists receiving more coin purchases and support could be featured for newer fans to discover.

Honestly taking some elements of Reddit combined with Spotify would be amazing here. Further suggestions could be made based on the artist you support, what are some other artists in that genre? As much as Spotify annoyed me as a musician they do have a very robust music discovery platform that occasionally gives me dope songs to listen to.

With artists gaining popularity, getting funding for their music and tours, the value of their coin should also increase as they gain traction. This allows for fans to share in the upside if they can make some of those tokens liquid. Music platform run by fans with the musician and fans who support from the start making funds instead of platforms that take advantage of artists even though it’s them who make them a success.

This is why I love the possibilities that web3 brings for us.

Some possible tech to help build this:

Next JS/React on the frontend
Supported by tools like Ethers JS for interacting with the blockchain (if using Ethereum)

Hardhat/Solidity on the backend if building on Ethereum

Arweave for storage Maybe LivePeer for some music streams?

Am I going to build this? I have no idea! Will you build it? If you do I’d love to help. Feel free to take this idea change it and use whatever tools you like to build it. I only suggested the above because those are the things I’m familiar with at the moment. This space is always changing and there new solutions popping up all the time that keep getting better and better.

This had a very adverse affect on my interviews. I had things on my resume that were nice flashy keywords but when asked about them I couldn't explain much more than the regurgitated tag line I read at the start of the docs. I couldn't explain what they do, how they work, or why I could choose to use the technologies. I mean I couldn't really say that people were talking about it on Twitter so I used it could I?

The problem here was that I was learning way too many things at the same time and not actually learning a thing. My mind wanders, I get distracted by cool things and sometimes I can't help it. I might be hyper focused on one thing sometimes and then all of a sudden lose interest and focus on something else entirely.

During on specific interview I was told to bring in a project that I worked on and present it and talk about the tech that I had used to build it. Looking at their tech stack I decided to bring a project that I was working on based on a tutorial all about Postgres, GraphQL, and React. I had a decent understanding of React at this point and not a great understanding of either Postgres or GraphQL.

I couldn't answer any questions about the underlying tech. Couldn't explain how to build new queries for more data in Postgres. I mean I just followed what the tutorial told me to do on this cool tech I found out everyone is learning.

I was focused too much on the flashy cool things and not enough on the fundamentals behind why these things are working or why these solutions exist.

Technology is constantly changing and there is always going to be something new to learn. At the beginning however it is always better to focus on the boring stuff, the fundamentals, the things that aren't that exciting. Those skills are what is going to help get you into your first role so you can then, if you decide to or need it for work, learn some cooler tech.

After that disaster of an interview I took a couple weeks to review the fundamentals of JS/React and really just focused on the fundamentals. I tried recreating tutorial projects by myself, doing focused small projects instead of larger ones that might not get done and that eventually led me to my first job as a dev.

Now I find myself diving into and learning about web3 in an effort to switch careers into this space. The entire web3 ecosystem is shiny and new and I find myself at times slipping into old habits of wanting to learn something new every other day. Or really every other hour if we're being honest since this space just moves that rapidly sometimes. I remembered everything from the start of my journey a couple weeks ago and I became determined just to refocus on one aspect of the web3 world. I am already a frontend developer, so I decided to focus on looking at how I can use my frontend skills to interact with blockchain technology while learning the fundamentals of it and teaching it to others.

It's been almost a year since I started actively trying to look into this tech and I keep going back to the fundamentals like I did before. Learning about Solidity basics over and over and teaching them to others is what is really helping me, and as of writing this I'm waiting to see if maybe I might be landing a full time role in the web3 space.

Those shiny objects are everywhere, even among the shiny objects you are trying to focus on there are glints of brighter shininess that might distract you from the bigger picture. The best results usually come from having a general understanding of the shininess but focusing on the less exciting aspects that help you keep everything else exciting.

There was definitely a pun or metaphor there that I failed to get at but hopefully the point still came across!

I’ve thoroughly enjoyed learning about web3 but one thing that has caught me off guard a little about it is the cost associated with deploying something on the Ethereum main network. Scaling Ethereum at first glance seemed almost impossible! High gas prices start being an issue when the network is getting busier since many are hoping to outbid others when sending transactions.

Some awesome tools like Polygon which is a framework for creating blockchain solutions that is compatible with Ethereum have brought in some great fast, low cost transactions into the space making it easier to scale. This type of solution is called a sidechain. These solutions are awesome but let’s take a look at other new ways for scaling data on Ethereum.

There is an Ethereum 2.0, also known as Serenity which is being worked on which is meant to be more scalable, sustainable, and secure. This upgrade cuts down on the large amounts of computing power and energy needed. Estimates show that Ethereum will use 99% less power on Serenity. This is amazing, it will cost less, be quicker, more secure and scalable but the thing is, the work to get this up and running won’t be done until later in 2022. In the meantime however, according to Ethereum cofounder Vitalik Buterin ETH2 scaling for data will be available much sooner.

This scaling comes in the form of what are called ZK-rollup or Optimistic Rollup. Let’s dive into ZK-Rollups for this post.

The Ethereum Mainnet as we know it can also be referred to as Layer 1 while these Rollups are part of Layer 2 solutions. Layer 2 is there to help handle transactions off of the Ethereum main net and solutions like Rollups and Sidechains like Polygon help with this.

Why is this needed? I saw a perfectly good reason why when building out this little application while I was learning about interacting with smart contracts with React. In the video things are sped up but there is a lot of time between me performing an action and seeing that action actually take place due to the mining necessary for the transaction to complete.

Imagine playing a game and every action you take that affects data on the blockchain needs to be mined. It wouldn’t really be a fun game would it? On top of that it can just get very expensive to take these different actions.

Rollups like I mentioned before execute transactions outside of layer 1 but they post their actual data onto layer 1. This way Rollups are still secured by the Ethereum chain and inherits all of its security properties.

The ZK rollup is a smart contract that maintains the state of all transfers on layer 2. This is done by following a security model known as Validity proof. In order to increase speed the transactions are rolled up into batches and submitted to Ethereum in a single transaction. The computation is done off-chain and the results are supplied to the main chain with a proof of their validity. This maintains security while letting more transactions happen in a shorter amount of time.Interested in testing some of this out? Here are some implementations of ZK-Rollups that you can build with:

zkSync

Aztek

Loopring

I’m going to start exploring some of these and would love to know if you are as well! Comment below or send me a message on Twitter!

https://twitter.com/Rahatcodes

Events are great, listening for events and doing something is one of the core uses of JavaScript on the frontend. It's what allows us to see some amazing interactions happen in our web applications.

It's fun to listen for clicks and whenever we press a key but it's even more fun when we can listen for events that happen somewhere else completely. This allows us to create real time applications and if you're building on the blockchain it can be done with just a few lines of code!

The code we're going to be discussing below was built while I was taking a course all about building Smart Contracts at BuildSpace. If you're interested in really diving into the things I'm going to discuss I highly recommend checking out their courses which are all cohort based and free!

The Project I built here was a little concept Pokemon Battle Simulator where anyone can jump in and have a Pokemon perform an action in battle against another. Almost like a crowd sourced Pokemon battle on the blockchain. A quick demo of it can be found on this tweet.

Let's start by taking a look at some Solidity code. Solidity is a language you can use to build Smart Contracts which is code that helps you interact with the Ethereum Blockchain. Here's some code from a smart contract I've written below:\

event NewAction(
        address indexed from,
        uint256 timestamp,
        string message,
        uint256 lugiahp,
        uint256 zardhp
    );

    struct Action {
        address trainer;
        string message;
        uint256 timestamp;
        uint256 lugiahp;
        uint256 zardhp;
    }

    Action[] actions;

This isn't the full smart contract but we're just going to be focused on the parts that enable us to have real time interactions with the block chain. Now remember how I was talking about events at the start of this post? With Solidity you can actually create events to listen for. In this case I am listening for an event that I have named NewAction. That is going to be whenever and Action struct is added to the actions Array.

If you're coming from JavaScript you can think of this as an actions object being added to an array of actions. Now let's take a look at a function from my smart contract:\

 function attack(string memory _message) public {
        totalDamage += charizardAttack;
        totalHp -= charizardAttack;
        charizardDamage += lugiaAttack;
        charizardHp -= lugiaAttack;
        console.log("%s has attacked the shadow Lugia!", msg.sender);
        console.log("%s was attacked back by shadow Lugia!", msg.sender);
        actions.push(
            Action(msg.sender, _message, block.timestamp, totalHp, charizardHp)
        );
        emit NewAction(
            msg.sender,
            block.timestamp,
            _message,
            totalHp,
            charizardHp
        );
    }

This function is taking care of an attack sequence between Charizard and Lugia with both dealing some damage to each other. At the end of the function you will notice I have this\

emit NewAction(
            msg.sender,
            block.timestamp,
            _message,
            totalHp,
            charizardHp
        );

Remember I created the NewAction event earlier? Calling emit is what allows me to say ok this event is now taking place and a new action struct is being created with the information passed in and added to the array of actions.

That's all we need on the Solidity side of things to make sure an event is there to be listened for but how do we actually listen for this on the front end?

During the time I spent building this, our awesome instructor Farza introduced us to using ethers js with React to interact with the blockchain. One of the awesome things about this course that I really enjoyed is that there are some bonus concepts like events that he introduces and lets us explore for ourselves.

So while searching google and hunting through some documentation I was able to discover the code needed to listen for this event on the frontend. Check out this useEffect hook below from one of my components:\

  const listener = (block) => {
    console.log("new action emited")
    console.log(block)
    getAllActions()
  }

  React.useEffect(() => {
    lugiaBattleContract.on("NewAction", listener)
    return () => {
    lugiaBattleContract.off("NewAction", listener)
    }
  },[])

A little context: the getAllActions function is getting the data from the actions Array in my smart contract, sanitizing it a bit, then updating some state with that data. In my useEffect hook I am using some functionality given to us by ethers js in order to listen for an event named "NewAction" which if you recall I defined in my smart contract. Now anytime anyone performs an attack - everyone else will also know because the action will be updated for everyone in real time!

A quick note: always make sure that if you're using some type of listener function in React - put it in a useEffect and return a function for cleaning it up. Otherwise you'll end up like me trying to debug why your component is re-rendering several hundred times when the event only happens once.

Here is a quick demo below of this in action:

It's a large gif 😬 so once it loads you'll see that Charizard is attacking in one browser but the actions logs update in both browsers!

I've done some real time stuff before and this is just amazing to see that I can do this so easily on the Ethereum blockchain!

If you would like to play with the demo yourself you can do so here.

You will need to have the metamask chrome extension set up and you'll need some test ETH on the Rinkeby Test Network.

I've been on a journey to learn web3 for a while now in hopes of getting into the space eventually as a developer advocate. If you want to join me on this journey give me a follow on twitter!

https://twitter.com/Rahatcodes

https://community.codenewbie.org/rahat/effective-learning-with-tutorials-2ji8

Now I wanted to map out a way to use tutorials and other resources to help folks interested in learning about Web3 and the Crypto space. A lot of this is what I've been doing and different resources I've been using so far will be mentioned below!

First off it's important to learn the fundamentals of Solidity. If you're coming from JavaScript this is going to be a little easier as Solidity shares a lot of similarities in syntax with JavaScript. I felt at home pretty quickly thanks to the similar syntax! My favorite resource for going over the fundamentals is Crypto Zombies!

https://cryptozombies.io/

This is a fun and interactive way to learn Solidity by building a Zombie production factory. You're given examples of what you need to accomplish and then you use the in browser IDE to solve specific challenges which may include writing contracts, functions, interacting with other existing contracts and more.

A great way to solidify your Solidity (heh) is to reuse that code and build something else. You can do something as simple as changing the variables to represent giant killer robots instead of zombies. This will still force you to go through the code and understand which variables and what parts of the code do certain things and help dive deeper into it. If you're into video based learning I've started doing some bite sized solidity fundamentals on this new free course I'm slowly building and releasing:

https://www.30secondsolidity.com/

Once you've learned a little about Solidity I highly recommend checking out the smart contract course at Buildspace!

https://buildspace.so/

I took the free course which is a mix of live sessions and text based learning and was able to get my first Dapp deployed on a testnet!

Check out more of what I learned from there on this post:

https://dev.to/rahat/real-time-react-fun-on-the-blockchain-27jg

Similar to what I mentioned with crypto zombies I changed up the project to be something I enjoy. Instead of the project being built in the course I took what I learned and built a pokemon battle simulation. This again forced me to really go through the code and understand what was going on.

I then branched off and dived into Real time interactions with React and the Blockchain which was not part of the class. It's awesome to take what you learn somewhere and add new things to it like the real time functionality in this case. Build on top of your tutorials and add new features to them to really explore new things!

There are more intermediate resources once you have gotten these things down that I'm currently using and will be sharing more of in a follow up post. Would love to see what you all are working on with Solidity! Hit me up on twitter and let me know!

https://twitter.com/Rahatcodes

The past is the past but since then a lot of things have changed. I knew I really wanted to get into web3 when I realized what it could do for creators, artists, musicians. All three of those are interchangeable in many cases. Creatives might be a good way to just refer to us all. I used to be a hip hop artist and although I occasionally get the urge to spit a couple bars that time has come to pass and I’m now just a nerd who googles things for a living (software engineer). Earlier this year I stopped paying for my music to be kept up on places like Spotify and Apple Music. It took thousands of plays just to break even and honestly it just wasn’t worth the novelty of having music on Spotify anymore. It made me wonder how many other musicians came to this same place, how many were probably way better than I was but just couldn’t continue because they needed to make money for a living.

In came the world of NFT’s and specifically while they aren’t as well known as the apes, punks, or kittens of the crypto space the music that started coming up and the way musicians could make actual money off their art became apparent to me, especially when I saw Crypto Rapper, Spottie Wifi, make 200k in 60 seconds for his music. People who got ownership of the NFT’s that were associated to his music could now use them for commercial purposes in movies, videos, wherever. Instant new revenue stream for a musician.

Now I really needed to dig in to the underlying technology further. I had seen Nader Dabit sharing introduction tutorials about the web3 space and started consuming all the content I could.

https://dev.to/dabit3/how-to-get-into-ethereum-crypto-web3-as-a-developer-9l6

Began reading books on the subject and tinkering further with everything. I ran through crypto zombies a couple times to really get the material to sink in as well. Then I found buildspace which is an amazing startup educating newcomers to the web3 space. I went through the intro Solidity course to further solidify my understanding and recently started their NFT course as well.

https://buildspace.so/

During the journey I started a podcast called Side Chain which I’m hoping to take further as I go in my journey. Right now it’s really just a couple episodes. The best and most helpful parts was just building and sharing what I was building online and in groups like the accountability groups set up by Joe Previte of the tech tweeter world.

https://anchor.fm/sidechain

Now as I dive further into the space I’m building a course for folks wanting to start their web3 journey on Slip.so, sharing some free resources on solidity fundamentals on my 30Secondstosolidity page and doing my first live workshop on building dApps! Also tinkering with my own NFT drop and working on a cool resume tool in the web3 space with folks at Developer DAO! The goal I placed for myself is to be in the web3 space full time by the end of 2021. I’m in the midst of a couple interviews so maybe there will be some good news in a follow up post :).

https://www.30secondsolidity.com/

https://app.slip.so/presale/smartcontracts

This journey is fun and I’m not here to tell you that this is it, it’s the absolute future and you need to get in while it’s early. Whatever might happen this is the tech I believe in right now and am hoping to make a future for myself in. Hope you all continue to follow me on this journey!

https://twitter.com/Rahatcodes

Cryptocurrency, NFT, and gm seem to have become common knowledge among most folks interested in Web3 at the moment. There is a lot of growing chatter now about Decentralized Autonomous Organizations or DAO for short.

Let's imagine for a second that you, your neighbor, random people across town or across the country you have never met all had the ability to actually make decisions about what a specific organization can do. Maybe you all have an interest in video games and want to decide on what new video game gets the funding to be completed. Maybe you're all investors and want to decide who the next big web3 startup to invest in will be.

The point is you all have some similar interests and without needed to know each other can work together in determining what creators in the space you're interested should be funded or what proposals the organization has brought needs to be focused on. You all even help decide who works for the organization!

This isn't some fantasy - this is actually happening with DAO's. The more I've learned about web3 the more it seems that DAO's keep coming up. I've recently joined Nader Dabit's Developer DAO and became a mod there to help with the community. The great thing about this is that I'm seeing how this works and is being built from the ground up and hoping to learn a few things here.

The main problem I've had in general with DAO's is trying to figure out where to find them and how to participate in them. Developer DAO made that super easy and everyone in there is quite interested in working together on all things web3. I think I'll be pitching a couple ideas in there to see how my ideas land.

For now though I'm looking for more DAO's to be a part of. Do you know of any that are actively looking for new members that can contribute to their growth? Particularly those needed frontend devs?

Hit me up and let's see what the community has!