chrome插件开发之UI界面交互

在chrome插件开发中,除了前一篇所述的基本特性外,还有一些与浏览器相关的功能,比如右键菜单(contextMenus)、以及桌面通知(notifications)等。

接下来,我们就这两项功能做个介绍:

右键菜单

什么是chrome插件里的右键菜单,来看下我开发的chrome插件-获取图片属性的截图:

右键菜单

chrome插件开发允许开发者在右键菜单里添加插件的功能项(可以多项),但需要满足以下 继续阅读

发表在 前端技术 | 标签为 | 留下评论

chrome插件开发之manifest.json

一般而言,一个chrome插件一般包含以下目录的文件。

├── manifest.json
├── icon.png
├── popup.html
├── options.html
├── js
│ ├── background.js
│ ├── app.js

对于前端而言,除了manifest.json,以上的其他文件大家都比较熟悉。作为类似chrome插件开发的配置文件,manifest.json的结构大致是 继续阅读

发表在 前端技术 | 标签为 | 留下评论

另一种前端自动化工具-gulp

之前说到过grunt以及FIS,在项目里也用到过!因为最近组里又推荐用gulp,于是在这记录一番:

假设我们项目的目录为:

├── src
│ ├── index.html
│ ├── images
│ ├── script
│ └── css

所谓的自动化就是将src里的文件,通过压缩、合并以及各种优化处理,然后生成一个可以发布到生产环境(假设生成目录为dest)。

├── src
│ ├── index.html
│ ├── images
│ ├── script
│ └── css
├── dest

在开始之前,我们在项目根目录新建package.json,通过 npm init 继续阅读

发表在 前端技术 | 留下评论

git简要操作

若要说到项目托管,不得不提github。虽然经常在上面查阅各种项目,但不知为何,之前总对在github上建项目不屑一顾,可能是不想在自己的博客上分心。

随着自己工作经验的增加,觉得写博客也比较费劲了,语言的组织和描述,图文形式的安排,如果一两个月没有一篇博文,自己便会有一份愧疚感,同时也发现之前写的东西比较分散,其中的代码也不会想着去整理和优化。以上这些当然没有直接在github直接push代码爽快,于是今年的一月在github建立了账号,但是直到十月份才在上面发布第一个项目!以下就说说它的一些 继续阅读

发表在 前端技术 | 留下评论

【翻译】WebP图片的使用指导:一个案例研究

原文地址:Guide To Using WebP Images Today: A Case Study

俗话说一图胜千言,但在网上,一图却可以抵过上千字节甚至更多。HTTP 文档表明图片平均占整个网页的64%,基于此,图片的压缩是非常关键的,尤其当用户因为你的页面加载过慢时而关闭它。

图片压缩的主要问题是保证图片大小的情况下而不牺牲图片质量,相对于JPEG, PNG 和 GIF这些标准格式,在过去通过尝试创建新类型文件去压缩图片并不是太成功。

开始 WebP

WebP 是在2010创建并且现在由Google开发的一种图片格式,它提供了图片的无损和有损压缩。一些大的公司都有使用WebP,显著地有Google, Facebook 和 eBay

在我们公司,一直尝试使用技术提升网站性能。因此,我们做了一些 A/B 测试去弄明白WebP对图片的影响,以及它如何才能更好的应用在我们客户的项目中。

“较小的文件尺寸”是我们开始使用 WebP 的一个主要原因,根据 Google 介绍 继续阅读

发表在 前端技术 | 标签为 | 留下评论