Skip to content

Instantly share code, notes, and snippets.

View mathcodes's full-sized avatar
💭
🧮 💻 🎵 🧮 💻 🎵 🧮 💻 🎵

Jon Christie mathcodes

💭
🧮 💻 🎵 🧮 💻 🎵 🧮 💻 🎵
View GitHub Profile

gist for Jon? Whatcha want on here?

Here are some things:

Contact

Github profile image

Jon Christie

       

@mathcodes
mathcodes / index.html
Created June 12, 2021 06:43
Three.js - Voxel Geometry - UI
<canvas id="c"></canvas>
<div id="ui">
<div class="tiles">
<input type="radio" name="voxel" id="voxel1" value="1"><label for="voxel1" style="background-position: -0% -0%"></label>
<input type="radio" name="voxel" id="voxel2" value="2"><label for="voxel2" style="background-position: -100% -0%"></label>
<input type="radio" name="voxel" id="voxel3" value="3"><label for="voxel3" style="background-position: -200% -0%"></label>
<input type="radio" name="voxel" id="voxel4" value="4"><label for="voxel4" style="background-position: -300% -0%"></label>
<input type="radio" name="voxel" id="voxel5" value="5"><label for="voxel5" style="background-position: -400% -0%"></label>
<input type="radio" name="voxel" id="voxel6" value="6"><label for="voxel6" style="background-position: -500% -0%"></label>
<input type="radio" name="voxel" id="voxel7" value="7"><label for="voxel7" style="background-position: -600% -0%"></label>
@mathcodes
mathcodes / index.html
Created June 12, 2021 08:05
Three.js - Transparency - AlphaTest
<canvas id="c"></canvas>
@mathcodes
mathcodes / index.html
Created June 12, 2021 08:10
Three.js - Align HTML Elements to 3D Globe
<div id="container">
<canvas id="c"></canvas>
<div id="labels"></div>
</div>
@mathcodes
mathcodes / index.html
Created June 12, 2021 08:26
Three.js - Canvas Textured Cube
<canvas id="c"></canvas>
@mathcodes
mathcodes / index.html
Created June 12, 2021 08:27
Three.js - postprocessing - 3DLUT
<canvas id="c"></canvas>
@mathcodes
mathcodes / index.html
Created June 12, 2021 08:50
Three.js - Voxel Geometry - UI
<canvas id="c"></canvas>
<div id="ui">
<div class="tiles">
<input type="radio" name="voxel" id="voxel1" value="1"><label for="voxel1" style="background-position: -0% -0%"></label>
<input type="radio" name="voxel" id="voxel2" value="2"><label for="voxel2" style="background-position: -100% -0%"></label>
<input type="radio" name="voxel" id="voxel3" value="3"><label for="voxel3" style="background-position: -200% -0%"></label>
<input type="radio" name="voxel" id="voxel4" value="4"><label for="voxel4" style="background-position: -300% -0%"></label>
<input type="radio" name="voxel" id="voxel5" value="5"><label for="voxel5" style="background-position: -400% -0%"></label>
<input type="radio" name="voxel" id="voxel6" value="6"><label for="voxel6" style="background-position: -500% -0%"></label>
<input type="radio" name="voxel" id="voxel7" value="7"><label for="voxel7" style="background-position: -600% -0%"></label>

Split Screen Components

The following tutorial walks you through creating a split screen component using layout components.

Dependencies:

  "dependencies": {
    "@testing-library/jest-dom": "5.14.1",
    "@testing-library/react": "11.2.7",
    "@testing-library/user-event": "12.8.3",
 "react": "^17.0.2",
@mathcodes
mathcodes / ListsAndListTypes.md
Created December 3, 2021 02:19
List and List Types

React: List and List Patterns

  1. Inside App.js we have two arrays. One with a list of people data and one with a list of products data:
const people = [{
	name: 'John Doe',
	age: 54,
	hairColor: 'brown',
	hobbies: ['swimming', 'bicycling', 'video games'],
@mathcodes
mathcodes / nosqlvssql.md
Last active August 2, 2022 23:32
NoSql vs Sql

NoSQL vs SQL Databases

Description

The following information is straight from source: https://www.mongodb.com/nosql-explained/nosql-vs-sql

TLDR: NoSQL (“non SQL” or “not only SQL”) databases were developed in the late 2000s with a focus on scaling, fast queries, allowing for frequent application changes, and making programming simpler for developers. Relational databases accessed with SQL (Structured Query Language) were developed in the 1970s with a focus on reducing data duplication as storage was much more costly than developer time. SQL databases tend to have

  • rigid
  • complex, tabular schemas