Understanding Depth in AI/ML

In machine learning, a model’s depth refers to the number of layers between its input and output (often called hidden layers). These layers are part of the model’s architecture and play a crucial role in how it processes data and learns patterns.

Shallow Models

A shallow model typically consists of one or a few layers:

1. Linear Regression and Logistic Regression: These are single-layer models with no hidden layers

2. Support Vector Machines (SVMs): These rely on kernel tricks rather than layered architectures

3. Single-Layer Neural Networks: Sometimes called perceptrons, these models have only one hidden layer

Shallow models work well for simpler problems or datasets with a limited number of features but struggle with complex data where intricate patterns must be learned.

Deep Models

Deep models, on the other hand, consist of multiple layers that work together in a series. Each neuron in a layer performs a transformation on the input, and the model learns hierarchical representations of the data.

• Input Layer: Receives raw data (e.g., pixel values of an image).

• Hidden Layers: Intermediate layers extract increasingly abstract features.

• Output Layer: Produces predictions or classifications.

Here’s a visual representation:

In the image above, each circle represents a neuron. Each neuron does some mathematical operation/transformation on the data it receives. Each vertical rectangle represents a layer. A singular layer can be composed of any number of neurons. There are also arrows between each neuron as each neuron completes a transformation and passes the data on to the next layer.

A "deep" model might have dozens or even hundreds of hidden layers, enabling it to capture intricate, multi-level features. Examples include deep convolutional networks for image processing and recurrent networks for sequential data like text or time series.

Advantages of Depth

Depth allows models to:

1. Learn Hierarchical Features:

   • In an image recognition task, the first layer might detect edges, the second layer might identify shapes, and deeper layers might recognize objects.

2. Model Complex Relationships:

   • Deep architectures can learn highly nonlinear mappings, making them suitable for tasks like natural language processing or speech recognition.

3. Parameter Sharing:

   • In models like convolutional neural networks (CNNs), parameters (e.g., weights) are shared across layers, reducing redundancy and improving generalization.

4. End-to-End Learning:

   • Deep models can handle raw data inputs, eliminating the need for extensive feature engineering.

Challenges of Depth

While deep models offer significant advantages, they are not without challenges:

1. Computational Costs

   • Training deep models requires significant computational resources, often involving GPUs or TPUs.

   • Deeper models have more parameters, leading to increased memory usage and longer training times.

2. Overfitting

   • The large capacity of deep models can lead them to memorize training data instead of generalizing from it.

   • Techniques like dropout, L1/L2 regularization, and early stopping are used to mitigate overfitting.

3. Vanishing and Exploding Gradients

   • In very deep networks, gradients can become extremely small (vanishing) or large (exploding), making training unstable.

   • Features like ReLU (Rectified Linear Unit) activation functions and batch normalization help alleviate these issues.

4. Data Requirements

   • Deep models require large volumes of labeled data to learn effectively. Techniques like transfer learning and data augmentation can help in cases where data is limited.

Key Innovations Driving Depth

The rise of deep learning is largely due to several breakthroughs:

1. ReLU Activation Function: Simplified training by addressing vanishing gradients.

2. Dropout Regularization: Reduced overfitting by randomly deactivating neurons during training.

3. Batch Normalization: Stabilized training and allowed for faster convergence.

4. Transfer Learning: Enabled the reuse of pre-trained models, reducing the need for massive datasets.

5. Advances in Hardware: GPUs and TPUs have made it feasible to train large, deep networks efficiently.

Applications of Deep Models

Deep models have become the foundation for many cutting-edge applications:

• Computer Vision: Image classification, object detection, and facial recognition.

• Natural Language Processing: Machine translation, sentiment analysis, and chatbots.

• Reinforcement Learning: Autonomous vehicles, and game-playing agents.

• Healthcare: Disease diagnosis from medical imaging, and personalized treatment plans.

• Generative Models: Image and text generation, and deepfake creation.

Conclusion

A "deep" model in AI/ML refers to architectures with multiple layers, enabling them to learn complex patterns from data. While depth provides great processing and capabilities, it also comes with challenges such as computational costs and the need for large datasets. Nevertheless, deep learning continues to be the core of revolutionizing technologies and services.

What is MACH Architecture?

MACH is an architectural approach designed for organizations aiming to build flexible, scalable, and efficient digital systems. Unlike monolithic architectures that bundle the frontend and backend functionalities into a single application, MACH promotes modularity and composability, allowing businesses to select and integrate the solutions tailored to their needs.

Breaking Down MACH

1. Microservices

   • Independent, modular services that handle smaller, more specific functions.

   • Each microservice is self-contained and can be updated, scaled, or replaced without affecting other components.

2. API-first

   • APIs allow for seamless and easy communication between the backend and the frontend.

   • API-first ensures APIs are put at the forefront of development, are robust, and have good and developer-friendly documentation

3. Cloud-native

   • Built to use the cloud from the ground up.

   • Being entirely on the cloud instead of the singular or few servers common in monolithic architectures allows MACH architectures to automatically scale and handle dynamic workloads in real-time, allowing for much better cost efficiency.

4. Headless

   • Decoupling the frontend from the backend gives more flexibility in designing both sides, especially the frontend.

   • With a decoupled backend, the frontend can easily be more than just one application and leverage the singular, scaling backend (ex. a website and a mobile app using the same backend services)

Core Benefits of MACH

1. Flexibility and Agility

   • Due to being modular and focused on components and microservices, MACH allows for more quick updates to the individual components while maintaining a seamless UI/UX and not disrupting other parts of the backend. This allows for agile changes according to company needs or market demands.

2. Scalability

   • Being centered on the cloud and its emphasis on being cloud-native, microservices and modules used in MACH can be easily managed while also staying separate, allowing for dynamic scaling on an individual basis for each microservice; overall reducing costs and resources.

3. Future-Ready Technology

   • As mentioned previously, MACH encourages a composable/modular approach, allowing for businesses to easily swap out existing microservices to the cutting-edge without having to completely overhaul their infrastructure.

4. Improved Development Speeds

   • The API-first development that comes with MACH accelerates the integration and deployment of the various microservices and components, enabling faster rollouts of new features, fixes, and functionalities.

5. Enhanced UX

   • Due to having the backend and the frontend separated, the culmination of both can be done separately by different, specialized teams that can craft an improved UX across different devices and interfaces.

Comparison of MACH to Traditional Architectures

Use Cases of MACH Architecture

MACH architecture is versatile and has been successfully implemented across industries:

• Retail: Personalize customer experiences and scale to handle high traffic during sales events.

• Finance: Deliver secure, scalable online banking solutions and technologies.

• Healthcare: Create patient portals and manage sensitive data efficiently and securely.

• Media: Enable rapid content updates and seamless streaming services.

CDM & CMS Systems with MACH

A key area where MACH architecture excels is in the integration of Content Delivery and Management (CDM) and Content Management Systems (CMS). These systems are central to delivering dynamic, personalized content across various interfaces and devices.

Traditional vs. MACH-Enabled CMS

• Traditional CMS: Often combines the frontend and backend in a monolithic system, making updates and scaling cumbersome and inefficient.

• MACH-Enabled CMS: Decouples content management from the delivery, enabling greater flexibility and control.

Advantages of MACH in CDM & CMS

1. Multifaceted Delivery: Content can be delivered seamlessly across web, mobile, IoT, and other platforms.

2. Faster Content Updates: Headless CMS solutions allow updates to be pushed without impacting the frontend.

3. Personalization at Scale: APIs can be leveraged to integrate personalization tools, delivering tailored and enhanced UX.

4. Improved Collaboration: Teams can work simultaneously on content creation/design and delivery/development without bottlenecks and waiting on one another.

Examples of MACH-Ready CMS Tools

• Contentful: A headless CMS designed for API-first integration.

• Strapi: Open-source and customizable for varied use cases.

