2018年07月26日 by 张 鑫旭 阅读 28990 次, 今日 22 次

中国的互联网对隐私那真是一点都不上心,前有“李彦宏称中国用户愿用隐私换便利”,后有“美团点评会显示你的好友在哪儿里点过餐,住过什么酒店”。其实浏览器本身提供了API可以让用户保护自己隐私不被跟踪,但是鲜有人知道,就算有知道的,也不会在实际项目中用,因为大环境对隐私都不重视,价值有限。
不过,从近些年诸多事件网民的言论来看,隐私这件事情已经越来越关注,一定会在哪天摆在台面上成为很重要的议题进行发酵的!因此,如果网站能在隐私这件事情上做得能让用户明显感觉到尊重,则这个网站的影响力,公司的口碑说不定会爆炸式增长。那作为前端的我们,可以在这件事情做些什么呢?
阅读全文…
标签: API, doNotTrack, Firefox, navigator, 用户体验, 隐私
发布在 JS API | 9 条评论 »
2018年07月25日 by 张 鑫旭 阅读 66534 次, 今日 22 次

woff字体在2012年12月被World Wide Web Consortium (W3C)推荐使用,IE9+浏览器支持。woff2字体最早在在2013年7月Chrome Canary版本上可以使用,发展到现在,几乎已经成为自定义图标字体使用的标配。
本文就将介绍关于WOFF2诸多基础知识,包括优点特性,如果TTF字体转WOFF2字体,如何在CSS中使用,mime type设置等,有截图有必要的源代码展示。希望本文内容能够对您的学习有所帮助。
阅读全文…
标签: base64, font, font-face, mime, woff, woff2
发布在 CSS相关 | 6 条评论 »
2018年07月24日 by 张 鑫旭 阅读 58606 次, 今日 29 次
在JS中,字符串补全是常用操作,以前我们的做法是先检测字符串长度够不够,不够,自己再拼接字符串以到达我们需要的字符串长度。到了ES6,浏览器天然支持字符串长度补全方法,这个方法就是padStart()
和padEnd()
。乍一看好像很简单,但是,仔细一深入,发现意想不到的细节还挺多的,要不,你进来瞅一瞅?
阅读全文…
标签: ES6, padEnd, padStart, polyfill, repeat, String
发布在 JS API | 17 条评论 »
2018年07月23日 by 张 鑫旭 阅读 49484 次, 今日 20 次
我们应该都知道,width
的默认值是'auto'
,'auto'
由于是默认值,出镜率不高,但是,却是个深藏不露的家伙,包含了至少4种不同的宽度表现,而且每一种表现……
阅读全文…
标签: fill-available, fit-content, margin:auto, max-content, min-content, width, width:auto
发布在 CSS相关 | 9 条评论 »
2018年07月22日 by 张 鑫旭 阅读 32041 次, 今日 24 次

在CSS3中,我们要想实现从A颜色到B颜色的过渡效果,是相当容易的,只要指定起止颜色,配合transition
过渡或者animation
动画都可以时间我们想要的效果。
但是,在<canvas>
中却没有这么简单,因为<canvas>
本质上是一个静态画布,要想实现颜色变化,需要JS去不断绘制,实现起来要比CSS实现麻烦很多。再加上颜色值本身就不一定是纯粹的数值,更增加了我们实现的难度。
本文就将通过多个案例,逐步深入,介绍一些在Canvas中的颜色处理技巧,有些技巧说不定会让你大开眼界。
阅读全文…
标签: animation, getComputedStyle, hsla, RGB, rgba, 动画, 颜色
发布在 Canvas相关 | 3 条评论 »
2018年07月14日 by 张 鑫旭 阅读 35586 次, 今日 25 次
夏日炎炎,今天宅在家里刷微博的时候,刷到了个关于信息流广告的视频,说的是某产品信息流在阅读时候,后面会腾空出现广告,就像广告一直藏在你信息流的背后一样,随着你滑动,广告会慢慢看不到。这个广告效果在web中该如何实现呢?
我就把几个idea都试验了下,发现都可以实现类似的效果,一起来看看吧……
阅读全文…
标签: background-attachment, fixed, fixed定位, visibility, z-index
发布在 CSS相关 | 8 条评论 »
2018年07月14日 by 张 鑫旭 阅读 61092 次, 今日 22 次
B站,或者腾讯视频等主流视频网站视频现在都支持倍速播放功能。这个功能对于当下快节奏的生活而言,是很有用的,说夸张点是延长了我们的生命,哈哈哈。
对于一个靠技术吃饭人,总免不了关注点在技术实现上,究竟是如何实现的呢?且看~
阅读全文…
标签: HTML5, playbackRate, video, 倍速, 视频, 速率
发布在 HTML相关 | 16 条评论 »
2018年07月14日 by 张 鑫旭 阅读 40085 次, 今日 25 次
之前自己发了个安利LuLu UI组件的微博,其中有位同行对于弹框组件提了这么一个问题:大佬,这种info类型的,为什么还要带个x?明明有确定按钮,似乎这个叉叉按钮去掉也没什么事,是不是很多人有类似的疑问?我很早之前就有过这样的想法,而且还付诸实践,直接把几个提示框右上角关闭按钮去掉,好干净好清爽,而且功能也没什么问题,还洋洋得意。后来,不断学习和积累,才发现当初的我对交互设计和用户体验的认知还很浅薄。
阅读全文…
标签: focus, tabindex, 交互, 可访问性, 弹框, 按钮, 无障碍网页应用, 键盘
发布在 Web综合 | 14 条评论 »
2018年07月8日 by 张 鑫旭 阅读 33936 次, 今日 23 次
原本以为canvas元素尺寸和img元素一样,结果深入一研究发现,还是有不少差异的,有兴趣可以进来看看,说不定可以学到点东西。
阅读全文…
标签: canvas, height, px, width
发布在 Canvas相关 | 10 条评论 »
2018年07月5日 by 张 鑫旭 阅读 39970 次, 今日 21 次
Chrome以及Safari等浏览器下,有时候event.preventDefault()
回报”Unable to preventDefault inside passive event listener due to target being treated as passive”的错误,有没有什么办法解决呢?本文就将提供几个解决之道,顺便介绍一些你可能不知道的CSS属性或者JS事件参数。
阅读全文…
标签: fastclick, iOS, passive, Safari, touch-action, zoom, 单击事件
发布在 Mobile相关 | 15 条评论 »