const siteTitle = `${title} ${titleSeparator} ${siteConfig.title}`;

const canonicalURL = new URL(Astro.url.pathname, Astro.site);

const socialImageURL = new URL(ogImage ? ogImage : "/social-card.png", Astro.url).href;

---

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

---

import { Image } from "@astrojs/image/components";

---

</a>

tags: ["web3", "nfts", "tutorials", "web development"]

ogImage: "https://global-uploads.webflow.com/629e4fe96456f8219203e7f1/6410b6848afd85df8fe0a193_2023-01-10_How-to-Create_blog-img-tiny.png"

---

import { Image } from "@astrojs/image/components";

import pinnie from "../../assets/pinnie.png";

Despite the current market conditions, web3 jobs are still on the rise. But competition is at an all-time high. Sure you can build a portfolio of projects to help display your skills, but that’s what everyone else is doing too. What can you do to stand out among the crowds of developers out there like yourself? How are you thinking outside the box?

As said in Justin’s tutorial, you can use a free Pinata account to do all of this, but to truly harness the full user experience of this app, using a paid account with a Dedicated Gateway will make this app much faster than if you used a public gateway or depended on external sources. Here is an example of the application through Steve’s Dedicated Gateway:

<Image

/>

Awesome! Resume app is done, time to turn it into an NFT. Following the guide, Steve created a simple smart contract to deploy the App NFT in a way that he could keep updating it with new versions, very handy if you ever have an update in experience or education. Also keep in mind you can do your own smart contract customization here to do cool stuff, like mass airdrop your NFT to a list of wallets or ENS addresses!

```json

{

}

```

With the metadata.json file complete, Steve uploaded that file to Pinata as well and used the CID as the token URI like so:

```javascript

```

