HTML5

为什么HTML会将“chucknorris”认成红色？

扫描二维码

在Stackoverflow上有个5441标星推荐的问题，很有意思。这个问题创建于2011年，几年来一直被人们讨论着。

为什么在HTML里，随机的字符串可以对应不同的背景颜色？

举个例子：

<body bgcolor="chucknorris"> test </body>

在线web前端工具-效率提升

扫描二维码

在线图片压缩

site：tinypng

在保证显示质量的前提下，大幅压缩图片大小。普通的5M以下的图片压缩都是免费的，前端开发中的绝大部分图片都可以满足。如果很大图片的压缩需要付费。

Web新技术：PWA-Progressive Web App

扫描二维码

什么是Progressive Web App?

Progressive Web App是一个利用现代浏览器的能力来达到类似APP的用户体验的技术，由Google实现，让浏览器打开的网址像APP一样运行在手机上。让Web App和Native App之间的差距更小。

概览特性：

  • 添加到屏幕
  • 从屏幕点击启动
  • 加载屏
  • 支持离线应用
  • 支持Push Notification

怎么通过命令来检查浏览器的兼容性(译)

扫描二维码

传统上构建网站涉及很多的技术来解决浏览器的兼容性问题，有一些属性很特殊，甚至根本没有。web开发者会经常登录CanIUse上去查看某个功能是否被各浏览器支持。

CanIUse 保持和采用标准的HTML,CSS,SVG，依据W3C的规范，和每个浏览器的现存的bug相连接。举个栗子，我们可以从下面的图中看到Edge,Firefox,Opera Mini并不支持CSS Reflection,有的浏览器已经支持，需要增加前缀以标明。

HTTP 缓存

扫描二维码

通过网络获取内容既缓慢，成本又高：大的响应需要在客户端和服务器之间进行多次往返通信，这拖延了浏览器可以使用和处理内容的时间，同时也增加了访问者的数据成本。因此，缓存和重用以前获取的资源的能力成为优化性能很关键的一个方面。

在这篇指南中

  • 使用 ETag 验证缓存的响应
  • Cache-Control
  • 定义最优 Cache-Control 策略
  • 废弃和更新已缓存的响应
  • 缓存检查表

好消息是每个浏览器都实现了 HTTP 缓存！ 我们所要做的就是，确保每个服务器响应都提供正确的 HTTP 头指令，以指导浏览器何时可以缓存响应以及可以缓存多久。

移动开发规范概述

扫描二维码

以下规范建议，均是Alloyteam在日常开发过程中总结提炼出的经验，规范具备较好的项目实践，强烈推荐使用

字体设置

使用无衬线字体

body {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}

移动正在吞噬这个世界

扫描二维码

这个演讲稿和视频解释了手机正在急速发展，而占据整个世界的解释。


移动端web开发技巧

扫描二维码

这是一个最好的时代，因为我们站在潮流中；但也是一个最坏的时代，因为我们站在潮头上。

META相关

1. 添加到主屏后的标题（IOS）

<meta name="apple-mobile-web-app-title" content="标题">

2. 启用 WebApp 全屏模式（IOS）

当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果）

<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-touch-fullscreen" content="yes" />

<picture>-浏览器内置的响应式标签（翻译）

扫描二维码

<picture>标签介绍

<picture>标签提供可声明式的方式来加载图片。网页开发者不必非要用CSS和JS来处理响应式的图片加载。用这种方式的好处是提高加载速度—尤其是在移动端时网络情况不好的时候。

随着新的属性 srcset、sizes加入到<img>标签，<picture>标签给网页开发者更多的灵活性来定义图片的源。书写清晰的标记来让浏览器检测到下面不同的标记，忽略还是加载，来支持响应式设计并提高加载的时间：

前端开发机遇

扫描二维码

对HTML 5这项诞生于2008年的标准来说，其正在经历最好的时代。

随着万维网联盟（W3C）宣布规范制作完成，越来越多的互联网企业将目光头向了HTML5，这一被苹果前CEO乔布斯所热捧的标准。
游戏开发者则更早地进入这一领域。有研究报告显示，2014年第四季度以来，有60%的游戏行业从业者已经投入或准备投入开发HTML5为基础的游戏，并对其前景表示乐观的态度。