Skip to content

Instantly share code, notes, and snippets.

View JamesBliss's full-sized avatar

James Bliss JamesBliss

12 followers · 14 following
  • Lush
  • London
View GitHub Profile
@JamesBliss
JamesBliss / Skeleton.html
Last active June 22, 2020 11:21
<!DOCTYPE html>
<html lang="en">
<head>
<title>Your Page Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Your name">
<meta name="description" content="Brief description">
@JamesBliss
JamesBliss / remapping.md
Created March 19, 2020 09:55
Remapping map # to § key

Now for the magic. If you don't already have it, you will need to create a DefaultKeyBinding.dict file here:

~/Library/KeyBindings/DefaultKeyBinding.dict

Once you have this file, open it and add:

{
    /* Map # to § key*/
    "§" = ("insertText:", "#");

}

@JamesBliss
JamesBliss / styled-function.md
Last active May 22, 2020 10:28
Styled component function

A function style for pulling out props in styled components.

/**
 * Better way to create functions within styled components...
 * ... if you want access to all / many of the props
 * @param {Object} args Any values you pass in when calling the function
 * @param {Object} props props passed into the styled component. e.g. theme
 */
const myFunc = (args) =&gt; (props = {}) =&gt; {
@JamesBliss
JamesBliss / styled-access.md
Last active May 27, 2020 11:27
How to access things in styled components

Styled components -> how to access other styled component or yourself!

& + &

& + ${() => Foo}

usage:

@JamesBliss
JamesBliss / mock-request-example.md
Created June 22, 2020 11:25

NAME

Request

GET /URL

Response
{
@JamesBliss
JamesBliss / styled-forwardedAs.md
Created June 23, 2020 09:18
forwardedAs like a boss

Styled components -> "as" breaking styles!

If using as renders a component without the desired styles, it is likely that you are using a styled component which extends another styled component. e.g.

const Element = styled.button`
  /* this is the root styled element */
`;
const Button = React.forwardRef(({ children, ...rest }, ref) => {
 return (
@JamesBliss
JamesBliss / react-useCallback.md
Created June 23, 2020 10:44
Measuring a DOM node

React => measuring a DOM node

Your first instinct will be to use a useRef which can be a good solution, although an object ref doesn’t notify us about changes to the current ref value. This means when the ref.current changes you will not see the updated value.

Solution 1.

Use a callback ref (this example is taken from the react hooks FAQ) This is a super simple and pretty nice solution for one-off measurements.




  


  




    


          
    

      

        
        

          

              @JamesBliss
          

          

            
                JamesBliss
                / linear-interpolation-functions.md
            
            

              Created
              November 16, 2020 09:59
            

              
                Linear Interpolation Functions
              
          

        

      

        

  

      

    
Linear Interpolation Functions


const lerp = (x, y, a) => x * (1 - a) + y * a;
const clamp = (a, min = 0, max = 1) => Math.min(max, Math.max(min, a));
const invlerp = (x, y, a) => clamp((a - x) / (y - x));
const range = (x1, y1, x2, y2, a) => lerp(x2, y2, invlerp(x1, y1, a));



  


  




    


          
    

      

        
        

          

              @JamesBliss
          

          

            
                JamesBliss
                / memoizedHandlers.js
            
            

              Created
              December 15, 2021 14:18
                — forked from kyleshevlin/memoizedHandlers.js
            

              
                Using React.useMemo to create a `handlers` object
              
          

        

      

        

  

    
    


        



  


  

        

          
          // One of my new favorite React Hook patternms is to create handler
        

        

          
          // functions for a custom hook using `React.useMemo` instead of
        

        

          
          // `React.useCallback`, like so:
        

        

          
          

        

        

          
          function useBool(initialState = false) {
        

        

          
            const [state, setState] = React.useState(initialState)
        

        

          
            
        

        

          
            // Instead of individual React.useCallbacks gathered into an object
        

        

          
            // Let's memoize the whole object. Then, we can destructure the
        

        

          
            // methods we need in our consuming component.
        

  





    


  




    


          
    

      

        
        

          

              @JamesBliss
          

          

            
                JamesBliss
                / readme.md
            
            

              Created
              February 8, 2022 12:02
                — forked from benstr/readme.md
            

              
                Gist Markdown Cheatsheet
              
          

        

      

        

  

      

    
#Heading 1
##Heading 2
###Heading 3
####Heading 4
#####Heading 5
######Heading 6




Paragraph