Posts | 小蘿蔔丁

如何创建可视化的Web Bookmark

最近看到 GitHub Blog 的一篇文章，《一个用于创建 Open Graph 图像的框架》，文中介绍了 GitHub 开发者是如何提高网站的 SEO 的，通过借助 Open Graph Protocol，优化站点创建了一系列利于社交网站爬虫抓取的元数据信息，其中包含了即时生成的站点信息图片，将以往“大头贴”式的站点图片改善为更具可视化意义的站点图片。

August 16, 2021

#Vue.js

「将 Vue SFC 编译为 ESM 」之路探索

「将 Vue SFC 编译为 ESM 」探索之路最近造了个轮子，基于 Vue3 代码示例的组件。

May 25, 2021

#GitHub

#可视化

领取属于你的3D GitHub Story

本文分享 GitHub Skyline 工具的玩法以及 GitHub Contributions Graph 的多种可视化展现形式。

March 05, 2021

#SVG

#Animation

《SVG 动画开发实战》小册发布

年中的时候，花了点时间在 SVG 动画开发学习上，经过不断探索总结，结合自己学到的知识，以小册子的形式沉淀下来一整套基于 SVG 进行动画开发的实践方法，我把它命名为《SVG 动画开发实战》。

December 15, 2020

#VSCode

#Extension

#TypeScript

从零编写发布一个 VSCode 扩展

年初在 TO-DO 上计划了一个任务，是以解决自身需求为目的，开发一个 VSCode 扩展。最近一个小需求来了，能否在不离开VSCode编辑器的情况下，**查看文件或者文件夹的大小**。

September 27, 2020

🦄️ Web 站点暗色模式探索

最近发布了自己的新博客 https://xlbd.me , 博客站点设计了暗色模式风格，但是当时只是基于媒体查询 perfers-color-schema 实现的跟随系统偏好设置切换主题风格，本次带来了可用户自定义的浅色/暗色主题风格切换功能，同时兼容跟随系统偏好设置切换主题风格。

September 17, 2020

#博文

#Vue.js

⌨️ Vue项目给应用优雅的绑定快捷键

想必各位前端看官也一定做过这样的需求，给我们的应用某些主要的功能绑定一个快捷键。尤其是工具类的产品，让用户可以使用快捷键操作，能大大提高工具使用效率。

July 24, 2020

#博文

#Github

Awesome Starless

A curated list of awesome repositories which stargazers less but has a huge used by.

July 08, 2020

#博文

#Ghost

Release Ghost Blog Theme Kaldorei 3.0

A Simple And Elegant Ghost Theme Derive From Default Theme Casper

June 06, 2020

#博文

#GitHub

🌳 优雅的保持你的依赖库版本安全最新

可能大部分前端开发者都会有过这样的“懒癌”想法：如果我的 `package.json` 中的依赖库能自动升级版本号就好了 😂。

June 03, 2020

#博文

#VuePress

VuePress + TailwindCss + Netlify 重写个人独立博客

建立自己的个人独立博客已经将近七年时间。从一开始的 `WordPress` 到更换轻量级的 `Ghost` 博客，又到 `JAMStack` 的 `VuePress` ，**xlbd.me** 也见证了我从一名后端开发者转型成为一名前端开发者。

June 01, 2020

#博文

前端技术栈月刊 📖 2020-05

聚焦前端，记录过去一个月发现的值得推荐的前端技术栈、文章以及应用，每月28日更新，第十七期。

May 28, 2020

#博文

前端技术栈月刊 📖 2020-04

聚焦前端，记录过去一个月发现的值得推荐的前端技术栈、文章以及应用，每月28日更新，第十六期。

April 28, 2020

#博文

前端技术栈月刊 📖 2020-03

聚焦前端，记录过去一个月发现的值得推荐的前端技术栈、文章以及应用，每月28日更新，第十五期。

March 28, 2020

#博文

前端技术栈月刊 📖 2020-02

