给移动端webkit内核浏览器的样式预设

解释一些常见的在移动端需要的针对webkit内核浏览器的样式预设,比如让人厌烦的点击高亮


* {
    /* prevent callout to copy image, etc when tap to hold */
    -webkit-touch-callout:none;               

    /* prevent webkit from resizing text to fit */ 
    -webkit-text-size-adjust:none;             

    /* prevent tap highlight color / shadow */
    -webkit-tap-highlight-color:rgba(0,0,0,0); 

    /* prevent copy paste, to allow, change 'none' to 'text' */
    -webkit-user-select:none;                  
}


-webkit-touch-callout:none; 阻止长按图片之后呼出菜单提示复制的行为

默认情况下,长按图片之后弹窗提示复制图片
默认情况下,长按图片之后弹窗提示复制图片

-webkit-text-size-adjust:none;

-webkit-tap-highlight-color:rgba(0,0,0,0); 避免点击a标签或者注册了click事件的元素时,产生的高亮效果,类似下面这样

点击链接的高亮
点击链接的时候,有一个高亮的浮层效果

-webkit-user-select:none; 禁止 长按文本时候,会在手指按住的地方出现选择文本的两个指针和一个复制,全选的按钮

默认情况下,长按文本之后的表现
默认情况下,长按文本之后的表现

参考链接:http://stackoverflow.com/questions/20853238/webkit-tap-highlight-color-is-not-working

2014年8月9日重大更新:

此种写法有一定的隐含bug,详细情况请参照本人的另一篇文章:webkit浏览器下user-select:none导致input框无法访问

grunt-joycss的can’t find node-gd错误的解决方案

解决了在windows下面安装和使用joycss(或者grunt-joycss)时候报gd相关错误的问题

grunt-joycss或者独立的npm的joycss运行在windows下时,经常会报php gd库未安装,或者can’t find node-gd

这个时候npm install node-gd是注定失败的,因为就连作者本身都说了他没法实现在widows下面安装node-gd,而且问题本身不在这,因为joycss是可以调用php的gd库来实现拼图的。

开启php的gd的方法

joycss是通过cli的方式来调用php(也就是命令行的模式),这个和传统的浏览网页时,由apache来调用是不一样的。

把php加入环境变量

找到你安装的php,把php.exe所在文件夹的绝对路径,复制一份,放到计算机->属性->高级系统设置->环境变量->Path(底下的)里,注意用英文的分号(;)来区分别的路径。

这样做是为了能够在命令行里面调用php

查看配置文件地址

可以通过在CMD窗口里面输入 php --ini (php 5.3版本之后支持) 查看

Loaded configuration file: 就是apache调用的php的ini文件的地址

configuration file(php.ini) path: 这个是cli模式下在哪个文件夹下寻找php.ini文件(一般情况下这个目录是没有php.ini文件,这就是很多时候,明明修改了配置文件,但是在命令行下就是不生效的问题)

修改配置文件

  1. 首先是开启GD库

找到extension=php_gd2.dll,把它前面的分号去掉

  1. 修改extension_dir的地址

在某些集成套件的设定里面,extension_dir是相对路径的。

默认情况下,这样的extension_dir也是能正常的在apache调用的时候工作,因为只有一个配置文件,相对路径也没问题。

但是后面是需要把配置文件复制一份到刚刚上一步找到的configuration file(php.ini) path:目录下,所以extension_dir必须改成到ext文件夹的绝对路径,例如:d:/usr/local/php5/ext

  1. 复制配置文件

复制刚刚修改完毕的配置文件,粘贴到configuration file(php.ini) path:指定的目录,一般是:C:windows。然后重命名为php.ini(某些集成套件里面,配置文件可能默认的名字不是php.ini)

重启电脑

试过重启apache,但是对之前的修改貌似没有效果,暂时也不知道是重启哪个服务能让之前的修改生效。所以,重启电脑吧!(如果有别的更好的方法,也欢迎指正)

现在,好好享受joycss!

分享我的vim配置


" Configuration file for vim
set modelines=0     " CVE-2007-2438

