yjxf8285@qq.com

Plugins/Tools

浏览器文本复制到剪贴板

Posted By 刘晓帆 | 697 views

github上面的这个复制功能如何实现的呢?

 
 
 
解决方案: clipboardjs插件
插件官网:https://clipboardjs.com/
使用方法:
HTML
<div className="testtitle copy-btn btn" data-clipboard-text="http://www.baidu.com">copy</div>

JS
var clipboard = new Clipboard('.btn');
clipboard.on('success', function (e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);

Read More

Plugins/Tools

Material Design在线配色工具

Posted By 刘晓帆 | 695 views

工具地址:http://www.materialpalette.com/
之前对比过很多配色工具,Material Design提供的方案还是很漂亮的,非常喜欢这种风格。
Material Design 的一些重要功能包括 系统字体Roboto的升级版本 ,同时颜色更鲜艳,动画效果更突出。杜拉特还简要谈到了新框架的一些变化——这个新框架也于今天在 google.com/design 公开发布。谷歌的想法是让谷歌平台上的开发者掌握这个新框架,从而让所有应用就有统一的外观,就像是苹果向开发者提出的设计原则一样。谷歌还基于这种新的设计语言对本公司旗舰应用进行了重新设计,包括安卓和网页端的Gmail和Calendar。大家可能还会记得,看到过有关这些变动的文章, 有些博客 已经掌握了外泄截屏,显示经过了重新设计的Gmail,界面更干净、更简约。在安卓平台上,这种新界面被称为Material,支持各种新动画效果,具有内置的实时UI阴影,以及可在不同屏幕之间切换的hero元素。

Read More
  • Material Design在线配色工具已关闭评论
  • 8 months ago

Plugins/Tools

HTML to JSX 转换工具

Posted By 刘晓帆 | 1,142 views

提供一个html转jsx的在线工具。
地址:http://liuxiaofan.com/tojsx/
说明:
场景,进行react代码重构的时候,要把之前写好大量的html代码复制到js文件里面。因为jsx的一些语法规则导致了要修改很多HTML标签属性名称,诸如class变成className之类的。这时候你可能会想,如果有一个能够一键转换的工具就好了。把普通的html代码复制到左边的框框里面,然后右边的窗口就会出现转译好的jsx代码……

Read More

Plugins/Tools

HTML5 Sortable – jQuery拖放排序插件使用方法

Posted By 刘晓帆 | 666 views

插件下载地址:http://liuxiaofan.com/download/html5sortable.tar.gz
特点

很轻量,压缩后体积小于1KB
基于HTML5原生的darg和dorp方法
支持列表和网格风格布局2种布局
文档类似于jQuery UI的sortable插件
兼容IE 5.5+, Firefox 3.5+, Chrome 3+, Safari 3+, and Opera 12+

如何使用?
基本的DOM结构和运行脚本。
<ul class="sortable">
<li>Item 1
<li>Item 2
<li>Item 3
<li>Item 4
</ul>
<script src="jquery.sortable.js"></script>
<script>
$('.sortable').sortable();
</script>
使用了2种样式用于区别拖拽中.sortable-dragging和拖放占位.sortable-placeholder。
使用

Read More
  • HTML5 Sortable – jQuery拖放排序插件使用方法已关闭评论
  • 8 months ago

Plugins/Tools

iScroll 5 API 中文版

Posted By 刘晓帆 | 1,148 views

前言
最近项目上需要使用iScroll,在中文圈里找了找,只找到了iScroll 4的中文版API。加上最近开始使用github(准确说,github账号是很多年前注册的,一直在企业应用里摸爬滚打,荒废了账号很长时间,是理由吗?是理由吗?),出于对开源社区的敬意,我突然觉得应该做点啥,于是先挑一个简单点儿的,把iScroll 5的API翻译一下,方便中文用户使用。
搭后语
iScroll对于我来讲典型的应用场景位于移动设备的App,基于Cordova/Phonegap + JQM + iScroll开发移动设备上的App,对于以数据呈现为主体的企业应用来讲无疑是一个多快好省的解决方案。这三驾马车前两个可以堂而皇之的称之为开发框架,iScroll只能称之为工具,尽管如此,iScroll带来的强大的滚动功能,能节省我们在项目开发上的部分时间(这也是开源社区的力量),所以也值得我花时间理解作者的代码和文档。如果您认同这种功劳苦劳,请到github上给我一个star。由于才疏学浅,在翻译过程中难免会有错误或者瑕疵,请在issure中提出,我会及时更正。

Read More

Plugins/Tools

WP-PostViews设置方法

Posted By 刘晓帆 | 410 views

通常安装完这个插件之后,还需要在你的主题中找到对应的php文件(每个主题的文件位置可能都不一样,比如我的这个就是改这几个文件content-single.php,content-page.php…)添加下面的代码,一般我会把它放在发布者旁边。
<?php if(function_exists('the_views')) { the_views(); } ?>

Read More

Plugins/Tools

Ruby环境编译SASS文件中文注释报错的解决办法

Posted By 刘晓帆 | 2,091 views

通常在安装完ruby和sass之后,如果你的sass或scss文件内有中文的话,编译时就会报错,如:Syntax error: Invalid GBK character
解决的方案就是为sass编译添加默认的编码方式为utf-8
步骤:
1、找到下面这个文件 C:\Ruby21-x64\lib\ruby\gems\2.1.0\gems\sass-3.4.8\lib\sass\engine.rb
2、找到require ‘sass/supports’这一行,在下面一行添加Encoding.default_external = Encoding.find(‘utf-8’)

Read More
  • Ruby环境编译SASS文件中文注释报错的解决办法已关闭评论
  • about 1 year ago
2f46b94548e8f81716ee5d4f455342de

Plugins/Tools

流行的前端工具推荐

Posted By 刘晓帆 | 751 views

1. node.js + npm, 这个是前端工具的一个平台,没有他们就没有以下的工具,建立开发环境,下载开发工具,运行开发工具的利器

2. bower, 库依赖管理器,类似于npm,但针对浏览器JavaScript的依赖管理,减少寻找库,下载库和升级库的烦恼
3.grunt, 流程自动化管理工具,将你非编程的开发步骤减到最小,grunt watch+liveReload或者grunt connect,可以使得免除你F5无尽地狱,发布和开发各种无压力。以下大部分开发工具,都有grunt的相对应的插件,也就是说他们都能利用 grunt进行自动化运行
4.liveReload, 本来是一套解决方案,自从grunt watch出现后,我们只要安装他的chrome或者firefox插件就行了。它的目的很简单,只要发现目标文件中有任何一个文件有改动,立刻通知浏览 器刷新页面,这样就免除了手动按F5。如果和grunt watch合用,就是只要发现任何文件有改动,立刻运行自动化流程中的所有任务,然后通知浏览器刷新。
5. 本人用less比较多,因为基本无缝兼容历史遗留系统中的css,(而Sass语法比较特殊,还没有专门用过,应该开发新系统的css比较好),一套 css预编译语言,可以把less语法转成css语法,lessc是less语言编译器,配合grunt less,编写大型css文档毫无压力。
6.Phantomjs,没有界面的浏览器,用js脚本控制其操作网页。测试,抓图,网页流程自动化利器。配合casperjs的语法简化功能真强库后,控制Phantomjs就更加容易了
7. grunt PhotoBox, 利用phantomjs抓图功能和ImageMagick图片比较功能,在利用live-reload即时刷新功能,可以让你开发css的时候,快速对n 多个页面进行观察,看其前后变化。不过缺点也比较明显,就是速度慢。但比起手动对比来看,还是非常快的。值得css开发时拥有
(!!无图!!)
8. phantomCSS,这个和grunt photobox类似,都用于css开发的,差别是photobox是全局观察差别,而这个是单元组件观察差别,它方便你就抓页面中某一块元素然后进行前后比较,更加注重细节上的差异,这个比较合适组件开发时候使用。

9. jshint,帮助你快速定位JavaScript的语法错误和潜在的跨浏览器兼容性问题。在部署你JS前,用jshint检查一下是没错的
(!!无图片!!)
10.UglifyJS,压缩JavaScript代码,使你的JS代码可以更加快速的加载。有grunt的插件
11. browserify允许你在浏览器里面使用CMD标准模块,但本人认为它的另外一个优势是合并代码,开发时候可以把代码模块化,分成很多很多小文件,然 后有调理的放到相对应文件夹下,然后最后合成单一文件。本人曾经利用browserify开发greasemonkey代码,大大简化了 greasemonkey的开发难度和增强了greasemonkey代码的质量。browserify有grunt插件,这样又减少的开发步骤。
12.

Read More

Plugins/Tools

解决windows版Webstorm的svn插件不能使用的方法

Posted By 刘晓帆 | 1,956 views

如果你使用windows环境开发,并且svn工具用的是TortoiseSVN (小乌龟),那么你在安装完webstorm之后就会发现svn插件报这个错误。
can’t use subversion command line client : svn
意思就是不能使用svn的命令行工具,所以这个插件现在用不了。
原因是TortoiseSVN 默认不支持conmand line操作。
知道原因就可以找解决办法了:
1、 下载一个命令行工具 sliksvn
下载地址:https://sliksvn.com/download/
2、 一路下一步直到安装成功,如果你使用默认路径的话他应该被安装在这里 C:\Program Files\SlikSvn
3、 在with conmand line client设置成你的c:\Program Files\SlikSvn\bin\svn.exe即可使用svn了。
有的时候你可能还会遇到另外一个错误
Errors found while svn working copies detection
原因是版本不一致造成的,你选 1.8 format 或者1.7试试,对应上就可以了。

Read More
  • 解决windows版Webstorm的svn插件不能使用的方法已关闭评论
  • over 2 years ago

Plugins/Tools

JetBrain WebStorm 9 注册码

Posted By 刘晓帆 | 3,559 views

webStorm :
UserName:William
===== LICENSE BEGIN =====
45550-12042010
00001SzFN0n1bPII7FnAxnt0DDOPJA
INauvJkeVJBuE5bqLEznccE4tet6tr
RiyoMxDK8oDY93tx!ipPyGmqYYeWxS

Read More