Skip to content

Instantly share code, notes, and snippets.

View JeffreyWay's full-sized avatar

Jeffrey Way JeffreyWay

16.1k followers · 0 following
View GitHub Profile
@JeffreyWay
JeffreyWay / index.html
Last active June 30, 2022 20:26
Learn Vue 3: Step by Step, Episode 3, Lists, Conditionals, and Computed Properties - https://laracasts.com/series/learn-vue-3-step-by-step/episodes/3
<!doctype html>
<html lang="en" class="h-full">
<head>
<meta charset="UTF-8">
<title>Episode 3: Lists and Computed Properties</title>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="h-full grid place-items-center">
@JeffreyWay
JeffreyWay / index.html
Last active May 26, 2022 16:50
Learn Vue 3: Step By Step - Episode 2, Attribute Binding and Event Handling - https://laracasts.com/series/learn-vue-3-step-by-step/episodes/2
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Episode 2: Attribute Binding and Basic Events</title>
<script src="https://unpkg.com/vue@3"></script>
<style>
html, body {
height: 100%;
}
@JeffreyWay
JeffreyWay / index.html
Last active May 28, 2023 15:01
Learn Vue 3: Step By Step, Episode 1 - https://laracasts.com/series/learn-vue-3-step-by-step/episodes/1
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Episode 1: The Absolute Basics</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
<p>
@JeffreyWay
JeffreyWay / Modal.vue
Last active January 17, 2022 00:20
JavaScript-specific solution for the mobile Safari viewport height bug/quirk.
<template>
<Teleport to="body">
<div v-show="open"
class="fixed z-10 inset-0 overflow-y-hidden h-full"
role="dialog"
aria-modal="true"
>
<div class="flex items-center justify-center min-h-full text-center">
<!-- Overlay -->
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"
@JeffreyWay
JeffreyWay / index.blade.php
Created December 14, 2021 14:49
<!doctype html>
<html lang="en">
<head>
<title>Markdown Example</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/@tailwindcss/typography@0.4.x/dist/typography.min.css">
<script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
</head>
<body>
@JeffreyWay
JeffreyWay / console.php
Created October 26, 2021 17:16
Example Artisan "tail" command
<?php
use Illuminate\Foundation\Inspiring;
use Illuminate\Support\Facades\Artisan;
use Symfony\Component\Process\Process;
/*
|--------------------------------------------------------------------------
| Console Routes
|--------------------------------------------------------------------------
@JeffreyWay
JeffreyWay / Collection.php
Created September 10, 2021 16:28
<?php
namespace App;
use ArrayAccess;
use ArrayIterator;
use Countable;
use IteratorAggregate;
class Collection implements Countable, ArrayAccess, IteratorAggregate
@JeffreyWay
JeffreyWay / Song.vue
Created September 7, 2021 20:09
Simple Real-Time Search Highlighting Example
<template>
<div>
<form>
<input
@input="setSearch($event.target.value)"
:value="search"
type="text"
placeholder="Search"
class="border p-1"
/>
@JeffreyWay
JeffreyWay / example.html
Created March 3, 2021 17:06
Alpine Modals Using Events example
<x-layout>
<x-button class="bg-gray-400 hover:bg-gray-500" onclick="$modals.show('join-modal')">Join</x-button>
<x-modals.join />
<script>
window.$modals = {
show(name) {
window.dispatchEvent(
new CustomEvent('modal', { detail: name })
@JeffreyWay
JeffreyWay / example.html
Created February 25, 2021 20:23
CSS background gradient transition on hover example
<!doctype html>
<title>Gradient Transition Example</title>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<style>
.card {
position: relative;
background: linear-gradient(to bottom, #90cdf4, #2c5282)
}