肥仔john_个人页

CSS魔法堂：那个被我们忽略的outline

CSS魔法堂：更丰富的前端动效by CSS Animation

在[《CSS魔法堂：Transition就这么好玩》](https://www.cnblogs.com/fsjohnhuang/p/9143035.html)中我们了解到对于简单的补间动画，我们可以通过`transition`实现。

CSS魔法堂：改变单选框颜色就这么吹毛求疵！

是否曾经被业务提出"能改改这个单选框的颜色吧！让它和主题颜色搭配一下吧！"，然后苦于原生不支持换颜色，最后被迫自己手撸一个凑合使用。若抛开`input[type=radio]`重新开发一个，发现要模拟选中、未选中、不可用等状态很繁琐，而涉及单选框组就更烦人了，其实我们可以通过`label`、`::before`、`:checked`和`tabindex`，然后外加少量JavaScript脚本就能很好地模拟出一个样式更丰富的“原生”单选框。

CSS魔法堂：Flex布局

前端魔法堂——调用栈，异常实例中的宝藏

在上一篇《前端魔法堂——异常不仅仅是try/catch》中我们描述出一副异常及如何捕获异常的画像，但仅仅如此而已。试想一下，我们穷尽一切捕获异常实例，然后仅仅为告诉用户,运维和开发人员页面报了一个哪个哪个类型的错误吗？答案是否定的。

前端魔法堂——异常不仅仅是try/catch

编程时我们往往拿到的是业务流程正确的业务说明文档或规范，但实际开发中却布满荆棘和例外情况，而这些例外中包含业务用例的例外，也包含技术上的例外。对于业务用例的例外我们别无它法，必须要求实施人员与用户共同提供合理的解决方案；而技术上的例外，则必须由我们码农们手刃之，而这也是我想记录的内容。

编译期类型检查 in ClojureScript

话说"动态类型一时爽，代码重构火葬场"，虽然有很多不同的意见(请参考)，但我们看到势头强劲的TypeScript和Flow.js，也能感知到静态类型在某程度上能帮助我们写出更健壮的代码（当然要基于充分的单元测试上啦）。

Chrome Extension in CLJS —— 搭建开发环境

 磨刀不误砍柴工，本篇将介绍如何搭建Chrome插件的ClojureScript开发环境。 具体工具栈：vim(paredit,tslime,vim-clojure-static,vim-fireplace) + leiningen(lein-cljsbuild,lein-doo,lein-ancient) + com.

(cljs/run-at (JSVM. :all) "Metadata就这样哦")

动态类型语言，少了静态类型语言必须声明变量类型的累赘，但也缺失了编译时类型检查和编译时优化的好处。cljs虽然作为动态类型语言，但其提供Metadata让我们在必要的时候可选择地补充类型提示，以便提高代码可读性和供编译器优化使用。

(cljs/run-at (JSVM. :all) "一次说白DataType、Record和Protocol")

在项目中我们一般会为实际问题域定义领域数据模型，譬如开发VDOM时自然而言就会定义个VNode数据类型，用于打包存储、操作相关数据。clj/cljs不单内置了List、Vector、Set和Map等数据结构，还提供deftype和defrecord让我们可以自定义数据结构，以满足实际开发需求。

(cljs/run-at (JSVM. :all) "细说函数")

作为一门函数式编程语言，深入了解函数的定义和使用自然是十分重要的事情，下面我们一起来学习吧！

(cljs/run-at (JSVM. :browser) "简单类型可不简单啊～")

每逢学习一个新的语言时总要先了解这门语言支持的数据类型，因为数据类型决定这门语言所针对的问题域，像Bash那样内置只支持字符串的脚步明显就是用于文本处理啦。而数据类型又分为标量类型(Scalar)、结构类型(Struct)和集合类型(Collection)，标题中的简单类型实质就是指标量类型。

(cljs/run-at (JSVM. :browser) "命名空间就这么简单")

一个cljs文件定义一个命名空间，通过命名空间可以有效组织代码，这是构建大型系统必备的基础设施。本篇我们就深入理解cljs中的命名空间吧！

(cljs/run-at (JSVM. :browser) "搭建刚好可用的开发环境!")

书接上一回，在了解cljs基本语法后并在clojurescript.net的奇特错误提示后，我们必须痛定思痛地搭建一个本地的开发环境，以便后续深入地学习cljs。

(cljs/run-at (->JSVM :browser) "语言基础")

 两年多前知道cljs的存在时十分兴奋，但因为工作中根本用不上，国内也没有专门的职位于是搁置了对其的探索。而近一两年来又刮起了函数式编程的风潮，恰逢有幸主理新项目的前端架构，于是引入Ramda.js来疗藉心中压抑已久的渴望，谁知一发不可收拾，于是抛弃所有利益的考虑，遵循内心，好好追逐cljs一番:D  cljs就是ClojureScript的缩写，就是让Clojure代码transpile为JavaScript代码然后运行在浏览器或其他JSVM上的技术。

动手写个数字输入框2：起手式——拦截非法字符

最近在用Polymer封装纯数字的输入框，开发过程中发现不是坑，也有不少值得研究的地方。本系列打算分4篇来叙述这段可歌可泣的踩坑经历： 1. [《动手写个数字输入框1：input[type=number]的遗憾》](http://www.

动手写个数字输入框1：input[type=number]的遗憾

最近在用Polymer封装纯数字的输入框，开发过程中发现不少坑，也有很多值得研究的地方。本系列打算分4篇来叙述这段可歌可泣的踩坑经历： 1. 《动手写个数字输入框1：input[type=number]的遗憾》 2.

前端魔法堂：onsubmit和submit事件处理函数怎么不生效呢？

最近在用Polymer增强form，使其支持表单的异步提交，但发现明明订阅了onsubmit和submit事件，却怎么也触发不了。下面我们将一一道来。

前端魔法堂：屏蔽Backspace导致页面回退

前几天用户反映在录入资料时一不小心错按Backspace键，就会直接回退到是一个页面，导致之前辛辛苦苦录入的资料全部丢失了。哦？居然还有这种情况。下面我们来一起探讨一下吧！

让VIM支持Python2 by update-alternatives

Ubuntu 16+中`$ sudo apt install vim`所安装的vim只支持Python3，但很多插件如YCM和powerline均需要Python2，那就来场“生命贵在折腾”吧！

让BASH,VIM美美的Powerline

鉴于BASH及其周边强大的工具以及VIM高效快捷，加上现在我工作重心转移到前端开发上，因此我华丽地转向Linux阵营(当然从最傻瓜式的Ubuntu开始啦!)。但BASH和VIM默认样式确实颜值太低，功能强大固然重要，但在这看脸的时代谁不爱美呢？那么我们先拿状态栏来开刀吧，而刀就是强大酷炫的Powerline本尊了。

打造高效前端工作环境 - tmux

现在前端开发可不容易啊，先打开个VIM，然后再打开个lite-server，一不小心写个ES2015还要打开个gulp来做预编译，如果能把这么多个窗口放在一个工作台上那就好了。咦，tmux不就专干这事的吗？

打造高效前端工作环境-tmuxinator

虽然tmux能让我们方便组织工作环境，但每次重新打开会话时都需要手动重新创建窗口、窗格和执行各种程序，能不能像VS那样以工程为单位保存窗口、窗格和各种所需执行的程序的信息呢？tmuxinator恰恰能解决我们这个需求！

WebComponent魔法堂:深究Custom Element 之 从过去看现在

说起Custom Element那必然会想起那个相似而又以失败告终的HTML Component。HTML Component是在IE5开始引入的新技术，用于对原生元素作功能"增强"，虽然仅仅被IE所支持，虽然IE10也开始放弃它了，虽然掌握了也用不上，但还是不影响我们以研究的心态去了解它的:)

JS魔法堂：深究JS异步编程模型

上周5在公司作了关于JS异步编程模型的技术分享，可能是内容太干的缘故吧，最后从大家的表情看出“这条粉肠到底在说啥？”的结果:(下面是PPT的讲义，具体的PPT和示例代码在https://github.com/fsjohnhuang/ppt/tree/master/apm_of_js上，有兴趣就上去看

前端魔法堂：解秘FOUC

对于问题多多的IE678，FOUC(flash of unstyled content)——浏览器样式闪烁是一个不可忽视的话题，但对于ever green的浏览器就不用理会了吗？下面尝试较全面地解密FOUC。

WebComponent魔法堂:深究Custom Element 之 标准构建

Google为首提出的H5 Custom Element让我们可以在原有标准元素的基础上向浏览器注入各种抽象层次更高的自定义元素，并且在元素CRUD操作上与原生API无缝对接，编程体验更平滑。

WebComponent魔法堂:深究Custom Element 之 面向痛点编程

 最近加入到新项目组负责前端技术预研和选型，一直偏向于以Polymer为代表的WebComponent技术线，于是查阅各类资料想说服老大向这方面靠，最后得到的结果是:"资料99%是英语无所谓，最重要是UI/UX上符合要求，技术的事你说了算。"，于是我只好乖乖地去学UI/UX设计的事，木有设计师撑腰的

JS魔法堂:不完全国际化&本地化手册 之 拓展篇

 最近加入到新项目组负责前端技术预研和选型，其中涉及到一个熟悉又陌生的需求——国际化＆本地化。熟悉的是之前的项目也玩过，陌生的是之前的实现仅仅停留在"有"的阶段而已。趁着这个机会好好学习整理一下，为后面的技术选型做准备。  本篇作为系列的最后一篇，打算和大家一起看看HTTP的Content Neg

JS魔法堂:不完全国际化&本地化手册 之 实战篇

最近加入到新项目组负责前端技术预研和选型，其中涉及到一个熟悉又陌生的需求——国际化＆本地化。熟悉的是之前的项目也玩过，陌生的是之前的实现仅仅停留在"有"的阶段而已。趁着这个机会好好学习整理一下，为后面的技术选型做准备。  本篇将于大家一起挽起袖子撸代码:)

CSS魔法堂：你一定误解过的Normal flow

前言  刚接触CSS时经常听到看到一个词"文档流"，那到底什么是"文档流"呢？然后会看到"绝对定位和浮动定位能脱离文档流"，从这句可以看到文档流 和绝对定位、浮动定位是同一个范畴的概念，再后来在W3C标准文档找到关于Absolute positioning和Float的内容，却怎么也找不到D

CSS魔法堂：Absolute Positioning就这个样

CSS魔法堂：你真的懂text-align吗？

CSS魔法堂：深入理解line-height和vertical-align

CSS魔法堂：不得不说的Containing Block

CSS魔法堂：hasLayout原来是这样!

CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins

.Net魔法堂：开启IIS的WebGarden、WebFarm和StateServer之旅

CSS布局：水平居中

JS魔法堂：判断节点位置关系

JS魔法堂：函数重载 之 获取变量的数据类型

JS魔法堂：再识Bitwise Operation & Bitwise Shift

JS魔法堂：彻底理解0.1 + 0.2 === 0.30000000000000004的背后

JS魔法堂：再识Number type

基础野：细说浮点数

基础野：细说有符号整数

基础野：细说无符号整数

基础野：细说原码、反码和补码

Vim魔法堂：认识快捷键绑定

Httpd运维日志:通过apxs添加模块