Fixing MDX  Linting Errors in Next.js using eslint-plugin-mdx.

Fixing MDX linting errors in Next.js using eslint-plugin-mdx

Comparing Safari Web Inspector vs Chrome Developer Tools vs Firefox Browser Tools.

Safari Web Inspector vs Chrome Developer Tools vs Firefox Browser Tools

Error hydration failed because the initial UI does not match what was rendered on the server in Next.js.

Error hydration failed because the initial UI does not match what was rendered on the server in Next.js

Creating React boilerplate code in VS Code.

Creating React boilerplate code in VS Code

Connecting to MongoDB Compass to access local MongoDB databases via the new mongosh shell.

Connecting to MongoDB Compass to access local MongoDB databases via the new mongosh shell

About the new MongoDB shell, mongosh, which replaces the legacy mongo shell.

The new MongoDB shell, mongosh

Creating a mobile first responsive HTML5 resume.

Mobile first responsive HTML5 resume

The sticky footer and Next.js 13

Making the Git pre-commit hook work on macOS.

Making the Git pre-commit hook work on macOS

Adding husky to your development workflow.

Adding husky to your development workflow

Understanding the Github SSH mistake "fix" and how it would have affected me if I hadn't been able to fix it.

Understanding the Github SSH Mistake "Fix" and How it Would Have Affected me if I Hadn't Been Able to Fix it

How to unsend a Gmail email

Converting image formats on macOS using the Finder app.

Converting image formats on macOS using the Finder app

React Portal in Next.js and the Sticky Footer.

React Portal in Next.js and the Sticky Footer

Next.js environment variable support and the .env.local file.

Next.js Environment Variable Support and the .env.local File

Hosting my full stack React Node.js Socket.io Application on Heroku.

Hosting my full stack React Node.js Socket.io Application on Heroku

Featured tweet of the day, do you have a brain?

Adding Husky to a subfolder of a Git root repository.

Adding Husky to a subfolder of a Git root repository

Git instaweb and local Git commits

Connecting your iPhone hotspot to your MacBook Pro Ventura OS.

Connecting your iPhone hotspot to your MacBook Pro Ventura OS

Updating the Node architecture on MacBook Pro Silicon.

Updating the Node architecture on MacBook Pro Silicon

Re-installing Homebrew on MacBook Pro Silicon (16-inch, 2021).

Re-installing Homebrew on Macbook Pro Silicon 2021

How and why I came to dropping off my MacBook Pro with Super Computer Doctor in Murray Hill.

How and why I came to dropping off my MacBook Pro with Super Computer Doctor in Murray Hill

Reverting a particular committed file to a previous version in Git.

Reverting a particular committed file to a previous version in Git

Applying how I created a Figure (element) component to creating a Static Text Tweet component.

Applying how I created a Figure element component to creating a Static Text Tweet component

Removing unstaged changes to your individual files in Git.

Removing unstaged changes to your individual files in Git

How to create new lines inside text prop values in Next.js and JavaScript in general.

How to Create New Lines Inside Text Prop Values in Next.js and JavaScript in General

Installing the latest version of MongoDB on macOS Monterey.

Installing the Latest Version of MongoDB on macOS Monterey

Narrowly escaping the need to remove Giscus.

Narrowly Escaping the Need to Remove Giscus

Reinstalling Git with Homebrew to get the latest version.

Reinstalling Git with Homebrew to Get the Latest Version

Fixing the path to Xcode after installing the latest version on macOS Monterey.

Fixing the path to Xcode after installing the latest version on macOS Monterey

Why you should use the npkill Node module.

Why You Should Use the NPKill Node Module

Why I chose plausible analytics with my Next.js site.

Why I chose plausible analytics with my Next.js site

Why being able to use dotenv with Next.js is so huge.

Why being able to use dotenv with Next.js is so huge

How one can use the Google Meet video conferencing app with screen sharing capability.

Using Google Meet for on-the-fly screen sharing

An application I created at the height of the COVID-19 pandemic as part of the course content of a Dynamic Web 1 (JavaScript) course I was (and still am) teaching.

Audio Visual Slider

I always had wanted to be able to create games using the HTML5 Canvas 2D API, so I built (and refactored) a Canvas 2D Breakout Game inspired by one I came across on MDN.

