前端开发聚合、分享、期刊订阅类网站收集

前端技术日新月异,及时了解前端开发最新最前沿的技术资讯,对于前端开发攻城狮的成长进步来说非常重要。分享这些年收藏的几个前端开发聚合、分享、期刊订阅类网站。欢迎大家留言补充。

JavaScript Weekly

一个总结 JavaScript 新闻和文章的免费电子邮件周刊。http://javascriptweekly.com/ 继续阅读

2017年前端开发工具趋势

你有两年以上的前端开发经验吗?你会用 Sass 和 Autoprefixer 等高级的CSS辅助技能吗?你的 JavaScript 知识是否融汇贯通,你是否喜欢使用 Gulp , npm 和 jQuery ?如果是这样,根据 Ashley Nolan 的前端问卷调查,你是一个典型的前端开发工程师。

谎言,该死的谎言,统计数字和调查问卷

愚人码头注:谎言,该死的谎言,统计数字(英文:Lies, damned lies, and statistics),是一句著名的西方谚语。主要描述数字的说服能力,特别是用来讽刺一些使用统计数字支持、但毫无说服力的分析报告,以及人们倾向于贬低那些不支持其立场的统计结论。 维基百科

诸如此类的调查有助于你发现新工具和你的知识短板。至本文撰写时,本次问卷调查收到了5,254份答复,这是比大多数民意调查更具有样本价值。但是,调研结果是否代表真相还是应该抱审慎态度。。。

全球性的统计结果

这次问卷调查是全球性的,但将主要来自英语国家。 在其他地方开发或使用的流行工具可能被忽略。 继续阅读

Chrome DevTools – 检查动画

使用Chrome DevTools Animations(动画)检查器检查和修改动画。

animation inspector

TL;DR

  • 通过打开Animation Inspector(动画检查器)捕获动画。它会自动检测动画并将它们分组。
  • 通过减慢动画,重播动画,或查看源代码,来检查动画。
  • 通过更改动画的时间,延迟,持续时间或关键帧偏移来修改动画。

概述

在Chrome DevTools动画检查主要有两个目的。

  • 检查动画。 您希望减慢,重播或查看动画组的源代码。
  • 修改动画。 您想要修改动画组的时间,延迟,持续时间或关键帧偏移。 目前不支持贝塞尔编辑和关键帧编辑。

动画检查支持CSS动画,CSS转换和web动画。目前不支持requestAnimationFrame动画。

什么是动画组?

动画组是一组看起来彼此相关的动画。目前,web中没有真正的组动画概念,因此运动设计师和开发人员必须组合和计时单个动画,以使它们看起来是一个连贯的视觉效果。Animation Inspector(动画检查器)根据开始时间(不包括延迟等)预测哪些动画相关,并将它们并排分组。换句话说,在同一脚本块中触发的一组动画会被分到一组,但如果它们是异步的,那么它们将被分别分组。

开始

有两种打开动画检查器的方法:

  • 打开Elements(元素)面板,找到Styles(样式)窗格,然后按下 Animations(动画)按钮(animations button )。
  • 打开Command Menu(命令菜单)和类型Drawer: Show Animations

继续阅读

Chrome DevTools – 编辑CSS样式

使用Styles(样式)窗格修改与元素关联的CSS样式。

Styles pane

TL;DR

  • Styles(样式)窗格允许您以尽可能多的方式更改本地CSS,包括编辑现有样式,添加新样式,添加样式规则。
  • 如果你想要样式持久(他们页面重新加载而丢失),您需要将它们持久化到您的开发工作区。

检查应用到元素的样式

选择一个元素[Select an element] 来检查它的样式。Styles(样式)窗格将显示所有应用于所选元素的CSS规则,优先级从高到低展示: 继续阅读

降低样式计算的范围和复杂度

添加或移除一个DOM元素、修改元素属性和样式类、应用动画效果等操作,都会引起DOM结构的改变,从而导致浏览器需要重新计算每个元素的样式、对页面或其一部分重新布局(多数情况下)。这就是所谓的样式计算。

TL;DR

  • 降低样式选择器的复杂度;使用基于class的方式,比如BEM。
  • 减少需要执行样式计算的元素的个数。

计算样式的第一步是创建一套匹配的样式选择器,浏览器就是靠它们来对一个元素应用样式的。

第二步是根据匹配的样式选择器来获取对应的具体样式规则,计算出最终具体有哪些样式是要应用在DOM元素上的。在Blink(Chrome和Opera的渲染引擎)中,至少从现在来看,以上两步在时间消耗上是差不多的。 继续阅读

CSS计数器(counter)入门

7jur9kmmsuuwej7cexpk_getting-started-with-css-counters

