相信大家都有过类似经历，在看一些博客文章的时候，突然页面内容跳了一下，当时就想骂娘了。如果文章前半部分没有激起你阅读的欲望还好说，直接关闭页面，但是如果你还想继续往下读，就只能苦逼地人肉定位。

Read More...

我学习前端『新』技术也有段时间了，最近接手的项目由于种种原因（历史，求稳，考虑成本等等），使用的技术都比较保守。在熟悉了『新』技术，重新回到最初的起点，回头看看它们带来些什么。

这篇文章以Sass为例，记录一些自己的思考。

一像一世界，一素一菩提。

为了赶进度，我们常常会偷懒，目测一下大概尺寸直接开始写样式。
忙活了半天，终于呈现到’像素眼’设计师面前，大写的尴尬！
但是有时候你用心去量尺寸，也可能会出差池。

比如1px的问题。
问题大概是这样的，设计师给的设计稿是2倍图，或3倍图，但是里面的某条线或者边框却是1px的？？？

Read More...

用过Vue，你肯定知道，Vue组件之间的通信常见的有
$dispatch - 通过冒泡的方式传递事件
$broadcast - 通过广播的方式向子孙组件传递事件

如果组件之间的关系只是父-子关系，那么dispatch,broadcast其实就足够了。
但是有天需求变了。登录成功之后，要把用户信息都填上，而需要用户信息的组件不是父组件，而是兄弟组件的后台。
那么事件传递就会变成登录组件向上dispatch到父组件，父组件通过broadcast的方式下发。

Read More...

续 上篇 Canvas学习。

效果看这里。

为了让小游戏效果更佳，需要横屏才能玩。（解开手机的锁定屏幕 + 旋转手机）就能看到效果了。
Read More...

最近开始学习Canvas,因为之前没有接触过，所以想找点东西练下手，写写动画。
突然想起之前看过 TQ大神 写的一篇拖拽粘性小红球Canvas实现，重新翻出来看看。顺便用自己的语言重新书写了一遍。写篇文章记录下今天的学习过程。

先贴上效果预览二维码，或者点击查看

Read More...

愿去往天堂的路上没有IE.

1.第三方工具

网上相关工具可以提供查看效果
https://www.browserstack.com/test-in-internet-explorer
http://browsershots.org/

优点

• 全面，有很全的浏览器可供选择

缺点

• 收费
• 大部分是国外网站，打开速度受限制
• 只能看效果，无法调试
Read More...

前端切图历史悠久，或许那时候不叫前端，叫页面重构师。之所以页面重构师要自己动手切图，是因为面对多种多样的页面效果，UI设计师不知道每一张图的需求，常常会引发流血冲突，带来不可挽回的生命危险。
切图能体现页面重构师的经验和能力，如果你拿到手的是psd文件，那么你可以看看“存储为 Web 和设备所用格式”的切法。

前端技能之切图 - github -xiangpaopao

但毕竟切图是个体力活，其中有大量重复工作，而且还有Retina图，图切多了人都傻了。。。
特别是psd文件有好几百兆的时候，MacBook 也有点吃不消，切一张图要花费好几分钟。

但是，重复性劳动总会有解决方法的！
尝试了很多种解决方式，整理如下：

Slicy

Slicy 是个收费的切图软件，功能很强大，操作却很简单。你只需要把要切的图层命名为 *.png 或者 *.jpg 之类的格式。保存，再把整个psd拉进 Slicy,搞定！

最近由于工作需要，在新的 mac pro 上搭建前端开发环境。
写篇文章记录一下，方便下次（如果有下次的话）装机。

注意！！！我只是记流水账，备忘而已，非战斗人员请撤离。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

var equipment = {
    '输入法': '搜狗输入法',
    '浏览器': 'Chrome',
    'Chrome插件': [
        'AngularJS Batarang',
        'Clear Cache',
        'HTML5 Outliner',
        'JSONView',
        'LiveReload',
        'Panda 4',
        'Postman',
        'SnappySnippet',
        'User-Agent Switcher for Chrome',
        'Vue.js devtools',
        '一键管理',
        '广告终结者',
    ],
    '办公': 'Office 365',
    'Markdown': 'MacDown',
    '音乐': '网易云音乐',
    '社交': [
        '钉钉',
        '微信',
        'QQ',    
    ],
    '下载': [
        '迅雷',
        'uTorrent'
    ],
    '梯子': 'ShadowsocksX',
    '终端': 'iTerm' + 'OhMyZsh',
    '压缩': 'BetterZip',
    '效率': [
        'SwitchHosts',
        'Moom',
        'pomodoro Time',
        'MindNode',
        'Dash' + 'alfred',
        'pathfinder',
        '奇妙清单',
        'xscope',
        'SourceTree'
    ],
    'Editor': 'Atom',
    '抓包': 'Charles',
    '词典': '路欧词典',
    'Atom 插件': [
        'stylus',
        'activate-power-mode',
        'atom-beautify',
        'atom-jquery-snippets',
        'autocomplete-paths',
        'docblockr',
        'emmet',
        'file-header',
        'file-icons',
        'query-snippets',
        'vue-snippets',
        'vue-autocomplete',
        'todo-show',
        'language-vie-component',
    ],
    '切图': [
        '马克鳗',
        'Photoshop',
        'Sketch'
    ]
}

这是一篇给像我这样的新手或者是熟悉图形工具的老鸟看的。仅作为快速入门的教程。

git 现在的火爆程度非同一般，它被广泛地用在大型开源项目，团队开发，以及独立开发者，甚至学生之中。

初学者非常容易被各种命令，参数吓哭。但实际上刚上手你并不需要了解所有命令的用途。你可以从掌握一些简单，强大的命令开始，逐步去学习。（这就是这篇文章要讲的）。好了，上来！

基本了解

git命令是一些命令行工具的集合，它可以用来跟踪，记录文件的变动。比如你可以进行保存，比对，分析，合并等等。这个过程被称之为版本控制。已经有一系列的版本控制系统，比如SVN, Mercurial, Perforce, CVS, Bitkeepe等等。