Forem: Clifton Beale

Building Games with JavaScript and PostreSQL

Clifton Beale — Mon, 03 Feb 2025 01:52:44 +0000

Check out the online board game:

Clif's Boggle

Being a software developer is a very rewarding profession. I love to build cool things, and the software that I build in my free time is almost exclusively a solution to a problem that I am facing. My family loves playing Boggle, a popular word game, when we are all together. Now that my brothers and I have all moved out of our parent's house, we seldom get to enjoy family game nights like we once did. In an effort to solve this issue, I decided to recreate the beloved Boggle but open-source and free!

Game Breakdown

Just like starting out any other project, of course I took to the whiteboard (Excalidraw). Laying out the blueprints for the game is an important first step when building.

When outlining the project, I came up with a couple of different pages to tie the whole game together.

Initial landing page
/lobbies page
/lobby_code
/[lobby_code]/[player_name]

The way that the game works is quite simple: the player will initially land on the home page where they will be asked to create a game or join a lobby. Players can click a button to navigate to the /lobbies page where they can view any publicly open lobbies (Lobbies are set as public or private upon creation).

I needed to track a couple of persistent variables for each lobby, such as: - Game state (active/inactive): Boolean

Board configuration (letter arrangement): String[]
Players within a lobby: String[]
Lobby status (public or private): Boolean

The game state is changed when the lobby's game starts or ends as you would imagine. The board configuration manages how the letters are composed on the board so that the letters/order are persistent across clients (generated on each game start). When a player joins a lobby they will be prompted with an input for a name. Their input is sent to the boggle_game table row that matches the lobby code that the player is attempting to join. Players creating a new lobby are prompted with the same + an option to make the lobby public or private, and a random lobby code is generated on creation of the new lobby.

Incorporating Players Without Authentication

Typically on an application that requires multiplayer connectivity, developers would opt for an authentication solution to save player data to an account. After careful consideration, I decided that I wanted the game to be as simple as possible without needing account creation. This decision has it's pitfalls for sure, but for the nature of what I was working to achieve it gets the job done.

Next.js happens to be my favorite framework to build software on the web, mostly because I find the developer experience to be fantastic. Next makes it simple to create dynamic routes for web applications, which is how I managed to separate game clients. Upon creating/joining a lobby and choosing a display name for the game, players are directed to the dynamic slug /[lobby_code]/[player_name] which will prime the board game to the respective client.

A boggle_player table is created to track player stats like word count and score after choosing a display name. This is necessary for the logic to differentiate between game clients and track player respective data for the game over screen.

Real Time Updates

This is all very straightforward and seems simple enough to create, but I run into a major problem when thinking about how to get all of this to update on each client as needed so that changes are rendered to all players, not just the client that directs the change.

I have used Supabase as my go-to option for setting up a database. The software is open source if you wanted to operate it in a closed environment, but for the sake of what I am doing I opted to use their hobby(free) tier as it is very generous. Supabase has great documentation to get started making a piece of CRUD.

Luckily after a quick google search, I found out that Supabase offers the functionality of real-time updates within their free plan! This seemed very generous to me, and after viewing the docs I was shocked to see how easy it looked to incorporate.

const channels = supabase.channel('custom-all-channel')
  .on(
    'postgres_changes',
    { event: '*', schema: 'public', table: 'boggle_game' },
    (payload) => {
      console.log('Change received!', payload)
    }
  )
  .subscribe()

The code above creates a channel in which Supabase will listen to any changes from the table: "boggle_game".

The property, "event:" determines what the channel listens for (Insert, Update, Delete, or all - *). This makes it super simple to determine what to listen for and where to listen for it.
The payload contains the new and old values from before/after the change to the DB table

From here you can either extract the change from the payload or run a function to fetch the updated data from the table. Now, I incorporated a timer to the board game so that when the timer is done, an endGame() function is run that updates the game_status in the DB table which triggers the real-time update. With this done, the game was multiplayer ready!

Under the hood

When building real-time applications, there are a few ways to keep clients updated when data changes. The most common approaches are database polling and WebSockets, but they work very differently.

Database Polling
Polling is a straightforward but inefficient way to check for updates. The client repeatedly sends requests to the server at fixed intervals (e.g., every second) to check if the data has changed. While this works, it comes with drawbacks:

Unnecessary load– The server handles requests even when no data has changed.
Laggy updates – The UI only refreshes when the next request is made, making real-time interactions feel slow.
Scalability issues – More users mean more requests, which can quickly become costly and inefficient.

