38/365: Navigation Best Practices

 There are two broad strategies to help the user know where they are and feel comfortable in your app. First is content strategy. Content strategy means to align your content in meaningful ways which promotes the products of your business. You consider prioritization, organization, presentation, and specifications. Information architecture means to group related information on your website in ways that make sense to a user. A restaurant website for example could have a Home, About, Menu, and Order Online pages. A common practice to achieve this is with a navigation bar at the top of every page on the website. This contributes to the users sense of place and helps them effectively navigate. In the world of web development, this navbar at the top of the site would be called the primary navigation. 

37/365: Rapid Prototyping

 When building a product, you need to insure that what you create works as intended. It also needs to be easy to use, and free of bugs. We can test this through the creation of a prototype. Digital designers adopted the rapid prototyping methodology from 3D modeling and manufacturing industries. The goal is to create a working model as quickly as possible, and to iteratively improve it to get closer to the desired product. Tools like Figma help achieve the speed of the process. The advantages of having a working prototype insures the stakeholders and team are all on the same page, and reduces miscommunication. Problems arise and can be fixed early. 

36/365: V8 Engine

 Speed is everything on the web. This constant pursuit of greater speed pushed Google to create their V8 Javascript engine. The V8 engine is a just in time (JIT) compiler. It constantly alternates between compiling the code and running it, and as it runs the code more it becomes more efficient with the compilation. This achieves a massive speed up in Javascript, but how does V8 achieve this? First the V8 parser reads the source code and creates an abstract syntax tree. Next, the interpreter named Ignition consumes the abstract syntax true to produce bytecode. This bytecode is ran, and as runtime information is collected as the code is recompiled. If as the code runs it is found certain functions are "hot", meaning they are being called frequently. these functions are passed to the optimizing compiler Turbofan. Turbofan them along with other information gathered at runtime to compile the Javascript to even faster machine code. This process also involves various "speculations" created by the compilers, which are tested in pursuit of the fastest bytecode. V8 itself is written in C++. 

35/365: Scroll Events

 The bonus challenge for this sample portfolio assignment was to animate the header so that it smoothy hides itself when you scroll down then comes back when you scroll up. A lot of web apps do this. In order to do that, the transform style prop of the header is rendered conditionally based on same statelike data that says if the user is scrolling up or down? How do we get such data? Other students and the instructors use a scroll event solution, where a listener is added to the window. Upon a scroll, the Y value of the scroll is extracted from the event object, and compared to the prior Y value to deduce arithmetically if the user scrolled up or down. I found a much simpler solution using the wheel event. These events have a property called deltaY which lets me simple see the change in Y from the scroll and determine directly if the scroll was up or down. This simplifies the code and reduces the amount of state required to get the desired UI. 

34/365: Formik and Yup

 I spent a few hours today working on the final assignment for the Advanced React module of Meta's course. I learned the most doing this assignment compared to any other because the instructions were so sparse, and I had to go through the documentation for Chakra UI, Formik, and Yup. Chakra UI is a UI library that I found quite intuitive and fun to work with. Formik is a form library for React that takes out 90% of the pain dealing with forms. Formik has a ton of useful methods and properties, for example the errors property of the formik object majorly streamlines validation.  Formik is seamlessly integrated with Yup which you use to provide a validation schema to your formik object. I found this very useful for visualizing the validation of the form and I can see the usefulness of such a strong validation schema on a complex enterprise app. All that's left is the bonus challenge of hiding the header when the user scrolls downward. I intend to implement that tomorrow. At this rate I could get the Meta certification before the end of the year. 

33/365: Figma

Figma is the golden standard for modern front end design. UX and UI designers create mockups and diagrams with Figma. The suite of tools is dazzling and any app you can possibly conceive of can be represented in Figma. The 7th module of the Meta course has many lessons devoted to learning the mystic arts of Figma. Even though I intend to be a front end developer, learning some Figma and principles of UI design will increase my value and make me a more well rounded engineer. Meta knew what they were doing when they designed their certification with a module on UI design.

