Category Archives: Frontend

使用 WebSockets 的 9 个应用场景

WebSockets支持及时数据交换，并被所有现代浏览器支持。请直接在你的web apps上使用它吧。 至所有我的读者：幸运的是我目前在巴西进行Scaling systems项目，享受32度的气温，吃着咸八宝饭还有凯匹林纳鸡尾酒。同时根据你们的要求更新着博客，我邀请了我主要的成员侨纳琛弗里曼在我离开的时间指导你们。 没有其他技术能够像WebSocket一样提供真正的双向通信，许多web开发者仍然是依赖于ajax的长轮询来实现。（注：我认为长轮询是富于创造性和多功能性的，虽然这只是一个不太完美的解决办法（hack））对Websocket缺少热情，也许是因为多年前他的安全性的脆弱，抑或者是缺少浏览器的支持，不管怎样，这两个问题都已经被解决了。 决定手头的工作是否需要使用WebSocket技术的方法很简单： 你的应用提供多个用户相互交流吗？ 你的应用是展示服务器端经常变动的数据吗？ 如果你的回答是肯定的，那么请考虑使用WebSocket。如果你仍然不确定，并想要更多的灵感，这有一些杀手锏的案例。 1.社交订阅 对社交类的应用的一个裨益之处就是能够即时的知道你的朋友正在做什么。虽然听起来有点可怕，但是我们都喜欢这样做。你不会想要在数分钟之后才能知道一个家庭成员在馅饼制作大赛获胜或者一个朋友订婚的消息。你是在线的，所以你的订阅的更新应该是实时的。 2.多玩家游戏 网络正在迅速转变为游戏平台。在不使用插件（我指的是Flash）的情况下，网络开发者现在可以在浏览器中实现和体验高性能的游戏。无论你是在处理DOM元素、CSS动画，HTML5的canvas或者尝试使用WebGL，玩家之间的互动效率是至关重要的。我不想在我扣动扳机之后，我的对手却已经移动位置。 3.协同编辑/编程 我们生活在分布式开发团队的时代。平时使用一个文档的副本就满足工作需求了，但是你最终需要有一个方式来合并所有的编辑副本。版本控制系统，比如Git能够帮助处理某些文件，但是当Git发现一个它不能解决的冲突时,你仍然需要去跟踪人们的修改历史。通过一个协同解决方案，比如WebSocket，我们能够工作在同一个文档，从而省去所有的合并版本。这样会很容易看出谁在编辑什么或者你在和谁同时在修改文档的同一部分。 4.点击流数据 分析用户与你网站的互动是提升你的网站的关键。HTTP的开销让我们只能优先考虑和收集最重要的数据部分。然后，经过六个月的线下分析，我们意识到我们应该收集一个不同的判断标准——一个看起来不是那么重要但是现在却影响了一个关键的决定。与HTTP请求的开销方式相比，使用Websocket，你可以由客户端发送不受限制的数据。想要在除页面加载之外跟踪鼠标的移动？只需要通过WebSocket连接发送这些数据到服务器，并存储在你喜欢的NoSQL数据库中就可以了（MongoDB是适合记录这样的事件的）。现在你可以通过回放用户在页面的动作来清楚的知道发生了什么。 5.股票基金报价 金融界瞬息万变——几乎是每毫秒都在变化。我们人类的大脑不能持续以那样的速度处理那么多的数据，所以我们写了一些算法来帮我们处理这些事情。虽然你不一定是在处理高频的交易，但是，过时的信息也只能导致损失。当你有一个显示盘来跟踪你感兴趣的公司时，你肯定想要随时知道他们的价值，而不是10秒前的数据。使用WebSocket可以流式更新这些数据变化而不需要等待。 6.体育实况更新 现在我们开始讨论一个让人们激情澎湃的愚蠢的东西——体育。我不是运动爱好者，但是我知道运动迷们想要什么。当爱国者在打比赛的时候，我的妹夫将会沉浸于这场比赛中而不能自拔。那是一种疯狂痴迷的状态，完全发自内心的。我虽然不理解这个，但是我敬佩他们与运动之间的这种强烈的联系，所以，最后我能做的就是给他的体验中降低延迟。如果你在你的网站应用中包含了体育新闻，WebSocket能够助力你的用户获得实时的更新。 7.多媒体聊天视频会议并不能代替和真人相见，但当你不能在同一个屋子里见到你谈话的对象时，视频会议是个不错的选择。尽管视频会议私有化做的“不错”，但其使用还是很繁琐。我可是开放式网络的粉丝，所以用WebSockets getUserMedia API和HTML5音视频元素明显是个不错的选择。WebRTC的出现顺理成章的成为我刚才概括的组合体，它看起来很有希望，但其缺乏目前浏览器的支持，所以就取消了它成为候选人的资格。 8.基于位置的应用越来越多的开发者借用移动设备的GPS功能来实现他们基于位置的网络应用。如果你一直记录用户的位置(比如运行应用来记录运动轨迹)，你可以收集到更加细致化的数据。如果你想实时的更新网络数据仪表盘(可以说是一个监视运动员的教练)，HTTP协议显得有些笨拙。借用WebSocket TCP链接可以让数据飞起来。 9.在线教育上学花费越来越贵了，但互联网变得更快和更便宜。在线教育是学习的不错方式，尤其是你可以和老师以及其他同学一起交流。很自然，WebSockets是个不错的选择，可以多媒体聊天、文字聊天以及其它优势如与别人合作一起在公共数字黑板上画画… 转自:http://www.oschina.net/translate/9-killer-uses-for-websockets

