Skip to content

Instantly share code, notes, and snippets.

Avatar

Scott Granneman rsgranne

View GitHub Profile
View openai.js
Hi guys. Jans & I were playing around with OpenAI.
We first pasted in Bill E’s code & asked Open AI to explain what it was doing.
Here’s Bill’s code:
document.addEventListener('DOMContentLoaded', (event) => {
var headers;
headers = document.querySelectorAll('h2[slot="header"]');
headers.forEach(
@rsgranne
rsgranne / system-fonts-bs522.css
Created November 21, 2022 20:39
System font stack used by Bootstrap 5.2.2
View system-fonts-bs522.css
font-family: system-ui, -apple-system,"Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@rsgranne
rsgranne / bootstrap-5-cdn.html
Last active January 19, 2023 01:39
Bootstrap 5 CDN template for Web dev courses (2023-01-18 to 5.2.3)
View bootstrap-5-cdn.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Untitled</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="/css/main.css">
@rsgranne
rsgranne / bootstrap-5-nav-sample.html
Created October 5, 2021 12:51
Bootstrap 5 nav sample
View bootstrap-5-nav-sample.html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
@rsgranne
rsgranne / bootstrap-5-cdn.html
Last active February 17, 2023 23:44
Bootstrap 5 CDN template for Web dev courses
View bootstrap-5-cdn.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="/css/main.css">
@rsgranne
rsgranne / grannepack-html-vscode-settings.json
Last active January 19, 2023 01:23
VSCode settings for the extensions installed via GrannePack HTML (updated 2023-01-18)
View grannepack-html-vscode-settings.json
// Place your settings in this file to overwrite the default settings
{
"breadcrumbs.enabled": true,
// Color Picker
"colorHelper.formatsOrder": [
"hsl",
"hex",
"named"
],
"css.format.spaceAroundSelectorSeparator": true,
@rsgranne
rsgranne / bootstrap-4-npm-package.json
Created April 16, 2019 19:03
Bootstrap 4 NPM package.json template for Web dev courses
View bootstrap-4-npm-package.json
{
"name": "bootstrap-4",
"version": "1.0.0",
"description": "Bootstrap 4",
"main": "index.js",
"scripts": {},
"author": "",
"license": "ISC",
"dependencies": {
"bootstrap": "^4.3.1",
@rsgranne
rsgranne / bootstrap-4-npm.scss
Created April 16, 2019 19:01
Bootstrap 4 NPM SCSS template for Web dev courses
View bootstrap-4-npm.scss
// Override Bootstrap 4 variables below
// Bootstrap 4
@import "../node_modules/bootstrap/scss/bootstrap.scss";
// Site SCSS below
@rsgranne
rsgranne / bootstrap-4-npm.html
Last active April 16, 2019 19:00
Bootstrap 4 NPM HTML template for Web dev courses
View bootstrap-4-npm.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Untitled</title>
<link rel="stylesheet" href="/css/main.css">
@rsgranne
rsgranne / scss-user-snippet.json
Last active December 1, 2021 21:10
SCSS user snippet used with VSCode
View scss-user-snippet.json
{
/*
// Place your snippets for SCSS here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
"Print to console": {
"prefix": "log",
"body": [