• Sanity: Provides real-time collaboration and flexible data modeling.

Conclusion

MACH architecture represents a shift in how digital systems are built and maintained. By embracing its principles, businesses can unlock new levels of innovation, scalability, and customer satisfaction. MACH provides the foundation for creating digital experiences that are not only powerful but also future-proof.

Why Learn Web Dev?

Hundreds of billions or trillions of resources are accessible on the internet, ones we all use daily — from helpful articles online to entertainment on streaming services. The medium of all this content exchange is websites.

Web developers play a critical role in shaping the online experience by building and maintaining websites and applications that allow nearly anyone to access a variety of resources and information easily and efficiently.

Learning Web Dev, even in the world of AI, allows you to:

• Create your own personal or business websites

• Build web applications that solve real-world challenges and crises

• Explore high-demand career opportunities in Computer Science and other related fields

• Contribute to meaningful or interesting open-source projects

The Basics: A Trio

At the core of website development are three technologies: HTML, CSS, and JavaScript. No matter what advanced framework or technology someone or company uses, at some point all that code must be put into HTML, CSS, and JavaScript as those are the fundamental languages that browsers (like Google Chrome, Microsoft Edge, Apple Safari, etc.) know and can interpret.

Let’s dive into the fundamental trio:

1. HyperText Markup Language (HTML)

   • HTML defines the basic structure (or markup) of a page

   • Ex. Headers, Footers, Paragraphs, Links, Images, etc.

2. Cascading Style Sheets (CSS)

   • Adds style and design on top of HTML

   • Ex. Changing colors, fonts, layouts, etc.

3. JavaScript (JS)

   • Adds interactivity and dynamic behavior to your site

   • Ex. Form validation, Authentication, Interactive menus, etc.

Resources to Learn

There are many resources (videos, websites, articles, etc.) available online to teach HTML, CSS, and JavaScript in-depth. If you are truly interested in Web Development, learning these three languages is an absolute must, even with the numerous other frameworks and technologies in 2025.

Here are a couple of resources I found/used (I am not endorsed, sponsored, or affiliated with these in any way)

1. freeCodeCamp:

   • HTML Video: https://www.youtube.com/watch?v=kUMe1FH4CHE

   • CSS Video: https://www.youtube.com/watch?v=OXGznpKZ_sA

   • JS Video: https://www.youtube.com/watch?v=PkZNo7MFNFg

2. W3Schools:

   • HTML Website: https://www.w3schools.com/html/

   • CSS Website: https://www.w3schools.com/css/

   • JS Website: https://www.w3schools.com/js/

Choosing Your Tools

When developing in HTML, CSS, and JavaScript, I recommend the following tools: (again, I am not endorsed, sponsored, or affiliated with these in any way)

1. Text Editor: Visual Studio Code (VS Code)

   • Website: https://code.visualstudio.com/

2. In VS Code: The Live Server extension for easily viewing code changes in real time

   • Live Server: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

3. Browser: Google Chrome, Microsoft Edge, or Mozilla Firefox for their excellent debugging tools

   • Google Chrome: https://www.google.com/chrome/

   • Microsoft Edge: https://www.microsoft.com/en-us/edge

   • Mozilla Firefox: https://www.mozilla.org/en-US/firefox/new/

Frontend vs. Backend Development

Before this guide proceeds on about Web Dev, it’s important to understand the basics of frontend vs backend development.

Frontend Development

Frontend development focuses on the part of a website that users interact with directly. It involves creating the visual elements and ensuring an engaging user experience. Key aspects include:

• User Interface (UI): Designing layouts, buttons, and navigation

• Responsive Design: Making websites adaptable to various devices

• Interactivity: Using JavaScript to handle events like clicks or form submissions

Backend Development

Backend development involves the server-side logic and functionality that support the frontend. It ensures data is processed, stored, and retrieved correctly. Key aspects include:

• Databases: Storing and managing data

• Server Logic: Handling requests and sending appropriate responses

• Authentication: Verifying user identities securely

Collaboration Between Frontend and Backend

Frontend and backend developers often work closely to build a cohesive application. APIs (Application Programming Interfaces) — a more advanced topic — serve as the bridge between the frontend and backend, enabling smooth communication and data exchange.

Modern Frontend Development

On top of the existing foundations of HTML, CSS, and JavaScript exist newer and more modern ideas and concepts that exist to further enhance UX (User Experience).

Responsive Design

As phones and other non-computer devices gain popularity, ensuring your website looks good and has good UX (User Experience) across all screen sizes is essential. The main way to keep or improve UX on varying devices is via CSS. Some useful things to learn are:

• Media Queries: CSS rules for different screen sizes (@media in CSS)

• Container Queries: Similar to Media Queries, but based on the size of elements instead of the screen size (@container in CSS)

• Flex/Flexbox and Grid: Layout systems for responsive design (display: flex; and display: grid; in CSS)

ES6 JavaScript Enhancements

Modern JS provides many amazing utilities and functionalities for you to utilize, such as:

• Arrow Functions: Simplifies the typical function syntax

• Promises & Async/Await: Handle asynchronous tasks better (ex. database fetching or API calls)

• Modules: Organize your code into more reusable chunks

Frontend Frameworks

There are several web development-related frontend frameworks that can help you streamline the process (these are meant to help you later on, not replace learning HTML, CSS, and JS!). Some of these include:

• React: A popular library (developed at Meta/Facebook!) for making UIs (User Interfaces)

• Vue: A beginner-friendly library; similar to React

• Angular: A comprehensive framework (developed at Google!) for large applications

Basics of Backend Development

What is it?

The backend manages server-side operations like data storage, user authentication, and business logic. It serves as the unseen powerhouse that ensures websites and applications function smoothly. Key technologies include:

• Node.js: A runtime environment that allows JavaScript to be executed on the server side, making it a versatile tool for full-stack developers

  • Typically, plain JavaScript will be run by the user’s browser, meaning all plain JS will be run client-side. More sensitive operations that shouldn’t be fully exposed to the user yet should still impact the user in some way is where a server comes in.

• Express.js: A minimal framework for building APIs, simplifying routing and much more

• Databases (DBs): Systems like MySQL, PostgreSQL, MongoDB, and other DBs store and manage the data that powers applications

Frontend Communication

As mentioned earlier, the frontend is the client-side (what the user sees) and the backend is the server(s). These two systems need to work together to create a cohesive application, yet you may notice they happen on completely different hardware. So how does the backend (server) communicate to the frontend (client)?

Most of the time, the frontend and backend communicate via APIs (usually RESTful APIs).

To learn more about APIs, you can read my blog about them.

Full-Stack Development

Full-stack development is when you manage the frontend and the backend to run one application.

Popular Full-Stack Dev Tools:

• MERN Stack

  • “MERN” stands for MongoDB, Express, React, and Node.js

• Next.js: A React-based framework for building server-rendered apps

• Django: A Python-based framework for web development

Version Control Software (VCS)

Throughout any coding project (be it in web development or not), it is very important to track changes, especially in a collaborative environment. Software and tools that keep track of changes in files are called version control software (VCS). For this, Git and GitHub are very popular (currently owned by Microsoft!).

Deployment

Once your website or project is ready, you can share it with the world via many different routes.

Here are some deployment technologies that let you share your web dev creations!:

• GitHub Pages: A hosting service provided by GitHub that allows you to host a static website from a GitHub repository

  • Static just means that it doesn’t use a backend and is typically written in unchanging files (ex. HTML, CSS, and JS trio).

• Netlify: Similar to GitHub Pages and is good with static sites

• Vercel: A great hosting service, especially for React and Next.js (it can also link to GitHub)

• Render: A very flexible platform that can host both frontend, backend, and full-stack applications

Tips for Success

• Start Small: Build simple projects to reinforce your learning

• Practice & Code Consistently: Coding consistently helps solidify concepts

