
🌷 春天——是太子湾。
关于小学生春游的一篇流水账游记。

❤️🩹 你说,40岁的我们,还能在一起露营吗?
“有什么未了的心愿吗?”“想露营。”

🏝️ 泡泡岛音乐节记录
关于在泥巴地里第一次看到我喜欢的女明星们的记录。
☕ 独立咖啡店同学录
喝过,来过。

📑 kindle-highlight 开发中遇到的问题
通过 Kindle 书摘来生成阅读笔记展示网站。

🛖 更喜欢原始的地方
去过杭州周边很多古镇,有些古镇只是当地人的居所,有了岁月的痕迹之后,人们为了领悟其中的古意所加的名字。古镇中人们生活居住并无二样,只是多了些景点入驻的乌篷船和贩卖土产的商户。这样的古镇其实是我所喜爱的,比起那种原地拔起的旅游景点,流露的自然之美和生活气息已经超越了古或不古的议题。

🛺 去郊外和逛公园
周末待在家总是犯困,午饭后睡一觉到晚上也是常态。于是找点事做,走出家门,不浪费周末和人生是一件很重要的事情。
.png%3Ftable%3Dblock%26id%3D2d2aa635-ddfd-4523-ac61-67b5aafd49de%26cache%3Dv2&w=3840&q=75)
👍 当我说起 NiCE TRY,这是一种态度
NiCE TRY 是一个每周更新的人生挑战节目。由特特、文森特动物园、小E、cbvivi 共同主持。本文记录我和哨子去 NiCE TRY 展期间在上海的旅程。

🆙 最近在爬楼梯
在这三年里,我不止一次的想要运动,想要减重,但是计划总是难以坚持。这一次我下定决心是在上周,我买了一个体脂秤,它冰冷的数字宣告:25岁被体脂秤确诊为35岁。

🌊 在青岛,看海是一件很随意的事情
去青岛算一个临时也不临时的决定,说了很久要去都没成行。今年换了工作后下定决心请了两天假,凑了一个周末拼作四天,再加上那时在搬家前,心情有点低落,只当作散心。

✨ 从零开发一个图片处理组件
最近接到一个需求是在项目中实现一个功能和微信图片编辑功能类似的组件,但是 UI 比较自定义化,遍寻了市面上的轮子可能不太好实现这样的自定义功能,于是决定自己造一个轮子,顺便学习下 rollup 打包组件这套流程。

🩲 记一次兼容遇到的问题
最近开发的 APP 内嵌页面在一个 17 年的机型上出现了问题,在解决这些兼容问题时,发现了一些有意思的情况,在这里做一些记录。

🛵 在作为整体的未来和作为中心的当下之间
每到一个阶段,就会诞生一些新的想法,这里记录了最近想说的一些话。

🏐 前端性能监控指标和首屏优化
最近在进行项目优化时,遇到了白屏时间过长的问题,通过 Chrome 调试工具分析了加载时间。然后用 webpack-bundle-analyzer 分析了依赖,对项目内的引入和加载做了处理,这里简单分析下前端的加载指标和如何优化。

🔐 2022.11.22 面试记录
这场面试的问题都比较简单,但是暴露出很多基础,思维甚至是心态上的问题。希望未来能不断加强这方面。

⚓ 代码质量的天平,时间和空间复杂度
对于同一个问题,我们可能有很多种解决方法,现实世界中我们无法精准的预估这些方法的“代价”,但其实 “所有命运赠送的礼物,早已在暗中标好了价格”。在代码的世界中我们可以衡量这种“价格”。

🃏 力扣.扑克牌中的顺子
最近发现,自己好像从来没有考虑过什么样的代码是优秀的,高效的。我写代码的目标是为了完成任务还是为了实现自己的提升呢,一瞬间感觉自己好像从来没入门。

🥍 从 async 和 await 理解 generator
最近在进一步学习 Javascript,发现之前对生成器这一块都不是特别熟悉,然后看到 redux-stage 对于异步 action 的写法是基于生成器。而且之前也只知道 async 和 await 是语法糖,但不知道究竟是代糖还是蔗糖呢。

📒 Obsidian 使用体验
notion 在体验上总是会有一环欠缺,那就是在写作中的复制粘贴不是复制选区,而是复制选区所在的块,Obsidian 对我来说很好的解决了这个问题。

🎖️ React 文档整理
因为 React 的文档比较分散,这里按照自己的关注点整理了文档内容,希望可以加深印象。

⚔️ TS 类型挑战
这里主要记录一些在 type-challenges 中遇到的有意思的挑战,以及一些不熟悉的 TS 语法。

