All Posts
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