breadthe

#
# REQUIRES:
#       - server (the forge server instance)
#       - event (the forge event instance)
#       - sudo_password (random password for sudo)
#       - db_password (random password for database user)
#       - callback (the callback URL)
#

breadthe

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;
use Symfony\Component\Console\Formatter\OutputFormatterStyle;

class SymfonyColorsDemo extends Command
{
    protected $signature = 'demo:symfony-colors';

breadthe

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;

class CustomColorAsciiLogoDemo extends Command
{
    protected $signature = 'demo:ascii-logo';

breadthe

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Concerns\ThrottlesRequests;
use App\Http\Requests\Auth\SignInRequest;
use App\Http\Requests\Auth\SignUpRequest;
use App\Models\User;
use Illuminate\Auth\Events\Registered;
use Illuminate\Http\RedirectResponse;

breadthe

1. Message yourself /slackdevtools
2. In the DevTools console:

function addStyle (styleString) {
  const style = document.createElement('style');
  style.textContent = styleString;
  document.head.append(style);
}

addStyle(`

breadthe

// @see https://stackoverflow.com/a/8809472
export function uuid() { // Public Domain/MIT
    var d = new Date().getTime();//Timestamp
    var d2 = (performance && performance.now && (performance.now() * 1000)) || 0;//Time in microseconds since page-load or 0 if unsupported
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = Math.random() * 16;//random number between 0 and 16
        if (d > 0) {//Use timestamp until depleted
            r = (d + r) % 16 | 0;
            d = Math.floor(d / 16);
        } else {//Use microseconds since page-load if supported

breadthe

const plugin = require('tailwindcss/plugin');
const production = !process.env.ROLLUP_WATCH;

module.exports = {
    purge: {
        enabled: production,
        content: [
            './src/**/*.html',
            './src/**/*.svelte',
        ],

breadthe

<!-- Based on Demystifying Svelte Transitions (Tan Li Hau) Svelte Summit 2020 -->
<script>
  function customTransition(node) {
    let originalText = node.textContent;
    
    return {
      delay: 0,
      duration: 1000,
      css: (t, u) => {
        if (t < 0.4) return `font-weight: 500; color: maroon;`;

breadthe

<script>
  import getData from './fetcher.js';

  const response = getData(url);

  {#await $response}
    <Spinner />
  {:then data}
    <code {data}>
  {:catch}

breadthe

// custom style using sass & tailwindcss

.vscomp-ele {
    max-width: 100% !important;

    .vscomp-toggle-button {
        @apply mt-1 border-gray-300 transition block w-full duration-150 rounded-md shadow-inner bg-gray-100 py-3;

        &:focus {
            @apply border border-info ring-info ring-opacity-25;