Skyph o bia

在网页上给用户找点刺激吧——Vibration API(振动 API)

Front-End HTML5 Vibration 振动

在给文章找封面图的时候总是会出现バイブ 的结果,搞得有点尴尬,明明我搜的是 vibration 呀...简而言之?通过 Vibration API 可以调用设备的振动硬件,并以此为用户带来物理反馈。长久以来 WEB 交互设计师通过视觉设计为用户带来形形色色的视觉反馈,而现如今的互联网产品却似乎早已不满足用琳琅满目的视觉盛宴来俘获用户的内心,它们还渴望用触觉给用户带来更为强烈且直接的触觉反馈。Vibration API 就诞生在这样的需求,以及带有振动马达的移动设备的普及背景下。笼统地介绍Vibration API 通过 函数调用。接收一个非 0 的 类型的参数来表示硬件振动的毫秒数;或者

阅读全文

前端如何检测系统黑暗模式(dark mode)

Front-End CSS JavaScript

白天不知夜的黑iOS 13 发布至今,除了带来无以计数的 bug 以外,还带来了在 Andorid Q 中就先一步实现的暗黑模式(dark mode)。基于 OLED 屏幕的特性,暗黑模式相对来说更为省电,良好的设计也能在黑夜中为用户提供更好的视觉体验。因此,在过去的一段时间里,各大 app 纷纷推出了针对暗黑模式的更新。从此暗黑模式的时代来临了。那么问题来了,前端工程师如何为 web 应用实现暗黑模式呢?在没有白天和暗黑模式都没有的黑夜里,我们通常可以通过 JavaScript 判断本地时间或者获取服务器时间来判断是否改为当前 web 应用添加暗黑模式的层叠样式表。这样做直观且粗暴,简单的是

阅读全文

打开新窗口的正确姿势

Front-End JavaScript HTML WEB安全

说起打开新窗口(标签页),大家最常用的大概是和。然而产品经理总有一万个理由说服你在下实现这个功能。于是在经历成百上千次的重复劳作后,你会发现“打开新窗口”这一件小事,似乎并没有说起来的那么轻巧。被浏览器阻止的新窗口页面这个情况比较常见,大多数现代浏览器发现一个打开新窗口的操作不一定是由用户主动发起的时候,浏览器就有可能会阻止这个打开新窗口的操作。以 Chrome 为例,对一个链接添加点击事件,并且在事件中用实现直接打开某一个链接是完全 OK 的,因为 Chrome 认可这是用户主动点击后造成的结果;如果同样在这个点击事件中,我们通过 AJAX 从服务器获取到一个链接,然后用在新窗口中打开这个链

阅读全文

无责任分享一些Vue的奇技淫巧

Front-End JavaScript Vue

以下任何内容请在家长陪同下观看,不要轻易在生产环境中尝试。一、通过魔法属性 获取 vue 实例Vue 会为每一个实例挂载的 DOM 对象添加一个 属性,这个属性对应的值就是这个实例本身。利用这个属性,我们不仅可以在生产环境进行 debug,甚至可以实现在子组件直接更改父组件状态等黑魔法。至于这个“黑魔法”属性是否可以安全使用,从这个 中尤大的回答来看,由于 vue 的 devtool 依赖于这个属性,未来应该也不会有变。二、强制刷新 的官方文档中关于动态路由匹配的说明中有这么一段话: 出于组件被复用的这份好意,我们不得不通过 watch 对象的变化来代替原本在生命周期钩子中做的一些

阅读全文

CSS学习笔记(渐变色文本)

Front-End CSS SVG HTML5

曾经在《利用 Canvas 实现网页文字颜色渐变》一文中提到过用 Canvas 解决非 webkit / blink 内核浏览器展示渐变色文字的方案。用Canvas处理一些CSS难以解决的问题看似酷炫,实则有若干痛点(可能还不止这几点): 因此在这里介绍下上次文章中提到的另一种网页文字颜色渐变的实现方案—— SVG,它可以在一定程度上解决 Canvas 的这些痛点(当然也会引入一些新的问题,下面会提到)。下面祭出我们的利器,SVG Texts & Gradients。SVG 文本通过 ,我们可以在 SVG 中写入文本。相较 HTML 的文本而言,它既拥有 DOM 上的可操作性,又可以通过

阅读全文

利用Canvas实现网页文字颜色渐变

Front-End HTML5 Canvas

过去我们做前端页面时碰到渐变色字体的时候都是用图片展示的,准备好现成的图片往页面上一贴就完事儿了。然而前一阵子做 的时候却碰到了需要动态显示的渐变色字体。既然是动态显示的,也就是说没有办法再像过去那样开个 PS 为字体盖上一层渐变色的特效再放到页面里去展示了。好在 Google 了一番之后发现有一个的属性,通过和配合可以将渐变的背景色应用到文字上去,就像这样:问题解决了吗?其实并没有。只是 webkit 的私有属性,且未列入标准,其兼容性可见一斑。那么我们就真的没有一种可兼容的解决方案了吗?答案当然是否定的。我们可以利用 Canvas 或 SVG 技术实现网页文字颜色的渐变,这里先介绍下前者

阅读全文
  • 1