专注于网站前端设计与开发

brotli

Brotli是什么鬼?

沉迷于工作太久,以至于对新技术的了解已经开始落后了,比如 Brotli,第一感觉是:这是什么鬼? Brotli是什么鬼?简而言之: Brotli就是一个类似Gzip的压缩算法 Brotli 是Google 工程师 Jyrki Alakuijala 和 Zoltán Szabadka 开发的一个压缩算法。Brotli最早被用于做压缩 WOFF2 网络字体的大小,后来才被用作网站静态内容压缩。 时间轴2013年,Brotli第一个版本被用来压缩 WOFF2 网络字体2015年, Google 推出重写了编码器版本的 Brotli,并将之作为 HTTP压缩的增强工具2016年, IETF将 Brotli 列为标准草案(RFC 7932)Brotli 比Gzip更强吗?是的 Javascript : 比 gzip小 14% HTML : 比 gzip小 21% CSS : 比 gzip小

HTTP/3快来了,挖一挖 HTTP 的历史
HTTP

HTTP/3快来了,挖一挖 HTTP 的历史

偶尔发现某大型网站的服务还在使用HTTP/1.1,没有使用HTTP/2 ,然后突然就好奇HTTP/3怎么样了。。。挖一下 HTTP 的事情 然后就很感慨: 我们做的很多努力就是为了提升效率和安全 HTTP标准和HTML标准一样古老,都是由互联网之父 Tim Berners-Lee 在1989年发起,然后经由IEFT发展起来。不过HTTP第一个被广泛应用的版本是 0.9 版本,对我们影响比较多的是 1.0 版本和后来的 1.1 版本,我记得国内有些门户网站在2010年之后还在用 HTTP/1.0。 HTTP 时间轴1991, HTTP/0.91996, HTTP/1.01997, HTTP/1.12009, SPDY2012, HTTP/22018, HTTP/3我们从 HTTP/

Flash Player 即将寿终正寝,请尽快卸载
Flash

Flash Player 即将寿终正寝,请尽快卸载

Adobe 发布了最后一个版本的Flash Player更新,并明确确认了这是『中国区以外的』最后一个版本,以及只支持到 2020年12月31日,从2021年1月21日开始会主动屏蔽播放 flash 内容。 曾经改变了世界的技术,就这样被开放技术淘汰了…… 那么为什么说要尽快卸载呢? 当然是因为中国特供版啊! 根据知乎网友搜集到资料,中国特供版Flash Player 简直就是流氓的化身了: 1. 中国版 flash player 的服务主体不再是Adobe 而是重庆重橙网络科技有限公司。 2. 可以随意收集用户信息。 3. 可以『披露』用户信息。 4. 用户信息丢失了,它不用负责任。 具体内容可以去 flash.cn 去围观一下。 不过反正绝大部分 Flash 都无法使用了,正常的浏览器都会屏蔽 flash 插件了,那就赶紧把尾大不掉的 Adobe Flash Player 软件给卸载了吧……他们家的软件真的是一装一大家啊…

你是否真的知道 Markdown
markdown

你是否真的知道 Markdown

我曾经是Markdown 的鼓吹者,一说到和文档相关的事情,都会坚定的推广 markdown。然而我却一直不明白为什么有的markdown支持table,有的却不支持,今天深入了解了之后才发现,markdown没有那么简单。 Timeline 2004年,博主 John Gruber 发明了 markdown,Aaron Swartz起到了重要的作用。值得注意的是,发明者 John Gruber 的职业并不是软件工程师,但是他用perl写了第一个markdown to html 的转换工具 markdown.pl 2007年,pandoc支持了markdown 2008年,stackoverflow发布并支持markdown 2009年,GitHub开始使用 GitHub Flavored Markdown 2012年,Jeff Atwood 组织了 Stand Markdown组织,商讨制定 markdown标准。 2014年,标准制定,不过 John

苹果终于支持WebP了,然而它已经不是最牛的了
webp

苹果终于支持WebP了,然而它已经不是最牛的了

