I recently participated in the TikTok TechJam hackathon and developed "TikTok Concerts," a platform enhancing live concert experiences on TikTok Live. The project features event scheduling, a global events map, and user interfaces for artists and fans, built using Next.js, TypeScript, React, and Tailwind CSS. If you find the project interesting, please explore the platform and consider voting for it in the hackathon!

I just submitted my project for the TikTok TechJam hackathon!

For those who don't know, TikTok just held its first hackathon. TechJam is a hackathon open to college students, with multiple tracks to choose from. I chose the music discovery track. The goal was to create a project that enhances artist exposure on TikTok, promotes diverse content discovery, boosts the viral potential of music on TikTok, and increases engagement and interaction between artists and fans.

TikTok is a social media platform known for its short videos, and it has become a major player in the music industry. Many artists have gained popularity through viral TikTok videos, making it an important platform for music discovery and promotion.

Overview of TikTok Concerts

My project, titled TikTok Concerts, is designed to enhance the experience of watching live concerts on TikTok Live. It offers several features to help artists and users connect more easily.

The inspiration for this project came from an event called TikTok In The Mix. This event was the first global live concert and set the record for the biggest live event ever on TikTok. Since it was so popular, I thought it would be a good idea to create features that enhance the live concert experience for both artists and fans. These features will encourage artists to share their performances on TikTok Live and invite fans to watch through the TikTok app. It will also help smaller artists reach a wider audience.

What it Does

My project supports the following main features:

• Event Scheduling: Artists can schedule their live performances and make them publicly available.

• Global Events Map: A dynamic map showing all scheduled events worldwide.

Fans can go to /users to see upcoming events on a dynamic map and view details like the date and description of each event. Artists can go to /artists to see events they have scheduled, delete events, update events, and add new events. The website is also designed to be responsive on smaller screens.

For example, an artist can schedule a live performance, and fans can easily find and join the event through the global events map. This makes it easier for artists to promote their events and for fans to discover new music.

How I Built it

This project is built using the following technologies:

• Framework: Next.js

• Language: TypeScript

• UI Library: React

• Styling: Tailwind

• Database: MongoDB

• API: Integration with Google Maps API

• Deployment: Vercel

I used Next.js with React to create the pages, app layout, client components, and server components. I used TypeScript for type safety and to create interfaces. I used MongoDB to design the database event schema and model.

Next.js was chosen for its powerful features like server-side rendering and static site generation, which help improve performance and SEO. TypeScript ensures type safety and reduces runtime errors, while Tailwind CSS provides a utility-first approach to design, ensuring responsive and consistent styling.

Background and Technology Overview

Introduction to Next.js

Next.js is a powerful, open-source JavaScript framework built on top of React, created by Vercel (formerly known as ZEIT). It offers a robust set of features for building modern web applications, including server-side rendering (SSR), static site generation (SSG), and automatic code splitting. These capabilities make Next.js an excellent choice for developers looking to create high-performance, SEO-friendly web applications.

Key Features of Next.js Relevant to the Project

The "TikTok Concerts" project uses several important features of Next.js to build a dynamic, responsive, and high-performance web application. Here’s a detailed look at how these features are used:

1. App directory structure and nested routing

   • The app directory provides a more intuitive and nested routing system. For example, routes for artists and users are organized within subdirectories, making the code easier to maintain.

2. Server actions

   • Data Fetching: Instead of traditional API routes, server actions fetch data directly within components, reducing the need for client-side fetching and improving performance.

   • Data Mutations: Actions like creating, updating, or deleting events are handled server-side within the component's scope. This streamlines the logic and enhances security.

3. Server side rendering

   • In Next.js you can create server components to render UI on the server

   • Server components can improve performance by reducing the amount of client-side rendering

   • Server-side rendering helps with search engine optimization (SEO) because search engines can crawl and index content more effectively when it's rendered on the server.

4. Next.js router cache

   • Next.js Router Cache improves page navigation by storing the results of data fetching for each page.

   • Faster Navigation: Pages you have visited before load almost instantly when you revisit them, improving the user experience.

   • Efficient Data Management: Reduces unnecessary data fetching, improving overall application performance.

5. TypeScript Integration

   • TypeScript enhances code quality with type safety and clear data structures

   • Type Safety: Reduces runtime errors and improves development efficiency.

   • Interfaces and Types: Ensures consistency across the codebase.

6. Tailwind Integration

   • Tailwind CSS provides a utility-first approach to design, ensuring responsive and consistent styling across components

   • Responsive Design: The design adapts to different devices, ensuring a consistent and user-friendly experience.

   • Consistent Styling: Simplifies the styling process using reusable utility classes.

User Experience Design

UI/UX Principles for Engagement

1. Responsive Design: Ensures the website is accessible and user-friendly on different devices, enhancing the overall user experience.

2. User and Artist Pages: Separate pages for users and artists to manage and view events, offering a customized experience for each type of user.

3. Interactive Features: Includes elements like event details and descriptions to engage users and provide them with relevant information.

Development Process

Feel free to follow along with my code by visiting the GitHub repo.

Setting Up the Development Environment with Next.js

I started by setting up a new Next.js project with TypeScript support:

npx create-next-app@latest

From there, I answered the prompts in the terminal as follows:

1. What is your project named? tiktok-concerts

2. Would you like to use TypeScript? Yes

3. Would you like to use ESLint? Yes

4. Would you like to use Tailwind CSS? Yes

5. Would you like to use src/ directory? Yes

6. Would you like to use App Router? (recommended) Yes

