Danyel Alkeddah danyelkeddah

Conventional Commit Messages

See how a minor change to your commit message style can make a difference.

Tip

Take a look at git-conventional-commits , a CLI util to ensure these conventions, determine version and generate changelogs

Commit Message Formats

Default

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"

	#!/bin/bash
	# Creator: Phil Cook
	# Modified: Andy Miller
	#
	# >>> IMPORTANT: Moved to: https://github.com/rhukster/sphp.sh
	# >>> Kept here for legacy purposes
	#
	osx_major_version=$(sw_vers -productVersion \| cut -d. -f1)
	osx_minor_version=$(sw_vers -productVersion \| cut -d. -f2)
	osx_patch_version=$(sw_vers -productVersion \| cut -d. -f3)


	/**
	* First we will load all of this project's JavaScript dependencies which
	* includes Vue and other libraries. It is a great starting point when
	* building robust, powerful web applications using Vue and Laravel.
	*/

	require('./bootstrap');

	window.Vue = require('vue');

	<?php

	namespace App\Console\Commands;

	use Illuminate\Console\Command;
	use Illuminate\Support\Composer;
	use Symfony\Component\Finder\Finder;
	use Illuminate\Filesystem\Filesystem;
	use Symfony\Component\Console\Input\InputArgument;

	<div class="flex items-center m-2 fixed bottom-0 right-0 border border-gray-400 rounded p-2 bg-gray-300 text-pink-600 text-sm">
	<svg class="h-6 w-auto inline" viewBox="0 0 80 64" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path fill="url(#paint0_linear)" fill-rule="evenodd" clip-rule="evenodd" d="M32 16C24.8 16 20.3 19.6 18.5 26.8C21.2 23.2 24.35 21.85 27.95 22.75C30.004 23.2635 31.4721 24.7536 33.0971 26.4031C35.7443 29.0901 38.8081 32.2 45.5 32.2C52.7 32.2 57.2 28.6 59 21.4C56.3 25 53.15 26.35 49.55 25.45C47.496 24.9365 46.0279 23.4464 44.4029 21.7969C41.7557 19.1099 38.6919 16 32 16ZM18.5 32.2C11.3 32.2 6.8 35.8 5 43C7.7 39.4 10.85 38.05 14.45 38.95C16.504 39.4635 17.9721 40.9536 19.5971 42.6031C22.2443 45.2901 25.3081 48.4 32 48.4C39.2 48.4 43.7 44.8 45.5 37.6C42.8 41.2 39.65 42.55 36.05 41.65C33.996 41.1365 32.5279 39.6464 30.9029 37.9969C28.2557 35.3099 25.1919 32.2 18.5 32.2Z"></path>
	<defs>
	<linearGradient id="paint0_linear" x1="3.5" y1="16" x2="59" y2="48" gradien

	# For phpize
	apt install php7.3-dev

	# Install extensions
	pecl install ev
	pecl install event

	# Create configurations
	sudo echo 'extension=ev.so' > /etc/php/7.3/mods-available/ev.ini
	sudo echo 'extension=event.so' > /etc/php/7.3/mods-available/event.ini

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Wallet Connect</title>
	<script src="https://cdn.jsdelivr.net/npm/@walletconnect/[email protected]/dist/umd/index.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
	</head>
	<body>