苹果在最新的系统中支持了WebP格式的图片,到此为止,WebP总算获得全部主流平台的支持,可以大规模使用了。 WebP支持Chrome 32+Safari 14+,是的,只支持iOS 14和MacOS Bug Sur微信小程序基础库 2.9.0+,用户占比 98.88%Google在2010年发布了WebP/WebM图片和视频格式,Google自己的服务(Chrome)在2014年前后才全面支持,而苹果更是到今年才提供支持。一个新的图片格式被全面支持居然要花10年,令人唏嘘。 不过,各大公司在颠覆JPEG的路上并没有停止,这些年一直在想尽办法来替代JPEG图片格式,而且,各种新格式在数据上都比JPEG和WebP要好,但真要能被当成标准被支持,就不知道是什么时候的事情了。 AVIFNETFLIX推出,被设计用来取代WebP。 NETFLIX认为,一个JPEG替代方案,应该有以下特征: 广泛支持更高的压缩效率更广泛的特征集这个格式的图片发展很快,2018年提出,2019年制定规范,今年——2020年8月份,Chrome 就率先支持了。其它平台比如Windows 10也开始支持,但浏览器侧目前就只有 Chrome

微信

【最高补贴3万】微信支付18年校招开始了,快发简历来!

腾讯2018年校园招聘即将开始,2019年毕业的同学欢迎自荐,有亲朋好友明年毕业的话也欢迎推荐。 微信支付今年招聘各个岗位的优秀人才,在这里你可以接触最前沿的互联网产品形态,可以学习和使用最先进的互联网技术,可以接触到和消费相关的各行各业。在这里你可以和优秀的同事们一起努力,让微信支付触达10亿微信用户,影响中国人的生活消费方式,让人们的生活更加便捷。 而且,微信支付即将入住腾讯公司新总部滨海大厦,腾讯滨海大厦靠近深圳湾公园和深圳湾体育中心,毗邻深圳生活娱乐中心海岸城,相信在这里的业余生活也将多姿多彩~~ 深圳市政府对于新入深圳的毕业生有一定的租房和生活补贴,其中本科生 1.5 万,硕士 2.5 万,博士 3 万。虽然不是巨款但是简单买买买了~~ 如果你有意来微信支付,请即刻发送简历给我! 当然,如果你有意腾讯的其它岗位也可以发简历给到我: mienflying@gmail.com 请!注!意!4.1日前可获得内部推荐资格哦!

ios

web app 一分钟适配 iPhone X

明天就要开抢 iPhone X 了,然而面对 iPhone X 这个奇葩的屏幕,你准备好了吗? 因为 iPhone X 的刘海设计,Web 在 iPhone X 横屏时,可能会有些问题: 默认情况,iPhone X 会将页面填充到安全区域(safe area),就像上面的图一样,一般情况下是没有问题的; 但如果是全屏 Web App 就会有问题了,比如背景色和页面的契合程度之类的; 有的 iOS app 内置 WKwebview 可能会为了避免一些bug,而采用统一的行为,就是禁用 iOS 11 自己的内容区域判断,从而让 H5 默认全屏,如下图: 解决方案 1. 默认全屏

svg

不要把 svg 转成 base64

不是什么新知识,一个小技巧而已。 今天遇到一个项目中使用纯色图标的问题,用字体麻烦用图片low,所以就想直接用svg,毕竟只有一两个图标。 第一想法是用 DataURI,然后想到了之前 CSS-tricks 的文章,翻了下做下汇总: 不建议把 svg 转 base64 来用 base64 本身浏览器解码也会消耗一定的资源 svg 转 base64 后反而会变大 解决方案: 压缩 svg 文件,使用 SVGO 或者 SVGOMG 使用 DataURI 而不用 base64 ,DataURI 的用法是 data:[<mediatype>][;base64],<data> base64 只是声明 data 使用 base64

会议

2017年腾讯Web前端大会即将召开

首届 < 腾讯Web前端大会 TFC 2017 /> 将于2017年6月24日在深圳召开,本次大会将是腾讯规模最大的Web前端盛会。主办方腾讯, 中国顶级互联网公司之一,创造了许多亿万海量用户级的优秀Web应用,积累了深厚的Web前端开发经验 。 大会讲师将会广邀国内外的前端知名大牛,他们有著名流行框架的作者、知名前端书籍的作者、Web工程化方面的权威等。其中还有部分讲师是从腾讯上千名前端工程师中精挑细选的优秀高级工程师,将为你带来最具实践价值、最接地气的前端开发经验分享,内容不仅涵盖Web新技术、Node.js、框架、工程化、 图形处理等前端前沿内容 ,还包含极致的性能优化、海量用户运营等具有腾讯前端特色的宝贵经验。 无论您是资深的前端大咖,还是初出茅庐的前端菜鸟,相信都可以通过本次大会获得非常有价值的帮助。 大会官方网站: http://tfc.alloyteam.com/ 时间:2017年6月24日 地点:深圳福田区 CBD大中华广场 喜来登酒店 二楼会议厅 PS,还有鹅厂的舞团SOS女子组合和乐队的助兴表演,嗯,又有技术干货又有养眼妹纸,想想就觉得赏心悦目。