• Explore Resources: Use free and paid tutorials, such as W3Schools, MDN Web Docs, and YouTube channels (other resources shared above!).

Conclusion

Website development is a journey that combines creativity and technical skills. By mastering the basics, exploring modern tools, and deploying your projects, you’ll be well on your way to becoming a web developer in 2025. Remember, the key is to keep learning, experimenting, and building.

Happy coding!

The majority of people have utilized streaming services like Disney Plus, Netflix, and YouTube. These services use a recommendation system to keep you on their website and amused. This algorithm uses the content you've recently watched to propose similar content that could be of interest to you. These algorithms for content recommendations are frequently reinforcement learning models.

Vocabulary Words

Before we continue, I think it will benefit us all to learn some essential reinforcement learning vocabulary words.

• Agent: The reinforcement learning model that is making the decisions

• Environment: The external system/area that the agent is getting its data from

• Reward: The human feedback from the environment

• State: The environment at a specific time (kind of like one picture frame of a video).

• Action: The response of the agent to a state using its policy

• Policy: Maps an observation to an action, basically how the model converts a human action to its response

• (Q-Learning term) Q-Table: A table that maps actions to states/observations, this will help the agent determine what the best action to do for a given state.

What is Reinforcement Learning?

Reinforcement Learning is a type of machine learning that tries to maximize receiving a reward by leveraging information from its environment. In streaming services, the agent aims to increase customer engagement. When you are asked to rate your experience with something on YouTube, it typically appears in a popup that looks like this:

With a popup similar to the one above, you might tell YouTube's recommendation algorithm that you didn't like a video or didn't think it was worth watching. This information would likely be added to your state. Consequently, the recommendation engine would be less likely to suggest items that you would enjoy. Contrarily, giving a movie or experience positive comments would encourage the model to show you more of that kind of content (and result in a better reward for the agent).

An Example of Reinforcement Learning

Let's say we're trying to build a Reinforcement learning model that aims to recommend videos of interest to users that they will watch for as long as possible (to increase user engagement times).

In this example, the state for each user will consist of the video they may be watching right now, and previous videos to demonstrate their interests (I only added the most recent two videos for convenience). However, the state may be affected by many additional variables in more complicated circumstances, such as location, language, weather, and time of day.

The reward for this could be a variety of things, but in this example, it will be determined by how many minutes of a recommended video a user watches divided by the total number of minutes in the video (minutes watched by the user / total minutes in the video), with a decimal value ranging from 0 to 1. In this case, the reward for watching 100% of the movie would be 1, 0.5 for watching 50% of the video, 0.25 for watching 25% of the film, etc. A chart with various examples of user states and rewards is shown below.

People who aren't recommended the videos they usually watch are likely to lose interest in the recommended videos quickly. To maintain user interest, it is crucial for these content recommendation bots to suggest to the user what they want. Users 1 and 2 were provided with videos that were obviously unrelated to their interests, as shown in the chart above (humans can easily determine their interests based on their watch history).

There are a few modifications that might be made to this system to make it more sophisticated, one of which is to give rewards weights (weighted rewards). In the given case, this involves rewarding the agent more generously the longer a user views the recommended video. However, if the video is of the user's interest, then the reward should also be increased. In this manner, the agent is more likely to suggest videos that the user will find interesting. Some readers may be wondering how a non-human AI could tell the topic of a video. How a non-human AI could identify the content of a video may be a mystery to some readers. Sentiment Analysis is a tool used in Natural Language Processing (NLP) that can extract thoughts, feelings, and opinions from text, but we won't discuss that in this post because it is a totally different topic. Returning to the topic of weighted rewards, the table shown above allows us to monitor the user's interest (see an example of this table below). We can check to see if the title and description of the video the user is watching are related to their interest(s) before deciding what to reward the agent for the user's watch time. Additionally, it means that the agent will be given additional consequences for suggesting a video that is unrelated to the user's interests.

How the Agent Maximizes its Reward

There is one significant question I have not addressed yet. Which is how does the agent maximize its reward? In our example, the agent would receive some feedback from the user (such as watch time, likes and dislikes, star ratings, or ratings from a popup) and "re-train" itself (correct its decision-making policy) to take into account said feedback in future actions. In doing so, it iteratively gets better and improves its policy. Improvements to an agent's policy would look something like this:

• Iteration 0: Recommend trending videos on the platform (To User X)

• Iteration 1: Recommend Minecraft videos (To User X)

• Iteration 2: Recommend Minecraft Survival videos (To User X)

• Iteration 3: Recommend Minecraft Survival PvP videos (To User X)

It repeats this cycle with a large number of users, and with time the policy begins to get better and better, eventually producing a content recommendation agent that amuses the users fairly effectively.

Another Example of How the Agent Maximizes its Reward

To make it easier to highlight iteratively improving an agent's policy, here's another example:

Consider creating a reinforcement learning model to move through a game without hitting any obstacles. The agent must navigate its way from a starting room to a finishing room. Moving forward, backward, left, and right are the possible actions in each state, which can be thought of as a room. If the agent encounters an obstacle, it receives a reward of -1; and if it beats the level, it receives a reward of 1. Additionally, all other transitions (events) would not be scored or would receive a little negative score, such as -0.01, because the only thing we want this agent to avoid colliding with is obstacles.

The first time the agent plays through the game, it would have a random policy that would cause it to lose with a reward of -1. However, over time, as the agent plays the game as explores its environment and the rewards that result from certain actions in certain states, it will develop a policy that can beat the game pretty well!

Q-Learning

Let's take a look at one of the most popular Reinforcement Learning algorithms called Q-Learning. Policy iteration is how Q-Learning functions. It operates on a table with dimensions equal to the number of potential states (rows) and actions (columns). If we attempted to apply Q-Learning in the example above, we would have a table with the number of rooms (the number of states) x the 4 (the number of actions.

The agent's Q-Table will initially contain just random integers, often 0s, as it has no way of understanding what the best action is in any given state. The agent will then do random actions and log its reward in the Q-Table. Later, when the agent is selecting which action to take, it will look at the Q-Table to see which action produced the best results for the state it is in at the time.

Q-Learning agents typically follow a formula similar to this:

$$Q^{new}(s_t, a_t) ← (1 - α) ⋅ Q(s_t, a_t) + α\left(r_t + γ ⋅ maxQ\left(s_{t+1},a \right) \right)$$

I will explain the different letters you see in the formula above.

$$Q \text { means the Q-table}$$

$$_t \text { means at that specific time}$$

$$s \text { means state}$$

$$a \text { (the English letter) means action}$$

$$r \text { means reward}$$

$$\gamma \text { means the discount factor (how much weight a reward carries)}$$

$$\alpha \text { (alpha, the Greek letter) means the learning rate}$$

Implementing Q-Learning!

I am unable to implement a full content recommendation system because it is a highly complex task. Instead, I'll be creating a very basic Q-Learning agent that can be used with the game "Frozen Lake" through the Python package "Gymnasium" (formerly known as "Gym"). The code will be shared step-by-step in this article, and for those who wish to execute or alter it, the Python (.py) and Jupyter file (.ipynb) downloads will be provided at the end.

Importing the Necessary Libraries

For our program to work, it is going to need some Python libraries, which will be imported in the code block below.

The libraries we are going to import are Numpy and Gymnasium (explained below).

• Numpy is a very popular Python library that is used in a lot of situations. It is mainly used for its amazing scientific computational abilities on arrays. In this notebook, it will be used to maintain the Q-Table.

• Gymnasium (which will be referred to as "Gym" for the duration of this article) is a Python library made by OpenAI (the company behind ChatGPT) that has many environments for training Reinforcement Learning models (such as this one).

# Bash command to install the libraries
!pip install numpy
!pip install gymnasium[toy-text] # The Frozen Lake game is classified as a "Toy Text" game in Gym
# If you are using the Python file please open your terminal and type in the commands above without the "!"

