Skip to content

Instantly share code, notes, and snippets.

View straker's full-sized avatar

Steven Lambert straker

View GitHub Profile
@straker
straker / nativeDomAPI.js
Last active October 20, 2022 11:22
HTML DOM api standards proposal - examples of how the native HTML DOM api is cumbersome to use and how different libraries handle it
View nativeDomAPI.js
/**
* Create element with attributes
*
* <input type="number" min="0" max="99" name="number" id="number" class="number-input" disabled/>
*/
// native
var input = document.createElement('input');
input.type = "number";
input.min = 0;
@straker
straker / wrapper.js
Last active October 20, 2022 11:31
Simple wrapper around DOM functions to make DOM interactions a bit easier to work with
View wrapper.js
(function(Node, Element, HTMLCollection, Array) {
/**
* Wrap addEventListener to handle multiple event types and be chainable.
* @param {string} types - Space-separated event types.
* @param {function} listener
* @param {boolean} useCapture
* @returns {Node}
*
* @example
* document.querySelector('a')
@straker
straker / .babelrc
Created March 7, 2022 17:34
Example of running axe-core using Jest and @testing-library/react
View .babelrc
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
],
@straker
straker / .babelrc
Last active October 20, 2022 12:00
Example of running axe-core using Jest and Enzyme
View .babelrc
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
],
@straker
straker / README.md
Last active September 3, 2023 21:28
Basic Frogger HTML and JavaScript Game
View README.md

Basic Frogger HTML and JavaScript Game

This is a basic implementation of the Konami Frogger game, but it's missing a few things intentionally and they're left as further exploration for the reader.

Further Exploration

  • Lives
  • Frogger starts with 6 lives and should lose a life whenever it is hit by a vehicle or lands in the water
@straker
straker / README.md
Last active September 21, 2023 15:45
Basic Missile Command HTML and JavaScript Game
View README.md

Basic Missile Command HTML and JavaScript Game

This is a basic implementation of the Atari Missile Command game, but it's missing a few things intentionally and they're left as further exploration for the reader.

Further Exploration

  • Score
  • When a missile explodes (not a counter-missile), the score should increase by 25
@straker
straker / README.md
Last active October 20, 2023 13:13
Basic Bust-a-Move / Puzzle Bobble / Bubble Shooter HTML and JavaScript Game
View README.md

Basic Bust-a-Move / Puzzle Bobble / Bubble Shooter HTML and JavaScript Game

This is a basic implementation of the game Bust-a-Move / Puzzle Bobble / Bubble Shooter, but it's missing a few things intentionally and they're left as further exploration for the reader.

Further Exploration

  • More levels
  • Add more levels and have the next level start once the last one is finished
@straker
straker / two-way-binding.js
Last active December 23, 2023 04:30
Simple and small two-way data binding between DOM and data
View two-way-binding.js
/**
* @param {object} scope - Object that all bound data will be attached to.
*/
function twoWayBind(scope) {
// a list of all bindings used in the DOM
// @example
// { 'person.name': [<input type="text" data-bind="person.name"/>] }
var bindings = {};
// each bindings old value to be compared for changes
@straker
straker / README.md
Last active January 5, 2024 19:38
Basic Doodle Jump HTML and JavaScript Game
View README.md

Basic Doodle Jump HTML and JavaScript Game

This is a basic implementation of the game Doodle Jump, but it's missing a few things intentionally and they're left as further exploration for the reader.

Further Exploration

  • Platforms Types
  • There are 4 different types of platforms: Normal, Broken, Moving, and Disappearing
@straker
straker / README.md
Last active January 24, 2024 07:13
Basic Sokoban HTML and JavaScript Game
View README.md

Basic Sokoban HTML and JavaScript Game

This is a basic implementation of the game Sokoban, but it's missing a few things intentionally and they're left as further exploration for the reader.

Further Exploration

  • More levels
  • Add more levels and have the next level start once the last one is finished