w3cTrain

Keep Moving

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

1.第三方工具

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

优点

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

缺点

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

2.局域网

在两台局域网主机上,访问127.0.0.110:3000/ 格式的链接,可以直接打开开发机器上的页面。
如果你的机器上还装了其他Web Server,那你可以通过配置默认选项或者通过网络代理来让目标主机访问。
比如我自己的机器上配了nginx服务器,

1
2
3
4
5
server {
listen 80 default_server;
server_name test.com;
root /Users/helkyle/projects/test/;
}

Read More...
标签:IE

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

前端技能之切图 - github -xiangpaopao

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

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

Slicy

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

Read More...

最近由于工作需要,在新的 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'
]
}
Read More...

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

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

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

基本了解

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

Read More...

如果在看文章之前,你还没不知道 stick footer 是什么的话,可以先看看下面这张图。
stick footer

容器使用负的margin bottom

首先是个包裹除了footer之外其他元素的容器,然后容器内有个占位元素,以及使用负的margin bottom,他们的绝对值相等。

1
2
3
4
5
6
7
8
9
<body>
<div class="wrapper">
content
<div class="push"></div>
</div>
<footer class="footer"></footer>
</body>
Read More...

方法必须传参数

ES6 的形参只有在用到的时候才会计算值,所以可以像下面这样写:

1
2
3
4
5
6
7
8
9
10
/**
* Called if a parameter is missing and
* the default value is evaluated.
*/
function mandatory() {
throw new Error('Missing parameter');
}
function foo(mustBeProvided = mandatory()) {
return mustBeProvided;
}
Read More...

来自《深入浅出Node.js》

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
;(function (name, definition) {
// 检测上下文环境是否为AMD或CMD
var hasDefine = typeof define === 'function',
// 检查上下文环境是否为Node
hasExports = typeof module !== 'undefined' && module.exports;
if (hasDefine) {
// AMD环境或CMD环境
define(definition);
} else if (hasExports) {
// 定义为普通Node模块
module.exports = definition();
} else {
// 将模块的执行结果挂在window变量中,在浏览器中this指向window对象
this[name] = definition();
}
})('hello', function () {
var hello = function () {};
return hello;
});
Read More...

我们可能经常会用到拖拽功能,这里的拖拽只的不是HTML5新事件Drag and Drop,而是更直观的,点击拖动元素位置。

其实拖拽功能并没有想象中复杂,主要实现三个控制点,

  • mousedown 鼠标点击开始,记录起始位置以及开始拖拽标识。
  • mousemove 如果当前属于拖拽状态,计算&调整相应位置。
  • mouseup 取消拖拽标识

完了。就这样而已嘛~

以一个拖拽滑动页面举个栗子:

See the Pen Drag-the-page by Helkyle (@HelKyle) on CodePen.

Read More...

昨天闲得蛋疼(等处理完毕业相关事宜才开始上班),想着过两天就要拍毕业照了,总得邀请三两好友过来吃大餐(食堂)吧~ 直接发条图文朋友圈好像有点low。

既然是学前端的,那就搞个H5吧,于是就开始了捉急的切图,设计(瞎搞),然后开始敲代码。

Sketch

预览

二维码
独立设计实现,有点简陋。

用到的东西

  • swiper
  • ios自动播放音乐
  • animation css
  • animation step
标签:h5

上篇介绍了vue,以及在如何 Laravel 快速搭建vue环境。
这篇讲如何在 Laravel 中更深入使用Vue。

预处理

vue还支持使用预处理工具,比如jade, sass等等。
假设使用Stylus, Jade,那就npm install 一下呗

1
npm install stylus jade --save-dev

然后在vue文件中指定,你使用的预处理工具是什么

Read More...