DEV Community: Dakota Day

Checking Out Chakra UI

Dakota Day — Mon, 14 Oct 2024 02:21:47 +0000

Welcome to my third and final blog in my styling mini-series. Today I'll be going over the youngest library I've worked with, initially released in 2022, Chakra UI. For this showcase, I'll be using Chakra v2.10.1 with React v18.3.1 in Node v22.

Why Choose Chakra?

You may be wondering, "What's Chakra's selling points?". Well despite being a very young library, Chakra has exploded in popularity. This means you'll have comparable support to some bigger, more established libraries like Material UI. Arguably my favorite aspects of Chakra would be its built in dark and light mode support and how accessible it is out the box. And lastly, Chakra UI has a keen focus on keeping its components customizable to fit your specific needs.

Installation

Chakra is easy to set up and get running. You'll first grab the necessary packages: with npm - npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion or with yarn - yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion. After installing, you have to set up the ChakraProvider at the root of your application, which will look like this a majority of the time:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ChakraProvider } from '@chakra-ui/react';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <ChakraProvider>
    <App />
  </ChakraProvider>
);

Themes and Customization

Themes allow developers to define a set of design standards that can be applied consistently across an application. Chakra UI comes with built-in theming capabilities that let devs customize the look and feel of their projects.
Applying these themes are as simple as slightly modifying our example from above to include a custom theme:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ChakraProvider } from '@chakra-ui/react';
import customTheme from './Theme';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <ChakraProvider theme={customTheme}>
      <App />
    </ChakraProvider>
);

In a separate file, in this case Theme, you can set your own theming rules to override Chakra's defaults, and then you just pass it as a prop to the ChakraProvider.

Colors

Chakra uses a unique approach to colors, in the form of palettes. This means that their default colors have ranges, from 50 - 900, where the higher you go, the darker shades you have. Their default theme was inspired by Tailwind CSS. Be sure to check out the color spreads in the docs.

Typography

Your theme allows customization for font styles, sizes, and weights to maintain a consistent typography throughout your app. You can also customize headings, and more general body text.

Spacing

Chakra UI enables you to control the spacing between elements. Margins, paddings, and gaps can all be configured within the theme.

Breakpoints

Breakpoints in Chakra allow developers to build responsive designs that look good on any screen size. You can define your own via theming, or use the default Chakra values to create a responsive grid system.

Throwing these together you can have a simple theme that may look like this:

import { extendTheme } from '@chakra-ui/react';

// Define a custom color palette
const colors = {
  brand: {
    50: '#ffe5f7',
    100: '#ffb3e0',
    200: '#ff80c9',
    300: '#ff4db1',
    400: '#ff1a99',
    500: '#e60080',
    600: '#b30066',
    700: '#80004d',
    800: '#4d0033',
    900: '#1a001a',
  },
};

// Define custom typography settings
const typography = {
  fonts: {
    heading: `'Poppins', sans-serif`, // Custom font for headings
    body: `'Roboto', sans-serif`, // Custom font for body text
  },
  fontSizes: {
    sm: '12px',
    md: '16px',
    lg: '20px',
    xl: '24px',
  },
  fontWeights: {
    normal: 400,
    bold: 700,
  },
};

// Define spacing scale
const space = {
  px: '1px',
  1: '4px',
  2: '8px',
  3: '12px',
  4: '16px',
  5: '20px',
  6: '24px',
  8: '32px',
  10: '40px',
  12: '48px',
  16: '64px',
  20: '80px',
  24: '96px',
};

// Extend the default Chakra theme
const customTheme = extendTheme({
  colors,
  fonts: typography.fonts,
  fontSizes: typography.fontSizes,
  fontWeights: typography.fontWeights,
  space,
});

export default customTheme;

Light/Dark Mode

Light and dark mode has never been easier! Chakra has built in functionality for light and dark mode toggles through their useColorMode and useColorModeValue React hooks.

import { useColorMode } from '@chakra-ui/react';

function Example() {
  const { colorMode, toggleColorMode } = useColorMode();

  return (
    <header>
      <Button onClick={toggleColorMode}>
        Toggle {colorMode === 'light' ? 'Dark' : 'Light'}
      </Button>
    </header>
  )
}

And just like that, you have a fully functional button to toggle between light and dark mode!
But what if you need to adjust some colors between light and dark mode? Chakra allows this by using useColorModeValue. Its signature looks like this const value = useColorModeValue(lightModeValue, darkModeValue).

import { useColorMode, useColorModeValue } from '@chakra-ui/react';

function StyleColorMode() {
  const { toggleColorMode } = useColorMode()

  const bg = useColorModeValue('red.500', 'red.200')
  const color = useColorModeValue('white', 'gray.800')

  return (
    <>
      <Box mb={4} bg={bg} color={color}>
        This box's style will change based on the color mode.
      </Box>
      <Button size='sm' onClick={toggleColorMode}>
        Toggle Mode
      </Button>
    </>
  )
}