20 个用于处理页面滚动效果的 jQuery 插件

对设计和开发一个网站来说，web开发者不能低估了网站滚动效果的重要性。如今，设计者们都视为一大挑战了，在网站中设计出吸引眼球的高效视觉滚动效果。幸运的是有各种各样的jquery 滚动插件可供他们使用，有了这些插件，他们可以根据页面滚动的位置做出很多吸引眼球的效果，像背景变换、动画等等。 本文中我收集了20款可以帮你实现很绚效果的Jquery滚动插件。 有了下面的这些jQuery滚动插件，你可以随意的让网站中的任何元素滚动， 使网站变得更加绚丽、吸引眼球。 1. One Page scroll One Page Scroll，一个jQuery插件，简化了类似网站的创建。它需要很少的设置，只需要创建HTML结构，调用函数就可以了。 可选的，easing功能，它的速度和循环行为也可以设置。而且，它已经支持对每个页面SEO友好的URL。 2. Scrolld Scrolld.js是一个jQuery的独特开源插件。Scrolld.js提供了一种完美的高精度的布局方法，且使用实时更新的数据值生成导航。使用Scrolld.js滚动到项目将永远精准且将提供最好的用户体验。Scrolld.js是专门为支持响应式布局而设计的，可以将页面长导航变成一个简单的任务栏。Scrolld.js设计初衷是为能方便使用，并能够在几分钟内快速部署。 3. Animate Scroll AnimateScroll 是一个简单的jQuery插件,它用来为滚动增加延迟效果. 可以自定义滚动样式(30多种滚动效果)和滚动速度. 还有一个可以操纵"滚动结束位置"的"padding"选项. 这个插件不局限于整个页面,某个特定的包裹元素也可以作为其目标. 4. JInvertScroll jInvertScroll 是一个操纵默认滚动行为和强制水平滚动的jQuery插件.它通过onScroll回调函数简化了视察效果的创建,我们可以在onScroll回调函数中为任意元素增加动画效果.该插件很小,只有不到1KB大小,而且几乎不需要任何配置就可以工作. 为某个包裹元素添加一个特定的样式类然后调用一个JS方法就足够了. 5. Smint Smint 是一个帮助开发者在单页面风格的网站中创建导航. 它有两个主要的元素, 一个是不动的导航条,当你向下滚动页面的时候它会停留在页面的顶部,另一个是菜单按钮,当你点击的时候会自动将页面滚动到相应的区域. SMINT插件很简单,所以只有一个控制页面滚动速度的选项. 默认的速度是500毫秒 (半秒钟),但你可以将它设置为任意你喜欢的值. 下载的文件中包含一个demo,所以你可以轻松地将它作为你自己单页面网站的模板. 6. jQuery Arbitrary Anchor Plugin jQuery Arbitrary Anchor Plugin 允许页面滚动到页面中任意的基于jQuery/CSS选择器的对象上. 你可以通过在页面URL的#后面添加一个jQuery/CSS选择器来创建一个有用并且整洁的动态锚点滚动效果. 该插件继承了普通锚点的功能,也就是说,一个拥有名值属性的锚点标签仍然可以被正常地滚动到. 一个具有与锚点相同值的ID属性的元素也具有同样的效果. 这个小小的插件可以被应用到任何元素上.   7. ScrollUp ScrollUp 是一个轻量级的jQuery插件,它用来轻松实现自定义可以在任意网站使用的"滚动到顶部"效果.如果想创建一个可见的线条来帮助确定距离顶端的理想滚动距离,你需要为activeOverlay设置项制定一个有效的CSS颜色.ScrollUp可以通过CSS实现完全可定制,这使得它可以被很容易的应用到你的项目中. 只需要在你的CSS文件中scrollUp生成的ID设置你的样式即可. 它是基于MIT协议发布的. 8. jQuery Stick ‘em jQuery Stick ‘em 可以使内容在滚动的时候固定在某个点上.有时候,我们有一些很高的图片. 所以当你滚动到图片的底部之后,你将不得不滚回到描述你刚才看的图片的文字处. 解决办法就是当你滚动页面的时候把内容固定. 坑爹的是,我们不能仅仅把文字的位置设置为:fixed,一旦滚动到页面底部就玩完了.由于有时候页面上会有很多部分,我们不得不在某个点将内容"取消固定". 那么让我们来解决这个问题,jQuery Stick’em就能够实现该功能. 9. Infinity.js Infinity.js是用于web的表格视图UI库：它能够加速长列表的滚动并且保证你的无限的数据流畅和稳定。它体积小，久经测试而且性能很好。这是Github上最火的代码，并且以BSD协议分发。被注释的源代码作为演示Infinity关闭与开启是可用的。 Infinity.js是Airbnd公司开发的，除了流行许愿列表和朋友订阅部门，现在已经子啊日常的生产中使用。它只依赖于jQuery。 11. Mobiscroll Mobiscroll 是一个为移动设备(Android手机,iPhone,iPad,Galaxy Tab)准备的轮式滚动日期和时间的选择器.它可以被自定义来支持任意自定义的数值,也可以被用作对于本土选择控制的一个直观的替换. 它的样式是可以改变的. 12. Page Scroller Page Scroller 是一个基于JavaScript的强大的流畅滚动导航系统,它使用强大的jQuery库. 该插件可以在任何网站上轻松创建.你可以选择导航菜单的位置,也可以轻松地改变滚动速度.滚动插件需要依赖jQuery1.3以上的版本. 13. WayPoints Waypoints是一个比较小的jQuery框架，通过它可以轻松的在任何滚动元素滚动情况下执行函数。Waypoints可根据用户在页面滚动的位置生成一个比较稳定的流行UI模式。Waypoints遵循MIT和GPL双重协议。 据测试，在jQuery 1.4版本以上兼容IE6+, FF3+, Safari 4+, 和 […]

