DEV Community: sandrockj

Event Horizon: A Journey

sandrockj — Mon, 20 Jan 2025 18:11:31 +0000

Preface

Today, I’d like to share some insights into a project our team has been passionately working on as part of our senior thesis with Operation Spark. Let me start by discussing what we aimed to achieve and the conceptual journey that led us to this project.

Our project, Event Horizon, is a turn-based card-battling game designed to connect players in exciting, strategic game play. Currently, it’s in an early alpha stage as we experiment with core ideas and work on establishing a solid foundation for scalability.

Team Members

Benjamin Long: https://www.linkedin.com/in/ben-long-dev/
Jeremy Hernandez: https://www.linkedin.com/in/jeremyhernandez504/
Justin Sandrock: https://www.linkedin.com/in/justin-m-sandrock/

How We Chose This Project

Developing a video game is undeniably complex, so why did we decide to tackle it? Let me provide some context about our team. Each of us has a diverse gaming background, with preferences ranging from first-person shooters (FPS) and role-playing games (RPGs) to mobile battle arenas (MOBA) and real-time strategy (RTS) games. When we brainstormed ideas for our senior thesis, it became clear that gaming was a shared passion we were eager to explore.

The Challenges Our Team Faced

Building Event Horizon pushed us far outside our comfort zone. Until now, our experience had primarily revolved around traditional web applications. Here's what we were used to:

Users needing accounts to access features.
Authentication leading to isolated, private data interactions.
Basic CRUD (Create, Read, Update, Delete) operations within a session.
No real-time data sharing or direct connections between users.

However, creating a multiplayer game required us to rethink how we approached these principles entirely. It was no longer about private, isolated data but about managing complex, dynamic relationships between players and shared game states. This led us to ask some tough questions:

How do we establish a game session to bridge two users for real-time data sharing?
What happens if a player loses connection—how do we recover their game and its data?
How do we track and manage player actions, game state, and outcomes at the end of each turn?
How do we enforce data privacy, ensuring a player’s client doesn’t reveal unauthorized information (like the opponent’s cards or actions) to maintain fair play?
How can we make our game visually appealing and engaging?

These challenges were far more intricate than anything we’d encountered in traditional web development. Real-time data exchange, data privacy, and client-side rendering introduced layers of complexity that tested our ability to approach problems, diagnose them, and resolve them with our technical skills.

Navigating These Challenges with Tools and Innovation

Thankfully, frameworks like Socket.io provided an excellent foundation for real-time communication. However, we still faced significant hurdles in implementing server-side logic to handle the game state comprehensively. Here’s what that entailed:

Processing player actions and selected cards.
Managing card effects over multiple turns, including buffs, debuffs, and damage.
Validating player actions to prevent cheating (e.g., ensuring a card played belongs to the player’s deck).

One of our key priorities was server-side data validation as an anti-cheat mechanism. For instance, if a player attempted to play a card they didn’t own or that wasn’t part of their deck, our server would immediately flag and block the action. While this added complexity, it was crucial to ensure fair gameplay.

Developing Event Horizon has been a rewarding and eye-opening journey. It’s been an opportunity to challenge ourselves, learn new technologies, and push the boundaries of what we thought we could achieve as a team. While we’re still early in the process, this experience has deepened our understanding of game development and given us valuable insights into overcoming technical and conceptual hurdles.

Alpha Version

EH-Part1 - Album on Imgur

Discover the magic of the internet at Imgur, a community powered entertainment destination. Lift your spirits with funny jokes, trending memes, entertaining gifs, inspiring stories, viral videos, and so much more from users.

imgur.com

EH-Part2 - Album on Imgur

imgur.com

Lessons Learned

Among the many mistakes that our team has now learned from, one of the largest factors that affected the development of our application was the planning phase. In the infancy of this project, we dedicated a week for conceptualizing how our game should work and what architecture would be necessary to support it. Despite our efforts, the reality that we found is that there are some things you just don't know until you begin working on your project.

