67/365: Python + Stable Diffusion

 Today I spent some time installing Python so I can work with the Stable Diffusion text to image AI. 

66/365: More Grid

 The app is starting to look like a wireframe now with different sections set with CSS grid and a fixed navbar that stays at the top of the screen even when scrolling. After setting up the grid, the Meta class recommends that title text like h1s be the first you style. 

65/365: Restarting with Grid

 Today I scrapped what I was doing with the capstone project and started anew with CSS Grid. I feel Like i understand what im doing much better this time around and formatted all the content into its proper columns. Now I just have to fill the areas with content and ensure it's all well scaled for mobile. 

64/365: Planning 2023

 Today I sat down with a piece of paper and wrote down some goals for 2023. These were general life goals and career goals with my coding journey. They include getting my certificate from Meta before March, creating a new website for my job by April, and making an impressive crypto or finance app by the end of 2023. 

63/365: Grid for Web Apps

 Today I spent a bit more time working on the capstone project. I am going to use CSS Grid to format everything and make it responsive. However, I still do not really have a comprehensive understanding of how Grid works. This is something I will need to learn to a deep level as I continue working through the capstone project. 

62/365: Responsive Nav Bar

 Today I made the responsive navigation bar for the Meta Frontend Developer Capstone project. It uses flex box to align the items, and a CSS media query to determine when to collapse the menu into the hamburger icon for mobile devices. This icon comes from the React Icon packages, and has a small onClick function that opens and closes the mobile menu with a little animation. All the while making this website I have to keep my eye on their brand style guide, using the fonts and colors they specify. 

61/365: HTTP 3

 Today I listened to the latest episode of the Stack Overflow podcast about HTTP3. It attempts to improve the speed of web apps by reducing the number of synchronization and acknowledgement packages taht have to be sent between the client and server. It is also encrypted by default, unlike HTTP where the TLS can be enabled or disabled, HTTP3 is built atop UDP. Currenlty the researchers are attempting to use HTTP3 to allow a computer to combine mobile and wifi data, as opposed to the current system where the device has to choose one or the other. 

60/365: Signing Hedera Transactions

 In crypto, transactions must be signed with an account's private key in order to be considered valid and send to the network. Today I tried to create a test coin hat has multiple taxes that send percentages to different accounts. However, this gave me an INVALID_SIGNAURE error on the receipt object that gets returned. After discussing with some other Hedera devs, it seems likely the issue is because the various fee recipient accounts have not signed the transaction to create the token. I have accumulated different resources to study tomorrow and get a deep understanding of signing transactions and multisignatures, Any quality web3 developer needs to know how signing works inside and out. 

59/365: Using Open Graph Protocol

 Open Graph Protocol is a technology created by Meta to standardize and simplify how web pages are previewed and shared as links on social media and search engines. Meta tags using OGP can specify things like the title of the embedded link, the image that displays, and the description. This is critical for sharing attracting traffic and business to a website. The "name" property of these meta tags is always prefixed with "og", and for this application I've put them directly in the index.html file for now. 

58/365: Initialize the Capstone Project

 My time is becoming divided between my front end learning and my crypto project (not to mention my actual job!) . This morning I initialized my Capstone project for the Meta class and began a Git repository for it. With Create React App, I made the boilerplate for the project. The next step is to use Figma to wireframe the home page. 

In Hedera world, I learned about more methods and objects in the Software Developer Kit. In particular, I learned how to query an account to learn the values of the tokens it holds. 

57/365: Token Transfer Fee

 The Hedera Token Service allows for a certain fee to be collected on any transaction with a token and sent to any account. It allows for both fixed and fractional fees, and fractional fees can have an upper and lower limit. Fees can also be sent to different accounts, and the fee can even be paid in a different token. A certain wallet can even sign transactions that modifies the fee structure at a later date, after the coin has been created. The potential for this programmatic fee structure is enormous. Today I dived deep into the Hedera docs and created a testnet coin with a 10% fee sent to a collector account. I dealt with all kinds of poorly documented errors, but eventually it worked.

56/365: IPFS

 IPFS is a distributed file system protocol, managed by Protocol Labs. IT is open source with source code on GitHib. Any computer can participate in the IPFS network by running the IPFS client, either as a node or a user. This IPFS service is very useful for NFTs for example. On IPFS there is no guarantee of data availability. In order to guarantee availability, you either have to host your own node or pay a node, which is called Pinning. With the traditional web2 internet, you tell your computer where to get your information with a domain and URL. This is "location based addressing". To fix this, IPFS moved to "content based addressing". When you ant to download a certain file, you ask the network who has a file with that particular hash. IPFS supports versioning, so you can "Change" a file by adding a newer version while the history stays visible to everyone on the network. 

