前端开发

前端开发

一个微型 Javascript 开源项目如何在 4 天到 1000 star ?

前端开发atool 发表了文章 • 0 个评论 • 1062 次浏览 • 2016-09-13 11:25 • 来自相关话题

这里要提到的是我之前从项目抽离出来的微型 Javascript 项目 timeago.js,为什么是微型,因为他还不到 2kb,这个也是做这个项目的原因之一。
 
已有的类似项目不是一般都依赖 jQuery 和 moment.js,实际上仅仅用到其中的选择器、一个日期方法(fromNow),为了这么一点方法依赖,而引入则好么大的库,个人感觉不是很划算。
 
https://github.com/hustcc/timeago.js 项目大概开始于今年6月底左右,抽离出来,npm publish之后,在自己的多个项目中使用良好,就没有再多做更新了,后来因为另外一个项目中的 PR 引用到 timeago.js 项目,所以决定好好做一做,并推广一下,并陆续增加修改如下东西:
 
1. 增加实时更新方法 render,可以选择一些节点实时更新和计算;
2. 完善Testcase,使用travis CI;
3. 申请域名 timeago.org,后来因为这个域名和其他项目产生了一些不愉快,不过无所谓,我很大条;
4. 更新优化本地化文件的格式;
5. 新开一个 issue 专门记录 locale 的 pr;
 
然后将域名 timeago.org 发到 Hack New上,然后就是域名被老外转到reddit,并且关于创造更小的轮子,依赖jQuery这些问题引起了一些争论,再然后就过了一天,就上了 Github 的 Trending 总榜,目前已经在榜上 4 天了。就在这次天内,star 数量瞬间达到 1000 +,自己还是很激动的。
 
说说自己的感想吧?
 
1. 如果真的想好好做一个项目,还是申请一个合适的域名吧,这样可能会给人更加专业,更加重视的感觉;
2. 老外真的特别喜欢发 pr 和 issue,可能是国内程序员的时间被商人完全榨干了;
3. 保证项目有完善的测试,travis CI集成起来其实非常简单;
4. 项目特色,比如timeago.js特色就是tiny(1.75 kb完成其他项目依赖 jQ 的事情),并且在多个 issue 中要求 pr 一定要保证代码的简洁;
5. PR 规范,比如 timeago.js 中的主要 pr 来源于本地化语言的翻译,所以我会专门开一个issue来展现需要 pr 哪些语言,然后大家一目了然,可以增加大家 pr 的积极性;
 
做好这些之后,就可以到一些技术论坛发发文章,博客了,具体发哪些位置呢?
 
Hack New、开发者头条、V2ex、OSChina、segmentfault、极客头条等等。我对国外技术站点不是很了解,仅仅发了 Hack New。
  查看全部
这里要提到的是我之前从项目抽离出来的微型 Javascript 项目 timeago.js,为什么是微型,因为他还不到 2kb,这个也是做这个项目的原因之一。
 
已有的类似项目不是一般都依赖 jQuery 和 moment.js,实际上仅仅用到其中的选择器、一个日期方法(fromNow),为了这么一点方法依赖,而引入则好么大的库,个人感觉不是很划算。
 
https://github.com/hustcc/timeago.js 项目大概开始于今年6月底左右,抽离出来,npm publish之后,在自己的多个项目中使用良好,就没有再多做更新了,后来因为另外一个项目中的 PR 引用到 timeago.js 项目,所以决定好好做一做,并推广一下,并陆续增加修改如下东西:
 
1. 增加实时更新方法 render,可以选择一些节点实时更新和计算;
2. 完善Testcase,使用travis CI;
3. 申请域名 timeago.org,后来因为这个域名和其他项目产生了一些不愉快,不过无所谓,我很大条;
4. 更新优化本地化文件的格式;
5. 新开一个 issue 专门记录 locale 的 pr;
 
