2011-12-25T21:46:07-08:00 http://fireyy.com/ fireyy fireyy@gmail.com 2011-12-21T00:00:00-08:00 http://fireyy.com/blog/codekit <p>当 CSS 越来越臃肿，人们创造了 <a href='http://lesscss.org/'>Less</a>, <a href='http://sass-lang.com/'>Sass</a> 和 <a href='http://learnboost.github.com/stylus/'>Stylus</a>, 当 JavaScript 越来越臃肿，人们创造了 <a href='http://jashkenas.github.com/coffee-script/'>CoffeeScript</a>, 最后人们嫌 HTML 太啰嗦了，创造了 <a href='http://haml-lang.com/'>Haml</a>, 总之怎么快怎么来。但是这些都不是标准的解决方案，大部分都需要一个编译的过程，这让新手和部分设计师望而却步，<a href='http://incident57.com/codekit/'>CodeKit</a> 的出现很好的解决了这些问题。以下大致介绍一下 CodeKit 的功能：（官方页面上的视频介绍很直观，其实看那些视频更容易理解）</p> <h3 id='project__frameworks'>Project 和 Frameworks</h3> <p>CodeKit 的所有功能是基于 Project, 因此你必须首先创建一个 Project, 按 + 选择你的项目目录，或者直接拖拽进来。</p> <p>目前网上存在很多 Frameworks, 有 CSS 的，有 JavaScript 的，你可以把这些添加为 CodeKit 里的 Frameworks, 这样你所有的 Project 就可以共享这些 Frameworks.</p> <h3 id='id5'>自动编译</h3> <p>CodeKit 支持:</p> <ul> <li>编译成 CSS： Less, Sass 和 Stylus.</li> <li>编译成 JavaScript：CoffeeScript.</li> <li>编译成 HTML：Haml.</li> </ul> <h3 id='id6'>语法检查和优化</h3> <p>编译后，支持使用 Bless 检查 CSS 文件的选择器数量(注1)，用 JSHint 或者 JSLint 检查 JS 文件的语法和错误，合并文件，用 UglifyJS 进行压缩，一步完成。JSLint, JSLint, UglifyJS 的参数部分也有专门的配置界面。另外你可以自定义编译后的路径和文件名。</p> <p>在窗口内选择图片文件（目前支持 jpeg 和 png 文件），可以进行压缩优化的操作。</p> <p>另外 CodeKit 目前支持自动刷新 Safari 和 Chrome 的指定 Tab 页面。但是如果你是一个 Command + S 控(注2)，并且你安装了 Growl, 你会收到好多编译成功的消息(严重时刷屏)。CodeKit 是个非常强大的工具，可以帮你节省好多时间。</p> <p>【注1】: 当一个 CSS 文件里有超过 4,095 个 CSS 选择器，IE9以及之前的版本将无法处理超出的部分。Bless 正是帮你做这方面的检查和处理，具体可以看<a href='http://blesscss.com/'>这里</a>。</p> <p>【注2】：编辑文件的时候，经常无意识的按 Command + S 保存当前文件，并且是连续按，以确保文件保存成功（近似强迫症）。</p> 2011-12-20T00:00:00-08:00 http://fireyy.com/blog/mac-f2e-tools <p>随着 Mac 的普及，前端 + Mac 的配置已经越来越多了。分享一下我的在 Mac 上的前端配置（姑且说是配置吧，其实就是一些工具和 app）</p> <h3 id='id2'>硬件方面</h3> <p>Macbook pro 13寸 + Dell 23寸显示器 + 苹果有线键盘 + Dell 鼠标 + 笔记本支架。其他可选方案：iMac, Mac Pro + LED Cinema Display 等等</p> <h3 id='textmate'>代码编辑工具：TextMate</h3> <p>没什么悬念，关于这朵菊花就不再深入介绍了。其他可选方案：Espresso, Coda</p> <h3 id='virtualboxie6ie7ie9'>测试环境：VirtualBox(IE6,IE7,IE9)</h3> <p>没办法，在悲催的环境中，IE 还是主要客户，我的方案是用 VirtualBox 建立了三个虚拟机环境，分别是 XP+IE6, VISTA+IE7, WIN7+IE9. 其他可选虚拟机软件：VMware Fusion, Parallels Desktop</p> <h3 id='id3'>调试工具</h3> <p>一般就是浏览器自带调试工具或者是 firebug for firefox</p> <h3 id='id4'>辅助工具</h3> <ul> <li><a href='http://livereload.com/'>LiveReload</a>: 修改 CSS 和 图片后，不需要手动刷新页面，省事不少。</li> <li><a href='http://xrefresh.binaryage.com/'>XRefresh</a>: 可以说是 LiveReload 的前身。</li> <li><a href='http://incident57.com/codekit/'>Codekit</a>: 可以说是前端辅助利器，稍后独立写一篇介绍TA. 好了，介绍在<a href='http://fireyy.com/blog/codekit.html'>这里</a>。</li> <li><a href='http://smallerapp.com/'>Smaller</a>: 可以压缩 HTML, PHP, CSS 和 JavaScript 文件，并且提供合并的功能，界面友好。</li> <li><a href='http://iconfactory.com/software/xscope'>xScope</a>: 这个不但是前端的利器，同时也是设计师的利器。名厂 Iconfactory 出品，直接在你的屏幕上实时使用包括：定位，卡尺，取色，辅助线 等工具。</li> </ul> 2011-12-15T00:00:00-08:00 http://fireyy.com/blog/i-use-these-apps-on-mac <p>使用 Mac 也快5年了，分享一些我在 Mac 下使用的软件，仅供参考。</p> <h3 id='alfred'>Alfred</h3> <p>快捷启动软件，配合各种脚本可以做好多事情，不过我一般只用来启动其他软件。</p> <h3 id='appcleaner'>AppCleaner</h3> <p>之前是一个软件控，喜欢尝试各种软件，那么一个清除垃圾的软件是必备的。</p> <h3 id='caffeine'>Caffeine</h3> <p>可以阻止屏幕进入省电状态，看电影必备。</p> <h3 id='clipmenu'>ClipMenu</h3> <p>剪贴板管理软件，支持多媒体文件，并且自带 snippet 功能。</p> <h3 id='cloud'>Cloud</h3> <p>算是分享工具把，上传文字、图片、代码什么的，Web 端很优雅。</p> <h3 id='dayo'>Day-O</h3> <p>小工具，作用仅仅是替换 Mac 菜单栏上默认的日历显示。</p> <h3 id='github'>GitHub</h3> <p>GitHub 网站的 Mac 客户端。</p> <h3 id='ia_writer'>iA Writer</h3> <p>Markdown 格式编辑器，小清新的 UI，很舒服。</p> <h3 id='reeder'>Reeder</h3> <p>优雅的 Google Reader 客户端。</p> <h3 id='textmate'>TextMate</h3> <p>菊花编辑器。</p> <h3 id='time_out'>Time Out</h3> <p>劳逸结合的工具，会提示你休息。</p> <h3 id='totalfinder'>TotalFinder</h3> <p>给 Finder 添加 Tab 功能。</p> <h3 id='twitter'>Twitter</h3> <p>Twitter 客户端。</p> 2011-12-14T00:00:00-08:00 http://fireyy.com/blog/textmate2-alpha <p>TextMate 2.0 “经历了4年的开发”之后，终于在近期放出了 <a href='http://blog.macromates.com/2011/textmate-2-0-alpha/'>Alpha</a> 版本。菊花(?)让人”眼前一亮“。</p> <p>TextMate 1.0 是我用过的最强的编辑器，谁用谁知道。但是有一个非常恶心的 bug: <strong>不能正常显示 CJK 字符，不能正常使用输入法</strong>，虽然有各种不完美的 fix&#8230;</p> <p>TextMate 2.0 版让人欣喜的是至少能正常显示中文了，至于中文输入还是有 bug, 我相信他们会继续”开发“的，界面 UI 没有多大的变化，跟同期的其他编辑器相比，不够精致，难道开发者在四年前就开发好了的？</p> <p>先吐到这里&#8230;</p> 2011-12-08T00:00:00-08:00 http://fireyy.com/blog/phonegap-ext <p><a href='http://phonegap.com'>Phonegap</a> 是一个基于 HTML, CSS and JavaScript 开发移动平台 app 的开源框架，类似的还有 <a href='http://www.appcelerator.com'>Titanium</a>. 之前一个项目涉及到快速开发移动跨平台 app, Phonegap 上手较快，便选择 TA, 噩梦开始了…</p> <p>首先对于前端来说，Phonegap 上手的确方便，就像平时做网页一样，不过在打包过程中会发生各种问题：</p> <h3 id='id1'>白名单的问题</h3> <p>你会发现你的 ajax 请求碰到了跨域的问题，但是 Phonegap 官方的说法是：</p> <blockquote> <p>Phonegap 是通过 <code>file://</code> 引入 index.html 页面，发送 ajax 请求不受跨域限制</p> </blockquote> <p>最后通过无尽的搜索，发现需要在 <strong>PhoneGap.plist</strong> 里的 <strong>ExternalHosts</strong> 组里添加新 item, 值设定为要访问的域名就可以了。</p> <h3 id='viewport'>Viewport拖拽问题</h3> <p>这个问题的表现跟浏览器一致，真要阻止，只能添加：</p> <pre><code>document.addEventListener(&quot;touchmove&quot;, function (e) { e.preventDefault(); }, false);</code></pre> <p>待续&#8230;</p> 2011-12-05T00:00:00-08:00 http://fireyy.com/blog/gf2 <p>这是我的第一台相机，为什么是 GF2 呢，我是外形控，又喜欢轻便。默认配的是 14mm 的饼干头，以后有需要再购置好的变焦头吧…上一张加了皮套的图(ipad2 拍的，很模糊)</p> <p><img src='http://s3-us-west-1.amazonaws.com/images.path.com/photos2/b171fa61-f060-4cf6-8588-f68eb079c668/original.jpg' alt='GF2 皮套饼干头' /></p> 2011-11-24T00:00:00-08:00 http://fireyy.com/blog/play <p>之后在这里发各种play吧！</p>