Skip to content
View lvnam96's full-sized avatar
🐧
why are we still here? just to suffer?
🐧
why are we still here? just to suffer?
87 followers · 69 following

Organizations

@draftext

Block or report lvnam96

Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
lvnam96/README.md

Hi there, I'm Nam Waving Hand

Typing SVG

Technologist About Me

  • 🎓 I'm a Frontend Web Developer with a background in Information Technology.
  • 🛠️ I love building clean, scalable, and performant web apps.
  • 🌱 Currently exploring: System Design, Cloud Computing, AI.
  • 🧠 Always learning new things — currently diving into large-scale system design.
  • 📚 I enjoy learning from mistakes and sharing experience about building things.

Languages
Frameworks
Tools

github profile contributions chart

Fire Notable Projects

Project Description Tech Stack
Diijam - Music-streaming PWA Progressive web app that optimized fo smooth music streaming NextJS, hls.js, Docker, GCP, Microservices
Homemade-food multi-tenants store Something I am building to learn system design and end-to-end delivery of a software product Typescript, RemixJS, PostgreSQL, Docker Compose, GitHub Actions, Redis, Serverless
hls.js Quickly scan through codebase to fix a typing issue when extending default loaders Typescript

Call Me Hand Let's Connect!

If you’re hiring, collaborating, or just want to say hi — don’t hesitate to reach out. I'm always open to exciting opportunities and conversations.

Pinned Loading

  1. Resolve issue of passing `ref` on `d... Resolve issue of passing `ref` on `dynamic()` (lazy) loaded component in NextJS
    1 
    // Issue: https://github.com/vercel/next.js/issues/4957
    2 
    
              
    
              
    
                3
                
    
              
    
              
    
                4
                
    /**
    
              
    
              
    
                5
                
     * Usage is the same as `dynamic()` from NextJS with 1 exception: `ssr` IS ALWAYS FALSE
    
              
    
          
    
    
    
  
    

    2. 

      

  2. 
  
    
    
    
      
    
        
        promises-in-sequence-and-parallel.js  promises-in-sequence-and-parallel.js      
    

          
    
              
    
                1
                
    function workAfterDataRetrieved (data) {
    
              
    
              
    
                2
                
      return new Promise((resolve) => {
    
              
    
              
    
                3
                
        // doSomeDutyTaskHere();
    
              
    
              
    
                4
                
        console.log('task done: ' + data.name);
    
              
    
              
    
                5
                
        resolve();
    
              
    
          
    
    
    
  
    

    3. 

      

  3. 
  
    
    
    
      
    
        
        Responsive embedding of Google Maps ...  Responsive embedding of Google Maps (or anything <iframe> embedded really).      
    

          
    
              
    
                1
                
    # Responsive Google Maps embedding
    
              
    
              
    
                2
                
    Simple technique for embedding Google Maps `<iframe>`'s responsively using a `padding-bottom` percentage trick, which when applied to a block element will be calculated as a percentage of the _element width_ - essentially providing an aspect ratio.
    
              
    
              
    
                3
                
    
              
    
              
    
                4
                
    This technique should work on anything that is `<iframe>` embedded from your social network/service of choice.
    
              
    
          
    
    
    
  
    

    4. 

      

  4. 
  
    
    
    
      
    
        
        svelte-zustand (adapter)  svelte-zustand (adapter)      
    

          
    
              
    
                1
                
    <script lang="ts">
    
              
    
              
    
                2
                
      import { store, useAbcData, useSetData } from './store';
    
              
    
              
    
                3
                
    
              
    
              
    
                4
                
      // you can import store & access its prop directly:
    
              
    
              
    
                5
                
      $: console.log('new changes will be logged here', $store.data);
    
              
    
          
    
    
    
  
    

    5. 

      

  5. 
  
    
    
    
      
    
        
        Generate random dark HSL color (CSS)...  Generate random dark HSL color (CSS) in JavaScript      
    

          
    
              
    
                1
                
    const getRandomColor = () => {
    
              
    
              
    
                2
                
        const h = Math.floor(Math.random() * 360),
    
              
    
              
    
                3
                
              s = Math.floor(Math.random() * 100) + '%',
    
              
    
              
    
                4
                
              l = Math.floor(Math.random() * 60) + '%';// max value of l is 100, but I set to 60 cause I want to generate dark colors
    
              
    
              
    
                5
                
                                                       // (use for background with white/light font color)
    
              
    
          
    
    
    
  
    

    6.