Web Sockets & Supabase’s Real-Time Setup
Instead of polling, a better approach is Web Sockets, which provide a persistent, two-way communication channel between the client and server. Once a Web Socket connection is established, the server can push updates to clients instantly, without waiting for them to ask.

PostgreSQL, the database behind Supabase, doesn’t have native Web Socket support. However, Supabase bridges this gap using Replication and real time engine:

PostgreSQL’s Logical Replication – Whenever a change happens in a table (insert, update, delete), PostgreSQL emits a “change event.”
Supabase Real time – This service listens to PostgreSQL’s replication stream and forwards those events to an internal Web Socket server.
Web Socket Communication – Any client subscribed to real-time updates receives the changes immediately as soon as they happen in the database.

With this setup, my Boggle game doesn’t need to spam the server with requests. Instead, each client opens a Web Socket connection and gets notified only when something actually changes—whether a player joins, a word is submitted, or the game ends. This makes the game feel instant while keeping performance smooth, even with multiple players in a lobby.

Conclusion

Overall, I learned a lot from this project which is the underlying goal of any of my hobby projects. The end result is an online replica of a popular word game that my family loves playing. My family is now able to play any time and any place, allowing us to keep up with our traditions from anywhere. I learned what web sockets are, how web socket connections differ from other solutions like database polling, and how to implement such a solution with the help of Supabase. This project was really rewarding to work on, and I look forward to seeing what else I can build with web sockets in the future.

Check out the game below:
Clif's Boggle

While the game does support multiplayer lobbies, you can also enjoy playing by yourself to see how many words you can get in 3 minutes. Enjoy :)

Chrome Extensions

Clifton Beale — Tue, 05 Mar 2024 21:09:22 +0000

I took a day off of work...

I needed a personal day from my 9 to 5 today, and so I slept in a little later. I had the urge to learn something new, specifically something that has been on my mind for quite a while - I have just never been able to find the time. Luckily enough, I had the time to learn how to create my own Google Chrome extension.

Google Chrome is one of the most popular browsers, hitting numbers of 3.2 billion users in December of 2023 (Source: Demand Sage). I, for one, use Chrome each day as my browser of choice. I have found that the extensions offered by Chrome are quite helpful tools day in and day out, but I had never created my own.

Lately, I have been wondering what the process to create a Chrome extension was. Given that I had time today, I watched a quick YouTube video; I did not realize how easy it truly was to create your own extension.

Check out the YouTube Video I watched

The only thing different than just creating a static site with HTML/CSS/JavaScript was that I had to set up a manifest.json file to configure my extension settings, which looked like this:

As you can see, it is not a lot of work setting up this manifest.json. You just need to fill in a couple of the settings for the extension, like name and description. There are optional properties you can add, like "default_icon": to the action property.. This would replace the extension icon to the icon of your choice. More on the extension settings here in the tutorial: Chrome Extensions

I decided to make an extension that would interact with me on a daily basis.. What do I do on a daily basis that could be enhanced, though? Well, I decided to create a dynamic job search extension. This extension pulls job search results directly from LinkedIn (in real time!) based on a pre determined search query that I created for myself. Check out the public GitHub Repository for a look at the code that went into the project.

I am looking at new job postings on LinkedIn each day, and this extension that I created (in just about an hour) will streamline personal job search results based off my preferences each day. I pinned my extension for even more convenience, so now with just one click I have custom-queried job results in real time. I am all about creating solutions to real world scenarios/issues, and this tool is guaranteed to save me time in my future job searching.

Check out the README.md in the GitHub Repo to clone the repo and set it up yourself. I used RapidAPI to find the API for LinkedIn, and then set my custom search preferences from there. Otherwise, you can directly update the search parameters in the API call from the script.js file.

All in all, this side project only took around an hour to complete and was super cool to learn. Not only that, but I also have the added reward of saving time down the road - that's what coding is all about to me.

Resources and Links

GitHub Repo
RapidAPI - List of free APIs
Demand Sage - Reference to fact about Google Chrome users
YouTube Tutorial
Chrome Extension Tutorial

Journey to Freelancing

Clifton Beale — Tue, 20 Feb 2024 17:43:56 +0000

Check out my latest website:

Clif Codes

Programming, not just web development, has been a passion of mine since I was a child. I have been coding since my early teen years, however I have shifted my main focus since separating from the U.S. military. My goal has been to become a web developer, which I have done an amazing job at, personally speaking.

