Skip to content

Instantly share code, notes, and snippets.

View 1Marc's full-sized avatar

Marc Grabanski 1Marc

1.8k followers · 3 following
View GitHub Profile
@1Marc
1Marc / reactive.js
Last active October 19, 2025 15:36
Vanilla Reactive System
// Credit Ryan Carniato https://frontendmasters.com/courses/reactivity-solidjs/
let context = [];
export function untrack(fn) {
const prevContext = context;
context = [];
const res = fn();
context = prevContext;
return res;
@1Marc
1Marc / debugging-js-setup.md
Last active March 20, 2025 16:08
Debugging JavaScript LIVE -- Setup Instructions
  • Make sure you have a GitHub account
  • Install:
    • Git
    • Text editor (Atom or VSCode suggested)
    • Node installed and available via command line node. Recommended version 4.6 or greater.
    • Chrome web browser (latest stable release)
  • Clone the getRANTR repo and follow the install instructions.
@1Marc
1Marc / digging-into-node.md
Last active February 28, 2025 12:39
Digging Into Node.js Setup

Setup

Make sure you have Node 11+ installed.

Type node -v in your command line to check your version.

Install sqlite3: npm install sqlite3

For Windows

@1Marc
1Marc / sass-workshop-setup.md
Last active March 10, 2024 18:39

I’m looking forward to the Sass Fundamentals workshop! A few notes to ensure you’re set up in advance are below.

See you soon!

Mike

Node.js

You’ll need a relatively recent version (v4.5 or newer, v7 ideally) of node.js installed. On OS X, a great way of doing this without disturbing your existing dev environment is to install NVM. Installation instructions are here.

@1Marc
1Marc / setup-repo.md
Last active April 11, 2023 16:11
Setup Repo and Web Server

1. Clone the github repo i.e. https://github.com/getify/workshop-periodic-table

git clone https://github.com/getify/workshop-periodic-table.git

2. Install http-server

npm install -g http-server

3. Open the command line, and change into the repo root folder

@1Marc
1Marc / workshops-planning.md
Last active January 20, 2023 02:34
Workshop Planning

This gist is no longer in use.

@1Marc
1Marc / index.html
Created May 15, 2013 16:56
A CodePen by John Blazek. 3D Carousel Using TweenMax.js & jQuery - Wanted to explore some 3d carousel goodness, using DOM elements. Works best in Chrome/Safari, then FF, not 100% sure about IE 10. TO DO: Adding touch interaction with devices & animate into place and out.
<header>
<h1>3D Carousel Using TweenMax.js & jQuery</h1>
<h3>A pen by <a href="http://www.twitter.com/johnblazek" target="_blank">@johnblazek</a></h3>
<div id="fps">Framerate: 0/60 FPS</div>
</header>
<div id="contentContainer" class="trans3d">
<section id="carouselContainer" class="trans3d">
<figure id="item1" class="carouselItem trans3d"><div class="carouselItemInner trans3d">1</div></figure>
<figure id="item2" class="carouselItem trans3d"><div class="carouselItemInner trans3d">2</div></figure>
@1Marc
1Marc / gist:8343a6eeef16beb57ee77f093c9bd204
Created August 24, 2022 21:54
let positions = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const player = "X";
const computer = "O";
let count = 1;
let currentTurn = player;
let winner;
//Dom Elements
let grid = document.createElement("div");
grid.style.width = "200px";
grid.style.display = "flex";
@1Marc
1Marc / buildHTML utility
Created July 7, 2010 07:34
// my little html string builder
buildHTML = function(tag, html, attrs) {
// you can skip html param
if (typeof(html) != 'string') {
attrs = html;
html = null;
}
var h = '<' + tag;
for (attr in attrs) {
if(attrs[attr] === false) continue;
@1Marc
1Marc / modern-seo-setup.md
Last active November 23, 2021 21:19

Node.js

You’ll need a relatively recent version (v6 or newer, v7 ideally) of node.js installed. On OS X, a great way of doing this without disturbing your existing dev environment is to install NVM. Installation instructions are here

You’ll know everything is set up properly when you can run

nvm --version # might look like "0.31.4"
node --version # might look like "v7.7.3"