7. Would you like to customize the default import alias (@/*)? No

After answering these prompts, your project will be configured as specified, and all the dependencies will be automatically installed.

Building the page routes

Within my src directory, I created a new folder called app to store all the page routes. The app folder contains the following items:

• A CSS file that imports Tailwind, where you can also define custom CSS rules.

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

• A home page

    "use client";
    import React from 'react';
  
    /**
     * Home page component
     * 
     * @returns The home page component.
     */
    export default function Home() {
      return (
        <main className="flex flex-col items-center gap-10 justify-between p-4 sm:p-8 md:p-16 lg:p-24">
          <h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold my-4">Welcome to TikTok Concerts!</h1>
          <p className="text-sm sm:text-base md:text-lg lg:text-xl">Discover live streamed concerts and performances near you.</p>
        </main>
      );
    }
  

• An app layout that imports the CSS file, defines metadata for the homepage, and contains the content inherited throughout the rest of the app.

import type { Metadata } from "next";
import "./globals.css";
import React from "react";
import ToggleMenu from "@/components/ToggleMenu";

// Metadata for the layout.
export const metadata: Metadata = {
  title: "TikTok Concerts",
  description: "Watch your favorite artists perform live on TikTok."
};

/**
 * Root layout component.
 * 
 * @param children - The content to be rendered within the layout.
 * 
 * @returns The layout component.
 */
export default async function RootLayout({
  children,
  }: Readonly<{
    children: React.ReactNode;
  }>) {
    return (
      <html lang="en">
      <body>
        <div className="flex flex-col h-screen justify-between">
          <ToggleMenu />

          <main className="mb-auto p-4 h-fit">
            {children}
          </main>

          <footer className="h-10 text-center">
            <p>
            Disclaimer: This project, TikTok Concerts, is not officially affiliated with, endorsed by, or sponsored by TikTok. All trademarks and copyrights are the property of their respective owners.
            </p>
            <p>&copy; 2024 Sirus Salari. All rights reserved</p>
          </footer>
        </div>
      </body>
      </html>
    );
}

• A separate folder for each page, including /about, /artists, /update, and /users

  • Within each folder, there is a page.tsx file where you write out the HTML for the page, and import components

  • Additionally, within each folder, there is a layout.tsx file where you define metadata for that page and inherit the root app layout.

Creating the components

Within the src directory, there's a folder called components. Inside the components directory, I created the following components:

• EventCard - A server component that effectively fetches, displays, and provides options to delete or update events in a user-friendly manner

    import React from 'react';
    import { deleteEvent, getEvents } from "@/lib/action";
  
    /**
     * Get all events.
     * 
     * @returns All events.
     */
    export default async function GetEvents() {
        try {
            const events = await getEvents();
            if (events.length === 0) {
                return <h1>No Events</h1>;
            } else {
                return (
                    <div className='grid grid-rows-1 md:grid-rows-2 lg:grid-rows-3 gap-5'>
                        {events.map((event: any) => (
                            <div key={event._id} className='p-5 border rounded shadow-md'>
                                <h3 className='text-center text-lg md:text-xl lg:text-2xl font-bold'>{event.title as string}</h3>
                                <p className='text-sm md:text-base lg:text-lg'><b>Description: </b>{event.description as string}</p>
                                <p className='text-sm md:text-base lg:text-lg'><b>Date: </b>{event.date as string}</p>
                                <p className='text-sm md:text-base lg:text-lg'><b>Address: </b>{event.address as string}</p>
                                <p className='text-sm md:text-base lg:text-lg'>{event.city as string}</p>
                                <p className='text-sm md:text-base lg:text-lg'>{event.state as string}</p>
                                <p className='text-sm md:text-base lg:text-lg'>{event.zip as string}</p>
                                <form action={deleteEvent} className='m-4'>
                                    <input hidden type="text" name="id" defaultValue={event._id.toString()}/>
                                    <button type="submit" className='hover:bg-gradient-to-r from-splash to-razzmatazz hover:text-black inline-flex justify-center py-2 px-4 sm:px-6 md:px-8 lg:px-10 border border-transparent shadow-sm text-sm sm:text-base md:text-lg lg:text-xl font-medium rounded-md text-white'>Delete</button>
                                </form>
                                <form action="/update" className='m-4'>
                                    <input hidden type="text" name="id" defaultValue={event._id.toString()}/>
                                    <button className='hover:bg-gradient-to-r from-splash to-razzmatazz hover:text-black inline-flex justify-center py-2 px-4 sm:px-6 md:px-8 lg:px-10 border border-transparent shadow-sm text-sm sm:text-base md:text-lg lg:text-xl font-medium rounded-md text-white'>Update</button>
                                </form>
                            </div>
                        ))}
                    </div>
                );
            }
        } catch (error) {
            console.log(error);
        }
    };
  

  • This component is used in the /artists page, and imports the server actions for deleting and fetching events

  • First, a call is made to the getEvents server action. If no data is returned, the component will display HTML stating that there are no events.

  • If data is returned, each event in the array is mapped to a div with the key attribute set to the MongoDB ObjectID value of the event.

  • Within the div, there are child elements to display the event's details, such as the title, description, date, address, city, state, and zip code.

  • Additionally, each div contains two forms: a delete form that submits to the deleteEvent server action with the event's ObjectID as a hidden input, and an update form that redirects to /update with the event's ObjectID as a hidden input.

  • Events are displayed in a responsive grid layout that adjusts the number of rows based on the screen size.

• EventForm - A client component that provides a user-friendly interface for creating and submitting new events, with responsive design and consistent styling

    "use client";
    import { createEvent } from "@/lib/action";
    import React, { useRef } from "react";
  
    /**
     * Event form component.
     * 
     * @returns The event form component.
     */
    export default function EventForm() {
        // Create a reference to the form element
        const ref = useRef<HTMLFormElement>(null);
  
        const inputStyle = {
            color: 'black',
            backgroundColor: 'white',
            border: '1px solid black',
            padding: '8px',
            display: 'block',
            width: '100%',
            borderRadius: '5px',
        };
  
        return (
            <div className='container mx-auto px-4 sm:px-8 md:px-16 lg:px-24'>
                <h2 className='text-center m-4 text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold'>Add Event</h2>
                <form className='space-y-4' autoComplete="off" ref={ref} action={async (FormData) => {
                    ref.current?.reset();
                    await createEvent(FormData);
                }}>
                    <div>
                        <label htmlFor="title" className='block text-sm sm:text-base md:text-lg lg:text-xl font-medium text-gray-700'>Title</label>
                        <input type="text" name="title" id='title' style={inputStyle} required />
                    </div>
                    <div>
                        <label htmlFor="description" className='block text-sm sm:text-base md:text-lg lg:text-xl font-medium text-gray-700'>Description</label>
                        <textarea id='description' name="description" style={inputStyle} required />
                    </div>
                    <div>
                        <label htmlFor="date" className='block text-sm sm:text-base md:text-lg lg:text-xl font-medium text-gray-700'>Date</label>
                        <input type="date" name="date" id='date' style={inputStyle} required />
                    </div>
                    <div>
                        <label htmlFor="address" className='block text-sm sm:text-base md:text-lg lg:text-xl font-medium text-gray-700'>Address</label>
                        <input type="text" name="address" id='address' style={inputStyle} required />
                    </div>
                    <div>
                        <label htmlFor="city" className='block text-sm sm:text-base md:text-lg lg:text-xl font-medium text-gray-700'>City</label>
                        <input type="text" name="city" id='city' style={inputStyle} required />
                    </div>
                    <div>
                        <label htmlFor="state" className='block text-sm sm:text-base md:text-lg lg:text-xl font-medium text-gray-700'>State</label>
                        <input type="text" name="state" id='state' style={inputStyle} required />
                    </div>
                    <div>
                        <label htmlFor="zip" className='block text-sm sm:text-base md:text-lg lg:text-xl font-medium text-gray-700'>Zip</label>
                        <input type="text" name="zip" id='zip' style={inputStyle} required />
                    </div>
                    <button type='submit' className='hover:bg-gradient-to-r from-splash to-razzmatazz hover:text-black inline-flex justify-center py-2 px-4 sm:px-6 md:px-8 lg:px-10 border border-transparent shadow-sm text-sm sm:text-base md:text-lg lg:text-xl font-medium rounded-md text-white'>Submit</button>            
                </form>
            </div>
        );
    };
  

  • This component is used in the /artists page, and imports the server action for creating events, as well as the useRef React Hook

  • First, I created a reference to the form element with useRef, and this reference will be used later on to reset the form fields after submission

  • The component returns a form where the action attribute is set to an async function that first resets the form, then calls createEvent with the form data

  • The form includes several input fields for title, description, address, city, state, and zip.

• EventList - A server component that effectively fetches and displays events in a user-friendly manner, ensuring a responsive and organized presentation of event details

    import React from 'react';
    import { getEvents } from "@/lib/action";
  
    /**
     * Get all events.
     * 
     * @returns All events.
     */
    export default async function GetEvents() {
        try {
            // Get all events
            const events = await getEvents();
            if (events.length === 0) {
                return <h1>No Events</h1>;
            } else {
                return (
                    <div className='grid grid-rows-1 md:grid-rows-2 lg:grid-rows-3 gap-5'>
                        {events.map((event: any) => (
                            <div key={event._id} className='p-5 border rounded shadow-md'>
                                <h3 className='text-lg text-center md:text-xl lg:text-2xl font-bold'>{event.title as string}</h3>
                                <p className='text-sm md:text-base lg:text-lg'><b>Description:</b> {event.description as string}</p>
                                <p className='text-sm md:text-base lg:text-lg'><b>Date:</b> {event.date as string}</p>
                                <p className='text-sm md:text-base lg:text-lg'><b>Address:</b> {event.address as string}</p>
                                <p className='text-sm md:text-base lg:text-lg'>{event.city as string}</p>
                                <p className='text-sm md:text-base lg:text-lg'>{event.state as string}</p>
                                <p className='text-sm md:text-base lg:text-lg'>{event.zip as string}</p>
                            </div>
                        ))}
                    </div>
                );
            }
        } catch (error) {
            console.log(error);
        }
    };
  

  • This component is used in the /users page, and imports the server action for fetching events

  • First, a call is made to getEvents to fetch the list of events. If the array is empty, it returns HTML stating that there are no events

  • If there are events in the array, each event is mapped to a div with the key attribute set to the event's ObjectID, with child elements to display the title, description, date, address, city, state, and zip.

  • The events are displayed in a responsive grid layout that adjusts the number of rows based on the screen size.

• Map - A client component that provides a dynamic and interactive map that displays event locations with markers, enhancing the user experience with geocoding and responsive design

    'use client'
    import React, { useCallback, useState } from 'react';
    import { GoogleMap, Marker, useJsApiLoader} from '@react-google-maps/api';
    import { Event } from '@/types/event';
  
    const mapContainerStyle = {
        width: '100%',
        height: '100%'
    };
  
    // Map component props
    interface MapProps {
        events: Event[];
    }
  
    const nightModeStyles = [
        { elementType: "geometry", stylers: [{ color: "#242f3e" }] },
        { elementType: "labels.text.stroke", stylers: [{ color: "#242f3e" }] },
        { elementType: "labels.text.fill", stylers: [{ color: "#746855" }] },
        {
          featureType: "administrative.locality",
          elementType: "labels.text.fill",
          stylers: [{ color: "#d59563" }],
        },
        {
          featureType: "poi",
          elementType: "labels.text.fill",
          stylers: [{ color: "#d59563" }],
        },
        {
          featureType: "poi.park",
          elementType: "geometry",
          stylers: [{ color: "#263c3f" }],
        },
        {
          featureType: "poi.park",
          elementType: "labels.text.fill",
          stylers: [{ color: "#6b9a76" }],
        },
        {
          featureType: "road",
          elementType: "geometry",
          stylers: [{ color: "#38414e" }],
        },
        {
          featureType: "road",
          elementType: "geometry.stroke",
          stylers: [{ color: "#212a37" }],
        },
        {
          featureType: "road",
          elementType: "labels.text.fill",
          stylers: [{ color: "#9ca5b3" }],
        },
        {
          featureType: "road.highway",
          elementType: "geometry",
          stylers: [{ color: "#746855" }],
        },
        {
          featureType: "road.highway",
          elementType: "geometry.stroke",
          stylers: [{ color: "#1f2835" }],
        },
        {
          featureType: "road.highway",
          elementType: "labels.text.fill",
          stylers: [{ color: "#f3d19c" }],
        },
        {
          featureType: "transit",
          elementType: "geometry",
          stylers: [{ color: "#2f3948" }],
        },
        {
          featureType: "transit.station",
          elementType: "labels.text.fill",
          stylers: [{ color: "#d59563" }],
        },
        {
          featureType: "water",
          elementType: "geometry",
          stylers: [{ color: "#17263c" }],
        },
        {
          featureType: "water",
          elementType: "labels.text.fill",
          stylers: [{ color: "#515c6d" }],
        },
        {
          featureType: "water",
          elementType: "labels.text.stroke",
          stylers: [{ color: "#17263c" }],
        },
    ];
  
    /**
     * Map component.
     * 
     * @param {MapProps} props Map component props.
     * @returns {JSX.Element} Map component.
     */
    export default function Map({ events }: MapProps) {
        let geocoder: google.maps.Geocoder;
        const [geocodedEvents, setGeocodedEvents] = useState(events);
  
        /**
         * Geocode the events.
         * 
         * @returns {void}
         * @throws {Error} Geocoding failed for address.
         * @returns {Promise<Event[]>} The geocoded events.
         */
        const geocode = useCallback(() => {
            geocoder = new google.maps.Geocoder();
  
            // Geocode the events
            const geocodePromises: Promise<Event>[] = events.map(event => new Promise((resolve, reject) => {
                const address = `${event.address}, ${event.city}, ${event.state} ${event.zip}`;
                geocoder.geocode({ address: address }, (results, status) => {
                    if (status === 'OK' && results !== null) {
                        event.latitude = results[0].geometry.location.lat().toString();
                        event.longitude = results[0].geometry.location.lng().toString();
                        resolve(event);
                    } else {
                        reject(new Error(`Geocoding failed for address: ${event.address}`));
                    }
                });
            }));
            // Set the geocoded events
            Promise.all(geocodePromises)
                .then(geocodedEvents => {
                    setGeocodedEvents(geocodedEvents);
                })
                .catch(error => console.error(error));
        }, [events]);
  
        // Load the Google Maps API
        const { isLoaded } = useJsApiLoader({
            id: 'google-map-script',
            googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY!,
        })
  
        return (
            <div className='w-full h-64 sm:h-96 md:h-128 lg:h-256'>
                {isLoaded && <GoogleMap options={{ styles: nightModeStyles }} mapContainerStyle={mapContainerStyle} center={
                    {
                        lat: parseFloat(geocodedEvents[0].latitude) || 0,
                        lng: parseFloat(geocodedEvents[0].longitude) || 0
                    }
                } zoom={4} onLoad={geocode}>
                    {geocodedEvents.map(event => (
                        <Marker key={event._id} position={{ lat: parseFloat(event.latitude), lng: parseFloat(event.longitude) }} />
                    ))}
                </GoogleMap>}
            </div>
        );
    }
  

  • This component is used in the /users page, and imports the event interface, the useCallback and useState React Hooks, as well as the GoogleMap, Marker, and useJsApiLoader components from the react-google-maps/api library

  • First, I defined the map component properties which is an array of events where each event is of type Event (as defined and imported by the event interface)

  • Next, I set up a function to geocode the addresses (the Google Maps API requires longitude and latitude data to place markers on a mp)

  • The geocode function uses the useCallback hook, and maps over the events array and creates a promise for each event to geocode its address

  • If geocoding is successful, it updates the event's latitude and longitude

  • If geocoding fails, it rejects the promise with an error

  • Promise.all is used to wait for all geocoding promises to resolve, and the geocodedEvents state is updated with the results

  • The component then returns a div with responsive height classes

  • If the Google Maps API is loaded, it renders a GoogleMap component with the following properties

    • options: sets the map styles to nightModeStyles

    • mapContainerStyle: sets the container style to mapContainerStyle

    • center: sets the initial center of the map to the latitude and longitude of the first geocoded event

    • zoom: sets the initial zoom level to 4

    • onLoad: calls the geocode function when the map loads

  • Inside the GoogleMap component, it maps over the geocodedEvents array and renders a marker for each event at its geocoded position

• ToggleMenu - A client component that provides a responsive and interactive header, enhancing the user experience with a mobile-friendly navigation menu

    'use client';
    import { useState, useEffect } from 'react';
    import { usePathname } from 'next/navigation';
    import { FaBars, FaTimes } from 'react-icons/fa';
    import Link from 'next/link';
  
    /**
     * Header component.
     * 
     * @returns {JSX.Element} Header component.
     */
    export default function Header () {
        const [isOpen, setIsOpen] = useState(false);
        const pathname = usePathname();
  
        const toggleMenu = () => {
            setIsOpen(!isOpen);
        };
  
        // Close the menu when the path changes
        useEffect(() => {
            setIsOpen(false);
        }, [pathname]);
  
        return (
            <header className="bg-gradient-to-r from-splash to-razzmatazz text-black p-4">
                <div className="container mx-auto flex justify-between items-center">
                    <h1 className="text-2xl font-bold">TikTok Concerts</h1>
                    <div className="text-2xl lg:hidden" onClick={toggleMenu}>
                        {isOpen ? <FaTimes /> : <FaBars />}
                    </div>
                    <nav className={`hidden lg:flex space-x-4`}>
                        <Link href="/" className="hover:underline font-bold p-2">Home</Link>
                        <Link href="/about" className="hover:underline font-bold p-2">About</Link>
                        <Link href="/users" className="hover:underline font-bold p-2">Users</Link>
                        <Link href="/artists" className="hover:underline font-bold p-2">Artists</Link>
                        <Link target="_blank" href="https://github.com/sirus-the-beaver/tiktok-concerts" className="hover:underline font-bold p-2">GitHub Repo</Link>
                    </nav>
                </div>
                {isOpen && (
                    <nav className="bg-gray-800 lg:hidden">
                        <ul className="flex flex-col items-center space-y-2 p-4">
                            <li><Link href="/" className="hover:underline font-bold block p-2">Home</Link></li>
                            <li><Link href="/about" className="hover:underline font-bold block p-2">About</Link></li>
                            <li><Link href="/users" className="hover:underline font-bold block p-2">Users</Link></li>
                            <li><Link href="/artists" className="hover:underline font-bold block p-2">Artists</Link></li>
                            <li><Link target="_blank" href="https://github.com/sirus-the-beaver/tiktok-concerts" className="hover:underline font-bold block p-2">GitHub Repo</Link></li>
                        </ul>
                    </nav>
                )}
            </header>
        );
    };
  

  • This component is used in the root app layout, and imports the useState and useEffect React Hooks, the usePathname Next.js component, the FaBars and FaTimes React icons, and the Link React component

  • First, I set a state variable, isOpen, to false to manage the menu's open/close state

  • Next, I define the toggleMenu function which toggles the isOpen state between true and false

  • The useEffect hook is used to close the menu whenever the path changes (a user clicks a link to go to another page)

  • The component returns a header element with a div for the menu icon that toggles the menu on click, visible only on smaller screens, as well as a nav that is visible only on larger screens

  • If isOpen is true, a secondary nav is rendered for smaller screens

  • The header is responsive, with different navigation layouts for larger and smaller screens

• UpdateEventForm - A client component that provides a user-friendly interface for updating an existing event, with responsive design and consistent styling

    'use client';
    import { updateEvent } from '@/lib/action';
    import React, { useRef } from 'react';
    import { redirect } from 'next/navigation';
  
    /**
     * Update event form component.
     * 
     * @returns The update event form component.
     */
    export default function UpdateEventForm({eventId}: {eventId: string}) {
        const ref = useRef<HTMLFormElement>(null);
  
        const inputStyle = {
            color: 'black',
            backgroundColor: 'white',
            border: '1px solid black',
            padding: '8px',
            display: 'block',
            width: '100%',
            borderRadius: '5px',
        };
  
        /** 
         * Handle the form submission.
         * 
         * @param FormData - The form data.
         * 
         * @returns The updated event.
        */
        const actionHandler = async (FormData: any) => {
            ref.current?.reset();
            await updateEvent(FormData);
  
            redirect('/artists');
        }
  
        return (
            <div className='container mx-auto px-4 sm:px-8 md:px-16 lg:px-24'>
                <h2 className='text-center m-4 text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold'>Update Event</h2>
                <form autoComplete="off" className='space-y-4' ref={ref} action={actionHandler}>
                    <input hidden type="text" name="id" id='id' defaultValue={eventId}/>
                    <div>
                        <label htmlFor="title" className='block text-sm sm:text-base md:text-lg lg:text-xl font-medium text-gray-700'>Title</label>
                        <input type="text" name="title" id='title' style={inputStyle}/>
                    </div>
                    <div>
                        <label htmlFor="description" className='block text-sm sm:text-base md:text-lg lg:text-xl font-medium text-gray-700'>Description</label>
                        <textarea id='description' name="description" style={inputStyle} />
                    </div>
                    <div>
                        <label htmlFor="date" className='block text-sm sm:text-base md:text-lg lg:text-xl font-medium text-gray-700'>Date</label>
                        <input type="date" name="date" id='date' style={inputStyle} />
                    </div>
                    <div>
                        <label htmlFor="address" className='block text-sm sm:text-base md:text-lg lg:text-xl font-medium text-gray-700'>Address</label>
                        <input type="text" name="address" id='address' style={inputStyle} />
                    </div>
                    <div>
                        <label htmlFor="city" className='block text-sm sm:text-base md:text-lg lg:text-xl font-medium text-gray-700'>City</label>
                        <input type="text" name="city" id='city' style={inputStyle} />
                    </div>
                    <div>
                        <label htmlFor="state" className='block text-sm sm:text-base md:text-lg lg:text-xl font-medium text-gray-700'>State</label>
                        <input type="text" name="state" id='state' style={inputStyle} />
                    </div>
                    <div>
                        <label htmlFor="zip" className='block text-sm sm:text-base md:text-lg lg:text-xl font-medium text-gray-700'>Zip</label>
                        <input type="text" name="zip" id='zip' style={inputStyle} />
                    </div>
                    <button type='submit' className='hover:bg-gradient-to-r from-splash to-razzmatazz hover:text-black inline-flex justify-center py-2 px-4 sm:px-6 md:px-8 lg:px-10 border border-transparent shadow-sm text-sm sm:text-base md:text-lg lg:text-xl font-medium rounded-md text-white'>Update</button>            </form>
            </div>
        )
    }
  

  • This component is used in the /update page, and imports the server action for updating events, as well as the useRef React Hook, and the redirect function from Next.js

  • First, I defined a reference to the form with useRef, which will be used later on to reset the form after submission

  • Next, I define the actionHandler function which is an async function that handles the form submission. It resets the form fields, calls updateEvent with the form data, and then redirects the user to the /artists page after the event is updated

  • The component returns a form with the action attribute set to the actionHandler function

  • The form includes several input fields including, ID (a hidden input field for the event ID, pre-filled with the eventId prop), title, description, date, address, city, state, and zip

  • The form fields are not marked as required, allowing for partial updates

Defining the server actions

Within my src directory, I created another directory called lib, where I added a file named action.ts that contains the server actions.

'use server';
import Event from "@/models/Event";
import { revalidatePath } from "next/cache";
import { connectToDatabase } from "./db";

/**
 * Get all events.
 * 
 * @returns The events.
 */
export async function getEvents() {
    await connectToDatabase();

    try {
        const data = await Event.find();
        return JSON.parse(JSON.stringify(data));
    } catch (error) {
        console.log(error);
        return [];
    }
}

/**
 * Create a new event.
 * 
 * @param formData - The form data.
 * 
 * @returns The new event.
 */
export async function createEvent(formData: FormData) {
    // Connect to the database
    await connectToDatabase();

    // Get the form data
    const title = formData.get('title') as string;
    const description = formData.get('description') as string;
    const date = formData.get('date') as string;
    const address = formData.get('address') as string;
    const city = formData.get('city') as string;
    const state = formData.get('state') as string;
    const zip = formData.get('zip') as string;

    try {
        // Create a new event
        const newEvent = await Event.create({
            title,
            description,
            date,
            address,
            city,
            state,
            zip
        });

        newEvent.save();

        // Update the events page with the new event
        revalidatePath('/artists');
        revalidatePath('/users');
        return newEvent.toString();
    } catch (error) {
        console.log(error);
        return{message: 'Failed to create a new event'};
    }
};

/**
 * Delete an event.
 * 
 * @param id - The event id.
 * 
 * @returns The deleted event.
 */
export async function deleteEvent(id: FormData) {
    await connectToDatabase();
    const eventId = id.get('id') as string;

    try {
        await Event.deleteOne({ _id: eventId });
        revalidatePath('/artists');
        revalidatePath('/users');
        return (`Successfully deleted event with id ${eventId}`);
    } catch (error) {
        return {message: 'Failed to delete event'};
    }
};

/**
 * Update an event.
 * 
 * @param formData - The form data.
 * 
 * @returns The updated event.
 */
export async function updateEvent(formData: FormData) {
    await connectToDatabase();
    const eventId = formData.get('id');
    const event = await Event.findOne({ _id: eventId });
    const formerTitle = event?.title;
    const formerDescription = event?.description;
    const formerDate = event?.date;
    const formerAddress = event?.address;
    const formerCity = event?.city;
    const formerState = event?.state;
    const formerZip = event?.zip;

    try {
        await Event.updateOne({ _id: eventId },
            {
                title: formData.get('title') === '' ? formerTitle : formData.get('title'),
                description: formData.get('description') === '' ? formerDescription : formData.get('description'),
                date: formData.get('date') === '' ? formerDate : formData.get('date'),
                address: formData.get('address') === '' ? formerAddress : formData.get('address'),
                city: formData.get('city') === '' ? formerCity : formData.get('city'),
                state: formData.get('state') === '' ? formerState : formData.get('state'),
                zip: formData.get('zip') === '' ? formerZip : formData.get('zip')
            }
        );
        revalidatePath('/artists');
        revalidatePath('/users');
        return (`Successfully updated event with id ${eventId}`);
    } catch (error) {
        return {message: 'Failed to update event'};
    }
};

I started by importing the database event model, the revalidatePath function from Next.js, and a function that I created to connect to the MongoDB database.

The file contains the following server actions:

• getEvents

  • Fetches all events from the database

  • It first connects to the database, then tries to fetch all events

  • The fetched data is returned after converting it to JSON format

  • If an error occurs, it logs the error and returns an empty array

• createEvent

  • Creates a new event in the database

  • It first connects to the database, then extracts form data from the formData object

  • Next, it tries to create a new event and saves it

  • After creating the event, it revalidates the paths /artists and /users to purge cached data and update the events page (this step is necessary due to Next.js's client side router cache)

• deleteEvent

  • Deletes an event from the database

  • It first connects to the database, then extracts the event's ObjectID from the id form data

  • It then tries to delete the event, and afterwards, it revalidates the paths /artists and /users

  • updateEvent

    • Updates an existing event in the database

    • It first connects to the database, then extracts the event's ObjectID from the formData object

    • Next, it fetches the current event details so that any empty fields remain the same

    • It then tries to update the event, only changing fields that are not empty in the form data

    • After updating the event, it revalidates the paths /artists and /users

Connecting to the database and designing the event schema and model

Within the lib directory, I also created a file called db.ts where I define my function to connect to the database.

import mongoose, { Connection } from 'mongoose';

// Cache the connection to avoid connecting to the database multiple times
let cachedConnection: Connection | null = null;

/**
 * Connect to the database.
 * 
 * @returns The connection to the database.
 */
export async function connectToDatabase() {
    if (cachedConnection) {
        return cachedConnection;
    }
    try {
        const cnx = await mongoose.connect(process.env.MONGODB_URI!);

        cachedConnection = cnx.connection;

        return cachedConnection;
    } catch (error) {
        console.log(error);
        throw error;
    };
};

First, I imported the mongoose library. Then, I created a variable named cachedConnection to store the database connection, preventing multiple reconnections.

The connectToDatabase function is an async function that first checks if cachedConnection is not null. If a cached connection exists, it returns the cached connection. Otherwise, it tries to connect to the MongoDB database and then caches the connection.

Within the src directory, I created another directory called models and added a file named Event.ts. This is where I defined the event schema and model.

import mongoose, { Document, Model } from 'mongoose';

export interface IEvent {
    title: string;
    description: string;
    date: string;
    address: string;
    city: string;
    state: string;
    zip: string;
}

export interface IEventDocument extends IEvent, Document {
    _id: mongoose.Schema.Types.ObjectId;
    createdAt: Date;
    updatedAt: Date;
};

// Create a new schema for events
const eventSchema = new mongoose.Schema<IEventDocument>(
    {
        _id: { type: mongoose.Schema.Types.ObjectId, auto: true},
        title: { type: String, required: true },
        description: { type: String, required: true },
        date: { type: String, required: true },
        address: { type: String, required: true },
        city: { type: String, required: true },
        state: { type: String, required: true },
        zip: { type: String, required: true }
    },
    { timestamps: true }
);

// Create a new model for events
const Event: Model<IEventDocument> = 
    mongoose.models?.Event || mongoose.model('Event', eventSchema);

export default Event;

First, I imported the mongoose library. Then, I created a TypeScript interface that defines the structure of an event object.

Next, I created an interface that extends both IEvent and Document from mongoose which includes all properties from IEvent and adds _id (the ObjectID), createdAt, and updatedAt.

I then defined the eventSchema which is a mongoose schema for the IEventDocument interface. The schema defines the structure of the event documents in the database.

Finally, I created the Event model with the eventSchema, and check if a model named Event already exists to avoid redefining the model.

Challenges and Solutions

Handling authentication

Authentication was supposed to be handled with the TikTok Login Kit using NextAuth.js, but I faced configuration issues that caused errors related to missing tokens and issuer definitions. After troubleshooting and checking GitHub, I decided to skip authentication for the initial release.

Connection to the database

During development, I didn't have any issues connecting to the database. However, during deployment, I faced problems with server actions and database requests. The server wasn't fetching data correctly from the database, leading to session timeouts.

The issues were resolved by:

1. Ensuring the database connection was correctly established in each server action.

2. Revalidating pages after server actions to clear cached data.

Future Enhancements

Potential Features to Add

Looking ahead, I plan to add several features to the project:

• TikTok Authentication: Reattempting integration with the TikTok Login Kit.

• Enhanced Location Input: Allowing users to input just the name of a location rather than the full address.

• Notification System: Implementing a system to notify fans of upcoming concerts.

Conclusion

Building the TikTok Concerts platform using Next.js has been an exciting and rewarding experience.

By leveraging the powerful features of Next.js, TypeScript, React, and Tailwind CSS, I was able to create a dynamic and responsive web application that aims to enhance the live concert experience on TikTok Live. Despite facing challenges with authentication, I successfully implemented key features such as event scheduling, a global events map, and user-friendly interfaces for both artists and fans.

Looking ahead, I plan to add more features like TikTok authentication, enhanced location input, and a notification system to further improve the platform.

This project not only showcases the potential of modern web technologies but also aims to foster greater engagement and interaction between artists and their fans on TikTok.

Call to action

I hope you enjoyed learning about my project, TikTok Concerts. If you find it interesting and believe it can make a difference in enhancing live concert experiences on TikTok, I would greatly appreciate your support.

Please visit my website to explore the platform and see it in action: TikTok Concerts.

Additionally, if you like my project, please consider voting for my submission in the TikTok TechJam hackathon. Your vote can help bring more visibility to the project and support its development. You can vote for my submission here: Vote for TikTok Concerts.

Thank you for your support!

This article discusses the reasons to avoid using the 'var' keyword for variable declaration in JavaScript. It highlights the issues related to function-scoping, variable hoisting, and redeclaration without warnings that come with 'var'. In contrast, 'let' and 'const' are recommended for their benefits such as block-scoping, controlled hoisting, and protection against redeclaration. This leads to a more reliable and maintainable coding environment.

Scope of variables declared with var

Variables declared using the var keyword exhibit function-scoping behavior, which is different from the block-scoping behavior of variables declared with let or const. Function-scoped variables are accessible throughout the entire function in which they are declared, regardless of the block they are defined in. This can lead to unintended issues, especially when working with nested functions or blocks, as variables declared with var might be accessible in places where they were not intended to be used.

In contrast, block-scoped variables declared with let or const are only accessible within the block they are defined in, providing a more predictable and controlled environment for managing variable visibility and lifetime. This helps to reduce the likelihood of encountering bugs related to variable scope and makes the code easier to understand and maintain.

Variable hoisting

The second reason to avoid declaring variables with var is due to a phenomenon known as hoisting.

Hoisting is a phenomenon that takes place when all variable declarations are shifted, or hoisted, to the beginning of their respective scope before the code is executed. This process happens automatically by the JavaScript engine during the compilation phase. The consequence of hoisting is that variables declared with var can be accessed and manipulated before their actual declaration in the code, which can lead to unexpected results and make the code harder to understand and maintain.

In contrast, when using let and const for variable declarations, hoisting still occurs, but the variables are not initialized until their actual declaration is reached in the code. This creates a temporal dead zone (TDZ) between the beginning of the scope and the point of declaration, during which accessing or manipulating the variables would result in a ReferenceError. This behavior helps to prevent unintended consequences and encourages a more predictable coding environment.

Redeclaring variables

The last significant reason to avoid using var when declaring variables in JavaScript lies in the fact that variables declared with var can be re-declared without any warnings or error messages. This lack of feedback can result in unintentional overwriting of variables, which may lead to unexpected behavior in your code and create hard-to-find bugs.

When a variable is re-declared using var, the original value is simply replaced with the new one, and the code continues to execute without any indication that something may have gone wrong. This can be particularly problematic in larger codebases or when working with multiple developers, as it increases the likelihood of accidentally overwriting a variable that was intended to remain constant throughout the code.

In contrast, using let or const to declare variables provides a safeguard against this issue. If you attempt to re-declare a variable that has already been declared with let or const, JavaScript will throw an error, alerting you to the potential problem and preventing the code from executing further until the issue is resolved. This behavior encourages more predictable and reliable coding practices, reducing the risk of unintended consequences and promoting a more stable development environment.

Conclusion

In summary, although the var keyword in JavaScript was once the standard, its potential pitfalls make it less desirable compared to let and const.

The function-scoping behavior, hoisting peculiarities, and the possibility of re-declaration without warnings make var a less predictable and potentially riskier choice.

On the other hand, let and const provide block-scoping, controlled hoisting, and protection against re-declaration, fostering a more reliable and maintainable coding environment.

If you have any lingering questions or suggestions for an article you want me to cover in the future, feel free to leave a comment in the comment section below.

Lastly, make sure to follow my newsletter so you never miss out on when I post new content! When you subscribe to my newsletter, you'll be able to read my articles straight from your inbox as soon as they're released.

This article is part of a series called Bit by Bit, a series devoted to all things programming. Whether you're still a computer science undergrad or the CTO of Apple, there's something for you here.

New articles in this series are posted every Tuesday!

This article provides a step-by-step guide on building a web scraper using Python. It begins with understanding the URL structure of the target website, here CNN, and then importing necessary libraries like Selenium, requests, and BeautifulSoup. It explains how to load a URL and locate target elements using Selenium, along with error handling to avoid program crashes. The article also covers parsing the text of the articles using BeautifulSoup. Finally, it demonstrates the results by running the script and successfully scraping the text from a CNN article.

Discovering URL structure of target website

Before you can begin building a web scraper, you first have to understand the structure of the URLs that you'll be targeting.

In this tutorial, we'll be scraping text from CNN articles. So we'll start by heading to cnn.com and seeing if there's any search bar on the main webpage.

As we can see at the top right of the homepage, there's a little search icon. Let's next click on the icon and see where we're taken.

After clicking the search icon, we're taken to this search bar. Let's next search for a term and then see what URL we're taken to.

We're taken to this page where the URL is: https://www.cnn.com/search?q=programming&from=0&size=10&page=1&sort=newest&types=all&section.

We can now identify the structure for our target URLs. First, we have the protocol (https), then the domain (cnn.com), followed by the search subdomain path (/search) and finally the queries. As we can see from the first query pair (q=programming), this is where our search term that we typed into the search bar is placed in the URL. All of the other query pairs are default and can remain constant for our project.

Therefore that means that the only part of the URL that will be variable is the query pair "q=search term".

Now that we know our target URL structure, let's start building our webscraper.

Importing necessary libraries

Let's start by importing all of the necessary library components that we'll be using.

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.chrome.options import Options
from selenium.common.exceptions import TimeoutException
import requests
from bs4 import BeautifulSoup

We'll be using Selenium for loading the target URL and basic navigation on the target URL's webpage. Next, we'll be using requests and BeautifulSoup to load the article and parse the article's text.

Loading the URL using Selenium

Next, we'll define our target URL structure, and load the target URL with Selenium.

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.chrome.options import Options
from selenium.common.exceptions import TimeoutException
import requests
from bs4 import BeautifulSoup

def search_cnn(search_term):

    URL = "https://www.cnn.com/search?q=" + search_term + "&from=0&size=10&page=1&sort=newest&types=all&section="

    # Set up driver
    options = Options()
    options.add_argument("--headless")
    options.page_load_strategy = 'eager'
    driver = webdriver.Chrome(options=options)
    driver.get(URL)

As mentioned before, the only variable in our target URLs will be that search term, so we can just copy and paste the rest of the URL since those will remain constant.

Next, we're defining certain parts of the Options class taken from the Selenium module.

The options.add_argument("--headless") prevents the browser window from opening on the screen.

The options.page_load_strategy = 'eager' is changing the default value of "normal" to "eager". With "normal" as the value, the web driver will wait for all of the resources on a webpage to finish loading. On the other hand, "eager" just waits for basic HTML elements to load.

Finally, in the last 2 lines, we're setting up our Selenium WebDriver (a tool that allows us to load and navigate the webpage) and passing in our URL to the driver so it can start loading the webpage.

Locating target element(s) using Selenium

Before we proceed with adding more code to our program, let's inspect the webpage we're taken to after searching for a term, and see how we can target the first article on the page.

If we inspect the image corresponding to the article, we see that the image has an anchor tag that directs users to the article. So we can simply target this anchor tag by choosing one of its classes (we'll choose the "container__link" class) for the driver to look for after the page has loaded.

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.chrome.options import Options
from selenium.common.exceptions import TimeoutException
import requests
from bs4 import BeautifulSoup

def search_cnn(search_term):

    URL = "https://www.cnn.com/search?q=" + search_term + "&from=0&size=10&page=1&sort=newest&types=all&section="

    # Set up driver

    # Only load HTML
    options = Options()
    options.add_argument("--headless")
    options.page_load_strategy = 'eager'
    driver = webdriver.Chrome(options=options)
    driver.get(URL)

    try:
        # Wait for the page to load
        elem = WebDriverWait(driver, 15).until(
        EC.presence_of_element_located((By.CLASS_NAME, "container__link")))

        # Find the first article and click on it
        article = driver.find_element(By.CLASS_NAME, "container__link")
        article.click()

With the elem = WebDriverWait(driver, 15).until( EC.presence_of_element_located((By.CLASS_NAME, "container__link"))) lines, we're telling the driver to wait for the page to load the page until it finds a HTML tag with that class name. Additionally, we're adding a parameter (the 15) to mean that if it's been 15 seconds, then we can just stop loading the page.

Finally, after the element has loaded, we're simply going to use Selenium's click function so that the driver can click on the anchor tag that was located (which will take us to the URL of the first article that's on the search page).

Error handling

If you notice in the above code, there's a try block. Let's add in some error handling for when there's a timeout error by using the TimeoutException included in the Selenium library.

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.chrome.options import Options
from selenium.common.exceptions import TimeoutException
import requests
from bs4 import BeautifulSoup

def search_cnn(search_term):

    URL = "https://www.cnn.com/search?q=" + search_term + "&from=0&size=10&page=1&sort=newest&types=all&section="

    # Set up driver

    # Only load HTML
    options = Options()
    options.add_argument("--headless")
    options.page_load_strategy = 'eager'
    driver = webdriver.Chrome(options=options)
    driver.get(URL)

    try:
        # Wait for the page to load
        elem = WebDriverWait(driver, 15).until(
        EC.presence_of_element_located((By.CLASS_NAME, "container__link")))

        # Find the first article and click on it
        article = driver.find_element(By.CLASS_NAME, "container__link")
        article.click()

    except TimeoutException as e:
        results = "Page took too long to load"
        return results

With this error handling, we're simply preventing our program from crashing in the event that our target URL takes too long to load.

Parsing text using BeautifulSoup

Before continuing with writing more code, let's now inspect the webpage for the CNN article to see how we can identify the headline of an article as well as of the main text of the article.

As we can see, the headline for CNN articles is an h1 tag, so we can simply have BeautifulSoup parse the text of the h1 tag located on the webpage.

Next, let's identify the text of the article.

As we can see, CNN puts a class name of "paragraph" for all of the paragraphs that contain the article text. So we can simply have BeautifulSoup grab all of the elements with the class of "paragraph" and then parse the text inside.

Finally, let's parse the text that's in the article that we're taken to by the driver.

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.chrome.options import Options
from selenium.common.exceptions import TimeoutException
import requests
from bs4 import BeautifulSoup

def search_cnn(search_term):

    URL = "https://www.cnn.com/search?q=" + search_term + "&from=0&size=10&page=1&sort=newest&types=all&section="

    # Set up driver

    # Only load HTML
    options = Options()
    options.add_argument("--headless")
    options.page_load_strategy = 'eager'
    driver = webdriver.Chrome(options=options)
    driver.get(URL)

    try:
        # Wait for the page to load
        elem = WebDriverWait(driver, 15).until(
        EC.presence_of_element_located((By.CLASS_NAME, "container__link")))

        # Find the first article and click on it
        article = driver.find_element(By.CLASS_NAME, "container__link")
        article.click()

    except TimeoutException as e:
        results = "Page took too long to load"
        return results

    finally:
        current_url = driver.current_url

        page = requests.get(current_url)
        soup = BeautifulSoup(page.content, 'html.parser')
        headline = soup.find('h1').get_text().strip()
        paragraphs = soup.find_all(class_='paragraph')
        text = ''
        for paragraph in paragraphs:
            text += paragraph.text.strip()

        link = "Article found at: " + current_url
        results = (headline, text, link)

        driver.quit()

    return results

First, we're grabbing the current URL (the URL of the article that we're taken to by the driver) and we're sending a GET request using the requests library.

Next, we're using BeautifulSoup to parse the HTML on the page of the article.

As you can see for the paragraphs, we're using the find_all() method which will return a list of all of the elements that have the class of "paragraph". Therefore, in order to access the text within the paragraphs, we'll have to iterate over the list of paragraphs, parse the text for each of the paragraphs, and then add the pure text to a running string of text that we define before the for-loop.

Finally, we'll have the driver quit the browser session, and return our results as as tuple.

Putting it all together

Now that we finished writing our function, let's try running it as a script and see what we get.

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.chrome.options import Options
from selenium.common.exceptions import TimeoutException
import requests
from bs4 import BeautifulSoup

def search_cnn(search_term):

    URL = "https://www.cnn.com/search?q=" + search_term + "&from=0&size=10&page=1&sort=newest&types=all&section="

    # Set up driver

    # Only load HTML
    options = Options()
    options.add_argument("--headless")
    options.page_load_strategy = 'eager'
    driver = webdriver.Chrome(options=options)
    driver.get(URL)

    try:
        # Wait for the page to load
        elem = WebDriverWait(driver, 15).until(
        EC.presence_of_element_located((By.CLASS_NAME, "container__link")))

        # Find the first article and click on it
        article = driver.find_element(By.CLASS_NAME, "container__link")
        article.click()

    except TimeoutException as e:
        results = "Page took too long to load"
        return results

    finally:
        current_url = driver.current_url

        page = requests.get(current_url)
        soup = BeautifulSoup(page.content, 'html.parser')
        headline = soup.find('h1').get_text().strip()
        paragraphs = soup.find_all(class_='paragraph')
        text = ''
        for paragraph in paragraphs:
            text += paragraph.text.strip()

        link = "Article found at: " + current_url
        results = (headline, text, link)

        driver.quit()

    return results


if __name__ == '__main__':
    SEARCH_TERM = 'programming'
    print(search_cnn(SEARCH_TERM))

After running the script, we see all of the article text (along with the headline and link) printed out beautifully in the terminal.

Conclusion

In this tutorial, we walked through the steps of creating a web scraper using Python. We started with understanding the URL structure of our target website (CNN) and then proceeded to import necessary libraries like Selenium, requests, and BeautifulSoup.

We learned how to load a URL and locate target elements using Selenium. We also discussed error handling to avoid program crashes. Then, we parsed the text of the articles using BeautifulSoup.

Finally, we put it all together and ran our script, successfully scraping the text from a CNN article. This process showcases how Python can be very powerful in web scraping, opening up a wide range of possibilities for data collection and analysis.

If you have any lingering questions or suggestions for an article you want me to cover in the future, feel free to leave a comment in the comment section below.

Lastly, make sure to follow my newsletter so you never miss out on when I post new content! When you subscribe to my newsletter, you'll be able to read my articles straight from your inbox as soon as they're released.

This article is part of a series called Bit by Bit, a series devoted to all things programming. Whether you're still a computer science undergrad or the CTO of Apple, there's something for you here.

New articles in this series are posted every Tuesday!

In case you're not familiar, GitHub Copilot is GitHub's "AI pair programmer" that provides intelligent code completion and a chatbot capable of answering any programming-related questions.

The concept behind GitHub Copilot is to enable developers to generate code more quickly, primarily by minimizing the amount of typing needed for boilerplate code and saving time when searching for answers to questions. Instead of using Google to find a solution, you can simply enter your question into the chatbot integrated with your IDE and receive a detailed, customized answer for your program in seconds.

In this review, I will provide my honest feedback on my experience using GitHub Copilot in various contexts, such as learning a new programming language, learning and practicing machine learning in Python, and developing a personal project. I will discuss some of the standout features that I use, identify areas where I believe improvements could be made, and share my overall evaluation of Copilot.

To preface, although this is not a sponsored post, I am able to use Copilot for free as a university student. My access to GitHub's student developer pack, which includes a free Copilot subscription, is granted due to my student status. As a result, my review may be somewhat biased, as the average person would need to pay for a subscription.

In addition to the point above, as a student, my experience with Copilot may be biased because I lack professional experience as a software engineer. Consequently, I cannot attest to how Copilot would perform in a "real-world" setting.

My goal in this review is to offer insights into how Copilot functions, as well as its features and drawbacks, before someone decides to purchase a subscription for its use.

The Pros: Unveiling the Strengths

GitHub Copilot is an incredibly powerful developer tool that, at times, feels as if you have an additional developer by your side, attentively observing your every move and offering assistance. This unique characteristic can be both a strength and a weakness, depending on the specific situation. In this section, we will focus on the positive aspects and strengths of GitHub Copilot, shedding light on its capabilities and potential benefits for users.

As a cutting-edge AI-powered tool, GitHub Copilot brings a wealth of knowledge and experience to the table, assisting developers in writing code more efficiently and effectively. By providing real-time suggestions and recommendations, it can help streamline the development process, reduce the time spent on repetitive tasks, and even offer insights into best practices and coding standards.

Moreover, GitHub Copilot's ability to learn from a vast repository of code and adapt to individual coding styles makes it a versatile and valuable asset for developers across various skill levels and programming languages. This adaptability allows it to cater to the unique needs and preferences of each user, fostering a more personalized and productive coding experience.

In summary, GitHub Copilot's strengths lie in its powerful AI-driven capabilities, real-time assistance, and adaptability to individual coding styles. These features combine to create a tool that can significantly enhance the development process and help users achieve their goals more efficiently. However, it is essential to consider that this level of assistance can also present challenges in certain situations, which we will explore in the following sections.

Efficiency and productivity

One of the most appealing features of GitHub Copilot is how little code I sometimes need to type. In very simple scenarios, it can suggest precisely, or almost precisely, what I intended to type. Moreover, the suggestions aren't just brief lines here and there; Copilot's recommendations can span several lines and complete entire functions. Consequently, you naturally spend less time fussing with typing boilerplate code and code that feels rudimentary to type.

For example, I recently embarked on a learning journey through the free lectures hosted on FreeCodeCamp's website, aiming to complete the certification for "Machine Learning with Python". Throughout the entire process, I had Copilot as my trusty companion in VSCode. To my amazement, I found myself typing very little code, even when the lectures delved into more complex, code-heavy topics.

Since Copilot is trained on a vast array of code sources available online, I surmise that it may have been exposed to the code featured in these lectures, which also appears on the TensorFlow website. Regardless of whether this was the case, the experience of not having to type out any code and instead being able to concentrate on grasping the underlying concepts of machine learning was truly refreshing.

This was particularly beneficial considering that machine learning code often involves a significant amount of boilerplate code and intricate syntax that even seasoned developers aren't expected to recall by heart. In such scenarios, Copilot truly shines as an invaluable tool, enabling learners and developers to focus on understanding the principles and techniques of machine learning, rather than getting bogged down by the minutiae of code syntax and structure.

Consequently, you feel incredibly productive and efficient as a developer who is in the process of learning something new, since you can complete entire programs while also focusing on understanding the concepts.

Accuracy and usefulness

As previously mentioned, Copilot not only provides code suggestions at every step of the development process, but it also demonstrates remarkable accuracy in specific contexts.

For example, when I used Copilot while learning machine learning in Python, I was amazed to find that Copilot's code suggestions were accurate down to the finest details, even including the exact URL of the datasets I wanted to use in my programs. This level of accuracy is truly impressive and sets Copilot apart from other tools.

In my experience, I'd estimate that for basic tasks, Copilot's suggestions are accurate about 99% of the time. This makes Copilot an incredibly valuable resource for developers, especially when compared to traditional methods like Google searches, which don't always yield accurate results quickly. With Copilot, not only is the answer available in real-time, but you can also trust that it's highly likely to be accurate.

This high level of accuracy and real-time assistance can significantly improve a developer's workflow, reducing the time spent searching for solutions and increasing overall productivity. By providing reliable and contextually accurate suggestions, Copilot has the potential to become an indispensable tool for developers of all skill levels.

Time savings

Finally, let's discuss time savings. As suggested by my first point, Copilot saves a considerable amount of time that would otherwise be spent typing boilerplate code or basic code.

However, there's another significant area where Copilot demonstrates its ability to save time: documentation. By providing developers with accurate and contextually relevant suggestions, Copilot can help streamline the process of writing comprehensive documentation for software projects. This not only saves time but also ensures that the documentation is consistent, well-structured, and easy to understand.

Developers often spend a considerable amount of time researching and writing documentation to ensure that their code is easily maintainable and understandable by others. With Copilot's assistance, developers can focus more on the core functionality of their projects, while the AI-powered tool takes care of generating relevant documentation.

For instance, I recently utilized Copilot to rapidly generate documentation for several of my personal projects. I was genuinely impressed by the quality and depth of the content it produced in the README files. The AI-powered tool was able to understand the core functionality of my projects and generate relevant explanations, making it easier for others to comprehend the code and its purpose.

However, it's important to note that Copilot's documentation capabilities, while impressive, are not entirely comprehensive. This means that certain aspects of the projects were left unexplained or not covered in sufficient detail. As a result, developers may still need to invest some time in manually creating or refining documentation to ensure that all critical components and nuances are adequately addressed.

However, for kickstarting documentation, Copilot is a decent tool. I don't know about you, but documentation is typically my least favorite part of the development process, so I'll gladly accept any time savings I can get in this area.

The Cons: Addressing the Limitations

This wouldn't be an honest review if I didn't discuss some of the cons and drawbacks that I personally encountered, and which I believe others may experience as well.

I will discuss 3 major cons, but keep in mind that there are plenty more that I won't be mentioning, which have been previously addressed by others in their commentary.

It's important to acknowledge that AI tools are still quite new, and as a result, they're in their early stages regarding how advanced they are at accomplishing their tasks and goals. I believe that as time goes on and these tools continue to be developed, they will only improve.

I also want to preface by saying that I don't buy into the fear-mongering that tools like Copilot will take the jobs of software engineers and developers. As these tools continue to improve, I believe they will simply be integrated into the workflow for developers, making each developer more capable and productive. Ultimately, the primary goal of these tools is to enhance developer productivity, not to create tools that will replace developers themselves.

Ambiguous/incorrect code suggestions

Now, I understand that this point may appear to contradict one of the advantages I mentioned earlier, where Copilot provides highly accurate suggestions. However, it's crucial to acknowledge that I was referring to relatively simple contexts. In more complex situations, particularly those involving proprietary software or specialized tools utilized by businesses, Copilot's suggestions might not be as impressive or accurate as one would hope.

It's important to remember that AI models like Copilot are trained on vast amounts of publicly available code, which means that their understanding of proprietary or industry-specific tools may be limited. As a result, developers working with such tools may find that Copilot's suggestions are less helpful or even incorrect in certain cases. This is not to say that Copilot is entirely ineffective in these situations, but rather that its effectiveness may be somewhat diminished.

That being said, I cannot definitively confirm whether this is true or not, as I am still a college student without direct experience working in the field. However, it's worth considering this potential limitation when evaluating the usefulness of AI-powered code assistants like Copilot. As these tools continue to evolve and improve, it's possible that their understanding of specialized tools and proprietary software will expand, making them even more valuable for developers across various industries and domains.

Cost

This is both a drawback I have yet to experience (since I'm currently able to use Copilot for free as a college student) and a drawback that is not subjective, but simply factual: Copilot costs money.

At the time of writing this article, the cost for Copilot is as follows: $10/month for individuals, $19/user/month for businesses, and $39/user/month for enterprises.

Now, aside from the fact that Copilot would be another monthly subscription that might catch you off guard, you have to ask yourself: "Is it worth the cost for what I do?".

I cannot answer this question, as everyone's situation is unique. However, I will say that if I were a student and had to pay $10/month for Copilot, I wouldn't. In my opinion, unless your company provides Copilot as a complimentary "perk," it's not worth using.

Although Copilot is impressive, there are plenty of free and user-friendly resources available, including both traditional materials and AI tools like ChatGPT.

If Copilot's capabilities significantly surpass the free resources available, then perhaps I would reconsider my stance on paying for it.

That being said, GitHub does offer a free 30-day trial for trying out Copilot. So, if you want to see what all the hype is about for yourself, you can at least do so without any cost.

Annoying while learning new language

Unlike the other drawbacks I mentioned, this one I can personally vouch for.

One of the use cases where I've tried Copilot is while learning the C programming language. I quickly realized how much it hindered my learning, so I disabled it in my workspace designated for learning C (which is very easy to do, by the way).

Recall at the beginning of this article when I mentioned that Copilot is like having another developer constantly looking over your shoulder and providing commentary every second? Well, this isn't ideal when trying to learn a new programming language.

When embarking on the journey to learn a new programming language, I found that Copilot transformed from a helpful assistant into an intrusive companion, negatively impacting my ability to concentrate on the learning process. The primary objective of learning a new programming language is to gain a comprehensive understanding of the syntax, enabling efficient navigation and problem-solving within the language. Additionally, it's crucial to develop the skills required to independently create and manage projects using the language. However, with Copilot's constant input and suggestions, it becomes increasingly challenging to achieve these goals.

As a developer trying to learn a new language, it's essential to engage in hands-on practice, trial and error, and problem-solving exercises to build a strong foundation. Copilot's continuous presence and guidance can inadvertently lead to over-reliance on its suggestions, preventing learners from developing their own understanding and intuition. By constantly providing commentary and solutions, Copilot may hinder the growth of critical thinking and problem-solving skills, which are vital for mastering any programming language.

In summary, while Copilot can be a valuable tool for experienced developers working on complex projects, it may not be the ideal companion for those attempting to learn a new programming language. Its constant input can obstruct the learning process, making it difficult for learners to develop the necessary skills and understanding to become proficient in their chosen language.

Conclusion

In conclusion, GitHub Copilot is a powerful AI-driven tool that offers a wealth of benefits for developers, particularly in terms of efficiency, accuracy, and time savings.

However, it's not without its limitations. The effectiveness of its code suggestions can be compromised in unique scenarios, the cost may be prohibitive for some, and its constant input can be more of a hindrance than a help when learning a new programming language.

As with any tool, its value will largely depend on the specific needs and circumstances of the user. Despite its drawbacks, Copilot's potential to enhance developer productivity is undeniable, and it will be interesting to see how it evolves in the future.

If you have any lingering questions or suggestions for an article you want me to cover in the future, feel free to leave a comment in the comment section below.

Lastly, make sure to follow my newsletter so you never miss out on when I post new content! When you subscribe to my newsletter, you'll be able to read my articles straight from your inbox as soon as they're released.

This article is part of a series called Bit by Bit, a series devoted to all things programming. Whether you're still a computer science undergrad or the CTO of Apple, there's something for you here.

New articles in this series are posted every Tuesday!

This article provides a comprehensive guide on pointers in the C programming language. It starts by defining pointers and explaining their importance in C programming, such as efficient memory management and low-level memory manipulation. The article then delves into the declaration and initialization of pointers, and how to dereference them to access the value stored at the memory address they point to. It further explores pointer arithmetic for efficient navigation through memory, and the use of pointers in functions to facilitate pass-by-reference behavior. The article concludes by emphasizing the importance of practice and understanding of memory management to effectively use pointers and enhance programming abilities.

What are pointers?

A pointer in C is a specialized type of variable that holds the memory address of another variable. Rather than directly interacting with data, pointers provide programmers with the ability to indirectly access and modify memory locations. This level of indirection is a fundamental concept in C programming that opens the door for a range of powerful and flexible programming techniques.

Pointers are particularly useful in C because they enable efficient memory management and low-level memory manipulation. By utilizing pointers, developers can create dynamic data structures, pass large data sets to functions without duplicating memory, and interact with hardware devices. Furthermore, pointers can be used to implement complex algorithms that require precise control over memory allocation and deallocation.

In essence, pointers act as a bridge between the high-level abstractions of C programming and the underlying hardware. They allow programmers to harness the full power of the computer's memory system, enabling the creation of efficient and dynamic code that can adapt to various situations and requirements. As a result, understanding pointers and their proper usage is essential for any C programmer looking to write optimized and versatile software.

How to declare and initialize pointers

#include <stdio.h>

int main() {
    int num = 10;
    int *numP;

    numP = &num;

    printf("Value of num: %d\n", num); // 10
    printf("Address of num: %p\n", &num); // address of num in the stack
    printf("Value of numP: %p\n", numP); // address of num in the stack

    return 0;
}

To declare a pointer in the C programming language, you need to follow a few simple steps. First, you must specify the type of data that the pointer will be pointing to. This is important because it helps the compiler understand how much memory should be allocated for the pointer and how to interpret the data stored at the memory address it points to. In the example provided above, the pointer is intended to point to an integer data type.

Next, you need to use the * syntax, which is a special symbol that indicates you are declaring a pointer variable. This asterisk is placed before the name of the pointer during its declaration, signaling to the compiler that the variable being declared is a pointer.

Finally, you should choose a name for the pointer. While you have the freedom to name the pointer anything you like, it is a common practice to use the same name as the variable it points to, followed by a "p" to indicate that it is a pointer. This naming convention makes it easier for you and others to understand the purpose of the pointer when reading the code.

In the example code provided, an integer variable num is declared and initialized with the value 10. Then, a pointer to an integer, numP, is declared. To initialize the pointer, the address of the num variable is assigned to it using the address-of operator &. This makes numP point to the memory location where the num variable is stored.

Dereferencing pointers

To dereference a pointer, you need to use the asterisk symbol (*) followed by the pointer's name. This process essentially retrieves the value stored at the memory address that the pointer is pointing to.

For example, in the given context, we have an integer variable num initialized with the value 10 and a pointer to an integer, numP, which is assigned the address of the num variable using the address-of operator (&). By dereferencing the pointer numP using the asterisk symbol, we can access the value stored in the memory location where the num variable is stored. This is done by writing *numP in the code, which would then return the value 10, as that is the value stored at the memory address to which numP is pointing.

#include <stdio.h>

int main() {
    int num = 10;
    int *numP = &num;

    printf("Value of num: %d\n", num); // 10
    printf("Value of num using pointer: %d\n", *numP); // 10
    return 0;
}

I understand that this concept might be confusing (I was also confused when I first learned about pointers in C). Just remember that the asterisk symbol is required for declaring pointer variables. However, when the asterisk symbol is used after the pointer has already been declared, it serves to return the value stored at the memory address to which the pointer is pointing.

Pointer arithmetic

In C, arithmetic operations on pointers are allowed, providing a powerful mechanism for navigating through memory efficiently. This feature enables developers to perform calculations with pointer variables, which can be particularly useful when working with arrays or other data structures that require direct memory manipulation.

For example, when an integer is added to a pointer, the address stored in the pointer is incremented by a number of bytes corresponding to the integer value. This allows for easy traversal through memory, as the pointer can be moved to the next memory location by simply adding the appropriate value. The size of the increment depends on the data type of the pointer, as different data types occupy different amounts of memory. For instance, if the pointer is of type int, and the size of an int is 4 bytes, adding 1 to the pointer would increment its address by 4 bytes, effectively moving it to the next int value in memory.

#include <stdio.h>

int main() {
    int arr[] = {10, 20, 30, 40, 50};
    int *ptr = arr; // Point to the first element of the array

    printf("Initial value: %d\n", *ptr);

    ptr++; // Increment the pointer to point to next element
    printf("Value after incrementing pointer: %d\n", *ptr);

    ptr--; // Decrement the pointer to point to previous element
    printf("Value after decrementing pointer: %d\n", *ptr);

    ptr += 3; // Add 3 to the pointer to point to the element 3 spots to the right
    printf("Value after adding 3 to pointer: %d\n", *ptr);

    ptr -= 2; // Subtract 2 from the pointer to point to the element 2 spots to the left
    printf("Value after subtracting 2 from pointer: %d\n", *ptr);

    return 0;
}

In the example provided above, we start by assigning the pointer to point to the first element of the array. This is a crucial step as it establishes a reference point for our pointer to work with. Once we have the pointer pointing to the first element, we can effortlessly employ pointer arithmetic to navigate and manipulate different elements within the array.

By incrementing or decrementing the pointer, we can traverse the array in either direction. This allows us to access and modify the values of the array elements without using the traditional array indexing method. Furthermore, we can add or subtract specific values to the pointer to directly access elements at a certain distance from the current position of the pointer.

Pointers and functions

Pointers are often utilized in C functions to facilitate pass-by-reference behavior, which is a powerful technique that allows functions to directly modify the original values of variables that are located outside their local scope. This is particularly useful in situations where a function needs to alter multiple values or work with large data structures, as it can help to avoid the overhead of copying data and improve the overall efficiency of the program.

For example:

#include <stdio.h>

void updateValue(int *ptr);

int main() {
    int num = 10;
    int *ptr = &num;

    printf("Before update: %d\n", num); // 10
    updateValue(ptr);
    printf("After update: %d\n", num); // 15

    return 0;
}

void updateValue(int *ptr) {
    *ptr = *ptr + 5;
}

Conclusion

Pointers are a fundamental and crucial aspect of C programming that provides access to powerful capabilities, such as dynamic memory management and efficient data manipulation. They serve as a bridge to understanding and managing memory allocation, which is a key skill for any C programmer. While pointers may initially seem complex and challenging to grasp, mastering them is essential for becoming a proficient and skilled C programmer.

To truly harness the potential of pointers in C, it is important to invest time in practice, exhibit patience, and develop a clear understanding of memory management concepts. As you gain experience working with pointers, you will begin to appreciate their versatility and the numerous advantages they offer in terms of performance optimization and code flexibility.

For example, using pointers allows you to directly manipulate memory addresses, enabling you to pass large data structures to functions more efficiently. This can lead to significant performance improvements, as you no longer need to create copies of large data structures when passing them between functions. Additionally, pointers enable you to allocate and deallocate memory dynamically, which can be particularly useful when working with data structures that change in size during the execution of a program.

In conclusion, pointers are an indispensable tool in the C programming language that offers a range of powerful capabilities. By dedicating time to practice and developing a deep understanding of memory management, you can unlock the true potential of pointers and become a more proficient C programmer. Embrace the challenge of learning pointers, and you will be rewarded with a valuable skill set that can greatly enhance your programming abilities.

If you have any lingering questions or suggestions for an article you want me to cover in the future, feel free to leave a comment in the comment section below.

Lastly, make sure to follow my newsletter so you never miss out on when I post new content! When you subscribe to my newsletter, you'll be able to read my articles straight from your inbox as soon as they're released.

This article is part of a series called Bit by Bit, a series devoted to all things programming. Whether you're still a computer science undergrad or the CTO of Apple, there's something for you here.

New articles in this series are posted every Tuesday!

This article provides an in-depth look at two fundamental data structures in programming: stacks and queues. It discusses the characteristics, advantages, and disadvantages of both, with Python code examples provided for better understanding. Stacks, operating on a Last In First Out (LIFO) principle, are efficient in memory usage and fast in operations, but lack flexibility and search operations. Queues, following the First In First Out (FIFO) model, are predictable and widely used, but can be inefficient in memory usage and slower in operations. The choice between a stack and a queue depends on the specific problem you are trying to solve.

I. Stacks

Similar to a list, a stack is an ordered sequence of values.

A stack is a linear data structure that follows a particular order in which operations are performed. The order in which values are added to a stack is LIFO (Last In First Out).

In Python, you can create a stack data structure using either an implementation of lists or linked lists.

In this article, I'll be demonstrating how to use Python's built-in list data structure to create a stack data structure.

a) Creating a stack in Python

class Stack:
    def __init__(self):
        self.items = []

    def push(self, item):
        self.items.append(item)

    def pop(self):
        if not self.is_empty():
            return self.items.pop()

    def peek(self):
        if not self.is_empty():
            return self.items[-1]

    def is_empty(self):
        return len(self.items) == 0

# Example usage:
stack = Stack()
stack.push(1)
stack.push(2)
stack.push(3)
print(stack.pop())  # Output: 3
print(stack.peek())  # Output: 2
print(stack.is_empty())  # Output: False

b) Stack methods

Some basic methods for stacks include:

• push - adds a value to the top of the stack

• pop - removes the value at the top of the stack

• peek - returns the value at the top of the stack

• is_empty - returns True if the stack is empty, otherwise returns False

c) Advantages

Some advantages of stacks include:

1. Efficient Memory Usage: stacks use a block of memory that fits exactly the amount of data stored, minimizing wasted space.

2. Fast Operations: All operations like push, pop, and peek have a time complexity of O(1)

d) Disadvantages

