Skip to content

Instantly share code, notes, and snippets.

View jackabox's full-sized avatar
🛠️
Available for Hire

Jack Whiting jackabox

🛠️
Available for Hire
View GitHub Profile
html {
scroll-behavior: smooth;
}
:target:before {
content: "";
display: block;
height: 100px;
margin: -100px 0 0;
}
@jackabox
jackabox / header.html
Last active December 20, 2022 15:36
Alpine Js + Header/Nav basic template with motion safe animation in.
<header
x-data="header()"
class="fixed top-0 left-0 right-0 bg-black z-30"
@scroll.window="hasScrolled = window.scrollY > 260"
>
<!-- Logo to go here -->
<!-- Navigation El -->
<nav
@jackabox
jackabox / modal.html
Last active October 23, 2023 03:54
Creating a modal with Alpine JS + Tailwind CSS
<div x-data="{ 'showModal': false }" @keydown.escape="showModal = false">
<!-- Trigger for Modal -->
<button type="button" @click="showModal = true">Open Modal</button>
<!-- Modal -->
<div
class="fixed inset-0 z-30 flex items-center justify-center overflow-auto bg-black bg-opacity-50"
x-show="showModal"
>
<!-- Modal inner -->
@jackabox
jackabox / AutoComplete.php
Last active October 10, 2024 14:44
Livewire Autocomplete Component
<?php
namespace App\Http\Livewire;
use App\Models\Account;
use Livewire\Component;
class AccountAutocomplete extends Component
{
public $query= '';
@jackabox
jackabox / base.css
Created June 4, 2020 14:41
Tailwind Default Setup (v1.4)
@import url('https://rsms.me/inter/inter.css');
html {
font-family: 'Inter', sans-serif;
}
@supports (font-variation-settings: normal) {
html {
font-family: 'Inter var', sans-serif;
}
@jackabox
jackabox / base.css
Created June 4, 2020 14:41
Tailwind Default Setup (v1.4)
@import url('https://rsms.me/inter/inter.css');
html {
font-family: 'Inter', sans-serif;
}
@supports (font-variation-settings: normal) {
html {
font-family: 'Inter var', sans-serif;
}
@jackabox
jackabox / parser.js
Last active March 1, 2024 05:35
Example of Node / JSONStream / Event-stream parser
import hyperquest from 'hyperquest'
import JSONStream from 'JSONStream'
import es from 'event-stream'
import { format } from 'date-fns'
const scraper = async () => {
const scryfallJSONUrl =
'https://archive.scryfall.com/json/scryfall-default-cards.json'
await hyperquest(scryfallJSONUrl)
@jackabox
jackabox / active-cart.liquid
Created January 31, 2020 21:08
Show cart as active when on template.
<a href="/cart" {% if template == 'cart' %}class="active"{% endif %}>
@jackabox
jackabox / animate.css
Created December 12, 2019 00:58
Animation
@keyframes slide-up {
0% {
transform: translateY(100%);
opacity: 0;
}
50% {
transform: translateY(-10%);
}
100% {
transform: translateY(0%);
@jackabox
jackabox / component.vue
Created September 4, 2019 12:07
Click outside of a div or children to be able to trigger an action (close of the div itself)
<template>
<li
v-if="isLoggedIn"
class="user-menu__item relative btn"
@click="showAccountEvent"
v-click-outside="closeAccountEvent"
>
<user-dropdown v-if="showAccount" />
</li>
</template>