-
Whats the Closest Google Font? 找到最好的 Google Web 字体许多设计师在设计网页的时候并不在意什么是网页安全字体(Web Safe Fonts)，美观了页面，却苦恼了开发者。好在 Google Web Fonts 为开发者提供了上百款的字体，但有时候选择太多也是一件麻烦事…… 你知道 Google Web Fonts 中最接近 Century Gothic 的字体是哪款吗？2021-07-07 -
完美防止垃圾邮件的6种方式 - 让Spam爬虫空手而归当在一个网站上显示e-mail地址的时候你肯定会混淆它以防止收到spammers的攻击。但是哪种混淆方法是最好的呢？ 用图片代替？用#、[at]替换@？不，这不再是个好办法。2021-07-06 -
常用 JavaScript 库 CDN 加速服务作为开发者，你一定对 Google CDN 不陌生，微软也有 Microsoft Ajax CDN，他们都提供了常用 JavaScript 库的 CDN 加速服务。国内的七牛、又拍云、百度、360 等也纷纷上线了各自的 CDN 公共库服务。 此外，还有 jsDelivr 和 cdnjs 这 2 家国外的服务商，托管2019-07-22 -
JavaScript and CSS Code Beautifier - 代码格式化高亮扩展一款 JavaScript 代码格式化、解密、反混淆和 CSS 代码高亮扩展。 当你访问 CSS、JavaScript 或 JSON 文件时，自动格式化并高亮代码。 功能 格式化 CSS、JavaScript、JSON 代码 JavaScript 代码解密、反混淆 30 多种代码高亮主题 丰富的自定义选项 截图2018-02-04 -
【译】使用 Intersection Observer 实现图片延迟加载原文：Lazy loading images using Intersection Observer 译者：小影 如果你还没有机会看过，Paul Lewis 发布了一个精彩的视频系列，演示了如何构建一个媒体播放器以及渐进式 Web 应用（Progressive Web App）的一些重要功能。在 YouTube2017-08-18 -
使用 Web Audio API 播放摩斯密码在 CSS-Tricks 上看到一篇介绍 Web Audio API 的文章，学以致用，为工具箱中的摩斯密码转换器加上了在线播放功能。 从 AudioContext 开始 Web Audio API 主要通过 AudioContext 来处理音频，就好像 RenderingContext 之于 Canvas API。2017-03-26 -
【译】如何创造带方向感应的纯 CSS 悬停效果原文：How to Create Direction-Aware CSS-Only Hover Effects 译者：小影 概述 几个关于带方向感应的纯 CSS 悬停效果教程。 要求 这些教程面向有基础 HTML 知识和熟练 CSS/SASS 高级用法的人。 声明 这些效果在旧的浏览器中无效 - 你需要一个可以渲染2017-02-01 -
Kraken.io - 最好用的在线图片压缩工具Kraken.io 是一个在线图片优化和压缩服务，在保持图像原始质量的同时尽可能的缩减图像大小，支持 JPEG、PNG、GIF 动画和 SVG 格式。 Kraken.io 提供了三种优化模式：LOSSY（有损）、LOSSLESS（无损）和 EXPERT（专家）模式。 我一般用有损模式压 PNG，无损模式压 JPG。2016-11-19 -
Polyfill.io - 自动化的 JavaScript Polyfill 服务Polyfill 可以为旧浏览器提供和标准 API 一样的功能。比如你想要 IE 浏览器实现 Promise 和 fetch 功能，你需要手动引入 es6-promise、whatwg-fetch。而通过 Polyfill.io，你只需要引入一个 JS 文件。 Polyfill.io 通过分析请求头信息中的2016-10-12 -
CSS3介绍丢个链接闪人=。=http://c7sky.com/works/css3slides/2016-03-29 -
使用 SVG 实现手写签名动画效果最近需要一个手写签名动画效果，最后用 SVG 实现咯。 See the Pen SVG Handwriting effect by Cople (@cople) on CodePen. stroke-dasharray path 的 stroke-dasharray2016-02-01 -
Fontmin - 中文 WebFont 子集化生成工具Fontmin 是由百度 FEF 推出的一个字体子集化方案。借助 Fontmin，开发者可以轻松实现中文字体的子集化，并利用 @font-face 将自定义字体呈现到网页中，提升网页文字体验。 See the Pen Fontmin Example by Firede (@firede) on CodePen.2015-05-04 -
通过 Chrome Workspace 调试本地项目通过 Workspace，你可以把本地服务器的资源映射为硬盘上的文件，实现调试 JS 和 CSS 的同时自动保存文件，比如 Elements 面板中的样式变更会自动保存到文件中。 以调试本地服务器上的 Minty 主题为例： 打开 DevTools 开发者工具中的 Sources 面板，在面板左侧右键选择「Add2015-02-12 -
纯 CSS3 实现 Flyme 风格的圆形进度条悄悄地，GIF 格式的进度条已经越来越少，CSS 进度条如雨后春笋般涌现。今天要介绍的这个 CSS3 进度条，效果和 Flyme OS 4 上的加载动画一样。 首先，来看下最终的效果： See the Pen Flyme OS4 Style Loading Spinner by Cople (@cople) on2015-01-23 -
【翻译】创建 HTML5 表单验证气泡的替代方案在过去几年里，我发表了关于 HTML5 表单验证的文章和演讲，其中最常见的问题就是关于气泡。这里的气泡是指浏览器显示验证错误信息的 UI 空间。下面分别是 Chrome、Firefox 和 IE 的实现：2014-10-13 -
Google 移动网站设计原则白皮书：25 个应该遵循的最佳实践消费者越来越依赖于移动网络，这使得一个高效的移动网站比以往任何时候都更加重要。但是如何打造一个优秀的移动网站？为了回答这个问题，Google 与 AnswerLab 合作研究用户群体如何与不同的移动网站互动。2014-07-28 -
利用Google Feed API即时展示其它博客的Feed去年我曾经介绍过在一个博客即时调用其它博客的RSS Feed的方法-利用Google Reader。这种方法的好处是你不需要知道任何技术细节，你只需要添加订阅到GR，制作一个Tag，然后设置成公开，最后调用。API可以很好地解决这个问题。2014-03-22 -
Canonical 标签 - 规范化WordPress的URL来提升页面权重Google 谷歌、微软 Live Search 和 Yahoo! 三大搜索引擎在今年2月联合发布了一个新的链接标签"Canonical"，该标签的作用是为了让网站管理员标记自己网站上的重复内容或相似内容，以便帮助搜索引擎更好地识别出哪个URL的内容才是你认为最重要的，从而达到规范化网址的目的。2014-03-22
-
新手学习制作网页时应该注意的事项一、样式与结构分离 尽量使用的形式导入外部样式表，而不是直接将样式写在标签上或写在head里。 二、语义化的html结构 使用正确的标签 例如你想表示标题，就应该使用heading(h1~h6)标签而不是span标签。 正确命名class和id 三、不要使用Photoshop等软件的导出为html+图像功能2014-03-22
-
IcoMoon App - 分分钟打造你自己的 Web FontWeb Fonts 是伴随着 CSS3 的 @font-face 一起火起来的技术。使用 @font-face 你可以在网页上使用任何字体，而不需要考虑用户的电脑上有没有这个字体。如果你经常上一淘网，有没有发现它的网站 LOGO 就是用 Web Font 实现的？ 在这篇文章中，我将把小影志的 LOGO 变为 Web2014-03-22
