DEV Community: Vincent Baylon

Digital Artwork 🤝 NFTs

Vincent Baylon — Mon, 27 Sep 2021 23:27:08 +0000

In the month of August, OpenSea a marketplace for NFTs (Non-Fungible Token), recorded $3bn in trading volume. With the boom of NFTs I wanted to get a better understanding of the ins and outs of what exactly are NFTs, specifically how they are used with digital artwork.

What is an NFT?

Non-fungible means unique, something that can't be replaced with something else. A dollar is fungible, if we swapped $1 bills, we would both still have a value of $1. Concert tickets with seat assignments on them are non-fungible. Nose-bleed seats don't have the same value as front-row seats. A non-fungible token is a token that shows the digital asset it's connected to is unique.

Blockchain

This token is stored in a decentralized database called blockchains. Decentralized means it isn't controlled by one entity. Blockchains are exactly like their name. They are blocks of data chained together in chronological order. Once a block is stored on the chain, it is set in stone. This makes it very difficult to hack a blockchain. Also since blockchains are decentralized, anybody on the blockchain has access to the data. This means there are always many eyes making sure there are no irregularities.

Cryptocurrency

Cryptocurrency is a digital currency. Crypto is built on blockchains. Instead of a centralized bank keeping track of transactions, every crypto transaction is recorded on the blockchain. This allows for transparency and more trust in the currency. NFT transactions are done with the crypto the blockchain uses.

Smart Contracts

Smart contracts are digital contracts stored on a blockchain that run when predetermined conditions are met. It is essentially a program on the blockchain that contains if/else statements that run when those conditions are met. For example, the transfer of an NFT from one owner to another. The smart contract will execute when payment is received. This adds to the safety of blockchains because there's no third party involved. The blockchain handles the transaction and the records of the transaction is stored on the blockchain.

Digital Artwork

All these mediums allow for digital artwork to have ownership. A common talking point from those questioning the crazy prices on some NFTs is, "I can just right-click and save". I can get a copy of the Mona Lisa but that doesn't mean I own the actual Mona Lisa. NFTs prove ownership of the digital artwork. And that is what drives the price up. We've seen the crazy prices paid for physical art pieces. I believe digital artwork paired with NFTs is the modern version of that.

A cool thing about digital artwork is artists have the ability to combine code with their artwork. Bored Ape Yacht Club, a popular collection, recently had a release that mutated one of their collections into new art pieces when a serum was applied to it.

Conclusion

Is this all hype or is this the new age of art ownership? Nobody knows but I believe the current system has a good foundation to build on. It's transparent and safe and could explain why people are trusting it for six even seven figure transactions.

Collections I Like

0N1 Force

The Sevens

Crypto Chicks

Bored Ape Kennel Club

Mutant Ape Yacht Club

Bored Ape Yacht Club

I can't Git no, satisfaction

Vincent Baylon — Wed, 15 Sep 2021 03:30:23 +0000

As developers, we break and fix code all day. But there might be a time when you completely mess your code up. That's when a VCS (Version Control System) comes in handy. A VCS keeps track of all the changes you make to your code, as long as you are committing often. The most popular VCS we use is Git. So if you get to a point where you can't save your code, you can use your VCS and revert back to any past commit.

A git workflow I really like is the Feature Branch Workflow. The idea behind this workflow is that each feature development will be done on dedicated branches. This allows each developer to work on their own feature without worrying about other developers or disturbing the main branch.

Another advantage of this workflow is being able to utilize pull requests. To merge your branch to the main branch, you initiate a pull request. This allows other developers to look over your code, discuss, even ask you to make changes and then finally sign-off that it's ready to be merged to the main branch.

. . .

Feature Branch Workflow

With this workflow, you will be making a branch for every feature you are developing. Then when you complete the feature, you will submit a pull request to have it added to the main branch. This might seem tedious, why not just have your own dedicated branch where you work on different features? Performing pull requests and merging each feature will make it easier to review code and resolve merge conflicts as there won't be hundreds of lines of code to sort through. Here's how this workflow will look.

First

you want to make sure you have the latest code to create your branch.

git checkout main
git pull origin
git reset --hard origin/main

This switches your local repo to the main branch, pulls the latest code from origin, then resets the HEAD of your local copy to match origins.

Then

create a new branch for the feature you are building.