I received some advice from a mentor recently that I needed to stand out from the other applicants in my job search in order to get anywhere. I am all for a little bit of competition amongst job applicants, but in the field of web development right now - it's absurd (if you know you know). This is when I felt the need for a shift. I love what I do, however I do not love how competitive the nature of finding a job (doing what I love) has become. I feel that there is an unnecessary anxiety and hopelessness brought about with the overall competitiveness of the job market right now. With that being said, I figured it was time to take matters into my own hands.

After completing several of my own projects, releasing a portfolio, and then creating a large scale, full-stack application ... I was still no closer to finding work than I was before. The difference, however, is that I am now stacked with all of these amazing skills that I have picked up and have been dying to show off. I am so excited to engage with clients, give consults, and be the boss of my own work environment. I have never taken on a challenge like this, and I am excited to see where this road leads me and my work in the future.

New webiste

I created a fresh new landing page for my services as a freelance web developer. Seeing as this is a sort of fresh start for my career, I wanted to start off on a new foot.

I leveraged Tailwind CSS to create my static app which was something new for me.

The app offers an outlet to see my schedule/availability, find my contact links quickly and efficiently, schedule consults with me, and see the core services that I will be offering. I cannot list every possible service that I can perform, as my skills over the years have grown vast in the world of web development - which is why there is the 1-off solution service listed as well.

After months of grueling job searching without any success, I am nervous and excited to be able to take control of my destiny. I believe that I will be successful in this endeavor as I am a self-starter; I have gotten this far into my journey on my own accord and I believe I have done well thus far. Be sure to check out my new website and leave my some anonymous feedback on the contact page :)

Debounce Solution

Clifton Beale — Mon, 05 Feb 2024 22:41:43 +0000

Today, data is issued and received so rapidly that solutions are needed to keep up with demand. When users are engaging with web applications, many times the content that they are engaging with is dynamic in nature. Essentially, this just means that the content that the user is receiving can be manipulated and served as situations unfold based on user input.

For example, imagine you have a search bar function on a web application. Popularly, many web applications have their search bar show results as the user is typing their input, rather than waiting for a 'submit' button. A common problem that arises from this, though, is that users are sending requests to the server with each keystroke (as the state of the search input updates). Naturally, it is not necessary for the user to have results returned after each keystroke - which is where debouncing comes into play.

What is debouncing?

Debouncing a function essentially is ensuring that the function in question is not getting called too hastily.

I remember first learning about debouncing in a front-end masters course taught by Jem Young. It was one of the solutions to an interview question simulation as part of the online course. I remember at the time not really being able to understand the use case in full; just hearing about things doesn't always give me the full understanding, often times I need to build with it myself.

At the time, all I knew was how to replicate the code for implementing debouncing as a solution and that it was used for the auto-suggesting text feature for the iPhone. After learning deeper, I have found that debouncing is a solution to a great number of different scenarios, many of which protect resource usage.

Building a Search Bar

As my previous blog posts have foretold, I am still going through the next.js /learn course and building out the dynamic user dashboard web app. In chapter 11, I was tasked with implementing a functional search bar for the customer invoices page.

Without Debounce

Going off the tutorial provided by Next.js, I was instructed to handle the search bar as above provided so that the handleSearch function could be passed with an event handler to the input element (search bar). This way, with the hooks like useSearchParams and usePathName, I am able to update the URL in real time based off of the input in the search bar.

The above method is not using debouncing, and would put the database at risk for many unnecessary search attempts once the users started adding up. This is because with each keystroke, the server would be reloading the search with the updated input field (because I am calling the function with an onChange event listener from the input element).

With Debounce

npm i use-debounce

After installing the use-debounce package and importing useDebouncedCallback in the search bar component, you can simply change the function code to above and the library function will automatically debounce your function for you (you can change the 300 number to however many milliseconds you would like the debounce to take).

With this method, keep in mind it is a downloadable solution. If you wanted to create your own solution and implement it, you might do something like this:

Now that debouncing has been added as a solution, users can get live results as they type in the search bar, but only after a brief pause. This way, resources from the database are saved once there are more users and the site is more performant in this area.

