前端早读课-CSDN博客

原创早读君：4年的陪伴，继续同行！

2013年11月22号分享了第一篇《找时间从事有助于成长的工作》的文章，那个时候读者就只有我自己一个人。2017年11月22号前端早读课已经推送了1117篇文章了，与6万+读者同行。今天前端早读课，4周年了。陪伴，是最长情的告白。不忘初心，早读课发起了众筹纪念款卫衣和送书活动。一：筹备一个多月的4周年纪念款卫衣众筹中，欢迎认筹长按二维码，进行了解更多

2017-11-22 00:00:00 230

原创【第1116期】前端需要了解的 SSO 与 CAS 知识

前言今日早读文章由丁香园@丁香园F2E授权分享。正文从这开始～不管是什么公司，只要产品数量大于一个，那么单点登录势必是绕不过去的一个问题。作为前端程序员，我们对其虽然接触不多，但适当的了解还是必要的。本文就来谈谈单点登录相关的问题。前置知识了解 SSO，最好具备以下知识。当然，如果不是特别熟，也不影响阅读。cookie及session浏览器同源策略及跨域

2017-11-21 00:00:00 335

转载【第1115期】Puppeteer: 更友好的 Headless Chrome Node API

前言前几天推送的这个哇，下载前端早读课PDF啦主要用的技术就是今日用的这个。今日早读文章由@谦行分享。正文从这开始～很早很早之前，前端就有了对 headless 浏览器的需求，最多的应用场景有两个UI 自动化测试：摆脱手工浏览点击页面确认功能模式爬虫：解决页面内容异步加载等问题也就有了很多杰出的实现，前端经常使用的莫过于 PhantomJS 和 sel

2017-11-20 00:00:00 1397

原创做前端好还是Java好？看这三方面

前言从今年的校招来看，java的上升的趋势相比往年来说非常明显。正文从这开始～这几年来伴随着互联网的迅速发展，新兴互联网产业的兴起，传统行业也逐渐开始互联网化，使得互联网职业在这样的背景下成了备受瞩目的热门职业，其中“前端开发”和“Java开发”就是热门职业其中之二，两者在关注度和热度上不分伯仲，但外界对他们得评价也是褒贬不一，随着互联网的继续发展，前端，Java工程师人才缺口大的现状

2017-11-20 00:00:00 1160

转载【第1114期】打造高性能剪切动画

前言今天开始大部分地区都降温了，而且降的幅度很大。今日早读文章由布谷前端@程松翻译分享。正文从这开始～在谷歌的产品中我们经常会看到各种各样的交互动画，对于前端开发来说实现动画效果也是经常遇到且头疼的事情，原作者 Paul Lewis 是谷歌的一名工程师，在这篇文章中我们将探讨如何实现如下的交互设计上面的交互效果是将一个菜单分为收起状态和展开状态，在收起状态下只展现收起状态下的一

2017-11-19 00:00:00 214

原创【第1113期】Firefox Quantum、Google Chrome 63 Beta

前言一提到火狐就很有历史年代感，在chrome之前基本开发都靠它。本周代号为Quantum发布，你还会用它吗？今日早读文章由@xuyuehang，@cnbeta带来的分享。正文从这开始～Firefox Quantum历经数月测试后于 11 月 14 日发布了 Firefox 57.0 正式版，又称 Firefox Quantum。这是一个非常重要的版本，因为它对浏览器的性能，

2017-11-18 00:00:00 237

原创【第1112期】前端 Console 调试小技巧

前言调试的前几天刚分享过14式，这次再巩固一下，有几个之前没有的。今日早读文章由@lsvih翻译分享。正文从这开始～开发者们在开发的过程中会无意地产生一些 bug。bug 越老，找到并修复它的难度就越高。在本系列的文章中，我将试着向你展示如何使用 Google Chrome 开发者工具、Chrome 插件以及 WebStorm 进行调试。这篇文章将介绍最常用的调试工具 —— Chr

2017-11-17 00:00:00 523

原创【第1111期】Subresource Integrity 介绍

前言SRI，前两天才见过这个词。不知道你了解过吗？今日早读文章由@Jerry Qu 分享。正文从这开始～这几天，GitHub 宣布启用 SRI 策略，用来减少由「托管在 CDN 的资源被篡改」而引入的 XSS 等风险。很多小伙伴对此表示关注。那么 SRI 究竟是什么，如何使用 SRI，它的适用场景和局限性是什么？本文逐一解答。SRI 是什么？SRI 是 Subresource

2017-11-16 00:00:00 840

原创拥抱大前端盘点那些值得你了解的最佳开发实践

前言是否每次都被上千的前端技术会议门票所囊中羞涩？是否被时间错不开，地点太遥远所困扰？现在这些问题都不是问题了，11月25号SDCC 2017“前端技术实战线上峰会”邀请的6位前端技术专家等你来撩。正文从这开始～前端领域生态繁荣，工具不断推陈出新，可谓群雄割据且各有千秋。企业及前端开发者在实际开发中可选择的空间大大增加，抑或虽已确定了技术栈，但实际开发中却时不时遭遇各种“坑”的牵绊