🏝️ 2022.10.21 面试记录
感觉自己在近一年的 React 使用中,虽然不断踩坑填坑,但并未深入这一门语法,未来还是要不断不强,增加自己在前端上的理解。

💻 Hello Rust!
因为最近看到了很多关于 Rust 的项目,然后又了解到了 webassembly 可以使用 Rust 等语言为 web 赋能,所以准备入门了解下。

🚘 去大理 —— 在路上
大理是一座很有魅力的城市,无论是苍山洱海风花雪月,还是四周错落有致的古城,独特的民族风格和特色的美食。

🗼 芒市 —— 黎明之城的日落之旅
芒市,是傣语中“黎明之城”的音译。最初知道这个城市是因为Cbvivi,这是他的家乡,他也经常在视频中提及或推荐芒市的旅行目的地。

🪑 椅子乐团 —— 我的 Livehouse 心头好
我从来就对这座岛充满幻想,那种太平洋海风、闽南语和山谷的感觉,但是在我有能力去自由行的之前,就已经没有自由行了,而椅子乐团好像就是最最符合我对台湾的感觉的一支乐队。

📅 八月我学到了什么
本月的 Today I Learned

🧑🦯 对博客加载的几次探索
在不断体验和完善博客功能的过程中,在提高访问或者再次访问速度上进行了一些尝试,个人感觉这个过程还是挺有意思的,在这里做下记录。

⛩️ 漫步满觉陇——寻找“汤屋”
因为最近经常看到杭州小汤屋的推荐,于是在周末散心的时候去满觉陇寻找它的踪迹。但是意外发现虎跑也挺好的,绿意盎然。

🍜 两种乡愁——牛肉米粉和浆水面
我有两个故乡,一个在四川南充,一座小小的被嘉陵江穿过的城市。另一个在甘肃刘家峡,黄河冲走泥沙洗出破碎的平原。

🥸 在 Next.js 项目中将 SVG 作为组件使用
最近需要在 Next.js 项目中使用 SVG 为可控的路径动画提供 Path。但是发现 Next.js 中默认不能直接引入 SVG 作为 React 组件。因为搜索到的解决方案很多,而且有些已经不具备时效性,所以在这里做个记录。

🪐 为 React 提供组件共享动画
看到微信小程序增加了 Skyline 渲染引擎,可以更好地支持一些路由共享组件动画,这些在原生 App 已经非常成熟度的效果在 React 中应该怎么实现呢。

⛲ 面试复习/预习
复习一些关于前端的知识,未来在面试中的一些问题也会追加到本篇文章中

🙀 What’s New —— 前端新技术观察
感觉前端又变得生机勃勃起来了,不少的新技术新框架正在诞生,或者是自己涉猎的区域还只是冰山一角

🦤 双溪、鸬鸟——溯溪之旅
”鸬鸟“ 这个名字很美,一开始还以为这里是鸟类保护区,不过 wiki 介绍说该镇得名于域内的鸬鸟山,该山得名于其类似鸬鸟的外形。

🚃 Spline 上手体验
在体验 zoreG浏览器 的过程中,在他们的 Homepage 中看到一个很有意思的动画效果。因为最近正好在研究 motion 和 Figma,看了很多有意思的动画,所以好奇它的实现。

🤪 如何让 SVG 动起来
越来越多的动画在使用 SVG 格式,但要如何让 SVG 动起来呢。

🎏 React 18 带来了什么
最近在写项目时,发现了关于 React18 的报错:“ReactDOM.render is no longer supported in React 18”,才发现它已经来了。

🌉 绍兴游记
记录下自己在绍兴的所见

🥔 青椒土豆片
青椒土豆片,是一道简单的素菜小炒,其实青椒和土豆很配,感觉就像是茄科里玩的很好的朋友。

🏃 如何为 React 提供 Animate Group
关于 motion-framer 中 animatePresence 的使用

🥗 香干马兰头
今天做了香干马兰头,以及生活的一些碎碎念。

🧚🏿 如何构建一个 PWA
PWA的概念以及如何构建一个PWA

🥞 Pancake Swap 交易流程
pancakeswap概念以及使用panckaeswap的智能合约完成币币交易的流程整理。

🏗️ 前端项目规范化——环境变量和 git commit 控制
在项目中添加git钩子,来实现代码检测和自动格式化以及commit消息体规范

🦊 Web3相关概念以及钱包交易流程
Web3常用名词,钱包的创建和智能合约的连接与使用

😶 你好,世界
欢迎来到我的个人博客~