DEV Community: IsaacCodes2021

How to generate NFT sets with Node.js

IsaacCodes2021 — Thu, 30 Sep 2021 19:20:27 +0000

If you've stumbled across this blog and are wondering "What the heck is an NFT" I will point you to this blog that will get you up to speed on NFT's. But for a quick run down, NFT is an acronym for nonfungible token which simply means your token is unique and that uniqueness means tangibly your token is not worth the same amount as the next persons.

The next thing to understand is the process of minting an NFT which can be read about here

NFTs are minted through smart contracts that assign ownership and manage the transferability of the NFT's. When someone creates or mints an NFT, they execute code stored in smart contracts that conform to different standards, such as ERC-721. This information is added to the blockchain where the NFT is being managed. The minting process, from a high level, has the following steps that it goes through:

Creating a new block

Validating information

Recording information into the blockchain

ethereum.net

Before we get started there are a few other things we are going to need:

an IDE
Node.js
a set of images (1000 X 1000px)

There are different processes for setting up your ide and installing node.js so I recommend searching online for the resources based on your machine.

as for the image set you will need at least two different kinds of pictures or 'layers' that will be stacked on to each other so they will all need similarly structured names. ex. layer1_1 layer1_2 ...

Once you have all of the aforementioned, go ahead and continue on.

The Code

the first thing we are going to need to do is create a folder in our computer that will be our directory for our project.
once we have created this folder we will need to run the following in our console IN THIS ORDER:

npm init

npm install canvas

npm init creates a configuration file that will set op our project to easily implement node packages
canvas is what will be used to generate our images.

after we have done the previous step we can go ahead and write some code and we will start by creating our index.js file and importing some packages into our document

// index.js
const fs = require('fs')
const { createCanvas, loadImage } = require("canvas")

Next we will create a variable canvas and retrieve the context of the canvas. which will be our image area

// index.js
const canvas = createCanvas(1000, 1000)
const ctx = canvas.getContext('2d')

Next we will write a function that will draw something onto our canvas, we will do this with an asychronys function so that the following code will wait for image to be set

// index.js
const drawLayer = async () => {
    const image = await loadImage("./baseImage.png") // <== your file in here
    ctx.drawImage(image, 0, 0, 1000, 1000)
    console.log("this ran")
}

It's important that is the loadimage function you specify YOUR file name that you have for your base file

The next step is to create a function that will save our image that was created when we ran our Draw function.

// index.js
const saveLayer = (_canvas) => {
    fs.writeFileSync("./newImage.png", _canvas.toBuffer("image/png"))
}

whats happening here is we are basically drawing whatever we have coming in as _canvas and saving it as newImage.png
the next step is to add the following line of code in your draw layer function

// index.js
saveLayer(canvas)

now if you call drawLayer() in your index js file and run node index.js in your console you should see a new image appear in your directory. YAY!!

Next we are going to create a new folder in our directory called input which is going to be all the possible input image or layer for our program to grab from and create images from.
inside of that folder your images should be separated by category or 'layer' into different folders

inside of the new input folder create a file called config.js, this file is what is going to make our program more dynamic.
before we get to the fun stuff your going to want to add the following to the top of our new config.js

// config.js
const fs = require('fs')

The first thing we are going to do is create an array of objects that specify the different layers that our output images will have.

// config.js
const dir = `${__dirname}`
const layers = [ // <-- this is what your objects should look like
    {
    id: 1,
    name: "background", //<---------  change this
    location: `${dir}/background/`, // and this 
    elements:  getElements(`${dir}/background/`), // and 
 this accordingly
    postion: {x: 0, y: 0},
    size: {height: 1000, width: 1000}
}
]

the next thing to do is build out the function that we specified above in the elements property

// config.js
const getElements = path => {
  return fs
    .readdirSync(path)
    .filter((item) => !/(^|\/)\.[^\/\.]/g.test(item))
    .map((i, index) => {
      return {
        id: index + 1,
        name: cleanName(i),
        fileName: i,
        rarity: addRarity(i),
      };
    });
};

what this function is doing is reading the path as specified as a parameter and then filtering out bad filenames, then we are going to iterate through each item
and create objects for each of the folders and store them in layers.elements accordingly