As we outlined our tech stack, we included many technologies which we hadn't worked with previously. These technologies were necessary for us to reach our end-goal and, while we had verified that they would help us get there, we didn't have enough exposure with these technologies to understand their limitations (i.e. what they can do but also what they can't).

As a preface to the following section, I wanted to inform you that some code has been redacted for the purposes of brevity and legibility.

Matchmaking Prerequisites

The Problem: When a player attempts to join a game in Event Horizon, several processes need to occur before they can fully connect. First, we create a record linking the player to the game. Then, we initialize the player’s in-game state, including critical details like their health, armor, and their chosen deck of cards. This raised an intriguing challenge: how could we ensure that players were prompted to select a deck before joining the game? Moreover, how could we make this process consistent across both public and private games? Above all, how could we make this seamless and intuitive for the players?

The Solution: We addressed this challenge by designing a versatile, reusable modal that accepts a callback function. This modal acts as a unified entry point, enabling players to confirm and connect to a game from anywhere within the application. By centralizing this interaction, we ensured that the process is consistent, straightforward, and relatively easy to integrate across different contexts in the game.

/* The basic functional component accepts a few vital properties. */
const SelectDeck = ({toggleModal, callback, callbackParams}) => {}

Property	Description
toggleModal	Used to signal the calling component that the modal has completed its task and no longer needs to be rendered.
callback	Defines the action to execute after the user selects a card deck and confirms their choice. This action can vary, such as connecting to a private game or a public game.
callbackParams	Any parameters required by the callback, such as a game session identifier or a private game invite.

A critical design consideration for this modal (and a recurring theme in our application) was ensuring the correct timing of code execution. It was vital to trigger certain actions only after the user provided explicit confirmation to avoid sending invalid requests to the server. Additionally, we encountered challenges with React's lifecycle methods, which initially complicated our early implementations of the modal. However, our team agrees that the effort was worthwhile: the modal ultimately streamlined processes and simplified future refactors, particularly those related to responsiveness.

Public Game Connections

The Problem: The introduction of Socket.io helped significantly in our development process; it was the primary means by which game data (current round information, cards played, player states) was emitted within a game session. However, as we began working with these sockets, we realized that we needed a way to "save" and "preserve" a game session as well as which players were registered under those game sessions.

The Solution: On the back-end, we developed a games table in our RDBMS and an endpoint for interacting with that data. An entry to the games table stores a few different pieces of data whenever it is created, the structure of this table within our schema (Prisma) ended up looking something like this:

model games {
  id         Int       @id @default(autoincrement()) 
  status     Boolean   @default(true)  // used to indicate if game active
  start_date DateTime  @default(now()) // tells us when the game was started
  end_date   DateTime?                 // filled in when game ends
  victor_id  Int?                      // relational field to a user's ID
  private    Boolean   @default(false)
}

Whenever a user clicks Play Game within our application, it sorts through games with a status of true in order to determine which games are active. Although this works, it also partially feeds into another problem...how could we save which users belong to a game? Our solution was to create a join table that would store player connections; this would enable the redirect of users to their active game sessions in the case that they had lost connection. It would also enable for us, as developers, to limit the amount of players that could be associated with a game session to two.

model public_connections {

  id            Int  @id @default(autoincrement())
  game_id       Int  // this would be used to link a game
  user_id       Int? // to the player specified here
  selected_deck Int? // it also informs us what data (deck) we need to initialize
}

Private Game Connections

The Problem: As we expanded our application's features, we faced a complex challenge: implementing a system for private game sessions. This posed two major concerns:

Data Concurrency: How could we isolate data for each game session to prevent overlaps or unintended interactions? Mishandling this could leave game mechanics vulnerable to exploitation.
User Connections: How would users initiate and connect to private sessions? Previously, our system only supported searching for open public matches.

The Solution: We began by thoroughly reviewing the game logic across the application to ensure all operations occurred in isolation, avoiding malformed data or indiscriminate bulk operations. Once we confirmed that our system could handle data concurrency, we moved forward with drafting new architecture and wireframes to enable private game sessions.

model private_connections {
  id            Int  @id @default(autoincrement())
  game_id       Int
  user_id       Int?
  selected_deck Int?
}

model game_invites {
  id       Int      @id @default(autoincrement())
  date     DateTime @default(now())
  from     Int      // who is the invite from?
  to       Int      // who is the invite to?
  game_id  Int      // if we want to connect, what game session are we using?
  accepted Boolean  @default(false) // has this been accepted yet?
}

During the development of our architecture, we recognized the need for a system to track private game connections and manage user invitations. Reflecting on our implementation, we acknowledge that the design could be improved. The creation of two separate but similar tables introduces redundancy. A more streamlined approach would combine these models into a single table with a type field to differentiate between public and private game sessions. However, given our time constraints, the current implementation met our immediate requirements.

After deploying this architecture, we finalized our wireframes and reviewed the application for necessary changes. One significant improvement we identified was the need to establish socket connections earlier in the process. This adjustment enabled us to immediately notify users of new game invites. By initiating the socket connection earlier and recording data in real-time, we ensured that users would receive updates promptly whenever they were online.

interface ConnectedUsers {
  [userId: string]: string;
}

const connectedUsers: ConnectedUsers = {};

socket.on('register_user', (userId) => {
  connectedUsers[String(userId)] = socket.id;
  socket.join(userId);
});

socket.on('disconnect', () => {
  users = users.filter(user=>user!==sockId)
  players = users.length;
  
  for (const user in connectedUsers){
    if(connectedUsers[user] === sockId){
      delete connectedUsers[user];
    }
  };
});  

socket.on('send_invite', (data, invited) => {
  const invitedBy = connectedUsers[String(data.from)];
  const invitedSock = connectedUsers[String(invited)];

  if (invitedSock) {
    io.to([invitedSock, invitedBy]).emit('incoming_invite', data);
  }
});

This server-side implementation listens for events from the invite sender and notifies the recipient of an incoming game invite. While it functions as intended, there is room for optimization and increased security. For instance, the current design could be improved for better time complexity and to introduce stronger protections against spoofing attempts. However, we believe that the risks associated with this implementation are minimal, as the exposed data is not sensitive. Furthermore, due to the way our server processes these interactions, we believe that it is unlikely for a spoofed user to gain control of or interfere with private game sessions.

Maintenance and Scalability

The Problem: Our application handles a diverse and growing volume of data. To maintain fast query performance and ensure scalability, we needed to carefully design our database architecture. However, even with well-structured plans, the reality is that as your application gains more users, databases naturally grow in size. This introduces challenges not only in maintaining database performance but also in ensuring server stability as workloads increase.

The Solution: To address this, we implemented a periodic database cleanup operation designed to remove outdated game records. Since user statistics like wins, losses, and score were already being updated elsewhere, we realized that retaining old game records served no practical purpose once the games were terminated. By regularly purging these records, we could keep our dataset smaller and queries faster.

const halfHour = 60 * 30 * 1000;

setInterval( async () => {

  try {
  
    const deletedGames = await database.games.deleteMany({ 
        where: { status: false }
    })
    
    if (deletedGames) {
      console.log(`Routine database maintenance: purged ${deletedGames.count} closed games in database at ${new Date()}.`)
    }
    
  } catch (error) {
    errorHandler(error);
  }
}, halfHour);

To enhance error handling, we developed an errorHandler() function using Node.js's file system library. This function creates a folder for the current day and logs errors within it. This approach not only provided us with a useful record of issues during development but also became indispensable in production. For example, when we deployed our application using PM2 (a process manager for Node.js), we noticed that terminal access to error messages was no longer available. The errorHandler() function bridged this gap by providing detailed error logs, enabling us to monitor and debug issues effectively in a production environment.

import { promises as fs } from 'fs';
import path from 'path';

export default async function errorHandler(data: Error) {

  try {
  
    const date = new Date();  // create a date
    const directoryName = date.toISOString().slice(0, 10);
    const directoryPath = path.resolve(`<REDACTED>/error_logs/${directoryName}`); 
    const timestamp = `${date.getHours()}${date.getMinutes()}hr-${date.getSeconds()}${date.getMilliseconds()}ms`
    
    await fs.mkdir(directoryPath, { recursive: true });
    
    const fileName = path.join(directoryPath, `${directoryName}_${timestamp}_${Math.floor(Math.random() * 1000)}.txt`);
    
    await fs.writeFile(fileName, data.toString());
    
    console.log(`Error successfully written to new file ${fileName}.`);
    
  } catch (error) {
    console.error(`Error handler: It’s not me, it’s you.\n`, error);
  }

}

By combining routine database maintenance with robust error logging and leveraging tools like PM2, we improved server stability and ensured smoother operations as our application scaled.

Conclusion

Working on Event Horizon has been an incredible learning experience that challenged us to step out of our comfort zones and develop skills beyond traditional web application development. This project taught us the intricacies of building real-time systems, managing multiplayer interactions, and designing for scalability. While there are areas we recognize for improvement, we’re proud of what we’ve accomplished within our time constraints and with the tools available.

More than anything, this journey has emphasized the importance of teamwork, adaptability, and embracing challenges—lessons that will guide us as we continue to grow as developers. Thank you for following our story, and we can’t wait to share what’s next for our team!

Elixir: Concurrency, Parallelism, & Fault-Tolerance

sandrockj — Mon, 02 Dec 2024 11:19:57 +0000

Why was Elixir developed?

Elixir was created in 2012 as part of a research and development project; Elixir was intended to be a productive and extensible language for writing software that would be both maintainable and reliable. It aims to enhance compatibility, productivity, and extensibility.

What is Elixir used for?

Elixir is a functional programming language that is used for building scalable and maintainable applications. Elixir code runs in lightweight threads of execution (processes) that run concurrently in isolation but can exchange information; the language is also extensible in that developers can extend the language as necessary. According to the Elixir website:

Elixir runs on the Erlang VM, known for creating low-latency, distributed, and fault-tolerant systems. These capabilities and Elixir tooling allow developers to be productive in several domains, such as web development, embedded software, machine learning, data pipelines, and multimedia processing, across a wide range of industries.

What makes Elixir different?

First, we need to explore what it means for something to be a thread. A thread is a single sequence of instructions for a computer to execute. In many programming languages, multiple threads are used to handle different tasks at once, with each thread executing a separate sequence of instructions.

However, in a language like JavaScript, the main execution thread handles all the code in sequence, ensuring that each task gets processed one at a time. Our synchronous code is added to the call stack for immediate execution, while asynchronous operations are offloaded to the environment and their results are queued for later processing by the event loop. In this sense, JavaScript achieves pseudo-concurrency—the illusion of performing multiple tasks at once—even though it runs on a single thread.

In contrast, Elixir operates as a multi-threaded language, where tasks are spread across multiple threads and executed in isolated processes. As a result, Elixir doesn't need to offload operations to an external environment. Elixir achieves true concurrency by design; multiple tasks are executed simultaneously on separate threads. Whenever necessary, these processes can communicate with one another by passing "messages" to share data.

Elixir's multi-threaded model allows it to handle many tasks at once, making it ideal for large-scale applications like real-time messaging platforms, databases, and distributed systems. Therefore it is better suited for concurrent and fault-tolerant systems, especially when system scalability and reliability are key priorities.

What is "fault tolerance", and why is it important?

Fault tolerance refers to a system's ability to handle errors, failures, or exceptions without crashing entirely. If you’re familiar with JavaScript, you’ve likely encountered errors that could potentially bring down your entire application. This raises the question: is fault tolerance always a good thing?

Erlang embraces the reality that errors are inevitable in software development and production, and its fault tolerance philosophy gave rise to the motto "Let It Crash." Elixir, which builds on this philosophy, adopts the same approach. I’d like to acknowledge Fred Hebert, who explains this philosophy in his article The Zen of Erlang:

When you write a C program, you have one big main() function that does a lot of stuff. This is your entry point into the program. In Erlang, there is no such thing. No process is the designated master of the program. Every one of them runs a function, and that function plays the role of main() within that single process.

So the question becomes to figure out how do we ensure that crashes are enablers rather than destructors. The basic game piece for this in Erlang is the process. Erlang's processes are fully isolated, and they share nothing. No process can go and reach into another one's memory, or impact the work it's doing by corrupting the data it operates on. This is good because it means that a process dying is essentially guaranteed to keep its issues to itself, and that provides very strong fault isolation into your system.

In Elixir, like Erlang, fault tolerance is achieved by leveraging lightweight, isolated processes. These processes are the building blocks of the system, and each one is responsible for executing a single task. The key idea is that processes in Elixir are completely isolated from each other. If one process fails, it does not affect others because each has its own memory and execution space. Let us take another look at Hebert's article on this topic:

Message passing is the most intuitive form of communication in a concurrent environment there is. It's the oldest one we've worked with, from the days where we wrote letters and sent them via couriers on horse to find their destination. A critical aspect of all this message passing, especially in the olden days, is that everything was asynchronous, and with the messages being copied.

No one would stand on their porch for days waiting for the courier to come back, and no one (I suspect) would sit by the semaphore towers waiting for responses to come back. You'd send the message, go back to your daily activities, and eventually someone would tell you you got an answer back.

This is good because if the other party doesn't respond, you're not stuck doing nothing but waiting on your porch until you die. Conversely, the receiver on the other end of the communication channel does not see the freshly arrived message vanish or change as by magic if you do die. Data should be copied when messages are sent. These two principles ensure that failure during communication does not yield a corrupted or unrecoverable state. Erlang implements both of these.

Elixir allows for isolated processes to run concurrently, with the option to communicate with each other by passing messages. This approach not only ensures that errors in one process don't bring down the entire system, but it also supports a highly concurrent and scalable environment. When a process crashes, it doesn’t leave the system in an inconsistent or unstable state.

How can I get started with Elixir?

Elixir has extensive documentation that can help guide you towards installing the necessary packages to begin using it on your system or within a project.

Sources
Official Documentation	https://hexdocs.pm/elixir/introduction.html https://elixir-lang.org/blog/2013/08/08/elixir-design-goals/ https://elixir-lang.org/development.html https://elixir-lang.org/ https://hexdocs.pm/elixir/processes.html
Miscellaneous	https://en.wikipedia.org/wiki/Thread_(computing) https://en.wikipedia.org/wiki/Process_(computing) https://ferd.ca/the-zen-of-erlang.html https://en.wikipedia.org/wiki/Fault_tolerance

The Prisma ORM: A Brief Overview and Introduction

sandrockj — Mon, 18 Nov 2024 01:47:01 +0000

What is Prisma ORM?

Prisma is an object relational mapper (ORM) that can be used alongside several databases including PostgreSQL, MySQL, MariaDB, SQLite, MongoDB, and more. Prisma claims that its main goal is to make application developers more productive when working with databases. Some of its strengths are that it enables developers to think in terms of objects rather than mapping relational data, and it tries to accomplish this while balancing tradeoffs between developer productivity and developer control over a database.

Should you use Prisma?

In an environment where you are working with raw SQL, you might have an increased level of control over your database and the queries that you serve to it. However, this can have tradeoffs especially as it pertains to productivity.

Many developers might be inclined to work with traditional ORMs so that they can abstract away from SQL; this approach is generally taken so that they can achieve some balance between productivity and control. However, this inherently causes some issues and misconceptions with our database. Prisma documentation describes this wonderfully with the following statement:

As an application developer, the mental model you have for your data is that of an object. The mental model for data in SQL on the other hand are tables. The divide between these two different representations of data is often referred to as the object-relational impedance mismatch. The object-relational impedance mismatch also is a major reason why many developers don't like working with traditional ORMs.

Prisma lists the following concerns for developers, claiming that its ORM might be beneficial for you, your team, or your application if these concerns exist:

You are building a server-side application that talks to a database.
You care about productivity and the developer experience.
You are working in a team or otherwise collaborative environment.
You want or require a tool that holistically addresses database workflows.
You want or require some form of type-safety in your environment.
You want to have the option to write raw and type-safe SQL.

How does Prisma ORM work?

Prisma contains several components that address database workflows, which include the Prisma Client, Prisma Migration Sytem, and the Prisma Studio. In this article we will mainly cover the functionality of the Prisma Client and the Prisma Migration System. More information about these features can be found here; for our purposes we are going to explore how to setup Prisma in a project and how we can begin integrating it into a local server and database.

Getting Started

Initialize an empty database in MySQL

In our examples, we will be working with MySQL but our setup would (generally) remain unchanged across databases. The first thing that you might want to do is setup your database, if you haven't already. In this article we are going to assume that you have MySQL installed locally, that your service is running, that you are able to login to the MySQL monitor, and that you have a empty repository that is ready to be developed as a TypeScript project.

You do not need to perform these steps locally in order to understand the content that we are going to review, but it might help.

The first step that we are going to take is to create a database that we would like to use alongside Prisma. In our case, we are going to just create a database called Catchee.

> mysql -u root
> CREATE DATABASE Catchee;
> Query OK, 1 row affected (0.04 sec)

Installing and initializing Prisma

If you are interested in following along, Prisma provides a section dedicated to creating a TypeScript project and setting up the Prisma ORM. This article will somewhat follow along with this tutorial, although there are some deviations later.

In order to install the Prisma CLI as a project dependency, you can run the following command.

npm install prisma --save-dev

As a general recommendation, you should also install the Prisma Client package for use within your project. We are going to use the Prisma Client later on in this article.

npm i @prisma/client

In order to actually setup the Prisma ORM locally, we recommend that you use the following command to initialize the basic files and folder structures that Prisma expects to exist.

npx prisma init --datasource-provider mysql

Once the previous command has been used within your command-line interface, there should be a message indicating that a Prisma schema was successfully created in your project. If we open our Prisma file, we will see something akin to the following (depending on the datasource-provider you have selected).

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

Our schema.prisma file is arguably the most important file as you begin setting the ORM to work with your database. It is important for a few reasons, which we are going to explore in the next section. It is highly recommended that, if you are using VSCode, you download the Prisma extension for syntax highlighting, auto-completion, and formatting.

The Prisma Schema

What is included at start?

The Prisma schema file enables us to do many things, and it is important for us to break this apart in order to understand what Prisma is doing but also what it isn't doing. The first item that we will review is the generator client block.

generator client {
  provider = "prisma-client-js"
}

This code block within our schema file is telling Prisma that we want to be using the Prisma Client for our interactions. What does this mean, however? The Prisma Client will eventually enable us to query our database; it is a very powerful tool that offers a degree of auto-completion whenever we do begin to write queries to our database. It might be somewhat difficult to envision now, but generally this code block remains untouched except for special use cases. Now let's take a look at our datasource db code block.

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

This code block is, essentially, informing Prisma what database system it is working with and also what database it should be targeting. The provider informs Prisma that we will be working with MySQL; this is helpful because as we begin developing models (tables) Prisma can infer data types, syntax, and more in order to ensure that the model will be supported by our database system.

The url helps direct Prisma to a specific database (in our case it is Catchee) within our database management system (MySQL). Notice that it is trying to pull this information from a .env file in our repository; we can setup the DATABASE_URL in this file to match the format Prisma expects. This format might vary depending on your DBMS, in our case Prisma provides an example DATABASE_URL that follows the structure mysql://USER:PASSWORD@HOST:PORT/DATABASE.

What are models?

Currently, our schema file only includes the information necessary to build a client (which will allow us to perform CRUD operations later) and the information necessary to target a database for with these CRUD operations. However, what else can we include in this file to ease the development process?

In the Prisma schema, you can also define models that you can eventually migrate over to your targeted database. If we expanded the previous template that was provided to us, we might include something like a User model.

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
  name  String?
}