55/365: Crypto Team

 Today I worked with a team of other people and came p with a plan to launch our won crypto token.

54/365: Customer Conversions

 A website can be beautiful looking and made with the most cutting edge modern tools, and still be a failure and badly designed if it fails to convert customers. Today I worked on the website aquageneral.com and improved upon the design to help with customer conversion. I deobfuscated a lot of menu items, so that they became labeled with clear names that anybody can recognize. I added forms directly to the products page, so that a customer who's interested in a product can contact the business directly from that page. How much business was lost because customers were required to navigate from the product page to the Contact Us? I began to make the products pages look more like eye catching advertisements and less like blog posts and walls of text. Now the Google Ads keywords we spend money to bid on like "Water Softener" land directly on the clearly labeled Water Softener page with the form right under it. Within three hours of making these changes, we got a lead from a customer filling out a form. I also added another post to the blog full of good content which should help our keyword rankings. Our competitors rank for thousands of keywords while we have few. This in turn connects to the Google Ads, since Google allows your keyword bids to be more affordable when they believe your website is strongly associated with the search terms. 

53/365: Business Oriented Design

 The design module in this Meta class was the hardest one to slog through for me, but today I Saw how much value it has. I was able to use the things I learned to look at my business's website through the eyes of a customer and understand how our Google Ads campaign can be getting 3x as much traffic to our website without getting more conversions. The customer journey is arduous, and its like solving a maze to finally get to the conversion. Additionally, the keywords we bid on are not easily found anywhere on our website. Our products pages look like blog posts. In contrast, our main competitor and industry leader in the area has a website that effortlessly converts. This weekend I will work on redesigning our website using the best practices taught in the Meta course. 

52/365: Grinding in Figma

 Today I worked on the Figma assignments and submitted the final parts of the design module. These included a description of the problem, a user persona, a user journey, a wireframe, and an interactive prototype. With this done I can move on to the final capstone project and begin building a slick modern website with React. 

51/365: API With Express

 Today I used Express JS to make a simple API. First I initialized a repository with Node Pacakge Maanger and installed Express. From there, I wrote a little Javascript file that created the API and instructed it to listen on port 8080. From there I could define a GET method on the URI "coder" which returned a JSON object. From there, I downloaded a tool called Insomnia to help me query the API in a nice developer environment. Within Insomnia I sent my GET request, and got my JSON object as a response with a nice 200 OK code! 

50/365: RESTful API

 An application programming interface is a way for two computers to talk to each other. Instead of going to a website with a browser, a programmer can interact with the website's API using code to request the raw JSON data. Most APIs in the world are RESTful, which means they follow rules allowing for Representational State Transfer. A RESTful API organizes its information into various Uniform Resource Identifiers, or URIs. These are similar to URLs, and a client can get data about that resource by getting a request about that endpoint via HTTP. These requests follow a specific format, using an "HTTP" verb followed by the URI. These verbs signal your intent with the resources. Commonly used is GET, meaning you want to read the data, whereas POST means you want to create a new resource. Headers contain metadata about the request, such as authorization, and a body of data. The server processes the transaction which usually means querying a database. This is formatted into a repones message with a status code. A code beginning with 200 mean things are OK, 400 means something was wrong with the request, and a 500 means the server failed. After the response header, the body contains the response payload formatted in JSON. It is important to realize this architecture is stateless, meaning the two parties do not need to store any information about each other and every request and response is independent of all other conversation. All together this leads to web applications thar are predictable and reliable. The most popular tool to build your own RESTful API is NextJS, which I intend to learn soon. 

49/365: Interactive Prototypes

 Figma allows for the creation of robust animated prototypes. These allow designers to showcase the interactivity of the app to stakeholders. Figma supports interactions such as "on click" and "on hover" which have direct parallels to props in React. Creating fullyinteractive and animated prototypes within Figma allow stakeholders to get a very close representation of what their final product will look like. Once approved, it is up to the developer to make it a reality. 

48/365: Usability Testing

 Usability testing is a research technique that allows the project team and stakeholders to better understand how a user will interact with a product. One way to do this is through a user interview. After the user tests the product, the reach team asks them a variety of questions to assess the interaction. It is important to make the user comfortable, and to debrief with them after the interview. Unmoderated remote usability testing is popular, where the user tests the product via the internet and the researcher collects information from them afterwards. As with everything, the usability testing effectiveness is determined by the planning that goes into it. The researchers must determine what they want to learn, select determine a participant profile, and screen for candidates. A list of tasks to be completed during the test must be written, and each task must have a clearly defined success criteria that aligns with the goals of the study. Before having participants go through the test, it is a good idea for the researcher to try it themselves, as a dry run. 

