DeveWork-腾讯云开发者社区

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

DeveWork

https://devework.com

专栏成员

265

文章

467906

阅读量

55

订阅数

postcss-lazysprite: 一种生成CSS 雪碧图的懒惰姿势

sass 单片机 http postcss css

postcss-lazysprite 是一个基于PostCSS 开发的用于生成雪碧图图片及其CSS 的插件，经过半年持续迭代，现已稳定用在旗下两款产品的Web 业务中。其与市面上的雪碧图插件不同在于生成雪碧图的“懒惰”姿势。前言前端界，伴随着雪碧图这个概念出现，自动化产生雪碧图这类工具就层出不穷。无论是早期GUI 工具，还是现在流行的配合Gulp/Grunt/Webpack 这类构建工具而产生的雪碧图插件。总之是百花齐放，长江后浪推前浪，后浪死在沙滩上。根据输入方式的不同，现在市面上基于Node.js

2018-01-22

1.7K0

从0到1：PostCSS 插件开发最佳实践

单片机 php http css postcss

前阵子为了满足工作上的一个需求开发了一个PostCSS 插件，后来也将这个插件提交给PostCSS 官方并得到认可。在这篇文章中笔者将记录开发过程中遇到的一些问题，且斗胆将之称为“最佳实践”，希望对有兴趣尝试PostCSS 插件开发的您有所帮助。简介篇开发成果展示首先先上成果：https://github.com/Jeff2Ma/postcss-lazyimagecss （欢迎给个star 哦~） postcss-lazyimagecss 插件实现的功能是为 CSS 中的background-imag

2018-01-22

1.1K0

国内环境下前端网页开发的几个“中国特色”代码

起这个标题多少有诚惶诚恐的感觉，作为一个有近3年经验的小站长+前端开发菜鸟，多多少少算有点经历。下面就说说个人了解的几个因为国内环境而做出的妥协——所谓之“中国特色”代码。毫无疑问，本文是水文。代码一：<meta name="renderer" content="webkit|ie-comp|ie-stand"> 如果说小标题的meta 标签你不懂，那么下面几个你该有点印象吧： <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >

2018-01-22

8120

移动Web 开发中的 Off Canvas 导航

http css canvas jquery android

Jeff 最近发布的DeveMobile 与EaseMobile 主题在导航栏上采用的是在一些native app 中常见的Off Canvas 导航。而关于 Off Canvas 导航，这里提供结合开发主题过程及网络上的资料，从个人认知的角度介绍下 Off Canvas 导航。 Off Canvas 简介 Off Canvas 导航相比也不陌生，在一些安卓应用（如谷歌的一些官方应用、易信、WordPress 安卓版）上常常能到——看到当你点击应用中的一个按钮时，会从左边或者右边侧拉出一个菜单。移动设备中空

2018-01-19

1.7K0

EaseMobile 主题导航菜单设置小图标的方法（图文+视频教程）

http svg canvas

EaseMobile 主题的左侧的Off Canvas 侧边栏导航中是可以为每个菜单项设置小图标的。本文通过图文+视频教程为购买EaseMobile 主题的客户告知导航菜单设置小图标的方法。当然，如果

2018-01-19

2.1K0

Web 前端性能优化相关内容解析

css javascript 缓存 http html

Web 前端性能优化相关内容，来源于《Google官方网页载入速度检测工具PageSpeed Insights 使用教程》一文中PageSpeed Insights 的相关说明。大家可以对照着去优化自己的网站或者相关项目。本文由Jeff 整理。 0.提高服务器的响应速度砸钱的东西，但却最根本；搞好这一项，甚比下面任何一项。 1.优化样式表和脚本的排列顺序正确地排列外部样式表与外部和内嵌脚本的顺序，可增加下载时同时加载的数据量，并提高浏览器显示网页的速度。将样式表放在顶部，将脚本放在底部 2.使用浏览器

2018-01-19

2.1K0

Google Chrome 浏览器开发者工具使用教程

css html html5 http

对于Chrome 浏览器，除了占用内存的缺点，其他都很不错。对于Chrome 浏览器的开发者工具，Jeff 除了Elements、Resources、Network、Console这四个标签页用得比较多外，其他的都甚少理解。今天偶然看到一篇Chrome 浏览器开发者工具的使用教程，感觉不错，顺便转载在这里，感谢原作者的辛苦劳动。作为一个Web开发人员，除了上面的原因以外，与我们开发相关的，就是Chrome的开发者工具。而本文，就是要详细说说Chrome的开发者工具，说说我为什么认为它比Firebug要好用

2018-01-19

4.8K0

免插件仅代码实现IE6浏览器升级提示（两例样式）

http javascript

对许多前端工程师来说，如果他们足够在意的话，IE6是经常折磨他们的痛。在当前环境下，昔日的浏览器王者IE6正日渐黄昏，微软也将在2014年彻底不支持IE6，还上线了个一个页面IE6 Countdown，鼓励全球用户与IE6彻底说拜拜。许多WordPress主题已经默认不支持IE6了（比如我本站目前使用的主题），对于IE6访客，我们可以友善地提醒他们升级浏览器（毕竟IE6访客还是挺多的，不信看看下文数据）。下面就介绍免插件仅代码实现IE6浏览器升级提示的方法（代码）。统计数据：Jeff的阳台相关访客

2018-01-19

8100

设置你的Gravatar头像的方法

Gravatar是Globally Recognized Avatar的缩写,是gravatar推出的一项服务，意为“全球公用的头像”。如果在Gravatar的服务器上放置了你自己的头像，那么在任何支持 Gravatar 的 blog（如 Word Press ）或者留言本上留言时，只要提供你与这个头像关联的email地址，就能够显示出你的Gravatar头像来。 Gravatar头像注册地址：中文页面http://cn.gravatar.com/ 英文页面http://en.gravatar.com/

2018-01-19

2.5K0

没有更多了

社区活动

【纪录片】中国数据库前世今生

穿越半个世纪，探寻中国数据库50年的发展历程

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·千货材料·成员作品最新动态