32/365 : Designing Forms

 As I stated before, forms are among the most vital ways for users to interact with a website or app. How can they be designed well? One principle is to put the simple forms first, with more complex later. Ask a user for something simple like their name first,  then later get the address or credit card number. Once the user has put in their name, they feel committed and are more likely to compete the forms in its entirety. Furthermore, it is important to give the user an indicator of progress. When they know how many steps are required, and where they are in the process,  the forms become less intimidating and cumbersome. The Amazon checkout process masters this. Buying a product is a complicated process involving checking out the cart, submitting an address, choosing shipping, and entering a payment method. Imagine if all these forms were on a single page in one ugly block. Instead, the front-end, masters at Amazon have designed their checkout process so the whole thing feels smooth and easy despite the large amount of data required from the user. 

31/365: Google Account Reinstated

 My appeal was granted, and the Google Business Profile for my current job got reinstated. This appeal was an interesting process. After updating the business information, Google asks you to provide proof that your business is represented online in an accurate way that mirrors its physical presence in the real world. In order to prove this, I provided them with a utility bill and a business certificate that both verify the name of the business at the proper address. About a week after the documents were submitted, the business profile was reinstated. With full control of the profile I can once again do things like respond to customer reviews. 

30/365: React is Back

 Module 6 of the Meta Front End Developer course was fixed today. All the progress updated and the lab compiles. The final assignment for the React module is to complete a portfolio for a developer persona. At first I thought it was supposed to be for yourself, but the actual assignment is to complete a slick looking portfolio site for a hypothetical developer. The website utilizes Chakra UI for much of the visual design and icons. By leveraging a UI library like Charka or Material, a developer can build a professional looking website or app rapidly. Today I worked on the Header component with its social media links and icons. Building this portfolio will be good practice for when I build my own portfolio site with blog, and port all this content over there and redirect the domain. 

29/365: User Stories

 I decided to forge ahead past the broken 6th module in the Meta Frontend Developer course. Thankfully module seven appears to work fine, and its on the topic of User Experience design. The introductory section focused on the concept of empathy. A skilled designer must empathize with the users of the app or website in order to understand how to build whatever serves them best. One way to achieve this is with the user story. First you come up with a persona, which describes your modeled user with details like age, occupation, and tech literacy. From there, you imagine what this user needs from your app and how that need can be fulfilled in the best way. Once the user story is created, you have a focused goal of what needs to be modeled and implemented to make the story a reality.

As a tech enthusiast, I want to post about what I learn on my blog each day, so that I can track my progress for my goal of becoming a web developer.

28 / 365 : Linux setup

 Professional programmers prefer to use Linux. The open source nature of Linux grants it a high degree of security and reliability. Additionally, bash scripts provide the developer with a powerful automation tool. For this reasons I have decided to put a Linux distro on my new Vector Pro laptop from Maingear. I downloaded an ISO for Pop OS, and then used a free tool called balenaEtcher to create a bootable USB. With this USB I booted Linux on the laptop and was exploring the demo mode. However, the sound keyboard did not work. I used another tool called EaseUS Partition to repartition the USB and reformat it, then created a new boot drive with the Pop OS ISO built especially with NVIDIA drivers, since my laptop has a NVIDIA 3080 graphics card. This time the sound worked, but the keyboard still did not register! I know have a drive with Ubuntu on it, and will try to install this tomorrow. 

27: 365: New Laptop and RGB Game

 Today I bought a Vector Pro 17 inch laptop, along with a MSI 27 inch gaming monitor and a Maingear chair. I plan on installing Linux onto the new machine and was playing around with Pop OS tonight.

I have also been working on a simple React game where you guess the RGB value of a randomly generated color. The github for it is here: https://github.com/JayDav9/ColorPicker

26/365: Click Events

 With the Meta course still broken, I went out independently in search of something to learn. I found a video on the Web Dev Junkie youtube channel describing a interview challenge app for a junior React developer. The problem statement is as follows: a user can click anywhere on the page to create a circle, and there is an Undo button to remove the newest circle, as well as a Redo button to return that circle once removed. I went ahead and built my solution, pushing commits to GitHub and deploying it to Vercel once finished. Sidenote: having Vercel in your terminal is awesome. It is deployed here: https://click-event-jaydav9.vercel.app/

Making this app required the use of click events and state. The entire App div is listening for clicks, and once the user clicks the page the onClick method extracts the x and y coordinates of the click from the event object. These coordinates are added as an object to an array in state. This array is mapped in the return statement to render all the circles. Whenever the Undo button is clicked, the last object in the array is popped, and added to a second array in state. The Redo button then makes use of this array to access the coorindates of all the removed circles. 