HTML5 面试中最常问到的 10 个问题

1. HTML5 新的 DocType 和 Charset 是什么？ HTML5 现在已经不是 SGML 的子集，DocType 简化为：                   <!doctype html> HTML 5 指定 UTF-8 编码的方式如下：                  <meta charset="UTF-8"> 2. 如何在 HTML5 页面中嵌入音频? HTML 5 包含嵌入音频文件的标准方式，支持的格式包括 MP3、Wav 和 Ogg： <audio controls>     <source src="jamshed.mp3" type="audio/mpeg">     Your browser does’nt support audio embedding feature. </audio> 3. 如何在 HTML5 页面中嵌入视频？ 和音频一样，HTML5 定义了嵌入视频的标准方法，支持的格式包括：MP4、WebM 和 Ogg： <video width="450" height="340" controls>   <source src="jamshed.mp4" type="video/mp4">    Your browser does’nt support video embedding […]

为开发者准备的 5 个新鲜方便的 CSS 工具

根据维客的介绍，级联样式表（CSS）是用于描述以标记语言书写的文档外观显示（外观和格式）的样式表语言。最常见的应用是样式化HTML或者XHTML格式的web页面，不过这种语言也可以在任何一种XML文档中使用，包括纯XML文档，SVG和XUL文档。 互联网上有大量的CSS工具可用，不过寻找一个有用的CSS工具是一项费时费力的任务。为了节省你宝贵的时间，我们为开发者收集了5个最新的、易用的CSS工具，这样可以简化开发者的开发任务、省去很多麻烦。 几点人 翻译于 昨天(8:59) 0人顶 顶 翻译的不错哦! 1. Animo.js Animo.js是一个强大的用来管理CSS动画的小工具。它带有很多特性，如Stack animations, 创建跨浏览器模糊滤镜，在动画完成时设置回调。Animo 包括了迷人的 animate.css 库文件，它是由Dan Eden编写的。它提供了将近60种漂亮的动画。 他同时给库文件添加了一些助理动画。 源码 徐继开 翻译于 昨天(8:33) 0人顶 顶 翻译的不错哦! 2. 方便的 CSS3 动画 Cheat Sheet   CSS3 Animation Cheat Sheet 是一款已预设并可直接使用的网站动画特效库。你只要把CSS导入现有项目中并直接调用内嵌的CSS类来修饰你的页面元素。 CSS3 Animation Cheat Sheet是基于CSS3 @keyframes 规则的并且支持所有最新的浏览器(如果算IE这个非标浏览器的在内的话我说的是IE10)。 通过CSS3 @keyframes规则你不需要担心元素每一帧的位置，CSS3会自动完成。 来源 TOTOTO_TOTO 翻译于 昨天(11:11) 0人顶 顶 翻译的不错哦! 3. 创建CSS3 创建CSS3罗列出每个元素的属性，并且允许我们对每个元素重新定义，以及即刻显示预览效果。你可以给同一个元素添加许多属性规则，同时还可以修改生成的CSS代码。 创建CSS源代码在这儿。 几点人 翻译于 昨天(9:07) 0人顶 顶 翻译的不错哦! 4. Salvattore 现在有很多种用于解决瀑布流式的多列动态的布局方案，Salvattore 是另外一个好的解决方案，它与其他方案有一个重要的不同之处，它只需要使用css去配置，而不用配置javaScript脚本。它也是一个使用javascript编写的解决方案，但不需要依赖任何的框架。 源文件在此 凌培勇 翻译于 昨天(11:09) 0人顶 顶 翻译的不错哦! 其它翻译版本(1) 5. nthChild :nth-child，一个通过公式来选择元素的强大的css选择器，在样式化布局里有很大的应用。如果你没有使用这个选择器的经验，nthMaster，一个专注于这个选择器的网站，将会对你有很大的帮助。nthMaster提供了多种多样的:nth-child使用场景，简单，形象，并有一些基本的描述。它包含了获取 特殊的元素，范围内，范围外，:nth-of-type的使用等等 Source 转自：http://www.oschina.net/translate/5-fresh-handy-css-tools-for-develoepers