That’s it! After Steve ran the deployment command with Hardhat, the NFT had been minted in his wallet where we could see it on OpenSea! [Check it out](https://testnets.opensea.io/assets/goerli/0x45602432657d8100119e8633b677043b9022c22b/1) 😎

---

import { Image } from "@astrojs/image/components";

The growth and evolution of NFTs has come a long way from the early days. Some of the early NFT projects were simple .png files or a link to a YouTube video, but now they are an entire industry that consumes brand, utility, even augmented reality. Metaverses, 3D objects, and other virtual reality experiences are all the rage, and I firmly believe we will see more of this in the near future.

With the video below you can get glimpse of how the LiDAR scanner maps over surfaces. Taking it real slow and covering every angle really helps with scanning environments.

After you’re done scanning there will be a processing step that will take all the data and map it into a 3D environment!

Once it’s processed you can go ahead and view the 3D model/environment! Polycam really is first class; you can create videos, you can view the model in Augmented Reality, it just has so many awesome features! My model isn’t the cleanest since I have so many small detailed objects on my desk, but for something a bit simpler this feature is amazing.

Now that we got our model, we can upload it to the cloud and look at it through our web browser! Just click on the little cloud icon on the top of the screen when viewing your model and it will be uploaded to your cloud storage with Polycam.

Once viewing it in the web browser, we can download the model by clicking “export.”

<Image

/>

From there we want to select the GLTF format and start the download!

<Image

/>

Ok so we got our 3D file for our environment, now lets do some 3D objects as well! The process is pretty similar, except for 3D objects we’ll switch to the “photo” mode instead of the LiDAR mode. The photo mode will take a bunch of different pictures and put them together to make a 3D model! In the video below you can see what the process looks like as I scan one of my prized possessions, a 1930's edition of Moby Dick illustrated by Rockwell Kent.

Once we finish scanning the book, I like to select the higher end of the quality allowance, and I like to use the object masking to get all the fine details. These photo mode objects are a bit more work, so when you take one Polycam sends it off to a server for higher powered processing. Due to how intense the work is, you can only take 150 of these a month, but I don’t think that will be an issue for most people. Once they finish processing it, the model looks like this!

The download process looks exactly the same as we did the desk, very easy! Also while you’re still in Polycam, you can edit, adjust, crop, etc. your model all inside their app or website, so that way when the model is exported it’s ready to be turned into an NFT!

Let’s log into Pinata and upload our file. Really simple, just click on the upload button in the top left, give it a name, and upload!

<Image

/>

Then we just need to choose a subdomain and make sure its available. If it is, click next!

```json

{

}

```

```json

{

}

```

title: "Arc: The Internet Computer"

publishDate: "08 Mar 2023"

description: "How the Arc web browser is paving the way for the future of consumer computers"

ogImage: "https://res.cloudinary.com/df9dofjus/image/upload/v1678385122/arc-browser-blog-post/opluqtxq1ceoigepyjwf.png"

---

import { Image } from "@astrojs/image/components";

<Image

/>

## 20 Years of the Same Thing

The internet has grown significantly in the last twenty years. What was once just static web pages with facts is now a bustling cyber metropolis where we write essays, share photos of food, and buy airline tickets. It's something we use every day and take for granted. What's interesting is that in the last twenty years of the internet's evolution, the way we experience it has stayed mostly the same. Web browsers have certainly changed in appearance and performance, but the tab model and disconnect from the rest of the computer have stayed. The Browser Company making the Arc Browser has plans to change that and has the ambitious goal of creating an "Internet Computer." Before we get ahead of ourselves, let's have a brief overview of Arc and its features.

## Tabs, Folders, and Spaces

<Image

/>

One of the fundamental differences between Arc and other browsers is how it handles tabs. Instead of a row of tabs at the top of a window, Arc keeps them all in a sidebar. I genuinely believe there is a strong UX decision being made here: organization is simply easier to accomplish with a side menu than it is with a top menu. Beyond that, Arc uses a “Pinned Tabs” and “Today’s Tabs” approach to organizing your website. You may often feel hesitant to close a website because you might need it later. If you do, you can move it to the pinned tabs. When you feel like you don’t need it, then you can remove it from pinned tabs. Anything that stays in today’s tabs can be automatically cleared after a certain amount of time, or you can click a button to wipe them all out. This is powerful because it makes the decision of what is important and what isn’t easy for people to make.

<Image

/>

Of course, you may have lots of websites that you need to keep pinned, and for that, Arc has Folders and Spaces. Folders work like any other bookmark folder, where you can store as many as you want with sub-folders as well. This can be useful if you have a lot of sites that need to be referenced for a project. Folders work to a degree, but even still, you can have too many folders. That’s where spaces come in. Spaces are designed to be different workspaces for whatever you do on the internet. You could have a shopping space, an entertainment space, a developer space, anything really. You can customize the appearance, name, icon, and of course, the pinned tabs and folders for each one. Arc makes it simple to swipe between spaces and re-organize them to fit your needs.

<Image

/>

Favorites are special in that they are in nice little squares are the top of the sidebar no matter what space you are in, so for instance if you use Spotify a lot then that would be an ideal favorite app or website. They also have a preview feature when you hover over them for selective sites, e.g. Google Calendar will show you a brief schedule window.

## Split View

<Image

/>

Another killer feature on Arc is split views. With a few clicks, you can easily have side-by-side panels of two different websites. You can even pin these dual tabs if you have to reference them quickly. You can actually do more than just two; depending on how big your screen is, you can go crazy! Personally, I use this all the time when reading an article while taking notes or moving information from one app to another. The Arc team recently released vertical splits as well, perhaps enough persuasion to get a vertical monitor.

## Easels

<Image

/>

Easels are something completely unique to Arc and have some pretty impressive abilities. The concept is like internet chalkboards. You can snip pieces of websites, add them to an easel, then add other things like your images, text, shapes, etc. Arc provides a great shortcut (that can be customized), where all you have to do is hold down Command and Shift, then click & drag across the screen to select what you want to snip. Then it will prompt what easel you want to add the snippet to, or if you want to make a new one. Easels can also be made public and shared with other people!

## Boosts

<Image

/>

Arc has an affinity to bring back the excitement of the internet from the 90s, both in design and in customization. Not only does Arc feature themes for your browser to personalize your experience, they give you the ability to do “Boosts” to websites. Boosts are simply CSS or JS injections to websites so you can customize the color of a website or give it additional functionality.

<Image

/>

As someone who is obsessed with customizing the personal computer environment, I absolutely love Boosts. [Nord](https://nordtheme.com/) is one of my favorite color palettes, and I use it for as many ports as I can. With Boosts, I’ve been able to customize all my regular sites to give it some flare. This comes a bit naturally for me since I have some web development experience and know how to snag CSS selectors easily, however, there are possibilities for Boosts to become a marketplace feature where non-technical users could save and use Boosts made by others.

## Internet Computers

> I can tap my finger on the device, or I can toss at a glance and whoosh: my computer comes down from the internet, comes down from the cloud, and is right there on that machine. Because all of the stuff I need, all of my tools, all of my files, all of my people, my teams, all of those things are out there on the internet too so it doesn't matter where I access it from.

Josh talks about this as a possible reality in five to ten years, but to be honest, it feels like we could be so much closer. Arc is already an app that can do just about anything you need it to do, thanks to the power of developers building web applications. Of course, there are limitations with heavier software, and there is still a lot of work to be done, but the concept of a computer that lives in the cloud and could seamlessly travel between your phone, your computer, or your partner’s tablet, really excites me!

---

import { Image } from "@astrojs/image/components";

<OutLinkButton link="https://bueno.art/blog/pinata-ipfs-guide" site="Bueno" image={bueno} />

To avoid having to store all of that data on-chain, most NFTs are stored as metadata that points to an image off the blockchain where the actual file lives. It’s like when you share a Dropbox link. The link you share isn’t the actual thing, it just points you to where the actual thing is stored. That's why most early NFT projects were actually stored on Dropbox or a similar cloud service like AWS or Google Drive. While a full PNG of an NFT might be 4 mb, its metadata is only about 800 bytes. Definitely a step in the right direction, but this solution caused another problem: people started getting rugged.

```

```

Looks fine at first. But here’s the kicker: at any time, that influencer or the storage provider can simply remove that image. Suddenly the NFT is useless. And if she really wanted to be a jerk, she could replace it with a poop emoji with the same name. And since there is no regulation or laws around this, you would basically be screwed with no way of getting what you paid for. And that’s exactly what was happening in those early days: people were getting rugged left and right. These problems begged for a solution. That solution was [IPFS](https://ipfs.io) - the InterPlanetary File System.

The traditional way of sharing files over the internet is through centralized servers. For example, if you write up and send a Tweet, the data is sent to Twitter’s servers. Then when other users want to see that Tweet, the servers pass that information to them. It’s a direct up and down motion.

<Image

/>

Rather than straight up and down, IPFS is up, down, and side to side. IPFS is a decentralized network of nodes that share content with each other. If we imagine a Twitter run on IPFS, every user would have their own IPFS node that would upload data to the network, and as it is requested by other users, the data is passed from node to node. Rather than one company holding and owning that data, everyone owns that data. IPFS gives users the ability to own their data.

<Image

/>

When you share a file through IPFS, the file is run through a cryptographic algorithm that gives you something called the Content Identifier, or “CID” for short. This CID plays a huge part in how IPFS works and operates, and it looks something like this:

QmRAuxeMnsjPsbwW8LkKtk6Nh6MoqTvyKwP3zwuwJnB2yP

```

As an NFT creator, this is a huge benefit that you can use to reassure your audience. Any NFT that they collect from your collection will be 100% verifiable. Beyond that, the CID makes content portable and addressable.

ogImage: "https://miro.medium.com/v2/resize:fit:4800/format:webp/1*4xA96GrA9iLYMp5vorcjyQ.jpeg"

---

There has been a Cambrian explosion of new layer 1 blockchains — all with brand new technologies that make them faster and more efficient. However there is one problem that no blockchain has managed to overcome: asset storage.

tags: ["web3", "ipfs", "nfts", "tutorials", "web development"]

ogImage: "https://miro.medium.com/v2/resize:fit:4800/format:webp/1*JbX3kWI20G3EaKJNgXfQiQ.png"

---

One of my favorite pastimes is playing around with new blockchains and seeing what they’re like, what they offer, and how easy they are to build on. Recently I stumbled upon Sui and some of its unique features, such as dynamic metadata and goals to help onboard everyday people. After playing with it myself I was impressed with its speed and smoothness, which is saying something as it’s still in development!

Getting started with Pinata is easy! Just visit the signup page here and start out with a free account. Now all you have to do is upload the image you want to use. Do that by visiting the main files page and clicking “Upload” and “Select File.”

<Image

/>

After that just follow the steps of selecting your file, give it a name, then upload! Once done it should show up in your files page as seen below, and we will want to copy the CID for later.

<Image

/>

## Code Setup with the Sui JS SDK

```json

{

}

```

Go ahead and open up your mint-nft.js file in your text editor of choice, and the first thing we’re gonna do is import the following methods at the top of the page.

```javascript

```

All we really need are four things, and you’ll see how they play a part as we start building. Next thing we need to do is create a wallet and get the public address for that wallet, which we can do like so.

```javascript

```

Accessing the keypair object makes it super simple to either get the public key or private key, and then turn it into usable data. The Sui address from the public key doesn’t include the leading “0x” so I’m adding that manually here. If you go into the terminal now and run “node mint-nft.js” then you should see an address like this!

Now that we have a wallet address, it’s time to connect to the Sui network and get some test Sui coin! First we’ll declare a new provider and use the JsonRpcProvider, and pass in the Network “DEVNET.”

```javascript

//Create keypair

const provider = new JsonRpcProvider(Network.DEVNET);

```

Then we’ll use the provider to request some test Sui from the Devnet faucet and use our new address as the receiver like so.

```javascript

//Create keypair

const provider = new JsonRpcProvider(Network.DEVNET);

// Get Sui from faucet

```

Let’s run the node mint-nft.js command now and see what we get!

With that said, in order for us to mint, we need to combine some of our recently acquired Sui drop. We’re gonna do that with the following code.

```javascript

const signer = new RawSigner(keypair, provider);

const mergeTxn = await signer.mergeCoin({

});

```

There’s quite a bit going on here so let’s break it down.

First we declare coin1 and coin2 from the airdrop we just received by accessing those object ids from our fund result. Then we need to declare our signer! This is what lets us use our private key from our keypair to transfer or mint on the chain, and we do that by declaring a new RawSigner and passing in our previously made keypair and provider to connect. Finally we use the mergeCoin method and pass in our two coins, along with a gas budget.

```javascript

// Pause function

const wait = async (time) => {

```

This is really simple and just lets us pass in how many milliseconds we want to wait before continuing our function! Let’s use it after getting our airdrop and passing in 3 seconds. You code should look something like this now.

```javascript

// Generate a new Keypair

const keypair = new Ed25519Keypair();

const provider = new JsonRpcProvider(Network.DEVNET);

// Get Sui from faucet

// Pause function

const wait = async (time) => {

const signer = new RawSigner(keypair, provider);

const mergeTxn = await signer.mergeCoin({

});

```

If you run this code you should see the result of the airdrop, a pause before merging the coins, and the successful coin merge! Now that we have all our cows in one heard, we can mint an NFT successfully. Let’s take a look!

```javascript

// Call to Mint NFT

const mintTxn = await signer.executeMoveCall({

});

```

Our minting function is simply accessing a pre-built smart contract called ‘devnet_nft’ and we’re using the ‘mint’ function. All we have to pass into the arguments is the name of the NFT, the description, and then the asset link!

```javascript

// View NFT

```

Now let’s look at our full code to make sure everything is good, then run it!

```javascript

// Generate a new Keypair

const keypair = new Ed25519Keypair();

const provider = new JsonRpcProvider(Network.DEVNET);

// Get Sui from faucet

// Pause function

const wait = async (time) => {

const signer = new RawSigner(keypair, provider);

const mergeTxn = await signer.mergeCoin({

});

// Call to Mint NFT

const mintTxn = await signer.executeMoveCall({

});

// View NFT

```

If all works as it should you’ll get a link and then you should see your final NFT!

<Image

/>

## You did it!! 🎉

tags: ["web3", "nfts", "tutorials", "web development", "tech philosophy"]

ogImage: "https://miro.medium.com/v2/resize:fit:4800/format:webp/1*KxoVDEZFH3mJrlfeguMYjg.jpeg"

---

import { Image } from "@astrojs/image/components";

As a believer in NFTs and Web3, I am always ecstatic to see what can be done with this new technology. I get bullish over new projects, experimental ideas, and cutting edge utility (especially when it’s something we make at Pinata like [Submarine.me](https://submarine.me)). However, I don’t look at this Metaverse with rose colored glasses. There are many imperfections in this space, and one of the worst ones is environmental impact.

While I love dooting around on my computer, I also love the outdoors. I love hiking, seeing mountains, hearing rivers, and smelling wildflowers. I love hearing birds in the morning and geese at night. I love to watch my son experience nature and get excited over a butterfly. So yeah, it kinda kills me to think of how this wonderful industry of crypto can harm this amazing planet.

<Image

/>

The energy consumed by proof of work blockchains is staggering. It’s no secret, and if we want to enjoy this planet we need to accept it. I know I feel defensive when someone attacks something I enjoy, but it helps to take a deep breath and ask the big questions: “could I be wrong?” If crypto is putting the planet in danger, what do we do?

```

<Image

/>

In this post we’ll take their API a step further and build our own custom widget. We can use it in our frontend website that displays more details about the project’s emissions with the goal of making visitors more aware!

```javascript

function App() {

}

export default App;

```javascript

const Aerial = () => {

export default Aerial;

```

Now let’s import the new component to our App.js

```javascript

function App() {

}

export default App;

{

 "co2": <emissions in CO2>,

 "gas": <gas used>,

 "credits": <credits required to offset>,

 "cost": <cost to offset in USD>,

 "credits_purchased": <number of credits already purchased>,

Now make sure to import it into the top of our Aerial component like so

```javascript

```

Now we’re going to make a quick function that will get the data. For our example we’re going to use the NFT contract address 0x2acab3dea77832c09420663b0e1cb386031ba17b.

```javascript

const getEmissionsData = async () => {

```

To run this function we’ll use the useEffect hook to fetch the data as we load the app. To do that we simply need to import it at the top like so

Then we need to run the function inside useEffect,

```javascript

```

This is what our code will look like with everything in place:

```javascript

import { useEffect } from "react";

import axios from "axios";

const Aerial = () => {

export default Aerial;

```

If we run the app and check the dev console, we can see our data!

<Image

/>

Now that we have the data, it’s as simple as displaying it so users on our website can see it!

To store the data we’ll import the useState hook at the top of our app along with useEffect

```javascript

```

Then right above our function to grab the data, we’ll declare our state variable as an empty array where we can push stuff in later.

```javascript

```

Now all we have to do is edit our function just a little bit to push that data into our state using the “setEmissionsData”! Here is our function now

```javascript

const getEmissionsData = async () => {

```

The next thing we’re gonna do is create two components inside our file, one as a loading indicator, and the other as the data we want to display. To do this we’ll just make two more functions like this

```javascript

const loading = () => (

const emissionsComponent = () => {

```

To switch between the two we’ll create a new state called “isLoading” right underneath our previous state. We’ll set the default value to “false” for now

```javascript

```

Back in our getEmissionsData function we need to turn the “loading” on when we start the request, and then off when we’re done.

```javascript

const getEmissionsData = async () => {

```

Finally, way down at the bottom where we render the whole app, we’ll add in some conditional rendering to say “display the loading component while loading, then display the data component when not loading.”

```javascript

```

As a quick recap this is what our component looks like at the moment

```javascript

const Aerial = () => {

export default Aerial;