17/365: Pay Per Click

 Today I had a conference call with Google Ads consultants and learned quite a few interesting things about the industry. Unlike Search Engine Optimization, which brings traffic to a website organically, a Google Ads campaign bids for keywords so your website shows as result of a user's search. The campaign can be fine-tuned with all kinds of factors such as area, time of search, and customer demographic. This is the benefit of having a manually ran campaign by a Google Ads expert. Otherwise, you can pay for an automatic campaign from Google, but the keywords they chose to associate with your website are rarely optimal for your business. 

In order to obtain a truly effective ad campaign, one must first determine what constitutes a successful conversion on their website. A common example is a user filling out a contact form to get in touch with the business. The business is trying to maximize the number of qualified customers who fill out the form in order to increase their sales, hence this is defined as a conversion. A web developer can then go and add conversion tags to define a certain event as a conversion, such as hitting the "Submit" button on a contact form. Once defined, the campaign manager studies the Google Analytics for the business to learn which keywords are leading to the most conversions. He can then bid more advertising spend on those effective keywords, while spending less on ineffective keywords. This process is how a Google Ads campaign can be optimized with the data found through conversion tracking and Google Analytics. 

16/365: Fetching data

 Fetching data from other sources is critical for modern web development. Any complex web page certainly pulls information from multiple different APIs. This can be accomplished within react with the fetch() function which can get JSON objects from APIs that your frontend can use. A simple example in the Meta course was a web page that displayed the current price of Bitcoin taken from the coindesk API. Because getting the data will take time, it is a good practice to have some conditional rendering that tells the user that their data is loading, and then display the content once it is retrieved. 

15/365: Lists and Keys

Today in the Meta Frontend Course I learned about how to properly render lists in React. In React, items in a list of components should be given a unique key property. Why is this? The answer lies with how React creates a virtual DOM and compares it to the browser DOM. Whenever a re-render is triggered, React compares the virtual DOM to the browser DOM and changes as few things as possible in order to render the proper HTML. This is done to make the app fast and slick, and the comparison is done through what is known as the "diffing algorithm". By giving each component within the list a unique key, React can quickly compare the virtual and browser DOMs and execute the render efficiently. Without keys, list items will fall victim to unexpected behavior on a re-render.

14/365: Controlled Vs Uncontrolled Forms

 Forms are everywhere on the web. Whenever a website or an app needs information from a user, a form is used. Even this post right now is being submitted through a form. In React there are two kinds of forms: controlled and uncontrolled. 

Uncontrolled forms 

The uncontrolled form is simple, and is best use for basic inputs. Uncontrolled forms are submitted, and their value is read using the useRef hook, which retrieves whatever was inputted into the form upon submission. This is more analogues to a traditional HTML form. 

Controlled Forms

A controlled form, however, makes use of React state and the "value" prop along with an "onChange" callback function to listen to the form and dynamically update the state as information is typed. This is much more powerful and allows the developer to program whole suites of functionality into the app with forms. For example, I am sure you have used websites before where you sign up and you need to input a username, a password, and confirm the password. The submission button will be inactive unless all three fields are filled in properly, and the webpage will tell you when the passwords don't match. All this is possible because the values of the controlled components are being read and pushed into the state.

13/365 Complex State Data

 Today in the Meta course I learned more about state and the useState hook. In particular, this segment discussed how to handle complex data, like objects, in the state. With primitive data the provided setter method given by the useState function allows you to simply change the state. However, when your state contains an object, it is costly and inefficient to update the entire object. Instead, the best practice is to use the spread operator ( three dots like ...) to update only the needed value in the object. This is done by creating a copy of the object, changing the values as needed in the copy, and then setting the state object to your new object. This avoids many errors and unexpected behaviors that arise from updating your state object directly. 

12/365 React Context

 Today in the Meta Frontend Developer Course I learned about React Context. Context in React is a way of having props that are accessible everywhere in your app. This solves a problem known as "prop drilling" where you have to pass props through a long chain of parent and child components. Context eliminates the need for prop drilling and allows certain global props to be accessible everywhere. One of the common uses for context is for an app theme, like light and dark mode for example. This way when the theme prop is toggled, the context provides the prop to any component that needs it and they can render themselves accordingly. However, the best practice is to keep your context as lean as possible and only use it when it really makes sense for the app design.

