All Projects
Making Music in the Browser
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.
$stack:css animation/css attr/css in js/css keyframes/css pseudo selectors/gh pages/modern javascript/node sass/npm/project/touch events/web audio api
Monsters API JS App
This little search application utilizes two APIs. One is for the text called {JSON} Placeholder, and the other API is for the images called Robohash. The app also utilizes the fetch API method, the map() method, event listeners, createElement, appendChild, JavaScript array of objects, template string literal interpolation, Modern JavaScript, and more!
$stack:e.keyCode/e.which/fetch api/innerhtml property/json placeholder api/keydown event/manipulating the dom/modern javascript/node sass/project/promise chaining/robohash api/template string literal interpolation
Monsters Rolodex (React Hooks)
I recently upgraded this project to React 18 using functional React components AND hooks. For state I use the useState hook, for side effects the useEffect Hook, and the useCallback hook to prevent infinite function calls to the function created to fetch the data from the JSONPlaceholder API.
$stack:apis/api error handling/create react app/css grid/css in js/dart sass/fetch api/flexbox/modern javascript/npx/react 18/react hooks/lazy loading/project
Official Django Polls App
A Django project following the official Django Polls tutorial from scratch, covering models, the admin interface, views and templates, forms, automated testing, static files, and the Django Debug Toolbar.
$stack:python3/django/reusable-apps/admin/testing/flake8/black/djlint/pre-commit-hooks/project
OMDB API JS App
I originally created this client slide application using the OMDB API before creating my OMDB API Node.js version. After I created that one, and discovered potential built-in API errors in the Node.js version, I applied and transformed them into their client-side rendition. I felt it important to introduce my students to application error handling and thus a basic form of "testing".
$stack:ajax/api error handling/css in js/event listeners/getElementsByTagName/innerhtml property/javascript object/manipulating the dom/modern javascript/mousedown event/node sass/project/template string literal interpolation/this
OMDB API Next.js
An app which implements the OMDB API using Next.js, protects your API key, and deploys to vercel.com.
$stack:async-await/css animation/custom next.js _error.js page/dotenv/environment variables/eslint/fetch api/husky/invalid search keywords error handling production/lint-staged/local scripts/modern javascript/next.js/next/router hooks/node.js/node modules/omdb api/pagination/prettier/project/react hooks/required boolean attribute/sass/scss/scroll-down button/scroll-up button/server side rendering/stacktrace error-handing development/stylelint/vercel
Poke API Web App
An application which utilizes the Poke API based on Pokemon characters and uses both the fetch API and AJAX, JavaScript promise chaining, the map method, creates most elements rendered to the html pages, checks for non - existent images and removes them or or sets their display properties to none, uses pointer events to replace touch and mouse events, custom build script, and Modern JavaScript in general.
$stack:ajax/code refactoring/create element/css transforms/css transitions/fetch api/keydown event/load event/map method/modern javascript/nested map method/nested api objects/node sass/onerror property/parallax/pointer events/poke api/project/promise chaining/window pageOffset/window scroll
Rockin Synth
A piano keyboard application built with JavaScript, es6 modules, the Web Audio API, event delegation, Sass, and more.
$stack:babel/e.keyCode/e.which/es6 modules/eslint/event delegation/event listeners/kbd tags/prettier/project/transitions/web audio api
The Cat Whisperer
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 and background music.
$stack:audio web api/file downloads/javascript/project/session storage/speech synthesis api/text to speech
TLS SNI Leak Analysis
A network traffic analysis using Wireshark and tcpdump that captures a TLS handshake and shows how the destination hostname still leaks in plaintext through the SNI field.
$stack:cybersecurity/infosec/network-security/packet-capture/pcap/tcpdump/tcpdump-capture/tls/wireshark/project