Here, the background of the box will be a darker shade of red in light mode and a lighter shade in dark mode, while the text will be white, and dark gray respectively.

Accessibility

Chakra UI has accessibility baked into its core, ensuring that your UI components are not just visually appealing but also usable by everyone.

Buttons

Buttons play a vital role in interactivity, and Chakra UI provides several features to ensure they are accessible:

Contrast: Chakra's default button colors are designed to meet accessibility standards for contrast ratios.
Focus States: Automatically include focus styles. This means when a user navigates using a keyboard (via the Tab key), the button receives a visible focus outline, ensuring that it’s clear which element is in focus.
ARIA Attributes: Buttons in Chakra UI are implemented with proper ARIA (Accessible Rich Internet Applications) roles. For instance, if a button has a custom behavior, you can easily add aria-label attributes to enhance screen reader accessibility.

Forms

Forms are crucial for user input, and Chakra UI makes them accessible by default.

Proper Labeling: Form controls like inputs, checkboxes, and radio buttons are designed to be accessible with automatic association between labels and form elements. Chakra's <FormLabel> component ensures that labels are correctly bound to the form controls, making it easier for screen readers to interpret them.
Validation States: Ensure that error messages are appropriately connected to the form controls using aria-invalid and other ARIA attributes.
For example:

<FormControl isRequired>
  <FormLabel htmlFor="email">Email Address</FormLabel>
  <Input id="email" type="email" />
  <FormHelperText>We'll never share your email.</FormHelperText>
</FormControl>

Here, the htmlFor attribute binds the label to the input element, and the helper text offers guidance, all accessible by screen readers.

Modals

Chakra's modals are designed with accessibility in mind:

Focus Trapping: When a modal opens, focus trapping ensures that users can't tab out of the modal content unintentionally.
Keyboard Navigation: Modals are fully navigable with a keyboard. Pressing the Tab key moves focus through interactive elements (like buttons or links) within the modal. The Esc key can be used to close the modal.
Aria Labels and Roles: Modals come with built-in ARIA roles such as aria-modal to define the dialog role. You can also add aria-labelledby and aria-describedby attributes to describe the modal content to assistive technologies.

Conclusions

All in all, Chakra is a very fun and accessible component library to work with. With things like built in light/dark mode support and a very large lean into accessibility, Chakra can be described as THE modern component library, despite being so young. I would implore you to try out Chakra and see if you like it!

Bootstrap Basics

Dakota Day — Mon, 30 Sep 2024 01:16:41 +0000

Welcome to the second part of my styling series where I go over some popular styling libraries/frameworks. In this blog, we'll go over Bootstrap. Bootstrap is a powerful, open source frontend framework that makes building websites faster and easier by providing an intuitive grid system, UI components, and an extensive array of utility.

Setup

Of course before getting into some of the features, we have to talk about setting up Bootstrap in a project. At the time of writing, Bootstrap's current version is 5.3.3 and that is what I'll be using for any examples.

Bootstrap Via CDN

Bootstrap can be set up very quickly by using a CDN, or content delivery network. This method does not require any installation, just add Bootstrap's CSS and JavaScript links to your HTML file and you're off to the races!
You'll put the following CSS link inside the <head> tag of your HTML:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

After that, you'll put the following script before the closing <body> tag:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

Via Package Manager

If you're working in a larger project, or working with modern frontend tools, you may want to install via project manager. Lucky for us, this is simple as well! In your terminal, just write npm install bootstrap if using npm, or yarn add bootstrap if using yarn. After installing you'll want to import bootstrap's CSS and JavaScript into your main CSS and JS files respectfully:

// Import Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';

// Import Bootstrap JavaScript
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

The Grid System

One of Bootstrap's most powerful features is its grid system. This allows you to create responsive layouts that automatically adjust to different screen sizes.

Structure

The grid is based on a 12-column structure to organize content. Its basic structure can look something like this:

<div class="container">
  <div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
  </div>
</div>

Container: The container holds the columns and rows while aligning them
Row: The rows hold and group columns together horizontally
Col: The columns are where your content will live, each row can have 12

Sizes

Columns can also have their own sizes! This can be used to provide different layouts. They are notated by how many columns they'll take up on the row.

<div class="container">
  <div class="row">
    <div class="col-12">100% Width</div>
  </div>
  <div class="row">
    <div class="col-6">50% Width</div>
    <div class="col-6">50% Width</div>
  </div>
  <div class="row">
    <div class="col-4">33.33% Width</div>
    <div class="col-4">33.33% Width</div>
    <div class="col-4">33.33% Width</div>
  </div>
</div>

Breakpoints

Bootstraps grid is mobile first, meaning it's built for mobile devices before scaling up to larger devices. Because of this, Bootstrap has classes that define how columns act across different screen sizes. These are:

xs: For screens less than 576px
sm: For screens more than 576px
md: For screens more than 768px
lg: For screens more than 992px
xl: For screens more than 1200px

For example:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-8">Wide on medium and larger screens</div>
    <div class="col-6 col-md-4">Narrower on medium and larger screens</div>
  </div>
</div>

In this example, the first column takes up the full width on small screens, but only eight grid units on medium or larger screens. The second will take up half the width on small screens, and only four units on medium or larger.

Common Components

Bootstrap gives us a variety of pre-built components that help in creating appealing, user friendly websites with minimal custom CSS. There are a lot of components, so I'll go over some of the more common one's you're likely to work with.

Typography

We'll start by talking about text, since your users need to read to believe. The typography classes make defining consistent text styles easy, from headings, to body text, to lists. For example, the different heading are notated by their display class:

<h1 class="display-1">Heading 1</h1>
<h2 class="display-2">Heading 2</h2>
<h3 class="display-3">Heading 3</h3>
<p class="lead">This is lead text, which stands out from regular paragraph text.</p>
<p>This is regular paragraph text.</p>
<p class="small">This is small text, which stands out from regular paragraph text.</p>

You can also define paragraph text with utility classes to modify body text as seen above.

Buttons

Every website or app needs buttons! Bootstrap gives a variety of button styles out the box. Their classes are defined as such:

<!-- Basic Buttons -->
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-danger">Danger Button</button>

<!-- Button Sizes -->
<button class="btn btn-primary btn-lg">Large Button</button>
<button class="btn btn-primary btn-sm">Small Button</button>

<!-- Button Outlines-->
<button class="btn btn-outline-success">Success Outline</button>
<button class="btn btn-outline-warning">Warning Outline</button>

NavBar

Bootstrap's navbar component comes with built in classes for alignment, dropdowns, and more!

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>
</nav>

In this example, the navbar will collapse on smaller screens.

Utility Classes

Bootstrap also includes a wide range of utility classes to help speed along development and reduce the need for custom CSS. With just a few class names, you can adjust spacing, alignment, display properties and more!

Spacing

Spacing is extremely important in development for user readability. Thankfully, Bootstrap gives us classes to adjust margins and padding of elements. They all follow a similar format of {property}{sides}-{size}.

Property: m for margin, p for padding
Sides: t top, b bottom, s start(left), e end(right), x left and right, y top and bottom, or blank for all sides
Size: 0, 1, 2, ..., or auto

For example:

<div class="mt-3">Margin Top of 3</div>
<div class="p-5">Padding of 5</div>
<div class="mx-auto" style="width: 300px">Horizontally Centered with Auto Margin</div>

Display

Display utilities help control the visibility and layout of elements. These can be used to show, hide, or change how elements behave. The display classes include:

d-block: Display as a block element
d-inline: Display as an inline element
d-none: Hide the element
d-flex: Enable Flexbox
d-inline-block: Display as an inline block

Bootstrap also provides responsive versions of these classes that apply to breakpoints, such as d-none d-md-block, this hides an element on small screens.

<div class="d-none d-md-block">Visible on medium and larger screens</div>
<div class="d-flex justify-content-center">Centered with Flexbox</div>

Text Utilities

Bootstrap gives a large amount of text customization with classes like:

Text Alignment

text-start: Aligns text to the left
text-end: Aligns text to the right
text-center: Aligns text to the center

Text Wrapping

text-nowrap: Prevent text from wrapping to the next line
text-truncate: Truncate text with an ellipsis if it's too long

Text Color

text-primary: Text with primary color (default: blue)
text-success: Text with success color (default: green)
text-danger: Text with danger color (default: red)

<p class="text-center text-success">This text is centered and green</p>
<p class="text-end text-primary">This text is right-aligned and blue</p>

Conclusions

Bootstrap is a powerful and flexible framework that allows devs to build responsive websites efficiently. By mastering these foundational concepts, you'll be able to streamline your workflow and focus more on the design and functionality of your site rather than with custom CSS and layout management. So dive in! Experiment with some of the examples and build an amazing app!

Sources

Bootstrap

Mastering Material UI

Dakota Day — Mon, 16 Sep 2024 05:14:29 +0000

This is the first part of a mini series where I'll be covering some common frontend styling libraries, starting with Material UI. Material UI (MUI) is a React component library that implements Google's Material Design. When opening up the MUI docs, it can be a little intimidating because of just how many components there are. This blog will be running through a fair chunk of MUI components with the goal of learning what they do, and how they can help with frontend productivity.

To start, I'll be using MUI's Album Template for demo purposes, as I feel that it uses some of the more common components that you'll likely be using. Please note that this repo is older, so some of the components in it are deprecated.

Installation

