iOS 几个常用的 Xcode 插件 == 注:此文章介绍的插件暂不支持 Xcode 8,请勿安装 == Alcatraz 首先介绍的 Alcatraz 是一个 Xcode 插件管理工具,下面介绍的插件都可以通过它来统一管理安装、卸载等,所以下面就不做链接了,字母顺序排序 BBUDebuggerTuckAway 编写代码时自动收缩底部的调试栏 CocoaPods 大名鼎鼎的依赖管理工具 CocoaPods 的插件,不想输入命令行的话鼠标点几下就行了 HOStringSense 字符串里面转义字符什么的最讨厌了,这个插件完美的解决了这个问题 KSImageNamed 为智能提示补充上图片名提示的功能 OMColorSense 输入颜色代码的时候可以预览颜色,同时也可以调用出颜色选择面板进行颜色选择 RTImageAssets 通过 @3x
CssGaga CssGaga – 哀悼日网站一键变灰 勾选去色 css去色 将css中的色值(包括rgb、rgba、英文单词色值如red等)转为黑白,生成文件名 *.cs → *.gray.css 图片去色 可处理 css/jpg/png/gif 图片生成位置:当前目录下的gray文件夹 .jpg → gray/.jpg 一键变灰 同时勾选去色及抽取图片,将css拖拽进来即可 抽取图片功能 详见CssGaga – 抽取图片 此操作后: 生成变灰的css *.cs → *.gray.css
CssGaga CssGaga - 启动时调用其他命令 功能说明 双击 CssGaga.exe 启动时可以同时运行一些批处理文件,比如可以用来启动其他程序等等 使用说明 将批处理的 bat 文件放置在 CssGaga 程序目录下的 autorun 目录中即可 返回CssGaga – 帮助索引
CssGaga CssGaga – 抽取图片 勾选抽取图片 可将css文件引用的图片(jpg/gif/png)抽取到当前目录下的img-css文件名目录下,并替换图片路径为抽取后的路径 注:支持相对地址调用的图片,若图片不存在则不处理该图片 返回CssGaga – 帮助索引
CssGaga CssGaga – 部署文件 功能说明 文件压缩合并之后,会有一个部署的需求,即将文件拷贝到不同的地方(比如某个SVN目录,或者某个测试环境),在 CssGaga 的界面右下角的 生成到 区域就是用来快速勾选部署环境的 CssGaga 只支持 Windows 资源管理器能直接打开的目录,所以如果是 ftp 的话,需要用一些软件(比如 NetDrive)将 ftp 虚拟为本地磁盘 文件格式 拖 css 生成出来的文件都可以同步过去,默认只支持前端常用的文件格式,是有限制的,不过可以自行添加更多格式,到更多选项里的同步文件类型输入框里修改即可 理解对应关系
CssGaga CssGaga – CSS 合并 默认开启,无法关闭 Before: @import url("reset.import.source.css"); @import url("grid.import.source.css"); @import url("mod-1.source.css"); /* mod-1.source.css 中 @import url("
CssGaga CssGaga – CSS 压缩 此功能默认开启 勾选换行则每条规则后换行,否则全部压为一行 CssGaga参考了一部分YUI Compressor,拥有比YUI Compressor更极限的压缩 去除注释和空白 Before: /***** Multi-line comment before a new class name *****/ .classname { /* comment in declaration block */ font-weight: normal; } After: .classname{font-weight:normal} 去除结尾的分号 Before: .classname { border-top: 1px; border-bottom:
CssGaga CssGaga – 图片压缩 默认开启,无法关闭,各功能中涉及的图片都会被压缩 *.png → *.png 无损压缩 *.jpg → *.jpg 有损压缩: 默认情况下,当图片面积 < 10000 时,质量≈ps的60,反之则为70 勾选jpg HD时,质量≈ps的80 若文件大于10KB,则转换为渐进式jpg 返回CssGaga – 帮助索引
CssGaga CssGaga – dataURI Before: .base64{background-image:url('img/base64/logo.png');} 注:要转换的图片文件所在与css同级的img文件夹中的base64子目录中,且引用时为相对路径 After: .base64{background-image:url(data:image/png;base64,[base64 string of logo.png])} 若本地存在同名的 @2x 文件,则 After: .base64{background-image:url(data:
CssGaga CssGaga – CSS 优化 保留空格(IE6 bug) Before: .classname:first-letter { font-weight: bold; } .classname:first-line { font-weight: bold; } After: .classname:first-letter {font-weight:bold} .classname:first-line {font-weight:bold} 中文字体Unicode编码 Before: .classname { font-family: 宋体; } .classname { font-family: 黑体; } .classname { font-family: 微软雅黑; } After:
CssGaga CssGaga 2010 Beta1 拖了很久,今天终于要发布了,功能和使用方法看CssGaga帮助吧(内有视频演示) 下载CssGaga 这个跟之前项目里使用的有些差别: 重新调整了思路,代码改动较大,未在实践中检验,所以大家注意BUG并反馈哈 精简了界面,将一些功能(去注释、格式化、不换行压缩)默认开启,不再提供复选框进行设置
CssGaga CssGaga - 帮助索引 不接受 QQ、微信等 IM 方式咨询,请在博客留言或邮件联系 ytzong7[at]gmail.com 以下请按顺序阅读 从安装到使用(内附下载地址) [视频] CssGaga 初体验 、PPT及功能演示视频 (未同步更新,仅供大概了解下功能) CSS 压缩 CSS 合并 CSS 优化 DataURI 抽取图片 图片压缩 部署文件 哀悼日网站一键变灰 皮肤1toN Icon 1toN
工具 跨浏览器的Firebug 标题党一把,哇哈哈哈哈~ Firebug Lite越来越好了,Chrome的Firebug Lite扩展其实就是Firebug Lite(扩展的缺点是要安装),但是我发现身边的一些人(包括大牛)对其还不太了解,下面简单介绍一下 Firebug Lite安装及使用 用需安装Firebug Lite的浏览器打开Firebug Lite安装页面 设置浏览器显示书签栏 将此链接[Firebug Lite 1.3Xb](javascript:(function(F,i,r,e,b,u,g,L,
工具 在UlrtraEdit中配置Zen Coding Zen Coding出来很久一段时间了,鬼哥更是在分享时潇洒的秀了一把,真是羡慕死人了。最近一直忙着搞需求,只有周末才有时间折腾一下,有点小郁闷~ Aptana配置方法及详细介绍可以看前端观察翻译的Zen Coding: 一种快速编写HTML/CSS代码的方法,配置起来有些麻烦,每个项目要导入一遍,另外虽然Aptana功能很强大,JQ/YUI等智能感知也很爽,不过有些慢 Editplus配置方法见zen code for EditPlus,缺点是zen coding之前要先选中代码段,麻烦,另外在EP中的Consolas字体显示也很差劲 Dreamwear配置方法见zen coding的dreamweaver插件安装教程,额,自从告别ASP后就没用过DW了 Visual Studio 2008配置方法见[Tool]
Pixel Perfect Pixel Perfect - 工具 之前使用最多的工具是QQ/TM的截图(快捷键CTRL+ALT+A)和肉眼估算,追求pixel perfect的话还是要专业的工具才好 FastStone Capture 身为一款截图软件却带了一把邪恶的屏幕标尺,不幸落入设计师手中成为测量偶们页面的万恶之源! Pixel Perfect 一款基于firebug的扩展,官网为http://www.pixelperfectplugin.com,效果不错,不过只支持Firefox Microsoft Expression Web 通过工具栏的视图-描摹图像菜单来进行设置或调出 之后配合设计视图进行调试。用起来也没那么爽,设计视图的显示效果和浏览器始终会有差异 打造自己的Pixel Perfect Pixel Perfect扩展和EW的描摹图像功能原理类似,将效果图叠在页面下方并设置一定的透明度之后偶们再用肉眼比对。
Let's make the web faster [翻译]用Page Speed Activity捕获并分析浏览器渲染 原文:Capturing and analyzing browser paint events using Page Speed Activity 作者:Bryan McQuade, 软件工程师 翻译:ytzong 安装 Page Speed 是一个 Firebug/Firefox 扩展,安装地址:http://code.google.com/speed/page-speed/download.html