Some disadvantages of stacks include:

1. Limited Flexibility: Stacks operate on the LIFO principle, which means the most recently added item is the first one to be removed. This lack of flexibility can be a disadvantage in scenarios where access to other values is needed

2. Lack of Search Operation: Stacks do not allow you to search through the data. To access data that is not on the top of the stack, you must remove its preceding items.

II. Queues

Similar to stacks, a queue is a type of data structure that stores elements in a sequence.

Contrary to stacks, queue operations occur in a FIFO (First In First Out) manner. This means that the element that is inserted first is the one that gets removed first.

Similar to stacks, queues can be implemented using lists or linked lists.

Just like the stacks example, I'm going to demonstrate how you can create queues in Python using an implementation of Python's built-in list data structure.

a) Creating a queue in Python

class Queue:
  def __init__(self):        
    self.list = []   

  def enqueue(self, data):        
    self.list.append(data)    

  def dequeue(self):        
    val = self.list[0]        
    del self.list[0]        
    return val    

  def is_empty(self):        
    return len(self.list) == 0

# Example usage:
my_queue = Queue()
my_queue.enqueue(1)
my_queue.enqueue(2)
my_queue.enqueue(3)
print(my_queue.dequeue())  # Output: 1

b) Queue methods

Some basic methods for queues include:

• enqueue - adds a value to the end of the queue

• dequeue - removes the value at the beginning of the queue

• is_empty - returns True if the queue is empty, otherwise returns False

c) Advantages

Some advantages of queues include:

1. Predictability: Since queues follow the FIFO model, the timing of operations is highly predictable. You always know which item is next in line.

2. Broad Usage: Queues are used in a wide variety of programming scenarios, such as managing processes in a job scheduling system, handling requests on a single shared resource like a printer, and in CPU scheduling and disk scheduling.

d) Disadvantages

1. Inefficient Memory Usage: Unlike arrays, queues that are implemented using linked lists can use more memory because of the extra storage needed for pointers.

2. Slow Operations: Depending on the implementation, operations like enqueue and dequeue can be slower in queues than in arrays or stacks.

3. Complexity: Queues are more complex to manage than stacks because you need to maintain two pointers (front and rear), compared to stacks where only one pointer (top) is required.

4. Limited Access: Similar to stacks, queues don't provide the ability to access elements in the middle. You can only directly access the first and last elements.

III. Conclusion

In conclusion, both stacks and queues are essential data structures in programming, each with their unique characteristics and use cases.

Stacks operate on the LIFO principle, making them ideal for scenarios that require reversing or where the most recent data is of primary interest. On the other hand, queues operate on the FIFO model, making them suitable for maintaining the order of operations and handling asynchronous tasks.

However, both have their limitations. Stacks lack flexibility and do not support search operations, while queues can be inefficient in memory usage and slower in operations. Therefore, the choice between a stack and a queue depends on the specific requirements of the problem you are trying to solve.

If you have any lingering questions or suggestions for an article you want me to cover in the future, feel free to leave a comment in the comment section below.

Lastly, make sure to follow my newsletter so you never miss out on when I post new content! When you subscribe to my newsletter, you'll be able to read my articles straight from your inbox as soon as they're released.

This article is part of a series called Bit by Bit, a series devoted to all things programming. Whether you're still a computer science undergrad or the CTO of Apple, there's something for you here.

New articles in this series are posted every Tuesday!

In this article, we discuss how to install Keras and Skimage, and demonstrate the process of image augmentation using the ImageDataGenerator object from Keras. Image augmentation is useful for creating larger training datasets for object recognition models, such as HOG or CNN, by artificially generating new images based on the original ones. We provide step-by-step instructions for installing the required libraries, loading and reshaping images, and finally, generating augmented images.

How to install Keras

To install Keras, you have to install the TensorFlow package.

To install TensorFlow:

pip install tensorflow

After installing the TensorFlow package, you've now installed Keras onto your system.

To use Keras in your Python file:

from tensorflow import keras

How to install Skimage

To load in our image, we'll be using SciKit, but you may wish to use another library to load in your image if you'd prefer.

To install Skimage:

pip install scikit-image

Image augmentation

To start, make sure to import the required modules into your Python file:

from keras.preprocessing.image import ImageDataGenerator
from skimage import io

ImageDataGenerator object

The next step is to use the ImageDataGenerator object from Keras to define how you want the augmented image(s) to be transformed:

datagen = ImageDataGenerator(
    rotation_range=40,  # randomly rotate images in the range (degrees, 0 to 180)
    width_shift_range=0.2,  # randomly shift images horizontally (fraction of total width)
    height_shift_range=0.2,  # randomly shift images vertically (fraction of total height)
    shear_range=0.2,  # set range for random shear
    zoom_range=0.2,  # set range for random zoom
    horizontal_flip=True,  # randomly flip images
    fill_mode='nearest')  # set mode for filling points outside the input boundaries

When you set 'fill_mode' to 'nearest', any space created in the augmented images will be filled with colored pixels that match the colors of the pixels near the space.

Another option for 'fill_mode' is to set it to 'constant'. When you set it to constant, the space in the augmented images will be filled with black pixels by default. If you want to use grey or white pixels, you can do so by including a 2nd argument after 'fill_mode', like so: "fill_mode='nearest', '150'".

Load image and reshape

In this step, you'll load your image into Python. Additionally, we'll be reshaping the image array data.

input_image = io.imread('path/to/image')
input_image = input_image.reshape((1,) + input_image.shape)

Generate x augmented images

The final step is to generate your augmented images!

The following code demonstrates creating and saving 20 augmented images:

i = 0
for batch in datagen.flow(input_image, batch_size=16, save_to_dir='path/to/save/images', save_prefix='prefix', save_format='jpeg'):
        i += 1
        if i == 19:
            break

In the above code, we're calling the .flow function on our ImageDataGenerator object and passing in our input_image, a batch size of 16 (this means it will augment 16 sample images at a time), specifying the directory to save the augmented images, specifying the prefix to put at the beginning of all the file names, and finally, the file format of the augmented images.

What's the benefit of image augmentation?

If you're trying to train a histogram of oriented gradients (HOG) model or a convolutional neural network (CNN) model to do any type of object recognition, then image augmentation may be of use to you.

In particular, if you don't have a large enough training dataset of images, then you can artificially create a large dataset of training images by augmenting the original images that you already have.

By creating this image augmentation pipeline, your model will train not only on the original images contained in your training dataset but also all of the augmented images that are generated based on those original images.

This article is part of a series called Bit by Bit, a series devoted to all things programming. Whether you're still a computer science undergrad or the CTO of Apple, there's something for you here.

New articles in this series are posted every Tuesday!

In this article, we explore the similarities and differences between lists and linked lists, two common data structures in programming.

We discuss their characteristics, advantages, and disadvantages, as well as how to create and manipulate them in Python. By understanding the strengths and weaknesses of each data structure, you can make informed decisions on which to use for your specific tasks.

I. Lists

Lists consist of ordered, mutable elements. They enable simple insertion, deletion, and traversal of elements while offering dynamic resizing capabilities.

With lists, all elements are stored contiguously in memory. This characteristic enables lists to quickly return elements at a specified index.

In many programming languages, lists are a built-in data structure. This means that you don't have to manually create lists and their associated methods.

a) Creating a list in Python

# Creating an empty list
new_list = []

# Creating list with values
names = ['Jack', 'Jill', 'Jane', 'Jeff']

# Creating list with 'list' function
# (Python requires iterable argument)
digits_set = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9}
digits_list = list(digits)

In the final example of creating a list in Python, we needed to provide an iterable data type, such as a tuple, string, set, or dictionary.

Python converts the iterable data type into a list.

For tuples and sets, this simply means that Python converts all the elements directly into a list while maintaining the same order.

For strings, Python slices the string into individual characters and creates a list element for each character in the string.

For dictionaries, Python creates a list element for each key in the dictionary.

b) List methods

• append(el) - adds el to the end of the list

• insert(index, el) - adds el to specified index (shifts the elements to the right by 1 index)

• remove(el) - removes the first instance of el in the list

• pop() - removes the last element of the list, and returns the element it removed

• clear() - deletes all the elements from the list

• index(index) - returns element at the specified index (this can also be done with square bracket syntax: l[index])

• count(value) - returns the number of elements that contain the value value

• sort() - sorts the list from least to greatest (or alphabetically for a list of strings)

• reverse() - sorts the list from greatest to least (or reverse alphabetically for a list of strings)

c) Advantages

The primary advantage of lists lies in their simplicity and the fact that they come pre-built in most programming languages.

Secondly, lists provide quick access to elements at a specified index, as they are stored contiguously in memory.

This means that the time complexity of indexing an element in a list is constant:

$$O(1)$$

d) Disadvantages

The primary drawback of lists is that they are somewhat slow when it comes to removing and inserting elements at specific indices.

This is due to the necessity of shifting all elements to maintain contiguity in memory, which results in slower insertion and removal of elements at specific indices.

This means that the time complexity for removing and inserting elements in a list is linear:

$$O(n)$$

II. Linked lists

Linked lists are a data structure composed of nodes, with each node containing an element and a reference to the subsequent node in the sequence. This enables efficient insertion and deletion of elements at any position but demands more memory and offers slower element access compared to lists.

Unlike lists, linked lists are not built-in data structures, which means you will need to manually code and create linked lists along with their associated methods.

a) Creating a linked list

# Class to construct new nodes
class Node:
    def __init__(self, data):
        self.data = data
        self.next = None

# Class to construct new linked lists
class LinkedList:
    def __init__(self):
        self.head = None

    # Method to add new nodes to linked list
    def append(self, data):
        # If linked list is empty
        if self.head is None:
            self.head = Node(data)
            return

        last_node = self.head
        while last_node.next is not None:
            last_node = last_node.next
        last_node.next = Node(data)

# Example usage:
linked_list = LinkedList()
linked_list.append(1)
linked_list.append(2)
linked_list.append(3)

b) Linked list methods

All the methods you've seen for lists can be adapted for linked lists; however, you'll need to manually code each method yourself.

c) Advantages

The primary benefit of linked lists lies in their efficiency when it comes to inserting and removing nodes.

Since nodes are not stored contiguously in memory but are instead referenced or pointed to by the previous node, this allows for constant-time insertion and removal of nodes.

Thus, the time complexity for inserting and removing nodes in linked lists is:

$$O(1)$$

d) Disadvantages

The primary drawback of linked lists is retrieving the value of a node at a specific index.

Since the nodes are not stored contiguously in memory, it means that to retrieve a node at a specific index, we must start at the first node and continue iterating through the linked list until we find the desired node.

Thus, the time complexity for retrieving a node at a specific index is linear:

$$O(n)$$

If you wish to learn more about the linear search algorithm, I have written a comprehensive article comparing and contrasting linear search and binary search algorithms: Comparing Search Algorithms: Linear Search vs Binary Search.

In the article, I discuss the reasons why binary search is faster than linear search.

After reading the article, please leave a comment below with your answer to the question: Can we use the binary search algorithm for a linked list?

III. Conclusion

I hope that you now understand the similarities and differences between lists and linked lists.

Both lists and linked lists have their own set of advantages and disadvantages.

This means that it's important to consider the task(s) you want to solve before choosing whether you want to implement a list or linked list.

If you want to primarily be able to index elements, then a list may be the better option. On the other hand, if you want to primarily be able to insert and remove values from specific indices, then a linked list is the better option.

If you have any lingering questions or suggestions for an article you want me to cover in the future, feel free to leave a comment in the comment section below.

Lastly, make sure to follow my newsletter so you never miss out on when I post new content! When you subscribe to my newsletter, you'll be able to read my articles straight from your inbox as soon as they're released.

This article is part of a series called Bit by Bit, a series devoted to all things programming. Whether you're still a computer science undergrad or the CTO of Apple, there's something for you here.

New articles in this series are posted every Tuesday!

In this article, we will delve into two basic sorting algorithms: Bubble Sort and Insertion Sort. We will explore their steps, implementation in Python code, time complexity, advantages, and disadvantages, providing you with a comprehensive understanding of these fundamental sorting techniques.

Whether you're a beginner in computer science or a seasoned programmer, this comparison will sharpen your knowledge and help you make informed decisions when choosing the right sorting algorithm for your projects.

Bubble Sort

Bubble sort works by comparing two values at a time and sorting those two values as it iterates through the entire list.

You can think of it as if it's creating a bubble of the list every time it compares two consecutive values.

The bubble sort algorithm passes through the list n - 1 times and iterates through 1 less element each iteration.

Just from the description, you may already tell that the bubble sort algorithm is not an efficient sorting algorithm.

However, bubble sort is a good algorithm for beginner software engineers to study and understand so that they grasp the foundational concepts of algorithms in general.

Algorithm Steps

1. Start at the first two elements in the list

2. Compare those elements

3. Swap those elements if they're not sorted

4. Move to the next two elements and repeat steps 2 and 3

5. Repeat steps 1-4 till you reach the end of the list

6. Repeat steps 1-5 till the list is sorted

Code Snippet

def bubble_sort(arr):

    # Iterate through list (n - 1) times
    for i in range(len(arr) - 1):

        # Iterate through entire list first time
        # Subsequently chop last element from iteration
        for j in range(len(arr) - i - 1):

            # If the element before the other element is greater,
            # swap their order
            if arr[j] > arr[j + 1]:

                arr[j], arr[j + 1] = arr[j + 1], arr[j]

# Example Usage:
arr = [64, 34, 25, 12, 22, 11, 90]
bubble_sort(arr)

Time complexity

