willerce

willerce 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

前端工程师,强迫、偏执症;关注前端技术、用户体验,欢迎交流。
willerce@gmail.com

个人动态

willerce 收藏了文章 · 2014-04-23

Grunt GUI 工具: Spock

工具宣传帖!

在大家纷纷推出各种工具的 CLI 版本时,Spock 在这里显得有点格格不入,但我确实喜爱一目了然的 GUI 界面多一些。

一个原因是:搞 “外包” 并行项目太多,一次可能跑着好几个 Grunt Watch 。

还有,Windows 下的命令行太挫也是一个原因,虽然有了 Cmder 后这个情况改善了好多。

看图:

当然,你想看任务运行的详细过程也是可以的:

Windows 的 EXE 打包已经好了,Mac 版的包要是谁愿意来打一个,那自然是很好滴。

https://github.com/Mobile-Team/spock/releases

源代码在这里:

https://github.com/Mobile-Team/spock

网站现在还很简陋,除了会有 Spock 的文档,我还计划加入一些 Grunt 的相关文章

http://www.getspock.com/

使用

Spock 本身是基于 grunt-cli 的,所以,在使用 Spock 之前,你的项目是需要可以正常使用 grunt 的。

也就是说

$ cd grunt-demo-project
$ grunt default

运行起来是正常的。

这时候,把你的项目文件夹拖到 Spcok 上黑乎乎的地方就添加进来了。

现在大家使用时应该还有很多问题,弄个QQ群能及时反馈:29240085

查看原文

willerce 评论了回答 · 2014-03-05

求一份WebStorm7的中文入门手册

willerce 赞了回答 · 2014-02-22

解决不会Javascript如何学习Node.js?

不认识字,如何读《红楼梦》?

答:先学识字


首先必须明确两点:

  • 异步事件驱动特性不是nodejs的,而是js的。
  • js是一门语言,一门真正的编程语言。

只是那些教程的代码例子使用了浏览器而已,我一般教别人 js 的时候也是在 chrome 的控制台里面,而不是在 nodejs 的命令行里。这些都不影响你学习js。

至于 BOM,这明显是前端(浏览器)的东西,你可以不学。至于 js 特性、DOM、OO 等,都是前后端通用的。

你曾经提到你学习了 C,其实浏览器也好,nodejs 也好,都是平台,都是运行js的平台。

你学习 C 的时候,应该是在 Windows 学的吧,但是,这些也不影响你在linux下编程。

C 语言依然是 C 语言,标准库依然是标准库,只是平台不同了而已。 你先把 js 学好,然后再学 nodejs 平台提供的那些东西。

祝:学习顺利

关注 6 回答 17

willerce 评论了文章 · 2014-02-21

Grunt GUI 工具: Spock

willerce 关注了用户 · 2014-02-20

yetone @yetone

Python, Ruby, JavaScript, Golang

关注 14

willerce 关注了用户 · 2014-02-20

tcdona @tcdona

may the money keep with you —— monkey

关注 31

willerce 发布了文章 · 2014-02-20

Grunt GUI 工具: Spock

工具宣传帖!

在大家纷纷推出各种工具的 CLI 版本时,Spock 在这里显得有点格格不入,但我确实喜爱一目了然的 GUI 界面多一些。

一个原因是:搞 “外包” 并行项目太多,一次可能跑着好几个 Grunt Watch 。

还有,Windows 下的命令行太挫也是一个原因,虽然有了 Cmder 后这个情况改善了好多。

看图:

当然,你想看任务运行的详细过程也是可以的:

Windows 的 EXE 打包已经好了,Mac 版的包要是谁愿意来打一个,那自然是很好滴。

https://github.com/Mobile-Team/spock/releases

源代码在这里:

https://github.com/Mobile-Team/spock

网站现在还很简陋,除了会有 Spock 的文档,我还计划加入一些 Grunt 的相关文章

http://www.getspock.com/

使用

Spock 本身是基于 grunt-cli 的,所以,在使用 Spock 之前,你的项目是需要可以正常使用 grunt 的。

也就是说

$ cd grunt-demo-project
$ grunt default

运行起来是正常的。

这时候,把你的项目文件夹拖到 Spcok 上黑乎乎的地方就添加进来了。

现在大家使用时应该还有很多问题,弄个QQ群能及时反馈:29240085