next we will define the two functions above cleanName and getRarity.

// config.js
const addRarity = _str => {
  let itemRarity;

  rarity.forEach((r) => {
    if (_str.includes(r.key)) {
      itemRarity = r.val;
    }
  });

  return itemRarity;
};

const cleanName = _str => {
  let name = _str.slice(0, -4);
  rarity.forEach((r) => {
    name = name.replace(r.key, "");
  });
  return name;
};

the clean name function basically produces a clean name without the.png that is creates in the name property of the getElements function
the addRarity function checks if
next we will create the rarity levels that are being iterated through in the cleanName function
your keys and values can be whatever you want them to be but for example:

// config.js
const rarity = [
    {key: "", val: "common"},
    {key: "_r", val: "rare"},
    {key: "_sr", val: "super rare"}
]

You can add or subtract more rarity levels as you please

Now we will export a few things we defined in the config.js file

// config.js
module.exports = {layers, width, height}

and export import them in the index.js file.

// index.js
const {layers, width, height} = require("./input/config.js")

now if you were to add console.log(layers) to your config.js file you should see when you run it an array of objects with the correct number of elements in your folder

next we want to be able to speicify how many versions/editions/NFTs we want to create and we will do that by defining some a variable as a number and running a loop that amount of times

// index.js
const edition; <== set equal to your number of editions
for ( let i=1; i <=1; i++) {
    layers.forEach((layer) => {
        drawLayer(layer)
    })    
}

inside of our loop we are iterating through each of the layers that we imported from our config.js file and drawing a layer with the each layer

next we are going to update our drawLayer function as follows

// index.js
    let element = _layer.elements[Math.floor(Math.random() * _layer.elements.length)] // insert as first line of function

next we will modify the const image and cxt.drawimage to be more dynamic since we will be creating more than one image

// index.js
    const image = await loadImage(`${_layer.location}${element.fileName}`)
    ctx.drawImage(image, _layer.position.x, _layer.position.y, width, height)

now we will add the edition of the image by passing it into our saveLayer function which we call to in our drawLayer function

// index.js
saveLayer(canvas, _edition)

now we set up our saveLayer function to take in the new argument by giving it a parameter where we declared the saveLayer function and make the fucntion more dynamic to handle whatever parameters are getting passed in.

// index.js
const saveLayer = (_canvas, _edition) => {
    fs.writeFileSync(`./output/${_edition}.png`, _canvas.toBuffer("image/png"))
}

resources:

YouTube.com/HashLips

An overview of my experience attending a coding bootcamp

IsaacCodes2021 — Fri, 17 Sep 2021 18:18:09 +0000

In the following text I will cover what I accomplished, The challenges I was able to overcome and the ones I am still working on achieving. And what I would have done differently.

At this point in my experience I am 80% through my coding bootcamp and most of the instructional material has been given to us.

The What and Why

Firstly the program I decided on was a full-stack web development course where JavaScript, React, ruby, and Ruby on Rails are taught. I personally chose this route over something like mobile development is is that this tech stack would be something that is very common in the job market (React is one of the most commonly used frameworks/libraries), and I felt learning these technologies would be good foundations for my future endeavors in learning other languages.

What did I Gain?

I was able to do a LOT of coding over the past two and a half months. I was able to rediscover my love for building and creating thing, a feeling that I had forgotten since I stopped taking pictures as the covid-19 quarantine began. I can confidently say that I can build a website from front to back, start to finish, which is a huge win for me.

More than that in my opinion I would say I expanded my problem solving skills and my ability to google things which ended up being the most useful skills overall because, what good is knowing how to code if you don't know how to solve problems you might run into with either a concise google search or an understanding of console readouts?

Among learning a few coding languages and a few frameworks i was able to met some pretty cool folks in my coding bootcamps cohort. I think it's rather beautiful seeing people from all different backgrounds and different places in the us all together in the same place trying to accomplish the same thing. I think I got really lucky because I got a really interactive, understanding, witty, and all around good people.