然后将域名 timeago.org 发到 Hack New上,然后就是域名被老外转到reddit,并且关于创造更小的轮子,依赖jQuery这些问题引起了一些争论,再然后就过了一天,就上了 Github 的 Trending 总榜,目前已经在榜上 4 天了。就在这次天内,star 数量瞬间达到 1000 +,自己还是很激动的。
 
说说自己的感想吧?
 
1. 如果真的想好好做一个项目,还是申请一个合适的域名吧,这样可能会给人更加专业,更加重视的感觉;
2. 老外真的特别喜欢发 pr 和 issue,可能是国内程序员的时间被商人完全榨干了;
3. 保证项目有完善的测试,travis CI集成起来其实非常简单;
4. 项目特色,比如timeago.js特色就是tiny(1.75 kb完成其他项目依赖 jQ 的事情),并且在多个 issue 中要求 pr 一定要保证代码的简洁;
5. PR 规范,比如 timeago.js 中的主要 pr 来源于本地化语言的翻译,所以我会专门开一个issue来展现需要 pr 哪些语言,然后大家一目了然,可以增加大家 pr 的积极性;
 
做好这些之后,就可以到一些技术论坛发发文章,博客了,具体发哪些位置呢?
 
Hack New、开发者头条、V2ex、OSChina、segmentfault、极客头条等等。我对国外技术站点不是很了解,仅仅发了 Hack New。
 

百度Echart 3.0的react封装

前端开发atool 发表了文章 • 0 个评论 • 1753 次浏览 • 2016-06-12 18:59 • 来自相关话题

github项目地址:https://github.com/hustcc/echarts-for-react
DEMO地址:http://git.hust.cc/echarts-for-react/#/?_k=l9a9ca
 
使用非常简单
一、安装npm install echarts-for-react
二、引入使用import React from 'react';
import ReactEcharts from 'echarts-for-react';

<ReactEcharts
option={this.getOtion()}
style={{height: '300px'}}
theme={"theme_name"}
onChartReady={this.onChartReadyCallback}
onEvents={EventsDict} />目前ReactEcharts有以下属性:
option、style、theme、className、onChartReady、showLoading、onEvents。大家可以去github上看readme文件。
 
另外API方法,只有一个getEchartsInstance()方法获取echarts的实例对象,然后就可以调用echarts的所有API方法了。





  查看全部
github项目地址:https://github.com/hustcc/echarts-for-react
DEMO地址:http://git.hust.cc/echarts-for-react/#/?_k=l9a9ca
 
使用非常简单
一、安装
npm install echarts-for-react

二、引入使用
import React from 'react';
import ReactEcharts from 'echarts-for-react';

<ReactEcharts
option={this.getOtion()}
style={{height: '300px'}}
theme={"theme_name"}
onChartReady={this.onChartReadyCallback}
onEvents={EventsDict} />
目前ReactEcharts有以下属性:
option、style、theme、className、onChartReady、showLoading、onEvents。大家可以去github上看readme文件。
 
另外API方法,只有一个getEchartsInstance()方法获取echarts的实例对象,然后就可以调用echarts的所有API方法了。

下载_(1).png

 

重写 file 控件样式

前端开发atool 发表了文章 • 0 个评论 • 525 次浏览 • 2016-04-25 09:32 • 来自相关话题

