2017年10月_前端早读课

转载【第1095期】表格边框你知多少

说起table，相信每个人都会比较熟悉，谁不知道这个标签呢？但在实际工作中运用得多吗？来看看在 w3cshool 中它的定义：表格由标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。可能对较早接触到前端的开发

2017-10-31 00:00:00 302

转载【第1094期】图与例解读Async/Await

前言现在有在用了吗？今日早读文章由百度外卖前端@安秦翻译分享。正文从这开始~概述JavaScript ES7的async/await语法让异步promise操作起来更方便。如果你需要从多个数据库或者接口按顺序异步获取数据，你可能最终写出一坨纠缠不清的promise与回调。然而使用async/await可以让我们用更加可读、可维护的方式来表达这种逻辑。这篇教程以图表与简单例子来阐

2017-10-30 00:00:00 293

转载前端性能优化的关键时间点，你了解吗？

前言本文由网易资深前端工程师@张贤分享。正文从这开始~关于页面相应时间，有一条著名的“2-5-8原则”。当用户访问一个页面：在2秒内得到响应时，会感觉系统响应很快；在2-5秒之间得到响应时，会感觉系统的响应速度还可以；在5-8秒以内得到响应时，会感觉系统的响应速度很慢，但可以接受；而超过8秒后仍然无法得到响应时，用户会感觉系统糟透了，进而选择离开

2017-10-30 00:00:00 1008

转载【第1093期】带你入门 CSS Grid 布局

前言现在接触来得及吗？今日早读文章由@LeviDing翻译分享。正文从这开始~三月中旬的时候，有一个对于 CSS 开发者来说很重要的消息，最新版的 Firefox 和 Chrome 已经正式支 CSS Grid 这一新特性啦。没错：我们现在就可以在最流行的两大浏览器上玩转 CSS Grid 啦 ~(≧▽≦)/~为什么 CSS Grid 很重要？我们为什么要关注它？因为 C

2017-10-29 00:00:00 219

转载【第1092期】与你息息相关的业界新闻

Firebug终结，开始它的新使命在职业生涯的前 2 年，日常的前端开发用的都是 Firefox。那个时候 Chrome 浏览器还没开始走走入前端的世界里。文章称：在 10 月 24 号，Firebug 项目开发的领导者 Jan Odvarko在Mozilla官方博客上发表文章：Firebug走到生命终点。这款具有百万粉丝的，最受欢迎的web开发工具取得了很大的成功，从2005年到现在，

2017-10-28 00:00:00 231

转载【第1091期】JavaScript：理解同步、异步和事件循环

