每周一我都会分享上一周我订阅的技术站点中,和解决问题的过程中阅读到的值得分享的文章。

毕竟个人的阅读量有限,也欢迎大家留言或者私信给我你们阅读到的,对你们前端技术有帮助的任何内容,题材不限,语言不限。可以是技术博客,也可以是知乎或stackoverflow的问答。

如果你觉得这篇分享给你带来了帮助,请不要吝惜的点个赞,或者把这个专栏推荐给你的朋友们,还可以关注我。谢谢啦!

本周推荐

What Is the Best Book for Learning JavaScript?

作者在这里给出了他认为适用于学习Javascript最佳的三本图书,分别是 Eloquent JavaScript,You Don’t Know JS,Effective JavaScript。这三本书覆盖了从入门到深入,从Node.js到ES6。其中的 You don't know JS 更是托管为github上的开源项目,可以免费阅读,我个人也在阅读中。当然,文章作者也再三强调这三本书只是他的个人推荐绝非是绝对的标准。对了,你觉得对你帮助最大的学习Javascript的书是一本或者几本?在留言分享给大家吧

The Document Outline Dilemma

最近有很多关于HTML中“标题(<h1>, <h2>...<h6>)”标签的讨论。比如说有的观点认为HTML标记中的标题在DOM中的关系其实是平级的,甚至和相邻的段落也是平级的,这没有起到标题的作用,没有表达标题和它内容之间的从属关系。这篇文章从这个问题出发,谈了很多很多,有标准、可读性、样式、困境。这篇文章可能对你的技术进步不大,但是会使得你对语义化标签,对HTML的理解很有帮助,简单来说它能增长你的觉悟。但是文字读起来有点困难,对我来说。

Universal Web Components

即使你还没有接触过 Web Components,你也能畅读这篇文章。这篇文章的价值在于它很好的诠释了 Web Components 背后继承自 HTML 的设计思想:Abstraction & Declarative 。即告诉浏览器你需要什么,而不是告诉浏览器如何做。这大大的简化了编程(对比一下使用脚本创建一个div标签和使用HTML创建一个div标签)。基于这个主题,接下来它展示了 Web Components 跨领域的用法,例如在 Node.js 服务端使用,用于硬件编程等。

The Unexpected Power of Viewport Units in CSS

viewport单位的入门以及5种经典用法。配合这篇 Viewport Unit Based Typography 关于如何使用viewport单位设置页面字体以及 Everything I know about Responsive Web Typography响应式排版的文章一起食用更加

Using CSS Transitions on Auto Dimensions

给某些CSS属性添加transition动画时,要求CSS属性值必须为明确的数字,而不能是auto. 这篇文章总结了四种即使在值为auto的情况下也能成功执行transition动画的方法

Moving Airbnb Search to React

Airbnb的研发团队决定使用React重构他们的搜索页面。页面界面设计虽简单,但页面的实现确实非常复杂的,包含了各种实验,本地化和营销需求,更致命的是缺少测试覆盖。那么如何保证重构之后的版本不会有功能上的缺失呢?通过对比重构前后页面的各项指标来发现问题。

技术前瞻

CSS Grid Layout: A New Layout Module for the Web

本周的大新闻是更多的浏览器支持CSS Grid(本周Chrome 57 和 Firefox 52发布 )了!关于CSS Grid的教程有很多,精选了这一篇webkit官方发布的CSS Grid教程奉献给大家

Introduction to Web Audio API

或者你这辈子也不会用到web audio API,但我个人觉得这篇文章介绍的内容很好玩,做出的DEMO也很有意思,比如你可以尝试下面这个DEMO:Play the Xylophone (Web Audio API)

On container queries

Ethan Marcotte喜欢在设计页面时把页面当作一个拥有许多丰富组件的系统。每一个组件都拥有自己的响应式规则,每个组件都有自己的breakpoints,分而治之设计每一个组件最后再组装为一整个页面。但在目前 media query 只能返回当前页面的整体状态,而无法查询单个元素所处的环境。这篇文章通过了实际的例子说明了这种困境以及给他带来的设计中的不便,提出了 container query (或者说element query)的必要性

