Mattèo Gauthier MatteoGauthier

Awesome Piracy

A curated list of arrrrrrrrr!

Converting Tailwind UI Alpine transitions to Vue transitions

After you copy a component from the Tailwind UI library and begin to adapt it from Vue JS to Alpine JS .. you may wonder what to do about the transitions. As I'm exploring this myself, I am documenting it for others in the same boat.

Things to be aware of:

Alpine calls the beginning and ending states "start" & "end"
Vue calls the beginning and ending states "from" and "to"
Alpine has inline "directives" ie x-transition:enter="classes"
Vue has a wrapper component that applies classes to the child
Alpine applies the classes you pass it for each state, :enter-start="class"

macOS 10.15 System Preference Panes

Below are a list of System Preference pane URLs and paths that can be accessed with scripting to assist users with enabling macOS security settings without having to walk them through launching System Preferences, finding panes, and scrolling to settings. Not all panes have an accessible anchor and some are OS specific.

To find the Pane ID of a specific pane, open the System Preferences app and select the desired Preference Pane. With the pane selected, open the ScriptEditor.app and run the following script to copy the current Pane ID to your clipboard and display any available anchors:

tell application "System Preferences"
	set CurrentPane to the id of the current pane
	set the clipboard to CurrentPane

List of NFL API Endpoints

This page has been updated a lot in the past 3 years. Older revisions you might like more than this one:

June 2021 - list of endpoints for other sports/leagues (i.e. nba, nhl, mlb)
August 2021 - get historical fantasy league data
September 2021 - list of endpoints in plain text
May 2023 - collapsed endpoint response examples
Mar 2025 - endpoint

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

Use ESM yourself. (preferred)
Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
Stay on the existing version of the package until you can move to ESM.

	<template>
	<div class>
	<div class="bg-grey-light h-1"></div>
	<div class="flex">
	<div class="flex-1" v-for="s in steps" :key="s">
	<div
	v-if="step >= s"
	class="bg-blue -mt-1 h-1"
	:class="{ 'w-1/2': step == s, 'w-full': step < s }"
	></div>

	// Inspired by https://twitter.com/coderitual/status/1112297299307384833 and https://tapajyoti-bose.medium.com/7-killer-one-liners-in-javascript-33db6798f5bf

	// Remove any duplicates from an array of primitives.
	const unique = [...new Set(arr)]

	// Sleep in async functions. Use: await sleep(2000).
	const sleep = (ms) => (new Promise(resolve => setTimeout(resolve, ms)));
	// or
	const sleep = util.promisify(setTimeout);

	// Copyright 2019 Google LLC.
	// SPDX-License-Identifier: Apache-2.0

	// Polynomial approximation in GLSL for the Turbo colormap
	// Original LUT: https://gist.github.com/mikhailov-work/ee72ba4191942acecc03fe6da94fc73f

	// Authors:
	// Colormap Design: Anton Mikhailov ([email protected])
	// GLSL Approximation: Ruofei Du ([email protected])

	import 'package:flutter/material.dart';

	void main() => runApp(NeumorphicApp());

	class NeumorphicApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return MaterialApp(
	title: 'Neumorphic App',
	theme: ThemeData(

	{
	"Print to console": {
	"scope": "javascript,typescript",
	"prefix": "log",
	"body": ["console.log('$1');"],
	"description": "Log output to console"
	}
	}