2017-11-15 00:00:00 590

转载【第1110期】SVG 路径动画简易指南

前言惊觉发现分享js相关文章太多了。今日早读文章由酷家乐前端团队@蓝岚翻译分享。正文从这开始～任何有开发经验的前端工程师都会考虑到不成体系的设备生态所带来的挑战。设备间不同的屏幕尺寸、分辨率和比例使得产品难以提供一致的体验，对于那些对产品有着像素级完美追求的人来说这种体验差异尤其显著！SVG（可缩放的矢量图形）解决了上文中提到的部分问题，而且做得更好。尽管 SVG 有它的局限性，但

2017-11-15 00:00:00 531

转载哇，下载前端早读课PDF啦

一个困扰很久的问题，那就是如何更优雅的查看曾推送分享过的文章。这期间也尝试过两个方案，虽然在一定程度上能缓（tao）解（bi）这个需求，但都不是最合适的。之前的方案：利用某接口来查询，但有时间限制人工整理，既耗时也不一定能随时更新现在你只要在公众号里回复关键词目录即可获取从第 1 期到第 1104 期的目录，点击标题即可查阅文章的。或者链接:

2017-11-14 00:00:00 308

转载【第1108期】小白谈数据脱敏

前言时常在邮寄的包裹上现在名字跟电话号码也打星星了，也经常听说出去做分享的PPT也要做一些数据处理了。那这些数据脱敏都有哪些方式呢？今日早读文章由@Zhisheng Tian分享。正文从这开始～什么是数据脱敏？百度百科是这样描述的：数据脱敏是指对某些敏感信息通过脱敏规则进行数据的变形，实现敏感隐私数据的可靠保护。在涉及客户安全数据或者一些商业性敏感数据的情况下，在不违反系统

2017-11-13 00:00:00 1713

转载【第1107期】iPhone X 适配手Q H5页面通用解决方案

前言前段时间一堆App更新其中有一条原因就是适配iPhoneX。现在QA也逐渐也iPhoneX的bug给开发了，那如何去适配新机型呢？今日早读文章由腾讯ISUX分享。正文从这开始·目前的 H5 页面可以分为通栏页面和非通栏页面两种，每种页面都可能有底部操作栏，具体如下：通栏页面顶部通栏某些业务的一级页面多数使用了顶部通栏 banner 的效果，由于 iPhone X 在状态

2017-11-12 00:00:00 1669

转载【视频教程】webpack3.x视频教程全网首发

前言webpack的配置，谁用谁知道。今天双十一，有打折～讲师介绍@技术胖网名：技术胖，10年一线互联网程序开发经验（仍在前端领域奋力搬砖），做过J2EE和PHP，现在主要关注前端技术。每年帮助50万以上前端爱好者学习。除程序员身份之外，讲师还有以下身份（只在装逼时使用）。掘金专栏作者，GitChat特邀讲师，纯金UED金牌讲师，CSDN学院

2017-11-11 00:00:00 2901

转载【第1106期】Element 中的键盘可访问性

前言前一段时间Element 2.0发布，本着好奇就想了解着这个开源组件库的故事。那今天就来看看来自饿了么大前端@马冉在这个开源组件中关于可访问性的分享。正文从这开始～Element 是一套基于 Vue 的桌面端组件库，于 2016 年 9 月开源，目前已经成长为 Vue 社区最受欢迎的开源项目之一。不久前我们发布了它的 2.0 版本，在这个版本中，除了新增功能外，我们还着重提升了

2017-11-11 00:00:00 400

转载【第1104期】14 个你可能不知道的 JavaScript 调试技巧

前言平时有调试的时候，可以解锁其他姿势。今日早读文章由@paradeTo翻译分享。正文从这开始～更快更高效地调试你的 JavaScript了解你的工具在完成任务时有很重要的意义。尽管 JavaScript 是出了名的难以调试，但是如果你掌握了一些小技巧，错误和 bug 解决起来就会快多了。我们收集了 14 个你必须要知道的调试技巧，希望你可以牢记以便下次你需要它们来帮助你

2017-11-09 00:00:00 393

转载【第1103期】vue 自定义指令的魅力

前言很多事情不能做过多的计划，因为计划赶不上变化。今日早读文章由富途@点点翻译分享。正文从这开始～在你初次接触一个新的Javascript框架时，会像第一次进糖果店的孩子一样。给啥拿啥，而更直接点，有些东西可以让你更容易成为一个开发者。不可避免的是，我们在用框架时都会有一个同感，就是总有些场景是框架不能帮我们完成的。Vue框架的漂亮之处在于它的功能非常强大，虽然这个框架的指令不够面

2017-11-08 00:00:00 348 1

转载【更新】剖析 iOS 11 网页适配问题

前言今天这篇是对【第1064期】剖析 iOS 11 网页适配问题文章的更新版，新增了今天分享更新的内容。正文从这开始～更新内容Webkit 文档 Designing Websites for iPhone XCSS function env()The env() function shipped in iOS 11 with the name constan