# Python code to import the libraries we will use later
import numpy as np
import gymnasium as gym

Setting Up the Gymnasium Environment

A reinforcement learning model needs to train itself. In this case, it has to train itself by playing the Frozen Lake game. In the code block below, we will be using OpenAI's Gym Python library to set up and "run" the Frozen Lake game.

# Make the environment
env = gym.make("FrozenLake-v1", map_name="4x4", render_mode="ansi", is_slippery=False)

# Reset the environment to get a observation
observation, info = env.reset()

# Printing the state
# When the observation is printed, you will see that we recieve the number 0 like mentioned above
print(observation)

Output: 0

In this game, there are four actions for our agent to do.

1. Move the character up

2. Move the character down

3. Move the character left

4. Move the character right

Every time we do an action in the environment, we will receive five pieces of information from the environment (since every action we take changes the state of the environment, we need to know the current state of the environment).

1. next_state: An observation from the environment also known as the state (explained more below)

2. reward: The reward the agent should receive from the action

3. terminated: A true/false (boolean) value that shows whether or not the environment has been terminated

4. truncated: A true/false (boolean) value that shows whether or not the game has been truncated (ended early), this usually happens because of a time limit.

5. info: A dictionary (a collection of key-value pairs) that may contain additional information about the environment.
   Of these five returned values, the first four will be the most useful to us.

We will receive an observation that consists of a single digit representing the player's position. The observation we get follows this formula: current_row * nrows + current_column. At the start, we will spawn in at row 0, col 0. Meaning our state will be 0 (the rows and cols are 0-indexed).

The reward the agent can be given for any action is 0 (for reaching a frozen lake square or reaching a hole) or 1 (reaching the goal square).

We can also render the game in ANSI, as seen below.

print(env.render())
# S is the starting point
# G is the goal
# H's are holes
# F's are the Frozen lake
# The letter with a red/pink background is the character's current position

Output:

SFFF
FHFH
FFFH
HFFG
# (in the output above the "S" has a pink background)

Moving on, we can now select a random action from the pool of possible actions (called the action space) and see what data we get in response:

# Now we will take a random action in the environment and see what we get in response

# Selecting a random action
action = env.action_space.sample()

# Executing that random action in the environment
observation, reward, terminated, truncated, info = env.step(action)

print(f"Observation: {observation}")
print(f"Reward: {reward}")
print(f"Environment Terminated?: {terminated}")
print(f"Environment Truncated?: {truncated}")

# Render the game
print("\n" + env.render())

# The character moving on it's own is simply random, next we will implement a RL model to make it play better!

Output:

Observation: 1
Reward: 0.0
Environment Terminated?: False
Environment Truncated?: False

  (Up)
SFFF
FHFH
FFFH
HFFG
# (in the output above the "F" to the right of the "S" has a pink background)

By the way, here is how the Frozen Lake game is pictured on the Gymnasium website for those of us who learn best visually:

Creating the Q-Learning Agent

