Skip to content

Instantly share code, notes, and snippets.

View raisiqueira's full-sized avatar
👽
learning something new!

Raí Siqueira raisiqueira

👽
learning something new!
View GitHub Profile
@1Marc
1Marc / reactive.js
Last active April 26, 2024 16:37
Vanilla Reactive System
// Credit Ryan Carniato https://frontendmasters.com/courses/reactivity-solidjs/
let context = [];
export function untrack(fn) {
const prevContext = context;
context = [];
const res = fn();
context = prevContext;
return res;
@marvinhagemeister
marvinhagemeister / bind-plugin.ts
Last active January 9, 2024 20:31
Preact Signals `bind:value`
import { options } from "preact";
import { Signal } from "@preact/signals";
// Add `bind:value` to JSX types
declare global {
namespace preact.createElement.JSX {
interface HTMLAttributes {
"bind:value"?: Signal<string | string[] | number | undefined>;
}
}
@jordienr
jordienr / tailwind.config.ts
Created July 15, 2023 09:10
Tailwind SVG Grid Background
// Remember to install mini-svg-data-uri
// Follow me on twitter for memes @jordienr
import { type Config } from "tailwindcss";
const {
default: flattenColorPalette,
} = require("tailwindcss/lib/util/flattenColorPalette");
const svgToDataUri = require("mini-svg-data-uri");
export default {
@lacolaco
lacolaco / 1.ngx-reactify.tsx
Last active February 26, 2024 08:13
A React component to render a standalone Angular component (Angular v14.2 is required)
import { ApplicationRef, ComponentRef, createComponent, Type } from "@angular/core";
import { createApplication } from "@angular/platform-browser";
import React, { useEffect, useRef, useState } from "react";
type AnyComponentRef = ComponentRef<unknown>;
export type ReactifyProps = {
component: Type<unknown>;
inputs?: Record<string, unknown>;
};
@souporserious
souporserious / build.mjs
Created February 24, 2022 02:48
Build script using esbuild and ts-morph to bundle library code.
import glob from 'fast-glob'
import { build } from 'esbuild'
import { Project } from 'ts-morph'
const project = new Project({
compilerOptions: {
outDir: 'dist',
emitDeclarationOnly: true,
},
tsConfigFilePath: './tsconfig.json',
@sibelius
sibelius / learning-path-web3.md
Last active January 8, 2024 19:16
Learning Path Web3
  • learn blockchain concepts
  • learn ethereum
  • learn how to use metamask
  • learn how to use hardhat (https://hardhat.org/)
  • learn how to deploy and interact with a smart contract
  • learn common smart contract standards like ERC20 (token), ERC721 (nft), ERC1155 (opensea)
  • learn ipfs
  • learn how to read blockchain explorers like https://etherscan.io/
  • learn how to use web3 and etherjs
  • learn solidity
{
"final_space": true,
"console_title": true,
"console_title_style": "folder",
"blocks": [
{
"type": "prompt",
"alignment": "left",
"horizontal_offset": 0,
"vertical_offset": 0,
@sibelius
sibelius / FeatureFlag.tsx
Created May 6, 2020 12:33
Basic Feature Flag implementation using React.Context
import React, { useContext, useCallback } from 'react';
export const FeatureFlagContext = React.createContext<string[]>([]);
export const useFeatureFlag = () => {
const features = useContext<string[]>(FeatureFlagContext);
const hasFeature = useCallback(
(feature: string) => {
return features.includes(feature);
function useAbortController() {
const abortControllerRef = React.useRef()
const getAbortController = React.useCallback(() => {
if (!abortControllerRef.current) {
abortControllerRef.current = new AbortController()
}
return abortControllerRef.current
}, [])
React.useEffect(() => {