^_^肥子John

热爱编程的偏前端的临栈工程师@Midea/QMS，熟悉JavaScript,ClojureScript,Polymer,Reactjs,C#

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

肥仔John 10月9日发布
2 收藏

在CSS魔法堂：改变单选框颜色就这么吹毛求疵！中我们要模拟原生单选框通过Tab键获得焦点的效果，这里涉及到一个常常被忽略的属性——outline，由于之前对其印象确实有些模糊，于是本文打算对其进行稍微深入的研究^_^

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

肥仔John 10月4日发布
20 收藏

是否曾经被业务提出"能改改这个单选框的颜色吧！让它和主题颜色搭配一下吧！"，然后苦于原生不支持换颜色，最后被迫自己手撸一个凑合使用。若抛开input[type=radio]重新开发一个，发现要模拟选中、未选中、不可用...

CSS魔法堂：display:none与visibility:hidden的恩怨情仇

肥仔John 9月30日发布
61 收藏

还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗？是不是回答完display:none不占用原来的位置，而visibility:hidden保留原来的位置后，面试官就会心一笑呢？其实不止那么简单呢！本文我们将...

CSS魔法堂：一起玩透伪元素和Content属性

肥仔John 9月18日发布
58 收藏

继上篇《CSS魔法堂：稍稍深入伪类选择器》记录完伪类后，我自然而然要向伪元素伸出“魔掌”的啦^_^。本文讲讲述伪元素以及功能强大的Contet属性，让我们可以通过伪元素更好地实现更多的可能！

CSS魔法堂：稍稍深入伪类选择器

肥仔John 8月29日发布
13 收藏

过去零零星星地了解和使用:link、::after和content等伪类、伪元素选择器，最近看书时发现这方面有所欠缺，于是决定稍微深入学习一下，以下为伪类部分的整理。

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

肥仔John 7月10日发布
44 收藏

在《CSS魔法堂：Transition就这么好玩》中我们了解到对于简单的补间动画，我们可以通过transition实现。那到底多简单的动画适合用transtion来实现呢？答案就是——我们只需定义动画起始和结束帧的状态的动画。一旦...

CSS魔法堂：Transition就这么好玩

肥仔John 6月6日发布
36 收藏

以前说起前端动画必须使用JS，而CSS3为我们带来transition和@keyframes，让我们可以以更简单（声明式代替命令式）和更高效的方式实现UI状态间的补间动画。本文为近期对Transition的学习总结，欢迎各位拍砖。

CSS魔法堂：Flex布局

肥仔John 6月4日发布
80 收藏

Flex是Flexible Box的缩写，就是「弹性布局」。从2012年已经面世，但由于工作环境的原因一直没有详细了解。最近工作忙到头晕脑胀，是要学点新东西刺激一下大脑，打打鸡血。

动手写个数字输入框3：痛点——输入法是个魔鬼

肥仔John 2017年06月07日发布
收藏

最近在用Polymer封装纯数字的输入框，开发过程中发现不是坑，也有不少值得研究的地方。本系列打算分4篇来叙述这段可歌可泣的踩坑经历：

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

肥仔John 2017年06月02日发布
1 收藏

最近在用Polymer封装纯数字的输入框，开发过程中发现不是坑，也有不少值得研究的地方。本系列打算分4篇来叙述这段可歌可泣的踩坑经历：

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

肥仔John 2017年05月31日发布
收藏

最近在用Polymer封装纯数字的输入框，开发过程中发现不少坑，也有很多值得研究的地方。本系列打算分4篇来叙述这段可歌可泣的踩坑经历：

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

肥仔John 2017年05月23日发布
收藏

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

前端魔法堂：解秘FOUC

肥仔John 2017年04月20日发布
3 收藏

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

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

肥仔John 2016年11月28日发布
21 收藏

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

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

肥仔John 2016年11月16日发布
2 收藏

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

让BASH,VIM美美的Powerline

肥仔John 2016年11月14日发布
2 收藏

鉴于BASH及其周边强大的工具以及VIM高效快捷，加上现在我工作重心转移到前端开发上，因此我华丽地转向Linux阵营(当然从最傻瓜式的Ubuntu开始啦!)。但BASH和VIM默认样式确实颜值太低，功能强大固然重要，但在这看...

让VIM支持Python2 by update-alternatives

肥仔John 2016年11月12日发布
1 收藏

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

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

肥仔John 2016年10月22日发布
收藏

说起Custom Element那必然会想起那个相似而又以失败告终的HTML Component。HTML Component是在IE5开始引入的新技术，用于对原生元素作功能"增强"，虽然仅仅被IE所支持，虽然IE10也开始放弃它了，虽然掌握了也用不...

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

肥仔John 2016年10月08日发布
1 收藏

通过《WebComponent魔法堂:深究Custom Element 之面向痛点编程》，我们明白到其实Custom Element并不是什么新东西，我们甚至可以在IE5.5上定义自己的alert元素。但这种简单粗暴的自定义元素并不是我们需要的，我...

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

肥仔John 2016年09月29日发布
3 收藏

最近加入到新项目组负责前端技术预研和选型，一直偏向于以Polymer为代表的WebComponent技术线，于是查阅各类资料想说服老大向这方面靠，最后得到的结果是:"资料99%是英语无所谓，最重要是UI/UX上符合要求，技术的...