HTML5_前端
关注
铁锚
系统架构师,Java性能调优专家。热爱程序开发和设计; 积极应对各种情境和挑战;
喜欢钻研新技术, 闲暇时喜欢翻译和分析英文文档/技术博客。
展开
-
巧用JSON.stringify()生成漂亮格式的JSON字符串
巧用JSON.stringify()生成漂亮格式的JSON字符串使用JavaScript处理XML基本上就是一个杯具,这也是JSON在程序开发中广受欢迎的原因。我曾经写过一个 JavaScript函数来将XML转换为JSON,那种~duang~duang~的痛点简直是折腾得你欲死欲仙。如果要将现有的对象转换为JSON字符串, 则可以使用 JSON.stringify(obj)函数, 可能你已经用过这原创 2015-03-09 16:32:01 · 64394 阅读 · 1 评论 -
获取并设置HTML5 Video的当前进度
上周翻译了一篇文章: 如何获取HTML5视频的持续时间。很显然这是一门简单却很实用的技术, 但我认为还有一个更重要的知识点是控制视频的时间设置。在用HTML5技术处理视频时,设置(setting)和获取(getting)时间都是很有用的,那就让我们一起来看看如何达成这个 目标吧！在管理视频状态时，最重要的是要了解 currentTime 是个什么鬼。你可以通过这个属性获取当前播放到了哪个时间点翻译 2015-03-21 21:42:24 · 36869 阅读 · 2 评论 -
完善用户体验: 活用window.location与window.open解决页面跳转问题
本文解决的是按 Ctrl键时使用JS打开新页面的问题,以及window.location与window.open的区别翻译 2014-08-31 16:21:30 · 12499 阅读 · 1 评论 -
用JavaScript来包装文本元素节点
最简单暴力的方法是,你可以在父元素上通过 .innerHTML 属性来执行更新,但问题是这样一来所有绑定的事件监听都会失效,因为使用 innerHTML 时会重新创建一个HTML元素。这真是个大玻璃杯！所以这时候只能利用JavaScript来实现 —— 尺有所短、寸有所长翻译 2014-09-06 12:20:10 · 3081 阅读 · 1 评论 -
使用JavaScript动态添加CSS样式规则
动态添加规则到样式表是高效的手段,可能比你想象的还要简单。请记住这种方案,可能在你的下一个大应用中需要使用,因为它能在代码和元素处理这两方面避免你掉进坑里。翻译 2014-09-05 21:20:23 · 32530 阅读 · 0 评论 -
使IFRAME在iOS设备上支持滚动
原文链接: Scroll IFRAMEs on iOS原文日期: 2014年07月02日 翻译日期: 2014年07月10日翻译人员: 铁锚很长时间以来, iOS设备上Safari中超出边界的元素将不能滚动,处理这种问题对开发人员来说一直是种折磨。 对原文作者的博客来说,这特别让人无奈,因为demo程序都是在沙箱IFRAMEs中运行的,这是为了不影响博客网站的AJAX页面加载策略. 通过一些研究翻译 2014-07-10 20:27:21 · 52525 阅读 · 9 评论 -
让示例代码在手机上换行显示
原文链接: Wrapping Code Samples on Mobile Devices原文日期: 2014年5月29日翻译日期: 2014年5月30日翻译人员: 铁锚作为一个技术博客的站长,我的博客中有很多的代码示例(code samples ),有时还需要兼顾小屏幕移动设备。 我惊讶地看到超过 10%以上的访问量是通过手机访问的 —— 真的快疯了! 我开始关注手机上的显示翻译 2014-05-30 14:35:09 · 4686 阅读 · 0 评论 -
如何在Nginx服务器中启用Gzip压缩
原文链接: Enable GZIP Compression on nginx Servers原文日期: 2014年7月16日翻译日期: 2014年7月19日翻译人员: 铁锚速度决定一切,没有什么比一个高速网站更犀利的了。当你访问我的博客时,我希望你有一个良好的体验,这也是我一直不知疲倦地压缩所有资源和避免不必要同步交互的原因。在使用 Google官方的网页载入速度检测工具 评估我的网站时,才发现在翻译 2014-07-19 21:28:18 · 5911 阅读 · 0 评论 -
CSS解决无空格太长的字母,数字不会自动换行的问题
其实很简单，代码如下所示，注意 Style：默认情况下，一个 DIV或者其他元素的文本，如果都是无文字分隔符，无空格，则不会自动换行，比如:aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa原创 2014-05-25 18:30:58 · 17506 阅读 · 3 评论 -
固定宽高的DIV绝对居中示例
看了一些代码，然后自己试验了一番，分享如下示例：实现点： 如果元素的宽高固定,那么,css指定样式为top:50%;left:50%; 而margin-top和 margin-left 指定为负数，绝对值为自身宽高的一半当然，position也需要指定为absolute,或者relative. 如果要在某个父级元素内居中，那么父元素也需要指定CSS的position属性。如果有边框原创 2013-08-28 15:59:49 · 3751 阅读 · 0 评论 -
纯CSS箭头,气泡
原文地址: CSS Triangles 演示地址：CSS Triangles Demo 原文日期: 2013年8月5日翻译日期: 2013年8月9日本文两种实现方式: 使用或不使用 before 和 :after 伪元素(伪类,pseudo-elements)最近重新设计了我的网站，准备添加tooltips提示信息效果.实现很容易，但我想要让提示功能具有三角形的指翻译 2013-08-09 10:34:15 · 8663 阅读 · 0 评论 -
Web应用程序设计十个建议
原文链接: Top 10 Design Tips for Web Apps原文日期: 2014年04月02日翻译日期: 2014年04月11日翻译人员: 铁锚现代web应用通常在互联网上通过SAAS(软件即服务)的方式获得收入。 许多企业还维护着支持业务需要的内网web应用。 不管是服务数百万人,还是只有几十人在使用, 应用程序好坏的主要评判标准是界面的直观性和用户的易用性。 下翻译 2014-04-11 15:46:12 · 4636 阅读 · 0 评论 -
HTML5 <script>元素async,defer异步加载
原文地址：HTML5′s async Script Attribute原文日期： 2010年09月22日翻译日期： 2013年08月22日(译者注: 异步加载,可以理解为无阻塞并发处理.)我对于HTML5感到兴奋不已的原因之一是它实现了众多业界期待已久的特性。我们一直需要输入框显示空白提示，但都是用JavaScript来实现的。我们也想要整个块都变成可被点击，也是使用JavaS翻译 2013-08-23 10:27:58 · 30293 阅读 · 8 评论 -
生产环境线上测试的惨淡人生
对生产环境进行测试是不得不做的事,但又是谁都不想做的事情,对吗? 如果一个粗心,可能会瞬间产生某些难以预料的损害. 如果一切顺利,你会觉得 "为什么还要冒这个险呢?我应该在模拟环境做这种事,然后收工!" 好吧,我们不能在生产环境绕过自动测试与人工测试,下面这张图似乎就代表了做生产环境测试的那种感觉翻译 2014-10-22 09:30:41 · 3792 阅读 · 0 评论 -
如何获取HTML5视频的持续时间
HTML5视频的Bigger体验是非常令人振奋的,很简单的道理，不用加载和依赖烦人的Flash或其他第三方插件来播放视频，也是大功一件。我们可以通过自定义控件对视频进行显示和操控,其中一个常见的需求是显示视频的时长(duration)。下面我们一起来看看如何获得并显示视频的持续时间!JavaScript 代码video 元素有一个属性(property)叫做 duration,表示的是视频内容的时间翻译 2015-03-14 16:30:48 · 11832 阅读 · 0 评论 -
CSS高级技巧:自动省略左侧文本
难以置信! 浏览器和CSS规范居然支持自动省略左侧的文本了。 通过 text-overflow: ellipsis, 搭配固定的 width 属性, 以及overflow: hidden 样式, 就可以实现这样的功能; 能用CSS实现，就不需要编写复杂的 JavaScript 代码来计算字符串宽度, 或者进行截断了. CSS的自动省略特性, 对无障碍环境也非常友好。text-overflow: ...翻译 2018-12-21 12:00:41 · 5190 阅读 · 4 评论 -
HTML页面基本结构
本文简要介绍HTML中的各种元素及其相关属性，读者需要有一个概念: HTML页面都是由基本元素及属性组成的。翻译 2017-09-11 09:52:21 · 11358 阅读 · 2 评论 -
前端构建工具-fis3使用入门
本文主要介绍前端构建工具-fis3 如何使用。FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题。原创 2017-07-10 16:01:08 · 2850 阅读 · 0 评论 -
AngularJS 2.0.0正式版发布: 前端领域的强悍尖兵
2016年9月15日, 在谷歌总部(Google HQ)一场特殊的聚会上, 我们发布了 Angular 2 的 final release 版本, 正式成为 Angular 1 的全平台继任者。“final”是什么意思呢? 就是通过广泛测试后的稳定版, Angular 框架对开发者友好并能大幅提升生产力, 体积轻巧,性能优良. 通过预编译技术及内置的延迟加载机制, 确保应用部署传输量小,响应迅速,并翻译 2016-09-16 00:34:05 · 1845 阅读 · 1 评论 -
fetch简介: 新一代Ajax API
AJAX半遮半掩的底层API是饱受诟病的一件事情. XMLHttpRequest 并不是专为Ajax而设计的. 虽然各种框架对 XHR 的封装已经足够好用, 但我们可以做得更好。更好用的API是 fetch 。下面简单介绍 window.fetch 方法, 在最新版的 Firefox 和 Chrome 中已经提供支持。翻译 2016-05-24 23:06:37 · 47957 阅读 · 3 评论 -
禁止页面Body在后台滚动
我最讨厌的一种情况, 是在滚动弹出框的时候, 后台的 <body> 也跟着一起滚了。你可能也碰到过这种情况: 想滚动一下对话框, 却看到底层的页面也跟着一起滚动? 这真是种糟糕的用户体验, 很杯具、呵呵。那么怎样才算是比较好的处理方式? 监听 scroll 事件并且执行 preventDefault 和/或 stopPropagation, 但却没什么用。 最简单的方式是使用CSS:翻译 2016-06-17 13:09:40 · 5020 阅读 · 0 评论 -
Promise 简介
在过去几年中 Promise 一直是个热门话题(如果你是 Dojo Toolkit 用户,那么就是已经有10年了), 已经从一个JavaScript框架变成了语言的一个主要成分. 很快你就会看到大多数新的 JavaScript api 都会基于 Promise 的方式来实现……… 当然这是好事! 开发人员能够避开回调的地狱, 异步交互也可以像其他变量一样传递. 是时候去学习 Promise 了翻译 2016-06-25 19:18:51 · 6051 阅读 · 0 评论 -
跨域图片资源权限(CORS enabled image)
尽管没有CORS授权也可以在 canvas 中使用图像, 但这样做就会污染(taints)画布。 只要 canvas 被污染, 就不能再从画布中提取数据, 也就是说不能再调用 toBlob(), toDataURL() 和 getImageData() 等方法, 否则会抛出安全错误(security error).这实际上是为了保护用户的个人信息,避免未经许可就从远程web站点加载用户的图像信息,造成隐私泄漏翻译 2016-06-14 22:23:22 · 42215 阅读 · 1 评论 -
CSS3新特性: mix-blend-mode: multiply
我经常问的一个面试题是: “在前端领域,你如何与新技术和API保持同步更新?“ 我听到的大多都是标准答案: “技术博客” 以及 “RSS订阅”, 而很少听到 “关注大牛的Twitter“ 这类答案, 我觉得奇怪, 因为我从Twitter上学习 loads, 尤其是在学习 CSS 的时候, 一两行代码就能优雅地搞定问题。翻译 2016-05-02 15:46:17 · 9208 阅读 · 1 评论 -
用CSS指定外部链接的样式
大部分的信息类网站,比如维基百科,都会对外部链接(标签)指定特定的样式.作为用户,一眼就知道该链接是指向另一个站点的资源是很好的体验。许多网站在服务器端做外部链接检查,添加一个`rel=external` 的属性值,或者对外部链接添加一个 'external' 的 class。有时候这是不可能的或不好用的。在网上闲逛之后,我发现以下对外部链接很有用的CSS样式代码:a[href^="h翻译 2014-02-10 11:01:29 · 4155 阅读 · 0 评论 -
ExtJS中的accordion布局如何展开特定的item
因为项目需要,使用了extJS作为后台管理系统的前端框架。 众所周知，后台管理系统一般是根据权限来展示菜单的。 菜单使用了panel的accordion布局，然后内部使用panel包裹了一棵树(treepanel)。 刷新时自然是不方便啦,因为想要自动打开上次的菜单展开状态。 关键点如下: 1. 使用Cookies或者HTML5的LocalStorage记住最后展开菜单的rootID。原创 2015-06-25 16:17:52 · 4786 阅读 · 0 评论 -
通过CSS显示垂直文本
原文链接: CSS Vertical Text原文日期: 2014年03月18日翻译日期: 2014年3月22日翻译人员: 铁锚示例地址: http://davidwalsh.name/demo/css-vertical-text.php我们所创建的HTML元素基本上都认为是水平的框架。 我们更加注意宽度而不是高度,特别是当它涉及到文本时。 然而,有时候我们确实想以垂直方式翻译 2014-03-22 19:24:38 · 2743 阅读 · 0 评论 -
使用HTML5抓取 Audio & Video
原文地址: http://www.html5rocks.com/en/tutorials/getusermedia/intro/ 本地化的文章: http://www.html5rocks.com/zh/tutorials/getusermedia/intro/其中已经有中文版本的本地化内容,点击 本地化 下面的 中文 (简体) 即可查看中文翻译,但是其中的演示也是不能运行,另外,CSDN转载 2014-03-13 14:09:11 · 36826 阅读 · 2 评论 -
Bootstrap 简介: 创建响应式、移动项目的工具
原文链接: Introduction to Bootstrap: A Tool for Building Responsive, Mobile-First Projects下载: 示例代码Bootstrap-Code.zip原文时间: 2014年02月28日翻译时间: 2014年03月01日翻译人员: 铁锚简介随着移动设备的日益普及,web开发人员需要考虑将网站开发翻译 2014-03-01 05:12:38 · 19629 阅读 · 0 评论 -
HTML5 预加载
原文地址： HTML5 Link Prefetching原文日期： 2010年07月07日翻译日期： 2013年08月13日浏览器厂商和开发者之间共同努力的一个方向就是让网站更快。现在已有很多广为人知的加速解决方案：CSS sprites(CSS精灵,拼图)以及图像优化,分布式配置文件(.htaccess),JS/文本文件压缩，CDN加速等。我在另一篇博文中介绍了 如何让网站更翻译 2013-08-13 12:40:37 · 12259 阅读 · 0 评论 -
HTML5 input 类型： email及url
原文地址： HTML5′s “email” and “url” Input Types原文日期： 2010年09月15日翻译日期： 2013年08月13日在前面的博文,我们已经讨论了一些HTML5改进的地方，比如placeholder,prefetching以及webStorage,下面我要介绍的是两个新的input元素类型: email和url。让我们跟着代码来看看他们的好处翻译 2013-08-13 13:58:39 · 10995 阅读 · 0 评论 -
HTML5 Web Storage 特性
原文地址: Using HTML5 Web Storage 原文日期： 2010年06月28日翻译日期： 2013年08月12日当下Web开发领域最火爆的词语当属 HTML5。HTML5标准的新特性将得到那些不想通过东拼西凑一些功能来使得网站更快，更好，更灵活的WEB开发者热烈的欢迎。其中一个耀眼的特性是Web Storage(Web 存储)。Web存储提供一个客户端方法来保存会话翻译 2013-08-12 20:27:57 · 5498 阅读 · 0 评论 -
HTML5 window/iframe跨域传递消息 API
原文地址：HTML5′s window.postMessage API在线示例：Using HTML5's window.postMessage(请打开控制台看日志)原文日期： 2010年09月03日翻译日期： 2013年08月24日我写了一个 MooTools 的插件"PostMessager"来封装window.postMessage,你可以点击这里下载!HTML5翻译 2013-08-26 11:04:35 · 5515 阅读 · 0 评论 -
HTML5 classList API接口
原文地址：HTML5 classList API原文日期： 2010年07月13日翻译日期： 2013年08月23日当我陷入JavaScrip和JavaScript类库框架之中时，我总是有种希望：什么时候浏览器厂商才能用本地代码原生地实现这些由工具类库所提供的方法呢？我也知道标准的重要性，然而厂商们几乎不可能花大价钱钱仅仅为了实现这些功能。但是我相信他们会，而且是快马加鞭的实现翻译 2013-08-23 21:05:32 · 3471 阅读 · 0 评论 -
HTML5 在<a>标签内放置块级元素
原文地址： HTML5: Wrap Block-Level Elements with A’s原文日期： 2010年06月26日翻译日期： 2013年08月22日对比起XHTML来说，HTML5通过更简单的元素引起了一系列的思考，坦诚地讲,这真的是急需的简化。这些简化之一就是能够通过<a>标签包装像div,h标签(h1...h6),和段落标记P 这些块级元素。你没看翻译 2013-08-22 18:27:29 · 16613 阅读 · 2 评论 -
Canvas与Image互相转换
JS Canvas与Image互相转换原文地址: JavaScript Canvas Image Conversion原文演示: JavaScript Canvas Image Conversion Demo原文日期：2012年05月08日翻译日期：2013年08月09日在上周的Mozilla Web开发 会议,最后我们花了大半天的时间讨论未来的Mozilla市翻译 2013-08-09 14:48:54 · 39229 阅读 · 6 评论 -
通过Canvas及File API缩放并上传图片
原文地址：Resize an Image Using Canvas, Drag and Drop and the File API 示例地址：Canvas Resize Demo 原文作者：Dr. Tom Trenka原文日期： 2013年8月6日翻译日期： 2013年8月8日 Tom Trenka 能为"我"的博客写一篇文章,对我来说是一个巨大的荣誉。Tom是Dojo框架的...翻译 2013-08-08 15:02:46 · 39459 阅读 · 17 评论 -
5个你不知道的HTML5的接口
原文地址：5 HTML5 APIs You Didn’t Know Existed 原文日期： 2010年09月27日翻译日期： 2013年8月7日当人们看到或者说出"HTML5"这个词的时候，估计至少有一半以上的人，会联想到她既是一个性感而又充满魅力的美女，同时也是一只能把你搞得焦头烂额的独角兽，这能怪我们这些开发者吗？我们注意到那些基础的Api停滞发展了如此漫长的时间(大概翻译 2013-08-07 12:25:19 · 6153 阅读 · 0 评论 -
HTML5 placeholder(空白提示) 属性
原文地址：HTML5′s placeholder Attribute 演示地址: placeholder演示 原文日期： 2010年08月09日翻译日期： 2013年8月6日浏览器引入了许多的HTML5 特性: 有些是基于HTML的，有些是JavaScript APIs形式的,但都很有用。其中我最喜欢的一个就是为input元素引入了placeholder属性。p翻译 2013-08-06 21:39:54 · 13444 阅读 · 0 评论 -
HTML5 自动聚焦 属性
原文 ： HTML5 autofocus Attribut原文发布时间： 2012年08月27日翻译时间： 2013年8月6日HTML5 推出了一大堆精彩的东西给我们。过去我们要用JavaScript和Flash完成的任务，比如表单验证，输入框空白提示(INPUT placeholders),客户端文件上传下载(client side file naming),以及 音频/翻译 2013-08-06 20:55:37 · 25750 阅读 · 2 评论