git checkout -b login-page

This creates a branch called login-page and switches you to it at the same time.

And then

push your new branch to your remote repository so you will have a backup and if you are collaborating, other devs will have access to your changes.

git push -u origin login-page

The -u flag sets this branch as your remote tracking branch. Meaning you can just type git push to push up your changes.

As

you work, remember to commit often so you can revert back if needed.

git status
git add .
git commit -m "descriptive commit message"
git push

Finally

when you're done with your feature, do a final git push and create a pull request on your remote repository to start the process of getting your branch merged into the main.

It will tell you if you are able to merge into the main so you can take care of any merge conflicts.

Once you create the pull request, other devs can make comments, request changes, and eventually merge pull request which will merge your branch into the main.

Now your branch can be deleted and you can start on your next feature!

Conclusion

I really like this workflow because it keeps the main branch clean. If you aren't using a git workflow with your team I recommend trying this out as it will help prevent/minimize the git issues we all run into. Happy coding!

Let's get Material, Material-UI

Vincent Baylon — Wed, 01 Sep 2021 08:49:18 +0000

(9/27/21: This post is outdated after Material-UI (MUI) released Version 5)

Which CSS framework is the best for React and why is it Material-UI? Material-UI is a framework of React components with it's design based on Google's Material Design. If you're familiar with React, you know how easy it is to work with components. When you need to style a container, button, text, etc. you just import the Material-UI component for that element and customize it with props. Let's go over setting it up for your project and some of the available components.

Installation

First install the source files via npm

npm install @material-ui/core

Load the default Roboto font into your index.html

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

Components

Go to the Material-UI site and search for the component you are using. Scroll down to the bottom of the page and click on API and you will see all the props and customization points.

First import the component into your project, Typography for example

import Typography from '@material-ui/core/Typography'

Depending if you have content that needs to be wrapped in your component or not, you will wrap it with an open and closing component or you can call the component and have it self closing

<Typography>
  Wrapped content
</Typography>

<TextField />

Customize the component using the variant prop

<Typography variant='h1'>
  This is H1
</Typography>
<Typography variant='h2'>
  This is H2
</Typography>

Grid

Material-UI gives us a 12 column grid system based on flexbox.

Import the Grid component

import Grid from '@material-ui/core/Grid'

Create a Grid container that will wrap around the the Grid items

<Grid container>
  <Grid item>
    Item 1
  </Grid>
  <Grid item>
    Item 2
  </Grid>
  <Grid item>
    Item 3
  </Grid>
  <Grid item>
    Item 4
  </Grid>
</Grid>

This will just lay these items next to each other, but we can pass in breakpoints and it will create spacing and make the grid responsive

<Grid container>
  <Grid item xs={3}>
    Item 1
  </Grid>
  <Grid item xs={3}>
    Item 2
  </Grid>
  <Grid item xs={3}>
    Item 3
  </Grid>
  <Grid item xs={3}>
    Item 4
  </Grid>
</Grid>

Drawer

Navigation drawers can hold your links and other app functions. There are different drawer types:

Temporary - can toggle open or closed and sits on top of content
Persistent - can toggle open or closed and is on the same level as your content, this will re-adjust the size of your content
Permanent - are always visible and pinned to the left edge, they can't be closed

Import your Drawer component

import Drawer from '@material-ui/core/Drawer'

Wrap your content in the opening and closing Drawer component then set the type with variant, we'll go with a Temporary drawer here. Then the side you want the Drawer to appear from we assign with anchor

<Drawer variant='temporary' anchor='left'>
  Our Links
</Drawer>

We can toggle the Drawer open or close with open which takes in a boolean. I like to use useState and toggle with a button

const [open, setOpen] = useState(false)
const toggleDrawer = () => { setOpen(open => !open) }

<Button onClick={toggleDrawer}>Toggle Drawer</Button>
<Drawer variant='temporary' anchor='left' open={open}>
  Our Links
</Drawer>

Drawers also have an onClose prop that takes in a callback function. This will be triggered when a user clicks on another part of the app while the Drawer is open. We can assign our toggleDrawer function to toggle our state and close the Drawer

<Drawer variant='temporary' anchor='left' open={open} onClose={toggleDrawer}>
  Our Links
</Drawer>

makeStyles Hook

Allows you to create CSS classes and add custom CSS