Progressive Web App

PWA在我看来是很有前途很美好的一个技术方向(离线应用),这是一篇可以说是来自官方的介绍(因为本文作者 Addy Osmani 是谷歌的工程师,他好像是Yeoman的作者,也是图书Learning Javascript Design Patterns的作者)。围绕PWA还有一些列的技术生态值得介绍。将来可以来一个PWA专题节目

老调重弹

CSS Architecture Block-Element-Modifier (BEM)

用于设计样式结构的BEM准则是很经典的理论了,它给出了一些如何组织HTML结构以及如何根据结构命名样式的规则,这篇文章把它做了简单的介绍。想了解的朋友可以通过这篇文章入门。有兴趣的话可以继续在网上搜寻有关它的其他资料。

Learn about CSS Architecture: Atomic CSS

相对于上篇的BEM样式架构,Atomic架构感觉是一个异类。如果把BEM原则比喻为语义化的话,那么Atomic则代表可视化。我个人还是倾向BEM,但是不妨大家多听听不同的声音,见仁见智吧

React Quickly: How to Work with Forms in React

React入门篇,教你如何用React处理<Form>元素。大部分内容都很常规,我觉得其中对单向绑定和双向绑定的解释很透彻

唱唱反调

AMP and the Web

AMP是Google推出的一套前端框。与我们常用的前端框架不同的是,它是一套页面级别的解决方案,旨在提高页面性能。这篇文章作者担心的是,AMP这样级别的框架在扼杀互联网的创造性,你可以想象使用AMP的站点展现内容的方式局限于框架里有限的组件。更可怕的真相是,很多的站点使用AMP的目标并不是提升网站的性能,而是为了SEO优化和提升搜索结果排名

讲讲道理

修罗场 :日本米其林餐厅学徒的职人之路

这是一篇介绍日本米其林餐厅学徒成长轨迹的一篇文章,说实话我在他们要走的这条路上只看到了隐忍和吃苦,当然最后可能厚积薄发成为一代宗师。这里引发了我的一点小感想:写程序也算是一门手艺,对于手艺人来说追求技艺的精益求精应当是一件理所应当的事。在如何写好程序好这件事上也没有捷径可走,也要耐得住寂寞的。多学、多想、多做。

本文同时也发布在我的知乎专栏:前端技术漫游指南 ,欢迎大家关注

前端资讯周报 3.6 - 3.12: 对学习Javascript最有帮助的三本书,以及HTML标题的迷思的更多相关文章

  1. 前端资讯周报 2.27 - 3.5: 如何设计一个优秀的HTML接口,深入理解line-height

    从本周起,每周一我都会分享上一周我订阅的技术站点中,和解决问题的过程中阅读到的值得分享的文章,或者视频教程,又或者图书. 个人认为国外的技术文章质量较高,而且发布的技术资讯也走在行业前沿,所以比较关注 ...

  2. 前端资讯周报 3.13 - 3.19: WebVR来了!以及如何优化scroll事件性能

    每周一我都会分享上一周我订阅的技术站点中,和解决问题的过程中阅读到的值得分享的文章.这是迫使我学习的一个动力 本周推荐 Minecraft in WebVR with HTML Using A-Fra ...

  3. 学习JavaScript数据结构与算法---前端进阶系列

    学习建议 1.视频学习---认知 建议:在中国慕课上找"数据结构"相关的视频教程.中国大学MOOC 推荐清华大学.北京大学.浙江大学的教程,可先试看,然后根据自身的情况选择视频进行 ...

  4. 前端开发周报: CSS 布局方式方式与JavaScript数据结构和算法

    前端开发周报:CSS 布局方式与JavaScript动画库 1.常见 CSS 布局方式详见: 一些常见的 CSS 布局方式梳理,涉及 Flex 布局.Grid 布局.圣杯布局.双飞翼布局等.http: ...

  5. web前端—工作周报

    2016.07.25-2016.07.29周报: 1.本周工作主要内容: A:完成了宏视云h5播放器升级及大数据上报: B:修复xk-h5播放器bug:在三星手机自带浏览器无法进行滑动seek;  C ...

  6. 12个学习 CSS3 网站布局设计的优秀案例

    网络上有很多的 CSS 画廊站点供大家对各类网站作品进行打分和评论,每天有数以百计的优秀网站被推荐上面,这对于网页设计师来说是很好的灵感来源.今天,我们选择了15赢得 CSS 设计大奖的优秀作品,帮助 ...

  7. 前端迷思与React.js

    前端迷思与React.js 前端技术这几年蓬勃发展, 这是当时某几个项目需要做前端技术选型时, 相关资料整理, 部分评论引用自社区. 开始吧: 目前, Web 开发技术框架选型为两种的占 80% .这 ...

  8. 前端福利!10个短小却超实用的JavaScript 代码段

    JavaScript正变得越来越流行,它已经成为前端开发的第一选择,并且利用基于JavaScript语言的NodeJS,我们也可以开发出高 性能的后端服务,甚至我还看到在硬件编程领域也出现了JavaS ...

  9. 201521123082 《Java程序设计》第12周学习总结

    201521123082 <Java程序设计>第12周学习总结 标签(空格分隔): java 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. An ...