MUI is pretty much plug and play. It does have two peer dependencies, react and react-dom, so ensure that these are installed first. After those are installed, if using npm, run this command: npm install @mui/material @emotion/react @emotion/styled. This will install the latest version of MUI, at the time of writing, I used v6.1.0 with React v18.3.1. If you want to use MUI's icon library, you can use this command: npm install @mui/icons-material. Be sure to checkout MUI Icons library. Any components you want to use can be imported directly into the file where you want to use it. The import format is import { Component } from '@mui/material/Component';

Template

After making a few changes to the default repo this is what the album template looks like. Let's start picking apart some of the components used.

MUI Components

CssBaseline

We'll start with CssBaseline, this component can be boiled down to a collection of HTML element and attribute style normalizations based on normalize.js. This basically ensures that all of your elements will look the same across browsers.

AppBar/ToolBar

The AppBar and ToolBar work in tandem to build a functional navigation bar right out the box. The ToolBar acts as a layout helper within the AppBar component.



<AppBar position="relative">
  <Toolbar>
    <CameraIcon />
    <Typography variant="h6" color="inherit">
      Album layout
    </Typography>
  </Toolbar>
</AppBar>

AppBar has a position prop that we can use to determine how the nav bar reacts when scrolling on a page. This example is really simple but you could position buttons, dropdown menus, and more within these components.

Container

The container component is what will hold your other components for a page. They have a maxWidth prop that allows the container to grow with the size of the screen.

Grid2

Grid2 is MUI's version 2 of the Grid component. It's used for creating flexible layouts within containers. It follows the CSS Flexbox model and uses the 12 column grid system. The grid work in a two part system, where one grid acts as the container and the child one acts as the item.



<Grid2 container spacing={2} justifyContent="center">
  <Grid2 item>
    <Button variant="contained" color="primary">
      Main call to action
    </Button>
  </Grid2>
  <Grid2 item>
    <Button variant="outlined" color="primary">
      Secondary action
    </Button>
  </Grid2>
</Grid2>

Button

We'll also use this example to talk about the Button component as well. Every app needs buttons right? MUI comes with pre-built button components that are styled out the box. They have a variant prop to define the button's style. You have three variants to choose from: text, contained, and outlined. Not to mention you get access to the color prop which has a few pre-made ones like primary, secondary, success, and error.

Typography

The typography component is your building block for any text you may use in your app. This means titles, paragraphs, labels, etc. This component ensures that text follows best practices for accessibility and consistency.

Features

Scales font sizes based on screen size.
Variant prop for changing text to heading, body, and more Let's look at the header and paragraph under it for an example



<Typography
  variant="h2"
  align="center"
  color="textPrimary"
  gutterBottom
>
  Album layout
</Typography>
<Typography
  variant="h5"
  align="center"
  color="textSecondary"
  gutterBottom
>
  Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.
</Typography>

Here we can see some of the different props coming into play: variant changing the text types, align tells the text where to align, color sets the color of the text, and gutterBottom sets a small margin under the text. In the second typography, we can also see that by default, longer strings of text auto-wrap where they are aligned.

Card

Finally let's go over cards. Cards are another container for displaying organized content. It is highly customizable and has subcomponents like CardHeader, CardMedia, CardContent, and CardActions.



<Card>

  <CardContent>

    <Typography gutterBottom variant="h5">

      Heading

    </Typography>

    <Typography>

      This is a media card. You can use this section to describe the content.

    </Typography>

  </CardContent>

  <CardActions>

    <Button size="small" color="primary">

      View

    </Button>

    <Button size="small" color="primary">

      Edit

    </Button>

  </CardActions>

</Card>

Conclusions

Material UI is an extensive library. It can take some time to get used to, but it's very powerful. By integrating MUI into a project, developers can speed up their workflow while maintaining a high standard of design and functionality.

Sources

Material UI Docs
Album Template

Reinforcing Reinforcement Learning

Dakota Day — Mon, 12 Aug 2024 13:35:17 +0000

Welcome to the third part of my machine learning series! In this blog, we'll cover some of the basics of the final learning pattern, reinforcement learning(RL).

Necessary Parts

We'll start by talking about the key pieces inside of reinforcement learning. RL focuses on an agent being able to interact with an environment and make decisions. These decisions are based on how the agent is able to gain reward from its actions. The goal? Get as much reward as the agent can!
The parts defined are this:

The Agent: Defined as the thing learning, or moving through the environment. For example, in video games like Pong or Super Mario, the agent would be the paddle or Mario himself!
The Environment: This concerns everything that the agent interacts with. In video games, the level you're currently in would be the environment
Actions: These are choices that our agent can take, these will change for every agent, as they all have different goals. In Pong, the goal is to score by hitting the ball, so actions for the paddle are up and down. Mario on the other hand, has a more complicated environment, and he's able to run, jump, go down pipes, etc. So his actions would include up, down, left, and right!
State: This is a snapshot of the environment at any given time. This is how the agent can "see" the environment as we would. State is important because it gives context for the agent's decision making. Mapping different states to actions that give consecutive rewards is the goal for the agent.
Rewards: This represents a function that provides feedback from the environment. This is a crucial part of RL because this will cause the agent to act the way it does. You don't want to only think about giving the agent rewards for doing something good. You should also make sure that take away rewards for doing something undesirable.
Let's take Mario for example again. Starting off, since the goal is to move right(to the flag and beat the level), we may give him rewards for moving right. In the first level, there is a goomba and pipe that would impede his progress immediately. To make sure that he learns to jump over the goomba, we want to take away from his reward on a death. For the pipe, we may want to make it so that every second that passes, Mario will lose a "point". This encourages him to move to the flag in the most efficient way possible.

