^_^肥子John

4

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

• 肥仔John   2018-10-09 发布
• 2 收藏

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

23

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

• 肥仔John   2018-10-04 发布
• 20 收藏

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

84

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

• 肥仔John   2018-09-30 发布
• 63 收藏

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

72

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

• 肥仔John   2018-09-18 发布
• 61 收藏

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

15

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

• 肥仔John   2018-08-29 发布
• 12 收藏

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

36

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

• 肥仔John   2018-07-10 发布
• 45 收藏

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

21

CSS魔法堂：Transition就这么好玩

• 肥仔John   2018-06-06 发布
• 37 收藏

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

41

CSS魔法堂：Flex布局

• 肥仔John   2018-06-04 发布
• 82 收藏

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

0

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

• 肥仔John   2017-06-07 发布
• 收藏

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

0

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

• 肥仔John   2017-06-02 发布
• 1 收藏

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

0

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

• 肥仔John   2017-05-31 发布
• 收藏

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

0

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

• 肥仔John   2017-05-23 发布
• 收藏

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

0

前端魔法堂：解秘FOUC

• 肥仔John   2017-04-20 发布
• 3 收藏

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

3

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

• 肥仔John   2016-11-28 发布
• 22 收藏

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

0

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

• 肥仔John   2016-11-16 发布
• 2 收藏

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

0

让BASH,VIM美美的Powerline

• 肥仔John   2016-11-14 发布
• 2 收藏

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

0

让VIM支持Python2 by update-alternatives

• 肥仔John   2016-11-12 发布
• 1 收藏

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

0

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

• 肥仔John   2016-10-22 发布
• 收藏

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

0

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

• 肥仔John   2016-10-08 发布
• 1 收藏

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

0

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

• 肥仔John   2016-09-29 发布
• 3 收藏

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