It might be intimidating to see us jump from having no model (table) to including a complete one here. This is an example from Prisma, which we have copied over, but if it eases the mind an important thing to consider is that Prisma recommends and informs developers of available data types (and constraints) as you begin writing a model. This is helpful because it enables developers to quickly verify that the data type they are prescribing is valid, and that it will also be accepted by the datasource provider. If you feel like these features are not enough, Prisma has a dedicated section within their documentation that discusses data modelling.

How can we use models?

After we have described models within our Prisma schema, we can add these models to our database so that we can begin interacting with them in the Prisma Client. There are two crucial steps here in order to accomplish this.

Build the Prisma Client

The first step is to attempt to build the Prisma Client; this will update the Prisma Client so that it is aware of the new models we have described and so that it understands how to query them. In order to build the client, you can run the command npx prisma generate. If there are any errors within our schema, Prisma will inform us of these errors when we try to build our client.

Migrate our models to the database

Once our client has been built successfully, we can attempt to migrate the models contained therein to the datasource that has been prescribed in the datasource db block of the Prisma schema. In order to accomplish this, we can run the command npx prisma migrate dev. If you are following along and encounter errors at this step, verify the following:

Is the MySQL service running locally?
Have you defined the DATABASE_URL in a .env file?
Have you properly formatted your DATABASE_URL for the DBMS that you are using?

Querying with Prisma Client

If you are following along with the previous steps, the processes that we are going to cover now depend on a successful client generation and a successful migration. If you encountered an error, please resolve those errors before continuing.

Now we are able to import the Prisma Client to a TypeScript file so that we can attempt to query the database. In order to open a connection to our database with the Prisma Client, we can use the following code.

import { PrismaClient } from '@prisma/client';

const database = new PrismaClient();

database.$connect()
    .then(() => {
        console.log(`Prisma has connected to the database...`);
    })
    .catch((error) => {
        console.error(`Failure on database connection...`)
    })

If our project necessitated it, we could export this Prisma Client database or we could also attempt to export the connection itself. This is useful if we wanted to export this for use in a server, and it is especially useful so that we don't have multiple clients open (if we have routers).

Now we can begin to actually interact with our database and the structures provided to it. Because we have successfully built the client, you will notice that as you type there will exist properties on the Prisma Client that refer to the models we have defined. Let's take a look at an example below.

import { PrismaClient } from '@prisma/client';

const database = new PrismaClient();

database.$connect()
    .then(() => {
        console.log(`Prisma has connected to the database...`);
    })
    .catch((error) => {
        console.error(`Failure on database connection...`)
    })

// Here we are defining a new user to create
const newUser = {
    email: 'myCoolEmail@gmail.com',
    name: 'Justin Sandrock'
}

// We pass that information to the Prisma Client to perform the operation
database.user.create({data: newUser})
    .then((userCreated) => {
        console.log(userCreated);
    })
    .catch((error) => {
        console.error(error);
    })

If this operation is successful, then we should be able to view the newly created user within our console. If we encounter any errors, then we will also be informed of the error. It's just that easy! There are many different CRUD operations that you can perform through the Prisma Client, for a full list you can view them here as well as some examples.

Conclusion

Prisma is a versatile ORM that can make developers more productive without removing a significant amount of control; if you prefer to work with raw SQL then there are also some options to perform these raw operations with the Prisma Client. If you feel like Prisma might be a good addition to your project, consider reading more at the official website.

Our team (OS-IMS Code-Blooded) has been using the Prisma ORM as we attempt to create a multiplayer game. Thus far, Prisma has enabled us to move efficiently and rapidly as we establish our architecture! We felt as though the querying capabilities offered by Prisma were quite powerful, despite the abstraction away from traditional SQL syntax, and the inclusion of Prisma Studio allowed for us to quickly observe whether or not our game was storing data as intended.

Our team will be publishing a joint article on our project in the near future, and we will also be providing a link to our website if you would like to check it out! We expect that it will be in a stable status at the start of 2025 (we are currently overhauling features to ensure a pleasant end-user experience).

Sources

Official Documentation

Basic Intro to TypeScript