Piece it Together

So how do all of those pieces come together?

This diagram shows the basic process our agent takes while learning.

Starting

When learning a new video game, how do we, as humans, learn how to play? Well, if the game doesn't have any tutorials, we typically start by pressing all the buttons to see what they do. Our agent actually starts by doing something similar. Since the agent doesn't know how to get rewards, it takes random actions until it finds actions that give it multiple rewards.

Feedback

While the agent takes those random actions, it gets feedback from the environment. Over time, the agent will adjust its actions to get more rewards while trying to minimize penalties. It takes the actions that got it rewards or actions that penalized it and the state where it took those actions, and passes it to the next "generation". Each generation bases its decisions on past generations' decisions, making it more probable to take those "good" actions to get the rewards it craves.

Policy

This is simply a term to describe the agent's strategy. This would be the mapping function for states and actions. It would take a given state as an input, and outputs the best action for that state. The policy function changes drastically for every algorithm, and depending on the problem, can be difficult to solve.

Exploration vs. Exploitation

Exploration or exploitation? That is the choice that the agent has to make: should it take new actions(exploration), or take actions it already knows to give it rewards(exploitation).

Exploration: An agent may take actions the it doesn't normally take to gather new information in a given state. The benefit of this is to potentially find a better policy than it currently has. A downside of this, however, is that exploration can lead to immediate reward "dry spells" over long term rewards.
Exploitation: The agent may also take actions that it knows to give immediate rewards. This is necessary for the agent to get high rewards based on its past actions, resulting in high immediate rewards. The downside here is that the agent knows actions to give it rewards, so it won't explore new, potentially better, options.

One major challenge is achieving balance of these two concepts. A popular strategy one could use is called the Epsilon(ε)-Greedy Strategy.

This strategy gives the agent a chance to explore, ε(something small, say 0.1), and chance to exploit, (1 - ε). Here, 90% of the time, the agent will take the action it knows will give it immediate reward. That last 10% will be used taking a new, unexplored action. You can also make it so that as time progresses, ε reduces, and the agent takes less exploring actions, since after a certain point, there can't be better actions.

Applications of RL
Reinforcement learning can be used in many parts of life. From self driving cars to natural language processing. We already know it has applications in gaming from my previous examples. In healthcare, it can be used to give treatments to patients based on policies learned from RL systems. That's just to name a few, check out this blog by Derrick Mwiti to more deeply explore some other applications.

Conclusions

So, what is the take-away? RL is a powerful tool that enables machines to learn from their own experiences. Agents learn to make decisions in an environment by exploring the best actions to take. It is already used in many parts of our lives and always getting better!

Sources:
What is Reinforcement Learning

An Introduction to Reinforcement Learning

Epsilon-Greedy Q-learning

10 Real-Life Applications of Reinforcement Learning

Exploring Unsupervised Learning in ML

Dakota Day — Mon, 05 Aug 2024 01:18:00 +0000

In my last blog I talked about machine learning(ML), its uses, and some of the different algorithmic patterns that make it work. In this blog we'll be checking out some unsupervised learning patterns and why we may want to use them.

To quickly review, unsupervised learning uses algorithms to analyze unlabeled data without our supervision. We'll look at three popular unsupervised learning patterns in this blog.

K-Means Clustering

We'll start by talking about K-means clustering. So what does the 'k' mean? The k represents the number of clusters we want in our data. K-means algorithms focus primarily on minimizing distances between data points and our clusters, in other words, data points within a distance belong to a certain cluster. This algorithm can be broken down into 5 steps:

Initialization: Start with random K-points from the dataset.
Assignment: For every data point, we want to calculate the distance to each K-point and assign it to the closest one.
Update K-points: After assignment, we then want to recalculate the K-points position by looking at the relevant clustered data points and moving to the center of the cluster.
Repeat: We want to iterate steps 2 and 3 until our K-points no longer make significant movement.
Results: At the end the algorithm will output the final K points and each data point associated with them.

Some applications of K-means algorithms include image segmentation in healthcare and robotics, marketing and retail to segment customers by purchase history and demographic, fraud detection, and recommendation systems.

Principal Component Analysis(PCA)

PCA can used alongside other techniques, but its objective is to simplify data by breaking large datasets into smaller ones. It does this while still maintaining patterns and trends, aka principal components. Let's go over the steps PCA follows:

