94/365: Form Validation with APIs

 Today I went to implement form validation with Formik and Yup in my review management app. However, something along the way broke my form submission and I get an error when trying to call my Express server. I'll have to work on this during the weekend when I have some time. Either way I decided February will be the Web3 month and I'm going to dedicate it to building on Hedera and learning more Solidity. 

93/365: React Environment Variables

 My review management app requires things like a business's email so they can be sent customer feedback. Hard coding this into the app is bad practice. Instead, I put all this information in a .env file. From there, I can reference the data in my components with the process.env object. There's two important things to keep in mind: Firstly, all the variable names must begin with REACT_APP. My Express server, for example, I named REACT_APP_SERVER and called it by referencing process.env.REACT_APP_SERVER. Second, you need to be careful how your environment files interact with version control. You don't want to push your changes to GitHub and accidentally publish your API key or some private emails. The way to do this is by editing your .gitignore file. This instructs your version control system to ignore .env files for instance, so I can push my changes to GitHub while keeping my local variables safe on my PC. 

92/365: Cross Origin Resource Sharing

 Today when I went to connect the button on my React app to my Express server to get the emails sent, I got an error about Cross Origin Resource Sharing (CORS). This is part of the security implemented into a browser that allows a website to request resources from its own URL, but blocks resources from other URLs unless certain conditions are met. The server must specify which requests it will fulfill with the Access-Control-Allow-Origin header. The cors library handles this easily with Express. Once the origin is allowed, the request goes through and works. 

91/365: Web Dev Podcasts

 I didn't have time to work on my app today but I did listen to some web development podcasts. The Stack Overflow podcast, Podrocket, and JS party are always interesting. They discussed technologies like Stencil JS and Astro. 

90: Express, APIs, and JSON

 Today I got my Express server up and running and configured it to parse a JSON object sent as the body of a POST request. It extracts the to, from, subject, and email body from the object and then calls SendGrid to send it as an email. I tested it out with the Insomnia tool and got a successful email sent by manually sending a POST request to my local server with the JSON object. From there I created a new file that used the Axios library to send the POST with the object, and it worked like a charm. The next step is to now use the Axios library and integrate it into my frontend React app, so the data from the form can be parsed upon submission and sent to the backend Node server and processed for emailing. 

89: SendGrid Express Server

 Today I created a simple Express server that listens for requests to send emails with SendGrid. I hosted the server on a local port on my computer and then sent a request from the Insomnia tool. This sent an email to myself from my jbuilds.dev domain using my API key from my own server. The next step is learning more about Express and implementing this request into my React App. 

88/365: SendGrid

 I want my review management app to capture reviews under 4 stars and email them as private feedback to the business. I looked into different email solution providers like MailGun but decided on SendGrid. Within SendGrid I verified my ownership of this jbuilds.dev domain by uploading three CMS records into the custom domains. From there I was able to write a little Node Script that referenced my API key and send an email to myself that looked like it came from @jbuilds.dev . In order to integrate this with my React app, I'll need to have an Express server listening for requests to send the emails with SendGrid. I'm looking at Glitch.com to host the Express server and possibly the React frontend too. Building this little app will be my first full stack project and a good opportunity to learn a lot. 

87/365: Material UI

 I worked on my review app some more today. I decided to use the Material UI library and I'm glad I did. The forms looks nice, and learning Material UI is also a good move in general since it's a popular technology. Tomorrow I'm going to play around with MailGun and try to figure out how to get the form data from the app sent as an email to the business. 

86/365: Customer Review Management App

 Today I started on a little app. It presents the user with the name and logo of a business with 1-5 stars to rate them. On a good click of 4 or 5 stars, it presents the user with links to Google Yelp and Facebook so they can ideally continue onward and post the review there. However, for a weaker score the app instead shows the user a form where they can write their bad review. This is then captured and sent on to the business privately. This app is based on one my business is currently paying 200 a month for. I want to create it myself and host it to where we can send the link out to customers. Once I have the whole frontend finished with conditional rendering I have to figure out how to get the email sent. Apparently there are good libraries for this. 

