Skip to content

Instantly share code, notes, and snippets.

View mundizzle's full-sized avatar
🏠
Working from home

Mundi Morgado mundizzle

🏠
Working from home
49 followers · 63 following
View GitHub Profile
@crutchcorn
crutchcorn / line-draw.html
Created April 1, 2024 19:49
The code for this: https://twitter.com/crutchcorn/status/1774695605455224871
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width"/>
</head>
<body style="height: 300vh">
<svg style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);"
width="655" height="209" viewBox="0 0 655 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M653 207V62C653 28.8629 626.228 2 593.091 2C519.318 2 391.639 2 292.675 2C270.583 2 252.717 19.9124 252.717 42.0038C252.717 63.5378 252.717 81.7221 252.717 81.7221C252.717 81.7221 252.717 81.7221 252.717 81.7221V167C252.717 189.091 234.808 207 212.717 207H2"
stroke="#EAECF0" stroke-width="4" stroke-linecap="round"/>
@gaearon
gaearon / 00-README-NEXT-SPA.md
Last active May 4, 2024 12:36
Next.js SPA example with dynamic client-only routing and static hosting

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

Don't like Next? Here's how to do the same in Gatsby.

@EllyLoel
EllyLoel / reset.css
Last active April 13, 2024 18:14
CSS Reset
/*
Made by Elly Loel - https://ellyloel.com/
With inspiration from:
- Josh W Comeau - https://courses.joshwcomeau.com/css-for-js/treasure-trove/010-global-styles/
- Andy Bell - https://piccalil.li/blog/a-modern-css-reset/
- Adam Argyle - https://unpkg.com/open-props@1.3.16/normalize.min.css / https://codepen.io/argyleink/pen/KKvRORE
Notes:
- `:where()` is used to lower specificity for easy overriding.
*/
@antfu
antfu / doc-table.md
Last active October 14, 2023 20:09
Doc Table in Markdown

Example

Name

Description


@Widdershin
Widdershin / ssr.md
Last active May 1, 2024 17:36
The absurd complexity of server-side rendering

In the olden days, HTML was prepared by the server, and JavaScript was little more than a garnish, considered by some to have a soapy taste.

After a fashion, it was decided that sometimes our HTML is best rendered by JavaScript, running in a user's browser. While some would decry this new-found intimacy, the age of interactivity had begun.

But all was not right in the world. Somewhere along the way, we had slipped. Our pages went uncrawled by Bing, time to first meaningful paint grew faster than npm, and it became clear: something must be done.

And so it was decided that the applications first forged for the browser would also run on the server. We would render our HTML using the same logic on the server and the browser, and reap the advantages of both worlds. In a confusing series of events a name for this approach was agreed upon: Server-side rendering. What could go wrong?

In dark rooms, in hushed tones, we speak of colours.

@DavidWells
DavidWells / javascript-proxy-as-rest-client.js
Last active October 6, 2023 18:39
Using a javascript proxy as low code REST client
/* Using a JavaScript proxy for a super low code REST client */
// via https://dev.to/dipsaus9/javascript-lets-create-aproxy-19hg
// also see https://towardsdatascience.com/why-to-use-javascript-proxy-5cdc69d943e3
// also see https://github.com/fastify/manifetch
// also see https://github.com/flash-oss/allserver
// and https://gist.github.com/v1vendi/75d5e5dad7a2d1ef3fcb48234e4528cb
const createApi = (url) => {
return new Proxy({}, {
get(target, key) {
@rauschma
rauschma / cheat-sheet-strings.md
Last active January 15, 2022 16:29

Cheat sheet: strings

Strings are primitive values in JavaScript and immutable. That is, string-related operations always produce new strings and never change existing strings.

Working with strings

Literals for strings:

const str1 = 'Don\'t say "goodbye"'; // string literal
@rauschma
rauschma / cheat-sheet-arrays.md
Last active January 16, 2024 14:13

Cheat sheet: Arrays

JavaScript Arrays are a very flexible data structure and used as lists, stacks, queues, tuples (e.g. pairs), etc. Some

Using Arrays

Creating Arrays, reading and writing elements:




  


  




    


          
    

      

        
        

          

              @broofa
          

          

            
                broofa
                / checkForUndefinedCSSClasses.js
            
            

              Last active
              January 21, 2024 17:22
            

              
                ES module for detecting undefined CSS classes (uses mutation observer to monitor DOM changes). `console.warn()`s undefined classes.
              
          

        

      

        

  

    
    


        



  


  

        

          
          /**
        

        

          
           * Sets up a DOM MutationObserver that watches for elements using undefined CSS
        

        

          
           * class names. Performance should be pretty good, but it's probably best to
        

        

          
           * avoid using this in production.
        

        

          
           *
        

        

          
           * Usage:
        

        

          
           *
        

        

          
           *   import cssCheck from './checkForUndefinedCSSClasses.js'
        

        

          
           *
        

        

          
           *   // Call before DOM renders (e.g. in <HEAD> or prior to React.render())
        

  





    


  




    


          
    

      

        
        

          

              @malarkey
          

          

            
                malarkey
                / alt-styles.css
            
            

              Last active
              October 28, 2023 19:42
            

              
                A simpler approach to CSS styling using just one default style plus one alternative.
              
          

        

      

        

  

    
    


        



  


  

        

          
          /* CSS Custom Properties  */
        

        

          
          

        

        

          
          :root {
        

        

          
          --font-family-default: 'Merriweather', serif;
        

        

          
          --font-family-alt: 'Merriweather Sans', sans-serif;
        

        

          
          

        

        

          
          --font-color-default: #b1a18;
        

        

          
          --font-color-alt: #f5f5f3;
        

        

          
          

        

        

          
          --font-link-default: #a62339;