Skip to content

Instantly share code, notes, and snippets.

View bdsqqq's full-sized avatar
🎨

Igor Bedesqui bdsqqq

🎨
234 followers · 189 following
View GitHub Profile
@palmamartin
palmamartin / vesper-dark-color.json
Last active February 1, 2024 11:00
Vesper theme for Zed
{
"$schema": "https://zed.dev/schema/themes/v0.1.0.json",
"name": "Vesper",
"author": "Rauno Freiberg",
"themes": [
{
"name": "Vesper",
"appearance": "dark",
"style": {
"border": null,
@blvdmitry
blvdmitry / as prop
Created March 11, 2023 21:19
type Props<TagName extends keyof JSX.IntrinsicElements | void = void> = {
as?: TagName;
children?: React.ReactNode;
attributes?: Attributes<TagName>;
};
export type Attributes<TagName = void, O = void> = Omit<
(TagName extends keyof JSX.IntrinsicElements
? JSX.IntrinsicElements[TagName]
@JohnPhamous
JohnPhamous / chaos-string-test.js
Last active February 4, 2024 09:41
export const chaosTestStrings = (): void => {
const textNodes = getAllTextNodes(document.body);
for (const node of textNodes) {
const textNodeLength = node.textContent ? node.textContent.length : 0;
if (node.textContent === null) {
return;
}
if (node.parentElement instanceof Element) {
if (node.parentElement.dataset.originalText === undefined) {
@alii
alii / use-throttle.ts
Created July 7, 2021 00:14
use-throttle.ts
export function useThrottle<T>(value: T, limit = 1000) {
const [throttledValue, setThrottledValue] = useState(value);
const lastRan = useRef(Date.now());
useEffect(() => {
const handler = setTimeout(() => {
if (Date.now() - lastRan.current >= limit) {
setThrottledValue(value);
lastRan.current = Date.now();
}
@whoisryosuke
whoisryosuke / dynamic-refs.jsx
Created May 3, 2021 21:07
ReactJS - Dynamically create Refs for children using useRef hook and createRef - @see: https://stackoverflow.com/questions/55995760/how-to-add-refs-dynamically-with-react-hooks
const {
useState,
useRef,
createRef,
useEffect
} = React;
const data = [
{
text: "test1"
@itsMapleLeaf
itsMapleLeaf / validation.ts
Last active July 6, 2022 20:05
validation take 2
type ValidatorResult<T> = { type: "valid" } | { type: "invalid"; error: string }
type ValidateFn<T> = (value: unknown) => ValidatorResult<T>
type Validator<T = unknown> = {
validate: ValidateFn<T>
parse: (value: unknown) => T
is: (value: unknown) => value is T
}
@Merott
Merott / tailwind-colors-as-css-variables.md
Last active May 21, 2024 12:21
Expose Tailwind colors as CSS custom properties (variables)

This is a simple Tailwind plugin to expose all of Tailwind's colors, including any custom ones, as custom css properties on the :root element.

There are a couple of main reasons this is helpful:

  • You can reference all of Tailwind's colors—including any custom ones you define—from handwritten CSS code.
  • You can define all of your colors within the Tailwind configuration, and access the final values programmatically, which isn't possible if you did it the other way around: referencing custom CSS variables (defined in CSS code) from your Tailwind config.

See the Tailwind Plugins for more info on plugins.




  


  




    


          
    

      

        
        

          

              @kapulkin
          

          

            
                kapulkin
                / pyodide.html
            
            

              Last active
              March 5, 2021 13:56
            

              
                Pyodide sandbox: Loading csv file into numpy aray
              
          

        

      

        

  

    
    


        



  


  

        

          
          <html>
        

        

          
              <head>
        

        

          
          

        

        

          
              </head>
        

        

          
              <input type="file" id="fileInput" onchange="handleFiles(this.files)"/>
        

        

          
              <div id="pyodide"/>
        

        

          
              <body>
        

        

          
                  <script type="text/javascript">
        

        

          
          self.languagePluginUrl = "/python/"
        

  





    


  




    


          
    

      

        
        

          

              @YuCJ
          

          

            
                YuCJ
                / pureSplice.js
            
            

              Last active
              April 2, 2022 02:36
            

              
                A pure version of Array.prototype.splice(). It will return a new array rather than mutate the array.
              
          

        

      

        

  

    
    


        



  


  

        

          
          /**
        

        

          
           * A pure version of Array.prototype.splice
        

        

          
           * It will return a new array rather than mutate the array
        

        

          
           * See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
        

        

          
           * @param {Array} array The target array
        

        

          
           * @param {number} start Index at which to start changing the array
        

        

          
           * @param {number} deleteCount An integer indicating the number of old array elements to remove
        

        

          
           * @param {any} items The elements to add to the array, beginning at the start index
        

        

          
           * @returns {Array}
        

        

          
           */
        

  





    


  




    


          
    

      

        
        

          

              @JobLeonard
          

          

            
                JobLeonard
                / canvas.js
            
            

              Last active
              July 29, 2023 01:44
            

              
                A react component that wraps and autosizes a canvas element
              
          

        

      

        

  

    
    


        



  


  

        

          
          import React, {PropTypes} from 'react';
        

        

          
          import { debounce } from 'lodash';
        

        

          
          

        

        

          
          // A simple helper component, wrapping retina logic for canvas and
        

        

          
          // auto-resizing the canvas to fill its parent container.
        

        

          
          // To determine size/layout, we just use CSS on the div containing
        

        

          
          // the Canvas component (we're using this with flexbox, for example).
        

        

          
          // Expects a "paint" function that takes a "context" to draw on
        

        

          
          // Whenever this component updates it will call this paint function
        

        

          
          // to draw on the canvas. For convenience, pixel dimensions are stored