Regardless of whether the list is partially sorted, or even fully sorted, bubble sort is a very slow algorithm.

This is because no matter what, you iterate through the list n - 1 times, and make 2 comparisons for each element included in each iteration.

This means that the bubble sort time complexity is

$$O(n^2)$$

This means that we need to make n^2 comparisons for a list of length n.

Bubble sort time complexity graph:

Advantages

The main advantage of bubble sort is that it's very simple for beginner software engineers to conceptually understand and implement into code.

Disadvantages

The biggest and most apparent of bubble sort is the incredible inefficiency.

Since the bubble sort time complexity is so large, it's rarely used in practice.

Insertion Sort

Insertion sort is another slow sorting algorithm but is usually faster than bubble sort.

Again, even though this algorithm is slow, it's a good algorithm to study as a beginner software engineer.

Insertion sort works by dividing the list into a sorted and an unsorted section. It iterates through the unsorted section, taking one element at a time and inserting it into its correct position in the sorted section. This process continues until all elements from the unsorted section have been inserted into the sorted section in the correct order.

Algorithm Steps

1. Start by pulling the second element in the list

2. Look at all the numbers to the left of the vacant spot and slide over all the values larger than the element we pulled out

3. Insert the element we pulled out into whatever spot is now vacant

4. Pull the next element out of the list

5. Repeat steps 2 and 3

6. Repeat step 4 until the entire list is sorted

Code snippet

def insertion_sort(arr):

    # Iterate through list starting at second element
    for i in range(1, len(arr)):

        key = arr[i]
        j = i - 1

        # While the next element index is valid and
        # the current element is less than the next element
        # being compared
        while j >= 0 and key < arr[j]:

            # The proceeding element will become the next element
            arr[j + 1] = arr[j]
            j -= 1

        arr[j + 1] = key

# Example usage:
arr = [12, 11, 13, 5, 6]
insertion_sort(arr)

Time complexity

The worst-case scenario for insertion sort is if the list starts in the complete reverse order.

In this worst-case scenario, the insertion sort algorithm makes this amount of comparisons:

$$\frac{1}{2} (n^2-n)$$

Therefore, the insertion sort time complexity is:

$$O(n^2)$$

If you notice, the insertion sort's time complexity is the same as the bubble sort's time complexity.

However, if a list is partially sorted (meaning some values are already in their correct index), then insertion sort takes less time than bubble sort.

The best case scenario for insertion sort is if the list is already sorted. If the list is already sorted, then insertion sort makes 0 list comparisons. On the other hand, bubble sort's time complexity will remain n^2 even for a fully sorted list.

Therefore, in practice, the insertion sort algorithm is usually much faster than the bubble sort algorithm since insertion sort will typically make fewer comparisons than bubble sort.

Advantages

The biggest advantage of insertion sort is that it's typically faster than the bubble sort algorithm, and the amount of comparisons it makes is dependent on how sorted the list already is. Whereas, bubble sort's time complexity is independent of how sorted the list already is.

Disadvantages

The main disadvantage of insertion sort is that it's still considered a pretty slow sorting algorithm.

Conclusion

I hope after reading this article, you now have a clearer understanding of the bubble sort and insertion sort algorithms and a more general understanding of the importance of studying algorithms in computer science.

In this article, you learned about the basic concept behind both the bubble sort and insertion sort algorithms, their steps, their implementation in Python code, their time complexity, and some of the advantages and disadvantages for both.

If you have any lingering questions or suggestions for an article you want me to cover in the future, feel free to leave a comment in the comment section below.

Lastly, make sure to follow my newsletter so you never miss out on when I post new content! When you subscribe to my newsletter, you'll be able to read my articles straight from your inbox as soon as they're released.

This article is part of a series called Bit by Bit, a series devoted to all things programming. Whether you're still a computer science undergrad or the CTO of Apple, there's something for you here.

New articles in this series are posted every Tuesday!

In this article, I'm going to explain how the linear search and binary search algorithms work. In particular, I'm going to review how these algorithms operate as a general list of steps when applied to the context of searching for an element of a sorted list.

In addition, I'll be including Python code snippets for you to follow along and practice implementing these search algorithms in code.

Lastly, I'll briefly give an overview of the time complexity for both of these search algorithms and go over some advantages and disadvantages for each.

I. Linear search

a) Algorithm steps

Linear search is a very easy algorithm to implement. If you're a beginner programmer, then chances are, you've probably already implemented this algorithm without even realizing it.

The linear search algorithm works as follows:

1. Start at the first element in the list and compare its value to the target value

2. If they're equal, the algorithm is complete

3. If they're not equal, repeat step 1 with the next element in the list

4. If you've searched through the whole list and haven't found the target value, you know that the target value isn't in the list

b) Code snippet

def linear_search(array, target):
    for i in range(len(array)):
        if array[i] == target:
            return i

    # If the element isn't found, function will return -1
    return -1

c) Time complexity

The worst case for linear search is if the target value isn't in the list OR the target value is the last element of the list.

In this case, we'd have to compare each element in the list to the target value, meaning that we'd make n comparisons.

Therefore the time complexity of linear search is:

$$O(n)$$

Time complexity graph:

d) Advantages

The main advantage of linear search is that this algorithm can be applied to both sorted and unsorted lists.

e) Disadvantages

Of course, the biggest disadvantage of linear search is that it can be very slow and inefficient as a search algorithm.

II. Binary search

a) Algorithm steps

Binary search is easy to understand, but a little harder to implement than linear search.

Keep in mind that the binary search algorithm assumes that the list you're searching is already sorted from least to greatest (or sorted alphabetically from a-z if you have a list of strings).

The binary search algorithm works as follows:

1. Start at the middle element in the list and compare its value to the target value

2. If they're equal, the algorithm is complete

3. If the target value is greater than the middle element, then re-search the list starting with the element indexed right above the middle element

4. If the target value is less than the middle element, then re-search the list ending with the element indexed right below the middle element

5. Repeat until the target element is found

6. If the target value is not in the spot in the list that it should be, then you know that the target value is not in the list

b) Code snippet

def binary_search(array, target):
    low = 0 
    high = len(array) - 1

    while low <= high:
        mid = (low + high) // 2

        if array[mid] == target:
            return mid

        elif array[mid] > target:
            # If our target is below the middle value,
            # we'll shift the high point right below the middle
            # so our search space decreases to the bottom half of
            # the list on the next iteration
            high = mid - 1

        else:
            # If our target is above the middle value,
            # we'll shift the low point right above the middle
            # so our search space decreases to the top half of
            # the list on the next iteration
            low = mid + 1

    # If the target isn't found, the function will return -1
    return -1

c) Time complexity

The worst case for binary search is if the element isn't in the list (similar to linear search).

For binary search though, since we're halving the search space each iteration, we don't have to search through every element in the list to know that the element isn't in the list.

The most comparisons we have to do to find out that an element isn't in the list is:

$$log_2{n}$$

Therefore, the time complexity of binary search is:

$$O(log {n})$$

Time complexity graph:

As you may remember from calculus, logarithm functions increase very slowly. Additionally, the logarithm of a variable will always be less than the variable itself.

$$log(x) < x$$

This means that for any size list, binary search will always be faster than linear search.

d) Advantages

The main advantage of binary search is obviously that it's always faster than linear search, and is considerably faster for very large lists.

e) Disadvantages

The biggest disadvantage of binary search is that it only works for lists that are already sorted.

This means that you'll need to apply a primary sorting algorithm to your list before applying the binary search algorithm for searching for elements from that list.

III. Conclusion

I hope that after reading this article, you now have a deeper understanding of the linear search and binary search algorithms.

In this article, you learned the basic steps behind both the linear search and binary search algorithms, you followed along with example Python code snippets for both algorithms and got to see the time complexity for both algorithms.

If you have any lingering questions or suggestions for an article you want me to cover in the future, feel free to leave a comment in the comment section below.

Lastly, make sure to follow my newsletter so you never miss out on when I post new content! When you subscribe to my newsletter, you'll be able to read my articles straight from your inbox as soon as they're released.

This article is part of a series called Bit by Bit, a series devoted to all things programming. Whether you're still a computer science undergrad or the CTO of Apple, there's something for you here.

New articles in this series are posted every Tuesday!

In this article, we explore the concept of control flow in Python, which determines the order of a program's instructions execution. We discuss conditional statements (if, elif, and else), loops (for and while), and loop control statements (break, continue, and pass). We also cover nested conditional statements, nested loops, and the use of the range() function for generating sequences of numbers. By understanding these concepts, you can create more efficient and versatile Python programs.

Definition of control flow

Control flow is the order in which a program's instructions are executed and is determined by conditional statements, loops, and function calls.

It allows a program to make decisions, repeat specific tasks, and organize code into reusable functions, enabling complex algorithms and dynamic behavior.

Without control flow, a program would just be a long laundry list of predefined instructions.

Although, control flow allows your program to be able to handle user inputs/behavior, and be able to pivot the outputs/behavior of the program based on the user inputs/behavior.

Overview of control flow in Python

In Python, control flow mainly consists of conditional statements (if, elif, and else), conditional/unconditional loops (for and while loops), and loop control statements (break, continue, and pass).

Another popular control flow method in other programming languages is switch/case statements. Up until very recently, Python didn't have the capability for switch/case statements. However, with the release of Python 3.10 in 2021, switch/case statements are now supported in Python.

I won't be covering switch/case statements in this article since they're still very new in the Python language, and they're not as widely used as the control flow methods I'll be covering.

Further, the logic of switch/case statements is very similar to if/elif/else statements. Traditionally, switch/case statements are used instead of if/elif/else statements if there are many different conditions/cases that the program has to handle.

Although, for general control flow, switch/case statements aren't always necessary.

Conditional Statements

Conditional statements in Python are structured as a hierarchy of statements where the first statement is made with the "if" keyword. It should be noted that it is sufficient enough to just have an "if" statement. Although, you can also add another conditional statement starting with the "else" keyword after the "if" statement. Finally, if you need to control other conditions in your program, then you can do so with conditional statements placed in between the "if" and "else" statements and made with the "elif" keyword.

The logic behind conditional statements is:

1. If this condition is met/if this is a true statement: do this...

2. Elif this condition is met/if this is a true statement: do this...

3. Else: do this...

The if statement checks a condition, and if it's True, the code block within it is executed. The elif statement checks another condition if the previous conditions are not met. The else statement executes a code block if none of the previous conditions are met.

The 'if' statement

The if statement begins with the "if" keyword, followed by a statement that returns a Boolean value (True or False).

As such, when you're checking if a certain condition is met, you use the double equals, exclamation equals, greater than, less than, greater than or equals to, or less than or equals to.

Alternatively, you can also use the "is" keyword or "is not" keyword to check logical equivalence, although this is only reserved for comparing Boolean values and the None value.

In addition, you can also construct conditional statements by using "or" or "and" keywords to check if at least one condition or multiple conditions are met before executing a block of code.

Syntax

# Basic syntax of if statement:
if 1 == 1: # True statement
    print(True)

##############################

if 2 != 1: # True statement
    print(True)

##############################

if 3 > 2: # True statement
    print(True)

##############################

if 2 < 3: # True statement
    print(True)

##############################

if 4 >= 3: # True statement
    print(True)

##############################

if 3 <= 4: # True statement
    print(True)

##############################

if None is None: # True statement
    print(True)

##############################

if False is not None: # True statement
    print(True)

##############################

if 2 == 2 or 2 == 3: # True statement 
    # This line will execute since at least one condition is met
    print(True)

##############################

if 3 == 3 and 4 == 4: # True statement
    # This line will execute since both conditions are met
    print(True)

Example

age = 21

# Basic if statement
# Check if the 'age' variable is greater than or equal to 21
if age >= 21:
    # This line will execute since the condition is met
    print("Do you want a glass of wine with your meal?")

##############################

animal = "cat"

if animal == "dog":
    # This line WON'T execute since the condition is not met
    print("Do you wanna go for a walk outside?!")

The 'elif' statement

Elif statements are placed in between the if statement and the optional else statement.

In one if/elif/else control flow structure, there can be multiple elif statements, but only 1 if statement and 1 else statement.

Similar to the if statement, the elif statement evaluates a comparison or multiple comparisons.

If the original condition in the if statement is not met, then the program will skip to the proceeding elif statement to see if that condition is met.

It's important to note that an if/elif/else control flow structure stops evaluating statements as soon as a condition is met. This means that even if you have multiple elif statements that evaluate to true, only the first elif statement that evaluates to true will be the block of code that is executed.

Also, since each conditional control flow structure has to start with an if statement, this means that the program knows when a new control flow structure you write another if statement line (even if that if statement line is written after another if statement or an elif statement in another control flow structure above it).

Syntax

# Basic syntax of elif statement:

if 2 == 1: # False statement
    # This line won't execute
    print("2 is equal to 1")

elif 2 != 1: # True statement
    # This line will execute
    print("2 is not equal to 1")

elif 2 > 1: # True statement
    # This statement evaluates to true
    # But, this line won't execute since the elif above 
    # evaluated to true
    print("2 is greater than 1")

##############################

if 2 < 3: # True statement
    # This line will execute
    # Therefore the program won't even evaluate the elif
    # statements below.
    print("2 is less than 3")

elif 4 >= 5: # False statement
    print("4 is greater than or equal to 5")

elif 3 <= 4: # True statement
    print("3 is less than or equal to 4")

##############################

if False is None: # False statement
    # This line won't execute.
    # So, the program will evaluate the proceeding
    # elif statement.
    print("False is None")

elif True is not None: # True statement
    # This line will execute, so the program will 
    # not evaluate the elif statements below.
    print("True is not None")

elif 2 == 2 or 2 == 3: # True statement
    print("2 is equal to 2, or 2 is equal to 3")

elif 3 == 3 and 4 == 4: # True statement
    print(True)

Example

age = 10

if age >= 21: # False statement
    # This line won't execute
    print("Do you want a glass of wine with your meal?")

elif age < 12: # True statement
    # This line will execute
    print("Would you like a kids menu?")

##############################

animal = "dog"

if animal == "dog": # True statement
    # This line will execute.
    # Program won't evaluate the elif statement below.
    print("Do you wanna go for a walk outside?!")

elif animal == "cat": # False statement
    print("Do you want some catnip?!")

The 'else' statement

Similar to the elif statement, the else statement is an optional statement that is placed at the very end of an if/elif/else control flow structure.

Unlike the if and elif statements, the else statement doesn't evaluate if a condition is met. Instead, the program will simply execute the code in the else block if all of the conditions above the else statement are not met.

Syntax

# Basic syntax of elif statement:

if 2 == 1: # False statement
    # This line won't execute
    print("2 is equal to 1")

else:
    # This line will execute, since the above condition wasn't met
    print("2 is not equal to 1")

##############################

if 2 != 1: # True statement
    # This line will execute
    print("2 is not equal to 1")

elif 2 > 1: # True statement
    print("2 is greater than 1")

else:
    print("2 is equal to 1")

##############################

if 5 < 3: # False statement
    # This line won't execute
    print("5 is less than 3")

elif 4 >= 5: # False statement
    # This line won't execute
    print("4 is greater than or equal to 5")

elif 5 <= 4: # False statement
    # This line won't execute
    print("5 is less than or equal to 4")

else:
    # The program will execute these lines, since
    # the above if/elif conditions were not met.
    print("5 is not less than 3")
    print("4 is not greater than or equal to 5")
    print("5 is not less than or equal to 4")

Examples

age = 18

if age >= 65: # False statement
    # This line won't execute
    print("Would you like a senior discount?")

elif age < 12: # False statement
    # This line won't execute
    print("Would you like a kids menu?")

else:
    # This line will execute, since the above conditions
    # were not met.
    print("Do you have a student ID for a student discount?")

##############################

animal = "fish"

if animal == "fish": # True statement
    # This line will execute.
    print("Check if aquarium needs fresh water")

else:
    print("Check if their water bowl needs more water")

Nested conditional statements

Nested conditional statements in Python take basic conditional structures a step further. They involve placing one conditional statement inside another, allowing you to create more intricate decision-making logic within your code. This nested structure is particularly useful when you need to make more specific decisions within a broader context.

The key to understanding nested conditionals is the concept of indentation. In Python, indentation is not just a matter of style; it's crucial for defining the scope of code blocks. Indentation is what visually separates one level of nesting from another. When you nest one conditional statement inside another, the inner statement is indented to indicate that it's part of the outer block.

However, while nested conditionals are powerful, it's essential to balance complexity with readability. Excessive nesting can lead to code that is difficult to understand and maintain. In such cases, it's often a good practice to add comments to clarify the purpose of each level of nesting, making it easier for you and other developers to comprehend the code's logic.

Syntax

# Basic syntax of nested conditional statements:

if 2 == 1: # False statement
    # This line won't execute
    print("2 is equal to 1")

else:
    # This line will execute, since the above condition wasn't met
    print("2 is not equal to 1")
    # The program will next evalutate this condition
    if 2 == 2: # True statement
        # This line will execute since the above condition is met
        print("2 is equal to 2")

##############################

if 2 != 1: # True statement
    # This line will execute
    print("2 is not equal to 1")

    # The program will evalutate this condition next
    if 2 == (1 + 2): # False statement
        # This line won't execute since the above condition is not met
        # Program will now exit out of the original conditional flow structure
        print("1 + 2 = 2")

elif 2 > 1: # True statement
    print("2 is greater than 1")

else:
    print("2 is equal to 1")

Examples

age = 18

if age >= 21: # False statement
    # This line won't execute
    print("Would you like a glass of wine with your dinner?")
    # This statement won't be evalutated
    if age >= 65:
        print("Would you like to use a senior discount?")

elif age < 12: # False statement
    # This line won't execute
    print("Would you like a kids menu?")

else:
    # This line will execute, since the above conditions
    # were not met.
    print("Do you have a student ID for a student discount?")

Looping Constructs

Loops in Python are essential for performing repetitive tasks and iterating over data structures. Python provides two primary types of loops: the for loop and the while loop.

• For loop: The for loop is used when you have a sequence of elements, such as a list, tuple, or string, and you want to iterate through each element one by one. The loop iterates over the elements in the sequence, and you can perform specific actions for each item within the loop's block

• While loop: The while loop is another type of loop in Python. It is used when you want to repeat a block of code as long as a specific condition is true. The loop checks the condition before each iteration and stops once the condition becomes false.

The 'for' loop

The for loop in Python is a fundamental construct that allows you to iterate through a sequence of items or elements. This sequence can be a list, tuple, string, dictionary, or any other iterable object. The for loop follows a simple and elegant syntax that provides a clear way to execute a block of code for each item in the sequence.

The primary purpose of the for loop is to automate repetitive tasks, where you need to perform the same operation on multiple items. Instead of writing the same code for each item, you can encapsulate the operation within the loop, and Python takes care of the iteration for you.

The for loop is not limited to numerical sequences; it can work with any iterable data structure, including strings, where it iterates through each character, or dictionaries, where it iterates through keys or values.

Syntax

# Basic for loop syntax:

l = [2, 4, 6, 8, 10]

for i in l:
    # Prints each element in l in sequential order
    print(i)

Examples

# Example nesting a conditional statement inside a for loop

lucky_number = 3
l = [1, 2, 3, 4, 5]

# Iterate through each element in l
for i in l:
    # For each element of l, check if it equals the lucky number
    if i == lucky_number:
        # This line will execute ONCE
        print("Lucky number " + str(lucky_number))

The 'range()' function

The range() function in Python is a versatile and essential tool for generating sequences of numbers. It is commonly used in conjunction with for loops to iterate over a range of values. The range() function creates a special type of iterable called a range object, which represents an immutable sequence of numbers.

The range() function is not limited to for loops; you can also convert a range object to a list or use it in other contexts where iterable sequences are required. It's a valuable tool for creating and managing sequences of numbers efficiently, which is especially useful in various programming scenarios, including counting, iterating, and indexing.

The arguments of the range() function are as follows:

• start (optional) is the initial value of the sequence. If omitted, it defaults to 0.

• stop is the endpoint of the sequence, and the generated sequence will not include this value.

• step (optional) is the increment by which each number in the sequence increases. It defaults to 1 if not provided.

start = 10
stop = 20
step = 2

# This loop will start at i = 10, stop executing once i = 20, 
# and increment i by 2 each iteration
for i in range(start, stop, step):
    print(i)

# Output:
# 10
# 12
# 14
# 16
# 18

##############################
# Example with just the "stop" argument
# This loop will start at i = 0, stop executing once i = 10,
# and increment i by 1 each iteration.
for i in range(10):
    print(i ** 2)

# Output:
# 0
# 1
# 4
# 9
# 16
# 25
# 36
# 49
# 64
# 81

The 'while' loop

The while loop is a powerful control structure that allows you to repeatedly execute a block of code as long as a specific condition remains true. Unlike the for loop, which is ideal for iterating through sequences, the while loop is excellent when you don't know in advance how many iterations you'll need, but you do know the condition under which the loop should continue.

The loop starts by evaluating the condition. If the condition is True, the code block beneath the while statement is executed. After the block is executed, the condition is evaluated again, and the loop continues to run as long as the condition remains True.

One key feature of the while loop is its adaptability. It's not limited to counting or numeric operations; it can be used for various tasks, such as searching through data or managing program flow based on dynamic conditions. However, it's crucial to ensure that the condition in a while loop will eventually become False, or you risk creating an infinite loop, which can lead to a program becoming unresponsive or even crashing.

Syntax

# Basic while loop syntax:

x = 0
y = 10

# While this condition remains true
while x < y:
    # This loop will stop executing once x >= y
    # Each iteration, we're incrementing x by 1
    # and decrementing y by 1
    x += 1
    y -= 1
    print("x: ", x)
    print("y: ", y)

# Output:
# x:  1
# y:  9
# x:  2
# y:  8
# x:  3
# y:  7
# x:  4
# y:  6
# x:  5
# y:  5

# As you can see, this loop will eventually stop since there's a moment
# when x is no longer less than y (when x = y = 5)

Nested loops

Nested loops in Python refer to the practice of placing one loop inside another loop. This approach allows you to create more complex and multi-dimensional iterations. While Python supports both for and while loops, nested loops are often used in scenarios where you need to work with arrays, matrices, or perform operations on multiple levels of data.

The key concept behind nested loops is that the inner loop completes its entire cycle for each iteration of the outer loop. This results in all possible combinations of the inner and outer loop iterations being processed. For example, if you have a list of students and a list of subjects, you can use nested loops to generate all possible combinations of students and subjects

Nested loops are also used to work with multi-dimensional data structures, like lists of lists (2D arrays) or matrices. You can use nested loops to traverse and manipulate elements within these data structures.

It's important to consider the performance implications of nested loops, especially when dealing with large datasets. The time complexity of nested loops is often proportional to the product of the lengths of the sequences they iterate over. So, if you have two nested loops, each iterating over a list of length n, the total number of iterations becomes n * n = n^2, which can be substantial for large n.

Syntax

# nested for loop

# Outer loop will start at 1, stop at 6, increment by 1
for i in range(1, 6):
    # Inner loop will start at 1, stop at 5, increment by 1
    for j in range(1, 5):
        result = i * j
        print(i, " * ", j, " = ", result)

# Output:    
# 1  *  1  =  1
# 1  *  2  =  2
# 1  *  3  =  3
# 1  *  4  =  4
# 2  *  1  =  2
# 2  *  2  =  4
# 2  *  3  =  6
# 2  *  4  =  8
# 3  *  1  =  3
# 3  *  2  =  6
# 3  *  3  =  9
# 3  *  4  =  12
# 4  *  1  =  4
# 4  *  2  =  8
# 4  *  3  =  12
# 4  *  4  =  16
# 5  *  1  =  5
# 5  *  2  =  10
# 5  *  3  =  15
# 5  *  4  =  20


# nested for and while loop
for i in range(5):
    j = 0
    while j < i + 1:
        print("*", end=" ")
        j += 1
    print()

# Output:
# * 
# * * 
# * * * 
# * * * * 
# * * * * * 


# Nested while loop
outer_count = 1

while outer_count <= 3:
    inner_count = 1

    while inner_count <= 3:
        print("Outer Count: ", outer_count, "Inner Count: ", inner_count)
        inner_count += 1

    outer_count += 1

# Output:
# Outer Count:  1 Inner Count:  1
# Outer Count:  1 Inner Count:  2
# Outer Count:  1 Inner Count:  3
# Outer Count:  2 Inner Count:  1
# Outer Count:  2 Inner Count:  2
# Outer Count:  2 Inner Count:  3
# Outer Count:  3 Inner Count:  1
# Outer Count:  3 Inner Count:  2
# Outer Count:  3 Inner Count:  3

Loop Control Statements

Loop control statements are essential tools for managing the flow of loops, whether they are for or while loops. These statements allow you to modify the behavior of a loop, control the iteration process, and handle exceptional conditions. In Python, there are three primary loop control statements: break, continue, and pass.

1. break: The break statement is used to prematurely exit a loop before it reaches its normal conclusion. When a break statement is encountered within a loop, the loop is terminated immediately, and the program continues executing the code after the loop.

2. continue: The continue statement is used to skip the rest of the current iteration of a loop and move to the next iteration. It is handy when you want to avoid executing certain code within a loop for specific iterations while continuing with the remaining iterations.

3. pass: The pass statement is a placeholder that does nothing. It's often used when a statement is syntactically required but you don't want to perform any action. It can be helpful when you're in the process of developing code and need to define a placeholder for future implementation.

These loop control statements give you the flexibility to handle various scenarios efficiently. They allow you to control the flow of loops based on specific conditions, skip iterations when needed, and create placeholders for future code development. By mastering these control statements, you can write more versatile and robust loops in your Python programs.

The 'break' statement

The break statement is particularly useful in situations where you need to stop the execution of a loop based on a specific condition or handle exceptions.

When Python encounters a break statement within a loop, it immediately terminates the loop and continues executing the code after the loop.

It's worth noting that while the break statement is a valuable tool, its use should be handled with care. Misuse of the break statement can lead to unexpected program behavior or make the code less readable. As such, it's important to document the intended behavior and reasons for using the break statement when working on larger and more complex projects.

Syntax

numbers = [1, 3, 5, 7, 9, 11]
target = 7

# This loop will iterate through each element of the 'numbers' list
for number in numbers:
    # For each number in 'numbers' list, check if the number is
    # equal to the target (7).
    if number == target:
        # If the number in iteration is equal to the target,
        # print the statement below and exit the for loop.
        print("Found the target number: ", target)
        break

# Output:
# Found the target number:  7

# As you can see with the above example, the break statement allows
# us to save compute time by automatically ending the loop once
# we have the information that we need.

The 'continue' statement

The continue statement is a versatile control structure in Python that allows you to skip the remaining code within the current iteration of a loop and move to the next iteration. It's particularly useful when you want to selectively exclude certain iterations from being processed within a loop based on specific conditions.

Another common use of the continue statement is to control loop behavior when processing data. For example, in data validation or data processing tasks, you may want to skip over certain entries or conditions and continue with the rest of the data.

As with any control structure, it's important to use the continue statement judiciously and document your code appropriately. Overusing continue statements or using them inappropriately can lead to code that is hard to understand and maintain.

Syntax

# syntax of the continue statement

# Start at 1, end at 11
for i in range(1, 11):
    # If i mod 3 is equal to 0, then don't do anything and continue iterating
    if i % 3 == 0:
        continue
    # This line below will only execute when the above condition is not met.
    # In other words, if i mod 3 is not equal to 0.
    print(i)

# Output:
# 1
# 2
# 4
# 5
# 7
# 8
# 10

The 'pass' statement

The pass statement is a simple, yet valuable, control structure in Python that serves as a placeholder for future code. It is a no-operation statement, meaning it does nothing when executed. The primary purpose of the pass statement is to provide a syntactically required statement that doesn't perform any action, allowing you to create empty code blocks, functions, or classes without triggering syntax errors.

The pass statement is useful in several situations:

• Creating a Placeholder: Often, during the development of a program, you may need to define functions, classes, or blocks of code that are not yet implemented. In such cases, you can use the pass statement to create a placeholder until you are ready to add the actual code. This allows you to maintain code integrity and readability while indicating that certain parts of the program are intentionally left incomplete.

• Avoiding Syntax Errors: In Python, certain structures, such as loops or conditional statements, require an indented block of code, even if that code is empty. Without the pass statement, an empty block would trigger a syntax error. Using pass prevents such errors and allows you to maintain proper code structure.

• Temporary Bypass: The pass statement can also be used to temporarily bypass certain parts of code, helping you to debug or test your program while excluding specific sections without deleting them.

Syntax

# pass in if-else statement
car = {
"color": "red",
"miles": 80000,
"year": 2018}