sandrockj — Sun, 10 Nov 2024 23:59:07 +0000

What is TypeScript?

TypeScript is a programming language that is built on top of JavaScript, and it adds additional syntax support. According to W3 Schools, the main advantage of using TypeScript is that it can enable developers to specify the types of data that are being used throughout our code. However, what does this actually mean? Let's get into that with some examples in our next section.

Why is TypeScript useful?

JavaScript

const x = 5;
const y = 2;

function add(x, y){
    return x + y;
}

In the above example, the developer knows that in order to use this function you should be passing in numerical (Number, Integer, Float) data types in order for the code to execute correctly. However, there currently doesn't exist any safeguards that prevent misuse of this function. Although there are error messages, the error you receive might not be informative.

const x = 'Cat';
const y = 2;

function add(x, y){
    return x + y;
}

console.log(add(x, y)) // => outputs 'Cat2' rather than a number

If we wanted to restrict how this function could be used in native JavaScript, we might consider implementing exception and error handling. A basic implementation might look something akin to the following.

const x = 'Cat';
const y = 2;

function add(x, y){

    const typeIsValidX = typeof x === 'number'
    const typeIsValidY = typeof y === 'number'

    if (typeIsValidX && typeIsValidY){
        return x + y;
    } else {
        console.error(`Expected type Number for arguments in function add().`)
    }
}

console.log(add(x, y)) // => causes error message (below)

// "Expected type Number for arguments in function add()."

In the previous example, we have now created a simple check to see if the arguments provided to our add() function are numbers. If the arguments are indeed numbers, then we receive our result. If we have provided invalid arguments, we receive an error message instead. This is good, but our error message is not telling us what data type we have provided for our arguments. How can we add additional error handling so that this is more informative?

function add(...args){
    const errMsg = args.reduce((accum, curr, index) => {
      if (typeof curr !== 'number'){
        accum.push(`Invalid argument at args[${index}]; expected type '${typeof curr}' to be type 'number'.`);
        return accum;
      } else {
        return accum;
      }
    }, [])
    

    if (errMsg.length === 0){
      return args.reduce((accum, curr) => {
        return accum + curr;
      }, 0)
    } else {
      errMsg.forEach((error) => {
        console.error(error);
      })
      throw new TypeError(`Invalid arguments provided to function; expected all arguments to be of type number.`)
    }

  }

Now we have error handling within our function, where we are asserting that arguments must be of a certain type in order for the function to execute. We are also being informative about what we are doing wrong with our function (which variable is not meeting a type expectation). This seems a little over-the-top, but if our add() function took an unlimited number of parameters this could be handy for diagnosing errors; this error handling could also be useful if we are using the add() function in multiple places.

So what does this have to do with TypeScript? All of the code that we have written above could be handled with TypeScript, which enables us to restrict a variable (or function) to using certain data types. So what does this look like with TypeScript?

TypeScript

let y: number = 2;
let x: number = 'Cat'; // => causes error message(below)

// Type 'string' is not assignable to type 'number'.

In the above variable declarations, we are declaring two variables x and y. Notice that we are also including number following a colon; this is how TypeScript can 'assign' a data type for that variable to use (more information on basic types here). Because we have assigned the data type of number to the variable x, TypeScript will throw an error to let us know that we are not providing a valid data type.

Now, what about our function? In the previous example we were only attempting to declare and initialize a variable, but how can we restrict a function to only accept arguments of a certain data type? The execution here is very similar.

function add(x: number, y: number): number {
    return x + y;
}

console.log(add('Cat', 7)); // => causes error message (below)

// Argument of type 'string' is not assignable to parameter of type 'number'.

This is one of the key features of TypeScript; it's in the name! As a language TypeScript is helping us to manage the types of data that we are expecting throughout our code. This is especially valuable for error handling, but it's also beneficial for scalability.

What else should I know?

According to the official documentation: TypeScript knows the JavaScript language and will generate types for you in many cases. For example in creating a variable and assigning it to a particular value, TypeScript will use the value as its type.

let user = {
  name: "Hayes",
  id: 0,
};

user = 'Cat'; // causes error message (below)

// Type 'string' is not assignable to type '{ name: string; id: number; }'.

This also gets more complex with variables that are objects. In the previous example, you might have noticed that the error message states not assignable to type '{ name: string; id: number; }. This means that even if we were to have assigned user to an empty object {} we would also get an error. However, why does this occur? Let's look into this in our next section.

Interfaces & Data Structures

TypeScript introduces an interface keyword, which allows for you to create a data structure that adheres to certain constraints; this is similar to instancing an Object with a Class but the relationship extends beyond that. In the example from the previous section, it is implied that the user belongs to an interface. If we were to alter the code above to reflect how TypeScript is viewing it, it would look more akin to the following example.

// In the background, TypeScript is implicitly developing this interface
interface User {
    name: string;
    id: number;
}

// Here we see that the user variable is referencing the interface on assignment
const user: User = {
    name: "Hayes",
    id: 0,
};

In TypeScript, an interface defines the shape of an object by specifying its properties and their types, but without implementing any functionality. According to the official documentation, an interface 'serves as a contract', ensuring that any object or class that implements the interface adheres to its defined structure. Interfaces allow for strong typing and code consistency, making it easier to catch errors at compile time and enabling better code documentation and auto-completion support.

Do Interfaces make Classes redundant?

As you review the previous code example, you might begin to question whether or not TypeScript makes classes redundant. In a similar, but distinct way, both a TypeScript interface and native classes enforce a data structure. However, despite these similarities, there are differences between how they are used in our code. We are going to expand on the example from the previous section here, and we are going to use the interface with a class.

interface User {
  name: string;
  id: number;
}

class UserAccount {
  name: string;
  id: number;

  constructor(name: string, id: number) {
    this.name = name;
    this.id = id;
  }
}

let user: User = new UserAccount("Justin", 1);

At first glance this can be somewhat overwhelming and confusing to look at, so we are going to break this down into parts so that we can get a better understanding of what each piece of code is responsible for.

interface User {
  name: string;
  id: number;
}

The above code example is creating an interface that other variables in our application will adhere to. It is essentially establishing a template that variables in our code must follow, which is useful for ensuring that we are working with the proper data type and structure when we attempt to execute a set of code. However, it is important to note that this interface is only used at compile time.

class UserAccount {
  name: string; // TypeScript expects explicit property declarations
  id: number;

  constructor(name: string, id: number) {
    this.name = name;
    this.id = id;
  }
}

In the above code, we are declaring a class that expects for there to be a name and id property that will be used in a constructor to instance a new Object. It is important to note that this Class is used at runtime to create new instances of an Object; at compile time the previously covered interface enforces that a variable will follow the structure returned by the Class.

let user: User = new UserAccount("Justin", 1);

Finally, we are stating the for the variable user it will adhere to the User interface that we have defined earlier. On compile time, it is expected that this user variable will henceforth follow this data type and structure. On runtime, our Class is used to create (and return) a new instance of an Object...and our User interface expects certain values to be returned by that class.

How can I get started using TypeScript?

There are three ways that you can get started with TypeScript; according to the official documentation the three most common installation routes are via an npm module, NuGet package, or by installing it as a Visual Studio extension.

If you would like to learn how to use TypeScript or understand it further, please consider reading through its extensive documentation on its website.

Conclusion

TypeScript can be a valuable addition to your development environment, as it can implement additional error handling and it can help you better understand errors in your application when they occur. Learning and implementing TypeScript can present challenges that might initially slow the development process. However, once you have a better understanding of TypeScript, it can make the development process easier for you or your team!

Sources

Official Documentation	https://www.typescriptlang.org/ https://www.typescriptlang.org/download/ https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html https://www.typescriptlang.org/docs/handbook/2/basic-types.html https://www.typescriptlang.org/docs/handbook/interfaces.html
Miscellaneous Documentation	https://www.w3schools.com/typescript/typescript_intro.php

Basic Intro to Python

sandrockj — Mon, 07 Oct 2024 07:31:38 +0000

What is Python?

Python describes itself as an 'interpreted, interactive, object-oriented programming language' that also supports 'multiple programming paradigms beyond object-oriented programming, such as procedural and functional programming'.

Why was Python created?

Python was created so that it could combine the strengths of the Modula-3 and ABC progamming languages into a separate programming language. Python credits the Modula-3 language for the overall syntax and the semantics used for exceptions, however there were similar inspirations from the ABC language and the SET language by proxy.

Why choose Python?

Python describes itself as 'a high-level general-purpose programming language that can be applied to many different classes of problems'. The Python Standard Library covers multiple concerns for developers:

String Processing	Internet Protocols	Software Engineering	Operating System Interfaces
Regular expressions	HTTP	Unit testing	System calls
File comparisons	FTP	Logging	File systems
Unicode	SMTP, XML-RFC, & more	Profiling	TCP/IP sockets

Comparing Python & JavaScript

First, it might be best for us to understand why there are so many programming languages available for developers. The simple answer is that, while many programming languages can execute similar processes, some are better equipped to handle those executions. According to Linsi Tuttle's article on the WGU (Western Governors Univserity) website:

Each programming language is designed with specific applications in mind and has unique strengths and limitations. Depending on the project, one language may be better suited than another in terms of speed efficiency, versatility, or scalability.