input[type="file"]{
-webkit-appearance: none;
text-align: left;
-webkit-rtl-ordering: left;
}
input[type="file"]::-webkit-file-upload-button{
-webkit-appearance: none;
float: right;
margin: 0 0 0 10px;
border: 1px solid #aaaaaa;
border-radius: 4px;
background-image: -webkit-gradient(linear, left bottom, left top, from(#d2d0d0), to(#f0f0f0));
background-image: -moz-linear-gradient(90deg, #d2d0d0 0%, #f0f0f0 100%);
} 查看全部
input[type="file"]{
-webkit-appearance: none;
text-align: left;
-webkit-rtl-ordering: left;
}
input[type="file"]::-webkit-file-upload-button{
-webkit-appearance: none;
float: right;
margin: 0 0 0 10px;
border: 1px solid #aaaaaa;
border-radius: 4px;
background-image: -webkit-gradient(linear, left bottom, left top, from(#d2d0d0), to(#f0f0f0));
background-image: -moz-linear-gradient(90deg, #d2d0d0 0%, #f0f0f0 100%);
}
1.png

css颤动效果

前端开发atool 发表了文章 • 0 个评论 • 485 次浏览 • 2016-04-25 09:30 • 来自相关话题

 .face:hover {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}

@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}

20%, 80% {
transform: translate3d(2px, 0, 0);
}

30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}

40%, 60% {
transform: translate3d(4px, 0, 0);
}
} 查看全部
 
.face:hover {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}

@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}

20%, 80% {
transform: translate3d(2px, 0, 0);
}

30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}

40%, 60% {
transform: translate3d(4px, 0, 0);
}
}

一个image placeholder客户端Javascript生成库

前端开发atool 发表了文章 • 0 个评论 • 708 次浏览 • 2016-04-22 16:48 • 来自相关话题

一、概述

placeholder,做过html都会知道,在input里面有一个属性是placeholder,这个属性是用到在input为空的时候,显示一个提示图片。
本项目地址为:https://github.com/hustcc/placeholder.js  




二、起因

个人在开发过程中,需要处理很多的APP logo,这些logo是从ipa和apk中dump出来的,有些可能加密无法完全解密。所以在logo打不开的时候,需要显示一个替代信息,方法有二:

1. 使用img的alt属性,当图片打不开的时候,显示alt文字;
2. 加载失败使用一个empty图片代替;

都有确定,方法1可能造成页面样式变化,因为img和text还是有差距的;方法2也有问题,所有失败的图片均使用相同的图片替代,辨识度低。

三、已有方案

这里就需要使用image的placeholder,最简答的方式,这种其实大家经常看到,比如网站的广告位预留,占位图片等等。但是要做到动态的图片,这就需要其他的一些手段了,方法有二:
1. 通过搭建一个web server,专门生成图片,然后通过传入一些参数来动态生成图片
这个比较多,也比较主流吧,例如:temp.im,placeholder.it等都是通过服务端生成,至于怎么生成,php使用gd,py使用pil等;
2. 通过浏览器客户端生成,github上有一个项目:https://github.com/imsky/holder 使用客户端生成,具体可以去github上参考。

四、本方案

本项目地址为:https://github.com/hustcc/placeholder.js   
演示网站:http://github.atool.org/placeholder.js.html   (代码使用上述imsky/holder的主页代码,修改placeholder生成方式)

为什么已经有holde项目,还要做一个placeholder.js的项目?二者做的都是客户端生成placeholder
1. holder的使用方式是参考server端生成placeholder的使用方式——使用url传递参数的方式,这种方式在浏览器端使用js并不是非常方便;
2. holder的Javascript库太大,压缩之后30kb,对于仅仅只是生成一个placeholder图片,而耗费30kb,并不划算;
3. server端生成图片比较耗费服务器资源,特别是一个页面生成图片比较多的时候,容易造成大量并发,而如果对图片来进行缓存,又会导致各种碎片文件。

本项目的特点:
1. 非常小:1kb都不到,后续更新尽量维持在1kb之类,也要有一个噱头;
2. 使用非常简单,几个简单易懂的配置项,两个api方法(一个获取base64,一个获取canvas);
3. 动态字体大小,在字体未设置的情况下,自动调整字体大小,方式文字overflow;
欢迎issue和PR。 查看全部
一、概述

placeholder,做过html都会知道,在input里面有一个属性是placeholder,这个属性是用到在input为空的时候,显示一个提示图片。
本项目地址为:https://github.com/hustcc/placeholder.js  
website.png

二、起因

个人在开发过程中,需要处理很多的APP logo,这些logo是从ipa和apk中dump出来的,有些可能加密无法完全解密。所以在logo打不开的时候,需要显示一个替代信息,方法有二:

1. 使用img的alt属性,当图片打不开的时候,显示alt文字;
2. 加载失败使用一个empty图片代替;

都有确定,方法1可能造成页面样式变化,因为img和text还是有差距的;方法2也有问题,所有失败的图片均使用相同的图片替代,辨识度低。

三、已有方案

这里就需要使用image的placeholder,最简答的方式,这种其实大家经常看到,比如网站的广告位预留,占位图片等等。但是要做到动态的图片,这就需要其他的一些手段了,方法有二:
1. 通过搭建一个web server,专门生成图片,然后通过传入一些参数来动态生成图片
这个比较多,也比较主流吧,例如:temp.im,placeholder.it等都是通过服务端生成,至于怎么生成,php使用gd,py使用pil等;
2. 通过浏览器客户端生成,github上有一个项目:https://github.com/imsky/holder 使用客户端生成,具体可以去github上参考。

四、本方案

本项目地址为:https://github.com/hustcc/placeholder.js   
演示网站:http://github.atool.org/placeholder.js.html   (代码使用上述imsky/holder的主页代码,修改placeholder生成方式)

为什么已经有holde项目,还要做一个placeholder.js的项目?二者做的都是客户端生成placeholder
1. holder的使用方式是参考server端生成placeholder的使用方式——使用url传递参数的方式,这种方式在浏览器端使用js并不是非常方便;
2. holder的Javascript库太大,压缩之后30kb,对于仅仅只是生成一个placeholder图片,而耗费30kb,并不划算;
3. server端生成图片比较耗费服务器资源,特别是一个页面生成图片比较多的时候,容易造成大量并发,而如果对图片来进行缓存,又会导致各种碎片文件。

本项目的特点:
1. 非常小:1kb都不到,后续更新尽量维持在1kb之类,也要有一个噱头;
2. 使用非常简单,几个简单易懂的配置项,两个api方法(一个获取base64,一个获取canvas);
3. 动态字体大小,在字体未设置的情况下,自动调整字体大小,方式文字overflow;
欢迎issue和PR。

一个微型 Javascript 开源项目如何在 4 天到 1000 star ?

前端开发atool 发表了文章 • 0 个评论 • 1062 次浏览 • 2016-09-13 11:25 • 来自相关话题

这里要提到的是我之前从项目抽离出来的微型 Javascript 项目 timeago.js,为什么是微型,因为他还不到 2kb,这个也是做这个项目的原因之一。
 
已有的类似项目不是一般都依赖 jQuery 和 moment.js,实际上仅仅用到其中的选择器、一个日期方法(fromNow),为了这么一点方法依赖,而引入则好么大的库,个人感觉不是很划算。
 
https://github.com/hustcc/timeago.js 项目大概开始于今年6月底左右,抽离出来,npm publish之后,在自己的多个项目中使用良好,就没有再多做更新了,后来因为另外一个项目中的 PR 引用到 timeago.js 项目,所以决定好好做一做,并推广一下,并陆续增加修改如下东西:
 
1. 增加实时更新方法 render,可以选择一些节点实时更新和计算;
2. 完善Testcase,使用travis CI;
3. 申请域名 timeago.org,后来因为这个域名和其他项目产生了一些不愉快,不过无所谓,我很大条;
4. 更新优化本地化文件的格式;
5. 新开一个 issue 专门记录 locale 的 pr;
 
然后将域名 timeago.org 发到 Hack New上,然后就是域名被老外转到reddit,并且关于创造更小的轮子,依赖jQuery这些问题引起了一些争论,再然后就过了一天,就上了 Github 的 Trending 总榜,目前已经在榜上 4 天了。就在这次天内,star 数量瞬间达到 1000 +,自己还是很激动的。
 
说说自己的感想吧?
 
