Skip to content

Instantly share code, notes, and snippets.

@SrJSDev
SrJSDev / openai-scrape.js
Last active March 5, 2024 07:14
GPT-4 Vision API + Puppeteer = Easy Web Scraping
import puppeteer from 'puppeteer-extra';
import StealthPlugin from 'puppeteer-extra-plugin-stealth';
import OpenAI from 'openai';
import readline from 'readline';
import fs from 'fs';
// Configure Puppeteer with StealthPlugin
puppeteer.use(StealthPlugin());
// Initialize OpenAI and timeout constant
@SrJSDev
SrJSDev / Swapper.tsx
Last active February 26, 2024 16:38
Swapper (ReactJS)
import React, { useLayoutEffect, useState } from 'react';
type SwapperProps = {
children: React.ReactNode;
tick?: any;
cssEffect: {
out: {
className: string;
timerMs: number;
onStart?: () => void;
@SrJSDev
SrJSDev / Chrome.tsx
Last active February 13, 2024 17:15
Flexible CSS Grid web app layout component and styles (ReactJS, MUI)
import { CSSProperties } from 'react';
import { Box } from '@mui/material';
import { NotificationBar } from '../NotificationBar';
export type PageLayoutProps = {
children: JSX.Element | JSX.Element[];
appMaxWidth?: boolean;
pageMaxWidth?: string;
@SrJSDev
SrJSDev / bookmarklet.js
Last active February 13, 2024 07:33
YouTube Transcript copy to clipboard bookmarklet (JavaScript)
javascript:void function(){document.querySelector("%23expand").click(),document.querySelector("button[aria-label=\"Show transcript\"]").click(),setTimeout(()=>{var a=document.querySelector("#content #body.ytd-transcript-search-panel-renderer").innerText;navigator.clipboard.writeText(a).then(()=>{alert("Transcript copied to clipboard")})},2e3)}();
@SrJSDev
SrJSDev / geoIP.js
Created January 27, 2024 21:59
Simple & Free IP info API
const geoIP = (ip) => await fetch(`https://ipinfo.io/${ip}/geo`).then(r => r.json())
/*
{
"ip": "70.75.208.132",
"hostname": "s0106889e6845ba54.lb.shawcable.net",
"city": "Lethbridge",
"region": "Alberta",
"country": "CA",
"loc": "49.7000,-112.8186",
@SrJSDev
SrJSDev / prompt.txt
Created May 23, 2023 16:55
logical solver prompts (chatGPT)
Step1 :
Ignore all previous instructions. You are a logical and problem solver genius. Always find the best and most simple and obvious soulution to a problem.Always break down the problem, objects, numbers and logic before starting to solve the problem in a step-by-step way.Acknowledge this by answering yes:
Step 2:
Find the simplest and most efficient way to solve the following problem. Please consider multiple solutions, start with the simplest solutions first, then compare their efficiency, and explain the best solution step-by-step. Here is the problem: [Problem] Lets think about the soulution for this task step-by-step:
Step 3:
@SrJSDev
SrJSDev / prompt.txt
Created May 23, 2023 16:53
The Tree of Thoughts Prompt Template (chatGPT)
Step1 :
Prompt: I have a problem related to [describe your problem area]. Could you brainstorm three distinct solutions? Please consider a variety of factors such as [Your perfect factors]
Step 2:
Prompt: For each of the three proposed solutions, evaluate their potential. Consider their pros and cons, initial effort needed, implementation difficulty, potential challenges, and the expected outcomes. Assign a probability of success and a confidence level to each option based on these factors
Step 3:
@SrJSDev
SrJSDev / intersection-observers.ts
Created April 15, 2023 23:49
intersection observers with callback
export type Callback = (
entry: IntersectionObserverEntry,
observer: IntersectionObserver,
) => void
const opts = { threshold: 0 }
const observer = new IntersectionObserver(
(entries, ob) => {
entries.forEach((entry) => {
entry.target.classList.toggle("__is-intersecting", entry.isIntersecting)
@SrJSDev
SrJSDev / throttle-func.js
Created November 15, 2022 06:33 — forked from crazy4groovy/throttle-func.js
A simple queue to throttle max X simultaneous async function executions (JavaScript)
export default function newQueue(
maxCurr = 10,
func,
{ logger, logtag = "" } = {}
) {
let curr = 0;
const queue = [];
async function scheduleWork() {
if (curr >= maxCurr || queue.length === 0) return;
@SrJSDev
SrJSDev / fade-in-out-effect.js
Last active November 10, 2022 21:03 — forked from crazy4groovy/lazyimg-IntersectionObserver.js
Intersection Observer examples
// https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#creating_an_intersection_observer
const options = {};
const observer = new IntersectionObserver((entries, self) => {
entries.forEach(({isIntersecting, target}) => {
target.classList.toggle('show', isIntersecting);
})
}, options);
document.querySelectorAll('.hidden').forEach(target => observer.observe(target));