With that in mind, let's also look into the observations of Estefania Cassingena Navone in her article comparing Python & JavaScript:

Python	JavaScript
It is widely used in scientific and specialized applications.	It is widely used for web development, user-facing functionalities, and servers.
Used in data science, artificial intelligence, machine learning, computer vision and image processing.	Used in web development, especially for making interactive and dynamic content for web applications.
It can be used for web development; Python is typically used for back-end development.	It can be used to develop both the back-end and front-end of the application.

Examples from Python 3

Function Invocation

I think it's best for us to ground ourselves with something simple. Let's start with the basics, how can we use Python to log messages to the console?

print("Hello world!");

This outputs a very basic to our console, and while it might not be useful now it can certainly prove useful for troubleshooting while we continue to learn the language!

# OUTPUT => "Hello world!"

Variables & Data Types

According to Python, variables do not require a declaration before they can be used and it is also not required for you to declare a type. It is especially important to know that in Python, every variable is an object.

It might be difficult to wrap your head around this starting out, so let us take a look at some variable declarations and assignments.

first_name = 'Jolly' # string with single quotes
last_name = "Roger" # string with double quotes

height = 6 # integer number
age = 36.253256 # float number

is_liar = True # boolean

# concatenation example
print(first_name + " " + last_name + " sails the high seas!")

# interpolation example
print("At %d years old he stands at %d feet tall!" %(age, height))

Notice that in the examples above, we are avoiding camelCase and we are using the snake_case instead. This is mainly done because the official style guide for Python uses snake_case in many of its examples. If you are interested in more styling recommendations, you can view the documentation here.

Now let's take a quick look at our outputs, because we are doing something slightly different in both uses of our print statement. This is what our outputs would look like:

# OUTPUT => "Jolly Roger sails the high seas!"
# OUTPUT => "At 36 years old, he stands at 6 feet tall!"

The + operator is expecting that the data types served to it will match. In other words if the + operator is served with numbers then it will attempt to compute these numbers. If the + operator is served with strings, then it will try to concatenate the two items into one string.

In this first example, we essentially performed string concatentation. This is great, and it will work because in this case the + operator is being used for items of the same data type (string). In the second example, however, this would not work!

In the second example, we want to accomplish string interpolation. In order to do this we can create placeholders (%s %d %f) in a string, and then we can pass in our arguments to those placeholders in sequence %('cat', 3, 4.56231).

Code Blocks & Indentation

In JavaScript, we typically indicate the opening of a code-block through the use of braces {...} which wrap around a set of code for execution. However, Python handles this concept a bit differently...this is where good habits in other languages can help out.

x = 1

if x == 1:
    print("x is 1.")

In this case, Python uses indentation to know when a code-block starts and ends. The standard indentation requires standard Python code to use four spaces. If we wrote this line without indentation, we would receive the error IndentationError: expected an indented block .

Conditional Statements & Expressions

Let's try to apply our new knowledge of code blocks to the example in the Variables & Data Types section. In that case, we had an unused boolean which we are now going to implement.

first_name = 'Jolly' # string with single quotes
last_name = "Roger" # string with double quotes

height = 6 # integer number
age = 36.253256 # float number

is_liar = True

if is_liar:
    print("%s %s lied to you!" %(first_name, last_name))
else:
    print(first_name + " " + last_name + " sails the high seas!")
    print("At %d years old he stands at %d feet tall!" %(age, height))

Now we have created a code-block, and this code block executes only if the expression is truthy. In this example is_liar points to the value of True , so our output would be:

# OUTPUT => "Jolly Roger lied to you!"

It is also important to note that Python is capable of conditional chaining. The if statement can be followed by one or multiple elif statements and it can also be followed by a simple else statement.

Loops

In Python, there exist two ways to loop or iterate: for loops and while loops. In this case we can start with a simple example where we use the range function.

for item in range(1, 11):
    print(item)

In this example, the range() function represents our starting and stopping conditions for the loop. This is because the range() function returns a list data structure (in JavaScript you would refer to this structure as an array). If we move forward with this knowledge, we can reframe how we visualize this problem:

for item in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]:
    print(item)

The function range(1, 11) returns a list.
The list points to [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].
For every item in that list, we try to print() it.

It is also important to consider control flow statements, which can be used to alter the order in which our code is evaluated and executed. Two common statements are the continue and break statement. Let's integrate one of these into our loop.

for item in range(1, 11):
    if item % 2 == 0: # if the item is even
        continue      # continue to next iteration
    else:
        print(item)   # else print the item

In this case, we use the continue statement to proceed to the next iteration but only if the current item is an even number. Otherwise, we hit our else block and we would print the number! The continue statement, as well as the break statement, are sometimes optional. If you are worried about infinite loops, consider implementing these statements. On that note, let's take a look at a while loop!

count = 0
while True:
    print(count)
    count += 1
    if count >= 5:
        break

In this case, we have technically declared a loop which could iterate infinitely. However, in this case, we have appropriately included a base case. Whenever the count variable is greater than or equal to 5, we exit the entire loop via the break statement.

If we didn't have the break statement in this example, we would create an infinite loop. It's possible for us to restructure or otherwise redesign our code so that a break statement isn't necessary. If we wanted to accomplish the same thing we could redesign our code like this:

count = 0
while (count < 5):
    print(count)
    count += 1

In the end we achieved the same results, we just had to rethink our approach. Python offers many ways for you to navigate problems, so it is generally possible to achieve the same result in a number of different ways.

Functions

Ah, reuseable code, my beloved. Python describes functions as "a convenient way to divide your code into useful blocks, allowed us to order our code, make it more readable, reuse it, and save more time". With that in mind, let's jump into how we can make some reusable code!

def describe_me(name = None, age = None, hobbies = None):
    # code for the function would be here!

In the example above, we use the def keyword to indicate that we are defining a new function. The function is going to be called describe_me and it can take three arguments:

String
Number (float or integer)
List of hobbies

Notice that when we define these three parameters, we have also assigned them to the value of None. What we are actually doing here is we are setting the default value to None so that way if no argument is provided, then our code will still attempt to execute. Let's continue expanding this function in our example below.

def describe_me(name = None, age = None, hobbies = None):
    if (name and age):
        print('My name is %s and I am %d years old.' %(name, age))
    elif (name):
        print('My name is %s.' %(name))

Great, now we have established two condtional expressions to see what data we are working with. Our first conditional checks to see if an argument was served for both the name parameter and the age parameter; if this resolves to True then a message will be printed to the console. If a name parameter was provided, but no age, then an alternative message would be printed.

What we have so far works, but we still aren't addressing how the hobbies parameter is being used. Let's see what it would look like if we added a loop to iterate over the hobbies collection.

def describe_me(name = None, age = None, hobbies = None):
    if (name and age):
        print('My name is %s and I am %d years old.' %(name, age))
    elif (name):
        print('My name is %s.' %(name))

    if (hobbies and (type(hobbies) is list)):
        for hobby in hobbies:
            if (type(hobby) is str):
                print('%s is a hobby of mine.' %hobby)

describe_me('Jolly Roger', 36, ['Sailing', 2, 'Treasure-hunting', 3, 4, True])

We expanded our code quite a bit here, but what is it doing exactly? Now we are checking whether or not the hobbies parameter received an argument, and we are also checking to ensure that the parameter was a list. If this first check resolves to True then we attempt to execute everything inside of the code-block, which should output the following message:

# OUTPUT => 'My name is Jolly Roger and I am 36 years old.'
            'Sailing is a hobby of mine.'
            'Treasure-hunting is a hobby of mine.'

Classes

Classes are essentially a template that you can reuse to create new object instances. If you are unfamiliar with the concept of Classes, then that might sound really confusing but we are going to expand upon this premise.

class Car:
    year = 0
    make = ''
    model = ''

Let's start out by defining what a Car class object has, in this case it has several variables that are initialized to the type of data that we want to store inside of them. So with this basic template, how can we create a new object that is an instance of the Car class?

my_car = Car()

my_car.year = 2007
my_car.make = 'Toyota'
my_car.model = 'Camry'

We started by creating a variable my_car that is equal to a new instance of the Car class. After creating the new object, we reassign the variables inside of it to our desired values. However, our current problem is that we have to print the value of each variable individually.

print(my_car)        # => <__main__.Car object at 0x7f9940979f10>

print(my_car.year)   # => 2007
print(my_car.make)   # => Toyota
print(my_car.model)  # => Camry

Let's finish this off by adding some extra functionality to our Car class. We will add a new method to the class which, upon invocation, will print the year, make, and model of our instance.

class Car:
    year = 0
    make = ''
    model = ''
    def describe_me(self):
        print(self.year)
        print(self.make)
        print(self.model)

Great, so now we have added this functionality to our Car class. So what does this mean for us? Now we can create many instances of an object that follow our Car template! It is important to note that there are a few different ways that you can approach defining a class, so don't feel like you are too limited here!

Conclusion

I hope that this introduction has informed you of the differences between Python and other languages. I am still learning a lot about JavaScript and full-stack development, so unfortunately I haven't spent as much time with Python. However, I think it is a good thing to explore options for your toolkit as a developer!

If you would like to learn more about Python, you can check the documentation in order to research concepts in-depth. If you are looking for a beginner friendly tutorial, then I strongly recommend checking out the Learn Python organization website.

