Skip to content

Instantly share code, notes, and snippets.

Avatar

Dan Klammer danklammer

View GitHub Profile
@skillmatic-co
skillmatic-co / Much much simpler option selector for Shopify
Last active Nov 25, 2021 — forked from zakhardage/Much much simpler option selector for Shopify
Much simpler version of Shopify's option_selection.js for separating product options into their own dropdown menus.
View Much much simpler option selector for Shopify
<form action="/cart/add" method="post">
{% if product.variants.size > 1 %}
{% if product.options[0] %}
<label for="select-one">{{ product.options[0] }}</label>
<select id="select-one" onchange="letsDoThis()">
{% for value in product.options_with_values[0].values %}
<option value="{{ value }}" {% if product.options_with_values[0].selected_value == value %}selected{% endif %}>
{{ value }}
</option>
{% endfor %}
@danielpost
danielpost / .eleventy.config.js
Created Aug 11, 2020
Eleventy: Purge CSS for each html file
View .eleventy.config.js
const { PurgeCSS } = require('purgecss');
/**
* Remove any CSS not used on the page and inline the remaining CSS in the
* <head>.
*
* @see {@link https://github.com/FullHuman/purgecss}
*/
eleventyConfig.addTransform('purge-and-inline-css', async (content, outputPath) => {
if (process.env.ELEVENTY_ENV !== 'production' || !outputPath.endsWith('.html')) {
View nixos-raspi4.md

Download the image builder

  • git clone git@github.com:Robertof/nixos-docker-sd-image-builder.git
  • cd nixos-docker-sd-image-builder

Configure for Raspi4

  • modify /config/rpi4/default.nix to increase size of boot partition
    • this step is optional but I ran out of space in /boot pretty quickly with the default setting since I'm still learning and rebuilding a lot. Let's leave some room for trial & error.
    • sdImage.firmwareSize = 1024;
  • modify /config/sd-image.nix
  • ./rpi3 becomes ./rpi4
View starfield.html
<!DOCTYPE html>
<meta charset="utf-8" />
<body
style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; overflow: hidden; margin: 0; padding: 0;"
>
<canvas
id="canvas"
style="width: 100%; height: 100%; padding: 0;margin: 0;"
></canvas>
<script>
@lukaskleinschmidt
lukaskleinschmidt / app.scss
Last active Jul 29, 2022
Utility class generator like tailwindcss but in pure Sass.
View app.scss
@use 'sass:map';
@use 'variants' as * with (
$breakpoints: (
'small': 640px,
'medium': 768px,
'large': 1024px,
'wide': 1280px,
)
);
View css-layout-hack.js
// create a bookmark and use this code as the URL, you can now toggle the css on/off
// thanks+credit: https://dev.to/gajus/my-favorite-css-hack-32g3
javascript: (function() {
var elements = document.body.getElementsByTagName('*');
var items = [];
for (var i = 0; i < elements.length; i++) {
if (elements[i].innerHTML.indexOf('* { background:#000!important;color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }') != -1) {
items.push(elements[i]);
}
}
@addyosmani
addyosmani / lazyload.html
Last active Dec 4, 2021
Native image lazy-loading with a cross-browser fallback
View lazyload.html
<img data-src="unicorn.jpg" loading="lazy" alt=".." class="lazyload"/>
<script>
// Select all images with the class "lazyload"
const images = document.querySelectorAll("img.lazyload");
// Check if the browser supports the "loading" attribute
if ('loading' in HTMLImageElement.prototype) {
// If so, we'll update all <img src> to point to the data-src instead
images.forEach(img => {
img.src = img.dataset.src;
View minimal-analytics-snippet.js
(function (context, trackingId, options) {
const history = context.history;
const doc = document;
const nav = navigator || {};
const storage = localStorage;
const encode = encodeURIComponent;
const pushState = history.pushState;
const typeException = 'exception';
const generateId = () => Math.random().toString(36);
const getId = () => {
@ricealexander
ricealexander / system_fonts.css
Last active Mar 31, 2021
system fonts across platforms
View system_fonts.css
:root {
--system-sans-serif:
system-ui, /* detect system font automatically */
-apple-system, /* Safari (Mac OS X and iOS) and Older Mac OS X */
BlinkMacSystemFont, /* Chrome<56 (Mac OS X) */
"Segoe UI", /* Windows and Windows Phone */
"Roboto", /* Android and Chrome OS */
"Oxygen", /* KDE - Linux environment */
"Ubuntu", /* Ubuntu - Linux distribution */
"Cantarell", /* GNOME - Linux environment */
@sgelob
sgelob / user-timing-api-RUM-gtm.js
Last active Mar 14, 2021
Real User Monitoring of Web Performance with Navigation Timing API, Google Tag Manager and Google Analytics
View user-timing-api-RUM-gtm.js
/**
* user-timing-api-RUM-gtm.js 1.0.1
* Olegs Belousovs @sgelob
*/
(function() {
"use strict";
// From https://github.com/addyosmani/timing.js/ –––>
var performance = window.performance || window.webkitPerformance || window.msPerformance || window.mozPerformance;