日常碎碎念的地方，记录工作生活过程中的各种有意义的事情。https://llccing.github.io/https://llccing.github.io/posts/one-month-with-openclaw/https://llccing.github.io/posts/one-month-with-openclaw/After spending 600 RMB per month on AI tools for a month, here's what I learned about AI assistants and myself.Thu, 02 Apr 2026 02:30:00 GMThttps://llccing.github.io/posts/daily-english-reading-2026-03-31-space-exploration/https://llccing.github.io/posts/daily-english-reading-2026-03-31-space-exploration/B2-level English reading about space exploration, Mars missions, and commercial spaceflightMon, 30 Mar 2026 20:00:00 GMThttps://llccing.github.io/posts/daily-english-reading-2026-03-30-remote-work/https://llccing.github.io/posts/daily-english-reading-2026-03-30-remote-work/B2-level English reading about remote work trends and digital collaborationSun, 29 Mar 2026 20:00:00 GMThttps://llccing.github.io/posts/daily-english-reading-2026-03-29-mental-wellness/https://llccing.github.io/posts/daily-english-reading-2026-03-29-mental-wellness/B2-level English reading about mental health and well-being in contemporary societySat, 28 Mar 2026 20:00:00 GMThttps://llccing.github.io/posts/daily-english-reading-2026-03-28-green-tech/https://llccing.github.io/posts/daily-english-reading-2026-03-28-green-tech/B2-level English reading about sustainable technology and eco-friendly lifestyleFri, 27 Mar 2026 20:00:00 GMThttps://llccing.github.io/posts/daily-english-reading-2026-03-27-digital-privacy/https://llccing.github.io/posts/daily-english-reading-2026-03-27-digital-privacy/B2-level English reading article about digital privacy and data protection with audio narrationThu, 26 Mar 2026 20:00:00 GMThttps://llccing.github.io/posts/daily-english-reading-science-of-sleep/https://llccing.github.io/posts/daily-english-reading-science-of-sleep/Today's B2 level English reading article about the science of sleep, its importance for health, and tips for better rest, with audio and Chinese translation.Wed, 25 Mar 2026 20:00:00 GMThttps://llccing.github.io/posts/daily-english-reading-digital-detox/https://llccing.github.io/posts/daily-english-reading-digital-detox/Today's B2 level English reading article about digital detox - why unplugging from technology can improve your mental health and productivity, with audio and Chinese translation.Tue, 24 Mar 2026 20:00:00 GMThttps://llccing.github.io/posts/daily-english-reading-2026-03-24-ai-companions/https://llccing.github.io/posts/daily-english-reading-2026-03-24-ai-companions/B2-level English reading article about AI companions and how technology is reshaping human connection with audio narrationMon, 23 Mar 2026 20:00:00 GMThttps://llccing.github.io/posts/openclaw-exploration/https://llccing.github.io/posts/openclaw-exploration/从「API 费用爆炸」到「订阅真香」——我是如何走上 OpenClaw 自托管之路的，以及这一周的实战记录Mon, 23 Mar 2026 03:39:00 GMThttps://llccing.github.io/posts/daily-english-reading-2026-03-23-climate-change/https://llccing.github.io/posts/daily-english-reading-2026-03-23-climate-change/B2-level English reading article about climate change and environmental action with audio narration and Chinese translationSun, 22 Mar 2026 20:00:00 GMThttps://llccing.github.io/posts/github-10years-archaeology/https://llccing.github.io/posts/github-10years-archaeology/回顾10年来在 GitHub 上留下的98个仓库，记录从 Vue 新手到 AI 全栈的成长历程。Sun, 22 Mar 2026 10:00:00 GMThttps://llccing.github.io/posts/daily-english-reading-2026-03-22-mental-health/https://llccing.github.io/posts/daily-english-reading-2026-03-22-mental-health/B2-level English reading article about mental health and wellbeing with audio narration and Chinese translationSat, 21 Mar 2026 20:00:00 GMThttps://llccing.github.io/posts/daily-english-reading-2026-03-21-ai-technology/https://llccing.github.io/posts/daily-english-reading-2026-03-21-ai-technology/B2-level English reading article about artificial intelligence with audio narration and Chinese translationFri, 20 Mar 2026 20:00:00 GMThttps://llccing.github.io/posts/daily-english-reading-forever-chemicals/https://llccing.github.io/posts/daily-english-reading-forever-chemicals/Today's B2 level English reading article about PFAS (forever chemicals) and their impact on health and environment, with audio and Chinese translation.Thu, 19 Mar 2026 20:00:00 GMThttps://llccing.github.io/posts/daily-english-reading-sleep-affects-brain/https://llccing.github.io/posts/daily-english-reading-sleep-affects-brain/Today's B2 level English reading article about how sleep affects your brain, with audio and Chinese translation.Wed, 18 Mar 2026 20:00:00 GMThttps://llccing.github.io/posts/how-to-nap-like-a-pro/https://llccing.github.io/posts/how-to-nap-like-a-pro/GQ Wellness article about how to nap properly.Wed, 18 Mar 2026 06:00:00 GMThttps://llccing.github.io/posts/english-teacher-4/https://llccing.github.io/posts/english-teacher-4/跟着Roy学习英语已经有很长一段时间了，总的来说我的想法，菲教适合入门，开口，仅此而已。Mon, 24 Nov 2025 00:09:00 GMThttps://llccing.github.io/posts/one-year-in-shanghai/https://llccing.github.io/posts/one-year-in-shanghai/找到自己的舒适区，然后再稍微努力一点点。Tue, 21 Oct 2025 10:00:00 GMThttps://llccing.github.io/posts/work-with-ai/https://llccing.github.io/posts/work-with-ai/和 AI 一起工作。Sun, 24 Aug 2025 20:00:00 GMThttps://llccing.github.io/posts/start-from-shanghai/https://llccing.github.io/posts/start-from-shanghai/After six months at Accenture, I am enjoying my work with Angular 18 and learning Agile methodologies. I aim to obtain an AWS SAA certification. Personally, I've secured a Shanghai Residence Permit for my child's kindergarten while balancing family responsibilities as Tina starts a new job.Sun, 27 Apr 2025 18:20:23 GMThttps://llccing.github.io/posts/angular-upgrade-from-13-to-17/https://llccing.github.io/posts/angular-upgrade-from-13-to-17/复杂的事情可以拆分小的任务，这样更具有可行性。Sun, 14 Jul 2024 20:23:19 GMThttps://llccing.github.io/posts/ai-changed-my-life/https://llccing.github.io/posts/ai-changed-my-life/ChatGPT彻底的改变了我的工作流程，成为了我的得力助手。Mon, 13 May 2024 19:34:43 GMThttps://llccing.github.io/posts/crowded-subway/https://llccing.github.io/posts/crowded-subway/用身体挡住别人，用手机遮掩尴尬，攒满一身的戾气，影响一天的状态。Thu, 01 Feb 2024 08:23:34 GMThttps://llccing.github.io/posts/blog-in-progress/https://llccing.github.io/posts/blog-in-progress/人生就是不停地折腾，向着更好的自己前进，直到自己累了。Sat, 20 Jan 2024 14:19:23 GMThttps://llccing.github.io/posts/my-note/https://llccing.github.io/posts/my-note/记得小学老师总是提到“好记性不如烂笔头”，我想我从中获益了。Mon, 15 Jan 2024 14:19:23 GMThttps://llccing.github.io/posts/known-astro/https://llccing.github.io/posts/known-astro/第一次了解到 Astro 是通过一个Netfily 2023年12月的前端技术栈年度总结，发现它的使用占比升高了很多， 于是就比较好奇，究竟哪个特点吸引了那么多开发者使用它。 首先被它吸引是由于它做出来的网站样式非常酷，不得不说，作为前端我可能格外关注网站的样式。Mon, 01 Jan 2024 18:32:00 GMThttps://llccing.github.io/posts/annual-summary-19-23/https://llccing.github.io/posts/annual-summary-19-23/我的5家公司，我曾经走过的路，虽有坎坷，但总算收获不少。Sat, 30 Dec 2023 12:12:12 GMThttps://llccing.github.io/posts/english-teacher-3/https://llccing.github.io/posts/english-teacher-3/截止到现在 2024年1月22日09:05:19，已经成功推荐5个学生（Conrad, Leo, Klay, A girl, Robert）跟Roy学习。Tue, 05 Dec 2023 12:09:00 GMThttps://llccing.github.io/posts/english-teacher-2/https://llccing.github.io/posts/english-teacher-2/有时自己有种想拯救苍生的情节，那么就从身边的人开始。Sun, 03 Dec 2023 10:09:00 GMThttps://llccing.github.io/posts/english-teacher-1/https://llccing.github.io/posts/english-teacher-1/有的时候过来人的一句话，就会对你的生活产生巨大的改变，感恩每个遇到的人。Fri, 01 Dec 2023 10:09:00 GMThttps://llccing.github.io/posts/nestjs-passport-operations/https://llccing.github.io/posts/nestjs-passport-operations/Passport 暴露一个 `login()` 函数在 `req`（也有 `logIn()` 这个别名）上，它能够在建立登录 session 时使用。 ```jsSun, 22 Nov 2020 00:00:00 GMThttps://llccing.github.io/posts/nestjs-passport-apis/https://llccing.github.io/posts/nestjs-passport-apis/连同定义 HTTP 的身份验证框架，[RFC 2617](http://tools.ietf.org/html/rfc2617) 也定义了基本和摘要认证方案。这两种方案都使用用户名和密码作为凭证来认证用户，并且通常用于保护 API 端点。Sun, 15 Nov 2020 00:00:00 GMThttps://llccing.github.io/posts/nestjs-passport-providers/https://llccing.github.io/posts/nestjs-passport-providers/Facebook 策略允许用户使用他们的 Facebook 账户登录一个 web 应用。在内部，Facebook 认证使用 OAuth 2.0 进行工作。 Facebook 支持通过 [passport-facebook](https://github.com/jaredhanson/passporSun, 08 Nov 2020 00:00:00 GMThttps://llccing.github.io/posts/nestjs-passport-general/https://llccing.github.io/posts/nestjs-passport-general/Passport 是 NodeJS 的认证中间件。他的唯一设计目的是：验证请求。书写模块化的、封装代码是一种美德，所以 Passport 将除了验证请求之外的功能都分发给应用程序来实现。关注点分离使代码能够更加整洁、可维护，同时也使 Passport 能够极易集成到应用中。Sun, 01 Nov 2020 00:00:00 GMThttps://llccing.github.io/posts/nestjs-passport-overview/https://llccing.github.io/posts/nestjs-passport-overview/权限管理是所有系统都会有的一部分，所以我们要了解一下 nodejs 中权限部分是怎么做的，都涉及哪些模块。 Passport 是一个简单、低调的 nodejs 身份验证中间件。它是弹性的、模块化的，能够集成到任何基于 express 的 web 应用。支持一系列权限策略：账号密码、Facebook、Thu, 15 Oct 2020 00:00:00 GMThttps://llccing.github.io/posts/nestjs-oauth2/https://llccing.github.io/posts/nestjs-oauth2/OAuth 2.0 是一种授权机制，主要用来颁发令牌。 给快递员一个7天的授权码，这样不提供自己的密码即可让快递员进入小区，这样的授权机制是安全的，当时间到了之后如果仍然有需求可以二次授权，否则就自动过期Thu, 01 Oct 2020 00:00:00 GMThttps://llccing.github.io/posts/angular-version-update/https://llccing.github.io/posts/angular-version-update/- Removal of View Engine: Angular 13 fully transitioned to Ivy, removing the older View Engine, which simplifies the framework and improves performancTue, 15 Sep 2020 00:00:00 GMThttps://llccing.github.io/posts/angular-zone/https://llccing.github.io/posts/angular-zone/Zone.js, View Engine, and Ivy are all related to Angular, a popular web application framework.Tue, 01 Sep 2020 00:00:00 GMThttps://llccing.github.io/posts/angular-ivy-vs-view-engine/https://llccing.github.io/posts/angular-ivy-vs-view-engine/view engine from Angular 2. ivy introduced in Angular 9. https://designtechworld.medium.com/ivy-compiler-vs-view-engine-b607c3897d3dSat, 15 Aug 2020 00:00:00 GMThttps://llccing.github.io/posts/angular-change-detection/https://llccing.github.io/posts/angular-change-detection/浏览器渲染：模型 -> 视图。 模型可以是JavaScript中的原始数据类型、对象、数组或其他数据对象。视图可以是页面的表单、段落、按钮，这些页面元素使用 DOM 来表示。Sat, 01 Aug 2020 00:00:00 GMThttps://llccing.github.io/posts/vue3-build-size/https://llccing.github.io/posts/vue3-build-size/2.0 项目创建 ```js vue create vue2-demo ``` 3.0 项目创建过程 ```js vue create vue-next-demoMon, 01 Jun 2020 00:00:00 GMThttps://llccing.github.io/posts/vue3-features/https://llccing.github.io/posts/vue3-features/1. 通过yarn dev构建好 vue.global.js 文件 2. 通过http-server或者类似工具，启动一个server环境。 3. 注意 index.js 中的内容和文章有出入。Fri, 01 May 2020 00:00:00 GMThttps://llccing.github.io/posts/translate-vue3-2020/https://llccing.github.io/posts/translate-vue3-2020/现在 VueJS 是最热的框架之一，它在2019的周下载量翻了一倍。 2020年Vue3发布时，它将更加流行。 现在Vue团队的重点在使它能够适合所有开发者，新版本将更强大、更有效率。同时有很多的内部优化将让我们用的更爽。Wed, 01 Apr 2020 00:00:00 GMThttps://llccing.github.io/posts/translate-making-vue3/https://llccing.github.io/posts/translate-making-vue3/来自重写中的下一个版本的 Vue.js 课程。 在去年，Vue 团队一直在 Vue.js 的下一个主要版本工作，我们希望在 2020 年上半年能够发布。（在写这篇文章的时候工作仍在继续）。在 2018 年底 Vue 新版本的想法就已经成型，当时 Vue 2 代码库已经有两年半的历史了。在通用软件的生Sun, 01 Mar 2020 00:00:00 GMThttps://llccing.github.io/posts/translate-angular-interceptors/https://llccing.github.io/posts/translate-angular-interceptors/有许多种方式使用拦截器，我确定我们大多数人使用的很浅显。在这篇文章中，我将介绍在 Angular 中我最喜欢的 10 种使用拦截器的方式。 我使例子尽可能的简洁。我希望他们能够启发你们去思考使用拦截器的新方式。这篇文章不是关于拦截器教学的，因为已经有很多好的文章了。但是，在开始倒数之前，让我们以一些Wed, 01 Jan 2020 00:00:00 GMThttps://llccing.github.io/posts/translate-corejs3-babel/https://llccing.github.io/posts/translate-corejs3-babel/core-js@3 和 babel 补丁相关功能的重大变化详解Sun, 01 Dec 2019 00:00:00 GMThttps://llccing.github.io/posts/translate-nodejs-best-practices/https://llccing.github.io/posts/translate-nodejs-best-practices/虽然 Node.js 才诞生 11 年，但是已经是过去 10 年来最流行的 web 开发框架之一。我是一个终极粉丝，感谢 Node.js，让我能够在浏览器外部写 JavaScript 代码，去创建一个非阻塞的、流畅的、快速的、健壮的、可扩展的服务端应用程序。Fri, 15 Nov 2019 00:00:00 GMThttps://llccing.github.io/posts/react-ant-design/https://llccing.github.io/posts/react-ant-design/要说为啥要学习React，可能是因为难以抗拒Ant Design的美。 根据Ant Design的文档，先尝试quick start，发现没有配置webpack等构件工具的情况下难以运行起来。所以从推荐的umi/dva/antd开始Fri, 01 Nov 2019 00:00:00 GMThttps://llccing.github.io/posts/translate-vue-cli-typescript/https://llccing.github.io/posts/translate-vue-cli-typescript/翻译 @vue/cli-plugin-typescript README， [原 README](https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-typescript/README.md)Fri, 25 Oct 2019 00:00:00 GMThttps://llccing.github.io/posts/translate-vue-cli-eslint/https://llccing.github.io/posts/translate-vue-cli-eslint/- **`vue-cli-service lint`** ``` Usage: vue-cli-service lint [options] [...files]Sun, 20 Oct 2019 00:00:00 GMThttps://llccing.github.io/posts/translate-vue-cli-plugin-dev/https://llccing.github.io/posts/translate-vue-cli-plugin-dev/已经提了 merge request [https://github.com/vuejs/vue-cli/pull/5345](https://github.com/vuejs/vue-cli/pull/5345)Tue, 15 Oct 2019 00:00:00 GMThttps://llccing.github.io/posts/vue-analysis-responsive/https://llccing.github.io/posts/vue-analysis-responsive/```js <input v-model="message"/> export default { data(){ message: '' } } ``` 修改message的值，DOM就会改变，究竟如何做到的呢。Tue, 01 Oct 2019 00:00:00 GMThttps://llccing.github.io/posts/vue-analysis-components/https://llccing.github.io/posts/vue-analysis-components/生命周期函数会被合并为数组。 这种合并思想值得借鉴，本身有一套默认配置，合并传入的配置，达到定制化的目的。 放一张经典的生命周期图 _init src/core/instance/init.jsSun, 15 Sep 2019 00:00:00 GMThttps://llccing.github.io/posts/vue-analysis-update/https://llccing.github.io/posts/vue-analysis-update/```js src/core/instance/lifecycle.js src/platforms/web/runtime/index.js src/platforms/web/runtime/patch.jsSun, 08 Sep 2019 00:00:00 GMThttps://llccing.github.io/posts/vue-analysis-virtual-dom/https://llccing.github.io/posts/vue-analysis-virtual-dom/直接操作DOM会影响性能，所以才产生了虚拟DOM。 一个对象，两个前提，三个步骤。 Virtual DOM是一个基本的JavaScript对象，也是整个Virtual DOM数的基本。Sun, 01 Sep 2019 00:00:00 GMThttps://llccing.github.io/posts/vue-analysis-render/https://llccing.github.io/posts/vue-analysis-render/template ```js <div id="app"> {{ message }} </div> ``` render ```js render: function(createElement){Thu, 22 Aug 2019 00:00:00 GMThttps://llccing.github.io/posts/vue-analysis-mounted/https://llccing.github.io/posts/vue-analysis-mounted/Vue中我们是通过$mount实例方法去挂载vm的，$mount方法在多个文件中都有定义，如 ```js $mount src/platform/web/entry-runtime-with-compiler.jsThu, 15 Aug 2019 00:00:00 GMThttps://llccing.github.io/posts/vue-analysis-new-vue/https://llccing.github.io/posts/vue-analysis-new-vue/src/core/instance/index.js ```js function Vue (options) { if (process.env.NODE_ENV !== 'production' &&Thu, 08 Aug 2019 00:00:00 GMThttps://llccing.github.io/posts/vue-analysis-data-driven/https://llccing.github.io/posts/vue-analysis-data-driven/Vue.js的核心思想是数据驱动。 视图是由数据驱动生成的，我们对视图的修改，不会直接操作DOM，而是通过修改数据。 - 简化代码量 - 利于维护 简洁的模板语法来声明式的将数据渲染为DOM：Thu, 01 Aug 2019 00:00:00 GMThttps://llccing.github.io/posts/vue-analysis-entry/https://llccing.github.io/posts/vue-analysis-entry/``` src/platforms/web/entry-runtime-with-compiler.js src/platforms/web/runtime/index.jsMon, 22 Jul 2019 00:00:00 GMThttps://llccing.github.io/posts/vue-analysis-compile/https://llccing.github.io/posts/vue-analysis-compile/Vue.js源码是通过Rollup构建的，配置在build目录下。 使用Runtime only时，需要借助如webpack的vue-loader工具把.vue文件编译成JavaScript，因为这是在编译阶段做的，所以Runtime only只包含运行时的Vue.js代码，因此代码体积也更轻量。Mon, 15 Jul 2019 00:00:00 GMThttps://llccing.github.io/posts/vue-analysis-src-structure/https://llccing.github.io/posts/vue-analysis-src-structure/src下的源码 ```js src |-- compiler |-- core |-- platforms |-- server |-- sfc |-- sharedMon, 08 Jul 2019 00:00:00 GMThttps://llccing.github.io/posts/vue-analysis-flow/https://llccing.github.io/posts/vue-analysis-flow/Flow是Facebook出品的JavaScript静态类型检查工具，Vue.js的源码利用了Flow做静态类型检查，当然新版的Vue.js中使用了TypeScript来做这个事情。Mon, 01 Jul 2019 00:00:00 GMThttps://llccing.github.io/posts/eggjs-init/https://llccing.github.io/posts/eggjs-init/``` npm init egg --type=simple ``` yarn init 不好使。 之前曾经在本地创建过mysql的环境，但是很久不用也就没有启动了，但是这次无论如何也不能成功启动起来。Sat, 15 Jun 2019 00:00:00 GMThttps://llccing.github.io/posts/typescript-intro/https://llccing.github.io/posts/typescript-intro/JavaScript 类型化逐渐成为了主流。 - [ ] [文档学习](https://github.com/llccing-demo/Typescript-simple)Sat, 01 Jun 2019 00:00:00 GMThttps://llccing.github.io/posts/sql-group-by/https://llccing.github.io/posts/sql-group-by/五个常用的聚合函数 - COUNT - SUM - AVG - MAX - MIN - **计算行数** ```SQL SELECT COUNT(*) FROM `Product`Wed, 15 May 2019 00:00:00 GMThttps://llccing.github.io/posts/threejs-high-geometry/https://llccing.github.io/posts/threejs-high-geometry/- ConvexGeometry 凸面体 - LatheGeometry 扫描体 - TubeGeometry 管状几何体 - ExtrudeGeometry 拉伸几何体Wed, 15 May 2019 00:00:00 GMThttps://llccing.github.io/posts/sql-select/https://llccing.github.io/posts/sql-select/```SQL SELECT * FROM Product; ``` ```SQL SELECT product_id AS '商品别名', product_name AS '商品名字',Wed, 08 May 2019 00:00:00 GMThttps://llccing.github.io/posts/sql-create/https://llccing.github.io/posts/sql-create/数据库选的是 MySQL，语法是 MySQL 语法。 ```SQL CREATE DATABASE shop; ``` ```SQL CREATE TABLE Product(Wed, 01 May 2019 00:00:00 GMThttps://llccing.github.io/posts/threejs-geometry/https://llccing.github.io/posts/threejs-geometry/**常见几何体** - PlaneGeometry 平面 - CircleGeometry 圆形 - ShapeGeometry 塑形 - CubeGeometry 立方体Wed, 01 May 2019 00:00:00 GMThttps://llccing.github.io/posts/threejs-material/https://llccing.github.io/posts/threejs-material/简单材质 - MeshBasicMaterial 网格基础材质 - MeshDepthMaterial 网格深度材质 - MeshNormalMaterial 网格法向材质Mon, 15 Apr 2019 00:00:00 GMThttps://llccing.github.io/posts/threejs-light/https://llccing.github.io/posts/threejs-light/- Three.js库里有哪些可用的光源？ - 什么时候用什么样的光源？ - 如何调整和配置各种光源的行为？ - 如何创建镜头炫光？ - AmbientLight 环境光Mon, 01 Apr 2019 00:00:00 GMThttps://llccing.github.io/posts/webpack-learning/https://llccing.github.io/posts/webpack-learning/书籍的作者是个[孩子](http://resume.wuhaolin.cn/)，像我一样的孩子，不过比我小一岁，大家同是16年毕业，人家是真的优秀。 这本书知识点是挺全的，就是过于简单，没有深入的内容，字里行间透露着青涩，像我一样的青涩。Fri, 15 Mar 2019 00:00:00 GMThttps://llccing.github.io/posts/css-grid/https://llccing.github.io/posts/css-grid/网格布局是最强大的CSS布局方案。 它将网页分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。 Grid布局与Flex布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，也存在重大区别，Fri, 01 Mar 2019 00:00:00 GMThttps://llccing.github.io/posts/pac-proxy/https://llccing.github.io/posts/pac-proxy/Proxy Auto Config，代理自动配置，PAC 类似配置文件，通过这个文件，浏览器或者其他UA可以对每一个 URL 配置代理服务。 尝试的手机是 小米CC9 Pro，发现不太行，不生效，向参考文章中第一篇作者提问了，但是没有获得有价值的信息。Fri, 15 Feb 2019 00:00:00 GMThttps://llccing.github.io/posts/vuepress-comment/https://llccing.github.io/posts/vuepress-comment/没有评论的blog，不是一个好的blog。 当然vuepress是用来做产品使用文档的，而不是blog，所以自身就没有评论交互的基因在，但是这个可以改，已经有人提issue反馈这个问题了。Fri, 01 Feb 2019 00:00:00 GMThttps://llccing.github.io/posts/interview-js/https://llccing.github.io/posts/interview-js/```js a(typeof[1,2]); // object a(typeof 'string'); // string var f = true; a(typeof f); // booleanTue, 15 Jan 2019 00:00:00 GMThttps://llccing.github.io/posts/lerna-monorepo/https://llccing.github.io/posts/lerna-monorepo/:::tip 一个管理有多个包的JavaScript项目的工具。 ::: 主要是从 [vue-next](https://github.com/vuejs/vue-next) 项目了解到这个工具，并且发现 [vuepress](https://github.com/vuejs/vuepress) 这Tue, 15 Jan 2019 00:00:00 GMThttps://llccing.github.io/posts/interview-css/https://llccing.github.io/posts/interview-css/:::tip 利用CSS进行元素的水平居中，比较简单，行内元素设置其父元素的text-align:center，块级元素设置其本身的 margin-left和margin-right为auto即可。设置垂直居中则有些麻烦，现整理记录如下。Tue, 01 Jan 2019 00:00:00 GMThttps://llccing.github.io/posts/vue-component-rewrite/https://llccing.github.io/posts/vue-component-rewrite/现在开发后台管理系统，你不用个组件库都不好意思跟人打招呼。 做了很多后台管理系统，并且一直和UI、测试同学，针对组件库的事甩锅给组件的开发者。 **甩** UI：“这个按钮太大了，改小一点。”Sat, 15 Dec 2018 00:00:00 GMThttps://llccing.github.io/posts/gzip-compression/https://llccing.github.io/posts/gzip-compression/**gzip**是一种文件格式，也是用来压缩、解压文件的应用程序。这个程序是Jean-loup Gailly和Mark Adler创建的，它被用来替代早期Unix系统上的压缩工具，并且计划给GNU（GNU's Not Unix）用，“gzip”中的“g”就是来自GNU。Sat, 01 Dec 2018 00:00:00 GMThttps://llccing.github.io/posts/vue-cli2-to-cli3/https://llccing.github.io/posts/vue-cli2-to-cli3/- vue-cli3 已经升级到 webpack4，性能优化、构建速度提升。 - 将 webpack 的复杂配置隐藏到依赖中，减少复杂配置。 - eslint 配置，cli3 中加入了 Airbnb 等规则，这次构建使用了 Airbnb 的规则，使代码更加规范，同时会提升 js 的编写能力。Thu, 15 Nov 2018 00:00:00 GMThttps://llccing.github.io/posts/travis-ci/https://llccing.github.io/posts/travis-ci/编码只是软件开发的一小部分，更多的时间往往花在构件和测试。 Travis只支持GitHub，不支持其他代码托管服务。 没有Travis CI的情况下，每次写完需要执行下列操作。Thu, 01 Nov 2018 00:00:00 GMThttps://llccing.github.io/posts/frontend-architecture/https://llccing.github.io/posts/frontend-architecture/tips: 前端架构这个单词到底是什么，我迷茫了。 web front end architecture the structure of the web front endMon, 15 Oct 2018 00:00:00 GMThttps://llccing.github.io/posts/css-responsive/https://llccing.github.io/posts/css-responsive/主要是应用在官网的设计， CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当浏览器窗口变化的过程中，页面会根据浏览器的宽度和高度重新渲染页面。 定义浏览器的分隔点，可以参考bootstrap或者其他更细致的方案。Mon, 01 Oct 2018 00:00:00 GMThttps://llccing.github.io/posts/design-pattern-form-validation/https://llccing.github.io/posts/design-pattern-form-validation/缺点： - 多人协作时，会覆盖。 - 创建了全局变量影响性能。 优点：避免了全局变量，一旦出现覆盖现象，会全部覆盖。 问题：当别人想用你的方法时，不能复制一份，或者说别人不能通过new的方式继承这些方法。Sat, 15 Sep 2018 00:00:00 GMThttps://llccing.github.io/posts/es6-promise/https://llccing.github.io/posts/es6-promise/异步编程的解决方案，比传统的回调函数和事件更合理和强大。 Promise 最早由社区提出、实现，ES6 将其写入了语言标准，统一了用法，原生提供了 Promise 对象。Sat, 15 Sep 2018 00:00:00 GMThttps://llccing.github.io/posts/design-pattern-oop/https://llccing.github.io/posts/design-pattern-oop/:::tip 面向对象编程（Object-Oriented Programming） ::: 这样将我们将要用到的属性和方法都封装到抽象的Book类里面了,当使用功能方法时,不能直接使用Book类，需要使用new关键字来实例化新的对象。Sat, 01 Sep 2018 00:00:00 GMThttps://llccing.github.io/posts/es6-generator-async/https://llccing.github.io/posts/es6-generator-async/异步操作，一个任务不是连续完成的，先执行一段，转而执行其他任务，等做好了准备，再回过头执行第二段。 ES6之前的异步操作，大致以下四种： - 回调函数 - 事件监听Sat, 01 Sep 2018 00:00:00 GMThttps://llccing.github.io/posts/design-pattern-intro/https://llccing.github.io/posts/design-pattern-intro/Singleton 单例模式 Abstract Factory 抽象工厂模式 Builder 生成器模式 Factory Method 工厂方法模式 Prototype 原型模式Mon, 20 Aug 2018 00:00:00 GMThttps://llccing.github.io/posts/es6-generator/https://llccing.github.io/posts/es6-generator/Generator函数是ES6提供的一种异步变成解决方案,语法行为与传统函数完全不同。 Generator函数有多种理解角度，语法上，可以将Generator函数理解为状态机，封装了多个内部状态。Wed, 15 Aug 2018 00:00:00 GMThttps://llccing.github.io/posts/es6-function-extension/https://llccing.github.io/posts/es6-function-extension/- 函数参数的默认值 ```js // demo1 // ES5 function log(x, y) { y = y || 'World'; console.log(x, y);Wed, 01 Aug 2018 00:00:00 GMThttps://llccing.github.io/posts/sorting-algorithms/https://llccing.github.io/posts/sorting-algorithms/```js /** * 冒泡排序 * 入门级排序 * * 2018年09月16日23:14:17 */ let a = [123, 3, 3, 0, 31, 23, -12, 898, -2, 4, 5, 1, 2];Wed, 01 Aug 2018 00:00:00 GMThttps://llccing.github.io/posts/js-drag-drop/https://llccing.github.io/posts/js-drag-drop/<iframe height="265" style="width: 100%;" scrolling="no" title="js-basic-drag" src="https://codepen.io/llccing/embed/GRRePmw?height=265&theme-id=defauSun, 15 Jul 2018 00:00:00 GMThttps://llccing.github.io/posts/js-cookie/https://llccing.github.io/posts/js-cookie/一个cookie就是存储在用户浏览器中的一小段文本文件。cookie是纯文本的形式。浏览器将其储存并且根据一系列规则在每个请求中将该信息返回致服务器。web服务器可以用cookie来识别用户（定向投放广告）。多数需要登录的站点通通常会在认证通过后设置一个cookie，之后通过这个cookie做校验。Sun, 01 Jul 2018 00:00:00 GMThttps://llccing.github.io/posts/js-box-model/https://llccing.github.io/posts/js-box-model/上来一张图 offsetWidth/offsetHeight 返回元素的宽度/高度，不包含滚动内容的宽度/高度包括元素的边框、内边距和滚动条。 offsetLeft/offsetTopFri, 15 Jun 2018 00:00:00 GMThttps://llccing.github.io/posts/js-ajax/https://llccing.github.io/posts/js-ajax/Asynchronous JavaScript + XML, while not a technology in itself, is a term coined in 2005 by Jesse James Garrett, that describes a "new" approach to uFri, 01 Jun 2018 00:00:00 GMThttps://llccing.github.io/posts/js-arguments/https://llccing.github.io/posts/js-arguments/箭头函数中不可用，可以使用arguments对象在函数中引用函数的参数。 <iframe height="265" style="width: 100%;" scrolling="no" title="js-basic-argumetns" src="https://codepen.io/llcciTue, 15 May 2018 00:00:00 GMThttps://llccing.github.io/posts/js-apply-call/https://llccing.github.io/posts/js-apply-call/call方法使用一个指定的this值和单独给出的一个或多个参数来调用一个函数。 apply使用一个指定的this值和一个参数数组或类数组来调用一个函数。 这两个函数的第一个参数都是指定的this值，apply的第二个参数是array，而call的第二个到第N个参数就是第二个到第N个参数。Tue, 01 May 2018 00:00:00 GMThttps://llccing.github.io/posts/es6-set-map/https://llccing.github.io/posts/es6-set-map/ES6新提供的数据结构Set。类似数组，但是所有成员都是唯一的，没有重复值。 属性 - Set.prototype.constructor: 构造函数 - Set.prototype.size: 返回实例成员总数Sun, 15 Apr 2018 00:00:00 GMThttps://llccing.github.io/posts/es6-object-extension/https://llccing.github.io/posts/es6-object-extension/ES6 允许直接写入变量和函数，作为对象的属性和方法，这样的书写更加简洁。 ```js var foo = 'bar'; var baz1 = { foo }; console.log(baz);Sun, 01 Apr 2018 00:00:00 GMThttps://llccing.github.io/posts/frontend-career/https://llccing.github.io/posts/frontend-career/1. 分级：初级、中级、资深、架构师、项目负责人 2. 能力层次： 前端能力（50%），后端能力（25%），业务能力（25%）T字型。 3. 综合素质：软技能、项目经验，沟通组织Sun, 01 Apr 2018 00:00:00 GMThttps://llccing.github.io/posts/es6-string-extension/https://llccing.github.io/posts/es6-string-extension/- 字符的 Unicode 表示法 - codePointAt() - String.fromCodePoint() - 字符串的遍历器接口 - at() - normalize()Thu, 15 Mar 2018 00:00:00 GMThttps://llccing.github.io/posts/css-rem/https://llccing.github.io/posts/css-rem/rem和em都是相对单位，CSS3引入rem。 :::tip em作为font-size的单位时，代表父元素的字体大小。**em作为其他属性的单位时，代表自身字体大小。**Thu, 01 Mar 2018 00:00:00 GMThttps://llccing.github.io/posts/es6-let-const/https://llccing.github.io/posts/es6-let-const/```js 'use strict'; { let a = 10; var b = 1; } console.log(a); // Uncaught ReferenceError: a is not definedThu, 01 Mar 2018 00:00:00 GMThttps://llccing.github.io/posts/css-layout/https://llccing.github.io/posts/css-layout/- 左右布局 - 上左右布局 - 上左中右布局 <iframe height="265" style="width: 100%;" scrolling="no" title="layout-float" src="https://codepen.io/llccing/embed/vYYyoQM?heThu, 15 Feb 2018 00:00:00 GMThttps://llccing.github.io/posts/css-inline-block/https://llccing.github.io/posts/css-inline-block/1. 能够设置宽高 2. inline-block各个元素，高度不同时，以文本基线对齐，通过vertical-align:top;实现顶部对齐 <iframe height="265" style="width: 100%;" scrolling="no" title="float vs inlinThu, 01 Feb 2018 00:00:00 GMThttps://llccing.github.io/posts/annual-summary-16-18/https://llccing.github.io/posts/annual-summary-16-18/16年毕业，初八就到了北京，人生地不熟，如何闲鱼翻身进大厂成为打工人呢。Tue, 23 Jan 2018 14:14:00 GMThttps://llccing.github.io/posts/css-selector/https://llccing.github.io/posts/css-selector/```css body { color: blue; } ``` ```css .btn { font-size: 14px; } ``` ```css .dialog .title {Mon, 15 Jan 2018 00:00:00 GMThttps://llccing.github.io/posts/2018-web-dev-guide/https://llccing.github.io/posts/2018-web-dev-guide/偶然间看到的视频，视频中主要介绍现在的web开发比较常用的软件、框架（UI/JS）以及全栈工程师可以掌握的几个点。 <iframe style="margin: 0 auto;" width="560" height="315" src="https://www.youtube.com/embed/Mon, 01 Jan 2018 00:00:00 GMThttps://llccing.github.io/posts/gulp-frontend-infra/https://llccing.github.io/posts/gulp-frontend-infra/* 自动清除缓存，自动刷新，加速开发调试过程 [browserSync](https://www.browsersync.io/) or [browserSync国内](http://www.browsersync.cn/)Thu, 01 Jun 2017 00:00:00 GMThttps://llccing.github.io/posts/jquery-source/https://llccing.github.io/posts/jquery-source/最开始用jQuery是在第一份实习工作时，那个时候感觉jQuery非常nb，$()选择器简直不要特别方便。 现在的工作中也一直在使用，不过在前端框架（Angular、React）异常崛起的现在，加之ES6标准的实施，Thu, 01 Jun 2017 00:00:00 GMThttps://llccing.github.io/posts/jquery-practice/https://llccing.github.io/posts/jquery-practice/有个这样的一个需求，表格中有许多要输入的input，input有长度的控制，和数字控制。 开始想到的做法是用jQuery valudate，一个表单验证插件，后台考虑到表格中所有的input都要进行控制，而jQuery validate需要绑定id，或者每个input加上相应的类来控制，就会变得非常Wed, 01 Mar 2017 00:00:00 GMThttps://llccing.github.io/posts/bootstrap-intro/https://llccing.github.io/posts/bootstrap-intro/<iframe height="265" style="width: 100%;" scrolling="no" title="bootstrap tooltip" src="https://codepen.io/llccing/embed/PooKqvM?height=265&theme-id=0Sun, 01 Jan 2017 00:00:00 GMT