Welcome to Code Gateway
Welcome to the Code Gateway. Here I like to go into the details about useful things I've picked up while programming sites with Javascript, HTML, SCSS, node, react, and more.
Snake game with only HTML, CSS, and JavaScript
This Snake game, built with HTML, CSS, and JavaScript, brings the classic arcade experience to the web. Players guide a lime-green snake across a 20x20 grid, gobbling up red food to grow longer and boost their score, while the pace quickens with each bite. A collision with the walls or the snake’s own body triggers an instant restart, keeping the challenge seamless and addictive in a sleek, retro-styled interface.
Creating a simple game of Tetris
Experience the classic puzzle game Tetris, brought to life using modern web technologies! Built with HTML, CSS, and JavaScript, this version recreates the iconic gameplay where players stack falling tetrominoes—L, Z, T, O, and I shapes—to clear rows and rack up points. The HTML structure lays out a simple grid and score display, styled with CSS to deliver a clean, retro-inspired look with a 10x20 playfield of colorful blocks. JavaScript powers the game logic, handling tetromino movement, rotation, collision detection, and row clearing, all triggered by arrow key inputs. Perfect for learning web development, this project combines DOM manipulation, event handling, and CSS styling to craft an addictive, browser-based challenge!
Modularized Javascript with ES6 Classes
Here we go into one of my favorite design patterns for developing modular vanilla Javascript classes. No frameworks or anything, and all logic and functionality is encapsulated to a matching DOM element.
Grid Layouts with SCSS and Flexbox
Here we take a look at a handy little mixin written in SCSS that allows us to construct robust grid layouts using primarily flexbox.
Swipeable Carousel with Vanilla Javascript
We can create a swipeable carousel using only basic HTML, SCSS, and minimal vanilla Javascript.
Querying Shopify Storefront Data with the JavaScript Buy SDK
Say you want to display information about your products on Shopify for some web application or website. You can leverage the Shopify storefront buy SDK to pull in that data to render it. Here we look at how exactly to structure the queries in the SDK to get back certain pieces of data such as images, variants, and pricing.
Streamline Your Modals
Here we look at making simple modals or popup messages that are responsive while only using a little bit of HTML, CSS, and Javascript. We can add a little animation as well on its entry and exit.
Creating a Reusable Media Picker in Wordpress
When developing with WordPress Gutenberg Blocks, you'll eventually run into a scenario when you will need to upload media to the site from your custom block. The following is a little snippet that I've used through development to give the user to upload media, and then render out that image.
Render Code Snippets with Gatsbyjs and Contentful
In this post, I'll go into how to pull a code snippet from Contentful and render it within GatsbyJS with syntax highlighting. No need for any apps or UI extensions!