Intro to the Vue Framework

sandrockj — Mon, 30 Sep 2024 05:36:00 +0000

What is Vue?

from the Vue website

Vue is a "progressive" JavaScript framework for building user interfaces. It works by building on top of standard HTML, CSS, and JavaScript. It is a component-based programming model similar to that of Anuglar, AngularJS, and React. As a framework, Vue aims to be flexible so that it can adapt to the projects of any scale. It can be implemented for any purpose ranging from creating a static HTML page, embedding web components, and dynamic DOM rendering based on server interactions.

What are the strengths of the Vue framework?

from the Vue website

- Single-File Components (SFC) provide a modularized development model that allows different parts of an application to be developed in isolation.

- Composition API enables clean patterns for organizing, extracting, and reusing complex logic.

- Comprehensive tooling support ensures a smooth development experience as the application grows, which can translate to a more efficient development cycle.

- Lower barrier to entry and excellent documentation translates to lower onboarding/training costs for new developers.

The Basics of the Vue Framework

How can Vue be used to render items to the page?

A simple Component example

<script setup>
  import { ref } from 'vue'

  // A "ref" is a reactive data source that stores a value.
  const message = ref('Hello World!')
</script>

<template>
  <h1>{{ message }}</h1>
</template>

We import the ref() function from Vue, which allows us to reference a reactive data source.
We declare a constant variable message which refers to the string 'Hello World'.
Our template uses this constant variable, specifically the value it references, to render to the Document Object Model (DOM).

How can Vue be used to handle user input fields?

Initializing scripts for the Component

<script setup>
    import { ref } from 'vue'

    const message = ref('Hello World!')

    function reverseMessage() {
      message.value = message.value.split('').reverse().join('')
    }

    function notify() {
      alert('navigation was prevented.')
    }
</script>

The ref() function is imported from Vue.
The ref() function is used to refer to a message.
We define two functions in our scripts, so that we can use them in our templates. Function reverseMessage() can be used to modify the render for our reference message. Function notify() can be used to alert the user if something went wrong.

Creating the template for the Component

<template>
  <h1>{{ message }}</h1>

  <button @click="reverseMessage">Reverse Message</button>
  <button @click="message += '!'">Append "!"</button>

  <a href="https://vuejs.org" @click.prevent="notify">
    A link with e.preventDefault()
  </a>
</template>

The template section will render to the page, and we begin by displaying the referenced message within header tags.
We create one button with a 'click' event listener, which references the reverseMessage() function that we defined in our scripts. Another button is also created, but in this case we use an in-line expression to edit our referenced message.
On our hypertext reference link, we add a specialized 'click' event listener by chaining 'prevent' to the event listener. This is how Vue can be used to prevent defaults!

Optional styling for the Component

<style>
    button, a {
      display: block;
      margin-bottom: 1em;
    }
</style>

How does Vue handle attribute bindings and states?

Initializing scripts for the Component

<script setup>
import { ref } from 'vue'

const message = ref('Hello World!')
const isRed = ref(true)
const color = ref('green')

function toggleRed() {
  isRed.value = !isRed.value
}

function toggleColor() {
  color.value = color.value === 'green' ? 'blue' : 'green'
}
</script>

First, we reference the data message that we will eventually render.
We also reference constant variable isRed to the boolean true. Function toggleRed() is used to toggle this referenced value to either true or false.
We also reference constant variable color to the string 'green'. Function toggleColor() is used with a ternary operator, toggling the reference value to a string of either 'green' or 'blue'.
The references declared in these scripts enables a developer to initialize the state, and then the functions declared therein may also be used to manage/modify the state of the page.

Creating the template for the Component

Now that we have our state initialized, in addition to the tools necessary to modify it, we can begin working on our template. This is where 'fusion' occurs; at this stage we implementing our state references and functions to actually modify what is rendered!

<template>

                                  <!-- 1 -->
  <p>
    <span :title="message">
      Hover your mouse over me for a few seconds to see my dynamically bound title!
    </span>
  </p>

                                  <!-- 2 -->
  <p :class="{ red: isRed }" @click="toggleRed">
    This should be red... but click me to toggle it.
  </p>

                                  <!-- 3 -->
  <p :style="{ color }" @click="toggleColor">
    This should be green, and should toggle between green and blue on click.
  </p>

</template>

<style>
    .red {
      color: red;
    }
</style>

Let's break down what is happening here; each paragraph listed above is denoted with a corresponding number:

In the first paragraph, we target the 'title' property of the current HTML element.

1. The 'title' property is set equal to that of our referenced message in scripts.

2. When the output is hovered, our message will display!
In the second paragraph, we are targeting the 'red' class property and we are setting it equal to the current value of isRed.

1. On a click event the toggleRed() function determines a trueor falseboolean.

2. The state reference value isRed is assigned to this trueor falseboolean.

3. When the boolean changes our render will dynamically react to this change; this is because the template is referencing ref() the state of isRedand will change dynamically when this state value is changed.
In the third paragraph, we are targeting the 'style' property and we are setting it equal to the current value of color.

1. On a click event the toggleColor() function determines a string value.

2. The state reference value color is reassigned to this string value.

3. Because our paragraph refers to the value of color, our paragraph styling property is reassigned the value of color.

How does Vue implement conditionals and loops?

Let's take our approach closer to the real-world, so that we can start understanding what the actual workflow would look like when we are working on our own. First, let's start by creating a template of everything we might want to render to the DOM.

Initializing a Component

<template>
  <button>Toggle List</button>
  <button>Push Number</button>
  <button>Pop Number</button>
  <button>Reverse List</button>

  <ul>
    <li></li>
  </ul>
</template>

For now, we have created a few buttons that will be statically rendered to the DOM. We also have created an unordered list, but right now we don't know how long our list will be and we don't even know what we want it to display. At this point, we need to understand what our objectives are.

The button Toggle List will hide our unordered list.
The button Push Number will add an item to our list.
The button Pop Number will remove an item from our list.
The button Reverse List should change the render, causing the list to be displayed in reverse.
Our unordered list needs to reflect a collection of items, and each item needs to be dynamically rendered to the DOM.

I think it is best that we start with displaying each item of our list, so that way we have a way to visualize the DOM before we start implementing scripts that will change what is rendered. In this case, we want our unordered list to have a new list entry for every item in a collection of data.

Adding references and looping through a collection

<script setup>
    import { ref } from 'vue'
    const list = ref([1, 2, 3])
</script>

<template>
  <button>Toggle List</button>
  <button>Push Number</button>
  <button>Pop Number</button>
  <button>Reverse List</button>

  <ul>
    <li v-for="listEntry of list">{{listEntry}}</li>
  </ul>
</template>

Great, now we have established a reference to a collection within our scripts! Let's see if we can break down what we did here into something that we can understand.

The constant variable list refers to a collection (array of numbers).
The list entry now has an attribute respective to the v-for directive. ######1. The v-for directive receives a collection, and iterates over every item it contains. ######2. As the v-for directive is looking at the current item, it creates a new list entry and inserts the specified data there. ######3. In this case we are displaying the entire item in the collection, but that is okay because our collection is only primitive data types and not nested arrays or objects.

Now that we have a way to dynamically render these items, we can review the functionality of our buttons. We will start with the Toggle List button for the time being. In this case, we want the display of our list to switch between two states 'shown' and 'hidden'. Because there are only two states, we can think of this as a true or false expression.

Adding to our Component states

<script setup>
    import { ref } from 'vue'
    const list = ref([1, 2, 3])
    const show = ref(true)
</script>

<template>
  <button @click="show = !show">Toggle List</button>
  <button>Push Number</button>
  <button>Pop Number</button>
  <button>Reverse List</button>

  <ul>
    <li v-for="listEntry of list">{{listEntry}}</li>
  </ul>
</template>

First we declare a constant variable show in our scripts. It refers to a boolean value.
After we add this variable, we can use it for managing the state of content on our page.
We attach a click event listener to the Toggle List button. On click, an expression is evaluated. This inverts the current value of the show variable.

We are close to implementing this functionality, but now we need to account for some edge conditions. What if our list is empty? What if our list is hidden, but it isn't empty? Our current design establishes a way to toggle whether something is rendered to the DOM, but there are no conditional expressions that rely on the state of the show variable. Let's fix that.

Adding conditional expressions to check our states

<script setup>
    import { ref } from 'vue'
    const list = ref([1, 2, 3])
    const show = ref(true)
</script>

<template>
  <button @click="show = !show">Toggle List</button>
  <button>Push Number</button>
  <button>Pop Number</button>
  <button>Reverse List</button>

  <ul v-if="show && list.length">
    <li v-for="listEntry of list">{{listEntry}}</li>
  </ul>
</template>

First, we have added a Vue directive known as v-if to our unordered list. When the DOM attempts to render the list, it first checks the following conditions:

1. If the value of `show` is true.

2. If the value of `list.length` is above zero (a truthy value).

If either of these conditions fail, with our current implementation, it would refuse to render the list to the DOM. However, we want to be a bit clearer with our implementation. In this case, we want to expand our conditional expressions so that they will inform the user about the current state of the list.

1. If the list is hidden, but the list is not empty, then we want a message reflecting that.

2. If the list is empty (`list.length === 0`), then we want a message reflecting that.

