Search All Projects

This is a refactoring of my original Node.js Express Socket.io app using the EJS (Embedded JavaScript) templating engine for the front end. I finally got to replacing EJS with React. It is still being hosted on Heroku, but has been structured in such a way that only one script is required to run the application instead of two. Heroku no longer provides a free tier, but the lowest cost per month is low enough for me. $5! And that is also $1 less than the lowest cost for hosting applications on Digital Ocean: $6/month. Much less hassle, and Heroku is compatible with my new Apple M1 Max chip MacBook Pro!

During this final COMD2451 Web Design 1 class I am teaching/taught at the New York City College of Technology ( aka CityTech) in Brooklyn, I finally took out the time to refactor the CSS code for a mobile first HTML5 resume we built for our professional portfolio sites and make it a 100% mobile first deigned HTML5 page. I had originally refactored a responsive HTML5 resume I had found on Codepen, and made it as "dry" as possible within my time constraints. But since this was going to be my last class I was teaching at CityTech, I thought a great way of "wrapping things up" and "tying up loose ends" would be to make the design 100% "mobile first". Because the original CSS code was NOT. It was a great and challenging refactoring experience, and I also updated the slide deck for the class session to reflect those changes. It was also a great experience and take way for the students!

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.

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. I use the react-lazy-load-image-component package to implement lazy loading of my Robohash images fetched from the Robohash API, some of which sometimes did not load immediately and left an image placeholder. Then I would literally have to manually clear the browser cache and reload the page to fetch those straggler images from the API. With the react-lazy-load-image-component package, images are loaded from the top down instead of the other way around, and this resulted in much faster and successful loading of all the images from the API. In addition, I use yarn, create-react-app, try catch for error handling, async/await, scss modules using dart sass, and hosted the project on gh-pages.

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", if you will.

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. We had just migrated to online learning, and I wanted to create an application that visualized what we were all feeling. I selected images that expressed those feelings, and synched the animations with the beat of music I chose. It was a rough time, but my students for that class were really amazing. I was truly inspired by them.

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!

An application which utilizes the Poke API based on Pokemon characters and utilizes 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.

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. We had just migrated to online learning, and I wanted to create an application that visualized what we were all feeling. I selected images that expressed those feelings, and synched the animations with the beat of music I chose. It was a rough time, but my students for that class were really amazing. I was truly inspired by them.

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.

I have always wanted to closely tie audio and audio volume controls with visual and creating 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!

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

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

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.

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

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

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

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

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

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

An app which implements the OMDB API Using Next.js, protects your API key, and deploys to vercel.com.