Skip to content

Instantly share code, notes, and snippets.

View bootsified's full-sized avatar
🤓

Boots Highland bootsified

🤓
3 followers · 4 following
View GitHub Profile
@gaearon
gaearon / 00-README-NEXT-SPA.md
Last active May 19, 2024 10:27
Next.js SPA example with dynamic client-only routing and static hosting

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

Don't like Next? Here's how to do the same in Gatsby.

@WebReflection
WebReflection / handle-event-doodle.md
Last active April 12, 2024 09:54
The `handleEvent` ASCII doodle

About This Gist

This gist summarizes the handleEvent(event) pattern features, something standard, something described by me many times, written in my tiny book, tweeted about, and yet it's something most Web developers ignore.

The handleEvent ASCII Doodle

                  ┌---------------------------------┐
var handler = {   | any object that inherits or     |
@weotch
weotch / shopify.md
Last active June 3, 2016 22:29
Managing Shopify content

Here is a summary of different options that Shopify offers for managing content inclduing managing externally.

settings_schema.json

The config/settings_schema.json file lives in your theme and lets you define fields that are editable in the Storefront editor. These values can be used in css and js as well as the liquid files.

You can create a number of different field types:

@youderian
youderian / index.html
Created July 6, 2015 17:15
Completed Example: SVG Maps from Natural Earth Data
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>World Map Example</title>
<style>
path {fill: lightgray; stroke: white;}
path:hover {fill: gray;}
</style>
</head>
@yankeyhotel
yankeyhotel / Diamond Inside of a Square LESS Mixin
Last active August 29, 2015 14:11
A LESS Mixin to mask a square image into a diamond shape (aka 45deg square).
.diamond-inside-square (@square: 100px; @background-img) {
.square(@square);
.rotate(-45deg);
margin: @square/4;
overflow: hidden;
&:after {
.square(@square*1.5);
.rotate(45deg);
background: url(@background-img);
display: block;
@yankeyhotel
yankeyhotel / Triangle Mask LESS Mixin
Last active August 29, 2015 14:09
Triangle Mask LESS
.hero-mask(@trianlgle-height: 40px) {
height: (@trianlgle-height / 2);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 1000;
&:before,
&:after {
@simondahla
simondahla / div content change event.js
Created June 10, 2014 14:59
var myElement = document.getElementById('IDoftheDIV');
if(window.addEventListener) {
// Normal browsers
myElement.addEventListener('DOMSubtreeModified', contentChanged, false);
} else
if(window.attachEvent) {
// IE
myElement.attachEvent('DOMSubtreeModified', contentChanged);
}
@carolineschnapp
carolineschnapp / gist:11352987
Last active July 23, 2022 15:16
Reorder module to drop inside collection.liquid - may need CSS love. http://docs.shopify.com/manual/configuration/store-customization/advanced-navigation/add-a-reorder-drop-down-menu-to-a-collection-page
<div>
<label for="sort-by">Sort by</label>
<select id="sort-by">
<option value="manual">Featured</option>
<option value="price-ascending">Price: Low to High</option>
<option value="price-descending">Price: High to Low</option>
<option value="title-ascending">A-Z</option>
<option value="title-descending">Z-A</option>
<option value="created-ascending">Oldest to Newest</option>
<option value="created-descending">Newest to Oldest</option>
@astockwell
astockwell / README.md
Last active April 5, 2024 01:43
PHP Video Url Parser

Youtube/Vimeo Video Url Parser

Parses URLs from major cloud video providers. Capable of extracting keys from various video embed and link urls to manipulate and access videos in various ways.

Usage

VideoUrlParser::identify_service("https://www.youtube.com/watch?v=x_8kFbZf20I&amp;feature=youtu.be");
@zakhardage
zakhardage / Much much simpler option selector for Shopify
Last active July 8, 2022 09:50
Much simpler version of Shopify's option_selection.js for separating product options into their own dropdown menus.
<form action="/cart/add" method="post">
{% if product.variants.size > 1 %}
{% if product.options[0] %}
{% assign used = '' %}
<label for="select-one">{{ product.options[0] }}</label>
<select id='select-one' onchange="letsDoThis()">
{% for variant in product.variants %}
{% unless used contains variant.option1 %}
<option value="{{ variant.option1 }}">{{ variant.option1 }}</option>
{% capture used %}{{ used }} {{ variant.option1 }}{% endcapture %}