if car["miles"] >= 100000:
    pass  # Placeholder for future code

else:
    print("Your car is still under 100,000 miles")

Conclusion

I hope after reading this article, you now have a deeper understanding of the concept of controlling the flow of Python programs, and how to implement the best practices in controlling flow.

In this article, you learned the significance of conditional statements like 'if,' 'elif,' and 'else' in enabling the execution of different code blocks based on specific conditions. Additionally, you explored the versatility of loops, both 'for' and 'while,' in facilitating repetitive tasks.

If you have any questions or suggestions for a topic you want me to cover in the future, then feel free to leave a comment down below.

Lastly, make sure to follow my newsletter to never miss out on when I post new content!

In this article, we explore binary trees and their importance in computer science. We cover the terminology, four main traversal methods (preorder, inorder, postorder, and level order), and some basic operations such as insertion, deletion, and searching. By understanding binary trees and their applications, you can optimize data structures and improve your problem-solving skills in computer science and mathematics.

Introduction

This article is part of a series called Log Base Two, a series dedicated to the relationship between math and computer science.

Just to give a bit of background on my experience in math, I've excelled in a total of 10 college courses in math:

1. Single-variable differential calculus

2. Single-variable integral calculus

3. Multi-variable differential and integral calculus

4. Multi-variable differential and integral calculus of vector-valued functions

5. Linear Algebra

6. Differential equations

7. Probability and statistics

8. Data analysis using R programming language

9. Multivariate statistics

10. Discrete math

For a large majority of those 10 classes, I ended up with A's.

Although, before college, I struggled a lot with math in the classroom, even though math had always been my favorite subject since I was in elementary school. I found it hard to truly grasp the concepts taught because my high school teachers were too focused on skill assessment. Instead of focusing on the actual concept being taught, I was too worried about how I was going to pass the test the following week.

Once I got to college, I realized that your math grade (or any grade for that matter) truly doesn't define your potential. Further, I'd argue that your success in math education is heavily influenced by the quality of the teacher/professor's teaching.

My mission with this series is to show other people that math isn't so scary if you break down mathematical concepts into digestible bouts of information and investigate use cases of math in your primary field of interest (in this case, computer science). Along the way, I hope to also supplement your math education with quality content. I believe that everyone is capable of learning and truly loving mathematics.

New articles in this series are posted every Thursday!

Prime Video Channels free trial

Enjoy Thursday Night Football and other Amazon Originals, popular movies, and hit TV shows — all available with your Prime membership.

Members can also subscribe to 100+ channels and get special deals to rent or buy new release movies and more.

If you're not a Prime member yet, then start your free 30-day trial today!

I. Overview of binary trees

In math, a binary tree is a type of graph that falls under the category of trees (as implied by the name).

Due to the simplistic structure and logic of binary trees, they've played an integral role as one of the foundational data structures used in computer science.

Like all data structures, trees are simply representations of a set of data points (aka nodes) that are connected via edges.

The best way to think of binary trees is to imagine a family ancestral tree (sort of).

In a family ancestral tree, you have a hierarchy of people defined by generation. At the very bottom are the youngest, and at the very top are the oldest.

Additionally, no one in the family ancestral tree is directly connected to any family member above the level right before them (their parents). Similarly, no one in the family ancestral tree is directly connected to any family member below the level right after them (their children).

Binary trees are structured similarly but not as complicated.

To start, binary trees begin with a single node (called the root node) at the highest level of the hierarchy.

Also, instead of having 2 parents, each node in a binary tree only has 1 parent.

Finally, each node can have no more than 2 child nodes (simply referred to as the left and right child).

a) Importance of binary trees in computer science

The entire motivation behind the study of data structures in computer science is to understand which data structures are most efficient for storing data for a particular type of application, algorithm, or task.

The idea is that by optimizing your data structure, you can shorten the time it takes to build the data structure based on the nature of your data, optimize the time it takes to add or retrieve data and optimize the size of the data structure in computer memory.

In computer science, binary trees are typically used in data compression applications, database indexing, sorting algorithms, decision trees in supervised machine learning, and much more.

II. Binary tree terminology

    1 <-- root/parent node
   / \
  2   3 <-- parent/child node
 / \   \
4   5   6 <-- child/leaf node

levels: 3

__________________________

subtree with root at node 2

  2
 / \
4   5

a) Node

A node is a single data point.

In the above binary tree, all of those numbers are values held within nodes.

Since binary trees are just sets, you can also think of the data within a node as being an element of the set defined by the binary tree.

b) Root

The root of a binary tree is the node that is at the highest level within the tree.

In the above binary tree, the node containing the value 1 is the root node.

You can think of the root as being the "starting point" for the binary tree.

From the root, edges branch out to child nodes of the root, and then those child nodes of the root branch out edges to their child nodes and so on until the tree is populated with all of the data points.

The root node is the only node that doesn't have a parent node.

c) Parent, child, and sibling nodes

A parent node is any node that has at least 1 child node. More specifically, a parent node is a parent to the node(s) in the level right below it that it's connected to via edges.

In the above binary tree, 2 is the left child of the root node and is also the parent of its left child (4) and its right child (5).

A child node is any node that has a parent node. By definition, every node in a binary tree is a child node except for the root node. Child nodes are classified even further by which side they fall under their parent node. If a child is to the left of the parent node, then it's called the "left child". Alternatively, if a child is on the right of the parent node, then it's called the "right child".

A sibling node is any child node that is connected to the same parent node as another child node. By definition, each node can have either 0 or 1 sibling node.

d) Leaf nodes

A lead node is any node that does not have any child nodes.

In the above binary tree, the node containing the value 4 is a leaf node.

By definition, all of the nodes in the bottom level of the tree are considered leaf nodes.

e) Level and height

In a binary tree, the hierarchy of each node about all the other nodes is determined by its level and height.

The highest level is level 1, and this is the level that contains the root node. From there, the child nodes of the root node makeup level 2 and so on.

The height of a node is defined by the longest path from that node to a leaf node. The height is measured in units of edges. So if a binary tree has 3 levels, this would mean that the root node has a height of 2 (since you'd have to traverse 2 edges from the root node to a leaf node in the bottom level). By definition, each leaf node has a height of 0.

f) Subtree

We can break down a binary tree into subtrees where we define the root node and then build our subtree by including the edge(s) and child node(s) of that node and so on.

III. Binary tree traversal

One important question to ask with any data structure is: what are the ways that I can sequentially list out every single data point contained in the data structure?

For binary trees, there are 4 main ways that we can traverse the tree and be able to visit each node.

Besides simply being able to return each node contained in a binary tree, tree traversals also serve as a required step in many of the operations that can be performed on binary trees as you'll see in the section further down.

a) Preorder

The basic principle of preorder traversal is to start at the root node, then visit each node on the left side of the tree, followed by the right side of the tree.

When we do preorder traversal, we think of each node as being a root node of its own subtree. As such, the algorithm used in preorder traversal is recursive.

The preorder traversal algorithm works like this in Python:

# Create node class to create nodes as objects
class Node:

    def __init__(self, value):
        self.value = value
        self.left = None
        self.right = None

# Pass in the root node to begin the algorithm
def preorder_traversal(root):

    # Condition to stop recursion if node doesn't have child
    if root is None:
        return []

    result = []
    # Start at root
    result.append(root.value)
    # Recursively traverse left subtree
    result += preorder_traversal(root.left)
    # Recursively traverse right subtree
    result += preorder_traversal(root.right)

    return result

#example

#    1
#   / \
#  2   3
# / \   \
#4   5   6
# preorder traversal:
# 1, 2, 4, 5, 3, 6

root = Node(1)
root.left = Node(2)
root.right = Node(3)

root.left.left = Node(4)
root.left.right = Node(5)

root.right.right = Node(6)

print(preorder_traversal(root))

b) Inorder

With inorder traversal, we start by traversing the left subtree, then the root node, followed by the right subtree.

In Python, we'd implement the inorder traversal like this:

class Node:

    def __init__(self, value):
        self.value = value
        self.left = None
        self.right = None

def inorder_traversal(root):

    if root is None:
        return []

    result = []

    result += inorder_traversal(root.left)
    result.append(root.value)
    result += inorder_traversal(root.right)

    return result

#example

#    1
#   / \
#  2   3
# / \   \
#4   5   6
# inorder traversal:
# 4, 2, 5, 1, 3, 6

root = Node(1)
root.left = Node(2)
root.right = Node(3)

root.left.left = Node(4)
root.left.right = Node(5)

root.right.right = Node(6)

print(inorder_traversal(root))

If you notice, the code for inorder traversal is almost identical to the code for preorder traversal, except we switched the order for two lines: result += inorder_traversal(root.left) and result.append(root.value).

c) Postorder

In postorder traversal, we start by traversing the left subtree, then the right subtree, followed by the root node.

With Python, we could implement postorder traversal like this:

class Node:

    def __init__(self, value):
        self.value = value
        self.left = None
        self.right = None

def postorder_traversal(root):

    if root is None:
        return []

    result = []

    result += postorder_traversal(root.left)
    result += postorder_traversal(root.right)
    result.append(root.value)

    return result

#example

#    1
#   / \
#  2   3
# / \   \
#4   5   6
# postorder traversal:
# 4, 5, 2, 6, 3, 1

root = Node(1)
root.left = Node(2)
root.right = Node(3)

root.left.left = Node(4)
root.left.right = Node(5)

root.right.right = Node(6)

print(postorder_traversal(root))

As you can see, postorder traversal is almost identical to inorder traversal except we switch two lines of code: result += postorder_traversal(root.right) and result.append(root.value).

d) Level order

Out of all the traversal methods here, level order is the most unique.

The main idea of level order traversal is to traverse the tree by level. Starting at level 1 (the root node), then visiting each node in level 2, and so on.

Since we typically don't define a node's level in programming, level order traversal relies on the use of a list traditionally called a queue. In the queue, we sequentially store the left and right child nodes of the current root node. Then, we remove the first node in the queue and recursively run the function on that first node we removed from the queue.

With Python, we could write a level order algorithm like this:

class Node:

    def __init__(self, value):
        self.value = value
        self.left = None
        self.right = None

def level_order_traversal(root, queue = []):

    result = []

    # Add in current node value
    result.append(root.value)

    if root.left is not None:
        # If current node has left child, add it to queue
        queue.append(root.left)

    if root.right is not None:
        # If current node has right child, add it to queue
        queue.append(root.right)

    # If there are nodes in the queue:
    if len(queue) > 0:
        # Simultaneously remove the first node from the queue
        # and define/store it in a variable
        node = queue.pop(0)
        # Recursively run algorithm
        result += level_order_traversal(node, queue)

    return result

#example

#    1
#   / \
#  2   3
# / \   \
#4   5   6
# level order traversal:
# 1, 2, 3, 4, 5, 6

root = Node(1)
root.left = Node(2)
root.right = Node(3)

root.left.left = Node(4)
root.left.right = Node(5)

root.right.right = Node(6)

print(level_order_traversal(root))

IV. Binary tree operations

There are many different operations that we can perform on binary trees to return information about the tree, return nodes, return subtrees, or modify the data within a binary tree.

I'm going to cover some of the most basic operations that can be performed on binary trees, but again, this is not even close to being a comprehensive list of all the operations you can perform.

a) Insertion

Insertion involves adding a new node to the binary tree while still maintaining the original structure, properties and logic of the binary tree.

To insert a node into a binary tree, we start at the root node. From the root node, we compare the new node's value with the root node's value. If the new value is less than the root node's value, compare the new node to the left child; otherwise, compare the new node to the right child. We repeat this process until we find an empty spot to place the new node in the bottom level.

b) Deletion

Alternative to adding new nodes with insertion, we can remove nodes with deletion.

The basic principle of deletion is that when we remove a node, we're technically replacing the old node with a node that will fill the same spot in the tree that the old node was.

The node that replaces the deleted node is the lowest and rightmost node.

In practice, this is accomplished by first locating the node we want to delete and the lowest, rightmost node. After that, we assign the value of the node we want to remove to the value of the lowest, rightmost node's value. Finally, we delete the lowest, rightmost node from the tree.

c) Searching

If we want to see if a particular node is an element of the binary tree, then we use an operation called searching.

We first choose a traversal technique, then we define our traversal algorithm to stop once the node we're searching for is the current node.

If the entire tree is traversed and the node isn't found, then we'll know that the node isn't an element of the binary tree.

V. Conclusion

After reading this article, I hope you now understand what binary trees are and the different operations that we can perform on them.

You learned about all the different components/terminology of binary trees, the 4 main methods of traversing a binary tree, and some of the basic operations that we can perform on binary trees.

If you have any lingering questions, please feel free to leave a comment down below.

Lastly, make sure to follow my newsletter so you never miss out on when I post new content.

In this article, we explore the concept of flow state, a psychological term describing the feeling of complete immersion and focus in a challenging or creative activity. We discuss the factors that influence entering a flow state, including skill level, challenge level, environment, and mindset. Additionally, we provide techniques to enter and enhance the flow state, such as setting clear goals, eliminating distractions, creating a dedicated workspace, practicing mindfulness, and encouraging exploration. By understanding and harnessing the power of the flow state, individuals can boost their productivity, creativity, and overall satisfaction in their work.

Introduction

This article is part of a series called Bit by Bit, a series devoted to all things programming. Whether you're still a computer science undergrad or the CTO of Apple, there's something for you here.

New articles in this series are posted every Tuesday!

I. Overview of flow state

Imagine this: you sit down to program and the entire world melts away. Suddenly, all of your worries and fears vanish. The only thing that exists is your mind and the computer in front of you.

Any prior feelings of fatigue, hunger, thirst, and discomfort are no longer there.

Your eyes are locked onto the code editor with razor-sharp focus. Your fingers seem to be typing as fast as your thoughts.

You're effortlessly generating ingenious solutions and executing those solutions with such elegant code.

Anytime you run your code and get an error, you're able to debug with such grace as if the error is just some dust that you're wiping off with a microfiber cloth.

This is exactly what being in a flow state feels like.

The flow state is a term from the field of psychology that describes the feeling that people get when they're fully immersed in a task/activity. The activities that are associated with this state are individual to every person but are typically activities that a person is passionate about and skilled at.

a) Effects of achieving a flow state

Some of the common effects that people report when they enter a flow state include:

• Intense focus

  • It's very hard to get distracted while you're in a flow state

  • You might get a little irritated if someone tries to get your attention while you're in a flow state

• Reduced stress/anxiety

  • Being in a flow state can make you feel very calm without feeling sedated

  • A flow state can make you even more productive than a cup of coffee can but without any of the negative effects (jitters, anxiety, etc.)

• Increased self-esteem/confidence

  • When you're in a flow state, you feel like an absolute expert in the activity that you're engaging with

  • You have no self-doubt about your capabilities

• An intense feeling of joy

• Enhanced creativity and problem-solving skills

I've entered into a flow state numerous times while programming or solving math problems in coursework and I've experienced all of those wonderful effects that I described above.

Typically, a flow state for me can last anywhere from a couple of hours to the entire day. In the cases where I was in a flow state the entire day, I wouldn't even take breaks to eat or socialize (unless I was working alongside one or more people).

Although, on days where I was in a flow state the entire day, I'd sometimes take 15-30 minute walks to draw inspiration from music (usually Kanye West :D ) and get a little mid-day exercise in.

Even during these walks, I would still feel all of those effects of being in a flow state and my mind would continue to conjure up solutions related to the activity that I was engaged with.

II. Factors influencing the flow state

The greatest thing about the flow state is that everyone can organically enter this state.

With that being said, certain factors at play influence whether you can successfully enter a flow state for the task that you're engaged in.

a) Skill level

Perhaps one of the most important factors for entering a flow state is how skilled you are at that particular task/activity.

If you're a programmer, this doesn't mean you have to be on the same level as Guido van Rossum (the creator of Python). It just means that you should already have a solid foundation.

If you're just starting to learn how to program, for example, then it's much harder to enter into a flow state.

Alternatively, if you're past the learning curve and now able to build cohesive programs, then you might find it easier to enter a flow state.

I think it's worth noting that this doesn't necessarily mean that you can't feel generally focused and rewarded during the learning process. As long as you're passionate about software engineering, then the learning process won't feel dull.

It's just that you won't be able to reach that specific feeling of being in a flow state while you're still learning.

b) Challenge level

The challenge level of the activity is a factor that goes hand-in-hand with your skill level associated with the activity.

If a task is too easy, then you'll just end up feeling bored and unsatisfied.

But if the task is fairly challenging, then it'll be much easier to enter a flow state.

Once you're able to combine your high skill level with a challenging task, you'll become unstoppable.

c) Environment

The environment you're in while you're doing the activity is a highly individual factor for inducing a flow state.

What might work for someone else may not work for you.

I know that the perfect environment for me to enter a flow state is at nighttime at a coffee shop with a low level of distractions and surrounded by other busy people.

If you've never experienced a flow state, start by asking yourself where you're usually the most productive.

Think about the noise level, whether you're alone or around others, in public or private, the time of day, and even the weather. Obviously, you can't control the weather, but if you find that you're more productive on rainy days, for example, maybe try simulating that by playing the sound of rain and getting a hot drink (if you do that on rainy days). If you notice that you're more productive when it's warm and sunny, then maybe try doing the activity in a bright location.

d) Mindset

Similar to the environment, your mindset is another highly individual factor.

A positive, or at least neutral, mindset is conducive to entering a flow state.

If your mind is too focused on negative thoughts before engaging in the activity, then it'll be hard to enter a flow state.

In my own experience, it's also the context of the thoughts that matter as well. If my mind is occupied by stressors and anxiety that are completely irrelevant to the activity, then it's almost impossible to enter a flow state.

Although, it's possible for me to still enter a flow state if I have negative thinking that's directly related to the activity.

For example, if I'm pressed by a deadline, then I find that this doesn't prevent me from entering a flow state. Further, the flow state will even completely override the stress of the deadline.

III. Techniques to enter flow state

Now that you understand the main factors that go into entering a flow state, you can learn specific ways to enter into a flow state.

Sometimes, you might notice that you "accidentally" enter into a flow state without even trying. However, there are tricks you can do to purposely enter into a flow state (assuming you have all those main factors covered).

a) Set clear goals

Being in a flow state is naturally very productive and goal-driven.

So it makes sense that one of the steps you should take to enter a flow state is to know exactly what you want to accomplish.

If you have a clear roadmap, then you'll be able to gauge your progress and clear all the confusion revolving around the path you need to take. With all the confusion out of the way, your mind has more room to focus on the actual activity.

In software engineering, this can very easily be accomplished by doing things like flowcharts and pseudocode before writing code.

b) Eliminate distractions

To enter this immense state of focus, you'll first need to clear any distractions that are demanding your attention.

This means to get rid of anything that is not directly related to the activity/task you're about to do.

If you're programming, this means putting away your phone, putting your code editor into full-screen mode, and not talking to anyone about anything unless it's about that specific program you're working on.

c) Create a dedicated workspace

This tip does not have so much to do with the actual space around you (I had already discussed the environmental factor above). Rather, I'm referring to the tools and resources you interact with during your activity.

For example, when I'm programming, I always use the same laptop, the same code editor(s), the same color theme, and even the same code editor layout (I like keeping a terminal open in the bottom panel of the code editor ;)

Figure out what works best for you and stick with it.

d) Balance skill and challenge

As I mentioned above in the main factors, you want the activity to be challenging and stimulating, and you want to be skilled in the work related to the activity.

However, don't overestimate your abilities, otherwise, you'll just end up getting frustrated.

For example, if you're engineering a game and you reach a point where you need to use a new library/framework to achieve the next step you need to do, then take the necessary time to study and learn about the library/framework.

Make sure that you're knowledgeable enough about the tools required for an activity before attempting to enter into a flow state.

e) Practice mindfulness

Start practicing mindful meditation!

Mindful meditation is the practice of closing your eyes, relaxing all of your muscles, and centering all of your attention and focus on your breath.

A lot of the ideas and feelings around the flow state are related to the same state that a human can reach while in a mindful meditative state.

The key difference between mindful meditation and a flow state is that mindful meditation does not involve engaging with a task (besides meditating).

Not only can mindful meditation open you up to the feeling of a flow state, but it can also make it easier to integrate mindfulness into every aspect of your life.

Understanding how to be mindful will make it much easier to naturally enter into a flow state.

f) Meditation techniques

Mindful meditation is only one type of meditation. Another powerful meditation technique is transcendental meditation.

Transcendental meditation is a completely silent meditation practice where you close your eyes, clear your mind, and silently repeat a mantra in your head. A mantra is usually a one or two-syllable sound that holds no sentimental meaning to you.

It's considered best to practice transcendental meditation twice a day for 20 minutes each time if you want to reap the benefits. Also, you should choose one mantra that you'll use every single time.

While transcendental meditation is very simple, it can be hard if you're completely new to meditation.

Unlike mindful meditation, transcendental meditation has nothing to do with focus and attention. Instead, transcendental meditation is about entering a "restful-alert" state where you're awake but your mind is not in a fully conscious state. Instead, your mind is in what's called "default mode". If you're curious to learn more about how transcendental meditation affects the brain, I left a link to an EEG study that analyzes brain activity during transcendental states.

Even though transcendental meditation isn't focus-based, it can lead to enhanced creativity and a calmer resting state throughout the day, which are both things that are conducive to entering a flow state.

g) Don't force it

Lastly, don't rush the process.

One of the worst things you can do when trying to enter a flow state is to try to force it and become frustrated that you're not getting there.

Be patient with yourself and allow it to come to you.

IV. Enhancing creativity in a flow state

Now that you understand how to generally enter into a flow state, you can learn how to maximize the benefits of the flow state to achieve the task at hand.

a) Encourage exploration

Don't be afraid to explore new ways of doing things, new perspectives, and fresh insights from other people.

If you stay stuck believing that your way is the only way or the perfect way, then you'll never even have the possibility of discovering a more efficient or creative method.

For example, if you casually stumble upon an article or video explaining a method of accomplishing some programming task, then don't be afraid to implement that method into the program you're currently working on.

I can't tell you how many times I've refactored my code the very next day after realizing that there's a more elegant way to accomplish the task, or a more efficient method that saves compute time and power.

b) Experiment with different programming techniques

This is similar to my last point, but try techniques that you've never used before.

For instance, if you always define subarrays with loops, then try switching it up by using set comprehensions.

Oftentimes, making even small changes in habits (albeit, that example habit isn't inherently bad) like this can potentially lead to new insights in problem-solving.

c) Seek inspiration from various sources

Finally, find a good set of people that inspire and motivate you.

These people don't even necessarily have to be involved in the type of work you're doing.

When you find at least a few people who strike the right chord with you, then you'll naturally find it much easier to have hope and be more positive in general.

For me, I find that Kanye's music greatly inspires and motivates me, so it was very effective for me to listen to his music while taking short walks on days when I was in a flow state.

Find artists, scientists, leaders, etc. that boost your motivation and make you feel captivated; then find ways to consistently be reminded of their work.

V. Conclusion

I hope that you now have a better understanding of what the flow state exactly is and how to enter into a flow state to effectively accomplish your goals.

Remember to stay patient with yourself and take the time necessary to build up the skills and knowledge required for the activity/task you're going to embark on.

If you have any questions or suggestions for a topic you want me to cover in the future, then feel free to leave a comment down below.

Lastly, make sure to follow my newsletter to never miss out on when I post new content!

VI. Additional resources

a) Articles

• A New EEG Study Finds That Transcendental Meditation Activates The Default Mode Network Of The Brain (2010)

In this article, we explore the basics of logic in discrete mathematics, covering propositional variables, logical connectives/operators, truth tables, tautologies, contradictions, logical equivalence, and forming inverses, converses, and contrapositives of base implications. By understanding these concepts, you can build a strong foundation for further study in discrete math and its applications in computer science.

Introduction

This article is part of a series called "Log Base Two", a series dedicated to the relationship between math and computer science.

Just to give a bit of background on my experience in math, I've excelled in a total of 10 college courses in math:

1. Single-variable differential calculus

2. Single-variable integral calculus

3. Multi-variable differential and integral calculus

4. Multi-variable differential and integral calculus of vector-valued functions

5. Linear Algebra

6. Differential equations

7. Probability and statistics

8. Data analysis using R programming language

9. Multivariate statistics

10. Discrete math

For a large majority of those 10 classes, I ended up with A's.

Although, before college, I struggled a lot with math in the classroom, even though math had always been my favorite subject since I was in elementary school. I found it hard to truly grasp the concepts taught because my high school teachers were too focused on skill assessment. Instead of focusing on the actual concept being taught, I was too worried about how I was going to pass the test the following week.

Once I got to college, I realized that your math grade (or any grade for that matter) truly doesn't define your potential. Further, I'd argue that your success in math education is heavily influenced by the quality of the teacher/professor's teaching.

My mission with this series is to show other people that math isn't so scary if you break down mathematical concepts into digestible bouts of information and investigate use cases of math in your primary field of interest (in this case, computer science). Along the way, I hope to also supplement your math education with quality content. I believe that everyone is capable of learning and truly loving mathematics.

New articles in this series are posted every Thursday!

Amazon Prime Free Trial

Free 30-day trial for Amazon Prime: https://amzn.to/3RJN4zV

For college students; Free 6-month trial for Amazon Prime Student: https://amzn.to/45mPuHV

I. Overview of logic

Our ability to reason using logic is perhaps one of the most defining qualities of what makes us human.

Even when we're being "overly emotional", we're technically still using logic. Albeit, this type of logic is usually based on fallacies.

For instance, if you choose to never visit a restaurant again because you got food poisoning from it once, you're using logic based on your personal experience of the painful torment you had to endure that will forever be tied to that restaurant in your mind.

Alternatively, if you got food poisoning from a restaurant once but choose to keep dining at the restaurant, maybe your logical defense is that you've eaten at the restaurant hundreds of times so that one time is not statistically significant.

In both of those cases of reasoning, you're forming an argument constructed from a logical relationship between 2 propositions.

In the first case, your root, refined argument is: "If I get food poisoning from a restaurant, then I'll get food poisoning from the restaurant again." The first proposition is "If I get food poisoning from a restaurant", and the second proposition is "I'll get food poisoning from the restaurant again". You then logically construct your argument by connecting these 2 propositions with an "if...then" statement. Whether this argument is true or not is another story.

In the second case, your root, refined argument is: "If I get food poisoning from a restaurant less than 1% of the hundreds of times I've eaten there, then it is due to random chance." The first proposition is "If I get food poisoning from a restaurant less than 1% of the hundreds of times I've eaten there", and the second proposition is "It is due to random chance". Once again, you connect these 2 propositions using an "if...then" statement to form your argument.

At this point, it should be noted that sometimes, certain arguments can be incredibly hard to prove or disprove, and sometimes even impossible to prove or disprove.

For the first argument to be true, all that has to happen is you get food poisoning from the restaurant at least once more. Theoretically, you could get food poisoning from the restaurant again the very next month and conclusively prove your argument true. Alternatively, for the first argument to be false, you'd have to never get food poisoning from the restaurant again in your life. Although, assuming you live for a long time, it could take decades before this argument can conclusively be proven false.

On the other hand, the second argument is very hard to prove true or false from the get-go. This is because even if you never get food poisoning again from that restaurant, you can't definitively say that that one time was due to pure random chance. Perhaps you were unknowingly on a date with the chef's ex-significant other at the restaurant, and the jealous chef purposely spoiled your food.

While it may seem like I'm being unrealistic and overly cynical about this whole story above, there are even some cases in "pure" math where a particular argument can simply never be proven or disproven.

One of my favorite mathematicians of all time, Kurt Gödel, proved his "incompleteness theorems" showing that there can exist statements about/within a formal system that can't be proven or disproven and that the formal system itself can not prove that its own rules are logically consistent.

For instance, our second argument in our story about food poisoning might be true based on statistical inference, but as I stated, this doesn't mean that it can be proven true. Essentially, that argument is only as true as the statistical inference you're making, and that inference itself is based on conditions/rules that can't be proven to be logically consistent.

Now that you're mind is blown, let's break down the components of arguments and logical reasoning.

a) Propositional variables

In discrete math, we typically represent propositions as variables for convenience.

Usually, the standard variables used for an argument with 2 propositions are P and Q.

For example, for the first argument in our food poisoning story, we'd define the propositions as:

$$P: If \ I \ get \ food \ poisoning \ from \ a \ restaurant$$

$$Q: I'll \ get \ food \ poisoning \ again$$

b) Logical operations and connectives

The 5 rudimentary connectives/operators in propositional logic are:

• Implication (if...then)

$$P \Rightarrow Q$$

• Bidirectional (if, and only if,...)

