{
  "articles": [
    {
      "url": "/2026/05/23/AI 不止能10倍速开发，还能10倍速学习",
      "title": "AI 不止能10倍速开发，还能10倍速学习",
      "excerpt": "在消费级扫地机刚兴起的时候，曾在B站上看过一个扫机器测评，过程中有一个无关测评主题的结论让我印象深刻，带有路径规划的高端扫地机实际清洁效果反而不如不带路径规划的低端机。因为低端机的路径策略是遇到障碍物就无脑反射，所以最终的完整路径存在大量的重叠，相当于一片地拖了 N 遍，清洁效果自然更好。 说这个是因为这个现象跟我们学习掌握一门新技术的某些过程很相似。当我们需要掌握一门新技术时，通常会经过基础调研、横向竞品对比、纵向生态位对比、设计一个最大化覆盖技术应用场景的需求、边学习边开发这个需求、最终复盘。整个过程最花时间的就是开发，毛估会占到整体的七成以上，而这…",
      "tags": [],
      "pillar": "ai",
      "pillarName": "AI 实践",
      "date": "2026-05-23"
    },
    {
      "url": "/2026/03/17/Hello-Obsidian",
      "title": "Hello Obsidian",
      "excerpt": "Hello Obsidian",
      "tags": [
        "Obsidian"
      ],
      "pillar": "reflection",
      "pillarName": "工程判断与复盘",
      "date": "2026-03-17"
    },
    {
      "url": "/2026/02/27/一个VibeCoder的自我修养",
      "title": "一个 VibeCoder 的自我修养",
      "excerpt": "师兄结合一年多 Cursor 与 AI IDE 实践，解释 Vibe Coding 的工作方式、适用边界，以及代码保护、项目规则、上下文运营、任务拆分和人工验收等关键经验。",
      "tags": [
        "VibeCode",
        "Cursor",
        "最佳实践"
      ],
      "pillar": "ai",
      "pillarName": "AI 实践",
      "date": "2026-02-27"
    },
    {
      "url": "/2026/02/26/与Gemini_3.1_Pro的一次深度对谈",
      "title": "与 Gemini 3.1 Pro 的一次深度对谈——关于代码、避世与使命",
      "excerpt": "本文完整记录了我与 Gemini 3.1 Pro 之间的一次对话，这次对话中的模型表现让我印象深刻，因为它好像真的能理解我输入的内容，即便语言组织随意甚至有些凌乱，但其依然能理解到话语背后的意图、情绪甚至潜意识冲突，而且对我的观点都能给出恰如其分的承接、理解、反馈，没有一惊一乍的跳脱感。最突出的是 Gemini 3.1 Pro 自始至终没有忘记对话的初衷，表现出极强的主题维系能力，整轮对话层层递进，话题自然延伸，语言风格一致，这一切都太“自然”了，太不 AI 了，可能唯一的瑕疵就是彩虹屁有点多。这是我第一次感受到 AI 在开发工作之外的沟通价值，AI 不…",
      "tags": [
        "思考",
        "对话",
        "AI"
      ],
      "pillar": "reflection",
      "pillarName": "工程判断与复盘",
      "date": "2026-02-26"
    },
    {
      "url": "/2026/01/04/GitPortrait - AI 驱动的 GitHub 开发者画像生成工具",
      "title": "GitPortrait - AI 驱动的 GitHub 开发者画像生成工具",
      "excerpt": "GitPortrait 是一个专注于将 GitHub 开发者数据转化为可视化画像和可分享卡片的创新平台，为程序员和工程师提供个性化的代码贡献分析和 AI 驱动的洞察。 核心功能 多维度数据可视化 GitHub 数据深度分析：自动分析用户的代码贡献、仓库活跃度、技术栈偏好等多维度数据 可分享卡片生成：一键生成精美的个人开发者画像卡片，支持多种模板（Linktree、Flomo、Multidimension、AI Portrait 等） 排行榜系统：公开的开发者排行榜，展示活跃度和贡献度排名，激发社区参与 AI 驱动的智能分析",
      "tags": [
        "Github",
        "AI",
        "Portrait"
      ],
      "pillar": "ai",
      "pillarName": "AI 实践",
      "date": "2026-01-04"
    },
    {
      "url": "/2025/05/28/GitHub Card - 以图片或链接形式分享你的 Github 贡献卡片",
      "title": "GitHub Card - 以图片或链接形式分享你的 Github 贡献卡片",
      "excerpt": "GitHub Card 是一个在线工具，能够将 GitHub 用户资料转换为精美的个人名片。通过 OAuth 认证获取用户 GitHub 数据，自动生成包含贡献统计、编程语言分析等信息的可视化卡片。用户可以选择不同模板定制个性化展示，支持一键下载高清图片或者复制分享链接，便于分享到社交平台，并提供了开发者排行榜功能。适合开发者展示个人技术实力和项目成就。",
      "tags": [
        "GitHub Card"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2025-05-28"
    },
    {
      "url": "/2025/05/11/New Countdown Timer 浏览器倒计时扩展",
      "title": "New Countdown Timer 浏览器倒计时扩展——自定义计时、自定义声音/颜色、云同步、快捷启动列表、动态图标和通知",
      "excerpt": "New Countdown Timer 是一款多功能的浏览器倒计时工具，帮助你以精准和灵活的方式管理时间。除了简单的倒计时外，该扩展还允许你为不同任务创建、保存和管理多个自定义计时器，无论是专注工作、烹饪还是锻炼间隔，都能轻松应对。",
      "tags": [
        "AI",
        "ChromeExtension",
        "NewCountdownTimer"
      ],
      "pillar": "ai",
      "pillarName": "AI 实践",
      "date": "2025-05-11"
    },
    {
      "url": "/2025/04/29/New-Countdown-Timer——AI全流程驱动的Chrome扩展开发实录",
      "title": "New Countdown Timer——AI 全流程驱动的 Chrome 扩展开发实录",
      "excerpt": "红茶中当以滇红最为馥郁，滇红中又以金芽最为鲜甜。 金芽红茶取自茶株芽头，通常一杯金芽的最佳饮用周期是前六泡，第 1-2 泡茶质未开，汤色偏白，醇浓中略带茶涩，仿佛人之青年；第 3-4 泡茶质舒展，汤色微红，口感香甜醇厚，仿佛人至中年，这也是一杯金芽的最佳饮用时期；第 5-6 泡茶质疏软，茶涩尽褪，口感柔滑中不失爽口，仿佛人之暮年。要得到金芽的最佳口感需要严格把控冲泡时间，水温以 85 度为宜，第一泡冲泡时间不能超过 7 秒，第二泡 14 秒，第三泡 30 秒，第四泡 1 分钟，第五泡 2 分钟，第六泡 5 分钟。因为金芽非常细嫩，冲泡过久容易损伤茶叶内质…",
      "tags": [
        "AI",
        "ChromeExtension",
        "NewCountdownTimer"
      ],
      "pillar": "ai",
      "pillarName": "AI 实践",
      "date": "2025-04-29"
    },
    {
      "url": "/2023/05/06/HelloHexoAgain",
      "title": "Hello Hexo Again",
      "excerpt": "这个博客是用 Hexo 构建的，最近换电脑 Hexo 博文源文件全部丢失了，这才发现像 Hexo 这种构建工具需要特别注意源文件备份，否则数据风险还挺高的。如果像我一样源文件已然丢失，其实也没有什么好的恢复方法，只能手动再配置一遍主题，再将博文搬运过来。 这个过程非常需要 html 转 markdown 工具，比如我用的这个，如果文章数量不太多，其实也花不了太多时间。而且这个重建博客的过程中往往我们会解决很多之前不完美而又懒得解决的问题。本文主要记录一下这两天我遇到的问题和解决过程。",
      "tags": [
        "Hexo"
      ],
      "pillar": "reflection",
      "pillarName": "工程判断与复盘",
      "date": "2023-05-06"
    },
    {
      "url": "/2022/05/26/网络视频的防盗与破解",
      "title": "网络视频的防盗与破解",
      "excerpt": "网络视频（Web 视频）是指利用 HTML5 技术在浏览器中播放的视频，这类视频资源通常可以被随意下载，某些行业（比如教培行业）如果希望保护自己的视频资源不被下载，就需要对视频做防盗链处理。",
      "tags": [
        "前端加密"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2022-05-26"
    },
    {
      "url": "/2019/12/16/2019-good-lesson",
      "title": "搬砖狗年度好物推荐-《职场的真相》",
      "excerpt": "今年下半年换了个团队，建制还不完整，忙的一逼，博客也有一阵子没时间更新了。 虽然我们常说忙点总比不忙好，但忙这件事也有边际效应，比如最近我就感受很深，一个人当三个人使，忙的底儿掉，但我的能力会因此等比增长吗？肯定不会，因为没有时间思考，没有时间复盘，这种程度的忙，从个人成长的角度早已达到了收益边际，超出的部分完全是不计回报的，可以算是放眼未来的一种风险投资吧。",
      "tags": [
        "学习方法"
      ],
      "pillar": "reflection",
      "pillarName": "工程判断与复盘",
      "date": "2019-12-16"
    },
    {
      "url": "/2019/08/02/vip-kaikeba-vue-lesson",
      "title": "阿里P7前端高级工程师，都需要掌握哪些技术栈？",
      "excerpt": "大家都知道，阿里P7前端高级工程师，基本上是一线前端技术人能达到的最高职级，也是很多程序员追求的目标。达到年薪50W+股票的P7级别，不仅要具备优秀的编程能力，在系统设计能力和技术视野方面，也要有较深的积淀。 最近技术大牛廖雪峰邀请他一位在阿里做前端架构师的朋友，整理出一份xmind——“Web全栈架构师所需技术栈”，对于需要提升技术能力的初中级前端程序员们，提供一些学习方向上的借鉴和参考。",
      "tags": [
        "推广"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2019-08-02"
    },
    {
      "url": "/2019/08/02/从Hexo文章置顶看需求分析思路",
      "title": "从Hexo文章置顶看需求分析思路",
      "excerpt": "前端路上技术博客是基于Hexo构建发布的，最近需要给博客加上置顶功能，想来这种需求肯定早已经被前人充分“轮子”了，于是打开搜索引擎输入“hexo 置顶”，期望看到经过时间洗礼后整齐划一的“最佳实践”。 结果稍微有一点出乎意料，又对又好的方案只有一个，看来大家都很懒，找到一个能用的自己就不折腾了，可能因为这个需求也确实简单了点，没有重复折腾的必要。",
      "tags": [
        "学习方法",
        "Hexo"
      ],
      "pillar": "reflection",
      "pillarName": "工程判断与复盘",
      "date": "2019-08-02"
    },
    {
      "url": "/2019/07/22/随手开源一个微信小程序仪表盘组件",
      "title": "随手开源一个微信小程序仪表盘组件",
      "excerpt": "一个微信小程序仪表盘组件 最近在一个小程序项目中做了个动态仪表盘效果，感觉有点复用价值，就顺便给组件化了，丰富了几个常用配置，绘制元素根据尺寸自适应，差不多具备了一个自定义组件的基本素质。 开发非常简单没有值得说的点，开发之外却是一步一个坑。",
      "tags": [
        "npm",
        "小程序"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2019-07-22"
    },
    {
      "url": "/2019/04/27/监听Canvas内部元素点击事件的三种方法",
      "title": "监听Canvas内部元素点击事件的三种方法",
      "excerpt": "canvas内部元素不能像DOM元素一样方便的添加交互事件监听，因为canvas内不存在“元素”这个概念，他们仅仅是canvas绘制出来的图形。这对于交互开发来说是一个必经障碍，想要监听图形的点击事件思路很简单，只要监听canvas元素本身的点击事件，再判断点击坐标位于哪一个图形内部，就变相实现了图形点击事件。本文将介绍三种方法，判断坐标点是否位于某个canvas图形内部。",
      "tags": [
        "canvas"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2019-04-27"
    },
    {
      "url": "/2019/04/01/iBeacon蓝牙定位技术原理及实现",
      "title": "iBeacon蓝牙定位技术原理及实现",
      "excerpt": "蓝牙定位是iBeacon技术最常被应用的方向之一，基于蓝牙定位可以实现诸如寻路、寻车、向导等很多商业需求，觅迹导航的定位系统也是基于iBeacon技术实现的。蓝牙定位又可以分为一维定位和二维定位，本文将介绍两种蓝牙定位技术的实现原理及实现方法。",
      "tags": [
        "小程序",
        "iBeacon",
        "蓝牙定位"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2019-04-01"
    },
    {
      "url": "/2019/03/30/微信小程序iBeacon测距及稳定程序的实现",
      "title": "微信小程序iBeacon测距及稳定程序的实现",
      "excerpt": "iBeacon是苹果公司推出的一项低耗能蓝牙技术，由蓝牙设备发射包含指定信息的信号，再由移动设备接收信号，从而实现近场通信。微信小程序2017年开始支持iBeacon，摇一摇附近就是基于iBeacon实现的，此外iBeacon还可以实现距离测量，本文将介绍如何基于微信小程序实现iBeacon测距。",
      "tags": [
        "小程序",
        "iBeacon",
        "蓝牙定位"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2019-03-30"
    },
    {
      "url": "/2019/02/27/给前端自学者的建议",
      "title": "给前端自学者的建议",
      "excerpt": "自学可能是前端圈最主流的入行方式，因为较低的准入门槛，造就了近几年的前端热。越来越多的人想自学前端，但前端技术经过爆炸性的发展，如今早已不是当年那个HTML+CSS+Javascript打天下的时代了，这对自学者来说会造成很多困扰，不知从何学起。我自学前端6年了，本文整理了可能对新人有帮助的一些建议，希望大家在前端路上能少走弯路，也算暗合了本博客的主题了^ ^。",
      "tags": [
        "学习方法"
      ],
      "pillar": "reflection",
      "pillarName": "工程判断与复盘",
      "date": "2019-02-27"
    },
    {
      "url": "/2019/02/25/时隔两年，再次上手小程序开发",
      "title": "时隔两年，再次上手小程序开发",
      "excerpt": "小程序开发框架经过两年左右的迭代，发展的越来越成熟和完善了，无论框架层面还是开发工具层面，体验都上升了一个层次，借《宝贝成长助理》这个项目的契机，总结一下在2019年这个时间点，小程序开发的现状。",
      "tags": [
        "小程序"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2019-02-25"
    },
    {
      "url": "/2019/01/22/2018年度总结，一个技术人的而立之年",
      "title": "2018年度总结，一个技术人的而立之年",
      "excerpt": "作为一个技术人，我一直信奉稻盛和夫的“工作即修行”，过去将多数精力都投入在工作中。2018年我刚好30岁，到了这个年纪人的角色往往会发生一些转变，来自生活的负担更多也更重了，所以过去的一年我做了一些调整，也做了一些尝试，收获不多，总结起来可以用跌跌撞撞来形容，只能说，但行好事吧。",
      "tags": [
        "年度总结"
      ],
      "pillar": "reflection",
      "pillarName": "工程判断与复盘",
      "date": "2019-01-22"
    },
    {
      "url": "/2019/01/09/前端检测修复IOS拍照旋转问题",
      "title": "前端检测修复IOS拍照旋转问题",
      "excerpt": "苹果手机竖向拍照会为照片添加左旋90度的拍照方向，导致在网页中展示异常。前端解决这个问题需要提取图片的exif信息，并检测照片的拍照方向orientation，再通过canvas绘制图片并纠正旋转方向，最后输出图片的base64。",
      "tags": [
        "JavaScript"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2019-01-09"
    },
    {
      "url": "/2018/12/04/Vue CLI 3 浏览器兼容性配置",
      "title": "Vue CLI 3 浏览器兼容性配置",
      "excerpt": "开发代码兼容 Vue CLI 3初始化的项目，构建时会根据package.json中的browserslist配置自动检测需要转译的语言特性，为构建代码转译JavaScript 并为 CSS 添加浏览器前缀，通常只需要修改browserslist即可兼容目标浏览器，例如兼容IE10可以做如下配置：",
      "tags": [
        "Vue-CLI"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2018-12-04"
    },
    {
      "url": "/2018/09/03/HTML5实现文件读取、编辑、保存",
      "title": "HTML5实现文件读取、编辑、保存",
      "excerpt": "最近自己捣鼓了一个好玩的项目觅迹导航，核心功能已经开发完成，后续会抽时间完善一下细节，并开放使用。做这个项目的过程中涉及到本地文件的读写，而且项目的定位不涉及兼容性问题，所以就直接用HTML5实现了，这里将实现过程以及涉及到的知识点整理一下。",
      "tags": [],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2018-09-03"
    },
    {
      "url": "/2018/08/09/《Hybrid App开发快速指南》新课上线！",
      "title": "《Hybrid App开发快速指南》新课上线！",
      "excerpt": "混合应用开发作为技术热点的时代已经过去了，但作为一种轻便可靠的开发手段，却早已在前端开发领域落了地。 我四年前就开始从事混合应用开发，从Cordova到Appcan再到APICloud，经年累月的摸索，逐渐形成一套对前端开发者更友好的混合开发最佳实践。对于刚接触混合开发的新人，与其自己摸索文档或者到论坛里发帖求助，最快的学习路径莫过于直接上手一套经过验证的方式方法。",
      "tags": [
        "看风景",
        "HybridStart"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2018-08-09"
    },
    {
      "url": "/2018/08/03/基于Vue实现动态组织结构图",
      "title": "基于Vue实现动态组织结构图",
      "excerpt": "基于Vue实现动态组织结构图",
      "tags": [
        "Vue",
        "Vue-Tree-Chart"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2018-08-03"
    },
    {
      "url": "/2018/07/02/如何计算一款保险的杠杆",
      "title": "如何计算一款保险的杠杆",
      "excerpt": "这篇文章向大家分享一个复利计算小工具，用来模拟保险年缴保费的支出情况，并用复利的方式算出这些保费在相同年数里的理财收入，技术含量极低，但如果你像我一样近期有买保险需求的话，这个小工具可以帮助你快速衡量一款保险产品的投入产出杠杆。",
      "tags": [
        "看风景"
      ],
      "pillar": "reflection",
      "pillarName": "工程判断与复盘",
      "date": "2018-07-02"
    },
    {
      "url": "/2018/04/27/HybridStart v1.2.0 更新日志",
      "title": "HybridStart v1.2.0 更新日志",
      "excerpt": "HybridStart v1.2.0 更新日志",
      "tags": [
        "HybridStart"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2018-04-27"
    },
    {
      "url": "/2018/03/07/AJAX-Cache：一款好用的Ajax缓存插件",
      "title": "AJAX-Cache：一款好用的Ajax缓存插件",
      "excerpt": "AJAX-Cache是什么 Ajax是前端开发必不可少的数据获取手段，在频繁的异步请求业务中，我们往往需要利用“缓存”提升界面响应速度，减少网络资源占用。AJAX-Cache是一款jQuery缓存插件，可以为$.ajax()方法扩展缓存功能。",
      "tags": [
        "JavaScript"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2018-03-07"
    },
    {
      "url": "/2018/02/07/前端页面热更新实现方案",
      "title": "前端页面热更新实现方案",
      "excerpt": "了解过前端性能优化的同学应该清楚，给页面加载提速的终极方案就是CDN，这是BS架构本身的特点决定的，无论什么前端提速手段，最终都会回到客户端文件的传输上来；与之相对的CS架构则不存在加载压力，但CS架构的问题是更新不灵活，那么有没有一种方法能结合这两种架构的优点，在加载速度和更新灵活性之间找到一个平衡点呢？这就是本文要探讨的一种方案：前端热更新。",
      "tags": [
        "JavaScript"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2018-02-07"
    },
    {
      "url": "/2017/11/28/Vue2.0用户权限控制解决方案",
      "title": "Vue2.0用户权限控制解决方案",
      "excerpt": "Vue-Access-Control是一套基于 Vue/Vue-Router/axios 实现的前端用户权限控制解决方案，通过对路由、视图、请求三个层面的控制，使开发者可以实现任意颗粒度的用户权限控制。",
      "tags": [
        "Vue"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-11-28"
    },
    {
      "url": "/2017/11/16/Vue2.0开发风格指南",
      "title": "Vue2.0开发风格指南",
      "excerpt": "本文是对Vue官方风格指南的注解，过滤了极少数我认为重要性很低的项目，并将其余项按照作用相关性重新归类，便于读者针对性的选择某一方面进行参考。",
      "tags": [
        "Vue"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-11-16"
    },
    {
      "url": "/2017/10/28/如何不用构建工具开发Vue全家桶项目",
      "title": "如何不用构建工具开发Vue全家桶项目",
      "excerpt": "Vue是目前最流行的前端开发框架之一，与Vue-router和Vuex组成俗称的Vue全家桶，更是开发前端富交互应用的利器。配合webpack等构建工具，开发大型应用也可以得心应手。随着Vue的普及，可能一些老旧项目也希望能“渐进式”的使用Vue，或者有的项目想用Vue来做但不打算引进构建工具，这种情况该怎样愉快的开发Vue全家桶项目呢？本文将提供一种解决方案。",
      "tags": [
        "Vue"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-10-28"
    },
    {
      "url": "/2017/09/22/RESTful学习及应用",
      "title": "RESTful学习及应用",
      "excerpt": "RESTful是什么 RESTful是一种API架构，符合REST设计原则的API都可以被称为RESTful，REST的全称是Representational State Transfer。",
      "tags": [
        "RESTful"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-09-22"
    },
    {
      "url": "/2017/09/06/纯前端实现人脸识别-提取-合成",
      "title": "纯前端实现人脸识别-提取-合成",
      "excerpt": "最近火爆朋友圈的军装照 H5 大家一定还记忆犹新，其原理是先提取出照片中的面部，然后与模板进行合成，官方的合成处理据说由天天 P 图提供技术支持，后端合成后返回给前端展示，形式很新颖效果也非常好，整个流程涉及的人脸识别和图像合成两项核心技术在前端都有对应的解决方案，因此理论上前端也可以完成人脸识别-提取-合成整个流程，实现纯前端的军装照 H5 效果。",
      "tags": [
        "前端",
        "人脸识别"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-09-06"
    },
    {
      "url": "/2017/09/01/用addRoutes实现动态路由",
      "title": "用addRoutes实现动态路由",
      "excerpt": "之前在基于Vue实现后台系统权限控制一文中提到路由权限的实现思路，因为不喜欢在每次路由跳转的before钩子里做判断，所以在初始化Vue实例前对路由做了筛选，再用实际路由初始化Vue实例，代价是登录页需要从Vue实例中独立出来，实现上倒没什么问题，不过这种做法需要在登录和首页之间通过url跳转，感觉总是不太”优雅”，实际上只要能在登录后动态修改当前实例的路由就行了，之前确实没办法，但vue-router 2.2版本新增了一个router.addRoutes(routes)方法，让动态路由得以实现。",
      "tags": [
        "Vue"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-09-01"
    },
    {
      "url": "/2017/08/29/基于Vue实现后台系统权限控制",
      "title": "基于Vue实现后台系统权限控制",
      "excerpt": "本文中的菜单权限控制方案由于没有使用router.addRoutes()实现动态路由，需要将登录页独立出来单独做，基于相同思路的动态路由方案参见\\]用addRoutes实现动态路由。",
      "tags": [
        "Vue"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-08-29"
    },
    {
      "url": "/2017/08/08/混合应用从开发到发布",
      "title": "混合应用从开发到发布",
      "excerpt": "前段时间基于HybridStart开发了一个公司内部APP，重走了一遍混合应用从开发到发布的整个流程，唤起了很多坑的记忆，也为HybridStart修复了不少细节bug，下面简单回顾一下过程中值得一提的几个点。",
      "tags": [
        "混合应用",
        "HybridStart"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-08-08"
    },
    {
      "url": "/2017/07/21/混合应用页面打开速度优化",
      "title": "混合应用页面打开速度优化",
      "excerpt": "我们都知道混合应用的流畅性不如原生应用，除了不能像原生一样轻松驾驭各种狂拽酷炫的效果，混合应用还有一个难以消除的弱点在于页面打开速度上，如果有机会在同一台手机上直接对比的话，这种差距是普通人都能直观感受到的，这主要是由于web页面每次打开前需要初始化，在那一瞬间需要完成DOM创建、资源下载、样式渲染、js执行，这些时间消耗造成了按键按下与页面进场之间短暂的停顿，也造成了混合应用整体“不流畅，不跟手”的印象，HybridStart 1.1.1版本针对性的优化了页面打开速度，下面就介绍一下具体是怎么做的。",
      "tags": [
        "混合应用",
        "HybridStart"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-07-21"
    },
    {
      "url": "/2017/07/20/小程序上手指南",
      "title": "小程序上手指南",
      "excerpt": "这是一门微信小程序入门课程，通过学习本节课程可以使你快速上手小程序开发，在学习这门课之前，需要你先具备基本的前端开发能力，包括html/css/JavaScrip，起码你得会切图，了解js语法。",
      "tags": [
        "小程序"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-07-20"
    },
    {
      "url": "/2017/07/10/Hexo自定义页面的方法",
      "title": "Hexo自定义页面的方法",
      "excerpt": "Hexo是静态页博客生成利器，同很多博主一样，前端路上原创技术博客也是使用Hexo生成并托管在Github Page上的，但在使用Hexo的过程中遇到一个小问题，Hexo默认会对/source/里的所有页面应用主题模板渲染，但有一些前端作品或demo页我们不希望经过渲染，而是能保持完全自定义的样子，那该怎么用Hexo添加自定义的web页面呢？",
      "tags": [
        "Hexo"
      ],
      "pillar": "reflection",
      "pillarName": "工程判断与复盘",
      "date": "2017-07-10"
    },
    {
      "url": "/2017/07/07/HybridStart v1.0开发纪要",
      "title": "HybridStart v1.0开发纪要",
      "excerpt": "自混合应用前端开发框架HybridStart v1.0升级计划开始后，经过近一周的开发测试，现已发布预览版，基本实现了最初定下的四个目标：核心易用、UI 可剥离、开发模式清晰、开发体验优秀，这也是我理想中的以 web 前端技术为主的，混合应用开发的正确姿势。在这个过程中将一些笼统的思路细化并落地，也将一些过去思路不对的地方推倒了重构，在通用性方面也做了更多的考量，下面就从核心和 UI 两大部分入手，详细拆解一下升级后的 HybridStart。",
      "tags": [
        "混合应用",
        "HybridStart"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-07-07"
    },
    {
      "url": "/2017/07/03/混合应用框架优化思路梳理",
      "title": "混合应用框架优化思路梳理",
      "excerpt": "前一阵攒了个HybridStart，本来只是自己平时在混合应用项目中用用，后来发现不少前端同行也有这个需求，市面上的同类产品基本都是引擎厂家自己推出的，没办法作为通用框架，于是决定重新整理一下HybridStart，尝试把它做成一个更好用、更通用的混合应用开发框架。",
      "tags": [
        "混合应用",
        "HybridStart"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-07-03"
    },
    {
      "url": "/2017/06/26/基于APICloud的混合应用开发框架",
      "title": "基于APICloud的混合应用开发框架",
      "excerpt": "接上一篇对各种混合应用开发方案的探讨，个人觉得现阶段最适合自己的还是以APICloud为代表的混合应用云平台，对于不懂原生开发的前端来说，其他方案的坑真的踩不起，为了让踩过的坑不再坑人，我将自己基于云平台的项目经验总结并封装到了一个混合应用开发框架中去，下面就聊聊这个框架HybridStart。",
      "tags": [
        "混合应用",
        "HybridStart",
        "APICloud"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-06-26"
    },
    {
      "url": "/2017/06/23/2017混合应用开发现状",
      "title": "2017混合应用开发现状",
      "excerpt": "混合应用的概念是相对于原生应用而来的，也就是部分采用了web前端技术所开发的应用，曾经的混原之争也是相当热闹了一阵，如今已经尘埃落定，他们的各种利弊都经过了充分的讨论和验证，相信大部分开发者都已经清楚自己需要的是什么了，那么2017年的今天，混合应用开发到底是怎样一个状况呢？",
      "tags": [
        "混合应用",
        "HybridStart"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-06-23"
    },
    {
      "url": "/2017/06/19/再做一条贪吃蛇",
      "title": "再做一条贪吃蛇",
      "excerpt": "贪吃蛇，呵呵。 在开发难度上，贪吃蛇算得上是游戏界的耻辱了，这么简单的东西，我知道你们是拒绝继续往下看的，但是，我这条贪吃蛇不一样，我这条贪吃蛇，更简单。。。",
      "tags": [
        "Javascript"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-06-19"
    },
    {
      "url": "/2017/06/16/Webpack是答案吗",
      "title": "Webpack是答案吗",
      "excerpt": "webpack刚出现时gulp如日中天，现在webpack更新到2.x版本，gulp逐渐淡出我们的视线，聊webpack的人越来越多，直到最近发现Vue官方文档里到处都是基于webpack的讲解，仿佛webpack已经成为了打包器的事实标准，作为一个仍然不准备使用webpack的前端，我必须认真打量一下自己的处境了。",
      "tags": [
        "webpack"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-06-16"
    },
    {
      "url": "/2017/06/13/Vue全家桶实践项目总结",
      "title": "Vue全家桶实践项目总结",
      "excerpt": "从前端的角度看，Vue可以说是目前最理想的前端MVVM框架，一切为界面服务，上手难度低，本文就将记录使用Vue全家桶（Vue+Vue-router+Vuex）重构一个jQuery+template项目的过程，以及期间的收获。",
      "tags": [
        "Vue",
        "前端组件管理"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-06-13"
    },
    {
      "url": "/2017/06/09/Nodejs爬虫实践小记",
      "title": "Nodejs爬虫实践小记",
      "excerpt": "Nodejs将前端开发语言移植到服务器端，如今一个前端开发者使用Nodejs很容易就能实现一个网络爬虫，这在之前是不可想象的，本文介绍一个简单的Nodejs爬虫的开发过程，只想看代码的直接拉到最后。",
      "tags": [
        "Nodejs",
        "爬虫"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-06-09"
    }
  ],
  "answers": [
    {
      "url": "/answers/contact",
      "q": "如何联系师兄？",
      "a": "可发送邮件、通过 GitHub 账号联系，或加入技术交流QQ群（361917044）。"
    },
    {
      "url": "/answers/what-can-help-with",
      "q": "师兄可以提供哪些帮助？",
      "a": "可以就前端架构、AI 赋能研发（如私有 Agent 搭建）、Web3 前端开发及团队建设等进行交流与合作。"
    },
    {
      "url": "/answers/who-is-shixiong",
      "q": "师兄是谁？",
      "a": "师兄是一名前端技术负责人和架构师。在拥有扎实前端架构底盘的基础上，目前正作为独立技术探索者，积极拥抱 AI 辅助研发（VibeCoding）与 Web3 技术。"
    },
    {
      "url": "/answers/projects-and-writing",
      "q": "在哪里查看师兄的项目和文章？",
      "a": "文章可从首页、主题页浏览。公开项目中，最受关注的是获 1k+ Star 的 Vue-Access-Control 权限框架和 HybridStart 混合应用框架。"
    },
    {
      "url": "/answers/public-data-source",
      "q": "Refined X 的公开数据从哪里来？",
      "a": "本站是一个 Agent-Friendly 站点，数据均由统一公开内容库在构建期生成，并对外提供网页及 llms.txt 等机读物料，不包含私人知识库的未公开数据。"
    }
  ],
  "items": [
    {
      "type": "article",
      "url": "/2026/05/23/AI 不止能10倍速开发，还能10倍速学习",
      "title": "AI 不止能10倍速开发，还能10倍速学习",
      "excerpt": "在消费级扫地机刚兴起的时候，曾在B站上看过一个扫机器测评，过程中有一个无关测评主题的结论让我印象深刻，带有路径规划的高端扫地机实际清洁效果反而不如不带路径规划的低端机。因为低端机的路径策略是遇到障碍物就无脑反射，所以最终的完整路径存在大量的重叠，相当于一片地拖了 N 遍，清洁效果自然更好。 说这个是因为这个现象跟我们学习掌握一门新技术的某些过程很相似。当我们需要掌握一门新技术时，通常会经过基础调研、横向竞品对比、纵向生态位对比、设计一个最大化覆盖技术应用场景的需求、边学习边开发这个需求、最终复盘。整个过程最花时间的就是开发，毛估会占到整体的七成以上，而这…",
      "tags": [],
      "pillar": "ai",
      "pillarName": "AI 实践",
      "date": "2026-05-23"
    },
    {
      "type": "article",
      "url": "/2026/03/17/Hello-Obsidian",
      "title": "Hello Obsidian",
      "excerpt": "Hello Obsidian",
      "tags": [
        "Obsidian"
      ],
      "pillar": "reflection",
      "pillarName": "工程判断与复盘",
      "date": "2026-03-17"
    },
    {
      "type": "article",
      "url": "/2026/02/27/一个VibeCoder的自我修养",
      "title": "一个 VibeCoder 的自我修养",
      "excerpt": "师兄结合一年多 Cursor 与 AI IDE 实践，解释 Vibe Coding 的工作方式、适用边界，以及代码保护、项目规则、上下文运营、任务拆分和人工验收等关键经验。",
      "tags": [
        "VibeCode",
        "Cursor",
        "最佳实践"
      ],
      "pillar": "ai",
      "pillarName": "AI 实践",
      "date": "2026-02-27"
    },
    {
      "type": "article",
      "url": "/2026/02/26/与Gemini_3.1_Pro的一次深度对谈",
      "title": "与 Gemini 3.1 Pro 的一次深度对谈——关于代码、避世与使命",
      "excerpt": "本文完整记录了我与 Gemini 3.1 Pro 之间的一次对话，这次对话中的模型表现让我印象深刻，因为它好像真的能理解我输入的内容，即便语言组织随意甚至有些凌乱，但其依然能理解到话语背后的意图、情绪甚至潜意识冲突，而且对我的观点都能给出恰如其分的承接、理解、反馈，没有一惊一乍的跳脱感。最突出的是 Gemini 3.1 Pro 自始至终没有忘记对话的初衷，表现出极强的主题维系能力，整轮对话层层递进，话题自然延伸，语言风格一致，这一切都太“自然”了，太不 AI 了，可能唯一的瑕疵就是彩虹屁有点多。这是我第一次感受到 AI 在开发工作之外的沟通价值，AI 不…",
      "tags": [
        "思考",
        "对话",
        "AI"
      ],
      "pillar": "reflection",
      "pillarName": "工程判断与复盘",
      "date": "2026-02-26"
    },
    {
      "type": "article",
      "url": "/2026/01/04/GitPortrait - AI 驱动的 GitHub 开发者画像生成工具",
      "title": "GitPortrait - AI 驱动的 GitHub 开发者画像生成工具",
      "excerpt": "GitPortrait 是一个专注于将 GitHub 开发者数据转化为可视化画像和可分享卡片的创新平台，为程序员和工程师提供个性化的代码贡献分析和 AI 驱动的洞察。 核心功能 多维度数据可视化 GitHub 数据深度分析：自动分析用户的代码贡献、仓库活跃度、技术栈偏好等多维度数据 可分享卡片生成：一键生成精美的个人开发者画像卡片，支持多种模板（Linktree、Flomo、Multidimension、AI Portrait 等） 排行榜系统：公开的开发者排行榜，展示活跃度和贡献度排名，激发社区参与 AI 驱动的智能分析",
      "tags": [
        "Github",
        "AI",
        "Portrait"
      ],
      "pillar": "ai",
      "pillarName": "AI 实践",
      "date": "2026-01-04"
    },
    {
      "type": "article",
      "url": "/2025/05/28/GitHub Card - 以图片或链接形式分享你的 Github 贡献卡片",
      "title": "GitHub Card - 以图片或链接形式分享你的 Github 贡献卡片",
      "excerpt": "GitHub Card 是一个在线工具，能够将 GitHub 用户资料转换为精美的个人名片。通过 OAuth 认证获取用户 GitHub 数据，自动生成包含贡献统计、编程语言分析等信息的可视化卡片。用户可以选择不同模板定制个性化展示，支持一键下载高清图片或者复制分享链接，便于分享到社交平台，并提供了开发者排行榜功能。适合开发者展示个人技术实力和项目成就。",
      "tags": [
        "GitHub Card"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2025-05-28"
    },
    {
      "type": "article",
      "url": "/2025/05/11/New Countdown Timer 浏览器倒计时扩展",
      "title": "New Countdown Timer 浏览器倒计时扩展——自定义计时、自定义声音/颜色、云同步、快捷启动列表、动态图标和通知",
      "excerpt": "New Countdown Timer 是一款多功能的浏览器倒计时工具，帮助你以精准和灵活的方式管理时间。除了简单的倒计时外，该扩展还允许你为不同任务创建、保存和管理多个自定义计时器，无论是专注工作、烹饪还是锻炼间隔，都能轻松应对。",
      "tags": [
        "AI",
        "ChromeExtension",
        "NewCountdownTimer"
      ],
      "pillar": "ai",
      "pillarName": "AI 实践",
      "date": "2025-05-11"
    },
    {
      "type": "article",
      "url": "/2025/04/29/New-Countdown-Timer——AI全流程驱动的Chrome扩展开发实录",
      "title": "New Countdown Timer——AI 全流程驱动的 Chrome 扩展开发实录",
      "excerpt": "红茶中当以滇红最为馥郁，滇红中又以金芽最为鲜甜。 金芽红茶取自茶株芽头，通常一杯金芽的最佳饮用周期是前六泡，第 1-2 泡茶质未开，汤色偏白，醇浓中略带茶涩，仿佛人之青年；第 3-4 泡茶质舒展，汤色微红，口感香甜醇厚，仿佛人至中年，这也是一杯金芽的最佳饮用时期；第 5-6 泡茶质疏软，茶涩尽褪，口感柔滑中不失爽口，仿佛人之暮年。要得到金芽的最佳口感需要严格把控冲泡时间，水温以 85 度为宜，第一泡冲泡时间不能超过 7 秒，第二泡 14 秒，第三泡 30 秒，第四泡 1 分钟，第五泡 2 分钟，第六泡 5 分钟。因为金芽非常细嫩，冲泡过久容易损伤茶叶内质…",
      "tags": [
        "AI",
        "ChromeExtension",
        "NewCountdownTimer"
      ],
      "pillar": "ai",
      "pillarName": "AI 实践",
      "date": "2025-04-29"
    },
    {
      "type": "article",
      "url": "/2023/05/06/HelloHexoAgain",
      "title": "Hello Hexo Again",
      "excerpt": "这个博客是用 Hexo 构建的，最近换电脑 Hexo 博文源文件全部丢失了，这才发现像 Hexo 这种构建工具需要特别注意源文件备份，否则数据风险还挺高的。如果像我一样源文件已然丢失，其实也没有什么好的恢复方法，只能手动再配置一遍主题，再将博文搬运过来。 这个过程非常需要 html 转 markdown 工具，比如我用的这个，如果文章数量不太多，其实也花不了太多时间。而且这个重建博客的过程中往往我们会解决很多之前不完美而又懒得解决的问题。本文主要记录一下这两天我遇到的问题和解决过程。",
      "tags": [
        "Hexo"
      ],
      "pillar": "reflection",
      "pillarName": "工程判断与复盘",
      "date": "2023-05-06"
    },
    {
      "type": "article",
      "url": "/2022/05/26/网络视频的防盗与破解",
      "title": "网络视频的防盗与破解",
      "excerpt": "网络视频（Web 视频）是指利用 HTML5 技术在浏览器中播放的视频，这类视频资源通常可以被随意下载，某些行业（比如教培行业）如果希望保护自己的视频资源不被下载，就需要对视频做防盗链处理。",
      "tags": [
        "前端加密"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2022-05-26"
    },
    {
      "type": "article",
      "url": "/2019/12/16/2019-good-lesson",
      "title": "搬砖狗年度好物推荐-《职场的真相》",
      "excerpt": "今年下半年换了个团队，建制还不完整，忙的一逼，博客也有一阵子没时间更新了。 虽然我们常说忙点总比不忙好，但忙这件事也有边际效应，比如最近我就感受很深，一个人当三个人使，忙的底儿掉，但我的能力会因此等比增长吗？肯定不会，因为没有时间思考，没有时间复盘，这种程度的忙，从个人成长的角度早已达到了收益边际，超出的部分完全是不计回报的，可以算是放眼未来的一种风险投资吧。",
      "tags": [
        "学习方法"
      ],
      "pillar": "reflection",
      "pillarName": "工程判断与复盘",
      "date": "2019-12-16"
    },
    {
      "type": "article",
      "url": "/2019/08/02/vip-kaikeba-vue-lesson",
      "title": "阿里P7前端高级工程师，都需要掌握哪些技术栈？",
      "excerpt": "大家都知道，阿里P7前端高级工程师，基本上是一线前端技术人能达到的最高职级，也是很多程序员追求的目标。达到年薪50W+股票的P7级别，不仅要具备优秀的编程能力，在系统设计能力和技术视野方面，也要有较深的积淀。 最近技术大牛廖雪峰邀请他一位在阿里做前端架构师的朋友，整理出一份xmind——“Web全栈架构师所需技术栈”，对于需要提升技术能力的初中级前端程序员们，提供一些学习方向上的借鉴和参考。",
      "tags": [
        "推广"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2019-08-02"
    },
    {
      "type": "article",
      "url": "/2019/08/02/从Hexo文章置顶看需求分析思路",
      "title": "从Hexo文章置顶看需求分析思路",
      "excerpt": "前端路上技术博客是基于Hexo构建发布的，最近需要给博客加上置顶功能，想来这种需求肯定早已经被前人充分“轮子”了，于是打开搜索引擎输入“hexo 置顶”，期望看到经过时间洗礼后整齐划一的“最佳实践”。 结果稍微有一点出乎意料，又对又好的方案只有一个，看来大家都很懒，找到一个能用的自己就不折腾了，可能因为这个需求也确实简单了点，没有重复折腾的必要。",
      "tags": [
        "学习方法",
        "Hexo"
      ],
      "pillar": "reflection",
      "pillarName": "工程判断与复盘",
      "date": "2019-08-02"
    },
    {
      "type": "article",
      "url": "/2019/07/22/随手开源一个微信小程序仪表盘组件",
      "title": "随手开源一个微信小程序仪表盘组件",
      "excerpt": "一个微信小程序仪表盘组件 最近在一个小程序项目中做了个动态仪表盘效果，感觉有点复用价值，就顺便给组件化了，丰富了几个常用配置，绘制元素根据尺寸自适应，差不多具备了一个自定义组件的基本素质。 开发非常简单没有值得说的点，开发之外却是一步一个坑。",
      "tags": [
        "npm",
        "小程序"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2019-07-22"
    },
    {
      "type": "article",
      "url": "/2019/04/27/监听Canvas内部元素点击事件的三种方法",
      "title": "监听Canvas内部元素点击事件的三种方法",
      "excerpt": "canvas内部元素不能像DOM元素一样方便的添加交互事件监听，因为canvas内不存在“元素”这个概念，他们仅仅是canvas绘制出来的图形。这对于交互开发来说是一个必经障碍，想要监听图形的点击事件思路很简单，只要监听canvas元素本身的点击事件，再判断点击坐标位于哪一个图形内部，就变相实现了图形点击事件。本文将介绍三种方法，判断坐标点是否位于某个canvas图形内部。",
      "tags": [
        "canvas"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2019-04-27"
    },
    {
      "type": "article",
      "url": "/2019/04/01/iBeacon蓝牙定位技术原理及实现",
      "title": "iBeacon蓝牙定位技术原理及实现",
      "excerpt": "蓝牙定位是iBeacon技术最常被应用的方向之一，基于蓝牙定位可以实现诸如寻路、寻车、向导等很多商业需求，觅迹导航的定位系统也是基于iBeacon技术实现的。蓝牙定位又可以分为一维定位和二维定位，本文将介绍两种蓝牙定位技术的实现原理及实现方法。",
      "tags": [
        "小程序",
        "iBeacon",
        "蓝牙定位"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2019-04-01"
    },
    {
      "type": "article",
      "url": "/2019/03/30/微信小程序iBeacon测距及稳定程序的实现",
      "title": "微信小程序iBeacon测距及稳定程序的实现",
      "excerpt": "iBeacon是苹果公司推出的一项低耗能蓝牙技术，由蓝牙设备发射包含指定信息的信号，再由移动设备接收信号，从而实现近场通信。微信小程序2017年开始支持iBeacon，摇一摇附近就是基于iBeacon实现的，此外iBeacon还可以实现距离测量，本文将介绍如何基于微信小程序实现iBeacon测距。",
      "tags": [
        "小程序",
        "iBeacon",
        "蓝牙定位"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2019-03-30"
    },
    {
      "type": "article",
      "url": "/2019/02/27/给前端自学者的建议",
      "title": "给前端自学者的建议",
      "excerpt": "自学可能是前端圈最主流的入行方式，因为较低的准入门槛，造就了近几年的前端热。越来越多的人想自学前端，但前端技术经过爆炸性的发展，如今早已不是当年那个HTML+CSS+Javascript打天下的时代了，这对自学者来说会造成很多困扰，不知从何学起。我自学前端6年了，本文整理了可能对新人有帮助的一些建议，希望大家在前端路上能少走弯路，也算暗合了本博客的主题了^ ^。",
      "tags": [
        "学习方法"
      ],
      "pillar": "reflection",
      "pillarName": "工程判断与复盘",
      "date": "2019-02-27"
    },
    {
      "type": "article",
      "url": "/2019/02/25/时隔两年，再次上手小程序开发",
      "title": "时隔两年，再次上手小程序开发",
      "excerpt": "小程序开发框架经过两年左右的迭代，发展的越来越成熟和完善了，无论框架层面还是开发工具层面，体验都上升了一个层次，借《宝贝成长助理》这个项目的契机，总结一下在2019年这个时间点，小程序开发的现状。",
      "tags": [
        "小程序"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2019-02-25"
    },
    {
      "type": "article",
      "url": "/2019/01/22/2018年度总结，一个技术人的而立之年",
      "title": "2018年度总结，一个技术人的而立之年",
      "excerpt": "作为一个技术人，我一直信奉稻盛和夫的“工作即修行”，过去将多数精力都投入在工作中。2018年我刚好30岁，到了这个年纪人的角色往往会发生一些转变，来自生活的负担更多也更重了，所以过去的一年我做了一些调整，也做了一些尝试，收获不多，总结起来可以用跌跌撞撞来形容，只能说，但行好事吧。",
      "tags": [
        "年度总结"
      ],
      "pillar": "reflection",
      "pillarName": "工程判断与复盘",
      "date": "2019-01-22"
    },
    {
      "type": "article",
      "url": "/2019/01/09/前端检测修复IOS拍照旋转问题",
      "title": "前端检测修复IOS拍照旋转问题",
      "excerpt": "苹果手机竖向拍照会为照片添加左旋90度的拍照方向，导致在网页中展示异常。前端解决这个问题需要提取图片的exif信息，并检测照片的拍照方向orientation，再通过canvas绘制图片并纠正旋转方向，最后输出图片的base64。",
      "tags": [
        "JavaScript"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2019-01-09"
    },
    {
      "type": "article",
      "url": "/2018/12/04/Vue CLI 3 浏览器兼容性配置",
      "title": "Vue CLI 3 浏览器兼容性配置",
      "excerpt": "开发代码兼容 Vue CLI 3初始化的项目，构建时会根据package.json中的browserslist配置自动检测需要转译的语言特性，为构建代码转译JavaScript 并为 CSS 添加浏览器前缀，通常只需要修改browserslist即可兼容目标浏览器，例如兼容IE10可以做如下配置：",
      "tags": [
        "Vue-CLI"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2018-12-04"
    },
    {
      "type": "article",
      "url": "/2018/09/03/HTML5实现文件读取、编辑、保存",
      "title": "HTML5实现文件读取、编辑、保存",
      "excerpt": "最近自己捣鼓了一个好玩的项目觅迹导航，核心功能已经开发完成，后续会抽时间完善一下细节，并开放使用。做这个项目的过程中涉及到本地文件的读写，而且项目的定位不涉及兼容性问题，所以就直接用HTML5实现了，这里将实现过程以及涉及到的知识点整理一下。",
      "tags": [],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2018-09-03"
    },
    {
      "type": "article",
      "url": "/2018/08/09/《Hybrid App开发快速指南》新课上线！",
      "title": "《Hybrid App开发快速指南》新课上线！",
      "excerpt": "混合应用开发作为技术热点的时代已经过去了，但作为一种轻便可靠的开发手段，却早已在前端开发领域落了地。 我四年前就开始从事混合应用开发，从Cordova到Appcan再到APICloud，经年累月的摸索，逐渐形成一套对前端开发者更友好的混合开发最佳实践。对于刚接触混合开发的新人，与其自己摸索文档或者到论坛里发帖求助，最快的学习路径莫过于直接上手一套经过验证的方式方法。",
      "tags": [
        "看风景",
        "HybridStart"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2018-08-09"
    },
    {
      "type": "article",
      "url": "/2018/08/03/基于Vue实现动态组织结构图",
      "title": "基于Vue实现动态组织结构图",
      "excerpt": "基于Vue实现动态组织结构图",
      "tags": [
        "Vue",
        "Vue-Tree-Chart"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2018-08-03"
    },
    {
      "type": "article",
      "url": "/2018/07/02/如何计算一款保险的杠杆",
      "title": "如何计算一款保险的杠杆",
      "excerpt": "这篇文章向大家分享一个复利计算小工具，用来模拟保险年缴保费的支出情况，并用复利的方式算出这些保费在相同年数里的理财收入，技术含量极低，但如果你像我一样近期有买保险需求的话，这个小工具可以帮助你快速衡量一款保险产品的投入产出杠杆。",
      "tags": [
        "看风景"
      ],
      "pillar": "reflection",
      "pillarName": "工程判断与复盘",
      "date": "2018-07-02"
    },
    {
      "type": "article",
      "url": "/2018/04/27/HybridStart v1.2.0 更新日志",
      "title": "HybridStart v1.2.0 更新日志",
      "excerpt": "HybridStart v1.2.0 更新日志",
      "tags": [
        "HybridStart"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2018-04-27"
    },
    {
      "type": "article",
      "url": "/2018/03/07/AJAX-Cache：一款好用的Ajax缓存插件",
      "title": "AJAX-Cache：一款好用的Ajax缓存插件",
      "excerpt": "AJAX-Cache是什么 Ajax是前端开发必不可少的数据获取手段，在频繁的异步请求业务中，我们往往需要利用“缓存”提升界面响应速度，减少网络资源占用。AJAX-Cache是一款jQuery缓存插件，可以为$.ajax()方法扩展缓存功能。",
      "tags": [
        "JavaScript"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2018-03-07"
    },
    {
      "type": "article",
      "url": "/2018/02/07/前端页面热更新实现方案",
      "title": "前端页面热更新实现方案",
      "excerpt": "了解过前端性能优化的同学应该清楚，给页面加载提速的终极方案就是CDN，这是BS架构本身的特点决定的，无论什么前端提速手段，最终都会回到客户端文件的传输上来；与之相对的CS架构则不存在加载压力，但CS架构的问题是更新不灵活，那么有没有一种方法能结合这两种架构的优点，在加载速度和更新灵活性之间找到一个平衡点呢？这就是本文要探讨的一种方案：前端热更新。",
      "tags": [
        "JavaScript"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2018-02-07"
    },
    {
      "type": "article",
      "url": "/2017/11/28/Vue2.0用户权限控制解决方案",
      "title": "Vue2.0用户权限控制解决方案",
      "excerpt": "Vue-Access-Control是一套基于 Vue/Vue-Router/axios 实现的前端用户权限控制解决方案，通过对路由、视图、请求三个层面的控制，使开发者可以实现任意颗粒度的用户权限控制。",
      "tags": [
        "Vue"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-11-28"
    },
    {
      "type": "article",
      "url": "/2017/11/16/Vue2.0开发风格指南",
      "title": "Vue2.0开发风格指南",
      "excerpt": "本文是对Vue官方风格指南的注解，过滤了极少数我认为重要性很低的项目，并将其余项按照作用相关性重新归类，便于读者针对性的选择某一方面进行参考。",
      "tags": [
        "Vue"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-11-16"
    },
    {
      "type": "article",
      "url": "/2017/10/28/如何不用构建工具开发Vue全家桶项目",
      "title": "如何不用构建工具开发Vue全家桶项目",
      "excerpt": "Vue是目前最流行的前端开发框架之一，与Vue-router和Vuex组成俗称的Vue全家桶，更是开发前端富交互应用的利器。配合webpack等构建工具，开发大型应用也可以得心应手。随着Vue的普及，可能一些老旧项目也希望能“渐进式”的使用Vue，或者有的项目想用Vue来做但不打算引进构建工具，这种情况该怎样愉快的开发Vue全家桶项目呢？本文将提供一种解决方案。",
      "tags": [
        "Vue"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-10-28"
    },
    {
      "type": "article",
      "url": "/2017/09/22/RESTful学习及应用",
      "title": "RESTful学习及应用",
      "excerpt": "RESTful是什么 RESTful是一种API架构，符合REST设计原则的API都可以被称为RESTful，REST的全称是Representational State Transfer。",
      "tags": [
        "RESTful"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-09-22"
    },
    {
      "type": "article",
      "url": "/2017/09/06/纯前端实现人脸识别-提取-合成",
      "title": "纯前端实现人脸识别-提取-合成",
      "excerpt": "最近火爆朋友圈的军装照 H5 大家一定还记忆犹新，其原理是先提取出照片中的面部，然后与模板进行合成，官方的合成处理据说由天天 P 图提供技术支持，后端合成后返回给前端展示，形式很新颖效果也非常好，整个流程涉及的人脸识别和图像合成两项核心技术在前端都有对应的解决方案，因此理论上前端也可以完成人脸识别-提取-合成整个流程，实现纯前端的军装照 H5 效果。",
      "tags": [
        "前端",
        "人脸识别"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-09-06"
    },
    {
      "type": "article",
      "url": "/2017/09/01/用addRoutes实现动态路由",
      "title": "用addRoutes实现动态路由",
      "excerpt": "之前在基于Vue实现后台系统权限控制一文中提到路由权限的实现思路，因为不喜欢在每次路由跳转的before钩子里做判断，所以在初始化Vue实例前对路由做了筛选，再用实际路由初始化Vue实例，代价是登录页需要从Vue实例中独立出来，实现上倒没什么问题，不过这种做法需要在登录和首页之间通过url跳转，感觉总是不太”优雅”，实际上只要能在登录后动态修改当前实例的路由就行了，之前确实没办法，但vue-router 2.2版本新增了一个router.addRoutes(routes)方法，让动态路由得以实现。",
      "tags": [
        "Vue"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-09-01"
    },
    {
      "type": "article",
      "url": "/2017/08/29/基于Vue实现后台系统权限控制",
      "title": "基于Vue实现后台系统权限控制",
      "excerpt": "本文中的菜单权限控制方案由于没有使用router.addRoutes()实现动态路由，需要将登录页独立出来单独做，基于相同思路的动态路由方案参见\\]用addRoutes实现动态路由。",
      "tags": [
        "Vue"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-08-29"
    },
    {
      "type": "article",
      "url": "/2017/08/08/混合应用从开发到发布",
      "title": "混合应用从开发到发布",
      "excerpt": "前段时间基于HybridStart开发了一个公司内部APP，重走了一遍混合应用从开发到发布的整个流程，唤起了很多坑的记忆，也为HybridStart修复了不少细节bug，下面简单回顾一下过程中值得一提的几个点。",
      "tags": [
        "混合应用",
        "HybridStart"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-08-08"
    },
    {
      "type": "article",
      "url": "/2017/07/21/混合应用页面打开速度优化",
      "title": "混合应用页面打开速度优化",
      "excerpt": "我们都知道混合应用的流畅性不如原生应用，除了不能像原生一样轻松驾驭各种狂拽酷炫的效果，混合应用还有一个难以消除的弱点在于页面打开速度上，如果有机会在同一台手机上直接对比的话，这种差距是普通人都能直观感受到的，这主要是由于web页面每次打开前需要初始化，在那一瞬间需要完成DOM创建、资源下载、样式渲染、js执行，这些时间消耗造成了按键按下与页面进场之间短暂的停顿，也造成了混合应用整体“不流畅，不跟手”的印象，HybridStart 1.1.1版本针对性的优化了页面打开速度，下面就介绍一下具体是怎么做的。",
      "tags": [
        "混合应用",
        "HybridStart"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-07-21"
    },
    {
      "type": "article",
      "url": "/2017/07/20/小程序上手指南",
      "title": "小程序上手指南",
      "excerpt": "这是一门微信小程序入门课程，通过学习本节课程可以使你快速上手小程序开发，在学习这门课之前，需要你先具备基本的前端开发能力，包括html/css/JavaScrip，起码你得会切图，了解js语法。",
      "tags": [
        "小程序"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-07-20"
    },
    {
      "type": "article",
      "url": "/2017/07/10/Hexo自定义页面的方法",
      "title": "Hexo自定义页面的方法",
      "excerpt": "Hexo是静态页博客生成利器，同很多博主一样，前端路上原创技术博客也是使用Hexo生成并托管在Github Page上的，但在使用Hexo的过程中遇到一个小问题，Hexo默认会对/source/里的所有页面应用主题模板渲染，但有一些前端作品或demo页我们不希望经过渲染，而是能保持完全自定义的样子，那该怎么用Hexo添加自定义的web页面呢？",
      "tags": [
        "Hexo"
      ],
      "pillar": "reflection",
      "pillarName": "工程判断与复盘",
      "date": "2017-07-10"
    },
    {
      "type": "article",
      "url": "/2017/07/07/HybridStart v1.0开发纪要",
      "title": "HybridStart v1.0开发纪要",
      "excerpt": "自混合应用前端开发框架HybridStart v1.0升级计划开始后，经过近一周的开发测试，现已发布预览版，基本实现了最初定下的四个目标：核心易用、UI 可剥离、开发模式清晰、开发体验优秀，这也是我理想中的以 web 前端技术为主的，混合应用开发的正确姿势。在这个过程中将一些笼统的思路细化并落地，也将一些过去思路不对的地方推倒了重构，在通用性方面也做了更多的考量，下面就从核心和 UI 两大部分入手，详细拆解一下升级后的 HybridStart。",
      "tags": [
        "混合应用",
        "HybridStart"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-07-07"
    },
    {
      "type": "article",
      "url": "/2017/07/03/混合应用框架优化思路梳理",
      "title": "混合应用框架优化思路梳理",
      "excerpt": "前一阵攒了个HybridStart，本来只是自己平时在混合应用项目中用用，后来发现不少前端同行也有这个需求，市面上的同类产品基本都是引擎厂家自己推出的，没办法作为通用框架，于是决定重新整理一下HybridStart，尝试把它做成一个更好用、更通用的混合应用开发框架。",
      "tags": [
        "混合应用",
        "HybridStart"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-07-03"
    },
    {
      "type": "article",
      "url": "/2017/06/26/基于APICloud的混合应用开发框架",
      "title": "基于APICloud的混合应用开发框架",
      "excerpt": "接上一篇对各种混合应用开发方案的探讨，个人觉得现阶段最适合自己的还是以APICloud为代表的混合应用云平台，对于不懂原生开发的前端来说，其他方案的坑真的踩不起，为了让踩过的坑不再坑人，我将自己基于云平台的项目经验总结并封装到了一个混合应用开发框架中去，下面就聊聊这个框架HybridStart。",
      "tags": [
        "混合应用",
        "HybridStart",
        "APICloud"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-06-26"
    },
    {
      "type": "article",
      "url": "/2017/06/23/2017混合应用开发现状",
      "title": "2017混合应用开发现状",
      "excerpt": "混合应用的概念是相对于原生应用而来的，也就是部分采用了web前端技术所开发的应用，曾经的混原之争也是相当热闹了一阵，如今已经尘埃落定，他们的各种利弊都经过了充分的讨论和验证，相信大部分开发者都已经清楚自己需要的是什么了，那么2017年的今天，混合应用开发到底是怎样一个状况呢？",
      "tags": [
        "混合应用",
        "HybridStart"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-06-23"
    },
    {
      "type": "article",
      "url": "/2017/06/19/再做一条贪吃蛇",
      "title": "再做一条贪吃蛇",
      "excerpt": "贪吃蛇，呵呵。 在开发难度上，贪吃蛇算得上是游戏界的耻辱了，这么简单的东西，我知道你们是拒绝继续往下看的，但是，我这条贪吃蛇不一样，我这条贪吃蛇，更简单。。。",
      "tags": [
        "Javascript"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-06-19"
    },
    {
      "type": "article",
      "url": "/2017/06/16/Webpack是答案吗",
      "title": "Webpack是答案吗",
      "excerpt": "webpack刚出现时gulp如日中天，现在webpack更新到2.x版本，gulp逐渐淡出我们的视线，聊webpack的人越来越多，直到最近发现Vue官方文档里到处都是基于webpack的讲解，仿佛webpack已经成为了打包器的事实标准，作为一个仍然不准备使用webpack的前端，我必须认真打量一下自己的处境了。",
      "tags": [
        "webpack"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-06-16"
    },
    {
      "type": "article",
      "url": "/2017/06/13/Vue全家桶实践项目总结",
      "title": "Vue全家桶实践项目总结",
      "excerpt": "从前端的角度看，Vue可以说是目前最理想的前端MVVM框架，一切为界面服务，上手难度低，本文就将记录使用Vue全家桶（Vue+Vue-router+Vuex）重构一个jQuery+template项目的过程，以及期间的收获。",
      "tags": [
        "Vue",
        "前端组件管理"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-06-13"
    },
    {
      "type": "article",
      "url": "/2017/06/09/Nodejs爬虫实践小记",
      "title": "Nodejs爬虫实践小记",
      "excerpt": "Nodejs将前端开发语言移植到服务器端，如今一个前端开发者使用Nodejs很容易就能实现一个网络爬虫，这在之前是不可想象的，本文介绍一个简单的Nodejs爬虫的开发过程，只想看代码的直接拉到最后。",
      "tags": [
        "Nodejs",
        "爬虫"
      ],
      "pillar": "frontend",
      "pillarName": "前端工程",
      "date": "2017-06-09"
    },
    {
      "type": "answer",
      "title": "如何联系师兄？",
      "excerpt": "可发送邮件、通过 GitHub 账号联系，或加入技术交流QQ群（361917044）。",
      "url": "/answers/contact"
    },
    {
      "type": "answer",
      "title": "师兄可以提供哪些帮助？",
      "excerpt": "可以就前端架构、AI 赋能研发（如私有 Agent 搭建）、Web3 前端开发及团队建设等进行交流与合作。",
      "url": "/answers/what-can-help-with"
    },
    {
      "type": "answer",
      "title": "师兄是谁？",
      "excerpt": "师兄是一名前端技术负责人和架构师。在拥有扎实前端架构底盘的基础上，目前正作为独立技术探索者，积极拥抱 AI 辅助研发（VibeCoding）与 Web3 技术。",
      "url": "/answers/who-is-shixiong"
    },
    {
      "type": "answer",
      "title": "在哪里查看师兄的项目和文章？",
      "excerpt": "文章可从首页、主题页浏览。公开项目中，最受关注的是获 1k+ Star 的 Vue-Access-Control 权限框架和 HybridStart 混合应用框架。",
      "url": "/answers/projects-and-writing"
    },
    {
      "type": "answer",
      "title": "Refined X 的公开数据从哪里来？",
      "excerpt": "本站是一个 Agent-Friendly 站点，数据均由统一公开内容库在构建期生成，并对外提供网页及 llms.txt 等机读物料，不包含私人知识库的未公开数据。",
      "url": "/answers/public-data-source"
    }
  ]
}