Next, we will implement Q-Learning, a popular Reinforcement Learning algorithm, along with the Epsilon Greedy Policy. The Epsilon Greedy Policy is what selects a random action for our agent (you'll see this soon).

Our Q-Table will initially be defined with only 0s; the agent will eventually replace these values.

# Initialize our Q-Table to all 0 values (the RL agent bases it's decisions off of this table and updates it in training)
QTable = np.zeros((env.observation_space.n, env.action_space.n))

Next, we'll declare the Epsilon Greedy Policy function.

# Greedy Epsilon Function, this is what determines what action we will take
def greedyEpsilon(Qtable, state, epsilon):
  num = np.random.rand()
  if (num < epsilon):
    action = env.action_space.sample()
  else:
    action = np.argmax(Qtable[state])
  return action

Then, to train our agent, we can declare and invoke another function.

# Now we will train our agent (this might take a few minutes)
def train(env, QTable, numOfEpisodes, learningRate, discountFactor, startingEpsilon, finalEpsilon, decayRate, maxSteps):
  for i in range(numOfEpisodes):
    # Decaying Epsilon so that we get more exploitation than exploration (over time)
    epsilon = startingEpsilon + (finalEpsilon - startingEpsilon) * np.exp(-decayRate * i)

    # Reset the environment and get an observation
    currentState = env.reset()
    currentState = currentState[0]

    for j in range(maxSteps):
      # Determine what action to take with the Greedy Epsilon function
      action = greedyEpsilon(QTable, currentState, epsilon)

      # Retrieve important info from environment and apply our action in the environment
      newState, reward, terminated, truncated, info = env.step(action)

      # Update the Q Table to reflect what the agent has learned
      QTable[currentState][action] = (1 - learningRate) * QTable[currentState][action] + learningRate * (reward + discountFactor * np.max(QTable[newState]))

      # If the game is terminated or truncated, finish this session (this "session" is often called an "episode")
      if (terminated or truncated):
        break

      # Update the state we were basing everything off of, to the new state
      currentState = newState
  return QTable

train(env, QTable, 10000, 0.5, 0.97, 0.01, 1, 0.0005, 10000)

As a result of this function, this is how the Q-Table looks.

array([[0.832972  , 0.85873403, 0.85873403, 0.832972  ],
       [0.832972  , 0.        , 0.88529281, 0.85873403],
       [0.85873403, 0.912673  , 0.85873403, 0.88529281],
       [0.88529281, 0.        , 0.85874801, 0.85873689],
       [0.85873403, 0.88529281, 0.        , 0.832972  ],
       [0.        , 0.        , 0.        , 0.        ],
       [0.        , 0.9409    , 0.        , 0.88529281],
       [0.        , 0.        , 0.        , 0.        ],
       [0.88529281, 0.        , 0.912673  , 0.85873403],
       [0.88529281, 0.9409    , 0.9409    , 0.        ],
       [0.912673  , 0.97      , 0.        , 0.912673  ],
       [0.        , 0.        , 0.        , 0.        ],
       [0.        , 0.        , 0.        , 0.        ],
       [0.        , 0.9409    , 0.97      , 0.912673  ],
       [0.9409    , 0.97      , 1.        , 0.9409    ],
       [0.        , 0.        , 0.        , 0.        ]])

Now for the moment of truth. Evaluating our agent to see how good it is at playing Frozen Lake.

# Lets see how well our agent performs when playing the game

# Variables
numOfWins = 0
numOfLosses = 0
for i in range(100):
  # Get the current state/observation
  state = env.reset()
  state = state[0]
  for j in range(1000):
    # Get the action from the QTable with the highest reward
    action = np.argmax(QTable[state][:])

    # Retrieve important info from environment and apply our action in the environment
    newState, reward, terminated, truncated, info = env.step(action)

    # If the reward equals 1 (we got to the goal) add one to the number of wins
    # Else add one to the number of losses
    if (reward == 1):
      numOfWins += 1
    else:
      numOfLosses += 1

    # If the game is terminated or truncated, finish this session (this "session" is often called an "episode")
    if (terminated or truncated):
        break

    # Update the state we were basing everything off of, to the new state
    state = newState

print(f"Number of wins: {numOfWins}")
print(f"Number of losses: {numOfLosses}")

And as a result, we get... *drum roll please***

Number of wins: 100
Number of losses: 500

Ouch...

Conclusion

As it is evident from the evaluation above (100 wins and 500 losses), our agent is not very effective. That is probably because I just trained it for a short period of time—about two minutes. A reinforcement learning agent gets better with more training because it has more time to play through scenarios and understand the environment. However, Google Colab probably doesn't have resources to let me train a reinforcement agent for a long period of time. I want to thank you for reading this post. I hoped this was interesting and that you learned something new about RLHF (reinforcement learning with human feedback) and Q-Learning!

Download

You can download a Python file (.py) or a Jupyter file (.ipynb) file if you want to run or modify this code. I strongly advise utilizing the Jupyter file because it divides the code into more legible pieces and has less print statements per block, making the output easier to understand.

To download either one please visit: https://github.com/devsai9/hashnode-downloads/tree/main/rlhf-and-qlearning-7-25-2023

Jupyter file: https://github.com/devsai9/hashnode-downloads/blob/main/rlhf-and-qlearning-7-25-2023/blog-rlhf-ipynbfile.ipynb

Python file: https://github.com/devsai9/hashnode-downloads/blob/main/rlhf-and-qlearning-7-25-2023/blog-rlhf-pyfile.py

I recently attempted to create a simple chat application to explore Firebase's capabilities. The free tier was not what I had anticipated...

What is Firebase?

Google's BaaS (Backend as a Service) product is called Firebase. It contains several helpful services for which developers frequently need to create a lot of code. For instance, you only need a few lines of JavaScript to implement User Authentication (Sign in with Google, Email/Password, Anonymous, etc.)! It offers a wide variety of additional services, including Firestore & Realtime Database (databases), Storage (user content storage), Hosting, Cloud Functions, Machine Learning, and much more.

My Experiences

Note: Firebase has two plans, a free tier (Spark Plan) and a pay-as-you-go tier (Blaze Plan). I used their free tier, and that is what I am basing this blog on. You can look at the plans here.

Limitations

I used Firebase's free tier rather than the Firebase Blaze plan, as was previously noted. It's the most generous plan I've ever come across. You receive 20,000 writes and deletes per day and 50,000 reads per day using the Firebase Firestore Database. With Firebase Authentication, you can choose to use any of the following methods for free, Email/Password, Anonymous, Sign in with Google, Facebook, Google Play Games, Apple, Apple Game Center, GitHub, Microsoft, Twitter, and Yahoo. You are also allowed 50,000 monthly active users! All-in-all I did not consider the free tier to be limiting in any way.

Security

Firebase has a lot of different security features. For instance, if Firebase Authentication is configured, you can use Firebase Firestore Security Rules to verify a User's credentials and the data to which they have access to. Addiontially, only the websites you specify can work with your Firestore database.

Firebase Firestore Database

I utilized Firebase Firestore to store all the chat rooms and messages for the simple chat app I created. I found it quite simple to adhere to its daily write cap of 50K reads. Additionally, I appreciated how simple it was to set up, receive, and push data to and from it. I also appreciated how it operated using only plain JavaScript and did not require a backend language. The database queries, on the other hand, were a little challenging for me to use and understand. Writing security rules for my particular needs proved to be fairly difficult for me as well. However, there was a get() method which can retrieve data from Firebase's Firestore database (not any of the other databases), which made my life a little bit easier. The usage of async/await by Firestore was something else I didn't like because it had strange side effects in my code, including arrays being filled with data before the await function even ran.

Firebase Authentication

To authenticate my users and ensure they could only access the chat rooms they were authorized to access, I utilized Firebase Authentication. It was far simpler to set up than Firestore. Although there were many more options for login, I just used Sign in with Google. And since I just shared the chat app link with a small number of individuals, the restriction of 50K monthly active users was really simple to meet. Additionally, I had no trouble integrating Authentication into my chat app. I had a positive experience with authentication; it had no drawbacks in my opinion.

Conclusion

Thank you for reading this article on my experiences with Firebase! Let me know your thoughts on Firebase in the comments.

APIs, Application Programming Interfaces, provide a standardized way for an application to allow itself to be integrated with other third-party apps without the need to code for every possible integration.

CRUD and HTTP Methods

So how do third-party applications use an API? That's where we must first learn about CRUD operations. CRUD stands for Create, Read, Update, and Delete. There are also 5 commonly used HTTP methods. Which are POST, GET, PUT, PATCH, and DELETE.

The POST Method creates something on your web application. The GET method reads information from the web application. The PUT and PATCH methods update information on the application. The DELETE method, as expected, deletes information on the web application.

Difference between PUT and PATCH

You may be reading this and wondering what the difference between PUT and PATCH is. Well, PUT and PATCH are almost identical, except that PUT is usually used for larger data updates, whereas PATCH is used for smaller data updates.

Let's say I have this piece of data:

{
    "first_name": "John",
    "last_name": "Smith",
    "age": 31,
    "city": "Chicago",
    "job": "Software Engineer",
}

I want to update the first_name, last_name, age, and city fields. I could use the PUT method. When using the PUT method, it requires you to state all of the data parameters (even ones you don't modify) because PUT updates the entire resource, meaning leaving out any field in a PUT request, will cause you to lose that entire field.

I want to update just the first_name field, I could use the PATCH method. With the PATCH method, I would only have to provide the parameters I'm changing. This is better for smaller updates as if you were updating one out of 20 fields, you wouldn't have to restate all 20 fields.

Real-World Example

Here's a relatable example. Let's imagine that you have worked hard on building a network of weather stations that report reliable and current weather statistics.

Then let's say a third-party mobile application wants to use your weather data. The third-party can integrate your API into their application. Here's a sample "conversation" between their application and your API.

So as you can see, the third party sent a GET request, which is requesting your weather data. In response, your API sent a JSON response. By the way, most APIs usually return in a standardized format, called JSON.

And a sample API response might look like this:

{
    "unit_system": "imperial",
    "temperature_unit": "Fahrenheit",
    "temperature": 65,
    "temperature_min": 55,
    "temperature_max": 70,
    "feels_like": 54,
    "humidity": 65,
    "precipitation": 87,
    "air_quality": "fair"
}

Now the third-party mobile app can use your weather services and display your data in a nice and pretty manner.

Conclusion

So, a quick summary, APIs are used on top of an existing application to expose certain functionalities of the application for others to use.

Thank you for reading!

In the last article, I discussed what AI is, its uses, types, etc. In this article, I will go into the types of Supervised Learning.

Supervised Learning

Supervised learning is one of the main types of AI (the other main types are unsupervised learning and reinforcement learning).

How it works

Supervised Learning, like any other type of AI, needs lots of good, quality data. What makes it different is that the data needs to be labeled.

For example, if we were making an AI Model to differentiate between an apple and a banana. We need to give the AI Model lots of pictures of apples and label them to make sure the AI knows if the picture we gave it is a Banana or an Apple.

Let me give you a visual:

Classification

Now the example I just gave you is an example of classification. More specifically Binary Classification because there are only two things the model can classify an input as (Banana or Apple).

Let's say we also made the AI Model classify Bananas, Apples, and now Oranges.

This would not be Binary Classification as binary classification only classifies between two things, not more or less than two. If we have more than two things to classify then it's just called Classification.

Regression

Let's look at another type of algorithm called regression. Regression is more focused towards numbers. For example, if you wanted to predict your store's sales for next week based on previous weeks, then that would be regression.

Look at this visual below:

This would be regression. This would be Univariate Regression because we only have one input feature (input) which is sales. The line of best for this data would be linear.

Take a look at the visual below.

If we added another input feature such as if we had an ongoing sale (in this case this input feature is binary. 0 = No sale, 1 = Sale). Then this would become Multivariate Regression.

Conclusion

All in all, Supervised Learning remains one of the most used types of AI algorithms. I hope this knowledge has helped you. Thank you for reading!

Introduction

Artificial Intelligence is becoming more and more widespread. There are many people wondering what field AI will take over next. It is said that in the next 50 years AI will take over most jobs. There is AI being developed for nearly every field in existence. There is AI being developed for healthcare, writing, transportation, and many more! Yet, many people don't know much about this "AI". So let's dive in and see the basics.

What is AI?

AI or artificial intelligence is exactly what its name says it is. It is human-made intelligence (for computers). Unlike regular programs that need to be explicitly told what to do in any situation with code, AI will learn from past experiences and training data.

Uses for AI

AI can be used in a lot of places.

For example, there are people training AI to classify if a tumor is malignant or benign.

Malignant Definition:
(of a tumor) tending to invade normal tissue or to recur after removal; cancerous.

Benign Definition:
(of a disease) not harmful in effect.

As many people know, Tesla is using AI to develop their full self-driving that can respond to other cars, traffic lights, traffic cones, and other driving signals. There are hopes that in the future AI can be used in trucks to make shipping more efficient and quicker.

AI is also used in social media. It tracks your activity and recommends you your feed based on that.

AI is also used in voice assistants like Alexa, Bixby, Google Assistant, and Siri. AI is used to try and interpret what you are saying. For example, Google Assistant needs to give you the weather regardless of if you say "Hey Google, what's the weather?", "Ok Google, what is the temperature?", or "Hey Google, is it going to rain today?". So to interpret your actual intentions behind the sentence is where AI comes in.

How does AI work?

I won't get into the math or specifics on how AI works, but I'll give you an idea of how it works.

After an AI is built, it needs to be trained. Like humans in a new job, we need to be trained and have the experience to perform well. Same for AI. But unlike humans, AI just needs data and time to train.

For example, let's say you built an AI to determine, from an image of a hand, if the hand was opened or a fist (closed). Well, first you need to build said AI. Then you need to find or make some training data. In this situation, you would need data that has pictures of open and closed hands. Generally, AI needs thousands of examples and hours to train itself. This is why data scientists generally use large datasets already filled with related data.

Data is the fuel for AI. The less data an AI has to train off of, the worse it is. This is why high-quality, accurately labeled data is very important.

Biased Data

This is where a bad problem arises. This problem won't directly make the AI stop functioning, but will cause a bunch of problems.

So let's go back to our open-hand VS closed-hand AI. Let's say we only gave it open-hand and closed-hand images where the inside of the hand is facing the camera. The AI would be amazing at recognizing open and closed hands only if the inside of the hand is facing the camera. Suddenly, if we closed our hand into a fist and turn it around such that the camera sees our knuckles and the outside of our hand. The AI's confidence would plummet.

Confidence Definition:
(in AI) How sure an AI Model is of its prediction.

This is why when we give the AI data, we need to be sure we give it images of open and closed hands from all angles to ensure it can detect an open or closed hand from any image.

Types of AI

There are many types of AI. We will cover the three main ones today. They are Supervised Learning, Unsupervised Learning, and Reinforcement Learning.

Supervised Learning

Supervised Learning is what we've been talking about today. It requires pre-labeled data and will train itself by making predictions and seeing if it was right. It takes in new data and uses what it learned from the training data to make predictions.

Unsupervised Learning

Unsupervised Learning will take in data and will cluster them into groups based on similarity. It will then take in new data and try putting it into existing groups.

Reinforcement Learning

Reinforcement Learning doesn't need much data and mainly learns based on what actions receive penalties and what actions receive rewards. Think about Reinforcement Learning as learning a new video game without watching YouTube videos beforehand. You may start off with X action, but that caused you to lose a life (penalty). So you do Y action instead and you passed the level (reward).

Risks

So as you can see AI has a lot of potential to help the world. But it can also be harmful.

We have already seen that AI can be used to improve health care, transportation, entertainment, etc. But it can also harm those same fields.

Let's take self-driving cars. If we use AI in cars, the roads will be a lot safer as the AI cars will follow traffic laws and sense dangers. But let's say a self-driving car crashes into another car, this will injure people. It also arises the question of who is responsible for AI's mistakes. Like if an AI car crashes, is it the AI car's driver's fault, the car company's fault, or the opposing driver's fault?

Let's look at healthcare. What if we have an AI to see if a tumor is malignant or benign and its prediction is a false negative (the tumor is predicted benign while it is actually malignant)? Then the patient's tumor will go untreated and can cause major body problems. All because an AI misclassified a tumor.

These are some of the risks of AI. What if AI misclassifies? Who is responsible?

Conclusion

In the end, AI is a very helpful tool and can save lives. But it also needs to be heavily tested and monitored to make sure it doesn't hurt lives.

Thank you for reading (or listening)!

There are three main browsers you can publish Chrome extensions to. Chrome (duh), Microsoft Edge, and Opera/Opera GX. So far I've looked into the first two.

Microsoft Edge Add-ons (Microsoft Edge)

This one is the cheapest and easiest option. Once you sign up for the Edge Partner Program (100% free), you can immediately start uploading your extension(s) (also 100% free).

Chrome Webstore (Chrome)

This is the more expensive of the two. You have to pay a $5 Developer Registration fee. Only after that, you can upload extensions (for free) from that account.

Comparisons

Extension Forms

For Microsoft Addons, you have to fill out your extension's name, description, and other details. You have to make and upload your extension's screenshots, and select the language (en - English, es - Spanish, etc). Chrome Webstore will take the description and other details from your manifest.json. You will still have to make and upload your screenshots.

Chrome Webstore Note

Just take note, for the Chrome Webstore you will have to justify why you requested certain permissions. For example, if your manifest.json said:

"permissions": [
        "clipboardWrite"
]

You would have to justify why you requested the "clipboardWrite" permission. Take a look below:

Review Times

I have very limited data on this comparison, but I will give you what I have. Microsoft took 2 days to approve my extension and 3 days to approve an update to it. Google on the other hand took 4 days to approve my extension.

What I published

If you want the full details and what extension I developed and what my experience was like, please look at my previous blog.

If you would like to download my extension, you may do so down below, any support is appreciated :)
Chrome Webstore: https://chrome.google.com/webstore/detail/spanish-input-tools/dkbgodmmblfcnfledmedmepimmpebnjo
Microsoft Edge Add-ons: https://microsoftedge.microsoft.com/addons/detail/spanish-input-tools/aoehggnalolhonphifnooepocfjpghfl?hl=en-US

For those who download it, please leave a comment on the extension's page letting me know of any suggestions you may have.

I had a friend who told me about his chrome extensions and that inspired me to make my own. I wanted to make that I would want to use.

Details

The chrome extension I ended up making was called "Spanish Input Tools". It was made to help type Spanish accented letters and symbols (á, é, í, ñ, ó, ú, ¿, ¡). I use it for typing in Spanish for Spanish Class.

Features

This extension includes a popup that looks like this:

It also has a full typing page with a text box that looks like this:

Challenges

I found it really easy to develop as all it used was HTML, CSS, JS, and JSON (all languages I know). One challenge was trying to wrap my head around and use the manifest.json file. Which apparently is a file that contains everything about my extension (permissions, name, version, etc). I also had some trouble with the pop-up because I am used to developing full web pages (with all the viewable space in the world), now I had to develop a popup that shouldn't be as big as a webpage. So I had to intentionally limit myself.

What was Fun

It was fun testing the application. It was fun learning new Javascript and manifest.json things to make my extension work. The best part of all was the final product. I was proud I had managed to build my first chrome extension in under one week.

Future Plans

I plan on making it possible to get uppercase accented letters. I also plan on publically publishing the extension (which I will write another blog about later).

Comment down any other ideas you have for me down below! Thanks for reading!

From my experience working on MATLAB, I made a Quiz Program.

How it works

This program quizzes you on Math (6 questions), Science (3 questions), Geography (2 questions), English (2 questions), and Technology (9 questions). For a total of 22 questions. It kept track of your score for each subject and at the end graphs them on a bar graph. Keep in mind, that this program isn't its own app it's a MATLAB program that runs in the MATLAB console.

Demo

If you would like to see how it works please watch this YouTube video

Download

To download this quiz program, please make sure to have MATLAB installed. Then go to https://www.dropbox.com/s/g6zycypy9ei6aa2/Project.m?dl=0

Everyone knows and loves at least one website. There is facebook.com, github.com, hashnodenode.com, and a lot more! However, in the background servers can't understand facebook.com they only understand IP addresses. And well humans... aren't good at remembering tons of IP addresses. So... we need a translator. Someone (or something) to translate website URLs to IP addresses. This is where the Domain Name System or DNS comes in.

What it does

DNS takes in a domain name (like facebook.com) and resolves (translates) it into an IP address.

DNS Lookup Process

So let us say you're on your computer and want to browse Facebook. You type in facebook.com and the first thing your computer does is check its local cache (or records) it'll see if it has facebook.com's IP address. If your local cache doesn't have the IP address needed, it will query (ask) a DNS Recursive Resolver, typically provided by your ISP (this can be changed to a different one like Google DNS). The DNS Recursive Resolver will check its cache to see if it has the IP address. If it doesn't then it will ask a root server. A root server can provide the details for a Top-Level Domain (TLD) server. Examples of Top Level Domain servers are the .com servers, the .net servers, the .org servers, etc. This root server will receive the request and give the needed details for the appropriate TLD server. In the case of the .com servers. Then our DNS Recursive Resolver asks the appropriate TLD server. In this case, the .com TLD server. The TLD may still not know the IP address of facebook.com but it can provide the location of the Authoritative Name Server. The Authoritative Name server is the last step in the DNS Lookup. This server will most likely have the IP we are looking for and it will provide the IP address we are looking for! After we receive our hard-earned IP address (in a response from our DNS Recursive Resolver, we can now request what we need (the page, data, etc.) from Facebook's servers.

Conclusion

That was a lot of steps (10 steps), but it usually happens extremely quickly. This is why it takes some time for a page to load if you haven't visited that webpage, it needs to go through some or all of the steps to find the IP address of the website you want to visit. So the next time a webpage loads slowly remember your computer's processes in the background.

In the previous blog I talked about IPv4 Addresses. There are two types of IP addresses. The old IPv4 and the new IPv6. In the previous blog, we talked about IPv4. Now we're going to talk about IPv6.

The Problem with IPv4

When the original creators created IPv4, they didn't expect a huge increase in electronic devices accessing the internet. Hence IPv4 could only support 4,294,967,296 (4 billion) IP addresses. That sounds like a lot but considering there are twice as many humans as that and there are about 21.5 billion devices that connect to the internet on Earth. \( 21,500,000,000 > 4,294,967,296 \) . So clearly, something had to be done, more IP addresses were needed. That's where IPv6 comes in.

Introducing IPv6

This new version of IP Addresses gives us... 340,282,366,920,938,463,463,374,607,431,768,211,456 IP addresses or about 340 undecilion IP addresses.

Quick Maths Lesson

Everyone knows numbers go ones, tens, hundreds, thousands, millions, billions, and trillions, but there's more...
After a trillion we have...
Quadrillions (1,000,000,000,000,000)
Quintillions (1,000,000,000,000,000,000)
Sextillions (1,000,000,000,000,000,000,000)
Septillions (1,000,000,000,000,000,000,000,000)
Octillion (1,000,000,000,000,000,000,000,000,000)
Nonillions (1,000,000,000,000,000,000,000,000,000,000)
Decillions (1,000,000,000,000,000,000,000,000,000,000,000)
Undecillions (1,000,000,000,000,000,000,000,000,000,000,000,000)

Back to IPv6

So as you can see, there are ALOT of IPv6 Addresses. But other than more IP addresses, IPv6 also brings some other new features.

IPv4 VS IPv6

First, let's look at an IPv4 address compared to an IPv6 address.

You may look at the IPv6 address and be all stressed out about how long it is. Don't worry, let's break it down.

Observations

Let's look at some observations you may see. You may see that IPv6 magically has letters!? Or that the IPv6 address is like 10000 times longer than the IPv4 address. The sections of the IPv6 address are split by colons (:) while the IPv4 sections are split by dots or periods (.). So let's address (get it?) these observations shall we?

Octets and Hextets

In IPv4 each of the "parts" are called octets. In IPv6 the parts are called hextets.

Each IPv6 character (digits or letters) is 4 bits each and hextets are 16 bits each. In total, an IPv6 address is 128 bits long (an IPv4 address is just 32 bits).

Periods and Colons

Another thing is that IPv4 uses periods to separate octets while IPv6 uses colons to separate hextets.

There are letters now?

Another thing you may have noticed is that IPv6 has letters. Unlike IPv4 which is in Base 10 (uses only digits 0-9), IPv6 is Hexadecimal meaning it can use the Base 10 numbers of 0 - 9 and letters a - f! We use letters a - f because double-digit numbers aren't possible. Take an IP address for example, "20" will always be interpreted as "2" and "0" not "20". So we use letters a - f for numbers 10 - 15.

Subnet Mask

Just like IPv4, IPv6 has a network and a host section. Unlike IPv4, IPv6 doesn't use a subnet mask that looks similar to 255.255.0.0. All IPv6 addresses have a /## (# representing a digit each) at the end of the IP Address. Confused? I'll provide an image.

The number at the end of the IPv6 address specifies how many bits are for the network section. Here 64 bits are for the network section. 64 bits are conveniently half of an IPv6's 128-bit long address.

These types of addresses (/64 addresses) are common among IPv6 addresses. Keep in mind each character (digit or letter) is 4 bits and each hextet is 16 bits.

Shortening the IPv6 Addresses

I bet everyone reading this thinks IPv6 addresses are VERY long. So there are a few things we can do to shorten it.

Double-Colons

First thing is to remove two adjacent hextets of repeating zeros and like this

There is one catch with this. The double-colon may only be done once in an IPv6 address, as the computer would get confused.

Leading Zeros

Another way to shorten IPv6 addresses is to remove any leading zeros of any of the hextets.

For the hextet with one zero (1010:ab1::c222:0:e444:abcd), that zero can't be removed as it'll become a "::", and we already have a "::" in our IP address. So we can't do that.

IPv6 Parts

There are three main parts to an IPv6 address. Ignoring the "Global Unicast" text at the top (don't worry we'll get to that later), the first part is called the "Global Prefix". It's the part your ISP gives you. It is a minimum of 48 bits long. Next is the Subnet ID it is 16 bits long and allows for 65,000+ subnets. Lastly, this leaves us with a 64-bit Interface ID AKA the host section.

IPv6 Address Types

Like IPv4, IPv6 addresses have different types; however, IPv6 doesn't have public and private addresses as it has so many IP addresses.

Let's look at some of them.

Global Unicast

Like the one we just saw, Global Unicast Addresses can be used publicly over the internet and typically begin with 2000:: or 3000::. The /3 means that the first 3 bits are used to identify the network section. It is like the IPv4 Public Addresses.

Unique Local

The Unique Local Address can only be used within your local network and are like IPv4 Private Addresses. They begin with FC00:: or FD00::. The /7 indicates their first 7 bits are used to identify the network section.

Link Local

The Link Local Address is similar to the Unique Local Address in that it's not publicly usable, but it's used only in a specific area of a network. It begins with FE80::. The /10 indicates its first 10 bits are for the network section.

Multicast

Multicast Addresses are for a group of devices listening for that Multicast address. It's like the IPv4 broadcast address, but the broadcast addresses were for all devices on a network. Broadcast addresses were scrapped and replaced with Multicast addresses. Multicast addresses start with FF::. The /8 indicates the first 8 bits are for the network section.

Anycast

Lastly, an Anycast address is special as this IP address can be publicly assigned to multiple devices on a network, and whenever data is sent to that anycast address, it will be sent to the nearest device with that anycast address. Anycast addresses don't have their own range or beginnings so they are the same as Global Unicast with 2000::/3. Meaning they start with 2000:: with the /3 representing the first three bits are for the network section.

Defining IP Address

IP addresses are essentially long identifiers for every device connected to the internet (look at our last blog where we define the internet). Everyone knows that your IP address is based on your location (there are even services that can give you the general location of where an IP address came from). IPv4 Addresses

Consider a situation where there are five different houses, let's say there's also a mailman trying to deliver mail to house one. Each house needs to have a unique address number so that the mailman doesn't deliver the mail to the wrong house.

Computers also work like that.

Parts of an IPv4 Address

IP addresses aren't just one digit like "1" or "2" (like diagram above portrays it to be), they look more like "###.###.###.###" (the #'s representing one digit each). So the diagram from above would look more like this.

