Skip to content

Instantly share code, notes, and snippets.

View banyudu's full-sized avatar
🎯
Focusing

Yudu banyudu

🎯
Focusing
58 followers · 160 following
View GitHub Profile
@banyudu
banyudu / chrome-extension-development.blog.md
Created November 7, 2023 11:57
Chrome插件开发浅浅谈

  • 浅谈Chrome插件开发

  • 可能有很多人都用过Chrome插件，有没有好奇过Chrome插件是怎么开发的？

  • Chrome插件开发使用到的技术栈并不复杂，也是 HTML/CSS/JS 这些前端相关的技术，只是会有一套自己的 API 和限制等，下面带大家认识下 Chrome 插件的开发。

  • 插件是什么？

    • image

  • 插件怎么开发？

    • 原始阶段（类似于手动操作dom）

  • 引入各个浏览器（主要是Firefox）的sdk，调用sdk开发浏览器专用的插件

@banyudu
banyudu / figma-plugin-development-intro.blog.md
Last active April 16, 2024 05:55
Figma插件开发浅浅谈

Figma插件开发浅浅谈

Figma是一款优秀的设计工具，不仅可以便捷地实现协作开发，同时还提供了丰富的扩展能力，使得我们可以通过编写插件实现自定义的功能。

Figma官方是有提供开发者文档的，资料也比较齐全。推荐同时读一下 https://www.figma.com/plugin-docs/intro/。

@banyudu
banyudu / setup-multiple-global-config-for-git.blog.md
Last active April 8, 2024 07:54
多套Git全局配置并存方案

多套Git全局配置并存方案

背景

相信很多人经历过与我类似的困扰，工作和业余项目的作者信息相互干扰。

具体来说，就是希望工作项目都使用工作邮箱作为 user.email的配置，而业余项目都使用个人邮箱作为user.email的配置，user.name字段同理。

@banyudu
banyudu / free-docker-space-in-wsl2.blog.md
Last active April 5, 2024 05:43
WSL2 Docker释放磁盘空间

WSL2 Docker释放磁盘空间

Docker使用久了，会残留很多中间生成的镜像，占用磁盘空间。

要清理Docker镜像，本来是挺简单的，一条命令就搞定了：




  


  




    


          
    

      

        
        

          

              @banyudu
          

          

            
                banyudu
                / auto_publish_npm_and_generate_github_changelog.blog.md
            
            

              Created
              April 23, 2020 22:43
            

              
                自动化发布npm包及生成Github Changelog
              
          

        

      

        

  

      

    
手动维护npm包容易出现一些问题：忘记编译、多提交一些无关文件、网络不通等。自动化发布能够极大地简化这个过程。


最近刚调整过一次自动化流程，可以自动发布版本，及根据Commit消息生成Changelog。实现如下图所示的效果：


Demo效果图



  


  




    


          
    

      

        
        

          

              @banyudu
          

          

            
                banyudu
                / fix-eslint-cache-in-ci-with-git-restore-mtime.blog.md
            
            

              Last active
              March 28, 2024 03:25
            

              
                ESLint的缓存机制及其在CI中的应用
              
          

        

      

        

  

      

    
ESLint的缓存机制及其在CI中的应用


背景


ESLint是一个前端、Node领域中流行的代码规范检查工具，使用起来很方便。


之前为了强制推行代码规范，我在CI任务中加入了ESLint检查。保障了规范的同时，也引入了痛点：CI的时长延长了2~3分钟左右。因为现在开发的工程体量比较大，ESLint会占用很多的内存、CPU资源，且运行时间较长。



  


  




    


          
    

      

        
        

          

              @banyudu
          

          

            
                banyudu
                / react-markdown.blog.md
            
            

              Last active
              March 26, 2024 05:40
            

              
                React中渲染Markdown
              
          

        

      

        

  

      

    
最近使用React渲染Markdown，进行了一些简单的探索，和大家分享下相关经验。


基本的Markdown能力


当下有许多成熟的Markdown库，如 marked、react-markdown等，这里我采用的是react-markdown。因其与React有更好的结合。



  


  




    


          
    

      

        
        

          

              @banyudu
          

          

            
                banyudu
                / fix-git-pack-exceeds-maximum-allowed-size-problem.blog.md
            
            

              Last active
              March 18, 2024 16:15
            

              
                记一次Git仓库同步时大小超限问题的解决
              
          

        

      

        

  

      

    
记一次Git仓库同步时大小超限问题的解决


最近我尝试了将一个Git仓库上传到另一个Git服务器，本来是挺简单的一个步骤，但是遇到了一个大小超限的问题，搞得很麻烦：


remote: fatal: pack exceeds maximum allowed size



  


  




    


          
    

      

        
        

          

              @banyudu
          

          

            
                banyudu
                / setup-sentry-in-umi3.blog.md
            
            

              Created
              February 19, 2021 07:02
            

              
                Umi 3中配置Sentry
              
          

        

      

        

  

      

    
Umi 3中配置Sentry


Sentry官方方法


当在Sentry中新建一个React工程时，它会提示你按照如下的方式，在前端工程中集成Sentry。


首先安装上需要的依赖：



  


  




    


          
    

      

        
        

          

              @banyudu
          

          

            
                banyudu
                / .npmrc
            
            

              Last active
              February 6, 2024 12:03
            

              
                .npmrc for China users
              
          

        

      

        

  

    
    


        



  


  

        

          
          sass_binary_site=https://cdn.npmmirror.com/binaries/node-sass
        

        

          
          disturl=https://registry.npmmirror.com/dist
        

        

          
          profiler_binary_host_mirror=https://cdn.npmmirror.com/binaries/node-inspector/
        

        

          
          fse_binary_host_mirror=https://cdn.npmmirror.com/binaries/fsevents/
        

        

          
          phantomjs_cdnurl=https://cdn.npmmirror.com/binaries/phantomjs/
        

        

          
          electron_mirror=https://cdn.npmmirror.com/binaries/electron/
        

        

          
          chromedriver_cdnurl=https://cdn.npmmirror.com/binaries/chromedriver
        

        

          
          operadriver_cdnurl=https://cdn.npmmirror.com/binaries/operadriver
        

        

          
          selenium_cdnurl=https://cdn.npmmirror.com/binaries/selenium
        

        

          
          node_inspector_cdnurl=https://cdn.npmmirror.com/binaries/node-inspector