查看原文

赞 4 收藏 4 评论 2

willerce 赞了文章 · 2014-02-17

使用Android Studio搭建开发环境

2013年Google I/O 大会首次发布了Android Studio IDE(Android平台集成开发环境)。它基于Intellij IDEA 开发环境,旨在取代Eclipse和ADT(Android开发者工具)为开发者提供更好的开发工具。既然Google一直在努力推广,相信不久以后就有望赶上Eclipse。

相比Eclipse,Android Studio IDE有自己优缺点:

  • 优点:对UI界面设计和编写代码有更好地支持,可以方便地调整设备上的多种分辨率。
  • 优点:同样支持ProGuard工具和应用签名。
  • 缺点:不过,目前版本的Android Studio不能在同一窗口中管理多个项目。每个项目都会打开一个新窗口。我猜这是借鉴了Intellij IDEA的行为,而且Google近期不会对此做出调整。
  • 缺点:虽然支持Gradle自动化构建工具,但对于刚从Eclipse平台转移过来的开发者来说还需要一段时间去学习和适应。
  • 如果你已经在系统上安装了Android SDK的话,可以从Android Developer网站下载最新版本的Android Studio。

附Android SDK下载地址:http://developer.android.com/sdk/installing/studio.html

安装android-studio-bundle-<version>.exe文件。

根据安装向导指示完成安装:

如果还没在系统上安装JDK,那你还需要安装最新版本的Java,然后设置好JDK_HOME和JAVA_HOME环境变量:

是否限制安装配置,选择“任何本机用户都能使用”,下面一项“仅供你使用”:

选择安装路径:

安装完成后,打开Android Studio项目启动IDE。

启动IDE会花上几秒钟,并显示以下启动画面:

有时Android Studio(大多数情况发生在旧版本上)会启动失败并显示以下报错:

用管理员权限重新启动以解决这个问题。

在Android Stdio的主界面,选择“Configure选项–>Project Defaults选项–> Project Structure选项”——Android SDK and configure the paths to your JDK and Android SDK:

在Android Studio 主界面中点击“New Project”:

当你点击“New Project”项后,Android Studio将显示如下对应的应用程序名称、模块名、包名。而且你可以指定编译应用程序的Android SDK版本和所支持的最低SDK版本,然后任选一个内置主题。

接下来你需要选择在手机上显示的应用程序图标,当然我们也可以按照默认设置不作改动,点击Next继续。

需要选择创建何种类型的Activity用户界面,点击Next完成创建。如果还不清楚该创建哪一种,那就选择Blank Activity来产生一个空白事件。

为新建立的Activity命名,点击Finish以完成创建。

第一次创建项目时,因为IDE会索引项目工程下载一些Gradle工具的相关包,所以会花费一点时间。

然后,在IDE界面点击Run按钮来启动项目。

IDE会提示你从可用的设备或模拟器列表中选择一个进行Android应用布署。

在这里,我从“Android Virtual device”中选择了android_2_3_3版本模拟器,再点击OK完成。如果模拟器没有提前启动,启动模拟器会花费非常长的时间。我的建议是手动启动模拟器,接着你就能在“Choose a running device”列表中找到正在运行的模拟器。

模拟器会自动生成“HelloWorld”应用并安装在你的模拟器或设备上,紧接着运行程序。


原文 Installing Android Studio and creating a new Android project on Android Studio
翻译 陈强
via importnew

查看原文

赞 1 收藏 3 评论 1

willerce 收藏了文章 · 2014-01-20

BEM —— 源自Yandex的CSS 命名方法论

人们问我最多的问题之一是在CSS类名中--__是什么意思?它们的出现是源于BEMNicolas Gallagher...

BEM

BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格,而且包含更多的信息,它们用于一个团队开发一个耗时的大项目。

重要的是要注意,我使用的基于BEM的命名方式是经过Nicolas Gallagher修改过的。这篇文章中介绍的这种命名技术并不是原始的BEM,但却是一个我更喜欢的改进版。无论实际使用了什么样的符号,它们其实都是基于同样的BEM原则。

命名约定的模式如下:

.block{}
.block__element{}
.block--modifier{}
  • .block 代表了更高级别的抽象或组件。
  • .block__element 代表.block的后代,用于形成一个完整的.block的整体。
  • .block--modifier代表.block的不同状态或不同版本。