This has to be imported using destructuring

import { makeStyles } from '@material-ui/core'

Assign a constant to makeStyles that takes in an object where we create a CSS class and add our custom CSS

const useStyles = makeStyles({
   text: {
     fontSize: 50,
     backgroundColor: 'red'
   }
})

Assign another constant inside our component function to useStyles and invoke it then assign it to the component we want to style with className

function App() {
  const classes = useStyles()

  return (
    <Typography className={classes.text}>
      Wrapped Content
    </Typography>
  );
}

export default App;

There are many more customization options, again check the API for what's available.

Custom Themes

Material-UI has a default theme that has colors set and uses the Roboto font. You can find the settings on the default theme by searching default theme on the Material-UI site. We can change these settings with custom themes.

First import the needed functions into the root component of your app so the entire app has access to the custom theme

import { createMuiTheme, ThemeProvider } from '@material-ui/core'

Assign a constant to createMuiTheme that takes in an object where we create our custom theme. Here we access the main color

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#FEFEFE'
    }
  }
})

Wrap your entire app in the ThemeProvider then assign the custom theme we created using theme

function App() {

  return (
    <ThemeProvider theme={theme}>
      <Typography color='primary'>
        Wrapped Content
      </Typography>
    </ThemeProvider>
  );
}

export default App;

We can change the font of the Typography component

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#FEFEFE'
    }
  },
  typography: {
    fontFamily: 'Quicksand'
  }
})

Look in the default theme and find other settings you would like to customize

Conclusion

As you can see Material-UI is very easy to use and customizable. The Grid component makes it very easy to create responsive apps. To dive deeper I recommend reading through the documentation on the Material-UI site. I will also link a great youtube tutorial I used to learn about Material-UI. Happy coding!

Resources

Material-UI
Material-UI Tutorial by The Net Ninja

Get Active!...Record

Vincent Baylon — Wed, 18 Aug 2021 05:04:16 +0000

Active Record is a Ruby gem that allows to you easily create, maintain, manipulate your database. It is an ORM (Object Relational Mapping), which means it lets you interact with data in your database as though it were a normal Ruby object.

For example if we have a dogs database, we can use Active Record to grab all our dogs with a simple:

Dog.all

. . .

Active Record Basics

Naming Conventions
- Pluralize the database tables associated with your class. Class name would be singular with the first letter capitalized and written in CamelCase. Table name is plural, all lowercase, and written in snake_case.

Model Class - Dog
Database Table - dogs

Create Active Record Models
- Subclass the ActiveRecord class. This will allow your class to inherit all the methods within the subclass.

class Dog < ActiveRecord::Base
end

CRUD (Create)
- Active Record creates an object and saves it to the database instead of only creating a new instance.

roscoe = Dog.create(name: "Roscoe", breed: "Mix")

CRUD (Read)
- Accesses data within our database. There are other read methods available here.

Dog.all
# Returns all our dogs

Dog.first
# Returns the first dog

Dog.find_by(name: "Roscoe")
# Returns the first dog named Roscoe

Dog.where(breed: "Mix")
# Returns all dogs with a breed of "Mix"

CRUD (Update)
- Modify an attribute then save it to the database.

albert = Dog.find_by(name: "Albert")
albert.update(name: "Alby")

# Bulk update
Dog.update_all "adopted = True"

CRUD (Delete)
- Remove object from the database.

alby = Dog.find_by(name: "Alby")
alby.destroy

Migrations
- A way to alter the structure of your database. This is stored in migration files and executed using rake.

class CreateDogs < ActiveRecord::Migration[6.0]
  def change
    create_table :dogs do |t|
      t.string :name
      t.string :breed
      t.boolean :adopted
    end
  end
end

. . .

Active Record Advanced

Associations
- Sets up a connection between two models.
- Belongs_to connects each instance of the declaring class (Dog) to one instance of the other class (Owner).
- Has_many is on the opposite of the belongs_to connection and means the the declaring class (Owner) has zero or more instances connections of the other class (Dog).

class Dog < ActiveRecord::Base
  belongs_to :owner
end

class Owner < ActiveRecord::Base
  has_many :dogs
end

Pluck
- Returns an array of just the attribute you provide.

Dog.pluck(:name)
# => ["Roscoe", "Alby", "Fido"]

Joins
- Query one model based on data from a related table. Referencing how our Associations is set up:

