Skip to content

Instantly share code, notes, and snippets.

@toybreaker
toybreaker / index.html
Created April 22, 2023 04:00
SVG Turbulence Filter Test
<h1>
SVG Turbulence Filter Test
</h1>
<p id="sentence" contenteditable="true" spellcheck="false">
The <strong>feTurbulence</strong> SVG filter generates and renders <em>Perlin noise</em>. This can be used
by CSS to distort <strong>elements and text</strong>. Try selecting or editing <em>this text</em>. You can fiddle
with the sliders below to <strong>change the effect</strong>.
</p>
<div class="sliders">
@toybreaker
toybreaker / brew-dnsmasq.md
Last active October 20, 2022 19:29 — forked from davebarnwell/brew-dnsmasq.md
install dnsmasq with brew

Install dnsmasq and configure for *.test domains

$ brew install dnsmasq
$ vim /usr/local/etc/dnsmasq.conf

Reload configuration and clear cache

# Copy the daemon configuration file into place.
$ sudo cp $(brew list dnsmasq | grep /homebrew.mxcl.dnsmasq.plist$) /Library/LaunchDaemons/

$ sudo launchctl unload /Library/LaunchDaemons/homebrew.mxcl.dnsmasq.plist

@toybreaker
toybreaker / automatic-table-of-contents.markdown
Created June 22, 2022 08:35
Automatic Table of Contents

Automatic Table of Contents

Just a little JS snippet that I developed for a colleague. They had an internal wiki and needed a way to automatically generate a simple table of contents in a certain format (1, 1.1, 1.1.1 etc) automatically based on the header tags. No style yet but this was a fun one.

A Pen by Adam Quinlan on CodePen.

License.

@toybreaker
toybreaker / index.html
Created June 22, 2022 08:31
Sheets API Specials Menu
<a href="https://docs.google.com/spreadsheets/d/1zIVCVA0Tk5CvAiTyeAdDBPygT3aKDiSeM2FbPU0JO2c/edit?usp=sharing" target="_blank" rel="noopener noreferrer">
<div class="editlink">INSPECT<br />SHEET</div>
</a>
<div id="app">
<section id="specialssection" class="specials-container" v-if="menuItems_L" :style="menuStyle">
<div id="special_component" :style="menuStyle">
<h1>Daily Specials</h1>
<div class="specials-table-container">
<table>
<tbody v-for="item in menuItems_L" :key="`specialmenu-${item.name}`">
@toybreaker
toybreaker / index.html
Created June 22, 2022 08:15
SVG Turbulence Filter Test
<h1>
SVG Turbulence Filter Test
</h1>
<p id="sentence" contenteditable="true" spellcheck="false">
The <strong>feTurbulence</strong> SVG filter generates and renders <em>Perlin noise</em>. This can be used
by CSS to distort <strong>elements and text</strong>. Try selecting or editing <em>this text</em>. You can fiddle
with the sliders below to <strong>change the effect</strong>.
</p>
<div class="sliders">
@toybreaker
toybreaker / gsap-scrolltrigger-demo.markdown
Created December 13, 2021 19:46
GSAP ScrollTrigger - Demo
@toybreaker
toybreaker / a-dry-alternative-to-dark-mode-in-css-abstracted-in-scss.markdown
Created March 23, 2021 03:13
A DRY alternative to Dark Mode in CSS, abstracted in SCSS
@toybreaker
toybreaker / index.html
Created December 15, 2020 18:54
Vue Cards from Google Sheets
<div id="app"></div>

BoaVidaQRCODE

Working on a site for a restaurant where the owner needed a 'CMS' to edit the specials menu on a daily basis. Rather than use a bloated CMS like wordpress/drupal/joomal etc, I thought it would be slick if they could just use a simple google sheet... This allows the site to remain flat from a static site generator and is SUPER easy to edit. There are some usage restrictions from the Google Sheets API, but the cap is so high it will work just fine for a small project like a local restaurant.

A Pen by Tiago on CodePen.

License.