projects tag: eslint
Canvas 2D Breakout Game
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.
#babel, #canvas 2D, #eslint, #innerhtml property, #keydown event, #keyup event, #modern javascript, #mousemove event, #node sass, #project, #webpack
OMDB API Next.js
An app which implements the OMDB API using Next.js, protects your API key, and deploys to vercel.com.
#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
Rockin Synth
A piano keyboard application built with JavaScript, es6 modules, the Web Audio API, event delegation, Sass, and more.
#babel, #e.keyCode, #e.which, #es6 modules, #eslint, #event delegation, #event listeners, #kbd tags, #prettier, #project, #transitions, #web audio api
Web Audio API AJAX
A Web Audio API app which uses AJAX to retrieve a locally hosted audio file.
#ajax, #babel, #buffer, #canvas, #cdnjs, #code refactoring, #confetti-js, #eslint, #gh-pages, #modern javascript, #node-sass, #npm, #prettier, #project, #random colors, #scripts, #web audio api, #webpack, #workflow refactor
Wikipedia Viewer
This is a code refactoring of a project I created several years ago. I revamped the workflow, migrating from Gulp to Webpack, from jQuery to Modern JavaScript with async await, @babel/pollyfill to make my async wait code work with Babel 7 and Webpack 5, adding css animated scroll buttons, animated magnifying glass icon search input on focus, hover, and active, replacing PostCSS with Node Sass, and adding a dynamic year in the footer.
#async await, #babel, #@babel/polyfill, #code refactor, #code update, #eslint, #innerhtml property, #keydown event, #modern javascript, #node sass, #prettier, #project, #webpack, #wikipedia api, #window pageOffset, #window scroll