$$P \Leftrightarrow Q$$

• Conjunction (and)

$$P \land Q$$

• Disjunction (or)

$$P \lor Q$$

• Negation (not)

$$\lnot P$$

c) Truth tables

To systematically and conveniently show that an argument is true, we use truth tables.

In a truth table, you essentially consider every possible case of an argument to logically show whether an argument is true or false.

For an argument with 2 propositions, there are 4 unique cases: both propositions are true, both propositions are false, only the first proposition is true, and only the second proposition is true.

Let's write out the basic truth tables for all 5 of those rudimentary connectives/operators.

Implication

As we see for an argument involving 2 propositions, an implication is only false when the first proposition is true but the second proposition is false.

Intuitively, this makes sense.

For instance, consider the following implication:

$$P: x = 2$$

$$Q: 3x = 5$$

$$P \Rightarrow Q$$

In this case, if P is taken as true, then we can assume that Q is false (since if x = 2, then 3x would equal 6). Therefore, our implication itself "If x = 2, then 3x = 5" is false.

One implication truth-value that might not make sense right away is how the implication "if P is false, then Q is true" is a true implication.

Consider the following implication:

$$P: It's \ always \ sunny \ outside$$

$$Q: The \ sun \ is \ always \ shining \ onto \ Earth$$

$$P \Rightarrow Q$$

Since there are sometimes clouds in the atmosphere, we can take P as sometimes false. Although, since the Earth is always in the path of the sun's light, we can take Q as always true. However, the implication itself "If it's always sunny outside, then the sun is always shining onto Earth" is true.

Bidirectional

To construct our bidirectional truth table, let's first think about what a bidirectional argument means in the context of implication.

In a bidirectional argument, we're essentially making an implication that works both ways.

Therefore, let's construct our bidirectional truth table with this in mind by making a column for "if Q, then P".

As we see for an argument involving 2 propositions, a bidirectional argument is only true when P and Q are logically equivalent (they have the same truth-vaues). So either P and Q are both true, or they're both false.

Consider the following bidirectional argument:

$$P: Penguins \ can \ fly$$

$$Q: All \ birds \ can \ fly$$

$$P \Leftrightarrow Q$$

Our argument is "Penguins can fly if, and only if, all birds can fly". As you may already know, penguins can't fly, therefore not all birds can fly (so both propositions are false). Although, the bidirectional argument itself "Penguins can fly if, and only if, all birds can fly" is true.

Conjunction

The other 3 connectives/operators are relatively straightforward.

Also, as a side note, these remaining 3 connectives/operators don't form complete arguments on their own but rather are used as components of an argument.

The conjunction of 2 propositions forms the statement "P and Q".

In terms of truth-value, a conjunction of 2 propositions is true if, and only if, both propositions are true. Therefore, if at least 1 of the propositions is false, then the conjunction is false.

Consider the following conjunction:

$$P: Monday \ comes \ before \ Tuesday$$

$$Q: Tuesday \ comes \ after \ Monday$$

$$P \land Q$$

Since both propositions are true on their own, the conjunction "Monday comes before Tuesday and Tuesday comes after Monday" is true.

Disjunction

The disjunction of 2 propositions forms the statement "P or Q".

In terms of truth-value, if at least 1 of the propositions is true, then the disjunction is true. Therefore, a disjunction of 2 propositions is false if, and only if, both of the propositions are false.

Consider the following disjunction:

$$P: I'm \ always \ right$$

$$Q: I'm \ sometime's \ wrong$$

$$P \lor Q$$

The first proposition is false, but the second proposition is true. Therefore, the disjunction "I'm always right or I'm sometimes wrong" is true.

Negation

The last logical operator we'll go over is negation.

Negation can operate on entire arguments, statements involving conjunctions or disjunctions, and even propositions themselves.

The negation of a proposition, argument, or statement is simply the opposite truth-value.

This means that if a proposition is true, then its negation is false. Alternatively, if a proposition is false, then its negation is true.

Consider the following negation:

$$P: Our \ solar \ system \ has \ 1 \ star$$

$$\lnot P$$

The proposition is true, therefore the negation "Our solar system does not have 1 star" is false.

d) Tautologies

A tautology is a logical statement or argument that is shown to always be true regardless of the truth values of the proposition(s).

There are plenty of examples of tautologies, but let's consider a simple tautology that involves only 1 proposition.

Using the operators we've covered, how do you think we might be able to form a tautology with only 1 proposition?

Since negation is the only operator that can be used on 1 proposition value, let's start with a negation truth table.

Since the negation is always the opposite value of the proposition, it'd be wise to next form a disjunction between P and ! P.

And voilà, we have a tautology:

$$P \lor \lnot P$$

Consider the following proposition:

$$P: I'm \ a \ billionaire$$

As an English statement, we have "I'm a billionaire or I'm not a billionaire". Logically, regardless of the truth value of the proposition, that statement is always true.

Let's now think of a tautology involving 2 propositions.

As we saw when we covered those 5 operators/connectives, the only 2 connectives that form logical statements that are true most of the time are implications and disjunctions (both of these connectives between two propositions result in a statement that is true 75% of the time).

Since we used a disjunction in the last example, let's try using an implication.

That second implication case would be true if we had used a bidirectional connective instead of implication so let's include a bidirectional connective now.

Now that the second case is true, the fourth case is false. Let's target that last case with a disjunction and negation.

And there you have it! We formed a tautology involving 2 propositions:

$$(P \Rightarrow Q) \Leftrightarrow (Q \lor \lnot P)$$

Consider the following propositions:

$$P: Pigs \ can \ fly$$

$$Q: Pigs \ are \ faster \ than \ airplanes$$

As an English statement, our tautology is "If pigs can fly, then pigs are faster than airplanes if, and only if, pigs are faster than airplanes or pigs can't fly". Regardless of whether those propositions are true or false on their own, that statement is always logically true.

As you can see, part of the fun of tautologies is that you can form completely absurd arguments that are always logically true.

e) Contradictions

Contrary to tautologies, we have contradictions. Contradictions are logical statements or arguments that are shown to always be false regardless of the truth-values of the propositions.

Similar to when we considered a tautology with only 1 proposition, let's try the same thing with a contradiction.

Let's start with just a simple negation again.

Since the negation of a proposition is always the opposite truth-value of the proposition, we can use a conjunction of the proposition and the proposition's negation.

And we now have our contradiction:

$$P \land \lnot P$$

Consider the following proposition:

$$P: I \ work \ for \ N.A.S.A.$$

We can then form the contradiction "I work for N.A.S.A. and I don't work for N.A.S.A.". Regardless of whether I work for N.A.S.A., this is a statement that is always logically false since both can't be true at the same time.

Let's now try forming a contradiction involving 2 propositions.

Since a conjunction of two propositions is only true 25% of the time, let's start with a conjunction of the first proposition and the second proposition's negation.

The only case that prevents our statement from being a contradiction is when the first proposition is true and the second proposition is false. If you remember, the truth-values of an implication between 2 propositions lead to the exact opposite results where the second case is the only case that's false and the rest of the cases are true. Because of this, we've found an important result: the negation of an implication between two propositions is logically equivalent to the conjunction of the first proposition with the second proposition's negation.

In math symbols:

$$\lnot (P \Rightarrow Q) \equiv (P \land \lnot Q)$$

As a side note, that symbol that looks like an equals sign with a third line is called a "logical equivalence" symbol.

Back to our contradiction, let's now add a disjunction between the first statement and the first proposition.

If you notice, the truth values of our statement are logically equivalent to the first proposition's truth values.

$$(P \land \lnot Q) \lor P \equiv P$$

Using this fact, let's now form a conjunction between the statement we have and the negation of the first proposition.

We've now arrived at a contradiction involving two propositions.

$$((P \land \lnot Q) \lor P) \land \lnot P$$

Consider the following propositions:

$$P: I \ live \ on \ Earth$$

$$Q: I'm \ a \ human$$

We can then form the contradiction "I live on Earth and I'm not a human, or I live on Earth. Also, I don't live on Earth". Regardless of whether these propositions are true, this statement will always be logically false.

f) Logical equivalence

I briefly went over logical equivalence in the last section. Remember, if a statement/proposition has an identical truth table to another statement/proposition, then they are logically equivalent.

Although, this is not the only way to show logical equivalence.

Another method to show logical equivalence between two statements/propositions is if the bidirectional argument between them is a tautology.

Remember the tautology we made earlier?

$$(P \Rightarrow Q) \Leftrightarrow (Q \lor \lnot P)$$

Since this statement is both a tautology and a bidirectional argument between two substatements, the two substatements are logically equivalent.

In math symbols:

$$(P \Rightarrow Q) \equiv (Q \lor \lnot P)$$

Let's also review the example propositions we used:

$$P: Pigs \ can \ fly$$

$$Q: Pigs \ are \ faster \ than \ airplanes$$

The statement "If pigs can fly, then pigs are faster than airplanes" is logically equivalent to the statement "Pigs can't fly or pigs are faster than airplanes".

g) Inverse, converse, and contrapositive

For statements that are implications, we can form the inverse, converse, and contrapositive of that implication.

Let's start by defining our base implication:

$$P \Rightarrow Q$$

The inverse is then defined as:

$$\lnot P \Rightarrow \lnot Q$$

So if our base implication is the statement "If I study, then I'll do well on the test", then the inverse is the statement "If I don't study, then I won't do well on the test".

Let's analyze the truth table for these statements.

Notice how if the inverse is false, then the base implication is true. This fact will come in handy when you prove math theorems.

Let's say you don't study for your test, yet you do well on the test. Then, you've disproven the inverse statement "If I don't study, then I won't do well on the test". By disproving that statement, you've automatically also proven the statement "If I study, then I'll do well on the test". Intuitively, this makes sense, as we're essentially saying that if we did well on the test without studying, then we would have for sure done well if we had studied.

Next, let's go over the converse.

The converse of our base implication is defined as:

$$Q \Rightarrow P$$

So if our base implication is "If I study, then I'll do well on the test", then the converse is "If I do well on the test, then I had studied".

Let's analyze the truth table.

If you notice, the truth table for the converse is the same as the truth table for the inverse, thus we've just shown that the inverse is logically equivalent to the converse.

$$(\lnot P \Rightarrow \lnot Q) \equiv (Q \Rightarrow P)$$

This also means that by proving the converse false, we consequently prove the base implication true. Once again, this fact will come in handy when you need to prove a math theorem.

Finally, let's cover the contrapositive.

The contrapositive of our base implication is defined as:

$$\lnot Q \Rightarrow \lnot P$$

So if our base implication is "If I study, then I'll do well on the test", then our contrapositive is "If I don't do well on the test, then I hadn't studied".

If you notice, the truth values for the contrapositive are the same as the base implication, thus the contrapositive is logically equivalent to the base implication.

$$(P \Rightarrow Q) \equiv (\lnot Q \Rightarrow \lnot P)$$

This means that if we prove the contrapositive to be true, then we consequently prove the base implication to be true.

So if you don't do well on the test and you hadn't studied for it, then you've proven the statement "If I don't do well on the test, then I hadn't studied" to be true. Consequently, you've also proven the statement "If I study, then I'll do well on the test" to be true.

III. Conclusion

I hope that this article has served as a starting ground for understanding the intricacies around logical statements in discrete math.

In this article, you learned about propositional variables, logical connectives/operators, truth tables, tautologies, contradictions, logical equivalence, and forming inverses, converses, and contrapositives of base implications.

The next topic to learn about in discrete math is how to apply everything you learned in this article to prove mathematical theorems. This might be a topic I cover in the future, so stay tuned ;)

If you have any lingering questions, then please make sure to leave a comment down below.

Lastly, make sure to follow my newsletter to never miss out on when I post new content!

In this article, we discuss error handling in Python, including its importance in software development, how to work with exceptions and best practices for implementing error handling. We cover the use of try-except blocks, defining and raising custom exceptions, using additional clauses in the try-except block, and various tips for effective error handling.

Introduction

This article is part of a series called "Bit by Bit", a series devoted to all things programming. Whether you're still a computer science undergrad or the CTO of Apple, there's something for you here.

New articles in this series are posted every Tuesday!

Amazon Free Trial

Free 30-day trial for Amazon Prime: https://amzn.to/46do6NE

For college students; Free 6-month trial for Amazon Prime Student: https://amzn.to/3Q6ocBg

I. What is error handling?

Error handling is a systematic approach in programming that includes the anticipation, identification, and resolution of potential errors that may occur during the execution of a program.

On the most basic level, to effectively manage errors, programmers use methods such as including the use of error-handler blocks of code and the raising of exceptions in a program's code. This methodology not only prevents the program from crashing but also allows programmers to give some type of useful response in the form of an error message to the user.

II. Overview of exceptions in Python

In Python, error handling involves utilizing try-except blocks to capture one or more exceptions or errors within a specific code segment in a program.

To catch an exception, you as the programmer have to specify which exception(s) to catch.

If you've already spent some time programming, you might've noticed that Python has a long list of predefined errors, including SyntaxError, NameError, TypeError, KeyError, AttributeError, and many more.

But what are these errors and where do they even come from?

As it turns out, just like everything else in Python, these predefined errors are just objects/classes.

With this in mind, let's take a quick analysis of what makes up these predefined exceptions in Python.

First, if you use Python's dir method, you can see all of the methods and parameters that are defined for SyntaxError.

All of these methods and parameters work together to be able to reliably tell a programmer when they have a syntax error in their code.

As you can see below, when Python detects a syntax error, it automatically prints a message to the programmer: "SyntaxError: invalid syntax".

b) Defining custom exceptions in Python

While it's amazing that the engineers behind Python are nice enough to include these predefined exceptions in Python's native software, what if there's a very specific error that could be encountered in your program and Python's long list of predefined exceptions don't automatically detect this particular error?

Well lucky for you, you can define your very own exceptions tailored to your program :D

Before you start coding away on defining an exception class, let's see if maybe all of these predefined exceptions in Python come from somewhere else (in other words, if they have a "superclass").

Sure enough, all of the predefined exceptions in Python inherit a base class structure from another class.

If you notice, KeyError's direct superclass is LookupError (which is just another type of exception), and LookupError's direct superclass is Exception. I included this example on purpose to show you that all of the predefined exceptions in Python ultimately inherit their base class structure from the Exception object/class.

With this in mind, we can use the same idea to quickly and conveniently define our own exceptions by inheriting the base structure from Python's Exception class and then adding in whatever custom functionality or attributes we want our specific exception to have.

# Define custom exception's class and inherit
# attributes and methods from Exception class

class CustomError(Exception):
    # The pass keyword is just here as a placeholder
    pass

With the above code, keep in mind that the only "necessary" components are that you use the class keyword to define your exception as a class and that you inherit the Exception class by putting it in the parentheses after the class name (which can be named whatever you want, but it's best practice to follow the same syntactical style of Python's predefined exceptions by naming it a capitalized word followed by "Error").

And just to reiterate one of the comments I wrote in the code block, the pass keyword does nothing and is just there so that you don't get an error for leaving the class body empty.

III. Overview of error handling

Now that we've covered what exceptions are, we can start learning how to work with exceptions in Python (aka, error handling).

The root of error handling in Python is using try-except blocks to "catch" exceptions.

The main idea is that by coding in unique error handling, we're either telling Python "I already know that this might give an error, and I want to handle the error in this way..." or we're telling Python "I want you to catch this potential, custom error from users, and I want to handle the error in this way...".

a) The try-except block

The two necessary keywords in a try-except block are, unsurprisingly, try and except.

All of the code in the try section is technically run in Python but is not officially executed unless the code in the try section returns no error(s).

All of the code in the except section is only executed if the code in the try section returns an error.

You might be wondering why it's even worthwhile to catch Python's predefined exceptions. I mean, after all, it does seem redundant to catch an error that is already being caught by Python.

But in cases of catching Python's predefined exceptions, the usefulness lies in being able to customize the way the error is handled in the context of your program/software.

To illustrate this point, imagine you have a website that receives user requests for information about movies and all of the movie information is stored in your database on a server.

Let's say that this movie info is returned as JSON and is then converted to a dictionary in Python. In that case, if a user requests information about a movie that isn't listed in your database/dictionary, Python would return a KeyError (an error that's raised when you try returning a key's value for a key that doesn't exist).

Not only is this not really what's happening (the "real" error is that the movie isn't included in the database), but also this causes the program to crash.

This is a perfect example of a case where you should catch a predefined Python exception so that your program runs smoothly.

# Dictionary of movie information
movies = {
        "Annihilation": {
            "year": 2018,
            "director": "Alex Garland"
        },
        "Ready Player One": {
            "year": 2018,
            "director": "Steven Spielberg"
        },
        "Interstellar": {
            "year": 2014,
            "director": "Christopher Nolan"
        } 
    }

try:

    # This line won't return an error
    interstellar_info = movies["Interstellar"]

    # This will return a KeyError since "Wall-E" isn't a key
    # in our dictionary
    wall_e_info = movies["Wall-E"]

except KeyError:

    print("The movie you requested info for isn't listed in our database :(")

When you execute the code above, you completely bypass Python's built-in KeyError handling/message, and instead, our custom message is what's returned. Most importantly, we're preventing the program from crashing.

b) Catching custom exceptions

Catching custom exceptions is the same process as catching predefined exceptions.

The only difference is that we have to first define our custom exception, as we had done earlier.

Additionally, we have to specify when our custom error is supposed to be raised.

I should note that generally, you probably won't need to define custom exceptions unless you're building some intricate software application. The reason for this is that for most general purposes, the if-else conditional statements do a good enough job of pivoting the output of a program for different use cases.

Although, I think it's still helpful to at least be exposed to the idea of being able to create/handle your own exceptions.

# Define the custom exception
class CustomError(Exception):

    pass


try:
    # Raise the custom exception
    raise CustomError

# Handle the custom exception
except CustomError:

    print("Custom error message")

One important thing I want to note about the code example above is that it's not necessary to place the raise keyword within the try-except block. You can raise your custom exception at any point in the program you feel is necessary.

The only reason I included it in the try-except block is to show a simple example of raising a custom exception.

c) Catching multiple exceptions

In Python, you can handle multiple exceptions within one try-except block.

You simply do this by defining a tuple of which exceptions to handle.

try:

    raise SyntaxError

except (KeyError, SyntaxError):

    print("Custom error message")

If you're trying to error-handle one particular part of your program that might cause more than one type of error, then this will come in handy.

d) The else clause

Try-except blocks have a couple of clauses that can be added but are not always necessary.

One of those clauses is the else clause. The else clause is only executed if there were no errors raised in the try section.

For example, if a user is trying to log in with two-factor authentication, then you'd first want to make sure that their credentials are correct when they attempt to log in before sending a code to their email/text.

class UserError(Exception):

    pass

my_account = {
    "email": "email@email.com",
    "password": 12345
}

not_my_account = {
    "email": "mail@mail.com",
    "password": 123
}

def log_me_in(user):

    if user != my_account:

        raise UserError

try:

    # This will raise UserError
    log_me_in(not_my_account)

except UserError:

    print("Looks like you're not me!")

else:

    print("Welcome back! Enter the code we sent you")

When you execute the code above, the else clause won't execute, but the except clause will.

Let's change the code to instead attempt to log me in instead.

class UserError(Exception):

    pass

my_account = {
    "email": "email@email.com",
    "password": 12345
}

not_my_account = {
    "email": "mail@mail.com",
    "password": 123
}

def log_me_in(user):

    if user != my_account:

        raise UserError

try:

    # This won't raise UserError
    log_me_in(my_account)

except UserError:

    print("Looks like you're not me!")

else:

    print("Welcome back! Enter the code we sent you")

When we execute the code above, the UserError is not raised, so the else clause is then executed.

e) The finally clause

The other clause that we can add to a try-except block is finally.

The finally section executes regardless of whether an error was raised.

This might be useful in a case where the program has to release a file that was submitted by a user.

class UserError(Exception):

    pass

my_account = {
    "email": "email@email.com",
    "password": 12345
}

not_my_account = {
    "email": "mail@mail.com",
    "password": 123
}

def log_me_in(user):

    if user != my_account:

        raise UserError

try:
    # This will raise UserError
    log_me_in(not_my_account)

except UserError:
    # This will execute
    print("Looks like you're not me!")

else:
    # This won't execute
    print("Welcome back! Enter the code we sent you")

finally:
    # This will execute
    print("No matter who you are, have a wonderful day!")

In the above code, even though UserError was raised, the finally section is executed.

Just to show you that the finally clause will also execute when there isn't a UserError, let's try logging in my_account.

class UserError(Exception):

    pass

my_account = {
    "email": "email@email.com",
    "password": 12345
}

not_my_account = {
    "email": "mail@mail.com",
    "password": 123
}

def log_me_in(user):

    if user != my_account:

        raise UserError

try:

    log_me_in(my_account)

except UserError:

    print("Looks like you're not me!")

else:

    print("Welcome back! Enter the code we sent you")

finally:

    print("No matter who you are, have a wonderful day!")

After executing the code above, we see that the finally clause is still executed.

V. Best practices for error handling

Whenever you're implementing error handling into your code, there are certain things to pay attention to so that you truly reap the benefits of error handling.

a) Catching exceptions as specific as possible

First, you want to make sure that you're not taking advantage of the fact that you can catch multiple exceptions at once.

Catching mutliple exceptions isn't a tool meant to overcome laziness per se, it's a tool to be able to handle a specific part of your program that might cause more than one type of error.

Additionally, you want to make sure that you're tailoring an error response specific to your program and the nature of the error.

b) Graceful degradation

Finally, make sure that your program is always able to run smoothly.

I don't know anyone who enjoys the moment when an app crashes for apparently no reason.

One of the most noteworthy benefits of error handling is not only that you have control over what happens when an error occurs, but you also have the control to prevent the program from crashing!

If an error is raised and it's not properly handled, you risk damaging the functionality of the rest of the program and upsetting your users.

VI. Conclusion

I hope that you now have a better understanding of error handling in Python, and feel comfortable enough to start catching/handling errors and even defining/raising your own errors.

In this article, we went over the basic concept behind error handling, how to implement error handling in Python, how to define and raise custom exceptions, how to use additional clauses in the try-except block, and discussed some of the best practices when error handling.

Down below, I've linked some additional resources if you're interested in learning more about error handling in Python.

If you have any lingering questions or suggestions for a topic you want me to cover in the future, then please make sure to leave a comment down below.

Lastly, make sure to follow my newsletter to never miss out on when I post new content!

VII. Additional resources

a) Amazon Prime Free Trial

Free 30-day trial for Amazon Prime: https://amzn.to/3PLmWBT

For college students; Free 6-month trial for Amazon Prime Student: https://amzn.to/45j4tT9

b) Videos

Exception Handling Tips in Python

If you want to dive deeper into the concepts and techniques behind error handling, then I recommend checking out this video. Even if you're still a beginner, it might be beneficial to at least hear about some more advanced concepts so that you can start to think more creatively.

c) Articles

• Errors and Exceptions

  • This is an all-inclusive tutorial straight from the official Python docs

• Python's raise: Effectively Raising Exceptions in Your Code

  • I really like the way this author talks about when/how to use custom exceptions

In this article, you will learn about the binary and hexadecimal number systems, their importance in computer science, and how to convert between decimal, binary, and hexadecimal representations. You will also explore signed and unsigned integers, their conversion between different number systems, and their applications in computing. Additionally, this article includes helpful resources for further understanding these concepts and their practical use in computer science.

Introduction

This article is part of a series called "Log Base Two", a series dedicated to the relationship between math and computer science.

Just to give a bit of background on my experience in math, I've excelled in a total of 10 college courses in math:

1. Single-variable differential calculus

2. Single-variable integral calculus

3. Multi-variable differential and integral calculus

4. Multi-variable differential and integral calculus of vector-valued functions

5. Linear Algebra

6. Differential equations

7. Probability and statistics

8. Data analysis using R programming language

9. Multivariate statistics

10. Discrete math

For a large majority of those 10 classes, I ended up with A's.

Although, before college, I struggled a lot with math in the classroom, even though math had always been my favorite subject since I was in elementary school. I found it hard to truly grasp the concepts taught because my high school teachers were too focused on skill assessment. Instead of focusing on the actual concept being taught, I was too worried about how I was going to pass the test the following week.

Once I got to college, I realized that your math grade (or any grade for that matter) truly doesn't define your potential. Further, I'd argue that your success in math education is heavily influenced by the quality of the teacher/professor's teaching.

My mission with this series is to show other people that math isn't so scary if you break down mathematical concepts into digestible bouts of information and investigate use cases of math in your primary field of interest (in this case, computer science). Along the way, I hope to also supplement your math education with quality content. I believe that everyone is capable of learning and truly loving mathematics.

New articles in this series are posted every Thursday!

Amazon Prime Free Trial

Free 30-day trial for Amazon Prime: https://amzn.to/458RWS5

For college students; Free 6-month trial for Amazon Prime Student: https://amzn.to/3RGaKVD

I. What is binary and hexadecimal?

Our standard number system is the decimal system. The decimal system is base-10, meaning that every number in the decimal system is made from 10 possible digits (0, 1, 2, 3, 4, 5, 6, 7, 8, 9).

The binary system and hexadecimal system are simply different number systems for counting and representing numbers.

Instead of base-10, the binary system is base-2, meaning that every number in the binary system is made from 2 possible digits (0, 1).

On the other hand, the hexadecimal system is base-16, meaning that every number in the hexadecimal system is made from 16 possible digits (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F).

a) Importance of binary and hex in computer science

At the hardware level, computers use the binary system to represent data. Every single piece of data on a computer is encoded in binary including numbers, strings of text, images, and much more.

The reasoning behind the binary system being used to represent data in the CPU and RAM is to have a logical method of encoding information based on electrical signals.

The flow of electricity in a circuit has two possible states: flowing or not flowing. Think about a simple circuit for a light bulb; electricity is either flowing to the light bulb or it's not, thus the light is either on or it's off.

As you'll see in a bit, binary representations of data can become very lengthy due to the limited digit nature of binary. To compensate for this, the hexadecimal system is used to encode binary to make it easier for humans to work with large binary values.

II. Binary system

One of the most important facts to consider in binary is that you start counting from 0.

The funny thing is that technically, the decimal system works the same way. Although, it's just not intuitive for humans to start counting from 0.

This is simply proven by the fact that the number 10 itself is represented with 2 distinct digits. The only way to count all the digits in the decimal system is to start at 0 and end at 9.

a) Base-2 numeral system

One of the fundamental questions you might be asking is how you're supposed to count in binary.

And this question is completely valid. Since we have 10 fingers, it's subjectively very intuitive to count in the decimal system.

If you see a pile of 3 apples and start counting the apples by hand, you'd probably start with your index finger, then your middle finger, followed by your ring finger.

But what if you try counting a pile of 11 apples by hand? Luckily, we have a computer in our head that has memory, so we could simply count all our 10 fingers, then remember that we've already counted one full set of digits, and then just start counting again with a "fresh" set of digits.

More precisely, we start repeating digits. So we keep that "1" digit from the 10, and then use another "1" digit to represent 11 apples.

In binary, this is the same exact process that's used to count numbers.

Let's repeat the process of counting the pile of 3 apples with the binary system. Use only your index and middle finger to count, with your index finger representing the 0 digit and the middle finger representing the 1 digit.

Because we start counting at 0, we count the first apple as 0 with our index finger.

Next, we count the second apple by holding up both our index and middle finger (01).

Now that we've run out of digits, we place that 1 at the front and start repeating digits by retreating our index and middle fingers.

Finally, we count the third apple by holding up our index finger (the 0 digit), and our binary digit representation of our pile of 3 apples is 10 (no, not 10 as in "ten", but 10 as in "one zero".

If you do a quick search on Google to convert 10 in binary to the decimal system, you'll see that it equals 2.

Before you raise your pitchforks, remember what I said about how we start counting from 0 in binary, but traditionally start counting from 1 in the decimal system.

The main point to remember is that when we counted those 3 apples in binary, we counted through 3 numbers: 0, 01, 10.

b) Binary digits

Another word for binary digits is bits.

In computing, a bit is considered the smallest quantity of information that can be processed or stored on a computer.

And yes, these are the same bits that are measured/converted in the metric system for quantifying data storage/memory.

As you may already intuitively know from maybe the storage capacity on your phone or laptop, we don't directly measure in bits, but in bytes.

8 bits = 1 byte.

1 gigabyte = 1,000,000,000 bytes = 8,000,000,000 bits.

1 terabyte =1,000 gigabytes = 1,000,000,000,000 bytes = 8,000,000,000,000 bits!

c) Converting from decimal integers to binary digits

The algorithm to convert from decimal to binary is actually very simple.

