Skip to content

Instantly share code, notes, and snippets.

View Braunson's full-sized avatar

Braunson Yager Braunson

138 followers · 172 following
View GitHub Profile
@mhanberg
mhanberg / alpine-tailwind-dark-mode.html.eex
Created May 25, 2021 05:03
<!DOCTYPE html>
<html lang="en" class="dark">
<head><!-- head stuff --></head>
<body class="h-screen bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-grey-200 font-sans transition transition-colors ease-out">
<main role="main" class="container mx-auto">
<div x-data="{text: ['Light', 'Dark']}">
<button
class="border p-2 font-bold bg-gray-900 dark:bg-white text-white dark:text-grey-900"
@click="document.documentElement.classList.toggle('dark'); text = text.reverse()"
x-text="text[0]"
@torshid
torshid / .env
Last active May 15, 2023 20:43
https://larawind.com/shared-laravel-sessions-across-domains Shared Laravel sessions across domains
PORTAL_DOMAIN=localhost
SESSION_DRIVER=shared
@jamiebuilds
jamiebuilds / tradeoffs-in-value-derived-types-in-typescript.md
Last active December 16, 2022 17:21
Value-derived types in TypeScript are super powerful, but you should be thoughtful in how/when you use them

Tradeoffs in value-derived types in TypeScript

Many of the more "advanced" typescript features can be used for creating "value-derived" types.

At its simplest form:

let vehicle = { name: "Van", wheels: 4 }
@pi0
pi0 / next.config.js
Created March 12, 2021 17:29
Webpackbar with Next.js
const Webpackbar = require('webpackbar')
module.exports = {
webpack: (config, { isServer }) => {
config.plugins.push(new Webpackbar({ name: isServer ? 'server' : 'client' }))
return config
}
}
@awebartisan
awebartisan / dynamic_input_fields.html
Created March 1, 2021 09:29
Dynamic input fields with Alpine.js
<div x-data="{ bankAccounts: [{
id: '',
accountNumber: ''
}] }">
<template x-for="(bankAccount, index, bankAccounts) in bankAccounts" :key="index">
<div class="grid grid-cols-6 gap-6 mt-2">
<div class="col-span-3 md:col-span-3 sm:col-span-2">
<x-jet-label for="city">Bank</x-jet-label>
<select :name="`bank_info[${index}][bank_id]`" id="bank"
class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm mt-1 block w-full">
@freekmurze
freekmurze / 2021_02_17_103523_migrate_to_jetstream.php
Last active June 11, 2022 19:55
Migrate classic Spark tables to Jetstream + new Spark
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class MigrateToJetstream extends Migration
{
public function up()
{
@gwleuverink
gwleuverink / progress-bar.blade.php
Last active April 9, 2024 10:31
Progress bar blade component
@props([
'percentage' => 0,
'failed' => false
])
@php
$done = $failed || $percentage == 100;
@endphp
<div {{ $attributes->merge(['class' => ' space-y-1'])->whereDoesntStartWith('wire:poll') }}
@KevinBatdorf
KevinBatdorf / alpine-child-x-init.js
Last active January 22, 2021 19:11
AlpineJS Magic Helper to use x-init on child elements
// Demo; https://codepen.io/KevinBatdorf/pen/RwGEdpr?editors=1011
// Load in before you load Alpine
function AlpineAutoInitChildren() {
// Use: <div x-data x-init="$initChildren()">
Alpine.addMagicProperty('initChildren', ($el) => {
return () => {
// Grab all child x-init. Customize if you want to only run based on a specific condition
Array.from($el.querySelectorAll('[x-init]')).forEach(child => {
@litan1106
litan1106 / wsl-systemd.sh
Last active April 17, 2023 20:53
wsl-systemd
# Install the latest wsl2 with systemd support
# https://devblogs.microsoft.com/commandline/systemd-support-is-now-available-in-wsl/
# Update the latest wsl
wsl --update --web-download
# Install Ubuntu with username vagrant
wsl --install -d Ubuntu-20.04
# Set Ubuntu as default distro
@levelsio
levelsio / showFirstCellInGoogleSheetAsiOSWidget.js
Last active November 27, 2023 18:54
// Modified from @mutsuda's https://medium.com/@mutsuda/create-an-ios-widget-showing-google-spreadsheets-data-856767a9447e
// by @levelsio
// HOW TO
// 1) Make a Google Sheet, we'll pull the first cell e.g. A1
// 2) Publish your Google Sheet, File -> Publish To Web
// 3) Copy the SHEET_ID in the URL, put it in here below:
const endpoint = "https://spreadsheets.google.com/feeds/cells/SHEET_ID/1/public/full?alt=json"
// 4) Install Scriptable @ https://apps.apple.com/us/app/scriptable/id1405459188
// 5) Copy this entire script in to Scriptable (tip: you can send it to your iPhone via Whatsapp/Messenger/Telegram etc)