前言又到月底了，距离下一次法定节假日还有2个月时间。今日早读文章由@manxisuo分享。正文从这开始～一. 单线程我们常说“JavaScript是单线程的”。所谓单线程，是指在JS引擎中负责解释和执行JavaScript代码的线程只有一个。不妨叫它主线程。但是实际上还存在其他的线程。例如：处理AJAX请求的线程、处理DOM事件的线程、定时器线程、读写文件的线程(例如在

2017-10-27 00:00:00 270

转载【第1090期】JavaScript 字符串转数字：陷阱

前言今日早读文章由众成翻译@陈龙20155翻译分享。正文从这开始～有很多种方式可以将字符串转为数字。我能想到的方式就至少有 5 种！parseInt(num); // 默认方式 (没有基数)parseInt(num, 10); // parseInt 使用基数 (十进制)parseFloat(num) // 浮点型Number(num); // Number 构造函数~~num

2017-10-26 00:00:00 273

转载【第1088期】webpack & HTTP/2

前言1024，节日快乐。今日早读文章由@薛定谔的猫翻译投稿分享。正文从这开始～让我们从 HTTP/2 的一个传言开始：有了 HTTP/2，你就不再需要打包模块了。HTTP/2 可以多路复用，所有模块都可以并行使用同一个连接，因此多个请求不再需要多余的往返开销。每个模块都可以独立缓存。很遗憾，现实并不如意。以前的文章下面的文章详细解释了相关信息，并且做了一些实

2017-10-24 00:00:00 504

转载【第1086期】使用VH和VW实现真正的流体排版

前言今日早读文章由@脚后跟着猫翻译分享。正文从这开始～不像响应式布局，通过media query，设置几个变化点来适配，流体排版通过调整大小，适配所有设备宽度。这个方法可以使我们开发的网页，在几乎所有屏幕尺寸上都可以使用。但出于一些原因，它的使用率还远远没有响应式技术高。在印刷的历史上，排版是根深蒂固的。关于“流体”的概念，在传统思想里并不存在。这是因为，在印刷上，尺寸大小都是有固

2017-10-22 00:00:00 657

转载【第1085期】React作者的构思和演绎

前言周末了。今日早读文章由58同城前端架构师@ramroll翻译分享。正文从这开始～这是React作者在React设计之初，对整个框架的思考我通过这篇文章试图阐述我对React模型的理解，阐述我们是如何用【演绎推导】来帮助我们得到最后的设计。当然，这里有很多的前置条件是有争议的，而且这篇文章中的例子是有缺陷和漏洞。但这是我们正式地去规范化它。如果你有更好的想法去形式化

2017-10-21 00:00:00 282

转载【第1084期】写在2017的前端数据层不完全指北

前言今日早读文章由阿里数据技术与产品@诚身分享。正文从这开始～不知不觉间时间已经来到了 2017 年的末尾，在过去的一年中，关于前端数据层的讨论依然在持续升温。不论数据类型层面的 TypeScript，Flow，PropTypes，应用架构层面的 MVC，MVP，MVVM，还是应用状态层面的 Redux，MobX，RxJS，都各自拥有一群忠实的拥趸，却又谁都无法说服对方认同自己的观

2017-10-20 00:00:00 384

转载【第1083期】git commit 时使用 Emoji

前言当我看到的时候终于解惑了，还在项目中实验了一下，亲测有效。今日早读文章由知乎@尹锋分享。正文从这开始～现代人都不喜欢好好说话，动不动就斗 Emoji，当然这与苹果公司有很大的关系。自从苹果公司在 iOS 5 输入法中加入了 Emoji 表情后，这种呆萌的表情符号开始席卷全球，已经超越了国籍和文化。让人类能在虚拟世界里表达自己的情绪，城里人、乡下人，骑摩拜的、开特斯拉的，信仰耶稣的、

2017-10-19 00:00:00 381

转载【第1082期】关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案

前言现在性能优化面越来越细腻了。页面不是由代码堆砌起来然后好像看起来没有问题就可以了的。今日早读文章由沪江@蜗牛翻译分享。正文从这开始～“消除阻塞渲染的 CSS 和 JavaScript ”。这一条 Google Page Speed Insights的建议总让我困惑。当一个网页被访问时，Google 希望它仅加载对初始视图有用的内容，并使用空闲时间来加载其他内容。这种方式可

2017-10-18 00:00:00 450

转载【第1081期】JavaScript 浮点数陷阱及解法

前言今日早读文章由阿里巴巴@CamSong授权分享。正文从这开始～众所周知，JavaScript 浮点数运算时经常遇到会 0.000000001 和 0.999999999 这样奇怪的结果，如 0.1+0.2=0.30000000000000004、1-0.9=0.09999999999999998，很多人知道这是浮点数误差问题，但具体就说不清楚了。本文帮你理清这背后的原理以及解决方案

2017-10-17 00:00:00 301

转载【活动】好设计会说话@腾讯

关于 TALKTgideas Talk是由腾讯游戏官方设计团队TGideas联合腾讯大讲堂和腾讯游戏学院主办的面向业界的大型专业技术分享论坛，每年将邀请行业领域专家和大牛对腾讯游戏各专业领域（前端、视觉、创意等）做年度回顾和分享。时间2017 年 10 月 21 号 09：00地点深圳南山区科技园腾讯大厦2F 多功能厅分享会议程《QQ飞车VANS合作项目》嘉

2017-10-17 00:00:00 300

原创【第1080期】安息吧 REST API，GraphQL 长存

前言今年校招中有位厦大的童鞋有提你们现在公司有用GraphQL这个东西，之前看过这个单词但没有去太多了解。今日早读文章由众成翻译@billyma翻译分享。正文从这开始～即使与 REST API 打交道这么多年，当我第一次了解到 GraphQL 和它试图解决的问题时，我还是禁不住把本文的标题发在了 Twitter 上。请别会错意。我不是在说 GraphQL 会“杀死”

2017-10-16 00:00:00 328

原创【第1079期】反击爬虫，前端工程师的脑洞可以有多大？

不知道你有没做过爬虫的经验，如果网站不提供接口或RSS的话，一般通过脚本去分析别人家网页结构然后得出自己想要的数据？特别是对电商来说，一些很重要的商品价格都是极其敏感的。本周看到一篇由腾讯imweb@Litten 童鞋分享的 8 个产品在这块防爬虫方面做的技术手段，有几种脑洞方案挺让人惊喜的。本文可通过文末 “阅读原文“或长按下方二维码识别查看。长按识别

2017-10-15 00:00:00 356

原创【第1078期】前端之切切切切切图

前言切图的姿势都更新迭代了，越来越先进了，因为曾经受过伤害。今日早读文章由百度EUX@陈蔓青授权分享。正文从这开始～身为前端，除了与风格迥异的代码打交道，还有一个很常见的就是跟设计师对接，从他们提供的 psd 里面扣出需要用到的小图标等等。下面就讲讲切图的各种姿势photoshop快速导出法首先来一个很傻瓜的也很常用的一个方法，对于少量图标适用：将你想要

2017-10-14 00:00:00 327

原创【第1077期】如何准备一次技术面试（附一套前端面试题）

前言在面试官眼里的简历应该体现哪些？更看到的是职场的经验分享。今日早读文章由知乎@尹锋投稿分享。正文从这开始～在职业生涯中，可能因为给的钱不够，可能因为委屈了，也可能看到了更好的机会，也可能因为被裁掉了，都会想要换个工作。如果决定了，在找工作之前尽量好好准备，我觉得花上一个月时间准备都不为过。这里就从简历、面试和职业规划几个方面和大家聊一下，如何准备一次技术面试。因为我是前端工程师，所

2017-10-13 00:00:00 437

原创【第1076期】如何无痛降低 if else 面条代码复杂度

前言今日早读文章由美团点评 @ewind 授权分享。正文从这开始～相信不少同学在维护老项目时，都遇到过在深深的 if else 之间纠缠的业务逻辑。面对这样的一团乱麻，简单粗暴地继续增量修改常常只会让复杂度越来越高，可读性越来越差，有没有固定的套路来梳理它呢？这里分享三种简单通用的重构方式。什么是面条代码所谓的【面条代码】，常见于对复杂业务流程的处理中。它一般会满足这么几个特点

2017-10-12 00:00:00 321

原创【第1075期】webpack 应用编译优化之路

前言本文由滴滴出行@苗典授权分享。正文从这开始～目前大家使用最多也是最广泛的应用打包工具就是 webpack 了，除去 webpack 本身已经提供的优化能力（例如，Tree Shaking、Code Splitting 等）之外，我们还能做哪些事情呢，本篇主要就为大家介绍下滴滴 WebApp 团队在这条路上的一些探索。现在越来越多的项目都使用 ES2015+ 开发，并且搭配 we

2017-10-11 00:00:00 516

原创【第1074期】写给前端应届生的职业规划建议

前言今日早读文章由去哪儿资深前端@林洋授权分享。正文从这开始～林洋，YMFE 资深前端工程师，专注于移动前端，着眼于工程流程化近一年多的时间，笔者在公司中担任过应届生导师、实习生导师、应届生项目导师等一系列导师角色。期间，笔者发现一些即将和准备成为前端攻城狮的同学其实并没有明确前端真正的核心和定位，也没有给自己制定一个学习和发展的方向。当初选择前端这个职业，也仅仅只是为了

2017-10-10 00:00:00 2845 1

原创跟随 Google 工程师学习前端开发，是种怎样的体验？

迈出通往前端开发的第一步，你需要硅谷顶级工程师帮你夯实基础。仅需4个月的时间，你就可以跟随 Google 等硅谷名企工程师，学习网页开发的基本运作原理和应用知识，完成一系列实战项目，添加到个人作品集，成为硅谷认证的前端开发人才。系统掌握前端技能，你只差迈出这一步。掌握硅谷最前沿的前端开发技能和2000个腾讯工程师做同学项目由硅谷前沿技术学习平台、腾讯官方合作伙伴 Udaci

2017-10-09 00:00:00 298

原创【第1073期】巧用匿名函数重构你的代码

前言国庆七天，大家的朋友圈摄影比赛如何啊？今日早读文章由@Mapping分享。正文从这开始～匿名函数最早是LISP语言引入，后面发展为不仅是函数式语言所特有，在解释型语言和编译型语言中也越来越多地看到匿名函数的身影，它或许有个更潮的名字叫 lambda 表达式。闭包多是用匿名函数实现，在匿名函数中引用了外部变量，那这个匿名函数就形成了闭包。由于闭包和匿名函数之间有着千丝万缕的关

2017-10-09 00:00:00 265

原创【视频】webpack打包机制及调试优化

前言今天带来的是 @Alexey Ivanov 在今年FEDAY分享的《webpack打包机制及调试优化》概要webpack是目前大型前端项目的事实标准打包工具。用它的人很多，但是大部分人都把它当成黑箱——你把文件放到某个地方，在配置文件里写一些神奇的单词，然后见证奇迹。Webpack的打包机制如何工作？不同的配置项如何影响输出结果？如何调试和优化打包过程？让我来为你解惑。

2017-10-08 00:00:00 469

原创【视频】如何用JavaScript做好一个大型应用

前言今天由钉钉 @ 云际在今年 FEDAY 分享的《如何用JavaScript做好一个大型应用》概要钉钉是国内企业级市场的领军应用，是一个业务逻辑复杂，实时性要求极高的应用，是国内用户量最大使用nw.js构建的桌面应用。我们基于nw.js,使用Web技术，持续高速迭代了三年，帮助产品快速占领了市场，目前超过10W行代码，依然保持高速迭代，快速稳健的演进支持瞬息万变的市场竞争，来看钉钉是

2017-10-07 00:00:00 246

原创【视频】从Cycle.js谈函数式与响应式编程

前言已经时间过一半了。今天由美团 @ 叶俊星在今年 FEDAY 分享的《从Cycle.js谈函数式与响应式编程》概要函数式编程使我们的代码变得可预测，响应式编程抽象了数据的流动。有没有想过如果我们把用户也看作是一个函数，把人机交互抽象成数据的流动，会怎样影响我们编程？ Cycle.js 为我们提供了一种全新的前端开发思路，带来了更自然的编程方式，让我们一起来探讨一下。

2017-10-06 00:00:00 255

原创【视频】链家工程化实践

前言今天由链家 @ 杨永林（北教主）在今年 FEDAY 分享的《链家工程化实践》概要从事前端行业十余年，长期关注前端工程化实践与Web性能优化。近年来在链家的工作致力于前端开发效率的提升。

2017-10-05 00:00:00 230

前言今天由京东 @ 刘威在今年 FEDAY 分享的《基于React Native的跨三端技术实践》概要熟悉前端团队打造、前端工程化，关注前端和客户端技术。曾带领团队开发京东前端集成解决方案、跨平台架构实践方案。跨三端架构设计思路，相关工具、组件、系统介绍，以及相关落地实践。最后，为你推荐：【第1066期】重新授权许可React、Jest、Flow 与 Immutable.js【第565期】京东前端

2017-10-04 00:00:00 435

原创【连载】小马过河 —— Angular 学起来难吗？

Angular 学起来难吗？答案是：不知道。准确的说应该是 "因人而异"。我曾经说过：任何卖包治百病的大力丸的都是骗子，任何逢人就说一项技术很简单的也是骗子 —— 你连对方的技术背景都不问就敢说很简单，这跟医生不诊断就开药有什么区别？不过是莆田系的那一套罢了。对纯而又纯的萌新……对于那些没有任何技术背景（无论前后端还是App）的萌新来讲，Angular 是很难的。Angular 的设计目标是让你写

2017-10-03 00:00:00 941

原创【视频】WebAssembly 在白鹭引擎中的实践

前言今天由白鹭引擎 @ 王泽在今年 FEDAY 分享的《WebAssembly 在白鹭引擎中的实践》概要白鹭引擎是目前HTML5游戏行业最受欢迎的游戏引擎，在最新的5.0版本中加入了WebAssembly渲染器的支持。我们将向大家分享白鹭如何运用WebAssembly切实提升游戏的渲染性能，以及这个过程中的“崎岖坎坷之路”。

2017-10-03 00:00:00 388

前端早读课