Thursday, June 29, 2023

147: Deploying to Testnet

 Today I deployed my smart contract to the Goerli testnet, using the Hardhat Toolbox and the Alchemy API. The newest version of Hardhat makes deployment quite simple, although I did get confused that the address of the contract is now called the "target". Part of the process involved going into my hardhat configuration file and defining the Goerli testnet network, along with the URL provided by Alchemy and the private key of the account paying the fees. With these in place, the contract is deployed and I saved its target and ABI to a utils folder within my React app for the frontend. Tomorrow we begin interacting with the blockchain via the React app.

Wednesday, June 28, 2023

146: Goerli and Alchemy

 To further build our decentralized application, we need some Ethereum to send around and pay gas. I decided to use the Goerli test network to get my testnet ETH, and found a faucet that let me mine the tokens myself. From here, I created the app as a project on Alchemy. Alchemy provides a suite of developer tools to facilitate our creation of decentralized apps. I got my project API key from there, which enables interaction with the blockchain for things like querying and sending transactions. 

Tuesday, June 27, 2023

145: Smart Contracts With Harhat

 Today I got a Hardhat project running in my smart contracts folder of my dApp. The app is organized with two main folders, a client folder for the React project and a Smart Contracts folder for all the Solidity. Setting up Hardhat was simple with the node package manager, and the installation includes a test contract and test scripts to make sure everything is working properly with the local Solidity environment. I went ahead and created the first basic smart contract. It is always a huge contrast going from JavaScript to the strongly typed and rigid Solidity.

Sunday, June 25, 2023

144: Hardhat

 Hardhat is an ethereum development environment. It gives us a suite of tools to allow us to create contracts, test, and deploy them. I am going to use Hardhat to handle the smart contract side of my decentralized application, and then integrate it with the React frontend. 

Saturday, June 24, 2023

143: Loader Component

Today I created the Loader component. It looks like a red spinning loading icon. Using conditional logic, the Loader component will render when the app is waiting for some data, particularly when awaiting for a block to be processed on the blockchain for our transactions. Informing the user when they are waiting for data to process is critical for the user experience of the app. 

Thursday, June 22, 2023

142: Forms With Tailwind

 Today I built out the forms for my Web3 app using Tailwind CSS. This project is making me fall in love with Tailwind after seeing the ease of creating good looking frontends with their inline classes. In order to modularize the code better and make it easier when it's time to control the components and deal with their inputs, I created an Input component. All of the inputs in the form are this Input component, with their value, name, placeholder, and onChange method passed as props to the Input component. This allowed me to put all the common styles within the className of Input, and eliminate any redundancy in the styling. 




Wednesday, June 21, 2023

141: CSS Gradients

 We can create pretty stunning art using only CSS gradients. The card you see here is not a JPEG or other image asset, it is created entirely with CSS grid and HTML div tags, along with React icons. Everything is aligned with flex box and will move and resize itself as needed for various screen sizes. Try out a gradient generator here: https://csshero.org/mesher/



Tuesday, June 20, 2023

140: Infrastructure As Code

 Today I spent some time learning about the concept of infrastructure as code. This allows us to define and configure the infrastructure of our web app using a high level abstracted code language. Recently, an open source project called SST has been gaining traction. SST allows you to use TypeScript constructs to define the Amazon Web Solutions infrastructure of your application. From here, we can create local versions of our app and then deploy the app with all its infrastructure by utilizing the AWS command line. 

Monday, June 19, 2023

139: Tailwind Grid

 Today I made a section of the app using CSS Grid and Tailwind. This was relatively easy actually, and only required making a wrapper div with all the grid specifications, and then individually styling the cells inside. Since most of the cells shared common styling, I declared a commonStyles string with all the Tailwind classes in it, and then used Javascript string interpolation to inject these styles into each div. This way, the individual cells needed only the styling that was unique to them. 


Sunday, June 18, 2023

138: Tailwind Grid Preview

 Had a busy day today, but managed to spend a little time learning about how to do a CSS grid using Tailwind. Personally I always preferred grid to flex box. Tomorrow I'm going to continue on the decentralized app and utilize the grid for the main page. 

Saturday, June 17, 2023

137: Web3 Project Call

 Today I attended a call for a Web3 game that I am contributing to. We went over things like game mechanics, frontend interface, and Solidity contracts. We also went over project management aspects like our Kanban boards, and marketing strategies to build the game community. 

Friday, June 16, 2023

136: HTML Popovers

 Many modern websites rely on popovers to drive user engagement, for example with an email list. However these have been complex to code traditionally. Now with modern HTML and CSS, we can make an animated popover easily and without any Javascript. It all relies on new props that are now supported by many browsers for your HTML elements. A button tag can be given the popovertarget property, and the string that it is assigned to matches the ID property of a div tag. The div can be styled however you want, and it will always pop up over the element regardless of Z index. By default, the popover will close if you click outside of the element or hit Escape. We can also customize and override the popover property, by setting the popover property on the div to manual. With some CSS key frames in the styling we now have a fully animated popover on our web page using modern HTML, and no Javascript required. 

Thursday, June 15, 2023

135: Hero Section

 Today I spent some time working on the hero section for the decentralized app. Tailwind allowed me to easily make it responsive based on various screen sizes, along with centralizing the text properly and adding gradients to make it visually appealing. 

Wednesday, June 14, 2023

134: Responsive Navbar With Tailwind

 Today I created the Navbar component for my web3 app and in the process saw the true utility of Tailwind CSS. The app must be responsive and mobile friendly, so on desktop the entire Navbar will appear with links, while on mobile there will be an icon to tap that expands into a navbar and can be collapsed again. With Tailwind CSS we can create this without directly using any CSS media queries. Tailwind allows us to put classes directly in our JSX that selectively apply to certain screen sizes. Using this to hide the Navbar selectively based on screen size, combined with React state to track if the mobile navbar is to be displayed or hidden, allows us to create a responsive app for desktop and mobile with a minimum amount of complexity. 




Tuesday, June 13, 2023

133: Vite

 To get back into the swing of coding I decided to code along with a Ethereum dApp on the JS Mastery youtube channel. In order to initialize the app, I used Vite instead of the ancient Create React App. Vite created the app much faster, and supports numerous frontend frameworks. I selected React, and then was given the choice of Typescript or Javascript. This is also useful, as Typescript is something I am looking to learn in the future. The basic app skeleton provided by Vite is also superior to the one generated by Create React App. It has some simple styling nicely organized in tiers of CSS files, along with a simple function that increments a counter on the main App component. The counter utilizes the useState hook, so right out the box your app skeleton has a basic amount of complexity that I find helpful. 

Monday, June 12, 2023

132: Shadcn

 Shadcn is a component library for React and NextJS. Component libraries allow developers to quicky utilize premade components to create good looking apps, without having to make hand styled custom components. Shadcn recently released an update giving the library command line interface support. This means you can simply open your terminal and type a command for shadcn, for example to add a Skeleton component to your app. The file exporting the component will be created in your file tree, and the Skeleton will be available to import everywhere. 

190: Sablier

 The CodeHawks platform has an upcoming audit on the Sablier protocol, so I decided to read through the docs and familiarize myself with the...