85/365: Online Courses

 Today I finished the module on coding interview preparation for Meta, basically just grinded the entire module in two days. Now all that's left is to get my capstone project passed. The problem is the student peer graders don't actually look at the project and just give me random failing grades. Even easy and obvious things on the rubric like using the appropriate HTML5 semantic tags which my project clearly has, they still give me a zero on. Most of these people also do not know how to use github and tell me the repository link doesn't work when I can clone the entire project from it. Obviously it is pretty frustrating that my certificate is at the mercy of these people. At this point I decided to clone a really professional looking project someone made with NextJS and customize and modify it for myself. This will also give me an opportunity to learn how NextJS works and study the practices this other guy did who is clearly a high level frontend engineer doing things way beyond the scope of this class. 

84/365: Space and Time Complexity

 I began the final module of the Meta course today about coding interview preparation. They went over concepts like time complexity and the Big O notation, along with space complexity with input space and auxiliary space. I know most of this stuff already so progress through this module is going to be fast. Originally I planned to have my Meta certificate by March this year, but at this rate I might have it by January. 

83/365: Form Props

 Today in the capstone project I separated the table booking component into two separate forms. All the state and API calls are handled by the Table component. This stateful data is passed as props down to the BookingForm component which then uses them to render accordingly. Next I need to add some client side validation to make sure the forms are properly filled out. I'll probably do this with the Formik library and a data schema with Yup. I've used both these libraries before and like them.

82/365: About Section

 Today I worked on the About section on the home page of the web app. Like the rest of the app I used CSS Grid to align the text to the left and the image to the right. For the mobile version, the CSS media query set the text to be central, and set the display property of the image to none. This hides the image and just shows the text on the phone screen. 

81/365: Hero Section

 The hero section of a website is an eye catching part of the homepage that drives the user towards a conversion. They often contain a bold title and an eye catching image. The hero section, also called a jumbotron, should be the first thing a user sees on the homepage. From here the user can directly proceed to a conversion, or they can scroll down and see more content. Of course the section must also be responsive on mobile and reformat itself appropriately to a variety of screen sizes. Today I spent some time working on the hero section for the capstone project of the Meta frontend class. 

80/365: Capstone Reformat

 I submitted my capstone project for Meta. It got a decent grade, but not enough to pass. The main issue is that my design did not fit with the Figma prototype. The colors and layout don't match the criteria so I have to redo it. This teaches me an important lesson that you can make a good web app but if its not what the stakeholders expect, it fails. Regardless, now that I have seen the rubric I look forward to spending next week reformatting the app so it can pass the second time around. 

79/365: Micro Frontends

 Today I listened to a podcast about the concept of micro frontends. This is a method where you segment your frontends as much as possible, Any type of global state should be avoided except for when absolutely necessary, like auth and themes. Micro frontends have pros and cons. When its time to update a part of the app, the team can act quickly and independently without having to work with multiple other people in a large monolithic repository. However, micro frontends adds complexity to the project. This methodology should only be implemented when it solves a specific problem in the application. 

78/365: MIME Types

 Today as I was working on the capstone project for my Meta course I got to the component involving a form to submit. In order to properly submit the form your app interacts with an API hosted on the GitHub account of Meta. The course instructs you to put script tags in your index.html file pointing to some JavaScript code that simulates a simple database. However, when I ran my app I got an error in the console that the resource was blocked due to a MIME type mismatch, and the loading of the script failed. What is MIME? This stands for Multipurpose Internet Mail Extensions and they indicate what type of data a file contains and how it should be treated by web browsers and servers. When a browser requests a file from a server, the server returns the file along with a MIME type, and the browser handles the file accordingly. Common MIME types today include "application/javascript" and "text/javascript". By specifying the type explicitly, the resource from GitHub was loaded without error. 

77/365: React Query

 API calls are often the worst pain point in making any kind of web app. React Query, now called TanStack Query, handles all kinds of things you need when interacting with a server. React Query also has an awesome set of dev tools that lets you see and analyze every API request, and even throttle a virtual internet connection to see how your app works on slow wifi. Combing this with Axios or the fetch method greatly empowers a dev when building an app with API requests. 

76/365: CSS Media Query Breakpoints

While working on the capstone app today I implemented a CSS media query into one of the components. This query modifies the grid layout and rearranges the item. On desktop view, the header is above the image with the image on the left, and text to the right. However on mobile view, the media query kicks in at a 600 pixel screen width breakpoint and realigns the items to put the header on top, the image under it, and the text under that. Using the virtual smartphone in the browser dev tools is a good way to visualize how your app or website will appear on a phone. 

