黑熊和宝兔

原文地址： http://blog.teamtreehouse.com/introduction-source-maps?utm_source=CSS-Weekly&utm_campaign=Issue-91&utm_medium=email 翻译的不好，见谅。另注：关于文中提到的，这里有一篇中文的 介绍 译文： 我们常常使用一个提升站点性能的办法，就是把js文件和css文件打包压缩。但是压缩以后如果我们要调试或者修改呢？那简直是恶梦。不过，现在有一种可以部分解决这个问题的方式，叫做Source Map，我们翻译成源码图吧。 Source Map可以把压缩的文件转换成压缩前的样子。这就意味着，你可以尽管压缩你的代码，然后还可以方便的调试源码。现在chrome和firefox浏览器的开发工具已经支持SourceMap了。 本文介绍SourceMap的工作原理和生成方法，我们只介绍js的sourcemap。 备注：firefox默认支持SourceMap，Chrome浏览器需要手动开启支持。设置方法：在chrome浏览器的控制面板里（settings），里面的常规选项卡里有Enable js sourcemap 和Enable css source map 两个选项，勾选即可。 Source Map 工作方式 顾名思义,源图由一大堆信息组成,把压缩的代码转换成阅读的原始代码。您可以指定一个不同的源映射。做法就是把压缩的代码中加入一句注释： //# sourceMappingURL=/path/to/script.js.map 支持Source Map的js压缩工具会自动加入这句注释，浏览器只在开发工具打开的时候才会识这句注释并加载map文件（如果是chrome浏览器，则需要设置打开）。 map文件其实是一个json格式的文件，包含一些相关性的信息，示例如下： { version: 3, file: "script.js.map", sources: [ "app.js", "content.js", "widget.js" ], sourceRoot: "/", ...

<p>移动web开发，最让人心烦的估计就是各平台下运行结果不一致的问题了，明明在电脑上调试的好好的，在手机上却错误，而且错的莫名其妙。咋办？   1、<a href="http://jsconsole.com/">http://jsconsole.com/</a>   最初，大家期望都不高，能把console.log输出出来就好了，当然，高版本iphone在safari中内置这个功能了，但其他手机呢？   这时候我们可以求助jsconsole.com，他其实提供了一个在线的服务，帮你来完成console.log的输出。你需要改什么？什么都不需要改。打开网页看看吧。   不多说，输入<span style="font-family: Menlo, consolas, monospace; font-size: 15px; line-height: 20px; white-space: pre-wrap;">:listen,然后就可以得到一个脚本地址的标签，把该标签贴进你的网页里面即可。</span>   <span style="font-family: Menlo, consolas, monospace; font-size: 15px; line-height: 20px; white-space: pre-wrap;">原理其实就是把页面中控制台输出的内容显示打你当前的网页上了，不错吧。</span>   <span style="font-family: Menlo, consolas, monospace; font-size: 15px; line-height: 20px; white-space: pre-wrap;">2、weinre</span>   <span style="font-family: Menlo, consolas, monospace;"><span style="font-size: 15px; line-height: 20px; white-space: pre-wrap;"...

做视频流的都知道苹果的hls视频流格式，其实微软也有一种流格式叫做 Smooth Streaming。 hls在苹果的设备上可是默认支持的，不用安装什么解码器，直接浏览器打开就能播放，据说人家那是硬件解码，别的设备就得自己想办法了。 Smooth Streaming就没这么好运气了，即便在微软的windows8.1的操作系统中，微软也没能提供web版的Smooth Streaming播放器。只是win8 store App倒是提供了Smooth Streaming Client 的SDK。 今天我们讨论的重点就是这个播放器的sdk。 首先是播放器的主体：Playerframework： http://playerframework.codeplex.com/ 这个播放器还算正常，但是怎么说呢。如果你是WinJS开发的App，总感觉多此一举，毕竟html5自带的播放器就可以播放视频，通过js扩展出的各种漂亮的播放器，都不比微软的差。 这个播放器呢，使用还算简单，不多说了。我们说他的Smooth Streaming Client SDK 这个sdk有两个版本： win8.1版  和 Win8版 好吧，我一直以为win8.1是win8的一个更新呢，原来可以认为是两个东西哦。 这里有一个关于html app中使用这东西的 文档 ，不翻译了。

自从平板出现后，页面左右布局的越来越多。尤其是看文章，估计都觉得翻书的体验很好用。css也适应变化，出现了许多新的属性（或者是之前就有，本人木有用过。。。） 需求 首先我们分析下大概的需求： 1 <div> 2 <p> .... </p> 3 </div> p标签中是详细内容，这里的内容可能会比较多，div就是其容器了。比如这个div宽度是320，高度是从头到底部，然后，就是在页面内容比较多的时候，在右面第二列显示余下内容。。。 这个需求在以前是很奇怪的，但在平板上这个需求就看起来很正常了。 css 我们找找对应的一些css写法： column-count：这是指布局分几列； column-fill：每一列的填充方式，auto是填满一列，再填下一列，balance是平均填充，就是没列的高度差不多一样。 实现 好了，知道了css如何使用，我们就可以动态控制页面的css来实现。实现方案呢，当然是先判断p标签的高度是不是高于容器div，然后。。。废话太多了，上代码吧(jquery)： 1 function Auto (){ 2 var width= 320 ; 3 if ( $ ( " div>p " ).height()> $ ( " div " ).height()) 4 { 5 var count=parseInt( $ ( " .description " ).css( " column-count " )); 6 if (isNaN(count))count= 1 ; 7 count++; 8 $ ( " div " ).width( 320 *count); 9 $ ( " div " ).css( " column-count " ,count); 10 $ ( " div " ).css( " -webkit-column-count " ,count); 11...

我们有时候在div上加a标签，用以产生标准的类似按钮的鼠标效果，减少css代码。 但是加了click事件之后，发现由于事件冒泡，href的链接事件也会触发。 经测试，这个href有以下现象： 如果href不填写，就没有鼠标效果。 href填为空白，则跳转到页面跟目录。 使用href="#"，这样页面就不会跳转。 写“#”是我们之前常常使用的方法。不过使用jqm或backbone的无刷新跳转的方式，就遇到麻烦了。这类框架支持不跳转页面而是通过"#home"这样的路径来记录页面浏览历史。 这时候我们可以在click事件中阻止冒泡即可防止出发href事件。 最简单的方法自然是：return false;