11/365 XML

 Today I built an XML sitemap and submitted it to the Google Search Console for the business website at my work. The purpose of the XML site map is to give the Google crawler a map of your website and all its relevant pages. Google rewards websites that have well-made sitemaps and will show them higher on the results page. This process of building and designing a webpage so that Google or other search engines give it a high ranking is known as search engine optimization or SEO. SEO is a lucrative industry that I certaintly want to become an expert in!

9/365: Flexbox Froggy

I was listening to the JS Party podcast when one of the hosts mentioned a game that teaches you CSS Flexbox called Flexbox Froggy. I looked it up and played through it and learned a lot. By beating the challenges in the games you will have a good understanding of positioning content with flexbox after just an hour of playing. Try it yourself:

Flexbox Froggy - A game for learning CSS flexbox 

10/365 React!

 The HTML and CSS module is finished and the React module has begun. I’m excited to get deep into React and learn how to make real dynamic apps and websites. Just from the intro I can tell how powerful and useful React is and how much easier the framework makes it to create dynamic pages.

8/365 Box Shadows

 Had a busy day today and didn’t have too much time to work on the frontend developer grind. Still added a few box shadows to the homepage I’m building. Box shadows and text shadows truly make everything look better.

7/365 Art or Science?

 Today I worked on building a home page for an imaginary jewelry shop to finish the fourth module of the Meta Frontend Developer course. Going through this process, which is not quite finished yet, showed me how much front end development is about artistic skills and design just as much as it is technical skills and coding ability. Things like color schemes and spacing are critical for making a good looking app or website. More skills to learn!

6/365: Flexbox and Grids

 Continued the module today and learned more about CSS flex box, grids, and advanced selectors. The final assignment for the module is to design a home page for a business using semantic HTML and responsive CSS. By taking advantage of the power of modern CSS, a web page can be designed that dynamically adjusts itself to the size of the viewport and delivers a pleasant user experience on mobile or desktop.

5/365 Interactive CSS

 Today I worked on the 1st week of the 4th module of the Meta Frontend course, titled HTML and CSS in depth. This module went over things like advanced CSS selectors and keyframes animations. Trying to remember all the different symbols and CSS syntax has been a nightmare so far, so its no surprise to me people have built preprocessor scripting languages like SASS to make styling less of a headache.

4/365 Version Control 2

 Today i finished the Version Control module on the Meta Frontend Development Course. This involved lessons on Git and GitHub and commands like clone, pull, add, commit, and push. For the final assignment we made a fork of a Meta repository and submitted a pull request. The module also included lessons about developer interaction and how complex apps are designed in general. I enjoy this hands-on practice working directly with Github and it definitely teaches more than simply watching a video.

3/365: Version Control

 Finished up the JavaScript module of the Meta Frontend Developer course. Began module 3 on version control and git. Version control is critical for making and kind of complex software. Also, having good skills with Git makes you a valuable team member on any software development team.

2/365: Testing

 Today I completed week 4 of Meta’s javascript module in their frontend course, which was about testing. Meta in particular teaches the Jest framework which they made.

Software testing is a much deeper and more brain bending topic than I realized. The testing process is based around “expectations” which describe proper behavior for your code. This leads to test-driven development. Normally you have some requirement then you program a feature to satisfy it, then test the code once it is finished. But with the test-driven development framework your first step in to write a test that currently fails but will pass once the requirement is satisfied. Then you write the code until your test works. Any refactoring from that point onward is aided by the fact you have this testing framework to make sure everything continues to work as expected.

1/365: Paradigms

 Today I finished week 3 of the Meta Frontend Developer course. This went over the functional programming paradigm versus object oriented, and some nifty javascript syntax like the spread operator and destructuring. The module finished off with JSON.

This course from Meta is unlike any online class I’ve ever seen before. It’s so well produced, pro camerawork and animations and everything. It’s like a Netflix show. Excited to go through the whole thing.

Check it out here: Meta Front-End Developer Professional Certificate | Coursera