Owner.joins(:dogs)

Scope
- Custom queries that return an ActiveRecord::Relation. You use scopes when you have a custom query that you will use in other places so you don't have to duplicate code.

class Dog < ActiveRecord::Base
  scope :mix_breed, -> { where("breed = Mix") }
end

. . .

Conclusion

This was just a small sample of what Active Record can do. If you'd like to learn more I will provide some links below. Happy coding!

. . .

Resources

Active Record Basics
Active Record Associations
Active Record Query
Active Record Migrations
Scopes

Planet Of The APIs

Vincent Baylon — Thu, 22 Jul 2021 00:26:27 +0000

Anytime you use an application on your phone or browse the internet on your desktop/laptop, you're connecting to a server to request for data. The server takes this request, interprets the data, and sends it back to you in a readable way. That's all possible because of APIs. If you stick around until the end, I promise to show you how to work with APIs.

When I started my coding journey a few years back, I asked a developer friend what was important for me to know. Apart from having a firm grasp on the language I was learning, he told me I needed to know how to work with APIs.

Mark Rafael, Technical Lead (Software and Services) at GoPro, "We use private APIs to allow our various applications (web/mobile/cameras) to use the same back end functionality without having to replicate code."

. . .

What is an API?

An API (Application Programming Interface) is an interface that allows two pieces of software to communicate. This is implemented by a server and allows a client to make requests by using the API URL Path.

"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"

Why are APIs important?

As developers, our main purpose is to be problem solvers. Luckily for us, many problems have already been solved. If you look at the example API url path above, it's for Google Maps. Now imagine Uber doesn't exist and you just came up with this amazing idea for ride-sharing. Of course you need to implement a mapping system.

Now you can build one from scratch or you can just pay Google $58 million to use their API! Ok ok that's a hefty price, but if you're working at the scale of Uber, utilizing Google Map's API not only saves you a lot of time but you know you have a reliable mapping system.

Seamless Application

According to Google,

"About 85% of online shoppers start a purchase on one device and finish on another."

It's no longer enough to have an easy to navigate website or intuitive mobile application, these need to work together to provide a seamless experience when switching from one device to another. With the speed most APIs deliver data, this seamless experience is possible by making Fetch() requests to the API in real-time.

. . .

Fetch() Request in JS

This good boy is Roscoe. When he's not being a model, he likes to play fetch. Sometimes he won't go after his ball when I throw it, so I have to request him to fetch it, a fetch() request performs the same way. We're asking the client to get us data from the server.

Let's use the free Star Wars API to fetch some data.

const baseURL = 'https://swapi.dev/api/'
const peopleURL = 'https://swapi.dev/api/people/1/'

Our baseURL points to the APIs root URL. We can make requests to the baseURL but to get specific data we will make requests to Endpoints. Endpoints are specific points of entries in an API. Our peopleURL points to an endpoint.

fetch(peopleURL)
  .then(response => response.json())
  .then(data => console.log(data));

This is the syntax for making a basic fetch() request in JavaScript. Let's take a look at what we're doing:

fetch(peopleURL)
//  .then(response => response.json())
//  .then(data => console.log(data));

Here we're telling our client to send a fetch() request to the API URL path that we provided. This won't return us the data we want yet, what this first part gives us is a Promise.

A promise represents a response from the server saying, "I have received your request and am working on resolving it." This allows our code to be Asynchronous, meaning while our application is waiting to receive that data from the server, other tasks can be completed.

Once our promise is resolved, we get a Response object.

//fetch('https://swapi.dev/api/')
  .then(response => response.json())
//  .then(data => console.log(data));

Though it's not yet in a format we can work with so we extract the JSON (JavaScript Object Notation) by using the .json() method.

//fetch('https://swapi.dev/api/')
//  .then(response => response.json())
  .then(data => console.log(data));

Then after the JSON is extracted we can finally work with it within our code. Here we're simply displaying it to the console.

And there's our data from our API!

. . .

Conclusion

This was a very basic definition and example of APIs but I hope it highlights the importance of APIs and how it makes our lives as developers easier. There's also a lot more we can do with APIs than a basic fetch() request and I'll provide some links to more resources below. Happy coding!

Resources

Star Wars API
Promise
Fetch API
Third-party APIs
Response
API Endpoint
JSON