Front-End – 箱猫日和

某项目总结

年纪大了，不写项目总结总有一天会忘记的。

这次的项目似乎不能暴露是谁做的，暂时称作某项目吧。

最初是做个展示百人一首的网页，要相关数据，然后找到了这份json文件：
https://gist.github.com/wakaba/8363dc27f4c54f76b4a7/
json 里的图片 url 是没有规律可以遵循的，没法用下载工具批量下载，
所以最后想到了用node写个脚本扒json然后下载到本地。
Continue reading “download images with node.js”

nodejs/gulp学习小记

以下是这两天学习gulp的笔记。因为gulp需要nodejs环境，所以我同时也学习了一点nodejs的使用。

gulp是一个前端构建工具，同类型的有grunt，也是基于nodejs环境的。这些构建工具的主要用途是压缩CSS/JS，混淆JS，添加banner，MD5内容哈希，图片spirit等。以前可能依赖在工程发布时用后端的编程语言或者其他脚本语言比如python编写的脚本，现在有了服务端js，准确来说，可以用表达为js的执行环境之后，出现了这些用js来表达的构建工具。

顺便说一下个人对于nodejs的理解。用js来表达的特点使得前端开发人员无学习成本地使用这个执行环境。不过js语法表达的限制使得node不太可能构建通用的服务端程序，换句话说nodejs有适合的领域，也有不太适合的领域。原先用其他语言实现的服务端功能不太可能完全照搬到nodejs上。当然现在大部分公司肯定存在异构语言的开发环境，对于受众主要是前端的场景来说，用js表达更有优势。

回到gulp上。在学习了一点npm（node的包管理器，类似ruby的gem）之后，得到如下结论。

1. 如果你要可执行的命令，执行npm install -g ，比如gulp
2. 如果你要给项目添加依赖，执行npm install --save-dev ，比如gulp-md5-plus, etc

Continue reading “nodejs/gulp学习小记”

svg favicon

この繊細さ、心地よい。
( ´・ω・)つ旦

Continue reading “svg favicon”

IE10的一些坑

不支持标准 touch 事件，要用 MSPointerDown 等
WP上有时候会有渲染问题，虽然支持 css3 动画，但是效果极差
你造吗font: 1rem/1 sans-serif;这么写竟然无效

最近在开发移动触屏版，申请了公款技术支持了一部Lumia 925，想做个兼容WP8 IE10的网站。
结果各种坑啊……
之前还碰到过可以透过一个 z-index 很高的 mask div 点击到下面的 link 的诡异事件。
虽然这个诡异事件还没解决，但是好像绑定了事件以后能够稍微缓和点。
为毛事件绑定不会穿透到下面去呢……

我的Draft很荣幸的存了4篇了，我果然是比较懒勤快的人……

// 2014-06-06 UPDATE

经过几次测试，发现IE10不支持font申明里用rem单位。
如果写成font: 1em/1 sans-serif;，
或者分成font-size, line-height, font-family的话是没有问题的。另外移动版的 IE10 表现和桌面版的 IE10 基本上是一样的，也支持 MSPointer 事件，就是没有穿透问题。



	
		Author  gssxgssPosted on 2014-06-052014-06-06Categories CSS, Front-End




	
		
		写个login form
	


	
	
	
		随手写个login form，其实没什么inspiration。

顺便学习下jade，练习下transform。

See the Pen login form by GSSxGSS (@gsshcl) on CodePen.5731

话说sass支持@function了，好强大，强大的无法直视。

说不定哪天就能直接在sass里写ruby了，233。
	


	
		Author  gssxgssPosted on 2014-04-18Categories CSS, Front-End, htmlTags CSS			




	
		
		IE compatible mode 和 Boilertemplate
	


	
	
	
		之前有写过一篇毫无技术含量的文章，现在要来纠正一些概念。

 Continue reading “IE compatible mode 和 Boilertemplate”
	


	
		Author  gssxgssPosted on 2013-11-212013-11-22Categories Front-End, htmlTags html, ie2 Comments on IE compatible mode 和 Boilertemplate			




	
		
		[snippet] Default browser scrollbar width
	


	
	
	
		Stackoverflow: Getting scroll bar width using JavaScript


		
		
			get scrollbar width
			
JavaScript
			
			function getScrollbarWidth() {
    var outer = document.createElement("div");
    outer.style.visibility = "hidden";
    outer.style.width = "100px";
    document.body.appendChild(outer);

    var widthNoScroll = outer.offsetWidth;
    // force scrollbars
    outer.style.overflow = "scroll";

    // add innerdiv
    var inner = document.createElement("div");
    inner.style.width = "100%";
    outer.appendChild(inner);        

    var widthWithScroll = inner.offsetWidth;

    // remove divs
    outer.parentNode.removeChild(outer);

    return widthNoScroll - widthWithScroll;
}