Octets

An IP Address has four visible numbers. These are called octets. Each octet can hold a value ranging from 0 - 255. Why 0 - 255 you may ask? Well, an IPv4 Address is a total of 32 bits. 32 bits divided (equally) into 4 numbers is 8 bits per number and 255 is the largest possible number that can be made from 8 bits.

Subnet Mask

Now for the parts of an IP Address. Every IPv4 Address has two main parts, the network part and the host part. The way to tell what numbers are for the network and what numbers are for the host is with a subnet mask (each IP address is paired with a subnet mask). A 255 in the subnet mask signals that the particular number of the IP address the 255 corresponds to is for the network section, any 0's are for the host section.

Let's say a subnet mask of "255.255.255.0" is paired with the IP address "192.168.0.1". Since the first number the of the subnet mask ("255.255.255.0") corresponds to the first number of the IP address and is a 255, the first number of the IP address ("192.168.0.1") is for the network section. The same applies for the second and third numbers ("192,168.0.1") of the IP address. But for the fourth number ("192,168.0.1"), it's corresponding subnet mask number is 0, meaning it is for the host section.

To better help you understand the Network and Host sections of a IP Address, let's go back the mailman example.

There can be multiple houses in one street, but it's their individual house numbers that make them unique. Now if we have multiple streets then the house numbers can repeat as their street name can identify them seperately. That's basically what the network and host sections are. The streets are the networks, the houses are the hosts.

