jasubal’s gists

jasubal / convert2webpResize.sh

Created January 30, 2025 10:37

	#!/bin/bash
	# Función de ayuda
	show_help() {
	echo "Uso: ./convert2webpResize.sh [opciones]"
	echo ""
	echo "Opciones:"
	echo " -h, --help Muestra esta ayuda y sale"
	echo " -c, --quality Calidad de la imagen (por defecto: 85)"
	echo " -r, --resize Redimensionar la imagen (por ejemplo: 800x600)"
	echo " --suffix Agregar sufijo a los archivos convertidos (por defecto: false)"

jasubal / includeAndCompactCSS.php

Last active March 16, 2025 12:30

WP includeAndCompactCSS

	<?php
	// example includeAndCompactCSS('style-css-file-in.php');
	function includeAndCompactCSS($filePath) {
	ob_start();
	//include($filePath);
	include get_template_directory() . '/' . $filePath;
	$content = ob_get_clean();
	$minifiedCSS = preg_replace(
	['/\n+/', '/\s{2,}/', '/\/\.?\*\//', ],
	['',' ',''],

jasubal / img2webp.bash

Created May 28, 2024 10:07

Using cwebp to Convert all Images (jpg,png) in a Folder to the WebP Format

jasubal / vid2Webm on Mac

Last active May 28, 2024 10:10 — forked from muratgozel/Convert mp4 to webm Using ffmpeg on Mac

	1. Install ffmpeg:
	brew install ffmpeg --with-vpx --with-vorbis --with-libvorbis --with-vpx --with-vorbis --with-theora --with-libogg --with-libvorbis --with-gpl --with-version3 --with-nonfree --with-postproc --with-libaacplus --with-libass --with-libcelt --with-libfaac --with-libfdk-aac --with-libfreetype --with-libmp3lame --with-libopencore-amrnb --with-libopencore-amrwb --with-libopenjpeg --with-openssl --with-libopus --with-libschroedinger --with-libspeex --with-libtheora --with-libvo-aacenc --with-libvorbis --with-libvpx --with-libx264 --with-libxvid

	2. Convert:
	ffmpeg -i input-file.mp4 -c:v libvpx -crf 10 -b:v 1M -c:a libvorbis output-file.webm

jasubal / js-class-port-view.js

Created March 16, 2024 23:03

JS Apply class when appears in portview

	<style>
	section.observe { opacity: 0.5; transition: all 0.3s ease; }
	section.observe.inportview { opacity: 1; transition: all 1s ease; }
	</style>

	<script>
	(function() {
	document.addEventListener("DOMContentLoaded", function() {
	const observerOptions = {
	root: null, // Use the viewport as the bounding box.

jasubal / js-scrolldetector-scrolledone.js

Last active January 15, 2024 11:05

JS Optimized Scroll detector and total of all Scrolled done

	let lastScrollTop = 0;
	const $html = document.documentElement;
	$html.classList.add('near-top');

	window.addEventListener('scroll', () => {
	const currentScrollTop = window.scrollY \|\| document.documentElement.scrollTop;
	const windowHeight = window.innerHeight;
	const docHeight = Math.max($html.scrollHeight, $html.offsetHeight, $html.clientHeight);
	const scrolledPercentage = ((currentScrollTop + windowHeight) / docHeight) * 100;
	const remainingScroll = 100 - scrolledPercentage;

jasubal / woo-on-per-type.php

Last active January 15, 2024 10:08

woo One product per type only

	<?php
	add_filter( 'woocommerce_add_to_cart_validation', 'limit_product_quantity_in_cart', 10, 3 );
	function limit_product_quantity_in_cart( $passed, $product_id, $quantity ) {
	if ( $quantity > 1 ) {
	wc_add_notice( __( 'Only a quantity of one is allowed per product.', 'domain' ), 'error' );
	return false;
	}
	foreach ( WC()->cart->get_cart() as $cart_item ) {
	if ( $cart_item['product_id'] == $product_id \|\| ( isset( $cart_item['variation_id'] ) && $cart_item['variation_id'] == $product_id ) ) {
	wc_add_notice( __( 'This product is already in your cart. Only a quantity of one is allowed per product.', 'domain' ), 'error' );

jasubal / plink-plonk.js

Created January 3, 2024 15:20 — forked from MarkArts/plink-plonk.js

Listen to your web pages

	// origin: https://gist.github.com/tomhicks/6cb5e827723c4eaef638bf9f7686d2d8 , tomhicks/plink-plonk.js

	/*
	Copy this into the console of any web page that is interactive and doesn't
	do hard reloads. You will hear your DOM changes as different pitches of
	audio.
	I have found this interesting for debugging, but also fun to hear web pages
	render like UIs do in movies.
	*/

jasubal / js-scrolldetector.js

Last active January 15, 2024 11:04

JS Optimized Scroll detector

	let lastScrollTop = 0;
	const $html = document.documentElement;
	$html.classList.add('near-top');
	window.addEventListener('scroll', () => {
	const currentScrollTop = window.scrollY \|\| document.documentElement.scrollTop;
	// Determine scroll direction and update classes using ternary expressions
	currentScrollTop > lastScrollTop ?
	($html.classList.add('scrolling-down'), $html.classList.remove('scrolling-up')) :
	($html.classList.add('scrolling-up'), $html.classList.remove('scrolling-down'));
	// Add or remove class based on scroll position using a ternary expression

jasubal / js-video-autoplay-when-viewport.html

Last active July 31, 2024 15:53

JS video autoplay triggered when scrolls into viewport

	<style>
	.video-container {
	width: 100%;
	max-width: 100vw; /* Adjust as needed */
	margin: auto;
	}
	</style>

	<div class="video-container">
	<video id="myVideo" width="100%" height="auto" muted autoplay muted playsinline loop controls webkit-playsinline >

Ja Sub Al jasubal