75/365: Responsive Navbar

 Spent a bit of time today working on the navbar for the web app. The css :hover property is an easy way to improve the user experience of the navbar. When the user's mouse is over a menu item, the menu item is highlighted and changes color. Next is to use a CSS media query and Javascript to turn the full menu into a hamburger icon on mobile devices. 

74/365: Routing With Grid

 The design of my capstone app for this class has a nav bar on the top, the main content in the middle, and a footer at the bottom. The challenge is that the content in the middle is variable and depends on the route of the app. This was accomplished by defining grid column template areas with a Main section, and any content that routes to the main area of the app can be defined to this grid template area. It took me a while to understand how the routes interact with the layout, but I've begun to understand it now with the help of the developer tools. I need to find a good extension for Brave to visualize grid lines. 

73/365: Forms for Business

 Today I did some further improvement on the Jooma business website that I've been hired to work on. I removed unnecessary fields from the forms. The class from Meta taught that every additional field on your form decreases the likelihood that a customer will fill it out and complete the conversion. Therefor you want the least amount of fields possible. There was also a radio option to select from a few different choices in the form, but these did not provide any useful information for the business. I modified this so that every option became informative and could help the business better serve the customer. The Google Ads campaigns specified for these searches land directly on the relevant product pages, and each page has a form there waiting for the customer to convert. This has already increased conversions by a large percent, but I am waiting until enough time has passed to make a real analysis of the effect. 

72/365: React Router Deep Dive pt 2: Links

 React Router navigation is handled through the Link component. The Link replaces the old fashioned anchor tag and has a number of optional properties. One of them is the "replace" property, which changes the behaviour of the browsers back button. With this property the page is completely removed from the users history and a back will send the user back two links instead of one. This is useful for things like a login screen, where if a user logs in and then clicks the back arrow they should be sent back to the home page instead of back to the login screen. Another property is the reloadDocument property, which reloads the entire page like a traditional HTML anchor tag. The state property allows you to pass state data along your link which importantly is not in the apps URL. 

71/365: React Router Deep Dive Pt 1

 The React Router allows for routing capabilities in your single page React application. The REact Router DOM package has multiple types of routers including the MemoryRouter, HistoryRouter, and HashRouter. These all have specific uses, but the majority of web apps will be best served by the BrowserRouter. In the index.js file, the entire App component must be wrapped in the BrowserRouter like a context provider.  The routes of the router have to be specified between Routes tags, and Link tags are used to replace the old HTML anchor. I plan to learn more about the React Router as i continue working on this capstone project. 

70/365: Smart Contracts

 Smart contracts live on blockchains (or in this case, hashgraph) as pieces of code. One way to think of smart contracts is that they replace the middlemen of traditional finance. Unlike everything I've done with Hedera so far which was written in Javascript using the Hedera SDK Node package, smart contracts are written in Solidity. This Solidity file is then compiled into bytecode which can be uploaded to Hedera Hashgraph. One advantage of Hedera is that the gas price for executing a smart contract is much cheaper than on Ethereum. 

69/365: Atomic Swaps

 Today I learned about atomic swaps on Hedera Hashgraph. This allow two peers to exchange tokens between each other. There is no middleman and the transaction is decentralized; instead the two wallets transact directly with each other and the transaction is verified on the Hashgraph. Unlike other cryptos this does not require a smart contract and can be executed entirely with the tools in the Hedera SDK using only Javascript and NodeJS. These swaps are also highly customizable and transparent, meaning everyone can see where the funds are going and there's no need to trust any party. Tokens do not have to have monetary value and can represent things like voting rights, so the only limit to the abilities of the atomic swap is the imagination of the developer. Today I used an atomic swap to send a testnet NFT from one of my developer wallets to another wallet for a payment of 50 HBARs. 

68/365: Machine Learning!

 After taking a little break for New Years, today I got to work and got Stable Diffusion running on my computer. You pull the repository from GitHub, download a model file, and run it all with Python and PyTorch. The install had a few challenges, since the latest version of PyTorch for Windows does not support the newest version of Python, so I had to go find an older stable version. But then the paths were messed up in the environment files, so I had to go in there and point Stable Diffusion to the proper folders to find the Python.exe and all the resources it needed. Luckily all the error messages were helpful and descriptive. This has me interested in working with machine learning and AI which I see growing exponentially in 2023.