I think however the most valuable thing I have got so far from this coding bootcamp was seeing my own ability to learn at a fast pace and be successful enough to get this far. As a kid I was always told that I was a "slow learner" or I was given special privileges because it took me longer to do tests and homework than the other kids. But coming out of this I was able to keep up with everyone around me for the most part and learn quite a bit and I still get emotional when I think about all of this. It was a huge win for me to realize that when I really want to do something and It is something I deeply desire, I can achieve my goals, I am not 'slow'.

What did I loose?

Coding bootcamps are not easy, and if you are reading this and thinking about attending one and you have watched a bunch of youtube videos and read a bunch of blogs let me remind you again, this is not for the faint of heart, It will challenge you so be prepared to make the sacrifices necessary to be the most successful you can be. Among those sacrifices for me were financial stability, a social life, fitness, and the unplanned one being my mental health. Now it's not as bad as it sounds, what I mean by 'unexpectedly sacrificing my mental health' sort of encompasses all of the things I had to give up. For me one of the most important parts of my routine is exercise, more for my mental state than any physical gains. There came a point in my bootcamp journey when I had to choose between going to the gym/or talking to friends and working on course material in order to keep up with the pace of the bootcamp. And this to me was a no brainer: of course I am going to do the coursework, but as I made this same decision every day for 3 weeks in the middle of the bootcamp I started becoming mentally sluggish and then that mental sluggishness turned into a lack of motivation, which led to other non-optimal mental function. Things eventually got to a point where I was becoming very sensitive to random things which would trigger anxiety and then prevent me from absorbing the course material.
I remember having a conversation an saying "I haven't left my house or got out from in-front of my computer in almost 3 weeks but I feel like i haven't been very successful despite me spending all this time in my 'learning environment'." And the person on the other end asked "Well shouldn't you have learned more if you haven't left your home?" and that stuck with me. If forced me to do some self-work and figure out what I can do to help myself without taking away too much time from my coding bootcamp which boiled down to me stepping away from the screen and going outside on my lunch breaks everyday. This ended up being enough to slowly mend my mind back into a state where I was able to learn more effectively.

Conclusion