2017-11-07 00:00:00 429

转载【图书】CSS重构：样式表性能调优

前言近一两年对于 CSS 相关的图书寥寥可数，印象中上一次有关的应该就是《CSS 揭秘》，上周发现的这本有兴趣的可以看看。CSS重构：样式表性能调优作者： [美] Steve Lindstrom 译者：杜春晓司韦韦出版社：人民邮电出版社内容简介本书作为CSS重构指南，不仅展示了如何编写结构合理的CSS，以构建响应式、易于使用的网站，还介绍

2017-11-06 00:00:00 1007

转载【第1101期】HTTPS中S带来的性能损失

前言大概大家都知道为了防劫持，网站不得不用采用https。那做了这个s之后会有哪些影响呢？且看今日内容。今日早读文章由@zhitantech翻译分享。正文从这开始~本文编译自David Naylor et all, The Cost of the “S” in HTTPS, CONEXT 2014动机随着Let's Encrypt等服务的出现，使用HTTPS的成本已经十分低

2017-11-06 00:00:00 2150

转载【第1100期】经常加班，怎么兼顾个人能力提升？

前言这个问题在现实职业生涯中很常见的。可能一天上班累了回去也就躺着休息了。但同时又会产生某种焦虑感，担心被淘汰。那么如何去解决这个问题呢？今日早读文章来自 @100offer 的分享。本文由 @ 浴火小青春推荐。正文从这开始~当我们在讨论加班与提升的时候，需要首先明白，加班背后的原因。加班并不简单粗暴的等于，工作太多，正常上班时间无法完成，所以需要加班。从主观和客观上，

2017-11-05 00:00:00 291

转载【第1099期】Eruda: 手机网页调试利器

前言大家经常在移动端调试是用哪个工具呢？今天这款源于昨天团队周分享会上介绍的，这工具功能丰富了很多，是一款不错的调试利器。正文从这开始~Eruda 是一个专为手机网页前端设计的调试面板，类似 DevTools 的迷你版，其主要功能包括：捕获 console 日志检查元素状态显示性能指标捕获 XHR 请求显示本地存储Cookie 信

2017-11-04 00:00:00 338

转载想成为前端开发工程师，不能再错过这次机会了

过几天双十一就要来了，别人的购物车堆满了打折洗发水、日用品和小零食，小编偷偷看了一眼我司程序员的购物车，里面躺着2个鼠标、2个机械键盘、一副耳机、一箱维他柠檬茶......这个双十一，与其花钱买一年都用不完的便宜货，不如投资让自己受益一生的技术。今年的双十一优达学习狂欢节，你中草很久的前端硅谷课程，终于有机会拔草了！全球超过900万程序员，在Udacity突破自我，掌握改变世界的前

2017-11-03 00:00:00 129

转载【第1097期】构建离线web应用之一

前言本文由前端早读课专栏作者@墨白翻译分享。正文从这开始~我喜欢移动app，而且也是那些坚持使用Web技术构建移动应用程序的人之一。经过技术的不断迭代（可能还有一些其它的东西），移动体验设计愈来愈平易近人，给予用户更好的体验。而今天，我们就要介绍一个新技术--渐进式 web 应用程序。在理解这个概念并自己尝试了一下之后，我觉得没有必要再做 hybrid 应用了。我们准备做这

2017-11-02 00:00:00 280

转载【第1096期】组件化设计思维 – 从规范到工具的构建与探索

前言面对日常的活动运营开发，可以自问：如何去提高整体的开发效率？如何去提高（shua）存在感并体现各自的价值去沉淀。如何由写页面到写组件或平台的价值转换。今天早读文章由阿里巴巴中文站@斓青分享。正文从这开始~阿里巴巴在中台战略的背景下，设计提效又再次推动着设计思维的变革。设计师们不仅仅需要出色地完成业务需求的设计，同时还需要思考设计的价值，也就是经常提到的最佳方案性价比。我们需要在设计

2017-11-01 00:00:00 442

转载【前端早读课Live】手把手带你折腾前端脚手架

前言时隔半年之后，前端早读课 LIVE 第二期来了，本期邀请了 58 同城金融 @ 战楼童鞋带来的定制前端脚手架的分享。自我介绍@战楼 58同城金融的前端开发同学，热爱技术，喜欢折腾，偶尔写写小文。关注尖端前端技术，移动web 开发。目标基于node开发，定制属于自己的项目脚手架本课程适用爱折腾的小白前端 or 对node感兴趣的同学 or 想提高团队工作效率的Lead

2017-11-01 00:00:00 440

转载【第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 1011

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

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

2017-10-29 00:00:00 220

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

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

2017-10-28 00:00:00 232

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

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

2017-10-27 00:00:00 271

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

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

2017-10-26 00:00:00 274

转载【第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 285

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

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

2017-10-20 00:00:00 387

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

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

2017-10-19 00:00:00 382

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

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

2017-10-18 00:00:00 451

转载【第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

空空如也

空空如也