oscarmarina’s gists

oscarmarina / vite-config.js

Last active November 24, 2021 21:45

	/* eslint-disable implicit-arrow-linebreak */
	import { defineConfig } from 'vite';
	import pluginHtml from '@web/rollup-plugin-html';
	import copy from 'rollup-plugin-copy';
	import summary from 'rollup-plugin-summary';
	import minifyHTML from 'rollup-plugin-minify-html-literals';

	const minifyHTMLLiteralsConfig = {
	options: {
	minifyOptions: {

oscarmarina / ZSH_THEME="gnzh-update"

Created January 6, 2022 19:48

	# Based on bira theme

	setopt prompt_subst

	() {

	local PR_USER PR_USER_OP PR_PROMPT PR_HOST

	# Check the UID
	if [[ $UID -ne 0 ]]; then # normal user

oscarmarina / pseudo-css-support.js

Last active April 15, 2023 13:19

Testing Support for CSS Pseudo-classes & Pseudo-elements

	/**
	* Checks if the given CSS pseudo-selector is supported by the browser.
	*
	* @param {string} selector - The CSS pseudo-selector to check.
	* @returns {boolean} - True if the selector is supported, false otherwise.
	*/
	export const isPseudoSelectorSupported = (selector) => {
	const style = document.createElement('style');
	let isSupported;

oscarmarina / browser-user-agent-regular-expressions.txt

Created February 11, 2022 09:25

https://jonlabelle.com/snippets/view/yaml/browser-user-agent-regular-expressions

oscarmarina / select-grid.html

Last active August 19, 2022 11:54

Custom Select Field Styling with Only CSS

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<!-- https://codepen.io/5t3ph/pen/MWyyYNz -->
	<!-- https://medium.com/@vfowler/design-form-input-width-to-guide-sighted-users-a6022dd54e73 -->
	<!-- https://javascript.plainenglish.io/how-to-adjust-the-width-of-an-input-field-to-the-width-of-its-input-value-728ef59bc3e9 -->

oscarmarina / focus-visible-on-a-select.html

Created May 15, 2022 08:25

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>:focus-visible</title>
	<style>
	pre {
	height: 100px;

oscarmarina / escapeHTML.js

Created September 8, 2022 06:53

Escapes a string for use in HTML.

	export const escapeHTML = (str) =>
	str.replace(
	/[&<>'"]/g,
	(character) =>
	({
	'&': '&',
	'<': '<',
	'>': '>',
	"'": ''',
	'"': '"',

oscarmarina / find-package-with-attribute.js

Created February 5, 2023 19:28

Traverse the directory tree in Node.js, starting from the current working directory, searching for a "package.json" file with a specific attribute while excluding the node_modules folder and files starting with a dot (.)

	import fs from 'fs';
	import path from 'path';

	const traverseTree = (dir, attribute, cacheTravese = '') => {
	const files = fs.readdirSync(dir);
	for (const file of files) {
	if (
	file === 'node_modules' \|\|
	file.startsWith('.') \|\|
	file === cacheTravese

oscarmarina / getObjectType.js

Created March 16, 2023 15:00

This function uses Object.prototype.toString.call() to obtain the string representation of the obj argument. This function follows the pattern '[object <type>]', where <type> is the name of the object's constructor.

	const getObjectType = obj => Object.prototype.toString.call(obj).slice(8, -1);

	console.log(getObjectType(new Date())); // Date
	console.log(getObjectType([])); // Array
	console.log(getObjectType(true)); // Boolean
	console.log(getObjectType(function() {})); // Function
	console.log(getObjectType(x => x)); // Function
	console.log(getObjectType(null)); // Null
	console.log(getObjectType(37)); // Number
	console.log(getObjectType(NaN)); // Number

oscarmarina / getScrollableParent.js

Last active May 7, 2024 19:49

Returns the scroll parent of an element along a specified axis and the scroll size and client size.

	/**
	* Returns the scroll parent of an element along a specified axis and the scroll size and client size.
	*
	* @param {HTMLElement} el - The element to find the scroll parent of.
	* @param {String} [axis='y'] - The axis to find the scroll parent for.
	* @returns {Object} An object with the following properties:
	* @property {HTMLElement} scrollParent - The scroll parent element.
	* @property {Number} scrollParentSize - The size of the scroll parent along the specified axis.
	* @property {Number} clientParentSize - The size of the scroll parent's client area along the specified axis.
	*/

Oscar Marina oscarmarina