Merge remote-tracking branch 'origin/main'

Author: snailRun

data/blog/post-13.mdx

@@ -0,0 +1,49 @@
+---
+title: 纯前端实现超大图片超快稳定压缩
+date: 2024-08-24T14:27:32Z
+slug: post-13
+author: chaseFunny：https://github.com/chaseFunny
+tags: ["图片压缩"]
+---
+
+## 背景
+
+先给大家看一下压缩效果，是不是非常好，下面看看如何实现吧！
+
+![image-20240824221714151](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/work/image-20240824221714151.png)
+
+在最近开发中，因为我们的网站用户可能上传很大的图片，那如果直接提示用户上传失败，或者禁止上传大图，可能对用户不太友好，用户还需要去压缩图片然后再回来上传，增加了用户使用系统难度，于是就想让后端同学在服务端进行图片压缩，但是后端同学说压缩图片很消耗系统资源，不如使用第三方付费服务，我就想能不能在客户端实现图片压缩呢？毕竟客户端压缩有很多优势呢！
+
+## 客户端压缩为什么比服务端压缩更有优势？
+
+1 ) 减轻服务器负担：压缩服务在客户端实现，这样能大大减少我们服务器的压力，毕竟用户的资源消耗不要钱，我们服务器都是真金白银
+
+2）提升用户体验：我们不需要把很大的资源上传到服务器，而是传给服务器一个很小的资源，对于网络差的用户非常友好
+
+3）实时查看压缩效果：如果有需要看压缩效果的场景，客户端压缩用户很快能看到压缩效果，但是服务端就需要先把大资源发送到服务端，然后再进行压缩处理返回小资源，然后客户端才展示，用户可能都睡着了。。
+
+## 实现
+
+不知要大家平时是否有压缩图片的需求，大家会使用什么呢？我可以推荐两个在线压缩图片服务，非常好用：
+
+- https://tinify.cn/
+- https://squoosh.app/
+
+那第二个是谷歌开源的压缩服务，是在客户端实现，都是在本地操作，安全快捷，接下来我的实现也是依赖于它。
+
+谷歌的开源代码是：https://github.com/GoogleChromeLabs/squoosh
+
+有大神进行了封装，让我们可以在前端很方便使用：https://github.com/ElonXun/squoosh-compress
+
+然后，我们就安装这个包，然后按照文档进行压缩即可，我这里写了一个使用的示例代码，可供大家参考：
+
+https://github.com/chaseFunny/image-compression
+
+## END
+
+不知道大家是否有更好的图片压缩实现方式，大家觉得图片压缩在客户端还是服务器实现更好点呢？
+
+
+
+---
+此文自动发布于：<a href="https://github.com/coderPerseus/blog/issues/13" target="_blank">github issues</a>

data/blog/post-14.mdx