JS the Hardcore: 执行上下文(Execution Context)

先看个例子: console.log(a) console.log(foo()) var a = 'hello world' function foo() { console.log('foo') } 估计大部分人早就对这种问题了如指掌了,输出结果也是脱口而出: undefined 'foo' 请解释一下原因? 这不就是常说的 Hoisting 吗? 代码在执行的时候,其实是这个样子的: function foo() { console.log('foo') } var a console.log(a) console.log(foo()) a = 'hello world' 是的,这样解释也可以,但是不够准确。如果仅仅理解到这个层面,而不把这里面涉及到的「执行上下文」(Execution Context,

weui

weui.js发布

weui.js 是 WeUI 的轻量级 js 封装。 嗯,没啥好介绍的,直接复制项目的 Readme.md 过来好了,欢迎去项目的 Github 项目主页 star 并贡献代码。 概述 注意:由于微信小程序不支持dom操作,所以weui.js并不适用于小程序。不过WeUI也为小程序开发了另外的版本,详情请看:https://github.com/weui/weui-wxss/ 手机预览 https://weui.io/weui.js/ 开发 安装 git clone https://github.com/weui/weui.js.git cd weui.js

swift

One Day

这几年,前端技术发展很快,每年都有新的技术名词流行,ReactJS、Angular 2、VUE、微信小程序。。。而我重新学习了 swift ,是的,重新学习,之前读过《swift 1.0 从入门到放弃》。 想起当年学习前端开发的经历,我开始写一些实际的小 app 来练手,总算是没有又一次『从入门到放弃』 有一天突然想到,每一天不管开心还是难过,不管是平淡还是难忘,都要过的有意义——从来不写日记的我第一次想每天花几分钟记录一下自己的一天了。(日记?上个世纪的东西了吧?!) 于是就尝试了各种 app,记事类的、日记类的。却发现每个 app 都想做的很完美,带上各种功能,需要的不需要的全都有,干扰的东西太多。。。 我只想一个单纯的记录自己每一天的 app,几张图片,一段文字,最多再加上一个地理位置,嗯,真实的自己,只有自己能看到,也不用担心有没有人点赞。 干脆就自己用

weui

WeUI for 微信小程序发布

嗯,迟到的软文,这几天博客后台遇到了点儿问题,今天午休折腾了一番,也没有折腾对,但博客就这样恢复了。node nginx chrome spdy http/2 ...ghost 每次升级都各种蛋疼,前端技术这些年越来越牛逼了啊,每天不是折腾轮子就是被轮子折腾。。。 废话少说,赶紧把软文发了,不然。。。 项目地址: https://github.com/weui/weui-wxss 以下内容 copy 自项目的 README //懒癌患者。。。 概述 WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。 预览 用微信web开发者工具打开dist目录(请注意,是dist目录,不是整个项目) 使用 组件的wxml结构请看dist/

weui

WeUI 1.0发布

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。 经过半年的打磨,WeUI 1.0 正式发布,主要是新增了一些常用组件,并使用 BEM 命名,为接下来的微信小程序开发做好准备。 主要features 【增强】 采用BEM命名规范 【增强】 新增Flex布局 【增强】 新增Gallery 【增强】 新增Preview 【增强】 新增Agreement 【增强】 新增Footer 【增强】 新增Dialog和Actionsheet的Android样式 【修复】 修正了部分组件的间距 【修复】 修复了已知问题 项目地址:https://github.com/weui/weui 预览地址:https://weui.io/

ios

iOS 10 明天发布,你怕了吗?

3个月前,我汇总了 iOS 10 中 Safari 的新特性,输出为《Safari 10 越来越像理想中的浏览器了》,嗯,Safari 10 对前端的支持确实令人欣慰。然而,还有一个非常重要的事情需要关注: iOS 10 要求 app 必须启用ATS ATS(App Transport Security)是苹果在 iOS 9/OS X 10.11 中开始引入的特性,旨在提高 app 的安全性,要求 app 的 HTTP 通信必须是加密的,而且还要求 HTTS 连接建立在 TLS 1.2 协议以上 (嗯,

Safari

iPhone Safari 下 input disabled 颜色

最近在项目中遇到需要修改 input 的 disabled 状态的颜色的情况,然而无论如何都不成功,折腾了好久。后来发现还是 User Agent 样式的问题。 iPhone Safari/webview input disabled 的默认样式: input:disabled{ opacity: 0.4 } 嗯,开发者工具只能看到这一条。 即便是 reset 为 opacity : 1 也无效。因为还有一条隐藏的样式 -webkit-text-fill-color ,于是有效的样式为 : input:disabled{ color:@disabledColor; opacity: 1; -webkit-text-fill-color: @disabledColor; }

Ghost theme swiftnote 发布

最近开始学 swift ,就想要把遇到的问题给记下来,以备以后查阅,毕竟年纪大了,脑袋瓜不好使了。 后来就想不如索性搞个博客吧,虽然现在博客已经不流行了,自己记录和查找方便就行。关键是,Ghost 出了个客户端 Ghost Desktop,配合起来也是非常方便——虽然类似博客时代的各种客户端,但Ghost对我的最大诱惑是markdown呀。 预览: https://www.swiftnote.io Github:https://github.com/qianduan/swiftnote

Safari

Safari 10 越来越像理想中的浏览器了

Safari 10的技术规格出来了,嗯,简直激动人心。 这里简单『搬运』一下官方的文章 Web APIs IndexedDB 完整支持W3C推荐规范了 复制和剪切 可以用Javascript来复制和剪切内容了,方法: document.execCommand('copy') document.execCommand('cut') CSP 2.0 CSP (Content Security Policy 内容安全策略)支持 2.0 标准了 Shadow DOM 终于支持了呀,Chrome在几年前就支持了,这样的话,iOS上也可以放心搞 web components 了 ES 6 嗯,Safari 支持 ECMAScript 2015 标准,也就是

居中

object-fit: 炒鸡方便的图片居中方法

今天在项目中遇到图片居中的问题,嗯,之前也有写过解决这个问题的文章,有n种方法。不过今天要说一个新的方案:object-fit ,嗯,这个才是真的方便的方案啊。 先看预览: 查看详细demo object-fit 只能用于『可替换元素』(replaced element) 。所谓可替换元素,是指元素的内容和表现不是由CSS控制的,独立渲染的外部元素,比如: img、 object、 video 和 表单元素,如textarea、 input,audio 和 canvas在一些特殊情况下,也可以作为可替换元素。 在使用 object-fit 时,一定要设定元素的size,也就是 width 和 height 直入正题,object-fit 有五个可选值,分别是: fill 默认值。填充,可替换元素填满整个内容区域,可能会改变长宽比。 contain 包含,保持长宽比,

user-select

user-select : 保护版权内容的简单方案

有的适合我们需要保护我们页面的内容,为了版权或者安全等原因,这个适合我们可以使用 user-select 这个CSS属性,简单易用。 嗯,这个属性不麻烦,而且也不是 CSS 3 / CSS 4 的新属性,这里简单归纳一下: .control-select { user-select: none; /* 禁止选择 */ user-select: auto; /* 浏览器来决定是否允许选择 */ user-select: all; /* 可以选择任何内容 */ user-select: text; /* 只能选择文本 */ user-select: contain; /* 选择绑定的元素以内的内容 */ } 不过,这个属性还并没有被各浏览器以标准的行为来实现,所以使用的适合还是要加上各种前缀: .no-select { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; } 注意: IE 9 才开始支持,IE 8 及更早期的版本不支持 Javascript方案 当然也可以用

Chrome

Chrome 50发布,有哪些技术更新需要关注?

Chrome 50 版本已经发布多日了,不过它带来的很多新特性值得关注,而且有些也是振奋人心的。让我们来一起看一下: ECMAScript/JavaScript: RegExp Unicode 标记 ES6 在正则表达式中使用 u 标记来实现对 Unicode 更友好的功能和行为,比如,可以用 emoji 符号之类的。 // Match any symbol from U+1F4A9 PILE OF POO to U+1F4AB DIZZY SYMBOL. const regex = /[💩-💫]/u; // Or, `/[\u{1F4A9}-\u{1F4AB}]/u`. console.log( regex.test(