Other modifications to states

<script setup>
    import { ref } from 'vue'
    const list = ref([1, 2, 3])
    const show = ref(true)
</script>

<template>
  <button @click="show = !show">Toggle List</button>
  <button>Push Number</button>
  <button>Pop Number</button>
  <button>Reverse List</button>

  <ul v-if="show && list.length">
    <li v-for="listEntry of list">{{listEntry}}</li>
  </ul>
  <p v-else-if="list.length">List is not empty, but hidden.</p>
  <p v-else>List is empty.</p>
</template>

At this point, we should now have three conditions which are capable of informing the end-user about the state of the list that they are interacting with. This is great progress, but we still need to implement the rest of our buttons. You might notice that, in the previous examples, we are using the properties and methods native to the JavaScript Array prototype. Because we have this functionality, we can interact with our list in the same way.

Final version of our Component

<script setup>
    import { ref } from 'vue'
    const list = ref([1, 2, 3])
    const show = ref(true)
</script>

<template>
  <button @click="show = !show">Toggle List</button>
  <button @click="list.push(list.length + 1)">Push Number</button>
  <button @click="list.pop()">Pop Number</button>
  <button @click="list.reverse()">Reverse List</button>

  <ul v-if="show && list.length">
    <li v-for="listEntry of list">{{listEntry}}</li>
  </ul>
  <p v-else-if="list.length">List is not empty, but hidden.</p>
  <p v-else>List is empty.</p>
</template>

At this point, our DOM should have all of the functionality that we originally set out for it to have! This is what is so powerful about Vue; despite the fact that many similar frameworks and libraries can accomplish this, the approach with Vue feels more natural and developer-friendly.

In the beginning, we starting with a basic and static HTML page. We increased our scale slightly when we made our page somewhat dynamic; we added a reference to list and we also added a directive that helped dynamically render items from that list.

After we added this somewhat dynamic feature, we expanded upon it so that other items could change the state of the DOM. In this case, we increased our scale again as we began handling more states.

If we began increasing our scale further, such as in the case were the list reference pointed to data that is received from the server, then we already have a solid foundation that can be tweaked to reflect data appropriately.

How does Vue interact with other components?

So far, we have only looked at how an individual component can change what is rendered to the DOM. However the reality is that, in most cases, your components should be interacting with one another so that you can reuse them in other parts of the DOM. Let's take a look at an example with a simple component.

Scripts for our Component

<script setup>
import { ref } from 'vue'
import TodoItem from './TodoItem.vue'

const groceryList = ref([
  { id: 0, text: 'Vegetables' },
  { id: 1, text: 'Cheese' },
  { id: 2, text: 'Whatever else humans are supposed to eat' }
])
</script>

We import the ref() function from Vue, but we are also importing the component TodoItem so that we can use it inside of this component. Because subcomponents must be imported and implemented, this creates a separation of concerns.

In separations of concerns, the system's components are organized in a way where each component addresses a single concern; the concern could be simple or it could address a (larger) specific functionality for the DOM. This means that each component only interacts with other components when necessary; this is especially beneficial for ensuring that the overall state of our DOM is not affected when we only want changes to occur within a specific component's scope.

Before we move onto our template for this component, we should understand how the subcomponent that it has imported will work. After all, if we don't know what it is doing then we don't know how to use that component.

The TodoItem Component

<script setup>
  const props = defineProps({
    todo: Object
  })
</script>

<template>
  <li>{{ todo.text }}</li>
</template>

It looks like when this component is being setup, it is defining its own properties props to include a key todo that will be assigned to the value of an object. In this case, the properties are looking back to see which data was passed to it as an attribute. Specifically, it is looking for an attribute name todo and it is expecting it to be an Object instance. More documentation on the defineProps() function can be found here.

After the object has been received, the TodoItem component tries to render the text property from the object that has been passed into it. If we have passed the values to it properly, then this should render whatever the value of the text property is for that object. Now we can take a look at how our main App component will try to use the TodoItem component when it renders.

Our template references the TodoItem Component

<template>
  <ol>
    <TodoItem
      v-for="item in groceryList"
      :todo="item"
      :key="item.id"
    ></TodoItem>
  </ol>
</template>

Inside of our template we are using the Vue directive v-for to iterate through the groceryList collection, which is an array of objects. However, in this case, we are referencing the component TodoItem which we imported earlier. In this case, we are saying the following:

For each item (object) in groceryList (array), pass the item to the TodoItem component.
TodoItem receives two attributes during each iteration:

1. The todo attribute stores the item (object).

2. The key attribute is used to create a unique 'key' for each item.
We expect that, for every item in our collection, the TodoItem component will return something to be rendered to the DOM.

Conclusion

I hope that you found this introduction to Vue somewhat helpful, it was a pleasure to research into how this framework can be used to make developers more efficient and effective. If you are familiar with similar frameworks and libraries, you might still be wondering whether or not Vue is something that you would want to use for your own projects. If you feel that way, I recommend that you read through Vue's FAQ to see if its benefits fit the needs of your team, project, or organization.

Is the knowledge of the Vue framework in demand?

According to the 2023 StackOverflow Developer Survey, Vue ranked eighth for one of the most popular web frameworks and technologies at 16.38%. In comparison, similar frameworks and libraries such as React ranked second at 40.58% whereas Angular ranked fifth at 17.46%.

Who uses the Vue framework?

from the Vue website

Vue is one of the most widely used JavaScript frameworks in production today, with over 1.5 million users worldwide. It is downloaded approximately 10 million times a month on Node Package Manager (NPM)!

      - Wikimedia Foundation

      - National Aeronautics and Space Administration (NASA)

      - Apple

      - Google

      - Microsoft

      - GitLab

      - Zoom

      - Tencent

      - Weibo

      - Bilibili

      - Kuaishou

Why jQuery Exists

sandrockj — Mon, 23 Sep 2024 05:08:38 +0000

What is jQuery and what do you use it for?

The jQuery slogan "write less, do more".

jQuery makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

According to W3 Schools:

jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.

Is jQuery still relevant? The short answer is yes!

According to W3 schools, many large corporations use the jQuery libary such as Google, Microsoft, IBM, and Netflix. A StackOverflow survey from last year also indicated that there was still a desire for developers to be experienced with jQuery!

Alright, so now that we know why jQuery was made, let's see what it is about jQuery that has made web development so much easier. According to the jQuery website, there are four main features and use cases for jQuery:

1. HTML/DOM Manipulation

2. CSS Manipulation

3. HTML Event Methods

4. AJAX

Traversal & Manipulation of the DOM

First, let's cover what it means to traverse and manipulate the Document Object Model (DOM). Whenever we talk about these kinds of operations you could probably interpret each of them differently, but here is what we mean when we talk about this capability.

Traversing the DOM
- This is the ability to find elements by their type, class, ID, tags, and more.
- This is the ability to find an element, and use it to find other elements.
Manipulating the DOM
- The insertion of new elements to the DOM.
- This attachment of event listeners to elements existing on the DOM.

jQuery

$( "button.continue" ).html( "Next Step..." )

In this example, jQuery is performing the following actions:

It first traverses the DOM to find an element of tag'button' and class 'continue'.
It then targets the html property of that element and sets it to "Next Step..."

JavaScript

const buttons = document.querySelectorAll("button.continue")

buttons.forEach( (button) => {
    button.innerHTML = "Next Step..."
})

There are quite a few differences between these sets of code, despite them doing the same thing. It's important to note why these two code blocks look different, because something different is happening at each step.

jQuery

jQuery first finds all elements of tag name "button" and class name "continue".
jQuery then returns a newly instanced object, containing references to all elements that we performed a lookup on.
jQuery has an html() method which will attempt to edit all 'referenced' elements in our jQuery object. In particular, this method edits the innerHTML property.

JavaScript

Our native JavaScript finds all elements of tag name "button" and class name "continue".
The querySelectorAll() method returns a NodeList.
Because there is not a native method that acts in the same way as jQuery's html( ) we have to loop through this array-like object and set each button's innerHTML to the desired value.

At this point, it should be pretty apparent that jQuery can save you a lot of time...this is especially true if you are going to have to do operations like this frequently! However, this is just one of the many ways the jQuery enables developers to work more effectively and efficiently.

Manipulation of CSS

There are a lot of reasons why you might need to change an element's CSS on a webpage. Let's give some context to this, because this is actually a lot more important than you might think! If you were an end-user accessing a website on a daily basis, it's likely that you are expecting "feedback" from the website.

Here's an example:

Pretend you are on a social media forum, and you are a moderator.
You ban a user on the page.
The user's name is greyed out and the user's name now has a strikethrough styling.

This is a rough example of editing CSS for feedback, but there are a lot of other applications too. Imagine that you needed to resize or collapse a toolbar on your website; you could just remove that element from the page but you could also edit the CSS properties to change the toolbar's styling.

Now that we have an idea of why someone might need to edit CSS, it should be pretty apparent that we need a way to easily edit an item's CSS. This process is practically identical to that of what we have above.

jQuery

$('button.continue').css('background-color', 'red');

JavaScript

const buttons = document.querySelectorAll('button.continue'); 

buttons.forEach(button => { 
    button.style.backgroundColor = 'red'; 
});