20 款绝佳的 jQuery 倒计时脚本和插件

Circular Countdown jQuery Plugin – MORE INFO / DEMO Coconut – Jquery Countdown Plugin – MORE INFO / DEMO 包含四种不同尺寸的圆。 Dynamic Countdown with Counter – MORE INFO / DEMO 纯文本的倒计时模板 JBMarket Circular Countdown – MORE INFO / DEMO 使用不同颜色区分：日、时、分和秒。 LuxCountdown – MORE INFO / DEMO 提供多种方格效果的倒计时器，多种颜色 Easy Countdown – MORE INFO / DEMO 带百分比进度提示的倒计时插件 jsCountdown – MORE INFO / DEMO 提供 14 种不同皮肤，同时提供 png 格式模板让你可以自行修改样式 Broadcast Countdown Widget – MORE INFO / DEMO 类似 WordPress 网站的倒计时效果 以下是收费的 jQuery 脚本 JavaScript Animated Counter – MORE INFO / DEMO Fancy Countdown – jQuery plugin – MORE INFO / DEMO jQuery Plugin – KK Countdown – MORE INFO / DEMO Littlewebthings CountDown – MORE INFO / DEMO jQuery Countdown Plugin by David Walsh –MORE INFO / DEMO This plugin […]

20 款 jQuery 的音频和视频插件

Blueimp Gallery: DEMO || DOWNLOAD Blueimp gallery 主要为移动设备而设计，同时也支持桌面浏览器。可定制视频和相片，支持触摸操作，支持全屏播放等。 YoutubeTV: DEMO || DOWNLOAD 该插件可以让你直接在网页上播放来自 YouTube 的视频，支持播放列表 Osvaldas: DEMO || DOWNLOAD 提供水平和垂直显示的播放器 Shadowbox: DEMO || DOWNLOAD Shadowbox is a great plugin and is a perfect web-based media viewer app and the best part is that it supports entire list of media publishing formats. This app can be customized way too easily. Jplayer: DEMO || DOWNLOAD jPlayer是一个用于控制和播放mp3文件的jQuery插件。它在后台使用Flash来播放mp3文件，前台播放器外观完全可以使用 XHML/CSS自定义。 Video.js: DEMO || DOWNLOAD Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器 ILightBox: DEMO || DOWNLOAD If you are looking to build exquisite responsive overlay windows, ILightBox is perfect for you. It offers you […]

十个让人惊叫的数据可视化项目