Standardization: This step is to ensure that large ranges of variables do not dominate smaller ranges. Bringing all variables to scale ensures no biased results.
Covariance Matrix: Here we make a matrix to compare each pair of features in the data.
Eigenvalue Decomposition: Trying to keep it relatively simple, eigenvectors indicate the directions of maximum variance in the data and eigenvalues quantify the variance captured by each principal component.
Selecting Principal Components: We sort eigenvalues in descending order and keep only the top n required principal components.
Project the data: Now we project the original data onto the dimensions represented by the principal components selected in the last step.

Applications for PCA include visualizing multidimensional data, reducing dimensions of data and resizing images.

Autoencoders

Autoencoders a special kind of neural network that is almost self supervised. They are made with an encoder and a decoder in mind.

Encoder

The encoder compresses the input data and generates a bottleneck in the hidden layer of the neural network.

Decoder

The decoder tries to reconstruct the input, however it only has the compressed data to go off of. The output can 'improved' by calculating the reconstruction error between the input and output.

Applications for autoencoders include image and audio compression, anomaly detection, data generation, and recommendation systems.

In conclusion, unsupervised learning is helpful for picking up patterns we as humans may not notice as quickly. These algorithms are better suited for complex tasks or larger datasets.

Sources

Intro to K-Means Clustering
Principal Component Analysis
Intro to Autoencoders

Images Used

K-Means Graph
PCA Graph
Autoencoder Graph

What is Machine Learning?

Dakota Day — Mon, 29 Jul 2024 02:58:33 +0000

When I first hear the words 'machine learning', I think "AI that has the ability to grow more accurate over time".

While my first thoughts feel fairly accurate, IBM gives us a more direct definition: "A branch of AI and computer science that focuses on using data and algorithms to enable AI to imitate the way that humans learn, gradually improving its accuracy."
Given that information, how does it work?

Algorithms

Machine learning is a pretty broad topic when looking at models and algorithms. We can break them down by looking at the ways they learn:

Supervised Learning

Uses labeled datasets to train algorithms to predict outcomes and recognize patterns. We, the "supervisor", provide the dataset and the desired outcomes.

Some popular algorithms that use this technique are:
--Naive Bayes Classifier
--Decision Trees
--K Nearest Neighbors
--Linear Regression
--Neural Networks

Unsupervised Learning

Uses unlabeled datasets to learn for itself.
Since the datasets are unlabeled, the algorithms can only use clustering or association techniques to group similar inputs together

Reinforcement Learning Algorithms here are reward based. That means the program makes decisions on whether it gains or loses rewards. Positive reinforcement occurs when an event happens due to a certain behavior, that behavior increases strength or frequency. Negative reinforcement strengthens a behavior when a negative condition is avoided. The learning for this technique is iterative, so it learns from its mistakes and passes along the knowledge to the next generation. Think of those AI that are made to speedrun videogames!

Neural Networks

We'll take a look at neural networks. Neural networks are designed to to mimic our own brain's thought patterns. They can be used to do things like recognize patterns in speech, translating, and much more! They learn from whatever data is input and make predictions based on that data, growing more accurate the more data there is. I'll be using a simple program, courtesy of the LearnCode.academy YouTube channel, to show off how neural networks work.

For our example program we'll have some html that has a color picker input that will set our background color and some example text that is white by default.

Brain.js

Brain.js is a JavaScript library used for making neural networks, and we'll be using it for our program.

A neural network, can be used to determine if a background is too dark or too light, and change the color of text to make it more readable.

Making the brain

Let's start by making our brain:

//this initializes a new neural network
const network = new brain.NeuralNetwork();

Easy enough.

Brain Training

Human brains learn from information given to them, neural networks are the same. We can use the .train method on the network. This is essentially what the network will use to predict outcomes. In our case, this will determine whether or not to change our text color. Let's give our network some starting data.

//.train takes an array that holds our test data as a parameter
network.train([

//we can get our rgb values by dividing a color's values by 255
//the output should be what you think the background is: light or dark in this case
{input: {r: 0, g: 1, b: 0}, output: {light: 1}},
{input: {r: 0.33, g: 0.24, b: 0.29}, output: {dark: 1}},
]);

Now let's do the event listener for our color input! This is where we'll be determining whether the background is light or dark.

input.addEventListener('input', (color) => {
  //this is just a helper function that converts hex color data to rgb values
  const rgb = getRgb(color.target.value);

  //we set the background color here
  text.style.background = color.target.value

  const result = brain.likely(rgb, network);

  text.style.color = result === 'dark' ? 'white' : 'black'
})

So let's say we want to make our result be either our light value, or our dark value. Brain.js has a method we can use here as well. The .likely method takes our rgb value and neural network as arguments. .likely will then compare the likely hoods of the color being light or dark for us, using the data that we trained it with!