Canvas 2D Breakout Game

A little text to speech app I created so that cat lovers could be inspired to write about their cats using the Speech Synthesis API while being inspired by the app’s cat image slideshow.

Cat Whisperer

An app which creates a custom HTML5 video player using the Shadow DOM so that the video player can go full screen without issue.

Custom HTML5 Video Player and Shadow DOM

I have always wanted to closely tie audio and audio volume controls with visual and create multiple audio sources, which I tie to one input of type range. So what better way than with the HTML5 Web Audio and HTML5 Canvas 2D APIs!

Dragging Bubbles App

A fun little game made with JavaScript, SCSS/CSS3, and HTML.

Guess The Keys App

An idea I had been brewing for a while where students could join, save information from classes and collaborate.

LetsBCoding WordPress

An app which makes sounds on the web page when clicking it or dragging the computer's or mobile device's pointing device around the screen.

Making Music in the Browser

This search application utilizes two APIs, the fetch API method, the map() method, event listeners, createElement, appendChild, JavaScript array of objects, template string literal interpolation, vanilla JavaScript, and more!

Monsters API App

I recently upgraded this project to React 18 using a top-level React class component AND functional components. The class component contains the state, and the other components contain the props.

Monsters Rolodex 2022 Classes

This version of the Monsters API app utilizes React 18, functional components, AND hooks.

Monsters Rolodex 2022 (Hooks)

A real time communications app built with websockets/socket.io websocket library, Node.js, and Express.

Node Chat App

A real time collaborative drawing app built with websockets and the socket.io websocket library, express, and node canvas.

Node Collaborative Drawing

This client side version the OMDB API app addresses potential built-in API errors. I felt it important to introduce my students to application error handling and thus a basic form of "testing".

OMDB API JS App

An app which implements the OMDB API Using Nodejs, protects your API key, and deploys to Heroku.

OMDB API NextJS

This application utilizes the Poke API based on Pokemon characters, the fetch API and AJAX, JavaScript promise chaining, the map method, the JS createElement method, checks for non-existent images and removes them or or sets their display properties to none, and more!

Poke API App

A piano deyboard application built with JavaScript, es6 modules, the Web Audio API, event delegation, Sass, and more.

Rockin Synth

A voice controlled notes app using the Speech Recognition Api and React.

Speech To Text

A Random Quote API Application using the What Does Trump Think? API.

Trump Talks Trash

A Web Audio API app which uses AJAX to retrieve a locally hosted audio file.

Web Audio API AJAX

An audio player in the form of a jukebox created with es6-javascript, html5-audio, oop, and includes a search-in-text searchbar.

Welcome to the Groove

A Wikipeadia Viewer application in which a user can search Wikipedia entries in a search box and see the resulting Wikipedia entries.

Wikipedia Viewer

How I came to add image lazy load functionality and next-gen WEBP image file format to an HTML, CSS, JS site's image gallery due to poor page performance.

Image Lazy Loading with Vanilla JavaScript

The emerging new balance of power and why it is EVEN MORE IMPORTANT for everyone to become more technologically aware and savvy.

The emerging new balance of power

Authenticating to Github via HTTPS using a username and password is no longer a valid way of connecting to Github via the Command Line (Mac) or Command Prompt (Windows).

The New HTTPS Authentication to Github

Because sometimes we are not physically in the same location, but perhaps we want to collaborate on code within the same editor, we can connect with each other via VS Code’s Live Share extension.

Why I fell in love with VS Code’s  Live Share and why you should too

I have been wracking my brain lately as to how to engage team members more via live code collaboration. This extends to both the classroom and work.

Successfully Using Live Share Extension in VS Code

Lately the opportunity arose to demonstrate how the Windows Command Prompt (aka CMD, acronym for Windows Command Processor) works and how to get around one’s Windows computer.

Windows CMD basics and Commands By Example

Technology will lead us down a path of DIY (Do It Yourself), and the arrival of the pandemic confirmed that.

The New World: Do It Yourself (DIY)

How to change the default format for screenshots created on your Mac.

Changing Mac default screenshot file format to jpg

How iTunes Match saved me from losing iTunes Purchases bought under previous Apple IDs.