Again, these two functions do the same thing, but it is faster for a developer to work with the jQuery implementation rather than the native JavaScript implementation. It's also important to note that jQuery has many "Effects" methods which can be used to quickly edit an element's CSS properties.

HTML Event Methods

Let's take a look at the code samples provided on the jQuery website, specifically we are going to review how event handling works. If you aren't familiar with events, there are three things to consider with an event: the event listener, the event handler, and the event target.

Event listeners are "waiting" for a specific event to occur on an element. This includes hovering your mouse over an element, clicking an element, choosing an option, and more.
Event handlers are what actually happens behind the scenes when an event (click, hover, change, etc.) occurs on the page.
Event targets are the element which we were "waiting" for an event to happen to.

jQuery

var hiddenBox = $( '#banner-message' );

$('#button-container button').on('click', function(event) {
    hiddenBox.show();
});

In the first line it "targets" a hidden box that it eventually wants to show.
An event listener is added to all buttons under the ID "button-container", and we begin waiting for a "click" event to occur on that button. In this case, each button has an event listener attached to it. Each button is an event target for its unique event listener.
When the event occurs, the event handler uses a jQuery "Effect" to display that banner on the page.

It looks like the jQuery implementation is pretty simple...but can the same be said if we refactored it to use JavaScript?

JavaScript

var hiddenBox = document.getElementById('banner-message'); 
var buttons = document.querySelectorAll('#button-container button'); 

buttons.forEach(function(button) { 
    button.addEventListener('click', function(event) {
        hiddenBox.style.display = 'block';
    }); 
});

Again, jQuery lives up to the expecation of "writing less, doing more"!

Asynchronous JavaScript and XML (AJAX)

If you are unfamiliar with AJAX, W3 Schools simply defines it as a framework which "allows for web pages to be updated asynchronously by exchanging data with a web server behind the scenes". In other words AJAX enables developers to store, and request, data in an existing backend server.

$.ajax({

  url: "/api/getWeather",

  data: {
    zipcode: 97201
  },

  success: function( result ) {
    $( "#weather-temp" ).html( "<strong>" + result + "</strong> degrees" );
  }

});

In the example above, jQuery is attempting to talk to a server and request weather information for a zip code. On successful receipt of data from the server, it appends the resulting data to the page. It's important to note here that the jQuery $.ajax() method defaults to requesting data, and you would have to specify if you otherwise wanted to send data.

JavaScript

fetch("/api/getWeather?zipcode=97201")

  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.text(); // Assuming the response is text
  })

  .then(result => {
    document.getElementById("weather-temp").innerHTML = `<strong>${result}</strong> degrees`;
  })

  .catch(error => {
    console.error('There was a problem with the fetch operation:', error);
  });

The JavaScript fetch() method initiates a request to the server.
The JavaScript then() method checks first to see if the request was received.
Another then() method is chained to the result of the previous, and attempts to append it to the page.
The catch() method is chained to this fetch, and will throw an error if anything goes wrong within the promise chain.

In this case it is a matter of preference, but personally I find myself more accustomed to using jQuery to handle AJAX operations. Overall these implementations are quite different in syntax, and if you choose to use jQuery for handling AJAX operations more documentation can be found at this link.

Conclusion

I hope that your understanding of jQuery has improved after reading this post! In my own experience, jQuery is a powerful tool that has made performing tasks much easier. If you do choose to learn more about jQuery, their website includes all documentation!

Recursion or Loop?

sandrockj — Tue, 16 Jul 2024 16:25:08 +0000

When should you use a recursive function instead of a loop statement? Likewise, when should you use a loop statement instead of recursion?

Sometimes I feel unsure of how to answer this question, and I find myself reminiscing of a toy problem from the past. However, before we move further I wanted to briefly go over the concept of recursion as well as the concept of looping for anyone that might be unfamiliar with either.

Recursion is the process by which a function calls itself until it satisfies a certain condition or a set of conditions. A recursive approach can be great for some problems, such as working within lists or sequences. However, a recursive approach has a greater deal of code complexity than a looping approach. As a result, the performance of our code may be affected in the long-term if we develop an overreliance.

Looping is the process by which we continuously repeat a part of code until a certain condition or a set of conditions are met. The main difference between looping and recursion is that a looping statement does not "call itself", we will explore this further when we get into our toy problem. There are quite a few ways to loop, and the methods available to you depend on the coding language. For the purposes of this post, we will discuss looping in JavaScript.

You might notice that the definitions for recursion and looping are quite similar, and that is because these two processes are doing the same thing: they are performing a task for a certain number of iterations. Now let's get into that toy problem and see how differently these approaches are structured, despite their conceptual likeness. The instructions for the toy problem that I mentioned earlier were quite similar to the following:

Write a set of code that will evaluate whether or not the provided String variable is a palindrome. Your code should determine a boolean value reflecting this condition.

It took me a while to solve the code, given some of the constraints and edge conditions. However, eventually I was able to solve this problem through the use of a recursive function.

After a while I wondered, would this be possible with a For Loop? And so, I set out to find an answer and began experimenting. What I found is that, sure enough, this can be done with a Loop statement as well.

As I reflected upon the two sets of code, I found myself somewhat frustrated because it felt like I still had not grasped why you would prefer a recursive statement over a Loop. I came across a discussion on StackExchange that shed some light on the topic. A developer by the name of Scant Roger stated the following:

"Ultimately, there's nothing recursion can compute that looping can't, but looping takes a lot more plumbing. Therefore, the one thing recursion can do that loops can't is make some tasks super easy...Often the recursive solution to a problem is prettier."

It became apparent to me that Roger was absolutely right; I found that it was much easier for me to write the recursive solution than it was to develop the same solution with a Loop statement. If it is easier to create a recursive solution, and to later redesign it as a Loop (to reduce code complexity) I think that is fine.

What are your thoughts? I am still new to coding, and I would love to hear from everyone else!

DEV Community: sandrockj

Event Horizon: A Journey

Preface

How We Chose This Project

The Challenges Our Team Faced

Navigating These Challenges with Tools and Innovation

Alpha Version

Lessons Learned

Matchmaking Prerequisites

Public Game Connections

Private Game Connections

Maintenance and Scalability

Conclusion

Elixir: Concurrency, Parallelism, & Fault-Tolerance

Why was Elixir developed?

What is Elixir used for?

What makes Elixir different?

What is "fault tolerance", and why is it important?

How can I get started with Elixir?

The Prisma ORM: A Brief Overview and Introduction

What is Prisma ORM?

Should you use Prisma?

How does Prisma ORM work?

Getting Started

Initialize an empty database in MySQL

Installing and initializing Prisma

The Prisma Schema

What is included at start?

What are models?

How can we use models?

Build the Prisma Client

Migrate our models to the database

Querying with Prisma Client

Conclusion

Sources

Basic Intro to TypeScript

Why is TypeScript useful?

JavaScript

TypeScript

What else should I know?

Interfaces & Data Structures

Do Interfaces make Classes redundant?

Conclusion

Sources

Basic Intro to Python

Examples from Python 3

Function Invocation

Variables & Data Types

Code Blocks & Indentation

Conditional Statements & Expressions

Loops

Functions

Classes

Conclusion

Intro to the Vue Framework

from the Vue website

from the Vue website

- Single-File Components (SFC) provide a modularized development model that allows different parts of an application to be developed in isolation.

- Composition API enables clean patterns for organizing, extracting, and reusing complex logic.

- Comprehensive tooling support ensures a smooth development experience as the application grows, which can translate to a more efficient development cycle.

- Lower barrier to entry and excellent documentation translates to lower onboarding/training costs for new developers.

The Basics of the Vue Framework

A simple Component example

Initializing scripts for the Component

Creating the template for the Component

Optional styling for the Component

Initializing scripts for the Component

Creating the template for the Component

1. The 'title' property is set equal to that of our referenced message in scripts.

2. When the output is hovered, our message will display!

1. On a click event the toggleRed() function determines a trueor falseboolean.

2. The state reference value isRed is assigned to this trueor falseboolean.

3. When the boolean changes our render will dynamically react to this change; this is because the template is referencing ref() the state of isRedand will change dynamically when this state value is changed.

1. On a click event the toggleColor() function determines a string value.

2. The state reference value color is reassigned to this string value.

3. Because our paragraph refers to the value of color, our paragraph styling property is reassigned the value of color.

Initializing a Component

Adding references and looping through a collection

Adding to our Component states

Adding conditional expressions to check our states

1. The `'title'` property is set equal to that of our referenced message in scripts.

1. On a click event the `toggleRed()` function determines a `true`or `false`boolean.

2. The state reference value `isRed` is assigned to this `true`or `false`boolean.

3. When the boolean changes our render will dynamically react to this change; this is because the template is referencing `ref()` the state of `isRed`and will change dynamically when this state value is changed.

1. On a click event the `toggleColor()` function determines a string value.

2. The state reference value `color` is reassigned to this string value.

3. Because our paragraph refers to the value of `color`, our paragraph styling property is reassigned the value of `color`.

1. If the value of `show` is true.

2. If the value of `list.length` is above zero (a truthy value).

2. If the list is empty (`list.length === 0`), then we want a message reflecting that.

1. The `todo` attribute stores the item (object).

2. The `key` attribute is used to create a unique 'key' for each item.