25/365: RIP Meta?

 The Meta Frontend course has fallen apart around the sixth module. The sections don't complete even after doing everything and passing every quiz, and the final project won't load or deploy in their server. I don't know if this is related to the big layoffs happening at Meta right now, but after 5 great sections the 6th is broken. The forums are full of other frustrated students and I plan on contacting Coursera support about it tomorrow. Hopefully the class is fixed because the content itself is great and I do want that certificate.

24/365: Standing Desk & Ergonomic Setup

 I haven't been updating recently because hand pain has been preventing me from coding. I went ahead and bought a FlexiSpot standing desk on amazon, a Logitech vertical mouse, and an ergonomic keyboard from Microsoft. All together this was about 500 dollars. I also have my laptop elevated so I dont have to look down at the screen, and I intend to get a proper laptop stand with an external monitor for my programming desk. I hear this is a strategy a lot of developers use, they have a laptop tey can carry around and also connect to their home setup with extra monitors. With the new setup I can code a bunch with no pain and look forward to continuing to learn every day. 

23/365: Render Props

 Render props are another technique used to handle cross cutting concerns and build advanced applications. A render prop is a prop passed to a component that is a function which itself returns JSX. This allows for more composability and greater abstraction of code. Instead of modifying the underlying component itself, the developer can modify the render prop function to achieve the desired outcome in the application. Along with higher order components, render props are another powerful tool in the toolbox when building React applications. 

22/365: The Mighty Spread Operator

 The spread operator in modern JavaScript is basically magic. The spread operator can be performed on objects, arrays, and even strings. Copying and modifying objects are the main tasks a developer will use this operator for. Given some object MyObject, a copy can be created simply by typing {...MyObject}. New properties or new property values can be easily created by instantiating a new object, passing it the spread of your other object, and giving it a new property.  The spread operator can be used to create flexible and powerful components in React. By creating an object that contains all of your component props, you can simply pass a copy of the object with the spread operator into your component. This allows code to be more reusable, and you only have to modify or customize props as necessary. 

21/365: Cross Cutting Concerns

 Certain functionalities are universally required in apps. No matter what kind of app you're building there is a good chance it will need a way to handle user logins with permissions, logging, and error handling. These are known as cross cutting concerns. You may also find that two different components share a majority of their underlying logic. For example, a component that displays the number of people in a mailing list and a component that displays all the active orders for a business could be 80% the same under the hood. As we know, well designed programs do not repeat themselves. One way to extract this functionality is with a custom hook. The issue with the custom hook is that any component they are used in becomes stateful. This violates another principle of app design, that we want to keep our state as lean as possible with the minimum number of stateful component. The solution here is to use an advanced tool in React called a higher order component. The higher order component is a function that takes another component as its argument and returns another component with enhanced functionality. 

20/365: Suspended by Google

 I got an email this morning saying Google suspended my business profile because of suspicious activity. What the heck! Now I have to appeal the suspension and get the account reinstated. Oh well, more to learn!

19/365: Google Search Console

 Google Search Console is a powerful tool that allows you to see data about how people reach your site through Google. In order to gain access to the Search Console, Google first requires that you verify ownership of the domain in question. Today I verified ownership of a website and associated it with my Google account and learned about the process. There are multiple ways to do this, and I chose the preferred method of verification through a TXT string. Google gave me a unique TXT string, and I went to the hosting service for my website (in this case Namecheap) and added it as a new custom record in the Domain Name System in the website hosting backend. After some time, the domain was verified. Other options include pasting a small file into your websites folder or adding a <meta> tag in the head section of your websites HTML home page. 

With the domain verified, I was able to associate the Search Console with my existing Google Analytics property on the website. These two services combined yield an extremely powerful suite of information that can be used to optimize an ad campaign and drive more conversions on your website. I was honestly quite astonished by the tools available in my business suite for Google Analytics. They even have an interactive world map you can use to study how people around the globe interact with your site! Very cool stuff, and I intend to become knowledgeable in all these Google services by the end of the year.  

18/365: React Children

 In React, the content between an opening and closing tag is passed as a unique prop called children. For example when rendering <MyComponent> Hello World ! </MyComponent> , the text "Hello World!" is passed as children to the component. The children can be simple text passed as a string, JavaScript expressions, more complex functions, or other JSX components. I look forward to learning more aobut children in React tomorrow.