@@ -0,0 +1,91 @@
+---
+title: 那些优秀的程序员和他们的个人 blog
+date: 2024-08-25T17:04:14Z
+slug: post-14
+author: coderPerseus：https://github.com/coderPerseus
+tags: ["blog","coder"]
+---
+
+# 本文记录在网上发现的编程大佬（前端居多）们
+
+> 关于作者的介绍，都是通过 AI 生成，目前使用的大模型是：Claude 3.5 Sonnet
+
+## 阮一峰
+
+> https://www.ruanyifeng.com/
+
+阮一峰是中国著名的程序员、作家和博主。他的个人网站 https://www.ruanyifeng.com/ 是一个广受欢迎的技术博客，主要关注 Web 开发、JavaScript、计算机科学以及其他相关技术话题[1](https://www.ruanyifeng.com/blog/).
+
+阮一峰的博客具有以下特点：
+
+1. 内容丰富多样：博客涵盖了广泛的技术主题，从前端开发到后端技术，从编程语言到计算机基础知识，应有尽有[1](https://www.ruanyifeng.com/blog/).
+
+2. 通俗易懂：阮一峰擅长将复杂的技术概念用简单明了的语言解释清楚，使得他的文章对于初学者和有经验的开发者都很有价值[1](https://www.ruanyifeng.com/blog/).
+
+3. 更新频繁：阮一峰经常更新他的博客，保持对最新技术趋势和发展的跟进[1](https://www.ruanyifeng.com/blog/).
+
+4. 科技人文：除了技术文章，阮一峰还经常发表一些关于科技对社会影响的思考，以及一些人文类的文章[1](https://www.ruanyifeng.com/blog/).
+
+5. 开源贡献：阮一峰积极参与开源社区，他的许多项目和教程都在 GitHub 上开源[1](https://www.ruanyifeng.com/blog/).
+
+阮一峰的博客不仅仅是一个技术资源，更是一个学习平台。他的"每周分享"栏目汇总了他每周在互联网上发现的有趣且有价值的内容，涵盖了技术、科学、人文等多个领域，深受读者喜爱[1](https://www.ruanyifeng.com/blog/).
+
+此外，阮一峰还著有多本技术书籍，如《ECMAScript 6 入门》、《黑客与画家》（翻译）等，这些作品进一步巩固了他在中国技术社区的影响力[1](https://www.ruanyifeng.com/blog/).
+
+总的来说，阮一峰的博客是中文互联网上最具影响力的技术博客之一，为众多开发者提供了宝贵的学习资源和技术见解。无论是技术新手还是经验丰富的程序员，都能在他的博客中找到有价值的内容[1](https://www.ruanyifeng.com/blog/).
+
+## joshwcomeau
+
+> https://www.joshwcomeau.com/
+ 
+Josh W Comeau 是一位知名的前端开发者和技术博主。他的个人博客 https://www.joshwcomeau.com/ 主要关注 Web 开发领域，特别是 React、JavaScript 和 CSS 等前端技术[1](https://www.joshwcomeau.com/).
+
+Josh 的博客内容丰富多样，涵盖了许多前端开发中常见的问题和高级主题。他的文章通常深入浅出，能够帮助开发者更好地理解复杂的概念和技术[1](https://www.joshwcomeau.com/).
+
+以下是 Josh 博客的一些特点和热门主题：
+
+1. 交互式教程：Josh 擅长创建交互式的学习体验，如他的 CSS Grid 和 Flexbox 指南，这些教程能够帮助读者更直观地理解复杂的布局概念[1](https://www.joshwcomeau.com/).
+
+2. React 相关内容：作为一名 React 专家，Josh 的博客中有大量关于 React 的文章，包括 React Server Components、hooks 的使用等高级主题[1](https://www.joshwcomeau.com/).
+
+3. JavaScript 深度解析：Josh 经常深入探讨 JavaScript 的核心概念，如 Promises、模块操作符等，帮助开发者建立更深入的理解[1](https://www.joshwcomeau.com/).
+
+4. CSS 技巧：博客中包含了许多 CSS 相关的文章，涵盖了从基础到高级的各种主题，如颜色格式、居中技巧等[1](https://www.joshwcomeau.com/).
+
+5. 性能优化：Josh 也关注前端性能优化，分享了许多实用的技巧和经验[1](https://www.joshwcomeau.com/).
+
+Josh 的写作风格清晰易懂，他善于用生动的比喻和实例来解释复杂的概念。此外，他的博客设计简洁美观，充分展示了他在前端开发方面的专业水平[1](https://www.joshwcomeau.com/)[4](https://github.com/joshwcomeau/blog).
+
+总的来说，Josh W Comeau 的博客是前端开发者，特别是 React 开发者的宝贵学习资源。无论是初学者还是有经验的开发者，都能在他的博客中找到有价值的内容[1](https://www.joshwcomeau.com/)[5](https://ca.linkedin.com/in/joshwcomeau).
+
+## Akash Hamirwasia
+
+> https://akashhamirwasia.com/
+
+Akash Hamirwasia 是一位年轻有为的前端工程师和产品开发者。他的个人网站 https://akashhamirwasia.com/ 展示了他的专业技能、项目经验和技术博客[1](https://akashhamirwasia.com/).
+
+以下是关于 Akash 和他的博客的主要特点：
+
+1. 个人背景：Akash 今年 24 岁，对构建创新型网络产品充满热情。他从 16 岁开始接触编程，最初学习 Python 来自动化 3D 图形任务[1](https://akashhamirwasia.com/).
+
+2. 职业经历：目前在 Razorpay 担任前端工程师，之前曾在 Akamai 和 smallcase 等公司实习[1](https://akashhamirwasia.com/).
+
+3. 技术专长：Akash 擅长使用 TypeScript、CSS（Tailwind CSS）、React、Next.js、Svelte、Node.js、Python、Postgres 和 Go 等技术[1](https://akashhamirwasia.com/).
+
+4. 项目展示：他的网站展示了多个引人注目的项目，如 Slant it（3D 产品视频制作工具）、Blaze（点对点文件共享应用）和 Pigmnts（图像调色板生成器）等[1](https://akashhamirwasia.com/).
+
+5. 技术博客：Akash 的博客涵盖了多个前端开发主题，如 View Transitions API、JavaScript 的 async/await 内部机制、React 中的自定义确认对话框 API 等[2](https://akashhamirwasia.com/blog/).
+
+6. 演讲经历：Akash 积极参与技术社区，在多个技术会议上进行演讲，分享他的经验和见解[1](https://akashhamirwasia.com/).
+
+7. 开源贡献：他热衷于开源项目，其中一些项目在 GitHub 上获得了不少关注[1](https://akashhamirwasia.com/).
+
+8. 写作风格：Akash 的博客文章深入浅出，通常包含详细的代码示例和清晰的解释，适合各个水平的开发者阅读[2](https://akashhamirwasia.com/blog/).
+
+总的来说，Akash Hamirwasia 的个人网站和博客展现了他作为一名年轻且有才华的前端开发者的专业素养和技术热情。他的博客是前端开发者，特别是那些对 React 和现代 Web 技术感兴趣的人的优秀学习资源[1](https://akashhamirwasia.com/)[2](https://akashhamirwasia.com/blog/).
+
+
+
+
+---
+此文自动发布于：<a href="https://github.com/coderPerseus/blog/issues/14" target="_blank">github issues</a>