之所以使用两个连字符和下划线而不是一个,是为了让你自己的块可以用单个连字符来界定,如:

.site-search{} /* 块 */
.site-search__field{} /* 元素 */
.site-search--full{} /* 修饰符 */

BEM的关键是光凭名字就可以告诉其他开发者某个标记是用来干什么的。通过浏览HTML代码中的class属性,你就能够明白模块之间是如何关联的:有一些仅仅是组件,有一些则是这些组件的子孙或者是元素,还有一些是组件的其他形态或者是修饰符。我们用一个类比/模型来思考一下下面的这些元素是怎么关联的:

.person{}
.person__hand{}
.person--female{}
.person--female__hand{}
.person__hand--left{}

顶级块是‘person’,它拥有一些元素,如‘hand’。一个人也会有其他形态,比如女性,这种形态进而也会拥有它自己的元素。下面我们把他们写成‘常规’CSS:

.person{}
.hand{}
.female{}
.female-hand{}
.left-hand{}    

这些‘常规’CSS都是有意义的,但是它们之间却有些脱节。就拿.female来说,是指女性人类还是某种雌性的动物?还有.hand,是在说一只钟表的指针(译注:英文中hand有指针的意思)?还是一只正在玩纸牌的手?使用BEM我们可以获得更多的描述和更加清晰的结构,单单通过我们代码中的命名就能知道元素之间的关联。BEM真是强大。

再来看一个之前用‘常规’方式命名的.site-search的例子:

<form class="site-search  full">
  <input type="text" class="field">
  <input type="Submit" value ="Search" class="button">
</form>   

这些CSS类名真是太不精确了,并不能告诉我们足够的信息。尽管我们可以用它们来完成工作,但它们确实非常含糊不清。用BEM记号法就会是下面这个样子:

<form class="site-search  site-search--full">
  <input type="text" class="site-search__field">
  <input type="Submit" value ="Search" class="site-search__button">
</form>   

我们能清晰地看到有个叫.site-search的块,他内部是一个叫.site-search__field的元素。并且.site-search还有另外一种形态叫.site-search--full

我们再来举个例子……

如果你熟悉OOCSS(面向对象CSS),那么你对media对象一定也不陌生。用BEM的方式,media对象就会是下面这个样子:

.media{}
.media__img{}
.media__img--rev{}
.media__body{}  

从这种CSS的写法上我们就已经知道.media__img.media__body一定是位于.media内部的,而且.media__img--rev.media__img的另一种形态。仅仅通过CSS选择器的名字我们就能获取到以上全部信息。

BEM的另外一个好处是针对下面这种情况:

<div class="media">
  <img data-original="logo.png" alt="Foo Corp logo" class="img-rev">
  <div class="body">
    <h3 class="alpha">Welcome to Foo Corp</h3>
    <p class="lede">Foo Corp is the best, seriously!</p>
  </div>
</div>    

光从上面的代码来看,我们根本不明白.media和.alpha两个class彼此之间是如何相互关联的?同样我们也无从知晓.body和.lede之间,或者.img-rev
和.media之间各是什么关系?从这段HTML(除非你对那个media对象非常了解)中我们也不知道这个组件是由什么组成的和它还有什么其他的形态。如果我们用BEM方式重写这段代码:

<div class="media">
  <img data-original="logo.png" alt="Foo Corp logo" class="media__img--rev">
  <div class="media__body">
    <h3 class="alpha">Welcome to Foo Corp</h3>
    <p class="lede">Foo Corp is the best, seriously!</p>
  </div>
</div>    

我们立马就能明白.media是一个块,.media__img--rev是一个加了修饰符的.media__img的变体,它是属于.media的元素。而.media__body是一个尚未被改变过的也是属于.media的元素。所有以上这些信息都通过它们的class名称就能明白,由此看来BEM确实非常实用。

丑极了!

通常人们会认为BEM这种写法难看。我敢说,如果你仅仅是因为这种代码看上去不怎么好看而羞于使用它,那么你将错失最重要的东西。除非使用BEM让代码增加了不必要的维护困难,或者这么做确实让代码更难读了,那么你在使用它之前就要三思而行了。但是,如果只是“看起来有点怪”而事实上是一种有效的手段,那么我们在开发之前当然应该充分考虑它。