The algorithm is to recursively divide the number in decimal by 2 and store (or write down if doing it by hand) the remainder after dividing, and then divide the whole number quotient by 2. This recursion stops once the quotient is 0.

After you finish dividing, string together all of the remainders starting with the last remainder (this is called the most significant bit, or MSB) and ending with the first remainder (this is called the least significant bit, or LSB).

Let's convert 24 in decimal to binary.

Since we reached a quotient of 0, we can now write out 24 in decimal to binary as 11000.

d) Bytes and padding

Typically, bit representations are grouped into 8-bit groupings (1 byte).

This means that even if a number is less than 8 bits numerically, we still use 8 bits to represent the number.

This is accomplished with something called padding. Padding is the simple process of filling up a bit grouping with leading 0s until the grouping is 8-bit.

For our last example where we converted 24 to binary (11000), we only need 5 bits to represent 24 in binary.

To represent 24 in binary as a byte, we'd thus add 3 0s to the front of 11000.

As a result, we get 0001 1000. As a side note, it's not necessary to put a space in between 4 bits, but it does make it much easier to read in binary. Additionally, once we get to convert from binary to hex, you'll see why 4-bit groupings are advantageous.

e) Signed integers

If our decimal number is negative, then the algorithm to convert to binary is slightly different.

Since the binary system doesn't inherently have positive and negative values, negative integers in the decimal system have to be encoded using a different algorithm so that negative decimal numbers have a unique binary representation, and thus have a unique path to be stored on a computer.

To convert a negative number in decimal to binary, you first convert the positive (unsigned) of that number to binary (in an 8-bit grouping representation). Once you have the unsigned (positive) binary number, you invert all of the bits (flip all of the 0s to 1s and vice-versa), then add 1 to the inverted, unsigned binary number. After you add 1, you now have the signed (negative) binary number.

Let's convert -24 in decimal to binary.

Since we already converted 24 to binary in the last example, we know that 24 is represented as 0001 1000 in binary.

Our next step is to invert 0001 1000. After inverting, we get 1110 0111.

Finally, we add 1 to the inverted binary number.

$$\begin{array}{c} & 1110 & 0111 \\ + & 0000 & 0001 \\ \hline & 1110 & 1000 \\ \end{array}$$

As a result, the binary representation for -24 is 1110 1000.

As a side note, if you're confused about adding numbers in binary, remember back to earlier when you counted those 3 apples in binary. When you counted the second apple and represented the second apple as 01, you then counted the third apple by adding 1 to 01 by moving that "1" digit to the left.

Essentially, in binary:

• 0 + 0 = 0

• 0 + 1 = 1

• 1 + 0 = 1

• 1 + 1 = 10

So when I added those two numbers in the last example, I started with adding 1 + 1 to get 10, which means I put a 0 and "carried" over the 1 to the next column (1 + 0). Since 1 + 1 + 0 = 10, I again put 0 and "carried" over the 1.

f) Converting from binary digits to decimal integers

Now that you know how to convert from decimal to binary, let's try the reverse.

To convert from unsigned binary numbers to decimal is pretty straightforward.

Each binary digit represents a decimal value, starting from 0 with the LSM and sequentially increasing by 1. To find the decimal value for that binary digit, you compute the result of that binary digit multiplied by 2 raised to the power of that digit's index in the sequence of bits.

Sounds very complicated in writing, but is very simple in math.

Let's try converting 0001 1000 to decimal.

As a result, we see that 0001 1000 is the binary representation of 24 (which is consistent with when we converted 24 to binary).

As you might've guessed, converting signed negative integers in binary to decimal is a little different.

To start, you first invert the signed integer (flip the 0s to 1s and vice versa). Next, you add 1 to get the unsigned representation. Then, you convert the unsigned representation using the same algorithm in the last example. Finally, you make the resulting decimal integer negative.

Let's try it on 1110 1000.

First, we invert 1110 1000 to 0001 0111.

Next, we add 1.

$$\begin{array}{c} & 0001 & 0111 \\ + & 0000 & 0001 \\ \hline & 0001 & 1000 \\ \end{array}$$

Then, we convert the unsigned representation to decimal using the method from the last example.

If you notice, 0001 1000 is the same binary representation that we converted in the last example, and got 24.

Our last step is to then make 24 negative and get -24.

III. Hexadecimal system

Since binary data can be hard to read by humans, we invented the hexadecimal system to encode binary.

The hexadecimal system has 16 digits, and each digit represents a power of 16.

The first 10 digits of the hexadecimal system are identical to the standard decimal system (0-9). The other 6 digits are the first 6 letters in the alphabet (A-F).

Since 1 hex digit represents 4 bits, we make sure to write hex representations in pairs of 2 to get 8-bit (byte) groupings of hex digits.

The process for doing so is the same as binary. We use padding by adding a leading 0 to the sequence of hex digits if the hex representation is an odd number of hex digits.

a) Converting from decimal integers to hex

The process of converting from decimal to unsigned hex is the same algorithm used to convert from decimal to binary, except instead of recursively dividing by 2, we divide by 16.

Let's try converting 1,932,345 to hex.

Our string of remainders is 1 13 7 12 3 9.

The next step is to convert any decimal remainder > 9 to its hex digit.

As a result, our unsigned hex representation is 1D7C39.

To represent a negative decimal integer in signed hexadecimal, the process is slightly different.

First, find the hex representation of the positive integer.

Next, subtract each digit from F.

Finally, add 1.

Let's try converting -1,932,345 to hex.

From the previous example, we know the unsigned hex representation of 1,932,345 is 1D7C39.

Our next step is to subtract F from each digit.

$$\begin{array}{c} & \text{F} \text{F} \text{F} \text{F} \text{F} \text{F} \\ - & 1 \text{D} 7 \text{C} 3 9 \\ \hline & \text{E} 2 8 3 \text{C} 6 \\ \end{array}$$

Finally, add 1.

$$\begin{array}{c} & \text{E} 2 8 3 \text{C} 6 \\ + & 0 0 0 0 0 1 \\ \hline & \text{E} 2 8 3 \text{C} 7 \\ \end{array}$$

Therefore, the signed hex representation of -1,932,345 is E283C7.

b) Converting from hex to decimal integers

The process of converting from unsigned hex to decimal is also the same process of converting unsigned binary to decimal, except instead of raising 2 to the power of the digit's index, we raise 16 to the power of the digit's index.

Let's try converting 1D7C39 to decimal.

We end up getting that 1D7C39 is the hex representation for 1,932,345 (which is consistent with the example where we converted 1,932,345 to hex).

If you want to convert a signed hex value to decimal, you start by subtracting each digit from F.

Next, you add 1 to the result to get the unsigned representation.

Then, you convert the unsigned representation to decimal using the same algorithm used in the last example.

Finally, make the decimal value negative.

Let's try converting the signed hex representation of E283C7 to decimal.

First, we'll subtract each digit from F.

$$\begin{array}{c} & \text{F} \text{F} \text{F} \text{F} \text{F} \text{F} \\ - & \text{E} 2 8 3 \text{C} 7 \\ \hline & 1 \text{D} 7 \text{C} 3 8 \\ \end{array}$$

Next, we'll add 1 to get the unsigned hex representation.

$$\begin{array}{c} & 1 \text{D} 7 \text{C} 3 8 \\ + & 0 0 0 0 0 1 \\ \hline & 1 \text{D} 7 \text{C} 3 9 \\ \end{array}$$

We already converted 1D7C39 to decimal in the last example to 1,932,345.

Therefore, we find that the signed hex representation of E283C7 is -1,932,345 in decimal.

c) Converting from binary to hex

Converting from binary to hex is incredibly simple.

Let's do a bit of some combinatorics to find out how many unique combinations of 4-bit groupings there are.

First, for each digit in a 4-bit grouping, we have 2 choices (0 or 1).

$$\binom{2}{1} = \frac {2!} {1!(2-1)!} = \frac {2} {1} = 2$$

Second, to find the total amount of 4-bit combinations we can make, we take 2 raised to the power of 4 (since we have 4 digits in a group).

$$2^4 = 16$$

Therefore, we can make 16 possible 4-bit combinations.

Wait a minute, hexadecimal is base-16! :O

That's right, hexadecimal's design was no mistake; the inventors of hexadecimal not only wanted to simplify data representation for humans but also to conveniently be able to encode every single 4-bit grouping into a unique hex digit.

Here's a table showing every possible 4-bit combination encoded into a single, unique hex digit.

Let's try converting 1010 1110 0010 1111 0001 1000 to hexadecimal.

Using the table above, we find that the hexadecimal representation is AE2F18.

Simple, right?

d) Converting from hex to binary

Converting from hex to binary is the same process as converting binary to hex.

Except, instead of using the table to match a 4-bit grouping to a hex digit, you match a hex digit with a 4-bit grouping ;)

IV. Conclusion

In this article, you've learned about 2 different number systems (binary and hexadecimal) and how/why they're used in computing. Additionally, you've learned how to convert between decimal <--> binary, hexadecimal <--> binary, and decimal <--> hexadecimal.

I remember when I was brand new to the world of computer science, I was very confused about why the binary system was used, and why it was necessary to use hexadecimal. So I hope that I've explained binary and hex well enough to anyone new to computer science so that you don't have to be confused like I was at first.

I've also linked to some great resources below that I recommend checking out if you want to learn more about binary and hex.

If you have any lingering questions or suggestions for a topic you want me to cover in the future, then please make sure to leave a comment down below.

Lastly, make sure to follow my newsletter to never miss out on when I post new content!

V. Additional resources

a) Amazon Prime Free Trial

Free 30-day trial for Amazon Prime: https://amzn.to/45a0ick

For college students; Free 6-month trial for Amazon Prime Student: https://amzn.to/456TDQ9

b) Videos

c) Articles

• What is binary and how is it used in computing?

• Binary Addition

• The Hexadecimal Number System Explained

This article covers the basics of various data types in Python, including booleans, integers, floats, complex numbers, strings, lists, tuples, sets, and dictionaries. It provides an overview of each data type, along with examples of basic operations and functions that can be applied to them.

Introduction

This article is part of a series called "Bit by Bit", a series devoted to all things programming. Whether you're still a computer science undergrad or the CTO of Apple, there's something for you here.

New articles in this series are posted every Tuesday!

I. Boolean data types

Boolean data types serve as the fundamental building blocks of logic in programming.

Boolean data types play a critical role in many aspects of programming, including conditional statements, loops, and comparisons. They allow programmers to develop complex algorithms and control the flow of execution in their code, ultimately enabling the creation of sophisticated software applications that can adapt to various situations and user inputs.

a) True and false values

Even when you're not directly declaring and storing variables with a boolean value, there's a good chance that you're using boolean values in the background of your programming.

With that being said, there are times when it's useful to declare and store variables with boolean values.

One small, but important, thing to note is that when using the True and False values in Python, make sure to capitalize the first letter of the words True and False.

# Declare boolean variables
a = True
b = False

#basic operations

#and operation
#returns True if BOTH values are True
and_value = a & b
#print(and_value) --> False

#or operation
#returns True if at least one of the values is True
or_value = a | b
#print(or_value) --> True

#is operation
#returns True if values are equal
is_value = a == b
#print(is_value) --> False

#is not operation
#returns True if values are not equal
is_not_value = a != b
#print(is_not_value) --> True

II. Numeric data types

Numeric data types are among the most basic types of data. They are essential for performing calculations, designing algorithms, and developing intricate programs.

a) Integers

As you may recall from grade-school math, integers are a subset of the set of rational numbers where each integer is a number that can't be expressed as a ratio of two numbers except for itself and 1.

Integers can be positive or negative values, or zero, and are written without decimal points.

The main operations that are performed on integers in Python are arithmetic and comparison.

# Creating integers
x = 5
y = -3

#arithmetic operations
#addition
total = x + y
#print(total) --> 2

#subtraction
difference = x - y
#print(difference) --> 8

#multiplication
product = x * y
#print(product) --> -15

#division
quotient = x / y
#print(quotient) --> -1.6666666666666667

#modular division
remainder = x % y
#print(remainder) --> -1

#floor division
rounded_down_quotient = x // y
#print(rounded_down_quotient) --> -2

#exponentiation
result = x ** y
#print(result) --> 0.008

#comparison operations
#greater than
greater_than = x > y
#print(greater_than) --> True

#less than
less_than = x < y
#print(less_than) --> False

#equal to
equal_to = x == y
#print(equal_to) --> False

#not equal to
not_equal_to = x != y
#print(not_equal_to) --> True

#greater than or equal to
greater_or_equal = x >= y
#print(greater_or_equal) --> True

#less than or equal to
less_or_equal = x <= y
#print(less_or_equal) --> False

b) Floats

Floats, or floating-point integers, are any numbers written with a decimal point.

Technically speaking, a number that's formally defined as an integer in math can be stored as a floating-point integer.

For example, 6.00 is an integer in math, but since it has a decimal point it's stored as a floating-point integer in Python.

Floating-point integers and integers can have their values compared in Python. For example, when you use a comparison operator to check if 6.00 is equal to 6, Python returns True.

However, if you use a comparison operator to check if the data type of 6.00 is the same as the data type of 6, Python returns false.

Similar to integer data types, the main operations performed on floats are arithmetic and comparison.

As you might expect, you can apply all of those same operations in the integers code example I made with floating point values in Python.

c) Complex numbers and imaginary numbers

For anyone in the field of quantum mechanics or electrical engineering, you're in luck ;)

In case you're unaware or need a quick refresher, complex numbers are 2-dimensional numbers where the first component is a real number and the second component is an imaginary number.

On the most basic level, imaginary numbers are expressed as a real number multiplied by the imaginary unit, i.

$$i = \sqrt{-1}$$

$$ i^2 = -1$$

Complex numbers are typically expressed as a linear combination of a real number and an imaginary number.

$$z = 3 + 2i$$

If you have any computational tasks that involve complex numbers, Python fortunately has a built-in module called "cmath" to be able to work with complex numbers.

import cmath

# Creating complex numbers
complex_num1 = 3 + 4j
complex_num2 = 2 + 3j

#arithmetic operations
#addition
total = complex_num1 + complex_num2
#print(total) --> (5+7j)

#subtraction
difference = complex_num1 - complex_num2
#print(difference) --> (1+1j)

#multiplication
product = complex_num1 * complex_num2
#print(product) --> (-6+17j)

#division
quotient = complex_num1 / complex_num2
#print(quotient) --> (1.3846153846153848-0.07692307692307697j)

#complex conjugate
conjugate = complex_num1.conjugate()
#print(conjugate) --> (3-4j)

#magnitude
magnitude = abs(complex_num1)
#print(magnitude) --> 5.0

III. String data types

String data types are another very basic type of data in Python. These data types are utilized to store and manipulate sequences of characters, such as letters, numbers, symbols, and whitespace. Strings play a crucial role in various programming tasks, including data manipulation, user input processing, and output formatting.

a) Strings

Strings are data objects that can store any of the characters on a keyboard.

When you declare and store a string in Python, you can use either single or double quotes to encapsulate the characters that are part of your string.

There are a large number of operations and functions that can be applied to strings in Python.

When working with strings there are some important things to know/remember:

• Capitalization matters. Each letter has a separate memory allocation for the uppercase and lowercase versions of the letter

x = 'H'
y = 'h'
are_they_equal = x == y
#print(are_they_equal) --> False

• You can access an individual character in a string by referencing the character's index in the string

• The index of the first letter in a string is 0.

x = 'Cat'
first_letter = x[0]
#print(first_letter) --> 'C'

Here are some of the most basic string operations and functions that you can use in Python.

# Creating strings
string1 = "Hello" #double quotes
string2 = 'World' #single quotes

#concatenation
concatenated_string = string1 + string2
#print(concatenated_string) --> 'HelloWorld'

#length of a string
length = len(string1)
#print(length) --> 5

#accessing characters in a string
first_char = string1[0]
#print(first_char) --> 'H'

#slicing a string
substring = string1[1:4] #from 1st index up until 4th index of string
#print(substring) --> 'ell'

#repeating a string
repeated_string = string1 * 3
#print(repeated_string) --> 'HelloHelloHello'

#converting to uppercase
uppercase_string = string1.upper()
#print(uppercase_string) --> 'HELLO'

# Converting to lowercase
lowercase_string = string1.lower()
#print(lowercase_string) --> 'hello'

IV. Ordered sequence data types

Free Notes 3D Illustration by iqonic.design on IconScout.

Sequence data types are objects that can be used to store sequences of numbers, strings, and other data types.

In sequence data types, each data object within the sequence is separated by a comma, and each sequence data type is declared using different symbols.

a) Lists

Lists are objects that can store and manipulate data. Since we can change/mutate the data inside of a list, we say that lists are mutable data types.

Some important things to know/remember about lists:

• Similar to strings, the index of the first element in a list is 0.

• Lists are declared using square braces [].

• Lists can store lists (these are called sublists).

• You can iterate through lists either from the first index (starting at 0 and iterating by 1) or from the last index (starting at -1 and iterating by -1).

# Creating a list
my_list = [1, 2, 3, 4, 5, [6, 7, 8]]

#accessing elements by ascending order
first_element = my_list[0]
#print(first_element) --> 1

#accessing elements by descending order
last_element = my_list[-1]
#print(last_element) --> [6, 7, 8]

#accessing elements within sublists
last_element_in_sublist = my_list[-1][2]
#print(last_element_in_sublist) --> 8

#modifying elements by index
my_list[1] = 7
#print(my_list) --> [1, 7, 3, 4, 5, [6, 7, 8]]

#adding elements to end of list
my_list.append(6) 
#print(my_list) --> [1, 7, 3, 4, 5, [6, 7, 8], 6]

#adding elements to specific index of list
my_list.insert(2, 8) #inserts the integer 8 at index 2
#print(my_list) --> [1, 7, 8, 3, 4, 5, [6, 7, 8], 6]

#removing elements by value
my_list.remove(8) #removes the integer 8
#print(my_list) --> [1, 7, 3, 4, 5, [6, 7, 8], 6]

#removing elements by index
del my_list[0] #removes element at index 0
#print(my_list) --> [7, 3, 4, 5, [6, 7, 8], 6]

#removing last element in a list
#this method also returns the last element
last_element_removed = my_list.pop()
#print(last_element_removed) --> 6
#print(my_list) --> [7, 3, 4, 5, [6, 7, 8]]

#slicing a list
sub_list = my_list[1:4]
#print(sub_list) --> [3, 4, 5]

#list length
list_length = len(my_list)
#print(list_length) --> 5

#arrange list from least to greatest
#since there's a sublist stored in our list, this will return an error
#so let's first remove the sublist
my_list.pop()
my_list.sort()
#print(my_list) --> [3, 4, 5, 7]

#arrange list from greatest to least
my_list.sort(reverse=True)
#print(my_list) --> [7, 5, 4, 3]

#reverse order of elements
my_list.reverse()
#print(my_list) --> [3, 4, 5, 7]

#return number of occurences of element in list
count_of_7 = my_list.count(7)
#print(count_of_7) --> 1

#return index of FIRST occurence of element
index_of_7 = my_list.index(7)
#print(index_of_7) --> 3

#delete all the elements inside a list
my_list.clear()
#print(my_list) --> []

#concatenating two lists
list1 = [1, 2, 3]
list2 = [4, 5, 6]
concatenated_list = list1 + list2
#print(concatenated_list) --> [1, 2, 3, 4, 5, 6]

#repeating a list
repeated_list = list1 * 3
#print(repeated_list) --> [1, 2, 3, 1, 2, 3, 1, 2, 3]

b) Tuples

The biggest difference between tuples and lists is that tuples are immutable.

This means that after a tuple is made, there's not anything we can do to modify/mutate the data inside a tuple like we can with lists.

While this might seem like a large disadvantage at first, tuples serve a unique purpose of storing data that is not meant to ever change.

For example, if you wanted to store the RGB value for pure red, you should use a tuple since the RGB value for pure red is a value that remains constant.

Other than the fact that tuples are immutable and are declared using parentheses instead of square braces, tuples and lists are pretty similar.

# Creating a tuple
my_tuple = (1, 2, 3, 4, 5)

#accessing elements in a tuple
first_element = my_tuple[0]
#print(first_element) --> 1

#tuple slicing
sub_tuple = my_tuple[1:4]
#print(sub_tuple) --> (2, 3, 4)

#length of a tuple
length = len(my_tuple)
#print(length) --> 5

#counting occurrences of an element in a tuple
count_of_3 = my_tuple.count(3)
#print(count_of_3) --> 1

#return index of FIRST occurence of element
index_of_4 = my_tuple.index(4)
#print(index_of_4) --> 3

#concatenating two tuples
tuple1 = (1, 2, 3)
tuple2 = (4, 5, 6)
concatenated_tuple = tuple1 + tuple2
#print(concatenated_tuple) --> (1, 2, 3, 4, 5, 6)

#repeating a tuple
repeated_tuple = tuple1 * 3
#print(repeated_tuple) --> (1, 2, 3, 1, 2, 3, 1, 2, 3)

V. Unordered sequence data types

Unordered sequences are sequences of data objects that have no specified index.

The key reason for this is that unordered sequence data types don't allocate any memory to the order in which elements are added to the sequence. This makes unordered sequence data types much faster to work with in terms of computing power.

a) Sets

Similar to lists, sets are mutable, so you can modify/mutate the elements inside sets.

Although, unlike both lists and tuples, sets don't have repeat values.

While you won't get an error for trying to declare a set with repeat values, Python will simply ignore the repeat values you entered when storing the set in memory.

# Creating sets
set1 = {1, 2, 3, 4}
set2 = {3, 4, 5, 6}

#adding unique element to a set
set1.add(5)
#print(set1) --> {1, 2, 3, 4, 5}

#adding repeat element to a set
set1.add(2)
#print(set1) --> {1, 2, 3, 4, 5}

#removing an element from a set
set1.remove(1)
#print(set1) --> {2, 3, 4, 5}

#union of sets
#union is all the elements from two sets (without repeating elements)
union_set = set1.union(set2)
#print(union_set) --> {2, 3, 4, 5, 6}

#intersection of sets
#intersection is all the shared elements from two sets
intersection_set = set1.intersection(set2)
#print(intersection_set) --> {3, 4, 5}

#difference of sets
#difference is all the elements in the first set but not in the second set
difference_set = set1.difference(set2)
#print(difference_set) --> {2}

#checking if a set is a subset of another set
#set is a subset of another set if ALL of its elements are contained in the other set
#for example, the set of integers is a subset of the set of rational numers
is_subset = set1.issubset(set2)
#print(is_subset) --> False

#checking if a set is a superset of another set
#set is a superset of another set if ALL of the elements from the other set are contained in the first set
#for example, the set of real numbers is a superset of the set of the irrational numbers
is_superset = set1.issuperset(set2)
#print(is_superset) --> False

#checking if two sets are disjoint (no common elements)
are_disjoint = set1.isdisjoint(set2)
#print(are_disjoint) --> False

VI. Mapping data types

Free Key Folder 3d Icon by Rizki Ahmad Fauzi

The last basic data type to go over in Python is the mapping data type.

Mapping data types map/connect one data object with another data object stored as a pair of data.

Similar to sequences of data, mapping data types can store comma-separated collections of data. However, unlike the sequence data types, the collection of data in mapping data types is pairs of data objects.

a) Dictionaries

Similar to lists and tuples, dictionaries are ordered collections of data. However, this is only the case as of Python 3.7. For Python 3.6 and earlier, dictionaries are unordered.

Also, similar to lists and sets, dictionaries are mutable.

Finally, similar to sets, the first data object (simply referred to as keys) of a pair in a dictionary can't be repeated. However, the second data object (simply referred to as values) of a pair in a dictionary can be repeated.

Dictionary keys can either be numbers or strings, and dictionary values can be of any data type (dictionary values can even be dictionaries).

The most practical way to look at dictionaries is to see them as data objects for storing attributes of one or more things.

# Creating a dictionary
my_dog = {'breed': 'husky', 'color': 'grey', 'age': 2}

#accessing a value using a key
breed = my_dog['breed']
#print(breed) --> 'husky'

#adding a new key-value pair
my_dog['name'] = 'max'
#print(my_dog) --> {'breed': 'husky', 'color': 'grey', 'age': 2, 'name': 'max'}

#updating a value
my_dog['age'] = 3
#print(my_dog) --> {'breed': 'husky', 'color': 'grey', 'age': 3, 'name': 'max'}

#removing a key-value pair
del my_dog['color']
#print(my_dog) --> {'breed': 'husky', 'age': 3, 'name': 'max'}

#checking if a key is in the dictionary
name_exists = 'name' in my_dog
#print(name_exists) --> True

#getting all keys
keys = my_dog.keys()
#print(keys) --> dict_keys(['breed', 'age', 'name'])

#getting all values
values = my_dog.values()
#print(values) --> dict_values(['husky', 3, 'max'])

VII. Conclusion

I hope that after reading this article, you now feel comfortable with some of the basic operations and functions that can be applied to many of the built-in data types in Python.

You have learned the basics of booleans, integers, floats, complex numbers, strings, lists, tuples, sets, and dictionaries in Python, and got exposed to the syntactical rules and logic governing these data types in Python.

If you have any lingering questions that you'd like me to answer, please ask away in the comments below.

Additionally, if you have any suggestions for an article topic you'd like me to cover in the future, feel free to drop those in the comments below as well.

Finally, make sure to follow my newsletter so that you never miss out on when I post new content!

In this article, we explore the concept of optimization in machine learning models and the math behind gradient descent. We discuss the components of gradient descent, including cost functions, partial derivatives, gradients, and learning rates. By understanding these concepts, we can improve the accuracy of machine learning models.

Introduction

This article is part of a series called "Log Base Two", a series dedicated to the relationship between math and computer science.

Just to give a bit of background on my experience in math, I've excelled in a total of 10 college courses in math:

1. Single-variable differential calculus

2. Single-variable integral calculus

3. Multi-variable differential and integral calculus

4. Multi-variable differential and integral calculus of vector-valued functions

5. Linear Algebra

6. Differential equations

7. Probability and statistics

8. Data analysis using R programming language

9. Multivariate statistics

10. Discrete math

For a large majority of those 10 classes, I ended up with A's.

Although, before college, I struggled a lot with math in the classroom, even though math had always been my favorite subject since I was in elementary school. I found it hard to truly grasp the concepts taught because my high school teachers were too focused on skill assessment. Instead of focusing on the actual concept being taught, I was too worried about how I was going to pass the test the following week.

Once I got to college, I realized that your math grade (or any grade for that matter) truly doesn't define your potential. Further, I'd argue that your success in math education is heavily influenced by the quality of the teacher/professor's teaching.

My mission with this series is to show other people that math isn't so scary if you break down mathematical concepts into digestible bouts of information and investigate use cases of math in your primary field of interest (in this case, computer science). Along the way, I hope to also supplement your math education with quality content. I believe that everyone is capable of learning and truly loving mathematics.

New articles in this series are posted every Thursday!

Optimization

Imagine for a moment that you're in the process of trying to teach basic shapes to your child.

You might start by using a variety of strategies to have your child exposed to different shapes.

For example, you might use art activities, playtime, children's books, and children's TV shows to start.

Although, you start to notice that your child is most interested in shapes during playtime.

As a result, to optimize their shape learning, you start focusing more on playtime activities and techniques, and less on other strategies.

In machine learning models, computer scientists use this same concept to train neural networks and increase the accuracy of a machine learning model's output.

Optimization in machine learning

In machine learning models, the main goal is to increase the output accuracy of the model's results.

Each time we run data through a model, we go back and make adjustments to the neural network to optimize how the model learns.

One of the ways to optimize neural networks is with a technique called gradient descent.

Overview of gradient descent

Gradient descent is a technique from multi-variable calculus.

The main idea of gradient descent is to take some function with multiple independent variables and find where that function has its lowest output value. In calculus, this lowest value is called a local minimum.

The process of gradient descent starts with taking some random input, and then moving some distance in the direction of the negative gradient. We keep iterating this step until we reach the local minimum of the function.

It's as if someone plops you in the middle of a hilly terrain with a blindfold on and your goal is to go towards the lowest nearby point in the hilly terrain. You can accomplish this by iteratively taking steps toward the direction where it feels like you're moving downhill. Eventually, after enough steps, you'll reach the local minimum.

Components of gradient descent

The gradient descent algorithm has 5 main components to understand:

• The current value of the parameter

$$\theta_j$$

• The cost function

$$J(\theta)$$

• The size of each step (this is called the learning rate in machine learning)

$$\alpha$$

• The direction of steepest descent (the partial derivative of the cost function with respect to the parameter)

