Skip to content

Instantly share code, notes, and snippets.

Jeffrey Way JeffreyWay

View GitHub Profile
@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>
@JeffreyWay
JeffreyWay / demo.html
Last active Jun 23, 2020
How and When to Extract Alpine Component Logic - https://laracasts.com/series/alpine-essentials/episodes/5
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>
View x-model-example.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>
View demo.html
<x-layout>
<x-section>
<x-tabs active="First">
<x-tab name="First">
First content goes here.
</x-tab>
<x-tab name="Second">
Second content goes here.
</x-tab>
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>
<style>
.active { color: blue; }
.tab-wrap { border: 1px dotted grey; padding: 1rem; margin-top: 1rem; }
View alpine-memory-game.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
View FizzBuzz.php
<?php
namespace App;
class FizzBuzz
{
public static function convert(int $number)
{
$result = '';
View laracasts_refactoring_to_lookup_tables.php
<?php
/**
* Refactor #1:
*/
// Before
if ($user->type === 'admin' || $user->type === 'mod' || $user->type === 'author') {
// Do something.
}
View PrimeFactors.php
<?php
namespace App;
class PrimeFactors
{
public function generate($number)
{
$factors = [];
@JeffreyWay
JeffreyWay / example.html
Last active Mar 27, 2020
Floating navigation bar example using the Intersection Observer API https://laracasts.com/series/how-do-i/episodes/25
View example.html
<!DOCTYPE html>
<html>
<head>
<title>Floating Navigation</title>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<style>
@keyframes slide-nav-down {
100% {
transform: translateY(0);
}
You can’t perform that action at this time.