document.write("Scrollbar width is: "+getScrollbarWidth()+"px");
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
				
						function getScrollbarWidth() {
    var outer = document.createElement("div");
    outer.style.visibility = "hidden";
    outer.style.width = "100px";
    document.body.appendChild(outer);
 
    var widthNoScroll = outer.offsetWidth;
    // force scrollbars
    outer.style.overflow = "scroll";
 
    // add innerdiv
    var inner = document.createElement("div");
    inner.style.width = "100%";
    outer.appendChild(inner);        
 
    var widthWithScroll = inner.offsetWidth;
 
    // remove divs
    outer.parentNode.removeChild(outer);
 
    return widthNoScroll - widthWithScroll;
}
 
document.write("Scrollbar width is: "+getScrollbarWidth()+"px");
					
				
			
		


Result:

WinXP: 16px;

Win7: 17px;

Win8: 17px;

Mac: 15px;
	


	
		Author  gssxgssPosted on 2013-09-27Categories Front-End, JavascriptTags javascript			




	
		
		sass – 2 colors gradient mixin with fallback
	


	
	
	
		


		
		
			
			
Sass
			
			// calculate the middle color for fallback
@mixin middle-color($c1, $c2)
  background-color: rgb((red($c1) + red($c2)) / 2, (green($c1) + green($c2)) / 2, (blue($c1) + blue($c2)) / 2)

// generate linear-gradient
@mixin linear-gradient($angle, $c1, $c2, $fallback: "")
  // background color fallback
  @if ($fallback !== "")
    background-color: $fallback
  @else
    @include middle-color($c1, $c2)
  // webkit linear gradient fallback
  @if $angle == to bottom
    background-image: -webkit-linear-gradient(top, $c1, $c2)
  @else if $angle == to right
    background-image: -webkit-linear-gradient(left, $c1, $c2)
  background-image: linear-gradient($angle, $c1, $c2)
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
				
						// calculate the middle color for fallback
@mixin middle-color($c1, $c2)
  background-color: rgb((red($c1) + red($c2)) / 2, (green($c1) + green($c2)) / 2, (blue($c1) + blue($c2)) / 2)
 
// generate linear-gradient
@mixin linear-gradient($angle, $c1, $c2, $fallback: "")
  // background color fallback
  @if ($fallback !== "")
    background-color: $fallback
  @else
    @include middle-color($c1, $c2)
  // webkit linear gradient fallback
  @if $angle == to bottom
    background-image: -webkit-linear-gradient(top, $c1, $c2)
  @else if $angle == to right
    background-image: -webkit-linear-gradient(left, $c1, $c2)
  background-image: linear-gradient($angle, $c1, $c2)
					
				
			
		

Don’t use mix($c, $c2) to get the middle color!

It will only retrun ($c1 + $c2) / 2, not the middle color.

Sadly, I failed to put color stop percentage in the mixin.

Only if sass rgb() could return a color(e.g. #fff) from a string(e.g. “#fff 10%”).
	


	
		Author  gssxgssPosted on 2013-09-13Categories CSS, Front-EndTags css3, sass			




	
		
		谨记一次被非标准属性background-position-y坑的过程
	


	
	
	
		公司网站的背景是从早到晚渐变的，所以用了一张1px×13000px的图，每天根据时间不同，php那边算个bg-position中y的偏移值。

因为是php那边处理，当时php那边的人就顺手写了个inline style在某个module的layout的标签里：

style="background-position-y: {{ app.bg_position }}px"
后来我只是考虑到要把这个挪到全局layout里去，加个分号。

另加当时我脑残了一下css的平铺方向错写成了repeat-y，所以改好css，把style挪到正确的template里，我就没多想。

顺带确认了下repeat方向是x没错，bg-position位移方向是y没错，chrome下没错，IE下没错。

这便是一个悲剧的开始。
直到今天被人发现在firefox下白天显示着夜晚的深紫色渐变背景，只好开Inspector，

发现虽然body里有写样式，但inline element里却没有读到样式。
google之，才知道background-position-y/background-position-x是IE创造出的非标准属性，但是Chrome竟然支持了，但Firefox没有。

firefox没有……
=。=) 再高级的浏览器也是不可信的。
	


	
		Author  gssxgssPosted on 2013-09-112013-09-16Categories CSS, Front-EndTags CSS			



	
		Posts navigation
		Page 1
Page 2
Page 3
Next page