I ultimately grew and learned a lot throughout my experience at a coding bootcamp. Not only did I grow in the scope of my coding skills, but I also was able improve my problem solving skills, overcome some insecurities I had about myself that had been present in academic environments. If you asked me 4 years ago today where I think I would be, I would definitely have not said on my way to graduating a coding bootcamp, I probably would have said something like living in Colorado working at a dispensary(i still wouldn't mind doing this)

responsive bulma.io navbar

IsaacCodes2021 — Thu, 02 Sep 2021 00:10:24 +0000

So you want a responsive nav bar? Well you've come to the right place!

A nav bar is one of the most commonly used features of any website, so it's a good idea to know how to build one or at least have a go to resource. In this tutorial I will show you how to build a responsive navbar using the bulma.io library.

step 1

Import the link to the bulma stylesheet into the head of your document.

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">

step 2

Build the inital structure of your navbar.

<!-- step 1.1 -->
<nav class="navbar" id="my-nav" role="navigation"> 
    <!-- step 1.2 -->
    <div class="navbar-menu">
        <!-- step 1.3 -->
        <div class="navbar-start">
            <!-- step 1.4 -->
            <a class="navbar-item">navbaritem</a>
            <a class="navbar-item">navbaritem</a>
            <a class="navbar-item">navbaritem</a>
            <!-- step 1.5 -->
            <div class="navbar-item has-dropdown is-hoverable">
                <!-- step 1.6 -->
                <p class="navbar-link">more</p>
                <!-- step 1.7 -->
                <div class="navbar-dropdown">
                    <a class="navbar-item">navbaritem</a>
                    <a class="navbar-item">navbaritem</a>
                </div>
            </div>
        </div>
    </div>
</nav>

A brief explanation of what is happening above:

The nav element with the class of navbar(provided by bulma) creates the navbar container where we will store the rest of our elements
The div wit the bulma class of navbar-menu will give us some of the responsiveness so when this window shrinks to a certian size, the navbar disappears
The div with the bulma class of navbar-start will allign our navbar-items by creating a flex box for us
you can put a number of different elements here, most relevent to me though is putting React Router Link tags. The navbar-item bulma class adds a onMouseOver effect which imporves the ux
The following steps are optional but if you want to add a dropdown menu into your navbar, this is a way that you could do it. There are two new bulma classes applied to this div, the first being the has-dropdown which on its own does nothing but when paired with the step 7 it will give us a working drop down. The second is the is-hoverable class which makes the div we created highlight when the mouse is above it
The p tag with the class navbar-link creates a chevron and adds text to differentiate that this is a dropdown manu and not a navbar item
The div with the navbar-dropdown bulma class will hide the navbar items that are contained within it

Now that we have a desktop friendly navbar now lets make it mobile friendly!

step 3

now we are going to add another chunk of html to our nav element.
If you are building the app in HTML your code should look like this:

<a role="button" id="burger" class="navbar-burger">
    <span aria-hidden="true"></span>
    <span aria-hidden="true"></span>
    <span aria-hidden="true"></span>
</a>

The class above 'navbar-burger' creates the navbar and the three spans are required to display the three lines in the hamburger

Now if we got into our browser and shrink the window we should see the navbar items disappear and see the burger reappear on the right, cool! WAIT when we click the button nothing happens!!

step 4

If you are building a in react app skip to step 4.5
This step will consist of the javascript logic required to toggle the view of the hamburger menu above and link it to the HTML file we are in.

A brief explanation of the following code: First we are searching for the elements in our HTML with the tags of my-nav and burger and saving them to variables, after that we need the menu to appear when the user clicks so we add an event listener that listens for a click event and then executes a callback function that comes after the comma. Inside said callback function we need to add a class to both the my-nav and the burger elements, more specifically toggle between the two so we grab a list of the classes in the document and add the toggle method with the class we need to toggle between which is in this case is-active. The toggle method in JS searches for the presence of a given argument and if the argument is present it removes it and if it is not, it adds it.

const myNav = document.querySelector("#my-nav")
const burger = document.querySelector("#burger")
burger.addEventListener('click', ()=> {
    myNav.classList.toggle("is-active")
    burger.classList.toggle("is-active")
})

step 4.5 - react burger

if you are following along in react add this to the a element:

onClick={toggleDropdown}

now we are going to declare that function and put some logic in it, insert the following code into your NavBar component

function toggleDropdown() {
    const myNav = document.querySelector("#my-nav")
    const burger = document.querySelector("#burger")
    myNav.classList.toggle("is-active")
    burger.classList.toggle("is-active")
}

The the snippets of code above perform the same logic as explained in step 4 and with that you should have a functioning responsive nav bar!

React Router & multi-page apps

IsaacCodes2021 — Fri, 20 Aug 2021 20:21:28 +0000

The main function of this blog is to help me remember the process of building a multi page react app

What is react router

React router is short hand for a NPM package react-router-dom that allows developers like yourself to build out multi page application through a practice called client side routing. Typically servers handle web routing, react router gives the illusion of a normal web page.

getting started

after you have created your app using npm create-react-app double check if react-router-dom is installed with:

npm i react-router-dom

next you will need to import the following code into your index.js

import {BrowserRouter} from 'react-router-dom'

after you have imported browser router some modification will need to be made to the body of the file
the BrowserRouter tags need to wrap around the App component like so:

ReactDOM.render(
  <React.StrictMode> 
    <BrowserRouter > // <-- here
      <App />
    </BrowserRouter> // <-- and here
  </React.StrictMode>,
  document.getElementById('root')

note: browser router is a parent component and can only have one child

This will also need to add this import to your App.js

import {Link, Switch, BrowserRouter, Route, Redirect} from 'react-router-dom'

next we will create the body of our app and for sake of ease we will only have two routes

<BrowserRouter>
  <Switch>
    <Route path="/home">
      <Home />
    </Route>
    <Route path="/pathname">
      <YourComponent />
    </Route>
    <Route path="/anotherpathname">
      <YourOtherComponent />
    </Route>
  </Switch>
</BrowserRouter>

the first thing thats happening in the code above is the implementation of the Browswer router tags, next we use the switch tags to which allows us to switch between different routes
the routes are where we specify our path that will be differentiate the different pages in our app. Inside the rout you can store the component that you want to display on the path you specified in the Route tag

now we will go over and build the components that we specified in App.js
in all the components you will need to import the following:

import {Switch} from 'react-router-dom'

The general structure of your these components are all the same and will

  function home() {
    return (
      <>
        <h1>welcome Home!</h1>
        <Link to="/pathname">your component</Link>
        <Link to="/annotherpathname">your other component</Link>
      </>
    )
  }

  function YourComponent() {
    return (
      <>
        <h1>welcome to YourComponent</h1>
        <Link to="/home">home</Link>
        <Link to="/pathname">other component</Link>
      </>
    )
  }

  function YourOtherComponent() {
    return (
      <>
        <h1>welcome to YourOtherComponent</h1>
        <Link to="/home">home</Link>
        <Link to="/annotherpathname">your other component</Link>
      </>
    )
  }

And there you have it, a basic functioning react app with multiple pages! you now have access to:

/home
/annotherpathname
/pathname

Intro to CSS

IsaacCodes2021 — Tue, 27 Jul 2021 17:50:47 +0000

What is CSS?

A CSS (cascading style sheet) file is usually created to separate the style of your HTML website from its actual HTML contents. This file type is identified by the .css file extension. CSS allows a developer to 'beautify' and shape their website however they like. Without CSS, webpages would look like a plain boring text document

An example of what external CSS looks like:

body {
background-image: url('https://i.imgur.com/1uYroRF.webm');
}
#siteHeader {
text-align: center;
color: blue;
}
.mainText {
text-align: left;
margin-top: 10px;
}

How to insert CSS

At first glance integrating CSS into your first webpage can seem like a daunting task but you first step doesn't have to throw you into the deep-end.

To import an external CSS stylesheet into our HTML document we use the link tag in the head of our HTML document as illustrated below:

<!DOCTYPE html>
<html>
   <head>
     <link rel="stylesheet" href="style.css">
   </head>
<body></body>

In the link tag the first thing you see is rel="stylesheet". rel is used to define the relationship between the tag and what is being linked. The second bit is the href='style.css' attribute. The href attribute defines the link itself, be it a link to a website or a link to a location in the directory.
One of the amazing features that HTML has is allowing us to use stylesheets that are located on the web versus in our directory! Which can allow us developers and designers to use publicly available CSS frameworks.

CSS Selectors

There are 5 different types of selectors that can be utilized:

simple selectors
combinator selectors
pseudo-class selectors
pseudo-element selectors
attribute selectors

For simplicity sake I will only be covering simple selectors which allow for selecting elements based on class, id, tag, and name.
Selectors are what you are applying your CSS properties to. For example if you have a bunch of header elements in your document and you want to center them, color them blue, and underline the text it would look like this:

h1 {
text-align: center;
color: blue;
text-decoration: underline;
}

Now if we had a lot of h1 elements in our document but they didn't all serve the same purpose we could differentiate between them by giving them different class names or id's when we are building out the HTML:

<body>
   <h1 id="main-header">Website Title</h1>
   <h1 id="section-header">This is a new Section</h1>
</body>

.main-header {
text-align: center;
color: blue;
text-decoration: underline;
}
.section-header {
text-align: left;
color: black;
}

CSS Properties

CSS properties are are what are contained within the curly brackets after he selector. There are a different number of CSS properties depending on where you look and who you ask, most answers to that question are between 150 and 288. CSS properties are just what they sound like, they control different properties of the elements that fall under the specified selector. A basic example of property usage can be found above in the code snippets in the selector section. some commonly used properties would be:

height
width
background color
color
margin, padding, border
display (values are block and none to toggle display)

CSS Box Model

In order to properly control the width, height and space between your HTML elements with CSS you need to have a basic understanding of the CSS box model. The inner blue box in the image above is called the content box and the height and width CSS properties control this area. The padding will extend space around your elements. The margin is what will separate your elements from the edges of other elements, which can be useful for preventing elements from overlapping as the size of the window changes..The border property can create a visible border around elements. Example:

#form-input {
border: 2px solid black;
border-radius: 10px;
}

In the first line we identify what element we want to apply style to in the second line we are asking the browser to render a black 2 pixel wide border around the element. In the third line we are asking the browser to round the corners of the border by a radius of 10 pixels. See more border styles here. You can further explore the CSS box model by going into different websites and checking out the elements with the developer tools.

References

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
https://w3bschools.com/css