随机推荐

  1. 一个好的函数(gcd)求最小公约数

    这个函数是我无意中看到的很不错,很给力,我喜欢 是用于求最小公约数的 简单的描述就是,记gcd(a,b)表示非负整数a,b的最大公因数,那么:gcd(a,b)=gcd(b,a%b)或者gcd(a,0) ...

  2. Java多线程(学习篇)

    Java多线程:(学习篇) 1.什么是线程 2.线程状态 3.线程中断 4.线程交互 5.同步机制 6.锁机制 7.堵塞队列与堵塞栈 8.条件变量.原子量.线程池等 9.线性安全类和Callable与 ...

  3. Linux下添加shell脚本使得nginx日志每天定时切割压缩

    Linux下添加shell脚本使得nginx日志每天定时切割压缩一 简介 对于nginx的日志文件,特别是access日志,如果我们不做任何处理的话,最后这个文件将会变得非常庞大 这时,无论是出现异常 ...

  4. CodeForces758D

    D. Ability To Convert time limit per test:1 second memory limit per test:256 megabytes input:standar ...

  5. RedisRepository分享和纠错

    .mytitle { background: #2B6695; color: white; font-family: "微软雅黑", "宋体", "黑 ...

  6. Codeforces 708A Letters Cyclic Shift

    A. Letters Cyclic Shift time limit per test:1 second memory limit per test:256 megabytes input:stand ...

  7. MongoDB基础之六 索引

    一 . 索引概述和基本操作 1. 索引提高查询速度,降低写入速度,权衡常用的查询字段,不必在太多列上建索引2. 在mongodb中,索引可以按字段升序/降序来创建,便于排序3. 默认是用btree来组 ...

  8. 笑谈ArcToolbox (2) 开启ArcToolbox的钥匙

    笑谈ArcToolbox (2) 开启ArcToolbox的钥匙 by 李远祥 GIS人遇到ArcToolbox就像找到了宝藏一样兴奋,但并不是每个找到宝藏的人都具备开启宝藏的钥匙.有时候功能强大并不 ...

  9. js-tab选项卡

    说道tab选项卡,顾名思义,就是切换不同内容分类,想必学过前端的都知道,tab有很多方法可以实现,最近刚跟师傅学了一种,感觉很简便,很实用哦.    一.先看一下结果 二.可以根据图来布局,首先上面标 ...

  10. weex官方demo weex-hackernews代码解读(1)

    一.介绍 weex 是阿里出品的一个类似RN的框架,可以使用前端技术来开发移动应用,实现一份代码支持H5,IOS和Android.最新版本的weex已默认将vue.js作为前端框架,而weex-hac ...