How iTunes Match saved me from losing iTunes Purchases bought under previous Apple IDs

How to configure ESLint to recognize async/await in a Node.js/Express.js application.

How to enable async await in a Node.js/Express

Why I switched from MongoDB Compass to Robo 3T in local development.

MongoDB Compass vs Robo 3T vs Local Mongo Shell

Restoring a file to a specific state using Git.

Reverting a File to a Specific Revision in Git

Using a POST request in a local environment using VS Code's REST Client extension.

Using POST request with VS Code's REST Client

An alternative to the Postman Collaboration Platform for API Development. It is a VS Code extension called REST Client.

Using VS Code's REST Client extension instead of Postman

Sometimes we are in a rush and we push our git commits to remote with messages that might contain typos, or we find later on that we could have simply made a better commit message.

Rewording a pushed git commit message

How one can hide the default alternate placeholder image both when an image does not exist or the link passed to the value of its src attribute is broken.

Hiding a "N/A" value of a src attribute  of an img tag from an API

Installing Python 3.8.0+ on your Mac with pyenv.

Installing Python 3.8.0+ on your Mac with pyenv

How to add the host property to your webpack.config.js file, thereby permitting you to view your app in localhost on other shared network devices.

Adding host property to webpack config

Setting up more than one wireless printer with HP ePrint using the Hp Smart App.

How to set up more than one wireless printer with HP ePrint using the HP Smart App

How to enable the auto-complete feature in Git.

Enabling the auto-complete feature in Git with Z-shell

How to replace the old pre-installed default version of Python on Mac OS with the latest version of Python via Homebrew.

Installing the latest version of Python on Mac OS Catalina and overriding the old default pre-installed version

How I finally resolved the diminished rendering in the browser issue I encountered when using VS Code's Live Server.

The real reason behind why VSCode seemed to go haywire on me

How to add the confetti-js npm package to an application you are hosting on Github gh-pages.

When deploying an app to gh-pages that uses confetti-js

Recently I completed an application using localStorage called Storage Fun With Forms. I really wanted to make something fun that my students could  enjoy and learn from as well!

Building A Storage Fun With Forms App

How to add the really cool jscolor color picker to an application!

The really cool jscolor color picker

A new way that I implemented Flexbox to achieve a sticky footer in the new application I created for my students called "Storage Fun With Forms".

Sticky Footers in the age of coronavirus

How challenges, road blocks, and mistakes can lead to fruitful progress as a web designer or developer.

How challenges, road blocks, and mistakes can lead to fruitful progress as a web designer or developer

How to record, save, and download Blackboard Collaborate Ultra audio/video sessions.

Recording Saving and Downloading Blackboard Collaborate Ultra Sessions

Forking a repository on Github and subsequently creating a pull request on the original repository.

Forking A Repository on Github and Subsequently Creating a Pull Request

How I solved the issue of moving buttons on click, and what the side effects were of that move!

How to prevent buttons from moving on click

How to use the Live Server extension for VS Code.

VS Code and the Live Server extension

Why one should switch over to the ZShell from Bash if one has macOS Catalina installed on their machine.

Switching Shells on macOS Catalina

How to add images in the body of Gatsby markdown posts when using Netlify CMS.

Images in Gatsby Post Content when using Netlify CMS

Using Git Large File Storage in your repositories.

Git Large File Storage

What tools will help you in checking your source code AND html markup, thereby reducing the number of errors present in your code base or html markup.

The importance of taking time out to check your code and html markup

The importance and advantage of the -u flag when pushing a local git repository to remote for the first time.

The importance and advantage of git push -u

How to circumvent the inability to use your old Sass installation on on your Macbook Pro when upgrading to OS Catalina.

Using node-sass instead of system Sass in macOS Catalina

Resources providing information about APIs for developers and what pitfalls to watch out for when working with APIs.

APIs for Developers and what pitfalls to watch out for

How to take awesome screenshots without any of the accidental deselect or inaccuracies hastle in older versions of the OSX operating system.

How to take a screenshot on your Mac (Mojave or later)

How to reconnect a Github repository to the Github Integration app for Jira after discovering that your

Github Integration App Smart Commits on Jira

Creating a sticky footer after having already built the basic infrastructure and code of my Message Me app.

All Posts