I have never before done a search bar this way, and am once again learning something new from this Next.js/learn course. With Next Meal, I had used a 'submit' button once the user had finished what they were typing to find their search. This was an attempt to avoid problems that come from not debouncing (as it didn't occur to me to use it as a solution here). In the near future, I will be implementing debouncing into Next Meal's search bar as well since it is so easy.

Credits:

Code Snippet Clips: Carbon
Learn Next.js 14: Learn Next.js
Frontend Masters - Jem Young: Front-end Masters - Jem Young

Loading.... Suspense

Clifton Beale — Thu, 01 Feb 2024 22:24:27 +0000

If you use React, you may have heard of 'Suspense' or even used it before. What exactly is it used for, though?

An element to a lot of popular dynamic web applications like Instagram, X - formerly Twitter, Facebook, and etc. is that while a component to the app is loading there is typically a skeleton UI that will render in its place.

One of the main benefits to using React is the ability to build with components. Especially with a dynamic web app, a component fetching some data can slow down a chunk of the web app. React created Suspense boundaries for these components, in order to create a fallback UI for the web app to display until all of the nodes have finished rendering for the dynamic element. While the dynamic elements are fetching data, a loading UI will be shown alongside the static UI on the web app. This also helps with keeping navigation interruptible, meaning one does not need to wait for the content of the route to fully load before navigating to another route.

Next.js v14 introduces a new way to implement this same Suspense, with partial pre rendering. For the dynamic web applications, the static components of will be served rapidly and the asynchronous content is served in parallel as it is fetched. The Next team believes that this method will be the future default rendering model of web applications. (You can check it out on chapter 10 of the learn Next.js 14 course)

It helped me with Next Meal

I found out about Suspense while creating Next Meal, as the performance of my application was seemingly degraded due to the dynamic nature. I used Suspense boundaries as a solution to implement loading UI to the dynamic elements of the dashboard - this way users know that the screen is loading, not frozen.

I even got a little creative with it, since I know that some users don't have blazing internet speeds and might be waiting for the data fetches. I created an array of dad jokes (all food centric) which get selected at random on each instance of a loading element.

Learn Next.js 14

Clifton Beale — Mon, 22 Jan 2024 22:08:16 +0000

Vercel has been up to some big things lately

When I started using Next.js in January of 2023, I was quickly thankful for the upgrade in developer experience. With the intro of version 13 in October, 2022, came the /app layout for the popular web framework. While the new layouts, page routing, and React Server Components were very useful, there was a bit of a learning curve.

The documentation was rather poor for the early months of version 13, and there were even some issues that needed work - it was an interesting challenge all the more.

Now

In my last post I talk a bit about my latest break, and how it helped me. I have decided to jump back into learning the latest updates of Next, with their release of Next.js Version 14.

What I learned so far

Next.js has a site - Learn Next.js 14 where they have some wonderful documentation in regards to the new update (Next.js Version 14 - released Oct 26, 2023).

Within the material, you will learn how to set up a fully functioning dynamic web application with a back end using Next.js v14 - all while learning about the new updates and how to add them. Not only is this good for new users, but also good for users that just would like to stay current with the latest updates in their tech stack.

Currently, I have seeded my postgres SQL database (offered with free tier version from Vercel) with my dummy info for customers in accordance with the course instructions, and I am working now on adding in dynamic information to the dashboard.

It is very pleasing when there is clear, guided documentation to walk you through the updates to a major framework like Next, especially when you learn better visually - like me. The team at Next.js really did an amazing job being very clear and helpful within the documentation, while even providing troubleshooting tips for some sections. I was honestly blown away.

This little course, completely free, is helping me come back from my break and re familiarize myself with a lot of the great benefits of Next.js, while also helping to really cement the new stuff - like how they have added font optimization by statically pre-rendering additional fonts at build time (the same way it does with the images).

Not to mention that it is a cool little project that can be hosted on your portfolio (or wherever you showcase your work). I personally am hosting my repo on my GitHub, and have started creating branches for each chapter so I can keep track of the curriculum. I am looking forward to continuing to building more this year with Next.js v14.

Burnout Post / Happy New Years

Clifton Beale — Sun, 14 Jan 2024 20:47:43 +0000

I must make that commit; I must fix that error tonight; I must finish this project; I must keep my GitHub chart green

Take a break

I did.

Nearing the end of 2024, I postponed working on my latest project (Next Meal).

Next Meal had gotten to a place where I could be proud of what I had learned and accomplished. After more than 6 months on the job search, several months unemployed working on Next Meal and other projects - I had to go back to work.

Breaks are good for you

During my break, I took the opportunity to reflect on my initial motivation for becoming a web developer as well as the significant progress I've made along the way.

When I caught a mental glimpse at how much I had learned from the beginning of my journey to where I am now, I was blown away. I am so happy with where my work is at as a web developer now that I am ready to commit more publicly. I am looking to work with opensource projects or groups of individuals with a common interest.

Before my break, I was starting to get very tired of working towards seemingly nothing. I was tired of not hearing any positive news with my job search, and I was losing hope.

Flash forward to a couple of months later, and my head is back in the game. I have been working a different job while taking a break from web development, so my mind is still sharp and ready.

I took from the break, most importantly, that I need time to reflect on my achievements and successes, especially when I am experiencing failure. My work is important, but it is important that I am well enough to continue caring for my work. It is important, for me, that I recognize my progress and even celebrate it - for it is a step in the journey towards the end goal.

Going back to work

I started working as a delivery driver for Amazon once again, and took a break from my studies at the end of October. Here and there, I would sit at my computer and change a couple of things on my portfolio to keep it up to date, but other than that I was taking a strategic mental pause.

Here we are in 2024, a new year with amazing possibilities ahead of each of us. I am back to claim what I have been working so hard for in these previous years.

My goals for 2024

Meet new people
Find a new mentor (maybe?)
Explore new and updated technologies
Be the best father I can be to my new son
Find a job that pushes me to learn new things

My plans for 2024

Continue improving my work on Next Meal
Continue keeping my portfolio up to date
Be more active on LinkedIn
Interact with groups of individuals on open sourced projects
Continue my job search for a position as a web developer

I hope that everyone had wonderful holidays in 2023, and an amazing new year so far - I know I have. I am so excited for what this year has to bring, yet.

If you have not seen my work check, be sure to check out

Fine-Tuning Vercel AI SDK

Clifton Beale — Wed, 27 Sep 2023 21:50:09 +0000

Creating custom responses based on user data:

Jump to section:

Overview
What is the purpose?
Implementation and Troubleshooting
Conclusion
Resources

Overview

I recently unveiled a sneak peak into my work over the last few months on 'Next-Meal'. One of the major features of the web app is the Sous-chef which leverages Vercel's AI SDK to incorporate a live chat bot to assist users in their search for their next meal.

At first, the functionality remained pretty basic, as I simply followed Vercel's documentation to implement it which was pretty straightforward. (See my blog post on adding Vercel's AI SDK here).