47/365: Web3 Week

 This has been the big crypto week. My main mentor is an Ethereum dev living in budapest and my friends (internet dev friends) who made a decentralized exchange are rapidly becoming millionaires. I'm pretty situated in the web3 world and need to leverage these connections. This week ive been deep researching decentralized finance and writing pages and pages of notes of everything required to build a decentralized lending protocol. I'm not talking bout buying some crypto pump hoping to get rich, I'm deep in there coding and building the stuff myself. I minted some testnet NFTs yesterday and sent them successfully, and today I created a new token in the hashgraph test network. I think the frontend + crypto dev is a powerful combo. I've already gotten paid in various tokens for helping to consult on different projects so its time to go from being the helper on the side to being the builder in the front. Also I believe this will make me more resilient to being replaced by a software writing AI in the future. By learning the most obscure and niche skills I can provide value not easily replaced. Who knows, I could be able to build my own decentralized lending platform and get richer every day from passively generated fees. A man can dream. Cheers

46/365: Importing into Figma

 Today I took the starter zipped file from the Meta course and uploaded it into Figma where it created a workspace. This Figma stuff makes absolutely no sense to me but I can't get my Meta Frontend Developer certification without it. This weekend I need to grind through the Figma classes until I can finally submit this assignment and get on with my life. 

45/365: DeFi

 Today I spent a while learning about decentralized finance in depth. I learned about projects like Maker DAO, Compound, and AAVE. As  I learn about these I'm taking notes and plan to write an in depth document when I'm done. The Hedera network has no lending protocol at the moment, which is something I can make myself or help to incubate and consult on its creation. 

44/365: Minting an NFT

 Today I minted an NFT on the Hedera Hashgraph test network. The process was relatively simple and used Javascript files ran with Node. Using the Hashgraph SDK you have access to classes like PrivateKey, TokenType, and Client. The class of NFT is created by instantiating an instance of the TokenCreateTransaction class and then specifying its TokenType as NonFungibleUnique. Individual NFTs are minted separately. This requires the TokenMintTransaction class and the use of the setMetadata() method which specifies the characteristics of the NFT, such as the art for it. Once minted to an HBAR address, the NFT can be sent anywhere. 

43/365: Multisignature Account

 Today I did more Javascript programming interacting with the Hedera SDK. I used a script to create more Testnet accounts along with their private keys to store in the environment file and ran it with node. With these accounts I created a multisignature account. The funds in this account can only be accessed if all og the signatures are present. A threshold account was a simple modification to this. The threshold account requires some number of signatures in order to be considered signed. Adding signatures to a transaction is an easy matter of chaining on another method call. Overall I am surprised at how easy and intuitive it is to interact with Hedera using Node and Javascript. 

42/365: Hedera Testnet Account

 Today I registered as a developer and got a new testnet account on Hedera. I created a project with npm and imported the hedera SDK and dotenv modules. Then I created a javascript file that used the address and private key of my testnet address to send HBAR to another wallet. Once the file was written I ran it with npm. By console logging the transaction signature I was then able to view it in hashscan.io and verify the money went through via a 3rd party. 

41/365: Web3

 Today I migrated liquidity from the depreciated pools to the new pools on SaucerSwap. This is a decentralized exchange or a DEX. You connect to decentralized apps like a DEX using your crypto wallet, which in my case was HashPack on the Hedera network. Metamask is a popular Ethereum wallet. Both of these are browser extensions, and HashPack also has a mobile app. Discord and Twitter are also critical parts of the web3 social ecosystem. 

40/365: Paid as a Web Dev

 Today on December 2nd 2022 I've made my first bit of money working remotely as a web developer. I reformatted a blog on a Joomla website and added a few articles, and also added some SEO stuff to the site like a meta description. Now that I've made that first bit of money as a remote web dev the whole goal feels more real and in my grasp. Now its only a matter of building the income and becoming more and more valuable. At this rate it wont be long before I'm a digital nomad web developer. Not bad for day 40. 

39/365: Brand Style Guides

Brans publish style guides which specify every detail about the look and feel of the brand. These include typefaces, color palettes, and how pictures and images should be used. The style guide will also contain a UI kit, which includes critical UI elements like font sizes, icons, and documentation. The purpose of the style guide is to serve as a reference for designers to properly represent the brand. The style guides will vary by brand but they all have the same goal: to establish a consistent and clear image of their brand across products.