前端资讯周报 3.6 - 3.12: 对学习Javascript最有帮助的三本书,以及HTML标题的迷思
每周一我都会分享上一周我订阅的技术站点中,和解决问题的过程中阅读到的值得分享的文章。
毕竟个人的阅读量有限,也欢迎大家留言或者私信给我你们阅读到的,对你们前端技术有帮助的任何内容,题材不限,语言不限。可以是技术博客,也可以是知乎或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的书是一本或者几本?在留言分享给大家吧
最近有很多关于HTML中“标题(<h1>, <h2>...<h6>)”标签的讨论。比如说有的观点认为HTML标记中的标题在DOM中的关系其实是平级的,甚至和相邻的段落也是平级的,这没有起到标题的作用,没有表达标题和它内容之间的从属关系。这篇文章从这个问题出发,谈了很多很多,有标准、可读性、样式、困境。这篇文章可能对你的技术进步不大,但是会使得你对语义化标签,对HTML的理解很有帮助,简单来说它能增长你的觉悟。但是文字读起来有点困难,对我来说。
即使你还没有接触过 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动画的方法
Airbnb的研发团队决定使用React重构他们的搜索页面。页面界面设计虽简单,但页面的实现确实非常复杂的,包含了各种实验,本地化和营销需求,更致命的是缺少测试覆盖。那么如何保证重构之后的版本不会有功能上的缺失呢?通过对比重构前后页面的各项指标来发现问题。
技术前瞻
CSS Grid Layout: A New Layout Module for the Web
本周的大新闻是更多的浏览器支持CSS Grid(本周Chrome 57 和 Firefox 52发布 )了!关于CSS Grid的教程有很多,精选了这一篇webkit官方发布的CSS Grid教程奉献给大家
或者你这辈子也不会用到web audio API,但我个人觉得这篇文章介绍的内容很好玩,做出的DEMO也很有意思,比如你可以尝试下面这个DEMO:Play the Xylophone (Web Audio API)
Ethan Marcotte喜欢在设计页面时把页面当作一个拥有许多丰富组件的系统。每一个组件都拥有自己的响应式规则,每个组件都有自己的breakpoints,分而治之设计每一个组件最后再组装为一整个页面。但在目前 media query 只能返回当前页面的整体状态,而无法查询单个元素所处的环境。这篇文章通过了实际的例子说明了这种困境以及给他带来的设计中的不便,提出了 container query (或者说element query)的必要性
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是Google推出的一套前端框。与我们常用的前端框架不同的是,它是一套页面级别的解决方案,旨在提高页面性能。这篇文章作者担心的是,AMP这样级别的框架在扼杀互联网的创造性,你可以想象使用AMP的站点展现内容的方式局限于框架里有限的组件。更可怕的真相是,很多的站点使用AMP的目标并不是提升网站的性能,而是为了SEO优化和提升搜索结果排名
讲讲道理
这是一篇介绍日本米其林餐厅学徒成长轨迹的一篇文章,说实话我在他们要走的这条路上只看到了隐忍和吃苦,当然最后可能厚积薄发成为一代宗师。这里引发了我的一点小感想:写程序也算是一门手艺,对于手艺人来说追求技艺的精益求精应当是一件理所应当的事。在如何写好程序好这件事上也没有捷径可走,也要耐得住寂寞的。多学、多想、多做。
本文同时也发布在我的知乎专栏:前端技术漫游指南 ,欢迎大家关注
前端资讯周报 3.6 - 3.12: 对学习Javascript最有帮助的三本书,以及HTML标题的迷思的更多相关文章
- 前端资讯周报 2.27 - 3.5: 如何设计一个优秀的HTML接口,深入理解line-height
从本周起,每周一我都会分享上一周我订阅的技术站点中,和解决问题的过程中阅读到的值得分享的文章,或者视频教程,又或者图书. 个人认为国外的技术文章质量较高,而且发布的技术资讯也走在行业前沿,所以比较关注 ...
- 前端资讯周报 3.13 - 3.19: WebVR来了!以及如何优化scroll事件性能
每周一我都会分享上一周我订阅的技术站点中,和解决问题的过程中阅读到的值得分享的文章.这是迫使我学习的一个动力 本周推荐 Minecraft in WebVR with HTML Using A-Fra ...
- 学习JavaScript数据结构与算法---前端进阶系列
学习建议 1.视频学习---认知 建议:在中国慕课上找"数据结构"相关的视频教程.中国大学MOOC 推荐清华大学.北京大学.浙江大学的教程,可先试看,然后根据自身的情况选择视频进行 ...
- 前端开发周报: CSS 布局方式方式与JavaScript数据结构和算法
前端开发周报:CSS 布局方式与JavaScript动画库 1.常见 CSS 布局方式详见: 一些常见的 CSS 布局方式梳理,涉及 Flex 布局.Grid 布局.圣杯布局.双飞翼布局等.http: ...
- web前端—工作周报
2016.07.25-2016.07.29周报: 1.本周工作主要内容: A:完成了宏视云h5播放器升级及大数据上报: B:修复xk-h5播放器bug:在三星手机自带浏览器无法进行滑动seek; C ...
- 12个学习 CSS3 网站布局设计的优秀案例
网络上有很多的 CSS 画廊站点供大家对各类网站作品进行打分和评论,每天有数以百计的优秀网站被推荐上面,这对于网页设计师来说是很好的灵感来源.今天,我们选择了15赢得 CSS 设计大奖的优秀作品,帮助 ...
- 前端迷思与React.js
前端迷思与React.js 前端技术这几年蓬勃发展, 这是当时某几个项目需要做前端技术选型时, 相关资料整理, 部分评论引用自社区. 开始吧: 目前, Web 开发技术框架选型为两种的占 80% .这 ...
- 前端福利!10个短小却超实用的JavaScript 代码段
JavaScript正变得越来越流行,它已经成为前端开发的第一选择,并且利用基于JavaScript语言的NodeJS,我们也可以开发出高 性能的后端服务,甚至我还看到在硬件编程领域也出现了JavaS ...
- 201521123082 《Java程序设计》第12周学习总结
201521123082 <Java程序设计>第12周学习总结 标签(空格分隔): java 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. An ...
随机推荐
- php如何判断是手机访问还是电脑访问
<?php function isMobile(){ $useragent=isset($_SERVER['HTTP_USER_AGENT']) ? $_SERVER['HTTP_USER_AG ...
- Java线程:锁
一.锁的原理 Java中每个对象都有一个内置锁,当程序运行到非静态的synchronized同步方法上时,自动获得与正在执行的代码类的当前实例(this实例)有关的锁.获得一个对象的锁也称为获取锁.锁 ...
- spring mvc ajax请求
jar包中增加 jackson-annotations-2.5.0.jar jackson-core-2.5.0.jar jackson-databind-2.5.0.jar springmvx.xm ...
- apache软件包下载地址
主地址: http://commons.apache.org/proper/commons-loggins/download_logging.cgi 镜像1: http://apache.fayea. ...
- Fiddler 模拟请求的操作方法
此文记录使用Fidder Web Debugger工具,模拟请求的操作步骤! 首先简述一下fiddler的使用: 1.下载安装Fidder抓包工具. 2.打开fiddler发现有左边的栏有请求的url ...
- [html5] 学习笔记- html拖放
拖放是一种常见的特性,即抓取对象以后拖到另一个位置,在HTML5中,拖放是标准的一部分,任何元素都能够拖放. 1.html5拖放:(drag和drop)是HTML5标准的组成部分 拖动开始:ondra ...
- WinForm DataGridView控件、duck布局
1.DataGridView控件 显示数据表 (1)后台数据绑定: List<xxx> list = new List<xxx>(); dataGridView1.DataSo ...
- ArcGIS三种方式打断相交线------拓扑法
拓扑法:有多个layer图层相交线,选用拓扑法,将多个图层相交线打断. 新建拓扑结构: (1)单击新建"Nfg.gdb"数据库文件: (2)单击新建"XX"集合 ...
- ArcGIS Pro 简明教程(1)Pro简介
ArcGIS Pro 简明教程(1)Pro简介 ArcGIS Pro已经发布了相当的一段时间了,截至笔者写这系列文章的时候已经是1.3版本了,已经是相当完善的一个版本,基本上已经完成了原来ArcGIS ...
- JDK1.8源码阅读系列之四:HashMap (原创)
本篇随笔主要描述的是我阅读 HashMap 源码期间的对于 HashMap 的一些实现上的个人理解,用于个人备忘,有不对的地方,请指出- 接下来会从以下几个方面介绍 HashMap 源码相关知识: 1 ...