After adding some cool features to the web app like user preferences (allowing users to filter through meals based on their account's preferences), I figured it was time to take the AI a step further. With a desire to sharpen my skills involving AI, I embarked on the task of implementing the user preferences filtering into the chat bot as well.

This proved to be difficult, as once again I was navigating unfamiliar territory that has not been charted by many (not much documentation outside of Vercel for issues/implementation).

What is the purpose?

While it is true that the AI on its own is a fascinating tool, for the sake of my use-case it could have proven dangerous. Once users set their preference on Next-Meal, most user's would assume that all of the app's functionality would automatically take their preferences into consideration. With this not being the case (out of the box), users could potentially consume food from the Sous-chef's suggestions that they may be allergic too or have an intolerance for unknowingly.

My goal for Next-Meal, from the beginning, has been to give the users the most seamless experience when searching for a meal or recipe. With this extra step involved with the Sous-chef, users can be at ease knowing that their preferences are being accounted for in all areas of the web app.

Implementation and Troubleshooting

Without a doubt, I ran into many different challenges during my attempts to implement this functionality. While I did persevere and eventually find a viable solution, I figured I would share my steps and some of my hardships that I faced so that maybe someone else won't run into the same issues.

First off, I needed to figure out how to get the chatbot to understand each user's preferences. In order to achieve this, I gathered the preference information on the client, and sent it with the message to the chat API route on the server.

Above is the function that retrieves the user preference values for my web app.
For reference, the user profile is an array that contains two objects, preferences and favorites. For this case, I am iterating through the key value pairs on the userPreferences object and only returning the key for the values that are truthy booleans (meaning that these preferences are set by the user already).

This part definitely took some trial and error, and I am ashamed to admit I spent a great deal of time treating the preferences object as an array and trying to leverage built in JS array methods before realizing my error.

Well, now I have the preferences on the client, but how do I get them over to the server when I am using a built in custom hook to send my information over to the server?

After doing some digging on the Vercel docs for the best method to handle this issue, I came across this documentation for their useChat hook (shoutout Vercel for amazing docs!). After realizing you can pass an extra body object to the hook to be accessed by the server, I was back in the ball game. I quickly altered my code:

Now I was checking to make sure that there was an active session (because the Sous-chef can be used by users that have not created an account) and also checking to make sure that there were preferences to send from the user, and if not then sending nothing (obviously) - incase the users had not yet set preferences.

I will also admit from here, I was a bit unsure how to leverage this body property as I was getting some weird errors trying to access the req.body on the server side.

Once I realized my error, I felt stupid... The body off the request was the body of the useChat hook, which also encompassed other values, such as the message from the hook. Once I realized this much, I was able to simple destructure the preferences from the req.json, right alongside the messages.

Finally, things are starting to come together. Now I just need to somehow tell Chat-GPT about these preferences that I now have on the server. Vercel's AI SDK offers a very easy solution to customize your prompts, which I had already tinkered with previously. Once I had the preferences on the server, I simply adjusted my code to let the system know about the preferences, and voila!

Conclusion

I now, after several days of troubleshooting and reading through documentation (and also consulting with Chat-GPT), had finished.

The functionality is all in tact, and users can now leverage their preferences through the Sous-chef.

Above is a screenshot of the Sous-chef in action. I personally don't care for dairy or pork, so I have marked those two ingredients in my preferences to avoid. As you can see, the chatbot provides accurate suggestions without needing to be reminded of the preferences manually. There was some tinkering with the prompts, of course, before the Sous-chef was able to achieve this behavior. Prompt engineering for AI is very important, as it only knows information it is given. When working towards a solution such as this, the model is not trained on the user preferences that I was seeking it to have, so I had to get the prompt just right.

Overall, this challenge was very rewarding to overcome. Now, I have a better understanding of the fundamentals of the AI model, as well as how to better manipulate the data given and received from Vercel's AI SDK.

Resources

Next Meal

Clifton Beale — Fri, 15 Sep 2023 20:29:02 +0000

Find your next meal easier than ever

I have been rather dormant with my blog posts lately, admittedly. I have not quit writing, but rather put my writings on pause for a moment. I was focusing my free time towards building my largest project that I have created yet.

With little to no familiarity with a lot of the tools and technologies that I was choosing to leverage, I was heading towards mostly uncharted territory for me. What's more, I elected to complete this project with out leveraging tutorials. However, I did use the docs, Stack Overflow, and even sometimes Chat-GPT for some assistance.

What is Next Meal

Next Meal was designed based off of one of my initial projects as a web developer: Clif's Catalog

Next Meal blows its predecessor out of the water, however, offering many more features and benefits to its use. Some of the features of Next Meal include (but are not limited to):

Sous-chef: Vercel AI SDK, essentially leveraging an API to Chat- GPT. Users can gather meal suggestions, instructions, information, and more from the live chat bot.
Favorites: Users can select their favorite meals to save to their dashboard.
Search Bar: Users can search through our vast catalog that is brought to us by Spoonacular API.

Since creating Clif's Catalog, I have learned a lot about web development and different frameworks and libraries (specifically Next.js and TypeScript while building my portfolio). I decided to put my newfound knowledge to the test with this web app, and even push my limits a bit.

The technologies and tools that I leveraged for this project are as follows:

React/Next.js/TypeScript
Next-Auth for authentication
Prisma & Supabase for backend (User database)
Spoonacular (API endpoints)

There were many challenges faced throughout the build process of Next Meal, but what web developer doesn't like a good challenge (am I right)? I will be writing more in depth about individual issues faced, how I overcame them, and how I built out the app in further blog posts.

For now, Next Meal is hosted on a Vercel Deployment, and is available to anyone.

Please Note: Next Meal is not Production ready yet, and is currently in BETA stage. There are active issues and updates being posted daily on the GitHub repository; please feel free to follow along, the link is below.

GitHub Repository
UX Flow Preview Video - Youtube
Next Meal - Direct Site Link

Vercel AI SDK Walkthrough

Clifton Beale — Wed, 26 Jul 2023 21:58:51 +0000

Implementing Vercel's AI SDK as a component

Requirements:

Knowledge of Next.js v13+ (App directory)
React/TypeScript (preferred)
Intermediate level JavaScript knowledge

Documentation can be found here

In this video, I showcase how to implement Vercel's AI SDK into your web app as a component. In order to achieve this with Vercel's SDK, you will need to use Next.js.

I bootstrapped a project,

but you can also add the dependencies manually if you have an existing project that is not already using Next.js.

Getting Started

Once you have your project layout, install the dependency necessary to implement the SDK

Then, create your server side API @ root/api/chat/route.ts (or route.js if you are not leveraging TypeScript)

Inside this component, you will find all the code necessary for your server side API call

Excellent! Now we just need to create the component to showcase the new LLM on our site.

At the root level of your layout, or in a components directory or wherever, you will create a component, Chat.tsx, which will handle your client side information.

Implement your client sided functionality, and there you have it. You have created a component that holds jsx for a form. Inside the form, users can type out an input, and click send. Submitting this input to the API is done through the useChat hook that is imported and provided to us.

Essentially, we are just adding an interface to which we can string responses from OpenAI's Chat-GPT via an API call.

Keep in mind, this does cost money, which is why I leverage the 3.5 turbo model. User input is transferred to tokens and charged to your account via your apiKey that is added in the server side API.

Another FYI
Add your .env.local file to your .gitignore file if you are leveraging a GitHub repository for your project. This will keep you safe from potential malicious attacks on your apiKey, resulting in charges to your credit card.

On Production, you will need to add your environment variables to whatever service you are deploying with. Vercel makes it exceptionally easy to deploy, which you can check out here.

Advancements In Tech

Clifton Beale — Thu, 06 Jul 2023 21:04:27 +0000

Exploring the Potential:

Discussing the impact and future of Generative Artificial Intelligence

Jump to section:

Blast Off - Birth of generative AI
Generative AI Ethics - What if...?
Job Security - Are we in danger of losing jobs?
Vercel AI SDK

I am sure that we have all heard some of the buzz around the large language models (LLM) by now. What exactly do these advancements mean for the future of our technology, though?

Some speculate that jobs will be threatened by the advancement of generative AI, and believe that it is not in our best interest moving forward. Others are thrilled and inspired by the winds of change, and are helping to propel towards uncharted territory in the tech world.

Blast Off - Birth of generative AI

While it has been studied since around 2014, generative AI really became prevalent in the tech community around late 2022. By early 2023, a lot of people had heard about it, and even started using models like Chat-GPT to explore the capabilities of a LLM.

Speaking of, OpenAI launched Chat-GPT November 30, 2022. Since then, there have been major improvements built into the LLMs, specifically how much data they use to generate a response.

Rivaling companies have also started creating their own versions of the LLMs within their products, giving users a wider range of options to choose from.

Microsoft (Bing): Implemented their own version of the LLM licensed through OpenAI, and has seen a reported 16% increase in traffic since. See reference
Google (Bard): Google hopped onto the generative AI bandwagon as well, creating their own version, Bard. Google's Bard works off of different data sets than OpenAI's Chat-GPT and has been listed as a great alternative

Of course, there are many other companies that have created their own adaptations, which you can view here.

Generative AI Ethics

With new technology comes the responsibility of making sure that we are creating/using it ethically.

With new generative AI models like Chat-GPT becoming ever present, it is becoming easier to handle some tasks. For example, I could have Chat-GPT write this whole blog post for me if I wanted to. For me, that defeats the whole purpose of posting my blogs; for others, it may be a valid tool to assist in the writing process.

The inherent danger comes when the AI is utilizing data that it is getting from all over, and spitting it back out to the user, who then is presenting the data as their own. In the image above, you can see I ask Chat-GPT for a sub heading to my blog post. Whenever I use something like that from Chat-GPT, I like to use it as a baseline suggestion, and alter it to my own. Read the conversation between Chat-GPT and myself, and you can understand some of the dangers that lie there.

There have been lawsuits already against big companies (who's names I will not reveal) for copyright infringement as the AI is trained on information that is from all over, some even copyrighted.

Personally, I have used Chat-GPT to help me out with my learning journey as it can be a great tool. Chat-GPT can easily help you identify that pesky little spelling error that has been holding you up for hours. It can also, however, become a crutch. Is it ethically correct to call yourself a coder when you can only rely on tools like Chat-GPT?

While tools will continue to be built upon, innovated, and invented, it is important to keep in mind that they are just that: tools. We, as users, need to leverage tools ethically and responsibly.

Job Security - Are we in danger of losing jobs?

The job market in the tech world is like a revolving door. Each day, there may be a job title that did not previously exist. On the other hand, there are going to be jobs that are no longer needed as technology evolves.

I believe this to be the case with generative AI. No doubt, I believe that some jobs will become unnecessary, as they will be able to be done by AI or bots in the future (this has already started years back with AI machines in factories). With that being said, I also believe that this will create more jobs than it will destroy.

With so many companies competing to release the next cutting-edge AI tech, more and more positions will be needed to fill these roles. There will always need to be people updating/innovating on the technology that they are creating, which is why I believe that jobs are safe.

In tech, I do think it is a good idea to stay current with the times. While I did say I believe that jobs are safe, I meant that as in the grand scheme of things. Your job, however may be affected down the road. Stay up to date on updates and releases, and don't get left behind in yesterday's world.

Vercel AI SDK

Be sure to check out Vercel's documentation on their AI SDK here

While several companies have been achieving great feats with AI, I wanted to specifically touch on Vercel's latest updates in AI.

Vercel has released an open sourced library for their AI SDK for developers. This SDK is easy to use, with just a few lines of code you are up and running with an interactive LLM on your web app. The SDK leverages API requests to the LLM of your choice. Several different templates of LLM have been implemented by Vercel, including Open AI, Hugging Face, and LangChain.

Vercel has even included React and Svelte hooks within their library to ensure a clean user experience. These hooks allow the data received from the API request to be rendered smoothly as needed to give a better user experience.

Example of useChat() hook from Vercel AI SDK docs

Naturally, being curious as I am, I attempted to implement this as a feature to my latest project. Surely enough, I was blown away by the overall simplicity of incorporating it. I will create another blog post soon explaining how I incorporated it into my project.

I am very excited to see where this technology is going to go, personally. With less than a year's time, we have already made monumental advancements; I feel the best is yet to come. I will be staying tuned to advancements and updates as they come flying out from all corners, and yes, I will be writing about them! Stay tuned.

Snakes in the Grass

Clifton Beale — Fri, 30 Jun 2023 22:53:17 +0000

Staying safe throughout your job hunt

Recently, I have embarked on a full time job hunt, in search of an opportunity as a web developer. Even though times are tough right now, there are still good jobs out there worth applying to. While I have been applying to a number of different jobs, I have recently come across what I believe to be a scammer.

With technology where it is today, and especially after the pandemic with remote jobs rising, phishing for someone to scam through job boards has become prevalent (accord to The Federal Trade Commission's Consumer Advice).

Real World Example

I received an email recently from someone, who's name I will reveal (fake or not). The email, while it did not sound 100% legit, piqued my interest as I am intently looking for a job. I emailed back, and received a questionnaire to fill out in return.

This questionnaire ran for about 20 questions long, and asked questions from entry level software engineer questions to personal questions about my life and experiences. I believed that this was a legit pre screening document, and that I would fill it out and turn it in to them.

After doing some digging, I saw that the address provided by the recruiter for the business was not even owned by that business. It was a random building owned by another business in the middle of Texas. Furthermore, the company had little to no digital footprint, and from there things started to look very shady. I looked up the recruiter on LinkedIn, and my search result revealed a fake persona.

I am anxious to see what they say next, as I did respond with answering the questionnaire (most of the info could have been found on my LinkedIn) but I assume they will ask for more sensitive information down the road.

With the world of technology as it is today, don't fall victim to those that want to prey on you. Protect yourself, and don't ignore the signs. Stay vigilant, and on the hunt. Good luck on your search for a job!

Forem: Clifton Beale

Building Games with JavaScript and PostreSQL

Table of Contents:

Game Breakdown

Incorporating Players Without Authentication

Real Time Updates

Under the hood

Conclusion

Chrome Extensions

I took a day off of work...

Resources and Links

Journey to Freelancing

Check out my latest website:

Clif Codes

New webiste

Debounce Solution

What is debouncing?

Building a Search Bar

Credits:

Loading.... Suspense

It helped me with Next Meal

Check out my GitHub:

Check out Next Meal:

Resources for post:

Learn Next.js 14

Vercel has been up to some big things lately

What I learned so far

Burnout Post / Happy New Years

Take a break

Breaks are good for you

Going back to work

My goals for 2024

My plans for 2024

Fine-Tuning Vercel AI SDK

Creating custom responses based on user data:

Overview

What is the purpose?

Implementation and Troubleshooting

Conclusion

Resources

Next Meal

Find your next meal easier than ever

What is Next Meal

Vercel AI SDK Walkthrough

Implementing Vercel's AI SDK as a component

Getting Started

Advancements In Tech

Exploring the Potential:

Discussing the impact and future of Generative Artificial Intelligence

Blast Off - Birth of generative AI

Generative AI Ethics

Job Security - Are we in danger of losing jobs?

Vercel AI SDK

Snakes in the Grass

Staying safe throughout your job hunt

Real World Example