聚焦前端，记录过去一个月发现的值得推荐的前端技术栈、文章以及应用，每月28日更新，第十四期。星推 * The GitHub CLI [https://github.com/cli/cli] Take GitHub to the command line * guijs [https://github.com/Akryum/guijs] 🐣️ The app that makes your #devlife easier. 工具 * nib [https://github.com/stylus/nib] Stylus mixins, utilities, components, and gradient image generation * FANCY-BORDER-RADIUS [https://github.com/9elements/fancy-border-radius] When you use eight values specifying border-radius in CSS, you can build organic look

February 28, 2020

#博文

前端技术栈月刊 📖 2020-01

聚焦前端，记录过去一个月发现的值得推荐的前端技术栈、文章以及应用，每月28日更新，第十三期。新年伊始，前端技术栈月刊整合了2019年度月刊内容，分类精选。把最值得推荐的内容记录下来。 2019 年度汇总 [https://xiaoluoboding.github.io/monthly/2019/] 星推 playwright [https://github.com/microsoft/playwright] Node library to automate Chromium, Firefox and WebKit with a single API 工具 Layoutit! [https://grid.layoutit.com/] Layoutit! is a CSS Grid Generator. Grid Graden [https://github.com/thomaspark/gridgarden/] A game for learning CSS grid layout 🥕 Flexbox Froggy [https://github.com/thoma

January 28, 2020

#Vue.js

#Vuex

打造 Vue 技术栈中的“时间宝石“

现代浏览器的功能越来越强大，前端需要处理的业务逻辑也越来越复杂，提供良好的交互是我们一直追求的事，而我们在做的可视化报表工具，有一个重要的提升用户体验的功能，撤销 & 重做，这个功能给用户以安全感和保障，用户不会担心所做的操作以及交互会消失掉，不可追溯。为了实现这个功能，我调研了一些实现方式，有基于 Immutable 数据结构的，有基于栈数据结构去管理的，我们的实际项目使用 Vuex 作为全局状态管理工具。而真正适合我们实际项目的其实是基于 Vuex 的 store 实例API的实现方式，将所有通过 Vuex 存储的状态，在触发 actions/mutations 时存为历史记录，当我们想用的时候就可随意“穿梭”。鉴于此我结合 stateshot 开发了一个可以 “时间旅行” 的 Vuex 插件。本文将介绍一种基于 Vuex API 实现的 “时间旅行” 插件，以动态网格布局为例子，使用 stateshot.js 实现的撤销 & 重做功能，大致效果如下图：时间旅行 Why Time Gem，强大的时间宝石，拥有操控时间的能力。 When 后悔

January 02, 2020

#博文

前端技术栈月刊 📖 2019-12

聚焦前端，记录过去一个月发现的值得推荐的前端技术栈、文章以及应用，每月28日更新，本期第十二期，本年度最后一期。

December 27, 2019

#博文

前端技术栈月刊 📖 2019-11

聚焦前端，记录过去一个月发现的值得推荐的前端技术栈、文章以及应用，每月28日更新，本期第十一期。

November 28, 2019

#JavaScript

运行 JavaScript 代码片段的 20 种工具

前端日常开发中，我们使用喜爱的 IDE 调试 JavaScript 代码，比如我喜欢的代码编辑器有两个，Sublime Text 3 和 VS Code ，前几年还使用过 Atom，偶尔我们会遇到临时需要快速分享给同事或者朋友一段代码的场景，那么在线的 JavaScript 运行环境的重要性就体现出来了。为了解决这样的问题，业界涌现出了很多很优秀的在线编辑器。比如 JS Bin、JS Fiddle、Code Pen、Code Sandbox 等，接触前端这些年也陆陆续续发现了一些不错的其他选择，再看下浏览器收藏夹，已经有20余种。

November 12, 2019

#博文

前端技术栈月刊 📖 2019-10

聚焦前端，记录过去一个月发现的值得推荐的前端技术栈、文章以及应用，每月28日更新，本期第十期

October 28, 2019

#博文

前端技术栈月刊 📖 2019-09

聚焦前端，记录过去一个月发现的值得推荐的前端技术栈、文章以及应用，每月28日更新，本期第九期。

September 28, 2019

#博文

#Mac

Macbook Pro 送修记

感觉今年真是“鼓包“（怀孕）的一年，我的部分电子产品都在不经意间鼓起了肚子，告诉我，你的电池有自己的想法。怀孕记怀孕一过年回老家，路途遥远，手机需要补充能量（充电🔋），拿出来小米充电宝一看，差点儿没气死我，一个充电宝都能“怀孕”，鼓得老大，摸着的时候还挺圆润的。我猜测是因为我不常用充电宝，宅男一枚，不经常外出，一年就回趟家算走的远的。其他时间还真没有充电宝的用武之地。怀孕二好事得成双呀，年后回来过了不久，某一天工作中开会时发现我的工作使用 2017款 Macbook Pro 13" 在平面桌子上放置不稳，打字都颤抖，这才发现是底盘不稳啊，一开始还以为电路板坏掉了。查询了下知乎，才发现，好多人跟我同样的境遇，Mac的电池鼓包了。毕竟是工作用电脑。我就没那么在意它，将就用着吧。怀孕三嗯，9月1日，过年到现在已经到了差不多的时辰了，这次怀了个大的，我的自用 2016款 Macbook Pro 15" 也发现电池鼓包了，而且严重程度远超乎我的想象，鼓包让机身触控板左侧也鼓了起来，盖子盖不上，同时撑开了机身底板。这次喜提了 “Mac 陀螺“。自用的 Mac 遇到了这种情

September 28, 2019

#博文

#ES6

#Vue.js

使用 Proxy 构建响应式系统

💡本篇博文可能学到的知识点 * 更好的理解 Vue 响应式工作原理 * 学习 Vue 的设计模式 * 学习 Proxy API * 使用 Proxy 实现观察者模式现代前端开发必不可少会用到的 Vue、React 等框架，这些框架的共同之处在于都提供了响应式（Reactive）和组件化（Composable）的视图组件，组件化开发重新定义了前端开发技术栈。结合前端构建工具以及基于框架出现的各种经过精心设计的UI组件库，让前端也进入到了一个工程化的时代。构建页面变得从未有过的简洁高效。如果你是一名经验丰富（nian ling da）的程序员，或多或少都会接触到没有这些框架之前的状态，那时候我们还手持 jQuery 利器，操纵着一手好 dom，当你初次接触到响应式框架的时候或许会被它的好用所惊艳到。我们只需要改变数据，dom就更新了。本篇博文主要是来讨论被惊艳到的响应式框架是如何实现的。我们首先来看看 Vue 是如何实现响应式系统的？ Vue 是如何实现响应式系统的？看一个简单的小例子假设我们购物车中有一个商品，单价 price，数量 quantity，总价为

September 21, 2019

#博文

前端技术栈月刊 📖 2019-08

聚焦前端，记录过去一个月发现的值得推荐的前端技术栈、文章以及应用，每月28日更新，本期第八期。

August 28, 2019

#博文

前端技术栈月刊 📖 2019-07

聚焦前端，记录过去一个月发现的值得推荐的前端技术栈、文章以及应用，每月28日更新，本期第七期。

July 27, 2019

#Vue.js

#可视化

📊 搭建基于 Cube.js 的 Vue Dashboard

Cube.js Cube.js [https://cube.dev/] - 一个完整的开源数据分析解决方案：提供高性能的大规模数据集分析技术基础架构，同时提供前端友好的API，用于构建仪表盘报表以及其他数据分析应用，它扮演了前端与后端之间的数据层角色。

July 26, 2019

#博文

前端技术月刊 📖 2019-06

聚焦前端，记录过去一个月看到的优秀的文章以及收集到的不错的资源，内容来源不限于有 Github、Hacker News、Dev.to、掘金、Twitter、v2ex 以及邮件RSS订阅和发散阅读。可能会有设计方面的分享，同时也会分享一些个人觉得比较好的应用。每月28日更新，本期第六期。

June 27, 2019

#博文

前端技术月刊 📖 2019-05

聚焦前端，记录过去一个月看到的优秀的文章以及收集到的不错的资源，内容来源主要有 Github、Hacker News、Medium、掘金、Twitter、v2ex 以及邮件RSS订阅和发散阅读。可能会有设计方面的分享，同时也会分享一些个人觉得比较好的应用。每月28日更新，本期第五期。

May 27, 2019

#Vue.js

#Webpack

🚀 记一次前端性能优化

工作中一直在做一款公司内部的BI工具，将数据可视化的报表赋能给业务人员，报表配置者通过简单的拖拽操作即可生成报表。随着系统不断的完善，加上运维推广，我们积累了越来越多的用户。这时候用户体验的方方面面都体现出来了。我们也停下产品的功能迭代，将整个系统进行优化，旨在提升用户体验。以下是我对前端项目的优化总结。

May 01, 2019

#博文

前端技术月刊 📖 2019-04

聚焦前端，记录过去一个月看到的优秀的文章以及收集到的不错的资源，内容来源主要有 Github、Hacker News、Medium、掘金、Twitter、v2ex 以及邮件RSS订阅和发散阅读。可能会有设计方面的分享，同时也会分享一些个人觉得比较好的应用。每月28日更新，本期第四期。

April 27, 2019

#博文

前端技术月刊 📖 2019-03

聚焦前端，记录过去一个月看到的优秀的文章以及收集到的不错的资源，内容来源主要有 Github、Hacker News、Medium、掘金、Twitter、 v2ex 以及邮件RSS订阅和发散阅读。可能会有设计方面的分享，同时也会分享一些个人觉得比较好的应用。每月28日更新，本期第三期。

March 28, 2019

#博文

前端技术月刊 📖 2019-02

聚焦前端，记录过去一个月看到的优秀的文章，内容来源主要有 Github、Hacker News、Medium、掘金、Twitter、v2ex、uplabs 以及邮件RSS订阅和发散阅读。可能会有设计方面的分享，同时也会分享一些个人觉得比较好的应用。每月28日更新，本期第二期。

February 28, 2019

#博文

前端技术月刊 📖 2019-01

聚焦前端，记录过去一个月看到的优秀的文章，内容来源主要有 Github、Hacker News、Medium、掘金、Twitter、v2ex、uplabs 以及邮件RSS订阅和发散阅读。可能会有设计方面的分享，同时也会分享一些个人觉得比较好的应用。每月28日更新，本期第一期。

January 28, 2019

#HTML5

#Vue.js

使用 Drag and Drop 给Web应用提升交互体验

什么是 Drag and Drop （拖放）？简单来说，HTML5 提供了 Drag and Drop API，允许用户用鼠标选中一个可拖动元素，移动鼠标拖放到一个可放置到元素的过程。我相信每个人都或多或少接触过拖放，比如浏览器多标签页之间的可拖放排序、手机中的App可以随便拖放排序等等，Drag and Drop 已经给我们提供了更便捷、更灵活的网络应用体验。

November 18, 2018

#Ghost

Ghost 博客主题 Kaldorei 2.0 发布

Kaldorei A Simple And Elegant Ghost Theme Derive From Default Theme Casper [/content/images/2018/11/preview-1.png] 新特性 Kaldorei 2.0 现已支持 Ghost Blog 2.x. * 页面布局样式优化 * 站点信息Widget样式优化 * 博文排版样式优化 * 响应式样式优化 * 支持中英文语言版本切换 Plan To Do * 主题基调定为小清新绿色 * 文章样式色调为墨蓝色 * 返回顶部 * 代码高亮 * 文章栏 > 作者信息 * 侧边栏 > 标签云 * 侧边栏 > 文章目录 * 侧边栏 > 站点信息 * 侧边栏 > 作者信息 * 首页文章加载动画 * 图片暗箱效果 * 响应式设计 * 归档功能 * 博客搜索 * 更改配色与字体 How to use 🌐 切换语言 Ghost2.x版本中支持了语言的切换，Kaldorei 同时也支持了中/英文

November 11, 2018

#JavaScript

JavaScript 中的求值策略

最近在研究 lambda演算 [https://xlbd.me/posts/2016-10-24-lambda-calculus.html] 中的 η-变换在 JavaScript 中的应用，偶然在 stackoverflow 上看到一个比较有意思的问题。关于 JavaScript 的求值策略，问JS中函数的参数传递是按值传递还是按引用传递？回答很经典。

January 13, 2018

#博文

#Ghost

博客升级 Ghost 1.x 小记

距离 Ghost 博客发布 1.0 版本已经有小半年时间了，到博主今天升级博客 Ghost 已经版本迭代到了 v1.18.4，Ghost 团队这迭代够快的了。感觉不久就会发布2.x版本😂，其实我9月份就尝试过去升级博客。记得上次是生产环境使用 ghost-cli 时出现数据库迁移问题，让我暂时放弃了直接升级博客。不过那时候根据v1.x主题升级攻略 [https://themes.ghost.org/docs/migrate-to-ghost-1-0-0]， Kaldorei [http://xlbd.me/kaldorei/] 从 v0.8.0 升级到了 v1.0.0，完美适配了 Ghost v1.x。花了一下午时间，来研究如何升级 Ghost 到生产环境。别于旧版的 Ghost 环境部署流程，v1.0.0 开始，Ghost 团队提供了 ghost-cli 用来搭建部署，具体参考Install & Setup (production) [https://docs.ghost.org/v1.0.0/docs/install] 其中在我的vps中遇到了一些坑，下面是我的

December 10, 2017

#Ghost

Ghost 博客主题 Kaldorei 1.0 发布

Kaldorei A Simple And Elegant Ghost Theme Derive From Default Theme Casper Plan To Do * 主题基调定为小清新绿色 * 文章样式色调为墨蓝色 * 返回顶部 * 代码高亮 * 文章栏 > 作者信息 * 侧边栏 > 标签云 * 侧边栏 > 文章目录 * 侧边栏 > 站点信息 * 侧边栏 > 作者信息 * 首页文章加载动画 * 图片暗箱效果 * 响应式设计 * 归档功能 * 全文搜索 * 隐藏侧边栏 * 延迟加载 * 推荐文章置顶 How to use 统计 kaldorei使用了ghost的api来做统计，所以需要开启ghost的实验室中的Public API功能。 > 方法：ghost后台 > labs > Enable Beta Features > 勾选 Public API 开启Disqus kaldorei支持Disqus讨论插件，只需在后台代码注入处添加一段代码 > 方法：gho

December 10, 2017

#Ghost

Ghost博客时间汉化方案

使用Ghost搭建博客已经有两年多了。就连自己开源的主题Kaldorei [http://xlbd.me/kaldorei/]也已经一年零7个月，到今天为止 ghost-theme-kaldorei [https://github.com/xiaoluoboding/ghost-theme-kaldorei] 已经获得了100个star。刚刚破百。感谢这100位coder的支持。ghost 从我开始用的的0.7.x版本已经升到了1.x版本。期待已久的ghost也已经发布了1.x正式版。最近看下稳定版本在1.8.4 。发展迅猛。不过到现在貌似也没有看到文档中有关日期的国际化相关API。如何让博客的日期汉化那么只能自己想办法修改了。分析下博客中使用到日期的模版。阅读官方文档 [http://themes.ghost.org/docs/date]得知这里谈到的日期 ghost提供的日期格式化助手date.js。而这个助手使用的是moment.js。这就好办了。前端同学对moment.js 并不陌生。它是支持国际化的。我们找到date助手的代码，修改它就好了。路径： /gh

September 24, 2017

#Vue.js

#Webpack

Webpack 2.x 在Vue2.x项目中的应用

> 最近开发的项目里使用了 Webpack + Vue 全家桶技术栈，鉴于Webpack的版本迭代还在高速发展期，我使用了Webpack2.x的稳定版本 2.2.0来作为脚手架的打包构建工具。管理资源加载CSS style-loader css-loader less-loader extract-text-webpack-plugin 项目中使用了 less 作为css的预处理，并且使用 extract-text-webpack-plugin 插件抽取css到单独的文件中。 _.cssLoader = config.cssModules ? 'css-loader?-autoprefixer&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' : 'css-loader?-autoprefixer' _.cssProcessors = [ { loader: '', test: /\.css$/ }, { load

September 17, 2017

#Vue.js

#Vuex

vue-demo-collection 基于Vue2.x重构升级

去年vue还没有升级为2.0点时候，创建了这个库，并且写了几篇简单的入门教程。发现也有一些朋友都拿这个collection来入门vue，在去年10月份vue升级2.0版本后，我一直没时间来升级这个collection。现在终于有一整块时间来做升级。借助这几个demo来感受如何从vue1.x升级vue2.x。我新建了 vue2.x [https://github.com/xiaoluoboding/vue-demo-collection/tree/vue2.x] 分支，所有的升级改动都将提交到这个分支中。 package版本升级 * vue: ^1.0.0 to ^2.2.1 * vue-resource: ^0.7.4 to ^1.3.1 * vue-router: ^0.7.13 to 2.5.2 * vuex: ^0.6.3 to 2.3.1 * webpack: ^1.12.2 to 2.2.0 看完版本升级对比，感觉我都是拿着“古董”写的vue1.x版本的demo。vue全家桶+webpack全部有了重要的更新。前端生态就是这样子，半年不去更新，世界都

April 29, 2017

#Ghost

#Linux

给xlbd.me办了新身份证

每次博客迁移或者升级我都会写一篇日志，来记录博客的历程。这次也不例外。最近逛v2ex发现Linode在情人节推出了5$/mo的套餐，2015年10月份以来一直用的Linode的10$/mo 套餐，因为机房在美国速度感觉越来越慢。对比下新的五刀VPS只是内存降低到了1个G。对于我这小流量的博客来说已经够用了。看来我的VPS得换个IP了。正好借此机会升级下Ghost。每个月还可以省下一杯Coffee☕️，2333。备份博客信息 * 博客配置文件，打包/home/ghost目录 * CentOS配置文件.bash_profile和.vimrc * nginx 虚拟主机配置文件 * 导出博客数据为.json 文件选择新的Linode 这次在离国内较近的新加坡服务器和日本服务器之间做了选择。经过测试，日本服务器速度更快些。所以五刀VPS选择了日本服务器。 Add a Linode 选择Linode 1024 $5/month [/content/images/2017/02/1.jpg] Deploy an Image 我比较熟悉CentOS系统，所以我的博客就是

February 22, 2017

#JavaScript

#ES6

ES6函数与Lambda演算

缘起造了一个轮子，根据GitHub项目地址，生成项目目录树，直观的展现项目结构，以便于介绍项目。欢迎Star。 repository-tree [https://github.com/xiaoluoboding/repository-tree] 应用涉及到了展现目录树，实现方法不可或缺的一定是递归遍历。进而开启了我对lambda演算的探索发现之旅。

October 24, 2016

#GitHub

Creating GitHub pages from the command line

If you're familiar with command-line Git, it's straightforward to manually create a Github Pages site. Make a fresh clone To set up a Project Github Pages site, you need to create a new "orphan" branch (a branch that has no common history with an existing branch) in your repository. The safest way to do this is to start with a fresh clone: $ git clone github.com/user/repository.git # Clone our repository Cloning into 'repository'... remote: Counting objects: 2791, done. remote: Compressing obj

September 14, 2016

#Vue.js

#CSS3

VueStroll超赞的CSS3列表滚动效果

Stroll.js [https://github.com/hakimel/stroll.js]当我第一次发现它的时候被它超赞的效果惊艳到了。你也可以去试试 [http://lab.hakim.se/scroll-effects/mobile.html]。它的作者也创造了REVEAL.JS [https://github.com/hakimel/reveal.js]。也许你更熟悉它。列表可以这样玩： vue-stroll [https://github.com/xiaoluoboding/vue-stroll]是我两个月前基于Vue.js + Stroll.js打包的模块，并把它发布到了npm。自从使用Vue.js以来。就各种想尝试造轮子。因为使用Vue.js组件化开发体验超级棒的。在npm发布模块以后，我把它申请加入到了 awesome-vue [https://github.com/vuejs/awesome-vue]这个清单中，在这里你也可以找到它。 ---------------------------------------------------------

August 20, 2016

#Vue.js

#Vuex

#Database

Vuex结合Mongoose最佳实践

这篇文章的草稿放在Ghost后台由来已久了，因为我想在写一篇Vuex总结性的文章 [http://xlbd.me/vue-vuex-shopping-cart/]之后再发表它。这样也有个循序渐进的感觉。本文适合了解Vue.js、Vuex、以及 MongoDB的小伙伴。 Why Mongoose? * Node下开发应用，如何持久化数据？ * 我觉得MongoDB是很好的解决方案。尤其适合敏捷开发。 * Node下使用MongoDB，如何操作MongoDB数据库？ * 我刚开始接触MongoDB的时候还在用node-mongodb-native [https://github.com/mongodb/node-mongodb-native] ，MongoDB出品的Node.js驱动。操作数据库可不像Oracle，MySQL这种关系型数据库，基本的SQL语言搞定。那代码量一坨一坨的。于是发现了 Mongoose [https://github.com/Automattic/mongoose]，有了它代码量减轻了不少

July 17, 2016

#Vue.js

#Vuex

使用Vue.js和Vuex实现购物车场景

本文是上篇 [http://xlbd.me/vue-demo-github-file-explorer/] 文章的序章，一直想有机会再次实践下Vuex。写下这篇总结，See Demo [http://xiaoluoboding.github.io/vue-demo-collection/shopping-cart]。什么是Vuex？ Flux-inspired Application Architecture for Vue.js Vuex实际上是类Flux [https://facebook.github.io/flux/] 的数据管理架构。它主要帮我们更好的组织代码，让Vue中的状态通过状态管理维护起来。在实际项目运用中我们需要对组件的组件本地状态(component local state) 和应用层级状态(application level state) 进行区分。 Vuex的作用就是汇集应用层级的状态到一处，方便管理。说状态其实有些同学可能不太理解，那么在刚上手Vue的时候做过的例子中，一个Vue实例中都会有data，那么这个data中保存的属性其实就是可以

June 22, 2016

#Vue.js

#GitHub

使用Vue.js从零构建GitHub项目浏览器

最近几个月在学习Vue.js并把它应用到实际项目中，在通读官方中文教程之后，前期学习期间Create a GitHub File Explorer Using Vue.js [https://scotch.io/tutorials/create-a-github-file-explorer-using-vue-js] 这篇文章给我了较好的启发。于是结合自己最新的学习成果写下这篇总结。源码地址：github-file-explorer [https://github.com/xiaoluoboding/vue-demo-collection/tree/master/github-file-explorer] See DEMO [http://xiaoluoboding.github.io/vue-demo-collection/github-file-explorer/] 开发环境搭建参考官方教程构建大型应用 [http://cn.vuejs.org/guide/application.html]中提到的脚手架工具vue-cli [https://github.com/vuej

June 05, 2016

#博文

#Ghost

Ghost博客使用fancybox的正确姿势

在Ghost博客后台，使用Markdown编辑器。 Ctrl + Shift + I，图片快捷键，生成代码： ![](http://) Ctrl + K，链接快捷键，生成代码：[](http://) 正确格式 fancybox实现后实际上是个图片链接，So，把图片放入链接里。格式： [![](http://)](http://) 例如： [![风景 - 1](/content/images/2016/05/vies1.jpg)](/content/images/2016/05/vies1.jpg) [/content/images/2016/05/vies1.jpg] [/content/images/2016/05/view2.jpg] [/content/images/2016/05/view3.jpg]

May 25, 2016

#Vue.js

使用Vue.js实现列表选中效果

实际项目中，我们会遇到很多类似的需求，一个列表，需要点击其中一条高亮显示。熟悉JQuery的同学说这个太简单了。可以给这个选中的element设置一个active的class。配合Css样式，让active有选中高亮效果。但是谁说一定要用到jQuery呢。最近在做的项目中，我尝试脱离JQuery，绕过JQuery，我所接触的大部分项目中好像不使用JQuery无法进行开发一样。它确实给开发者提供了太多便利。以至于大部分web网站都依赖它运行着。据 w3Techs统计 [http://w3techs.com/technologies/details/js-jquery/all/all] ，JQuery的市场份额高达94.9%，是时候脱离JQuery的束缚了。使用Vue.js更简洁，快速地实现。选中效果实现的核心实现逻辑是拷贝一份当前状态作为快照。比对列表的快照和当前的唯一索引，如果相同则视为选中。 Demo 使用Vue.js实现

April 25, 2016

#GitHub

#博文

断点

作为一名程序狗，怎么让自己的bigger提高一点点呢，两年前以为拥有自己的博客，是一件略diao 的事情，于是有了第一个域名xlbd.net搭建的wordpress博客，后来换了bigger更高的Ghost博客以及域名xlbd.me，再后来换了自己的码的主题，bigger+1。最近发现某些招聘网站上，都会加上有Github开源项目贡献优先等等的条件。这次我要让bigger更高点，让Github上的Contributions飘绿。断点一最近两个半月一直活跃在Github上，开始时断断续续的有Contribution，后来为了让自己保持每天编程的习惯，给自己定下一个目标，开发一个Ghost主题，于是我的第一款Ghost主题 Kaldorei [https://github.com/xiaoluoboding/ghost-theme-kaldorei] 就诞生了。时值春节，Contribution也是断断续续的。年后规划做完Kaldorei [https://github.com/xiaoluoboding/ghost-theme-kaldorei]主题，有了一次12天的连击，2月2

April 07, 2016

#Linux

#Node.js

Node.js环境离线安装pm2

Node.js环境下如何让应用后台运行？两个解决方案： * pm2 [https://github.com/Unitech/pm2] * forever [https://github.com/foreverjs/forever] 个人认为pm2比forever好用，Github上的star数也许能说明一些问题，本博客就是使用pm2一直守护运行的。内网部署应用需要用到pm2 离线安装pm2 先在一台能连网的Linux服务器上安装pm2 npm install pm2 -g 查询本机npm默认全局安装目录 npm config get prefix 如果显示/usr/local/node,则npm的默认全局安装目录是/usr/local/node/lib/node_modules/ 在默认全局目录下找到pm2 cd /usr/local/node/lib/node_modules/ 打包pm2 tar -cvzf pm2.tar.gz pm2 上传到内网Linux服务器的npm默认全局目录下，解压。 tar -xvzf pm2.tar.gz

April 06, 2016

#GitHub

如何同步更新GitHub的fork仓库

需求 fork过的项目，自己做了些改动，但是原作者也更新了项目，如何和源库保持同步呢？解决方案给fork配置远程上游库 * 查看远程库 git remote -v * 添加上游库(只操作一次) git remote add upstream https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git 同步fork * 拉取上游库到本地 git fetch upstream * 合并到本地master分支 git merge upstream/master 推送到fork git push origin master 官网帮助文档 Syncing a fork [https://help.github.com/articles/syncing-a-fork/]

March 06, 2016

#Ghost

Ghost博客主题kaldorei发布

kaldorei A Simple And Elegant Ghost Theme Derive From Default Theme Casper Plan To Do * 主题基调定为小清新绿色 * 文章样式色调为墨蓝色，参考 [马克飞象] [http://maxiang.io] * 返回顶部 * 代码高亮 * 文章栏 > 作者信息 * 侧边栏 > 标签云 * 侧边栏 > 文章目录 * 侧边栏 > 站点信息 * 侧边栏 > 作者信息 * 首页文章加载动画 * 图片暗箱效果 * 响应式设计 * 归档功能 * 全文搜索 * 隐藏侧边栏 * 尝试让markdown支持更多功能 * 延迟加载 * 推荐文章置顶 How to use 统计 kaldorei使用了ghost的api来做统计，所以需要开启ghost的实验室中的Public API功能。方法：ghost后台 > labs > Enable Beta Features > 勾选 Public API 开启Disq

February 21, 2016

#Ghost

Ghost博客为主题添加标签云的两种方法

最近在开发kaldorei [https://github.com/xiaoluoboding/ghost-theme-kaldorei]主题，需要添加标签云功能。早在去年使用uno-zen [https://github.com/Kikobeats/uno-zen] 主题的时候我有考虑过是否加入标签云功能，因为那时候太忙，没有时间去打理我的博客，更别说去添加什么功能。使用过wordpress，wordpress有很多不错的挂件很好用，其中就有标签云，标签云能很好的表现出一个博客的文章分类。所以本次的主题开发把标签云列在功能清单里。方法一： ghostchina [http://www.ghostchina.com/]上有一篇文章讲过如何为博客增加“标签云” [http://www.ghostchina.com/output-tag-cloud/]功能，是增加了一个新的handlebars 助手，经过测试，可以使用的，不过有一个名为post_count变量貌似失效了，没有细研究。方法二：使用ghost提供的api，需要开启**实验室(Labs)**中的Public API

February 18, 2016

#JavaScript

JS对货币格式化函数

将数值四舍五入(保留2位小数)后格式化成金额形式 /** * 将数值四舍五入(保留2位小数)后格式化成金额形式 * * @param num 数值(Number或者String) * @return 金额格式的字符串,如'1,234,567.45' * @type String */ function formatCurrency(num) { num = num.toString().replace(/\$|\,/g,''); if(isNaN(num)) num = "0"; sign = (num == (num = Math.abs(num))); num = Math.floor(num*100+0.50000000001); cents = num%100; num = Math.floor(num/100).toString(); if(cents<10) cents = "0" + cents; for (var i = 0; i < Math.floor((num.le

November 02, 2015

#Database

Oracle创建Database Link访问远程数据库

工作中有需求用到两台不同服务器下的数据库，从一台服务器读取另一台服务器数据库上的数据。需要用到Oracle数据库的Database link。创建Database Link CREATE DATABASE LINK "DBL_REMOTEDB" CONNECT TO "REMOTE_USERNAME" IDENTIFIED BY "REMOTE_PASSWORD" USING '(DESCRIPTION = (ADDRESS_LIST = (ADDRESS = (PROTOCOL = TCP)(HOST = REMOTE_IP)(PORT = 1521)) ) (CONNECT_DATA = (SERVICE_NAME = REMOTE_SERVICE_NAME) ) ) '; 查看远程数据库表或视图 --查询远程表 SELECT * FROM REMOTE_TABLE@DBL_REMOTEDB; --查询远程视图 SELECT * FROM REMOTE_VIEW@DBL_REMOTED

October 19, 2015

#博文

从WordPress到Ghost

正如上篇博文所提到的，xlbd.me即将使用Ghost 博客，如今已经蜕变完毕。正是我9月份的计划的，最近没有闲暇时间用来打理博客，工作、加班、美剧、三国杀占据了我整个生活，月底了还是来割割草吧。要不我都不认得这里还是我的一亩三分地啦。O(∩_∩)O~~ -------------------------------------------------------------------------------- 用零散的时间我了解了Ghost博客的玩法。考查了各种可能性，还是决定从WordPress迁移至Ghost ，首先我喜欢的是Ghost的简洁，作为一名码农，吸引我的自然会是MarkDown编辑器。开工玩Ghost时，我在Windows上折腾过，VMWare上安装Linux虚拟机折腾过，甚至用Docker 搭建一个Ghost来玩。发现可自定义性很高的，脱离了WordPress你会觉得Ghost太过简洁了。于是需要自己动手安装插件，这也是乐趣所在。自己又能学习一下node.js，何乐为不为呢。 -----------------------------------

October 01, 2015

#博文

博客已更换域名为xlbd.me

xlbd.net这个域名陪伴我了两年，当初在Hostease买主机送的域名。去年主机更换为LiNode之后，Hostease再也没有用过。最近邮箱频繁收到 Hostease发来的账单。然而我不会再续费了。既然主机换了，那么我打算把域名一起换了得了。彻底和Hostease说再见。 9月1日，在GoDaddy购得xlbd.me域名，本博也正式更改域名为xlbd.me。一直认为.me是个不错的博客域名，体现自我，只讲我的故事。最近工作忙成狗了。竟然三个月没有更新博客。作为一个项目负责人还是比较头疼的。还好。这段时间过去了。我又回到了有自由时间可以写博文的时光。最近接触并学习了不少好技术， AngularJS/Docker/Python 我发现我学的东西真杂。从前端到后端，从服务器维护到架构。有时候我真想自己是不是可以当一个全栈工程师。还刻意了解过，全栈需要掌握的技术，我还远远不够。不过我可以向全栈努力。至少提起来就很高逼格不是。朋友说他也想搭建博客。我推荐使用Ghost，脱离WordPress繁杂的东西。简洁、纯粹。Ghost 上线也将近一年，一直在关注。作为一名技术分享者还是值

September 02, 2015

#Linux

LiNode安全：修改主机默认SSH端口

最新登录虚拟主机发现一个错误，有异常IP尝试登录我的虚拟主机： There were 37 failed login attempts since the last successful login. 解决办法：修改SSH默认的端口号22。一、修改配置文件： [root@linux ~]： vi /etc/ssh/sshd_config` # $OpenBSD: sshd_config,v 1.93 2014/01/10 05:59:19 djm Exp $ # This is the sshd server system-wide configuration file. See # sshd_config(5) for more information. # This sshd was compiled with PATH=/usr/local/bin:/usr/bin # The strategy used for options in the default sshd_config shipped with # OpenSSH is to specify

January 07, 2015

#博文

决定域名去掉www

偶然小犯贱的在百度搜了一下关键字“xlbd”，又搜了下“xlbd.net”，这才发现。百度对于我的博客是分别收录www.xlbd.net和xlbd.net的。于是查了下原因，才知道。www.xlbd.net也只是xlbd.net的一个二级域名，只不过是比较特殊的二级域名。据说把www.xlbd.net重定向到xlbd.net，合并两个域名有利于SEO。其实早就想把把那www去掉，就用简短的域名。我的LiNode VPS中WEB服务器使用的是Nginx。那就得用到Nginx的重定向来实现了。方法：一、修改.conf配置文件 server_name xlbd.net www.xlbd.net; if ( $host = 'www.xlbd.net' ) { rewrite ^/(.*)$ http://xlbd.net/$1 permanent; } 二、重启Nginx服务 ./etc/init.d/nginx restart 三、修改WordPress [http://xlbd.net/wp-content/uploads/2014/10/2383.jpg]

October 15, 2014

#博文

小蘿蔔丁迁移到LiNode，开博一年纪念。

创建此博客的时候，在美国主机侦探那里选择了HostEase购买域名，后来看有购买主机送域名服务就顺便也买了主机，Basic型，两年期。经过一年的使用经历，总结为一个字“烂”。博客常常挂掉，要不就是打开超慢，还有被墙的情况。因为主机机房在美国，国内访问超慢的。找过客服调过两次IP，依然超烂。去年911开博，至今一年零一个月整。十一期间我决定换一个VPS。最后选择了VPS界有高富帅之称的LiNode。去年稍有了解，那时候看VPS低配还是20$/月呢。今年大放血，10$/月。果断选择了VPS。经过放假几天的测试。确实国内访问速度很快，并且相对稳定，还是很满意的。果断和HostEase Say Bye。一晃一年过去了。这一年成长不少。去年经历了职场上的第一次跳槽。在找工作的时候，看到很多科技公司对程序员的要求也越来越高。要么要有高学历，要么有多年经验。再看看自己，还是照要求有些差距的。更多科技公司需求的是全能型人才。需要掌握的技术也需求多样。所以作为后端开发的我半路出家，准备发展发展前端技术，学学PHP什么的。也丰富一下我的业余生活。程序员不就是这样嘛，需要长久保持对写代码的热爱之情。要

October 11, 2014