Skip to content

Instantly share code, notes, and snippets.

View pazguille's full-sized avatar

Guille Paz pazguille

811 followers · 178 following
View GitHub Profile
@pazguille
pazguille / rsc.jsx
Last active April 11, 2024 05:35
Deno + RSC
// deno run --allow-net rsc.jsx
// deno run --allow-net https://gist.githubusercontent.com/pazguille/a2e3792c1901e12e67453ccb19cc0da6/raw/752200e809993fd2176381b7b09d8308dca6d069/rsc.jsx
import { serve } from 'https://deno.land/std/http/server.ts';
import React, { Suspense } from "https://esm.sh/react@18.3.0-next-8e17bfd14-20230322";
import ReactDOMServer from 'https://esm.sh/react-dom@18.3.0-next-8e17bfd14-20230322/server';
import ReactServerDOMServer from 'https://esm.sh/react-server-dom-webpack@18.3.0-next-8e17bfd14-20230322/server.browser';
import ReactServerDOMClient from 'https://esm.sh/react-server-dom-webpack@18.3.0-next-8e17bfd14-20230322/client';
function Hello({ name }) {
@pazguille
pazguille / yieldToMain.js
Last active October 19, 2023 18:11
Break up your long tasks. One way to yield to the main thread using a combination of a Promise that resolves with a call to setTimeout.
// Based on: https://web.dev/optimize-long-tasks/
window.yieldToMain = function yieldToMain(task) {
return new Promise(resolve => {
setTimeout(() => {
task && task();
resolve();
}, 0);
});
}
@pazguille
pazguille / requestIdleCallback.js
Created October 2, 2022 10:38
requestidlecallback polyfill
window.requestIdleCallback = window.requestIdleCallback || function (cb) {
var start = Date.now();
return setTimeout(function () {
cb({
didTimeout: false,
timeRemaining: function () {
return Math.max(0, 50 - (Date.now() - start));
}
});
}, 1);
@pazguille
pazguille / prefetch.js
Last active August 14, 2023 23:33
Prefetch links based on what is in the user's viewport.
window.addEventListener('load', () => {
window.requestIdleCallback = window.requestIdleCallback || function (cb) {
const start = Date.now();
return setTimeout(function () {
cb({
didTimeout: false,
timeRemaining: function () {
return Math.max(0, 50 - (Date.now() - start));
}
});
@pazguille
pazguille / calculate-reading-time-javascript.js
Last active March 9, 2024 14:10
Calculate the estimated reading time of an article using JavaScript
function readingTime(txt) {
const wpm = 225; // average adult reading speed (words per minute).
const words = txt.trim().split(/\s+/).length;
const time = Math.ceil(words / wpm);
return time;
}
const time = readingTime(
document.querySelector("article").innerText
);
@pazguille
pazguille / deno-jsx.jsx
Last active July 30, 2022 20:42
SSR Minimalist for Deno using JSX (Preact)
/** @jsx h */
/** @jsxFrag Fragment */
import { Fragment, h } from "https://esm.sh/preact";
import { render } from "https://esm.sh/preact-render-to-string";
function HelloWorld({ name }) {
return <p>Hello {name}!</p>;
}
const html = await render(
@pazguille
pazguille / partytown.html
Last active April 9, 2024 18:19
Use Partytown 🎉 without frameworks
<!doctype html>
<html lang="es-AR">
<head>
<meta charset="utf-8" />
<meta name="HandheldFriendly" content="True" />
<link rel="preconnect" href="https://www.dolarsi.com" />
</head>
<body>
<script type="text/partytown">
window.dataLayer = window.dataLayer || [];
@pazguille
pazguille / getMoonPhase.js
Last active February 1, 2022 00:55
const phases = [{
phase: "new",
min: 0,
max: 1
},
{
phase: "waxing crescent",
min: 1,
max: 6.38264692644
},
@pazguille
pazguille / getHoroscopeSign.js
Created January 31, 2022 20:30
const signs = {
1: day => day <= 19 ? 'capricorn' : 'aquarius',
2: day => day <= 18 ? 'aquarius' : 'pisces',
3: day => day <= 20 ? 'pisces' : 'aries',
4: day => day <= 19 ? 'aries' : 'taurus',
5: day => day <= 20 ? 'taurus' : 'gemini',
6: day => day <= 20 ? 'gemini' : 'cancer',
7: day => day <= 22 ? 'cancer' : 'leo',
8: day => day <= 22 ? 'leo' : 'virgo',
9: day => day <= 22 ? 'virgo' : 'libra',
@pazguille
pazguille / a11y-learning.md
Last active July 13, 2023 19:47