作为一名WEB开发者,恰当的表示信息是一项重要的工作。正恰当的显示信息一种最常见的方式是通过层次结构表示,回答“先发生什么?”这个问题。

层次可以通过对对象编号表示。在CSS中,除了有序列表<ol></ol>,没有其他元素允许我们增加顺序。如果我们想显示数字,我们不得不做一些预处理。 跟踪索引,确保自动递增等。类似这样:

<ul class="numbered-list">
    <?php for ($i = 1; $i <= $posts->total_count; $i++): ?>
    <li class="numbered-list__item">
        <span class="numbered-list__counter">
            <?php echo $i ?>
        </span>
        <!-- Remaining markup -->
    </li>
    <?php endfor ?>
</ul>

这是一个很好的点子,但它有其局限性。如果我们想使用字母,罗马数字,希腊字符等作为索引序号,都需要使用自定义的库来实现。 继续阅读

5个不常用的CSS选择器

如果你是新的CSSer,您使用选择器可能仅限于类名(class),ID和一般的元素(tag)。事实上,总共有38 CSS选择器,有些很复杂。

这里用5个你可能不知道的 CSS选择器,和他们的实用案例。

选择器 类型 描述
foo:empty 结构性伪类 一个没有子元素的foo元素
foo::first-letter 和
foo::first-line
伪元素 foo元素的第一个字母和第一行
foo:not(x) 伪类 排除x属性后的所有foo元素
foo:lang(de) 伪类 一个应用德语的foo元素
foo:target 伪类 一个指向URI的目标foo元素

:empty

:empty伪类表示一个元素没有子元素。空格,文本节点,或空的子元素都可以被认为是子元素,但不包括HTML注释。:empty伪类可用于根据元素有无子元素而呈现不同的样式。

一个例子,比如警报消息框。我们只希望他们能够在某些情况下出现,比如,当容器内有文本内容的时候就显示,否则就隐藏,例如 – 继续阅读

:target 伪类使用技巧

什么是CSS伪类?

通常选择器不能表现HTML元素或属性的状态,我们可以在CSS选择器上添加伪类表示元素的状态、特征。伪类名写在选择器的:冒号后面,必要时可以添加(),例如:#comments:not(:target)

:target 伪类用来指定那些包含片段标识符的 URL 的目标元素样式。 例如:http://www.css88.com/demo/target-selector/#target-test这个 URL 包含了 #target-test 片段标识符。 在HTML中, 标识符是元素的id(或者name属性)。 这个示例 URL 指向的是ID为”target-test”的元素 。看看这个最简单的例子,页面上有个元素,如下:

<div id="target-test">这个元素的id为"target-test"</div>

添加CSS代码:

#target-test {
    background-color: transparent;
    border-bottom: 3px solid #ffdb3a;
    font-weight: 700;
}
#target-test:target {
    background-color: #ffdb3a;
}

点击查看:http://www.css88.com/demo/target-selector/

当然这个是最简单的例子,下面我介绍几个有意思的例子。 继续阅读

介绍两个移动端使用的WebKit私有属性-webkit-touch-callout和-webkit-tap-highlight-color

-webkit-touch-callout

当你触摸并按住触摸目标时候,禁止或显示系统默认菜单。在iOS上,当你触摸并按住触摸的目标,比如一个链接,Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。

具体查看http://www.css88.com/webkit/-webkit-touch-callout/

 

-webkit-tap-highlight-color 

当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时,覆盖显示的高亮颜色。

该属性可以只设置透明度。如果未设置透明度,iOS Safari使用默认的透明度。当透明度设为0,则会禁用此属性;当透明度设为1,元素在点击时不可见。

具体查看http://www.css88.com/webkit/-webkit-tap-highlight-color/

Github 的 CSS 风格指南

这个CSS风格指南是在GitHub内部用于应用程序的指南。我们鼓励您建立一个适合你自己团队的风格指南。在你阅读这个之前,你需要大致了解SCSS语法和KSS文档。虽然我们通过KSS文档把风格移植到了SCSS上,但请务必立刻升级整个元素的CSS。不要混合少量SCSS和无格式的CSS。

编码风格:

  • 用两个空格的“soft-tabs”来缩进
  • 在属性声明的“:”后加上空格
  • 在规则声明后的“{”前加上空格
  • 使用十六进制颜色代码#000,如果不使用RGBA
  • 使用//来做注释块(而不是/**/)
  • 文档风格与KSS相同

这里有个好的语法示例:

// This is a good example!
.styleguide-format {
  border: 1px solid #0f0;
  color: #000;
  background: rgba(0,0,0,0.5);
}

继续阅读