$$\frac{\partial J(\theta)}{\partial \theta}$$

• The next value of the parameter

$$\theta_{j+1}$$

Putting it all together in a mathematical equation:

$$\theta_{j+1} = \theta_j - \alpha \frac{\partial J(\theta)}{\partial \theta}$$

Cost function

A cost function is a function that calculates the "cost" of one or more variables/parameters.

The cost of a function is an intuitive function to calculate the difference between predicted values and actual values.

The cost function you use in a model depends on the type of problem you're trying to solve.

If you're trying to make a prediction, then you'll use a regression cost function. Alternatively, if you're trying to classify data, you'll use a binary or multi-class classification cost function.

An example of a regression cost function is the mean absolute error:

$$\text{MAE} = \frac{1}{n} \sum_{i=1}^{n} |y_i - \hat{y}_i|$$

The mean absolute error calculates the sum of the differences between predicted values and actual values and is then divided by the amount of data points in the dataset to find the average error value.

As stated before, the cost function you use in your gradient descent algorithm will vary based on the problem you're trying to solve and the nature of your dataset.

Gradients and partial derivatives

Derivatives

If you've taken single-variable calculus, you're probably familiar with derivatives of single-variable functions.

$$\frac{d}{dx}f(x)$$

If not, then just understand that the main idea of a derivative is to find the rate at which a variable is changing with respect to another variable.

For example, the speed of a car is the rate, or derivative, at which the car is moving with respect to time (e.g. miles per hour).

Partial derivatives

In functions with multiple independent variables, we take the partial derivative of the dependent variable with respect to an independent variable, while holding the other independent variables constant.

$$\frac{\partial}{\partial x}f(x,y)$$

For example, to find the rate at which the height of water in a glass changes, we'd take the partial derivative of the height of the glass with respect to the volume of the glass.

Gradients

To encapsulate all of the partial derivatives of a function, we take the gradient of a function.

$$\nabla f(x, y) = \pmatrix {\frac{\partial}{\partial x} f(x,y) \\ \frac{\partial}{\partial y} f(x,y) }$$

The gradient of a function is a vector field that represents the direction of the greatest change of a function. Each element in the gradient vector is a single partial derivative with respect to some independent variable.

If you're not sure what vectors are, then make sure to go read my article from last week: The Matrix Is Everywhere: Linear Algebra Concepts Relevant to Computer Science.

For example, to find the direction to walk to reach the top of a hill, we'd take the gradient of the height of the hill. The first element in this gradient would tell me how far to go north or south, and the second element would tell me how far to go east or west.

In gradient descent, we take the gradient of the cost function to find the direction of the greatest error in our predictions (and then intuitively go in the negative direction so we reach the point at which the error in our predictions is minimized).

Learning rate

The last gradient descent component to analyze is the learning rate.

In supervised machine learning models, you assign the learning rate of the model.

The learning rate ultimately controls how far the model goes in the direction of steepest descent (the negative of the gradient of the cost function).

It should be noted that the learning rate is not constant, and there are many different algorithms used to optimize the learning rate.

Similar to the cost function, the learning rate you use is dependent on the problem you're trying to solve.

If the learning rate is too small, then the training of the model will take too long.

Alternatively, if the learning rate is too large, then the model may "overshoot" the local minimum.

Conclusion

In this article, we went over the very basics of the math used in gradient descent. You learned about the concept of optimization in machine learning models, the intuition behind gradient descent, and all of the components of gradient descent broken down.

If you have any lingering questions or suggestions for a topic you want me to cover in the future, then please make sure to leave a comment down below.

Lastly, make sure to follow my newsletter to never miss out on when I post new content!

In this article, I discuss the importance of choosing your first programming language and factors to consider when making your selection. I also provide recommendations for the best programming languages to learn first for various fields, such as web development, mobile app development, machine learning, and cybersecurity. Ultimately, the first language you learn should align with your personal interests, goals, and desired career path, but remember that the core of software development is problem-solving using logic, which can be applied to any programming language.

Introduction

This article is part of a series called "Bit by Bit", a series devoted to all things programming. Whether you're still a computer science undergrad or the CTO of Apple, there's something for you here.

New articles in this series are posted every Tuesday!

Importance of choosing your first programming language

If you've chosen to enroll in a university, then the first programming language you learn is dependent upon the language that's used in your university's Intro to Programming course.

But if you've made the courageous decision to take the self-taught route of learning software development, then you have to make that nerve-wracking decision of which programming language you'll learn first.

But I'd argue that the first programming language you learn doesn't mean anything in the grand scheme of things.

What's most important in learning software development is not which languages you can code in or how you can memorize a language's syntax.

No matter which type of development you decide to do, the core of all software development is the ability to solve problems using logic.

Based on my own journey, I know firsthand that the first language that one learns means almost nothing.

The first programming language I learned was RobotC in a class I took on cognitive robotics, a required course for my B.A. in psychology.

RobotC is a high-level programming language based on the C programming language and is almost exclusively used for robotics programming in educational settings.

So basically, it's a language that I'll probably never use again.

However, this course taught me how to think like a software engineer and stimulated my interest in computer science.

Moral of the story? All that matters in learning your first language is that you learn the core of what software engineering is all about.

Factors to consider when selecting a programming language

I know I just said that the programming language you learn first doesn't matter, but there's also no issue with wanting to start with learning a language geared toward the overall path that you want to take.

With that being said, here are some factors that you could consider when choosing your first programming language.

Personal interests

The most important factor in choosing your first programming language is considering who you are as an individual.

Forget about all the external pressure of choosing the most in-demand language.

What matters is choosing something for yourself so you stay motivated to continue growing in software engineering.

Personal goals

The second factor you should consider is what you ultimately want to create with software engineering.

While some programming languages can be used in pretty much every type of development, some languages can only be used in one type of development (such as my first language, RobotC).

For this reason, if you want to increase the chances of learning a language that you'll use for the rest of your journey, then it's important to think about what exactly you want to build.

Community support

You are far more likely to stay motivated if you learn with others than if you learn alone.

Additionally, choosing a language that is "popular" will increase the likelihood that you can find an opportunity to collaborate on a project with a team, or contribute to an open-source project.

Ease of learning

Some people may tell you to first learn a language like Java or C++ so that you understand how computers compile code into machine instructions.

However, compiled languages can be very difficult to learn as a first language.

Software engineering takes a lot of grit as it is, so it's best to start with an interpreted language to get the fundamentals down.

Versatility

If you don't have a set goal in mind with software engineering, then this point is especially important.

Choosing a versatile language will allow you to maximize the variety of types of projects that you can create while learning your first language, as well as enable you to test different types of development to see what you like best.

Job market and industry trends

I'd argue that this factor should hold the least weight in choosing your first language to learn.

There are always trendy languages and libraries coming and going. While these trendy languages have a strong moment, a lot of them eventually fade away.

You should start with learning one of the core languages that have stood strong for decades, as these languages are probably not going anywhere anytime soon.

Additionally, the job market's demand for developers with a background in a specific language is always changing.

Best programming language to learn first overall

Python

Uses

• Web development

• Scientific computing

• Machine learning and artificial intelligence

• Desktop app development

• Data analysis

• Data visualization

• API development

• Language development

• Blockchain development

• Quality assurance software testing

Pros

• Easy to learn and use

• Incredibly versatile

• Strong community of developers

• Free and open-source

• Cross-platform

Cons

• Slow speed

• Heavy memory usage

Best programming language to learn first for web development

JavaScript

Uses within web development

• Dynamic webpage development

• Browser-side scripting

• Server-side scripting

• Web API development

Pros

• Large selection of built-in and external libraries

• Practically the only programming language that is used for browser-side scripting

• Easy to learn and use

• Strong community of developers

• Free to use

Cons

• Requires a run-time environment

• Beginner mistakes can easily lead to security risks and vulnerabilities

• Not very versatile outside of web development

Best programming language to learn first for mobile app development

Swift

Uses within mobile app development

• iOS app development

• Android app development

Pros

• Besides Objective-C, Swift is the only programming language supported by iOS

• Easy to learn and use

• Free and open-source

• Ability to develop both iOS and Android apps with a single code base

• Incredibly fast

Cons

• Not very versatile outside of mobile app development

• Very new language

• Small selection of external libraries

• Small community of developers

Best programming language to learn first for machine learning and artificial intelligence

Python

Uses within ML and AI

• Unsupervised and supervised learning algorithms

• Natural language processing

• Facial recognition

• Fraud detection

• Refining search results

• Spam detection

• Pharmaceutical drug research analysis

• Self-driving cars

• Cancer research analysis

• Financial analysis

• Malware detection

• Optimized digital marketing

Pros of using Python for ML and AI

• Large selection and variety of external libraries meant for ML and AI

• Large community of developers that use Python for ML and AI

• Simple to use compared to other languages used for ML and AI

• Incredibly versatile within the broad realm of "big data"

• Easy to integrate due to Python's cross-platform nature

Cons of using Python for ML and AI

• Slow speed

Best programming language to learn first for cybersecurity

Python

Uses within cybersecurity

• Network scanning

• Vulnerability detection

• Log analysis

• Penetration testing

• Malware analysis

• Port scanning

• Ethical hacking

Pros

• Large selection and variety of external libraries meant for cybersecurity

• Large community of developers that use Python for cybersecurity

• Simple to use compared to other languages used for cybersecurity

• Incredibly versatile within the broad realm of IoT

• Easy to identify attacks from any operating system due to Python's cross-platform nature

Cons

• Slow speed

Conclusion

I hope that after reading this article, you feel more confident in choosing your first programming language.

Remember that it's okay if you don't know what you want to do yet. As long as you focus on learning how to solve problems using logic, then you'll be able to translate that knowledge into any other language down the line.

At the same time, it's okay to want to start by learning a language that can directly be used in the type of development that you want to do in the future.

If you're about to start learning how to program and have chosen which language you want to learn, then please share which language you chose and why in the comments below!

If you have any lingering questions or suggestions for a topic you want me to cover in the future, feel free to post those in the comments as well.

Lastly, make sure to follow my newsletter so that you don't miss out on when I post new content.

In this article, the author explores the relationship between mathematics and computer science, focusing on the core concepts of linear algebra and their various applications in computer science. Topics covered include linear systems, matrices, Gaussian elimination, vectors, vector spaces, vector-matrix multiplication, and transformations. These concepts are essential in fields such as machine learning, computer graphics, cryptography, and information theory.

Introduction

This article is part of a series called "Log Base Two", a series dedicated to the relationship between math and computer science.

Just to give a bit of background on my experience in math, I've excelled in a total of 10 college courses in math:

1. Single-variable differential calculus

2. Single-variable integral calculus

3. Multi-variable differential and integral calculus

4. Multi-variable differential and integral calculus of vector-valued functions

5. Linear Algebra

6. Differential equations

7. Probability and statistics

8. Data analysis using R programming language

9. Multivariate statistics

10. Discrete math

For a large majority of those 10 classes, I ended up with A's.

Although, before college, I struggled a lot with math in the classroom, even though math had always been my favorite subject since I was in elementary school. I found it hard to truly grasp the concepts taught because my high school teachers were too focused on skill assessment. Instead of focusing on the actual concept being taught, I was too worried about how I was going to pass the test the following week.

Once I got to college, I realized that your math grade (or any grade for that matter) truly doesn't define your potential. Further, I'd argue that your success in math education is heavily influenced by the quality of the teacher/professor's teaching.

My mission with this series is to show other people that math isn't so scary if you break down mathematical concepts into digestible bouts of information and investigate use cases of math in your primary field of interest (in this case, computer science). Along the way, I hope to also supplement your math education with quality content. I believe that everyone is capable of learning and truly loving mathematics.

New articles in this series are posted every Thursday. If you have any suggestions for a specific topic I should write about, please comment it down below!

What Even is Linear Algebra?

Linear algebra is a subfield of mathematics that concentrates on linear systems, matrices, and vectors. Through the employment of these three fundamental elements, a multitude of advancements have been achieved in various domains, both within and beyond the sphere of mathematics.

Why Haven't I Heard About Linear Algebra Before?

If you're still at the beginning of your computer science journey, you might've not been exposed to linear algebra quite yet.

Typically, the first opportunity to take a course in linear algebra is in your 2nd or 3rd year of college. Additionally, colleges usually require you to pass single-variable calculus before being able to enroll in linear algebra.

On top of this, most non-STEM majors in college don't require students to pass any college-level math past single-variable calculus and statistics.

The funny thing is that linear algebra isn't harder than calculus. In fact, A majority of my classmates in university, myself included, believe that linear algebra is a bit easier than calculus.

Also, linear algebra doesn't directly use any tools or concepts from calculus, so you can't even make the argument that you first need to gain prerequisite information from calculus to understand linear algebra.

So if linear algebra isn't harder than calculus, and there's no prerequisite information gained from calculus, then why does it seem so exclusive and "higher level"?

While I don't have an official answer, I have an opinion as to why this is the case.

I believe that it comes down to two main factors:

• Linear algebra's industrial uses are not as widespread as the branches of math that are taught before it

  • While both calculus and linear algebra are pretty much only used in STEM and a few other industries (finance, economics, some arts), their uses within those industries are not equal

• Linear algebra is a "mature" math

  • I know I said that linear algebra is sometimes seen as easier than calculus, but linear algebra's concepts are much more abstract than concepts in single-variable calculus

With all that being said, there's no problem with getting a head start on learning linear algebra if you're still in school right now.

And if you're going the self-taught route with computer science, then all the more reason to self-teach the math used in computer science!

Key Linear Algebra Concepts Used in Computer Science

I've carefully curated a list of 9 concepts in linear algebra that are used across various branches of computer science including machine learning, computer graphics, cryptography, image processing, information theory, and much more.

For each of these concepts, I'll provide enough general information so you can understand the big picture, and I'll also mention an example of a branch of computer science that uses the concept.

Also, I ordered the concepts in chronological order to have the concepts build on top of each other and improve the flow of the article.

To not overflow this article with information, I'm going to split this information into two articles. I'll cover the first 5 concepts in this article, and the last 4 concepts in a future article.

For reference, here are all of the 9 concepts that I'll be covering, with the concepts that I'll be covering in this article highlighted in yellow:

• Linear systems

• Matrices and Gaussian elimination

• Vectors and vector spaces

• Vector-matrix multiplication and the Matrix Equation

• Transformations

• Orthogonality

• Determinants

• Eigenvalues and eigenvectors

• Singular value decomposition

Please keep in mind that I'll only be scratching the surface of all of these concepts. If you're self-teaching linear algebra to pivot into a branch of computer science that uses linear algebra, then I highly recommend Introduction to Linear Algebra by Gilbert Strang. This is the same textbook that was used in my college linear algebra course. The structure of the content in this textbook is organized in a well-written format and is easily digestible for self-teaching.

I. Linear systems

A linear system can be defined as an assembly of multiple linear equations that share a common set of variables. These equations are interconnected, and their solutions are represented by the values of the variables that simultaneously satisfy all the equations within the system.

One application of linear systems lies in numerical analysis. Numerical analysis involves utilizing algorithms to find approximate numerical solutions for problems where obtaining the exact numerical solution is either impossible or too complex to resolve.

Linear equations

A linear equation is an equation that consists of n variables each with a degree of 1.

The general form of a linear equation is:

$$a_1 x_1 + a_2 x_2 + \ldots + a_n x_n = b$$

The 3 main components of a linear equation are:

• a set of coefficients

$$\{a_1, a_2, \ldots, a_n\}$$

• a set of variables

$$\{x_1, x_2, \ldots, x_n\}$$

• a constant b

In linear systems of equations, each equation contains the same set of variables but doesn't necessarily have the same set of coefficients.

Putting together a system of m linear equations takes the general form:

$$a_{11} x_1 + a_{12} x_2 + \ldots + a_{1n} x_n = b_1$$

$$a_{21} x_1 + a_{22} x_2 + \ldots + a_{2n} x_n = b_2$$

$$\vdots$$

$$a_{m1} x_1 + a_{m2} x_2 + \ldots + a_{mn} x_n = b_m$$

Simultaneous solution

The main idea behind a system of equations is that all equations within the system can be solved simultaneously.

By doing so, it becomes possible to find a unique solution, or a set of solutions, that satisfies all the given equations, thereby providing a comprehensive understanding of the problem at hand.

II. Matrices and Gaussian elimination

As a way to simply store a linear system in a mathematical object that can be operated on, we use a matrix. Not only do matrices provide a way to store a linear system, but they simplify the process of being able to solve linear systems through a method called Gaussian elimination.

Matrices are found throughout computer science. One of the most common uses of matrices in this field is computer graphics. In animation, for instance, a matrix can be used to define a specific transformation for an object. These matrix transformations enable movement, rotation, and resizing of an object by establishing a new set of coordinates for the object's representation in the animation.

Matrices

A matrix is simply an array of numbers arranged into m rows and n columns. Each row in a matrix represents all of the variables' coefficients for each equation, and each column represents all of the coefficients applied to a singular variable in the system.

$$\begin{pmatrix} a & b & c \\ d & e & f \\ g & h & i \end{pmatrix}$$

The above matrix only contains the coefficients in a linear system. If we wanted to include the linear system's constants in a matrix, the standard notation for doing so is with an augmented matrix:

In an augmented matrix, the values on the right side of the vertical bar represent the constants in the linear equations. Typically we use augmented matrices when solving linear systems so that we can arrive at a solution that involves the constants in the equations.

Gaussian Elimination

One method for solving a linear system involves employing a technique known as Gaussian elimination on a matrix.

Gaussian elimination is essentially an algorithm where you apply row operations to a matrix to reduce the matrix to what's called row echelon form. A matrix is in row echelon form when it satisfies the following conditions:

• All rows filled with all zeros are at the bottom of the matrix

• The leading entry (leftmost non-zero entry) of every non-zero filled row is equal to 1

• The leading entry of every non-zero filled row is to the right of the leading entry of the row above it

Once a matrix is in row echelon form, you can start to find the values of all the variables using basic algebra.

I know all that seems confusing, but when you see it in practice, it might make some more sense.

Here's an example of applying Gaussian elimination on an augmented matrix to achieve row echelon form:

In the above example, I first chose to multiply all the values in the 1st row by half, since that would make the first entry in the 1st row equal to 1.

For the next row operation, I noticed that the 2nd row's first entry was already 0, meaning my only goal was to make that 7 in the 2nd row turn into a 1. As such, I multiplied the entire row by 1/7.

As you can see, the 3rd row needed some more work than the first two rows.

For the 3rd row, I first added the 1st row's values to it, so that I could turn the first entry into a 0.

My next task was to make the 3rd row's second entry a 0, so I made the 3rd row negative and then added the 2nd row's values multiplied by 1.5.

My last and final step was to simply make the 3rd row's third entry equal to 1, so I just had to multiply the row by -14/41.

As you can see, after applying all of those row operations on the matrix, we end up with a matrix that is in row echelon form.

The resulting matrix doesn't have any zero-filled rows, so we don't have to worry about satisfying the condition that all zero-filled rows are at the bottom of the matrix.

For the other two conditions, the leading entry in each row is equal to 1, and the leading entry in each row is to the right of the leading entry in the row above it.

Now that we have the matrix in row echelon form, we can easily calculate the values of each of the variables using basic algebra.

The 3rd row tells us that the third variable is equal to -36/41.

We can now plug the third variable's value into the 2nd row, and find that the second variable is equal to 19/41.

Finally, we can plug the second variable and third variable's values into the first row, and find that the first variable is equal to 122/41.

III. Vectors and vector spaces

A vector is a quantity that is described by both a magnitude and direction. A vector space is a set of vectors, where each of the vectors in the vector space follows a defined list of rules. I'll go into more detail about vector spaces further down.

One example of vectors and vector spaces being utilized in computer science is within web information retrieval systems employed by search engines. Vectors are employed to represent webpage documents and search queries. By implementing a vector space model, search engines can provide relevant results in response to a user's search query.

Vectors

One of the simplest examples of a vector is a vector from one point to another point on a 2-dimensional plane.

For example, if you have a plot a point A at (0, 0) in the Cartesian coordinate system, and then plot another point B at (4, 6), the vector from A to B would be:

$$\vec{v} = \begin{pmatrix} 4 \\ 6 \end{pmatrix}$$

Imagine that you're standing on point A, and your friend is at point B, the vector above tells you that you'd need to travel 4 units to the right on the x-axis, followed by 6 units up on the y-axis.

A vector's size is typically described by the dimension of the vector. A vector's dimension is equivalent to the amount of elements in the vector. The vector in the above example is a 2-dimensional vector since it has 2 elements.

A vector can be anything from 0-dimensional to an infinite-dimensional vector.

The dimension of a vector is crucial when determining whether a vector exists within a specific vector space. Before delving into the details of vector spaces, I will first discuss some vector operations and definitions to help you comprehend the concept of vector spaces.

Vector Addition

If you add a vector to another vector, the result is another vector. For two vectors to be able to be added together, they must be of the same dimension.

When adding two vectors together, you add each element from the first vector to another element in the second vector, based on the element's index in the first vector.

Here's an example of adding two 3-dimensional vectors together:

$$\begin{pmatrix} 4 \\ 6 \\ 1 \end{pmatrix} + \begin{pmatrix} 3 \\ 7 \\ 2 \end{pmatrix} = \begin{pmatrix} 7 \\ 13 \\ 3 \end{pmatrix}$$

First, I added the 1st element in the first vector to the 1st element in the second vector to obtain the 1st element in the resultant vector (4 + 3 = 7).

Second, I added the 2nd element in the first vector to the 2nd element in the second vector to obtain the 2nd element in the resultant vector (6 + 7 = 13).

Finally, I added the 3rd element in the first vector to the 3rd element in the second vector to obtain the 3rd element in the resultant vector (1 + 2 = 3).

Scalar Multiplication

Scalar multiplication is the operation of multiplying a vector by a number (effectively scaling the vector). The result of scalar multiplication is another vector.

When multiplying a vector by a scalar, you multiply each element in the vector by the scalar.

Here's an example of multiplying a 4-dimensional vector by a scalar:

$$2 \begin{pmatrix} 4 \\ 8 \\ 0 \\ -2 \end{pmatrix} = \begin{pmatrix} 8 \\ 16 \\ 0 \\-4 \end{pmatrix}$$

First, I multiplied the 1st element in the vector by the scalar to get the 1st element in the resultant vector (2 * 4 = 8). And then I just repeated this process for the rest of the elements in the vector.

Zero Vector

The zero vector is simply a vector of any dimension where every element's value is 0.

Typically the zero vector is denoted by the following:

$$\vec{0}$$

While zero vectors are a very simple concept, they are a requirement of vector spaces, as you'll see below.

Vector Spaces

As I stated at the beginning of this section, vector spaces are simply a set of vectors that follow a set of 10 defined rules (or axioms). The rules are as follows:

For each of the 10 axioms below, let V be a vector space over the field of real numbers, let u, v, and w be distinct vectors in vector space V, and let a and b be distinct real numbers.

$$V \in \mathbb{R}^{n} \; \vert \; \vec{u},\vec{v}, \vec{w} \in V \; \vert \; a, b \in \mathbb{R}$$

1. Closed under addition

$$(\vec{u} + \vec{v}) \in V$$

1. Commutative under addition

$$\vec{u} + \vec{v} = \vec{v} + \vec{u}$$

1. Associative under addition

$$(\vec{u} + \vec{v}) + \vec{w} = \vec{u} + (\vec{v} + \vec{w})$$

1. Additive identity

$$\vec{0} + \vec{u} = \vec{u}$$

1. Additive inverse

$$\vec{u} + -\vec{u} = \vec{0}$$

1. Closed under scalar multiplication

$$a(\vec{u}) \in V$$

1. Multiplicative identity

$$1(\vec{u}) = \vec{u}$$

1. Associative under scalar multiplication

$$(ab)\vec{u} = a(b\vec{u})$$

1. Distributive property of scalars under scalar multiplication

$$a(\vec{u} + \vec{v}) = a\vec{u} + a\vec{v}$$

1. Distributive property of vectors under scalar multiplication

$$(a + b) \vec{u} = a\vec{u} + b\vec{u}$$

Vector spaces play a crucial role in linear transformations, vector scaling, and various other vector operations, which are essential in the fields of linear algebra and computer science.

IV. Vector-matrix multiplication and the Matrix Equation

One of the operations that we can do on matrices and vectors is by multiplying a matrix by a vector. The result from multiplying a matrix by a vector is another vector, and these 3 components make up what's called a matrix equation.

Vector-matrix multiplication is a fundamental operation in data science. For example, multiple linear regression models utilize vector-matrix multiplication to determine a vector of regression coefficients, which helps predict the outcome of a dependent variable within a dataset.

Vector-Matrix multiplication

For a m x n matrix to be multiplied by a vector, the vector must be m-dimensional. The resulting vector from multiplying a matrix by a vector is n-dimensional.

The steps to multiply a matrix by a vector involve finding the linear combination of the columns of the matrix represented as vectors, where each column's vector is multiplied by a scalar corresponding with an element in the original vector.

Here's an example of multiplying a 2 x 3 matrix by a 3-dimensional vector to get a 2-dimensional vector:

$$\begin{pmatrix} 1 & 4 & 9 \\ 2 & 7 & -3 \end{pmatrix} \begin{pmatrix} 8 \\ -1 \\ 0 \end{pmatrix} = 8 \begin{pmatrix} 1 \\ 2 \end{pmatrix} + -1 \begin{pmatrix} 4 \\ 7 \end{pmatrix} + 0 \begin{pmatrix} 9 \\ -3 \end{pmatrix} = \begin{pmatrix} 4 \\ 9 \end{pmatrix}$$

The Matrix Equation

One of the ways to represent a linear system of equations is with a matrix equation:

$$A\vec{x} = \vec{b}$$

In a matrix equation, A represents a matrix filled with the variables' coefficients in the linear system, x represents a vector filled with the variables in the linear system, and b represents a vector filled with the constants in the linear system.

V. Transformations

When a vector is operated on and the resulting vector is in a different dimension, then we say that the original vector was transformed. Transformations of vectors are analogous to functions in basic algebra. Since the product of a m x n matrix and a n-dimensional vector results in a m-dimensional vector, we can generally think of matrices as being transformations when applied to vectors. By definition, matrix transformations are linear transformations.

One of the most common uses of transformations in computer science is in signal processing. Specifically, there is a particular transformation called the Discrete Fourier Transform, which is used to convert a signal's time vector (or, for example, an image's digital signal vector of pixels) into a signal's frequency vector. This allows for tasks such as image compression, audio editing, and the transmission of digital signals.

A transformation from the nth dimension to the mth dimension is a function that maps an n-dimensional vector to an m-dimensional vector. The general notation for a transformation is:

$$T: \mathbb{R}^{n} \rightarrow \mathbb{R}^{m}$$

Matrices as transformations

Let A be an m x n matrix, and let T represent a transformation.

The matrix transformation by A is then defined as:

$$T(\vec{x}) = A(\vec{x})$$

This transformation maps the vector x to the resultant vector of multiplying the matrix A by the vector x.

Linear transformations

Linear transformations are simply transformations on a linear combination of vectors. The general definition of a linear transformation is:

Let T be the transformation:

$$T: \mathbb{R}^{n} \rightarrow \mathbb{R}^{m}$$

Let u and v be arbitrary vectors such that:

$$\vec{u},\vec{v} \in \mathbb{R}^n \; | \; T(\vec{u}), T(\vec{v}) \in \mathbb{R}^m$$

Let a and b be arbitrary scalars such that:

$$a,b \in \mathbb{R}$$

We can then define T as a linear transformation such that:

$$T(a\vec{u} +b\vec{v}) = aT(\vec{u}) + bT(\vec{v})$$

By definition, every matrix transformation is a linear transformation.

The main advantage of linear transformations over non-linear transformations is that linear transformations preserve the linearity of the variables. A linear transformation is what allows for vectors to be mapped to another dimension where the same rules of vector operations exist.

Conclusion

In this article, I've given a crash course on some of the basic linear algebra concepts used in various branches of computer science.

Although, please keep in mind that I've only scratched the surface of all of these concepts. If you want more in-depth knowledge of these concepts and other concepts in linear algebra, I highly recommend Introduction to Linear Algebra by Gilbert Strang. This is the same textbook that was used in my college linear algebra course. The structure of the content is highly organized and easily digestible for self-teaching.

Please comment down below if you have any lingering questions or suggestions for an article topic that I should cover in the future.

As stated previously, I'll be covering the rest of the linear algebra concepts (orthogonality, determinants, eigenvalues and eigenvectors, and singular value decomposition) in a future article. To stay up to date and not miss out when I post new articles, make sure to subscribe to my newsletter!