1. 如果真的想好好做一个项目,还是申请一个合适的域名吧,这样可能会给人更加专业,更加重视的感觉;
2. 老外真的特别喜欢发 pr 和 issue,可能是国内程序员的时间被商人完全榨干了;
3. 保证项目有完善的测试,travis CI集成起来其实非常简单;
4. 项目特色,比如timeago.js特色就是tiny(1.75 kb完成其他项目依赖 jQ 的事情),并且在多个 issue 中要求 pr 一定要保证代码的简洁;
5. PR 规范,比如 timeago.js 中的主要 pr 来源于本地化语言的翻译,所以我会专门开一个issue来展现需要 pr 哪些语言,然后大家一目了然,可以增加大家 pr 的积极性;
 
做好这些之后,就可以到一些技术论坛发发文章,博客了,具体发哪些位置呢?
 
Hack New、开发者头条、V2ex、OSChina、segmentfault、极客头条等等。我对国外技术站点不是很了解,仅仅发了 Hack New。
  查看全部
这里要提到的是我之前从项目抽离出来的微型 Javascript 项目 timeago.js,为什么是微型,因为他还不到 2kb,这个也是做这个项目的原因之一。
 
已有的类似项目不是一般都依赖 jQuery 和 moment.js,实际上仅仅用到其中的选择器、一个日期方法(fromNow),为了这么一点方法依赖,而引入则好么大的库,个人感觉不是很划算。
 
https://github.com/hustcc/timeago.js 项目大概开始于今年6月底左右,抽离出来,npm publish之后,在自己的多个项目中使用良好,就没有再多做更新了,后来因为另外一个项目中的 PR 引用到 timeago.js 项目,所以决定好好做一做,并推广一下,并陆续增加修改如下东西:
 
1. 增加实时更新方法 render,可以选择一些节点实时更新和计算;
2. 完善Testcase,使用travis CI;
3. 申请域名 timeago.org,后来因为这个域名和其他项目产生了一些不愉快,不过无所谓,我很大条;
4. 更新优化本地化文件的格式;
5. 新开一个 issue 专门记录 locale 的 pr;
 
然后将域名 timeago.org 发到 Hack New上,然后就是域名被老外转到reddit,并且关于创造更小的轮子,依赖jQuery这些问题引起了一些争论,再然后就过了一天,就上了 Github 的 Trending 总榜,目前已经在榜上 4 天了。就在这次天内,star 数量瞬间达到 1000 +,自己还是很激动的。
 
说说自己的感想吧?
 
1. 如果真的想好好做一个项目,还是申请一个合适的域名吧,这样可能会给人更加专业,更加重视的感觉;
2. 老外真的特别喜欢发 pr 和 issue,可能是国内程序员的时间被商人完全榨干了;
3. 保证项目有完善的测试,travis CI集成起来其实非常简单;
4. 项目特色,比如timeago.js特色就是tiny(1.75 kb完成其他项目依赖 jQ 的事情),并且在多个 issue 中要求 pr 一定要保证代码的简洁;
5. PR 规范,比如 timeago.js 中的主要 pr 来源于本地化语言的翻译,所以我会专门开一个issue来展现需要 pr 哪些语言,然后大家一目了然,可以增加大家 pr 的积极性;
 
做好这些之后,就可以到一些技术论坛发发文章,博客了,具体发哪些位置呢?
 
Hack New、开发者头条、V2ex、OSChina、segmentfault、极客头条等等。我对国外技术站点不是很了解,仅仅发了 Hack New。
 

百度Echart 3.0的react封装

前端开发atool 发表了文章 • 0 个评论 • 1753 次浏览 • 2016-06-12 18:59 • 来自相关话题

github项目地址:https://github.com/hustcc/echarts-for-react
DEMO地址:http://git.hust.cc/echarts-for-react/#/?_k=l9a9ca
 
使用非常简单
一、安装npm install echarts-for-react
二、引入使用import React from 'react';
import ReactEcharts from 'echarts-for-react';

<ReactEcharts
option={this.getOtion()}
style={{height: '300px'}}
theme={"theme_name"}
onChartReady={this.onChartReadyCallback}
onEvents={EventsDict} />目前ReactEcharts有以下属性:
option、style、theme、className、onChartReady、showLoading、onEvents。大家可以去github上看readme文件。
 