If we were to try and display this on the page we would have some weird things going on. We only provided two inputs for our training data, so our network may have some issues trying to figure out if some rgb combinations are light or dark.

Fixing this is easy! All we do is add more data to train the brain!

{input: {r: 0, g: 1, b: 0}, output: {light: 1}},
{input: {r: 0.33, g: 0.24, b: 0.29}, output: {dark: 1}},
{input: {r: 0.62, g: 0.72, b: 0.88}, output: {light: 1}},
{input: {r: 0.1, g: 0.84, b: 0.72}, output: {light: 1}},
{input: {r: 0.74, g: 0.78, b: 0.86}, output: {light: 1}},
{input: {r: 0.31, g: 0.35, b: 0.41}, output: {dark: 1}},
{input: {r: 0, g: 1, b: 0.65}, output: {light: 1}},

With this training data, our brain will be able to more accurately predict whether the background is light or dark.

The more you think about it, machine learning is used in a lot of different areas of our life: recommendation systems, social media connections, image recognition and many more. I think it would be fairly safe to say that machine learning has greatly improved different facets of our lives. And the best part? It can only get better from here!

Check out the sources used if you want to learn more:
What Is Machine Learning (ML)
Top 10 Machine Learning Algorithms For Beginners: Supervised, and More
What is Supervised Learning?
What is Unsupervised Learning?
What is Reinforcement Learning
Brain.js Docs
Machine Learning Tutorial for Beginners - USING JAVASCRIPT!

Images used:
Unsupervised Learning
Supervised Learning

Python vs. JavaScript

Dakota Day — Mon, 03 Jun 2024 11:57:20 +0000

Python and JavaScript (JS) are two fairly old programming languages at this point, but what makes them different from each other? Many would consider these languages fairly beginner friendly. How are they similar? We'll go over a couple of things that set these two languages apart and why they've been in the game for so long.

Humble Beginnings

Both languages in this post are very mature and rooted, being made in the early days of 90's public internet.

Python

Python was developed by Guido van Rossum starting in 1989 but wouldn't be released until 1991. Funny enough according to Python Institute, the name is derived from Monty Python's Flying Circus! Python is maintained by Python Software Foundation. It was built with a couple things in mind:

Being easy to learn.
Being easy to read and write.
And being easy to obtain.

JavaScript

JavaScript is slightly younger, being developed in 1995 by Netscape programmer, Brendan Eich. Here's a fun fact, Brendan Eich built JS in 10 days! It was originally called Mocha, then LiveScript, and finally the JavaScript we all know today. In 1997, Netscape would hand off JS management and maintenance to the European Computer Manufacturers Association (ECMA). The newly handled versions would be called ECMAScript or ES. The standardized version now is ES6(2015) which added a lot of features that devs had been asking for. If we were to compare it directly to Python for comparison sake:

Also easy to learn.
Slightly harder to read and write.
Also fairly easy to obtain.

According to Tiobe.com, Python is the most popular coding language sitting at a crazy 16.33% approval rating as of May 2024! It even won Tiobe's Language of the Year in 2007, 2010, 2018, 2020, and 2021. JavaScript, while not as high, still sits in the top 10 at number 6 with a 3.01% approval rating. It also won Language of the Year in 2014. Learning either one of these won't give you any difficulty landing a job.

Let's Talk Syntax

Python and JS are both fairly easy to write, but what are some key differences in the syntax? Python is known for its high readability, almost pseudocode-like structure. JS on the other hand is more known for it's flexibility. Here's some example syntax on how you would write some basic code in each language:

Variables

In Python, variables aren't defined with keywords, just set them to whatever data type you need.

num = 10 #Python uses # for comment lines
string = 'hello' #It doesn't require semicolons to end lines

In JS, it is best practice to use declarative keywords, like let and const, when making variables. Not doing so can lead to scope issues.

let num = 10;
let string = 'hello';

Functions

Python uses the def keyword to define a function.

def add(num1, num2): #Python uses colons to indicate new blocks
  result = num1 + num2
  print(result) #It also uses print() for printing

JS uses either the function keyword or arrow function syntax. Arrow functions give the option to shorten function blocks.

function add(num1, num2){
  result = num1 + num2
  return console.log(result) //JS uses console.log() for logging
}
//OR
add (num1, num2) => console.log(num1 + num2)

Conditionals

Python does not use curly braces to define blocks like JS. Instead it uses indentation to define its blocks. This changes how conditionals look of course. For example:

if num < 0:
  print('negative')
elif num === 0: #Python uses elif instead of JS's _else if_
  print('zero')
else:
  print('positive')

Here's JS's version:

if (num < 0){ // Here the conditions must be wrapped in parentheses
  console.log('negative')
} else if (num === 0){ //Braces to indicate code blocks
  console.log('zero')
} else{
  console.log('positive')
}

Just in these simple examples you can see how Python really strives to make coding faster and more readable.