The above diagram is called a network diagram. Ina network diagram it's common to to leave the host section as a 0 ("192.168.1.0"). And when you label the devices inside the network, you label the with just their host section (and no other parts of the IP Address). So when you want to mention a specific device you say the network like "192.168.1" and then say the device's host number like ".2". So in total you would say "192,168.1.2" to mention the host device 2 on network 192.168.1.

Classes

When IPv4 was made, it was decided to split the IP Addresses into 5 groups called classes. The main classes were Class A, Class B, and Class C. Class D was for multicasting (don't worry about knowing what that means) and Class E was for experimental purposes.

Class A has IP addresses ranging from 1.0.0.0 to 126.255.255.255 with a subnet mask of 255.0.0.0. Meaning it has three out of the four numbers for host identification. Class B has IP addresses ranging from 128.0.0.0 to 191.255.255.255 with a subnet mask of 255.255.0.0. Meaning it has two out of the four numbers for host identification. And class C has IP addresses ranging from 192.0.0.0 to 223.255.255.255 with a subnet mask of 255.255.255.0. Meaning it had one out of the four numbers for host identification. Class A could support the most amount of hosts out of the three classes (1,000,000+) while Class C could support the least amount of hosts out of the three classes (254).

Public & Private IP Addresses

But the creators of IPv4 didn't predict for the huge boom in internet and computer usage. So as of now, all IPv4 public addresses are allocated. Wait, as you read that sentence you may have noticed I used the word public IP addresses. Yes, there are public and private IP addresses.

To preserve IPv4, what they did was allocate some IP addresses from each of the classes to be that class' private IP addresses (private IP addresses still use the same subnet mask for its particular class). The difference is that public IP addresses need to be unique, private addresses can be used in multiple places. Private IP addresses only need to be unique within your network. For example your neighbor could be using the same private IP addresses as you, and that's fine. When you sign up for network services with your ISP (Internet Service Provider) they give you one public IP address, yes only one for your whole network, and they will give your house a private IP address range too. All your devices will connect to the internet through that one public IP address, and each device will have it's own unique private address in your network. One catch is that private IP addresses can NOT connect to the internet (as if they could, there would be duplicating IP addresses).

You may wondering, if all the devices one network connect to the internet through one public IP address, and private IP addresses can't be publicly distinguished. If I send and email to a friend, will everyone in house get my email? No, of course not. Using something called Network Address Translation, a topic for a different blog, the router can tell who your email is for and send it to the right person.

I learned Quadratics last year (during virtual learning) and it was really fun but also somewhat difficult to grasp. At the time, I got so much homework I couldn't find time to code, but now my homework has been reduced and I get time to code.

I remembered my struggles from last year and wanted to help others who are struggling with quadratics. So I made this Windows Forms App (yes it's an exe file and Macs can't run it) that can solve quadratic equations in the format of \( ax^2 + bx + c \) and can help you practice them by generating a quadratic equation and allowing you to answer it.

About the project

This project is called the Quadratics Math App. In this app, you can solve quadratic equations you have and can practice with automatically generated ones.
It was fun learning Regex to help with the parts of it that needed pattern checking. It was also fun testing it. One challenge was actually implementing the quadratic-solving function as originally it was partially accurate. For example, if the quadratic had no solutions it still gave random decimals.

How it works

This is what the app looks like:

App - Left Side

This side of the app is the Quadratic Solver. You enter your \( a \) , \( b \) , and \( c \) values and it goes through the quadratic formula, \( x = \frac{-b\pm\sqrt{b^2-4ac}}{2a} \) , and returns your (usually) two results.

Did I mention? It live updates the equation you type, like this:

App - Right Side

On the right side is the Quadratic Practice. You press the "Generate Problem" button

And poof in the "Equation will be here" textbox

Your randomly generated equation appears.

Then you do the math, and you put in your answers in the "Ans 1" and "Ans 2" textboxes (take your fractions to convert them to decimals, and round to the nearest thousandths place).

Then press the "Submit All" button.

The code will go through the Quadratic Formula and finds the correct answers then compares them to what you submitted to tell you if you are right or wrong (it also tells you what the right answer is). It also allows one right and one wrong answer (so don't worry one wrong answer won't make the whole thing wrong). Consider this example below:

GitHub Source Code: https://github.com/saisiddhish/quadratic-mathapp
Note: This is Windows Forms (WinForms) application, and will only run on Windows OS.

Hope this helps your Quadratic Problems!

The internet, the engine that powers and governs modern society. Without it, the world would come to a standstill. But what exactly is the internet? Most people just think it's a place with YouTube, Netflix, and Social Media, but how it functions is a lot more technical than that.

First and foremost, let's define the internet. According to the online dictionary: Basically, what Mr. Overcomplicated Definitions is attempting to convey that the internet is a bunch of interconnected computers that transmit data with some protocols. Protocols are essentially standards/rules for something (such as how to exit a school in a single file line if it's on fire). Consider the effects if computers didn't have standardized methods for transmitting data, there could be major consequences (like a loss of data). Consider the following example of a hospital file:

Patient Name: Internet
Date of Birth: MM/DD/1957
Problem: Doesn't have a definition
Treatment: Give it a definition

If a hospital computer wanted to send it to Merriam Webster's servers without utilizing a protocol, it could be received as:

Patient Name: DD/MM/1957
Date of Birth: 
Problem: Does have a definition

As you can see some data was sent in the incorrect sequence (the DOB is the name and the problem has changed) and some parts weren't even received (the name and treatment were missing). This is why protocols are crucial and must be followed. So we could summarize the Internet as:

A method of data transfer between electronic devices that adheres to specific protocols.

Definitions:

Internet:

A global computer network providing a variety of information and communication facilities, consisting of interconnected networks using standardized communication protocols.

Our New Definition:

A method of data transfer between electronic devices that adheres to specific protocols.

Protocol:

The official procedure or system of rules governing affairs of state or diplomatic occasions.

Our New Definition:

Standards/rules for something.