另外API方法,只有一个getEchartsInstance()方法获取echarts的实例对象,然后就可以调用echarts的所有API方法了。





  查看全部
github项目地址:https://github.com/hustcc/echarts-for-react
DEMO地址:http://git.hust.cc/echarts-for-react/#/?_k=l9a9ca
 
使用非常简单
一、安装
npm install echarts-for-react

二、引入使用
import React from 'react';
import ReactEcharts from 'echarts-for-react';

<ReactEcharts
option={this.getOtion()}
style={{height: '300px'}}
theme={"theme_name"}
onChartReady={this.onChartReadyCallback}
onEvents={EventsDict} />
目前ReactEcharts有以下属性:
option、style、theme、className、onChartReady、showLoading、onEvents。大家可以去github上看readme文件。
 
另外API方法,只有一个getEchartsInstance()方法获取echarts的实例对象,然后就可以调用echarts的所有API方法了。

下载_(1).png

 

重写 file 控件样式

前端开发atool 发表了文章 • 0 个评论 • 525 次浏览 • 2016-04-25 09:32 • 来自相关话题

input[type="file"]{
-webkit-appearance: none;
text-align: left;
-webkit-rtl-ordering: left;
}
input[type="file"]::-webkit-file-upload-button{
-webkit-appearance: none;
float: right;
margin: 0 0 0 10px;
border: 1px solid #aaaaaa;
border-radius: 4px;
background-image: -webkit-gradient(linear, left bottom, left top, from(#d2d0d0), to(#f0f0f0));
background-image: -moz-linear-gradient(90deg, #d2d0d0 0%, #f0f0f0 100%);
} 查看全部
input[type="file"]{
-webkit-appearance: none;
text-align: left;
-webkit-rtl-ordering: left;
}
input[type="file"]::-webkit-file-upload-button{
-webkit-appearance: none;
float: right;
margin: 0 0 0 10px;
border: 1px solid #aaaaaa;
border-radius: 4px;
background-image: -webkit-gradient(linear, left bottom, left top, from(#d2d0d0), to(#f0f0f0));
background-image: -moz-linear-gradient(90deg, #d2d0d0 0%, #f0f0f0 100%);
}
1.png

css颤动效果

前端开发atool 发表了文章 • 0 个评论 • 485 次浏览 • 2016-04-25 09:30 • 来自相关话题

 .face:hover {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}

@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}

20%, 80% {
transform: translate3d(2px, 0, 0);
}

30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}

40%, 60% {
transform: translate3d(4px, 0, 0);
}
} 查看全部
 
.face:hover {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}

@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}

20%, 80% {
transform: translate3d(2px, 0, 0);
}

30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}

40%, 60% {
transform: translate3d(4px, 0, 0);
}
}

一个image placeholder客户端Javascript生成库

前端开发atool 发表了文章 • 0 个评论 • 708 次浏览 • 2016-04-22 16:48 • 来自相关话题

一、概述

placeholder,做过html都会知道,在input里面有一个属性是placeholder,这个属性是用到在input为空的时候,显示一个提示图片。
本项目地址为:https://github.com/hustcc/placeholder.js  




二、起因

个人在开发过程中,需要处理很多的APP logo,这些logo是从ipa和apk中dump出来的,有些可能加密无法完全解密。所以在logo打不开的时候,需要显示一个替代信息,方法有二:

1. 使用img的alt属性,当图片打不开的时候,显示alt文字;
2. 加载失败使用一个empty图片代替;

都有确定,方法1可能造成页面样式变化,因为img和text还是有差距的;方法2也有问题,所有失败的图片均使用相同的图片替代,辨识度低。

三、已有方案

