All Posts
Image Placeholder
如何创建可视化的Web Bookmark

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

August 16, 2021
Image Placeholder
「将 Vue SFC 编译为 ESM 」之路探索

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

May 25, 2021
Image Placeholder
领取属于你的3D GitHub Story

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

March 05, 2021
Image Placeholder
《SVG 动画开发实战》小册发布

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

December 15, 2020
Image Placeholder
从零编写发布一个 VSCode 扩展

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

September 27, 2020
Image Placeholder
🦄️ Web 站点暗色模式探索

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

September 17, 2020
Image Placeholder
⌨️ Vue项目给应用优雅的绑定快捷键

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

July 24, 2020
Image Placeholder
Awesome Starless

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

July 08, 2020
Image Placeholder
Release Ghost Blog Theme Kaldorei 3.0

A Simple And Elegant Ghost Theme Derive From Default Theme Casper

June 06, 2020
Image Placeholder
🌳 优雅的保持你的依赖库版本安全最新

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

June 03, 2020
Image Placeholder
VuePress + TailwindCss + Netlify 重写个人独立博客

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

June 01, 2020
Image Placeholder
前端技术栈月刊 📖 2020-05

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

May 28, 2020
Image Placeholder
前端技术栈月刊 📖 2020-04

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

April 28, 2020
Image Placeholder
前端技术栈月刊 📖 2020-03

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

March 28, 2020
Image Placeholder
前端技术栈月刊 📖 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
Image Placeholder
前端技术栈月刊 📖 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
Image Placeholder
打造 Vue 技术栈中的“时间宝石“

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

January 02, 2020
Image Placeholder
前端技术栈月刊 📖 2019-12

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

December 27, 2019
Image Placeholder
前端技术栈月刊 📖 2019-11

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

November 28, 2019
Image Placeholder
运行 JavaScript 代码片段的 20 种工具

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

November 12, 2019
Image Placeholder
前端技术栈月刊 📖 2019-10

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

October 28, 2019
Image Placeholder
前端技术栈月刊 📖 2019-09

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

September 28, 2019
Image Placeholder
Macbook Pro 送修记

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

September 28, 2019
Image Placeholder
使用 Proxy 构建响应式系统

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

September 21, 2019
Image Placeholder
前端技术栈月刊 📖 2019-08

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

August 28, 2019
Image Placeholder
前端技术栈月刊 📖 2019-07

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

July 27, 2019
Image Placeholder
📊 搭建基于 Cube.js 的 Vue Dashboard

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

July 26, 2019
Image Placeholder
前端技术月刊 📖 2019-06

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

June 27, 2019
Image Placeholder
前端技术月刊 📖 2019-05

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

May 27, 2019
Image Placeholder
🚀 记一次前端性能优化

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

May 01, 2019
Image Placeholder
前端技术月刊 📖 2019-04

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

April 27, 2019
Image Placeholder
前端技术月刊 📖 2019-03

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

March 28, 2019
Image Placeholder
前端技术月刊 📖 2019-02

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

February 28, 2019
Image Placeholder
前端技术月刊 📖 2019-01

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

January 28, 2019
Image Placeholder
使用 Drag and Drop 给Web应用提升交互体验

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

November 18, 2018
Image Placeholder
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
Image Placeholder
JavaScript 中的求值策略

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

January 13, 2018
Image Placeholder
博客升级 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
Image Placeholder
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
Image Placeholder
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
Image Placeholder
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
Image Placeholder
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
Image Placeholder
给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
Image Placeholder
ES6函数与Lambda演算

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

October 24, 2016
Image Placeholder
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
Image Placeholder
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
Image Placeholder
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
Image Placeholder
使用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
Image Placeholder
使用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
Image Placeholder
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
Image Placeholder
使用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
Image Placeholder
断点

作为一名程序狗,怎么让自己的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
Image Placeholder
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
Image Placeholder
如何同步更新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
Image Placeholder
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
Image Placeholder
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
Image Placeholder
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
Image Placeholder
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
Image Placeholder
从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
Image Placeholder
博客已更换域名为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
Image Placeholder
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
Image Placeholder
决定域名去掉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
Image Placeholder
小蘿蔔丁迁移到LiNode,开博一年纪念。

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

October 11, 2014