是,BEM看上去确实怪怪的,但是它的好处远远超过它外观上的那点瑕疵。

BEM可能看上去有点滑稽,而且有可能导致我们输入更长的文本(大部分编辑器都有自动补全功能,而且gzip压缩将会让我们消除对文件体积的担忧),但是它依旧强大。

用还是不用BEM?

我在我的所有项目中都使用了BEM记号法,因为它的有效性已经被它自己一次又一次地证明。我也极力地建议别人使用BEM,因为它让所有东西之间的联系变得更加紧密,让团队甚至是你个人都能够更加容易地维护代码。

然而,当你真正使用BEM的时候,重要的是,请记住你没必要真的在每个地方都用上它。比如:

.caps{ text-transform:uppercase; }  

这条CSS不属于任何一个BEM范畴,它仅仅只是一条单独的样式。

另一个没有使用BEM的例子是:

.site-logo{}    

这是一个logo,我们可以把它写成BEM格式,像下面这样:

.header{}
.header__logo{} 

但我们没必要这么做。使用BEM的诀窍是,你要知道什么时候哪些东西是应该写成BEM格式的。因为某些东西确实是位于一个块的内部,但这并不意味它就是BEM中所说的元素。这个例子中,网站logo完全是恰巧在.header的内部,它也有可能在侧边栏或是页脚里面。一个元素的范围可能开始于任何上下文,因此你要确定只在你需要用到BEM的地方你才使用它。再看一个例子:

<div class="content">
  <h1 class="content__headline">Lorem ipsum dolor...</h1>
</div>    

在这个例子里,我们也许仅仅只需要另一个class,可以叫它.headline;它的样式取决于它是如何被层叠的,因为它在.content的内部;或者它只是恰巧在.content的内部。如果它是后者(即恰巧在.content的内部,而不总是在)我们就不需要使用BEM。

然而,一切都有可能潜在地用到BEM。我们再来看一下.site-logo的例子,想象一下我们想要给网站增加一点圣诞节的气氛,所以我们想有一个圣诞版的logo。于是我们有了下面的代码:

.site-logo{}
.site-logo--xmas{}  

我们可以通过使用--修饰符来快速地为我们的代码构建另一个版本。

BEM最难的部分之一是明确作用域是从哪开始和到哪结束的,以及什么时候使用(不使用)它。随着接触的多了,有了经验积累,你慢慢就会知道怎么用,这些问题也不再是问题。

结束语

所以,BEM(或BEM的变体)是一个非常有用,强大,简单的命名约定,以至于让你的前端代码更容易阅读和理解,更容易协作,更容易控制,更加健壮和明确而且更加严密。

尽管BEM看上去多少有点奇怪,但是无论什么项目,它对前端开发者都是一个巨有价值的工具。

译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

扩展阅读

by 大漠

  1. Yandex BEM/OOCSS
  2. Template Components
  3. BEM: The Block, Element, Modifier Approach To Decoupling HTML And CSS
  4. CSS methodology and frameworks
  5. Maintainable CSS with BEM
  6. A New Front-End Methodology: BEM
  7. What is BEM?
  8. Rubbing Noses With inuit.css
  9. SMACSS: Notes On Usage
  10. What is BEM?
  11. The History of BEM
  12. Start developing BEM with project-stub

原文 MindBEMding – getting your head ’round BEM syntax

翻译 David

查看原文

willerce 赞了回答 · 2013-12-13

解决为什么link标签写在head标签里面

想像一下,浏览器是一个三观正确反应有点迟钝的男人
正在用双手去抚摸 girl.html:

<html>
  <head>嗯,这里是空空如野的头部</head>
  <body>
   然后是朴素赤裸一览无余的身体 ...
    ...
    ...
    ...
    <link rel="stylesheet" /> 神马?我裤子都脱了你说要穿件漂亮的衣服看看
  </body>
</html>

所以聪明的 women.html 会提前在 head 里告诉你最美的地方在哪里

关注 0 回答 2

认证与成就

  • 获得 119 次点赞
  • 获得 7 枚徽章 获得 0 枚金徽章, 获得 2 枚银徽章, 获得 5 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2011-09-02
个人主页被 1.3k 人浏览