" Normally we use vim-extensions. If you want true vi-compatibility
" remove change the following statements
set nocompatible    " Use Vim defaults instead of 100% vi compatibility
set backspace=2     " more powerful backspacing

" Don't write backup file if vim is being called by "crontab -e"
au BufWrite /private/tmp/crontab.* set nowritebackup
" Don't write backup file if vim is being called by "chpass"
au BufWrite /private/etc/pw.* set nowritebackup

" 自动语法高亮
syntax enable 
set background=dark
colorscheme Guardian



" 突出显示当前行
" set cursorline

" 显示行号
set number

" 用空格代替制表符
set expandtab

" 设定 tab 长度为 4
set tabstop=4

" 统一缩进为4
set softtabstop=4

" 自动缩进的宽度
set shiftwidth=4

" 智能自动缩进(这个东西实际用处不大,因为只是针对简单文本的)
" set autoindent

set smartindent

" 让filetype-plugin根据文件类型自动缩进(这个必须要,它会根据文件类型自动配置缩进,插件在安装vim的时候已经装好了)
filetype plugin indent on

" 在行和段开始处使用制表符
set smarttab

"搜索忽略大小写
set ignorecase

"搜索逐字符高亮
set hlsearch
set incsearch

"代码补全
" 关掉智能补全时的预览窗口
" set completeopt=longest,menu
" vim7.3中已经集成了omnicppcomplete了
set omnifunc=omni
" omnicppcomplete配置 关闭兼容模式
set nocp
" 打开文件类型检测,加了这句才可以用智能补全
filetype plugin on
set ofu=syntaxcomplete#Complete
"共享剪贴板
"set clipboard+=unnamed

" 实现 (、[、{、"、'  输入后自动补全右边部分,光标也会位于中间位置
inoremap ( ()i
inoremap [ []i
inoremap { {}i
inoremap < <>i
inoremap " ""i
inoremap ' ''i

" 高亮显示匹配的括号
set showmatch

" 匹配括号高亮的时间(单位是十分之一秒)
set matchtime=1


"保存.vimrc文件后会自动调用新的.vimrc
autocmd! bufwritepost _vimrc source $VIM/_vimrc


" 代码折叠
set foldmethod=marker


" 状态栏显示目前所执行的指令
set showcmd


" 行号和标尺
set number
set ruler
set rulerformat=%15(%c%V %p%%%)


" 设置less文件的高亮
au BufNewFile,BufRead *.less set filetype=less


" 始终显示状态行
set ls=2 
"命令行补全以增强模式运行
set wildmenu 

用package.json来管理NPM里面的依赖包

介绍了一些最近新近知道的使用npm的技巧

很久之前

开发前端项目(基于grunt),每新建一个项目,总是先用npm init来初始化一个package.json,然后就是一遍又一遍的


  npm install grunt-contrib-less --save-dev
  npm install grunt-contrib-concat --save-dev
  npm install grunt-contrib-requirejs --save-dev
  npm install grunt-contrib-uglify --save-dev

在进行版本控制的时候,以git为例,为了让项目组成员能拥有正确的开发环境,得git add node_modules,把里面所有的包都加入版本控制。一提交就是一大tuo,要是添加新的包,或者更新包,其他成员更新的时候,也是一堆。

新的能力 Get!

如果你有个新的项目,还没有下载过任何的npm包,而需要的npm包跟前一个项目差不多。那么,你可以把这个项目里面的package.json拷贝到当前项目根目录。然后npm install,所有的依赖包就会自动的下载完毕了!

现在

一个好的开发项目流程可以是这样:有一份好的前端项目开发模版,里面的目录可能是这样


src/
    css/
    js/
    img/
    less/

dist/
    css/
    js/
    img/
    less/

index.html
index-dev.html

doc/
    xxx.psd

package.json
Gruntfile.js
.gitignore

package.json里面有基本的包依赖

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.0",
    "grunt-contrib-nodeunit": "~0.2.0",
    "grunt-contrib-uglify": "~0.2.2"
  }
}

.gitignore里面添加了node_modules/

每次新建项目就可以拷贝这份模版,然后初始化,加入版本库,提交。项目其他成功,更新到本地之后,同样的初始化就可以了