这里就需要使用image的placeholder,最简答的方式,这种其实大家经常看到,比如网站的广告位预留,占位图片等等。但是要做到动态的图片,这就需要其他的一些手段了,方法有二:
1. 通过搭建一个web server,专门生成图片,然后通过传入一些参数来动态生成图片
这个比较多,也比较主流吧,例如:temp.im,placeholder.it等都是通过服务端生成,至于怎么生成,php使用gd,py使用pil等;
2. 通过浏览器客户端生成,github上有一个项目:https://github.com/imsky/holder 使用客户端生成,具体可以去github上参考。

四、本方案

本项目地址为:https://github.com/hustcc/placeholder.js   
演示网站:http://github.atool.org/placeholder.js.html   (代码使用上述imsky/holder的主页代码,修改placeholder生成方式)

为什么已经有holde项目,还要做一个placeholder.js的项目?二者做的都是客户端生成placeholder
1. holder的使用方式是参考server端生成placeholder的使用方式——使用url传递参数的方式,这种方式在浏览器端使用js并不是非常方便;
2. holder的Javascript库太大,压缩之后30kb,对于仅仅只是生成一个placeholder图片,而耗费30kb,并不划算;
3. server端生成图片比较耗费服务器资源,特别是一个页面生成图片比较多的时候,容易造成大量并发,而如果对图片来进行缓存,又会导致各种碎片文件。

本项目的特点:
1. 非常小:1kb都不到,后续更新尽量维持在1kb之类,也要有一个噱头;
2. 使用非常简单,几个简单易懂的配置项,两个api方法(一个获取base64,一个获取canvas);
3. 动态字体大小,在字体未设置的情况下,自动调整字体大小,方式文字overflow;
欢迎issue和PR。 查看全部
一、概述

placeholder,做过html都会知道,在input里面有一个属性是placeholder,这个属性是用到在input为空的时候,显示一个提示图片。
本项目地址为:https://github.com/hustcc/placeholder.js  
website.png

二、起因

个人在开发过程中,需要处理很多的APP logo,这些logo是从ipa和apk中dump出来的,有些可能加密无法完全解密。所以在logo打不开的时候,需要显示一个替代信息,方法有二:

1. 使用img的alt属性,当图片打不开的时候,显示alt文字;
2. 加载失败使用一个empty图片代替;

都有确定,方法1可能造成页面样式变化,因为img和text还是有差距的;方法2也有问题,所有失败的图片均使用相同的图片替代,辨识度低。

三、已有方案

这里就需要使用image的placeholder,最简答的方式,这种其实大家经常看到,比如网站的广告位预留,占位图片等等。但是要做到动态的图片,这就需要其他的一些手段了,方法有二:
1. 通过搭建一个web server,专门生成图片,然后通过传入一些参数来动态生成图片
这个比较多,也比较主流吧,例如:temp.im,placeholder.it等都是通过服务端生成,至于怎么生成,php使用gd,py使用pil等;
2. 通过浏览器客户端生成,github上有一个项目:https://github.com/imsky/holder 使用客户端生成,具体可以去github上参考。

四、本方案

本项目地址为:https://github.com/hustcc/placeholder.js   
演示网站:http://github.atool.org/placeholder.js.html   (代码使用上述imsky/holder的主页代码,修改placeholder生成方式)

为什么已经有holde项目,还要做一个placeholder.js的项目?二者做的都是客户端生成placeholder
1. holder的使用方式是参考server端生成placeholder的使用方式——使用url传递参数的方式,这种方式在浏览器端使用js并不是非常方便;
2. holder的Javascript库太大,压缩之后30kb,对于仅仅只是生成一个placeholder图片,而耗费30kb,并不划算;
3. server端生成图片比较耗费服务器资源,特别是一个页面生成图片比较多的时候,容易造成大量并发,而如果对图片来进行缓存,又会导致各种碎片文件。

本项目的特点:
1. 非常小:1kb都不到,后续更新尽量维持在1kb之类,也要有一个噱头;
2. 使用非常简单,几个简单易懂的配置项,两个api方法(一个获取base64,一个获取canvas);
3. 动态字体大小,在字体未设置的情况下,自动调整字体大小,方式文字overflow;
欢迎issue和PR。