Skip to content

Instantly share code, notes, and snippets.

Avatar

Jeffrey Way JeffreyWay

13.1k followers · 0 following · 12
View GitHub Profile
@JeffreyWay
JeffreyWay / example.html
Created Mar 3, 2021
Alpine Modals Using Events example
View example.html
<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 Feb 25, 2021
CSS background gradient transition on hover example
View example.html
<!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)
}
@JeffreyWay
JeffreyWay / app.js
Last active Feb 6, 2021
Swappable Heading example
View app.js
class SwappableHeading {
constructor(element, headings = []) {
this.element = element;
this.headings = headings;
this.current = 1;
}
async swap() {
while (true) {
await this.wait(2000);
@JeffreyWay
JeffreyWay / commands.js
Created Aug 27, 2020
View commands.js
/**
* Fetch the body of an iFrame.
*/
Cypress.Commands.add('getIframe', () => {
return cy
.get('iframe')
.its('0.contentDocument.body', { log: false })
.should('not.be.empty')
.then((body) => {
cy.wrap(body, { log: false });
@JeffreyWay
JeffreyWay / recaptcha.blade.php
Last active Mar 26, 2021
Recaptcha Example using Laravel, Blade Components, and Alpine
View recaptcha.blade.php
<div
x-data="recaptcha()"
x-init="init"
@recaptcha.window="execute"
></div>
@push('scripts')
<script src="https://www.google.com/recaptcha/api.js?render=explicit"></script>
<script>
@JeffreyWay
JeffreyWay / demo.html
Created Jul 21, 2020
Alpine.js Essentials: Handling Custom Events
View demo.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Alpine Examples</title>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"
defer
></script>
@JeffreyWay
JeffreyWay / web.php
Created Jul 17, 2020
Array Filtering + Casting Demo
View web.php
<?php
use Illuminate\Support\Str;
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('welcome');
});
Route::get('/names', function () {
@JeffreyWay
JeffreyWay / demo.php
Last active Jul 29, 2020
Line Clamping Demo - https://laracasts.com/series/css-quirks-and-pitfalls/episodes/2
View demo.php
<!DOCTYPE html>
<html>
<head>
<title>CSS Quirks</title>
<link
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet"
/>
<style>
.clamp {
@JeffreyWay
JeffreyWay / series.blade.php
Created Jul 10, 2020
View series.blade.php
<x-layout>
<x-slot name="head">
<x-social-media-meta
title="Blade Component Examples"
description="Learn about all sorts of Blade component tips and tricks."
image="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg"
card="summary"
/>
</x-slot>
@JeffreyWay
JeffreyWay / demo.html
Created Jun 29, 2020
Alpine.js Transition demo
View demo.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Alpine Examples</title>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"
defer
></script>