Here's a video from Red Eyed Coder Club that shows how a basic algorithm would be built side by side in both languages:

Use Case

Where Python and JS start to break apart from each other is each of their use cases. JS focuses more on front-end development while Python focuses more on the back-end side of things.

Javascript

JS is used alongside HTML and CSS a lot of the time. This means that you can find yourself building functional websites and applications on the back-end that are also pleasing to the eye on the front-end. This is reflected in the frameworks and libraries JS offers, some of the most popular frameworks being React, Vue, and Angular. If you enjoy this, that probably means you would want to go for full-stack dev positions.

Python

Python, being more back-end focused, is primarily used for things like scripting and automation. Its frameworks and libraries will focus more on data sciences or automation tasks. Some popular ones are Pandas, NumPy, and Scikit Learn.

Now don't get it twisted, just because one language has a focus in one area doesn't mean that you can't use it at all for a weaker one. Just keep in mind that if you were to go that route, you may just have more trouble, or take more time trying to get things to work correctly.

Conclusion

So what does all of this mean? Well, when thinking about jobs or projects that you want to do, picking a language can make those projects significantly harder or easier. Python will shine working on the back-end while JavaScript will shine while working on the front-end. Neither one is necessarily a better choice over the other, it just depends on what YOU want to do. Most people after learning one will go and learn the other. After all, coding languages are just tools, and having different tools will make you more desirable as a new hire.

Sources Used

What's the Deal with Arrays and Objects?

Dakota Day — Fri, 19 Apr 2024 21:20:26 +0000

We all know arrays and objects, right? Sure, but what are some key differences between the two? Let's start with some ways that the two are similar: well, they're both complex data types for starters, meaning that they can hold a multitude of other datatypes within themselves, including other arrays and objects! Both also a have way to loop through the data they contain.

Here's two examples that we'll use throughout this reading:

let dataTypesArr = ['string', 1, true, ['array'], {key: 'value'}];

let dataTypesObj = {
  string: 'string',
  number: 4,
  boolean: true,
  array: [1, 2, 3],
  object: {inner: true}
};

Access... Granted?

We now know that these two datatypes can hold other datatypes, but how do we access them? This is where some key differences begin to show.

Arrays

Arrays can be accessed by using bracket notation. Since arrays can have their data organized, they contain an index which keeps track of what is where. They also have a length property which is handy for looping.

console.log(dataTypesArr[0]); //This prints the value held at the
                              //0 index which is 'string' here

//For loops allow us to access all of the data if we wanted to
for(let i = 0; i < dataTypesArr.length; i++){
  console.log(dataTypesArr[i])
}
//This loop prints whatever value is held at the i index during
//that iteration, and it runs until it is out of data to iterate
//through

Objects

Objects have the ability to be accessed using bracket or dot notation. Keep in mind if you decide to use bracket notation for accessing objects, you have to include the quotes inside the brackets to notate you want to access that literal keyName. They do not have a length property and their data is not organized. Objects also have a special way to loop through their stored data.

console.log(dataTypesObj.number); //Prints value held at the 
                                  //'number' key, which is 4
console.log(dataTypesObj['boolean']); //Prints value held at the 
                                    //'boolean' key, which is true

//To loop through an object, you have to use a for-in loop
for(let key in dataTypesObj){
  console.log(key); //This prints all of the keys
  console.log(dataTypesObj[key]);
} 
//Here you wouldn't put key in quotes because key is used as a
//variable. If you used quotes, the program would try to find the
//key named 'key'. This will print all of the values held at each
//key.

Manipulation?

Now we know how to access them, but how can we manipulate the data with arrays and objects? Easy, actually. Both types have their own ways to change, or mutate, their data

Arrays

Starting with arrays again, you can put new data in, or take it out. People most commonly use array methods to accomplish this.

//.push() and .unshift() add data to the end and beginning of the
//array respectively
datatypesArr.push(5); //adds 5 to the end of the array
datatypesArr.unshift(10); //adds 10 to the beginning of the array

//.pop() and .shift() remove data from the end and beginning of
//the array respectively
datatypesArr.pop(); //removes the last value
datatypesArr.shift(); //removes the first value

Objects

Objects are really easy to manipulate, no methods needed!

//Say we want to add a new piece of data called name
dataTypesObj.name = 'Dakota'; //Adds new key/value pair:
                              //name: 'Dakota'
dataTypesObj['age'] = 27; //Also works with bracket notation!

//If we wanted to delete our newly created data, just use the
//delete keyword
delete dataTypesObj.name; //deletes name: 'Dakota'
delete dataTypesObj['age']; //deletes age: 27

Conclusions

Just remember, arrays and objects are really only similar in the way that they are complex data types and that they can loop. They each have their own ways to loop, access, and manipulate the inner data. Hopefully this information helps if you're struggling to get the hang of arrays and objects. Good luck on your own coding adventure!