数据可视化是科学、艺术和设计的结合，当枯燥隐晦的数据被数据科学家们以优雅、简明、直观的视觉方式呈现时，带给人们的不仅仅是一种全新的观察世界 的方法，而且往往具备艺术作品般的强大冲击力和说服力。如今数据可视化已经不局限于商业领域，在社会和人文领域的影响力也正在显现，以下我们将介绍的是是 个让人耳目一新、拍案叫绝的数据可视化项目。 一、富人区、穷人区 “富人区、穷人区”是一个互动地图项目，能直观显示美国每个城市的居民收入和房租水平，不同的颜色谱系代表着不同区域的收入水平，你可以搜索每个州、每座城市甚至每个街区的收入状况。   二、谷歌流感趋势 谷歌流感趋势（Google Flu Trends）通过分析人们的搜索关键词来跟踪预测全球流感趋势，这是Google.org的一个公益项目。   三、LoTRProject LOTRProject其实是一个数据可视化项目，它把托尔金《指环王》系列小说（霍比特人，指环王， 以及精灵之钻）里表述的一个巨大而复杂的家谱关系， 通过图表， 地图， 时间轴以及简单文字说明生动地表现了出来。   四、GE 医学影像创新大赛 2011年9月份GE斥资1亿美元启动了GE创新挑战赛，挖掘能够提高早期乳腺癌诊断水平的创意想法。该视觉可视化项目收到了7大类500个提案，其中五位获胜者获得种子资金用于将创意付诸实施。   五、英国同性婚姻法案 英国卫报发起的这个视觉可视化项目能够分析展示在2013年同性婚姻法案上投票的英国议会议员的个人情况，数据包括议员的性别、所在政党和当选时间。   六、2010年美国枪支杀人统计 Periscopic（潜望镜）公司推出的这个数据可视化项目展示了2010年枪支暴力如何提前终止了9595人的生命。数据来自FBI的联合犯罪报告以及世界卫生组织。 图形中的弧线代表受害者理论上可以活到的生命长度，鼠标停留在弧线上将显示更多信息，你还能将图形与枪支型号、种族、性别等进行关联分析。   七、皇后乐队：四个视角 “四个视角”项目显示了语言在皇后乐队歌曲中的重要性，通过分析皇后乐队歌词中的关键词汇，能发现皇后乐队音乐中表达的重要主题，以及每位歌曲作词人的影响力。   八、1851年至今的飓风统计 通过分析来自美国海洋与大气管理局（NOAA）的数据，开发人员John Nelson创建了这个能够分析1851年以来的热带风暴和飓风的数据可视化项目。该项目用颜色区分飓风的强度，卫报的一篇报道中可以看到这个项目的动画版本。   九、纽约市政交通的一天 YouTube用户STLTransit用可视化的方式展示了纽约人一天中如何使用包括地铁在内的市政交通，数据来自General Transit Feed规范数据，STLTransit还未其他城市的交通系统创建了视频。   十、Facebook照片分享 在地图数据可视化方面拥有专长的旧金山一家设计与技术工作室Stanmen制作了一系列视频演示Facebook用户的照片分享行为，该项目将该工作室的George Takei发布的三张照片在三个月内的传播情况进行了可视化分析。 文章来自IT经理网

JavaScript开发者常忽略或误用的七个基础知识点

JavaScript 本身可以算是一门简单的语言，但我们也不断用智慧和灵活的模式来改进它。昨天我们将这些模式应用到了 JavaScript 框架中，今天这些框架又驱动了我们的 Web 应用程序。很多新手开发者被各种强大的 JavaScript 框架吸引进来，但他们却忽略了框架身后浩如星海的 JavaScript 实用技巧。本文将为你呈献其中七个基础知识点： 1. 在 String.prototype.replace 方法中使用 /g 和 /i标志位 令很多 JavaScript 初学者意外的是，字符串的 replace 方法并不会 替换所有匹配的子串——而仅仅替换第一次匹配。当然 JavaScript 老手们都知道这里可以使用正则表达式，并且需要加上一个全局标志位（/g）： 1 // Mistake 2 // 踩到坑了 3 var str = "David is an Arsenal fan, which means David is great"; 4 str.replace("David", "Darren"); // "Darren is an Arsenal fan, which means David is great" 5 6 // Desired 7 // 符合预期 8 str.replace(/David/g, "Darren"); // "Darren is an Arsenal fan, which means Darren is great" 另一个基本的逻辑错误就是在大小写不敏感的校验场合（字母可大写可小写）没有忽略大小写，此时 /i标志位就很实用： 1 str.replace(/david/gi, "Darren"); // "Darren will always be an Arsenal fan, which means Darren will always be great" （译注：上面这段例程我没有看懂用意，可能是注释有误吧……） 每个 JavaScript 开发者都曾踩过这两个标志位的坑——因此别忘了在适当的时候用上它们！ 2. […]

css中的注释要注意了

周末给客户写了一个专题页面，今天发现在IE8下是空白页面，直接不显示，直接怀疑是CSS的问题的; 通过一行一行排查，发现是CSS里有html的注释<!—->导致的，直接去掉，一切正常。

Dwz关闭弹出的窗口