Skip to content

Instantly share code, notes, and snippets.

@jreviews
jreviews / modal-behavior._hs
Last active August 16, 2024 00:32
Hyperscript modal behavior
behavior Modal
init
set my focusRing to (<a, button, input:not([type=hidden]), textarea, select, details/> in me) as Array
end
on open
remove .hide
add { overflow: 'hidden' } to the <body/>
transition <[data-backdrop], [data-content]/> in me opacity from 0 to 1 over 0.3s
focus() the first <input/> in me
@johndwells
johndwells / boost.unpoly.js
Created June 5, 2020 17:06
Automatically pass all same-domain links through unpoly.js
// Automatically bind internal links to `up-follow` behaviour
// Unpoly will already catch and handle links with explicit `up-follow` etc,
// so we are safe to assume that if our handler below is triggered, the link
// doesn't already have an up- attribute.
//
// Scenarios to handle:
// Hat-tip to https://github.com/instantpage/instant.page/blob/master/instantpage.js
// ✅ cmd+click
// ✅ empty links
// ✅ links to another domain
@tanthammar
tanthammar / LivewireSortable.php
Last active August 9, 2022 20:52
Livewire Sortable fix with array form
<?php
namespace App\Http\Livewire\App\Organizers\Forms;
use App\Http\Livewire\Traits\Form;
use App\Models\Organizer;
use Livewire\Component;
class People extends Component
{
@tanthammar
tanthammar / trix.blade.php
Last active February 8, 2023 22:18
Livewire trix input
@push('body-styles')
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.2.0/trix.css">
@endpush
<form x-data="form()">
<input x-ref="description" id="description" name="description" value='{{ $description }}' type="hidden" />
<div wire:ignore>
<trix-editor input="description"></trix-editor>
</div>
@marcus-at-localhost
marcus-at-localhost / load-script.js
Last active January 3, 2023 14:36
[Load Script] load javascript library with promise in runtime and check if script already exists #es6 #promise
// added check if script is loaded
// @link https://stackoverflow.com/a/49780469/814031
// usage:
/*
let script = loadScript('https://cdn.jsdelivr.net/combine/npm/[email protected],npm/[email protected]/togpx.min.js');
script.then( function (){
L.map('map')
});
*/
@AugustMiller
AugustMiller / deploy.php
Last active April 15, 2019 05:19
Boilerplate Deployer config for a Craft 3 project https://deployer.org
<?php
namespace Deployer;
require 'recipe/composer.php';
// Project name
set('application', 'my-project');
// Project repository
set('repository', '[email protected]:organization/repo.git');
@adamwathan
adamwathan / 1-add-macros.php
Last active June 11, 2022 19:55
Multiformat Endpoints in Laravel
<?php
namespace App\Providers;
use Illuminate\Http\Request;
use Illuminate\Routing\Route;
use Illuminate\Support\ServiceProvider;
use App\Http\Middleware\CaptureRequestExtension;
class AppServiceProvider extends ServiceProvider
@davidpiesse
davidpiesse / tailwind_md_all_colours.js
Last active February 25, 2025 16:31
A colour set for Tailwind CSS that include all Material Design Colours, shades, accents and contrast colours
// https://davidpiesse.github.io/tailwind-md-colours/
//
//Notes
//
//All colours are generated from Material Design Docs
//Colours have a base, a set of shades (50-900) accent colours
//In addition a companion set of contrast colours are included for colouring text / icons
// Example usage
// class="w-full bg-red-600 text-red-600-constrast"
@davidpiesse
davidpiesse / tailwind_md_colours.js
Last active November 30, 2020 21:35
Replace the default (still great) colors from Tailwind to those from Material Design maintaining the Tailwind naming convention
//Notes
//
//For mapping the 100-900 colors we have mapped as follows:
//darkest:900
//darker:700
//dark:600
//base:500
//light:400
//lighter:300
//lightest:100
@adamwathan
adamwathan / vue.sublime-snippet
Created February 5, 2018 20:24
Vue Component Snippet for Sublime
<snippet>
<content><![CDATA[
<template>
${0}
</template>
<script>
export default {
props: [${1}],
data() {