Fábio Vedovelli vedovelli

Project Name

TODO: Write a project description

Installation

TODO: Describe the installation process

Usage

OS X Screencast to animated GIF

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.

Instructions

To capture the video (filesize: 19MB), using the free "QuickTime Player" application:

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

Setup Mac OS X (Sierra)

1. Run Software Update

Make sure everything is up to date.

2. Install Xcode and its "Command Line Tools"

Go to App Store and install Xcode.

Strings

`String.prototype.*`

None of the string methods modify this – they always return fresh strings.

charAt(pos: number): string ^ES1

Returns the character at index pos, as a string (JavaScript does not have a datatype for characters). str[i] is equivalent to str.charAt(i) and more concise (caveat: may not work on old engines).

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"

I have been utilizing artificial intelligence to enhance and optimize my codebases. After evaluating various models, applications, and editors, I find the claude.ai interface with a Pro Account to be the most effective. Here’s the approach I’ve developed to achieve optimal results:

This gist contains a carefully crafted prompt and a script designed to convert your entire Laravel codebase (excluding the resources folder, which can be easily added if needed) into a TXT file with the following structure:

<File Start: ./path/filename.extension> Content of file <End File: ./path/filename.extension>

To implement this method:

	var gulp = require('gulp');
	var browserSync = require('browser-sync').create();
	var sass = require('gulp-sass');

	var exec = require('child_process').exec;

	gulp.task('browser-sync', function() {
	browserSync.init({
	proxy: "app.dev",
	notify: false

	import React from "react";
	import { render } from "react-dom";

	const ParentComponent = React.createClass({
	getDefaultProps: function() {
	console.log("ParentComponent - getDefaultProps");
	},
	getInitialState: function() {
	console.log("ParentComponent - getInitialState");
	return { text: "" };

	// @ts-nocheck
	import { PrismaClient } from '@prisma/client';

	let db: PrismaClient;

	declare global {
	let __db: PrismaClient \| undefined;
	}

	// this is needed because in development we don't want to restart