Category: Development

  • UPDATE – Space Invaders

    Quick presentational update to the Space Invaders project. Keep Shields Centered On Hit Shields will now automatically maintain a centered position when hit my an alien missile. I initially thought this was going to involve some math to determine whether the missile hit on the right or left side. I even put together a formula […]

    Read More
  • NEW PROJECT – Space Invaders

    Space Invaders is a bare-bones facsimile of the classic arcade game of the same name. Objective I wanted to take what I learned from the Asteroids Tutorial in my last project and iterate without the training wheels this time. Space Invaders has more lateral movement from the player and hostiles than in Asteroids, and has […]

    Read More
  • Space Invaders

    This is a simple Space Invaders game implemented in JavaScript using the HTML5 Canvas API. Installation Clone the repository to your local machine: https://github.com/K8215/space-invaders.git Navigate to the project directory: cd space-invaders Open index.html in your web browser to start the game. Usage The game starts automatically when you open index.html in your browser. The player […]

    Read More
  • NEW PROJECT – Asteroids

    Asteroids is a bare-bones facsimile of the classic arcade game of the same name. Objective I want to focus on more creative projects this year in order to break up the grind of work skill development. I’ve always been passionate about game design, and there are a lot of free tools to chose from. My […]

    Read More
  • Asteroids

    This is a simple Asteroids game implemented in JavaScript using the HTML5 Canvas API. Installation Clone the repository to your local machine: git clone https://github.com/yourusername/asteroids-js.git Navigate to the project directory: cd asteroids-js Open index.html in your web browser to start the game. Usage The game starts automatically when you open index.html in your browser. The […]

    Read More
  • NEW PROJECT – Catholic Liturgical Date Checker

    The Liturgical Date Checker project uses the Liturgical Calendar API to display information about Catholic Holy days. On page load it fetches info for today, tomorrow, and yesterday. It also has a search field that will return celebration info about a specific date. Objective This is just more basic API practice. I started this in […]

    Read More
  • Liturgical Date Checker

    A simple tool for checking Holy days. Uses the Liturgical Calendar API Installation Clone the repository git clone https://github.com/K8215/catholic-liturgical-date-checker.git Navigate to the project directory cd catholic-liturgical-date-checker Install dependencies npm install Usage Run the development server npm run dev Known Bugs This project does not work on the server due to content mixed content error. The […]

    Read More
  • NEW PROJECT – Logo Finder

    As part of my React API practice, I built a dirt simple Logo Finder using Clearbit’s Logo API. Simply enter a web domain, and the app will retrieve a logo image. Objective This is the third in a series of simple API fetching apps that I’ve built so far this year after the Public API’s […]

    Read More
  • Logo Finder

    App that retrieves a logo image from a web domain using the Logo API by Clearbit. Installation Clone the repository git clone https://github.com/K8215/logo-finder.git Navigate to the project directory cd logo-finder Install dependencies npm install Usage Run the development server npm run dev Updates 3/7/2024 – Added enter key functionality.

    Read More
  • NEW PROJECT – Open Library Search

    Added another API fetching project, Open Library Search. The app pings the Internet Archive‘s Open Library Search API to retrieve author, publication, purchase, and topic data for a user-provided book title. Objective My goal is to continue cranking out simple fetch projects until I can do them without relying on a crutch. I used my […]

    Read More
  • Open Library Search

    Application that takes user input and pings the Open Library Search API to return information about books. Installation Clone the repository git clone https://github.com/K8215/open-library-search.git Navigate to the project directory cd open-library-search Install dependencies npm install Usage Run the development server npm run dev Known Bugs I’m conditionally applying a link to each result depending on […]

    Read More
  • UPDATE – Public APIs List Functionality

    There are several new enhancements to the Public APIs List project. Hide CORS APIs I added a checkbox at the top that will filter out any APIs that require CORS headers in order to fetch them. It was the first additional feature that came to mind as I was evaluating the available keys in the […]

    Read More
  • UPDATE – Revised Web Cave Code Styles

    I updated the style for <code> elements in the Web Cave Theme so that they pop a bit more. Enhanced Readability It was too hard to distinguish code blocks from regular text before. They were just white text on black like the rest of the post content. Now they have the strawberry color scheme that […]

    Read More
  • NEW REACT PROJECT – Public APIs List

    I built a simple app called Public APIs List that prints a list of all the free APIs available through public-api. Objective I want to get more comfortable with the JavaScript fetch API. I needed inspiration for another project to work on and figured I’d start by looking at big lists of free APIs that […]

    Read More
  • Public APIs List

    A dead-simple React app that fetches a list of free APIs from public-api. Installation Clone the repository git clone https://github.com/K8215/publicapis-list.git Navigate to the project directory cd publicapis-list Install dependencies npm install Usage The app can be used to view a full list of available API titles in a responsive four-column layout. Updates 2/15/24 Added checkbox […]

    Read More
  • UPDATE – Web Cave Theme ADA and Style

    I decided to run through the Web Cave theme files and spruce a few things up. ADA Compliance Improvements I realized the images in the project posts and grid loop were missing alt text. They’re using WordPress’s the_post_thumbnail() function to render, which should cover the programmatic end. I just hadn’t added any alt text to […]

    Read More
  • NEW REACT PROJECT – Obligatory To-Do App

    The Obligatory To-Do App is a simple React project that I whipped up to test out Vite. Objectives The most popular React scaffold, create-react-app, is no longer being maintained, so work needed to find an alternative for spinning up smaller SEO-agnostic React builds. The to-do app is one of the most basic coding projects so […]

    Read More
  • Obligatory To-Do App

    The Obligatory To-Do App is exactly what it is. It’s a foundational project for testing new languages and frameworks. This one uses local browser storage only. Installation Run: npm install Then: npm run dev Usage Type a thing to do in the text area, then click the Add Item button to place the item in […]

    Read More
  • NEW NEXT.JS PROJECT – Game Picker Next

    I re-built my Game Picker 9000 project in Next.js 13. The new routing system is very appealing, but as of right now the deployment documentation leaves something to be desired. Will need to investigate that further if I’m going to dip into headless WordPress. Features: Split original markup into components Converted vanilla JavaScript listeners to […]

    Read More
  • Game Picker Next

    The Game Picker Next is a re-build of my original Game Picker 9000, this time using Next.js. With create-react-app being depreciated, I made the recommended switch to create-next-app, and jumped right into the new app router that was just added in Next.js 13. Usage Just like the Game Picker 9000, Game Picker Next takes in […]

    Read More
  • NEW REACT PROJECT – Responsive React Portfolio

    I re-built my Responsive Web Portfolio project in react for practice. It went pretty smoothly and provided a good opportunity to practice some essential react concepts. React Features Employed: Split project out into nested components Converted vanilla JS event listeners to state Used effect hook to listen for user scrolling action Discovered react-router-hash-link package that […]

    Read More
  • Responsive React Portfolio

    This is a re-branded copy of my Responsive Web Portfolio project built in React. I thought it would make good practice just to take a simple web page I was already familiar with and convert it. Turned out to be a perfect introductory-scale project. Routing and React Router Hash Link Even though there’s only one […]

    Read More
  • UPDATE – Simple Responsive Portfolio – Fit and Finish

    It’s been a while since I updated my personal portfolio, so I figured I’d update the project version too. The aim was to get the code cleaner and more maintainable, and to do a fresh round of auditing for google and accessibility. I also made some aesthetic changes to create some variation in the design […]

    Read More
  • NEW REACT PROJECT – Lightbox Gallery

    I added a React Lightbox Gallery to the projects archive. It is my first attempt at an independent React project. Lightbox Gallery Features Landing page with welcome text. Presentation page with image gallery and categorized navigation. Images expand to a detail view when clicked. The initial setup for this React project is minimally featured due to a […]

    Read More
  • React Lightbox Gallery

    The React Lightbox Gallery is a simple lightbox app for displaying multiple images. It’s my first foray into the React JavaScript framework. React Lightbox Gallery Concept I needed to come up with a fun PowerPoint presentation for happy hour at work but decided to build an app instead. I’d recently built a marketing tool for […]

    Read More
  • THEME UPDATE – Web Cave 1.1.0

    New year, new WordPress theme: introducing Web Cave 1.1.0. Readability The problem with having an ironic web theme that’s intentionally bad is that.. it’s bad. The original custom WordPress theme for this site sucks and I’m tired of looking at it. Web Cave 1.1.0 is a readability revision that maintains the “3edgy haxor” feel of […]

    Read More
  • BUG FIX – Game Picker Filtered Listing

    Before the holiday I noticed that the game listing in the Game Picker 9000 didn’t clear on submission. If the user performed a submission with the box unchecked, then checked the box and submitted again, the result would have both played and unplayed games in the listing. In order for the filter to work properly, […]

    Read More
  • UPDATE – CSS Spinners and Loaders

    I added some new CSS spinners and other loading effects to the CSS Animation Archive. I felt the loaders section in general could use a bit more fleshing out. Spinning loaders are an obligatory CSS effect so I had to throw a couple in there. CSS Spinners I added two spinners. The first is the […]

    Read More
  • UPDATE – Halloween CSS Effects

    Say hello to “Shiver”, a Halloween CSS effect that is definitely not ripped from a popular cult cinema streaming service. I added it to the the CSS Animation Archive project in the spirit of the season. Simple Halloween CSS Boyfriend and I have been pounding Giallo films on Shudder for the past two weeks, and […]

    Read More
  • UPDATE – Game Picker UX Enhancement

    I’ve furthered the UX enhancement to the Game Picker 9000. First I centered the loader and positioned it below the title output container. Previously it was jammed on top with no padding. If you searched more than once, the loader popped in awkwardly. The new alignment is more pleasing. I also added the player’s username […]

    Read More
  • UPDATE – Game Picker Playtime Filter

    Pursuant to my co-workers’ feedback, I added a playtime filter to the Game Picker 9000. Now the Game Picker can ignore games you’ve played already. Additionally, the Game Picker now prints the total playtime of each game in the main listing. Playtime Filter Implementation The Game Picker 9000 uses the GetOwnedGames method within the Steam […]

    Read More
  • UPDATE – Linear Gradient Animation

    I’ve added a linear gradient to the rainbow animation in the CSS Animation Archive. The previous rendition was too plain. By happenstance, I came across this video by Kevin Powell, and it inspired the revision. The gradient pattern looks swankier than the plain text color fade, but it comes with a problem. Linear Gradient Won’t […]

    Read More
  • PROJECT UPDATE – CSS Animation Archive

    The CSS Animation Archive has been updated with more css animations, a mobile fix, and a new section for animated loaders. The most notable new addition is Neon. There are a million tutorials out there for this kind of effect. In static form it’s just a bunch of layered text-shadow properties, but I spiced it […]

    Read More
  • WordPress Custom Theme

    A de-branded version of this site’s WordPress custom theme is now available on GitHub. You too can be a late 90s edgelord with the Web Cave theme! WordPress Custom Theme Features The Web Cave theme features standard post, page, and comment functionality with custom navigation. In addition, I added a projects post type that emphasizes […]

    Read More
  • CSS Animation Archive

    The CSS Animation Archive consists of CSS-only animations that I’ve used in my work. Some of them are modified from tutorials, and some are completely unique. Currently available sections include fancy looping effects and some simple rollovers. I’ve applied them to buttons for demonstration purposes, but they can be transferred to any kind of element. […]

    Read More
  • Game Picker 9000

    The Game Picker 9000 is a Node.js app with Express that queries the Steam Web API. It was designed to solve two problems: It’s hard to pick a new game to play when your backlog is over 100 games deep. I don’t get to do a lot of server-side fetching and routing in my day […]

    Read More