Giter Club home page Giter Club logo

it-technology-weekly's Introduction

it-technology-weekly's People

Contributors

dependabot[bot] avatar fengshangwuqi avatar lmagic16 avatar phobal avatar wild-flame avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

it-technology-weekly's Issues

技术周刊 - 第 17 周

【前端】

1. MVVM与redux的概念类比

 
太阳下没有新事,许多东西是旧酒装新瓶,司徒正美大大如是说。在他这篇专栏文章中,类比了 MVVM中的 getter,setter 和Redux的 reducer,getState等几种概念,详细阐述了它们各自背后的实现原理,非常值得一读。

详情:https://zhuanlan.zhihu.com/p/38025611

2. JavaScript 是如何工作的:内存管理 + 处理常见的 4 种内存泄漏

JavaScrip 在对象被创建时分配内存,并在对象不再使用时“自动”释放内存,这个过程被称为垃圾回收。这种看似“自动”释放资源的特性是导致混乱的来源,它给了 JavaScript(和其他高级语言)开发者们一种错觉,他们可以选择不去关心内存管理。这是一种错误的观念。

即使使用高级语言,开发者也应该对内存管理有一些理解(至少关于基本的内存管理)。有时,自动内存管理存在的问题(比如垃圾回收器的错误或内存限制等)要求开发者需要理解内存管理,才能处理的更合适(或找到代价最少的替代方案)。

详情:https://blog.sessionstack.com/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks-3f28b94cfbec
翻译版链接:https://zhuanlan.zhihu.com/p/37863088

3. 领域驱动设计

来源: 语雀

随着我们解决的场景越来越专业化和复杂化,大型SPA应用的流行,前端承担的职责越来越多。代码的质量和系统的完整性越来越难把握。很容易导致迭代着迭代着发现代码改不动了。最后只能新起炉灶,重新开发。归根到底在于复杂度的失控,本文会尝试分析其中的问题以及从前端如何应用领域模型开发的角度给出一些建议

详情: https://yuque.com/mayiprototeam/gfyt69/oq14ia

4. Sonar 面向移动开发工程师的桌面调试平台

来源: github trending

Facebook 开源的 Sonar 是调试 iOS 和 Android 应用程序的桌面平台,通过桌面界面就能可视化、检查和控制你的应用程序,它还提供了一系列有用的工具,包括日志查看、交互式布局检查器和网络检查器

详情: https://github.com/facebook/Sonar?utm_source=gold_browser_extension

5. Node 创始人否定 Node

Nodejs 的创始人 Ryan Dahl 一共做过两次关于 JS 的公开演讲。 一次是2009年宣布 Node 项目诞生,另一次是九年后的昨天,演讲题目是《Node 的设计失误》。

这个演讲的内容非常火爆,基本上把 Node 全部否定了,认为 libuv 和 npm(包括 package.json)都是设计错误,怪不得 JS 圈里面没人作声。他觉得,Node 已经无药可救了,所以动手写了一个新项目 deno(这个名字是 node 的拆分,表示 node 重组)。

详情:http://tinyclouds.org/jsconf2018.pdf

6. Vue Native:使用Vue.js构建原生移动应用程序

来源:jsweekly

React 拥有 React Native,现在如果你是 Vue.js 开发者,你可以试试这个。 与 React Native 不同,这不是来自同一团队的正式项目,本质上它是 React Native 本身的 Vue 封装。

详情:https://vue-native.io/

7. 你可能用错了 async/await

ES7 引入的 async/await 是 JavaScript 异步编程的一个重大改进,提供了在不阻塞主线程的情况下使用同步代码异步访问资源的能力。在本文中,我们将从不同的角度探索 async/await,并演示如何正确有效地使用它们。

详情:https://hackernoon.com/javascript-async-await-the-good-part-pitfalls-and-how-to-use-9b759ca21cda

8. Sucrase:一个新的 JavaScript 转码器,号称比 Babel 快20倍

Sucrase 是 Babel 的另一种选择,允许您更快的开发构建。Sucrase 并没有将大量的 JS 特性编译成 ES5,而是假定您将目标定位于一个现代 JS 运行时,并且专注于编译非标准语言扩展: JSX,TypeScript 或 Flow。Sucrase 的解析器是从 Babel 的解析器中抽出来的,并将其细化为专注于解决 Babel 的一小部分。 如果它正合您意,希望 Sucrase 可以给您带来更好的开发体验。

详情: https://github.com/alangpierce/sucrase

【后端】

1. 设计模式集锦

软件中的设计模式是针对常见问题的通用可重用解决方案。该项目包括各种语言和框架(如 C++、Go、Java、JavaScript、PHP、Python、Ruby 等)的设计模式、通用设计模式、云设计模式、微服务和分布式系统、物联网、大数据、数据库、移动开发和前端开发中的设计模式等。

详情:https://github.com/DovAmir/awesome-design-patterns

2. 用 Python 分析 4W 场球赛,2018 世界杯冠军竟是...

比赛已经开始,我们不妨用 Python 来对参赛队伍的实力情况进行分析,并大胆的预测下本届世界杯的夺冠热门球队吧!通过数据分析,可以发现很多有趣的结果,比如:
找出哪些队伍是首次进入世界杯的黑马队伍
;找出 2018 年 32 强中之前已经进入过世界杯,但在世界杯上没有赢得过一场比赛的队伍。

详情:https://mp.weixin.qq.com/s?__biz=MjM5NzM0MjcyMQ==&mid=2650081623&idx=1&sn=b1073c2139cae81a54819bcde8c1df70

3. Deepin 操作系统面临重重困境,创始人兼 CTO 已离职

 
作为国内做的最好的 Linux 发行版,源自 Debian sid 的 Deepin 目前正面临重重困境,新版本不断延期,开发人员离职,bug 长期得不到修复,和 Debian/Ubuntu 的兼容性问题也面临越来越严重的挑战。
如今,雪上加霜的事情发生了,其联合创始人王勇离职,Deepin 的前途更是坎坷。

详情:https://www.oschina.net/news/97099/deeepin-cto-leaved-his-job

4. TensorFlow 基础入门

这篇文章的内容来自课程 [Improving Deep Neural Networks: Hyperparameter Tuning, Regularization and Optimization] 的编程练习。courseraT上的编程练习设计得非常贴心,一步步引导学员完成练习,对于编程基础薄弱的同学尤为友好。

详情:https://mp.weixin.qq.com/s/9Jg_FIejfRt6_DNcpYXVyw

5. Go 程序的持续分析

通过使用 Stackdriver Profiler,可以看到谁在使用 CPU 和内存,可以持续地监控我们的生产服务以争用和阻止配置文件,并且可以生成分析和报告,并轻松地告诉我们可以进行哪些有重要影响的优化。

详情:https://linux.cn/article-9713-1.html

6. Python 中 logging 模块的基本用法

在 PyCon 2018 上,Mario Corchero 介绍了在开发过程中如何更方便轻松地记录日志的流程。梳理一下整个演讲的过程,其实其核心就是介绍了 logging 模块的使用方法和一些配置。

详情:https://cuiqingcai.com/6080.html

【其他】

1. Android 性能优化来龙去脉总结

一款 app 除了要有令人惊叹的功能和令人发指交互之外,在性能上也应该追求丝滑的要求,这样才能更好地提高用户体验。文章作者针对 Android 性能优化进行了总结,依据故事的发展路线,将其分为了5个部分,分别是:常见的性能问题;产生性能问题的一些可能原因;解决性能问题的套路;代码建议及潜在性能问题排查项。

详情:http://wetest.qq.com/lab/view/390.html

2. 从世界杯竞猜骗局谈二分法

四年一度的足球盛典——世界杯已在本月14号响起号角。这是一场球迷的狂欢,同时也是骗子的节日。作者聊到一个经典骗局,并用二分法**解释了其中原理。

详情:https://mp.weixin.qq.com/s?__biz=MzAxOTc0NzExNg==&mid=2665514720&idx=1&sn=64e56b4e494fad02e589ebe56b36886e

技术周刊 第 29 期

#【前端】

1.发布 umi 2.0,可插拔的企业级 react 应用框架

距离 umi 1.0 发布 已有半年,umi 在这段时间做了大量的重构和改进,438 个 commit,20 个 beta 版本,今天正式发布 2.0 版本,并调整定位为可插拔的企业级 react 应用框架。
umi,中文可发音为乌米,是一个可插拔的企业级 react 应用框架。umi 以路由为基础的,支持类 next.js 的约定式路由,以及各种进阶的路由功能,并以此进行功能扩展,比如支持路由级的按需加载。然后配以完善的插件体系,覆盖从源码到构建产物的每个生命周期,支持各种功能扩展和业务需求,目前内外部加起来已有 50+ 的插件。

https://zhuanlan.zhihu.com/p/43588942

2.在线 DOS 游戏汉化版

image
有没有想过有一天可以在浏览器上玩这些DOS游戏?这个开源项目帮你实现了愿望。它包含仙剑奇侠传、大富翁、
倚天屠龙记、三国志系列等,并在不断增加中,绝对可以帮你找回童年和青春的回忆,并且,它是 JS 实现的。

https://github.com/rwv/chinese-dos-games

3. Chrome 浏览器 10 周年

image
本周一(9月2日)是 Chrome 浏览器的10岁生日。十年来,这个项目带动了无数创新,让互联网产生了天翻地覆的变化。

十年前,主流浏览器还是 IE6,JS 仍然是一种玩具语言,一大堆无法调试的运行时错误。谷歌决定做自己的浏览器,为此特别开发了底层引擎 V8。发布的那天,所有人都震惊了,原来JS可以运行得这么快...... 后来,V8 导致了 Node 的诞生,Chrome 导致了 Electron 和 ChromeOS。

为了纪念了这个日子,Chrome、Gmail、Google Drive 都在这一天发了新版。

链接:https://techcrunch.com/2018/09/04/chrome-gets-a-new-look-for-its-10th-birthday/

4. Puppeteer 网页爬虫和自动化测试教程(中文)

image
想要学习浏览器自动化的同学,可以看看这篇中文教程。

链接:https://github.com/csbun/thal

5. 改造 React DOM!FB将推 React Fire 计划

image
React 开发者、Redux 和 Create React App 作者之一的 Dan Abramov gaearon 在 GitHub 上的 React issue 上宣布了一个名为 React Fire 的规划,他表示这个项目旨在使 React DOM 更现代化,目标是让 React 可以更好地与 DOM 的工作方式保持一致,React 团队会重新审视之前做出的一些有争议的决策,并让 React 变得更小更快。

链接: https://mp.weixin.qq.com/s/9fiACBTQS_A21HmnLpiROg

6. 微软开源 Sketch2Code,可以直接将草图转为 HTML、WAML 或其他标记语言

image
Sketch2Code 是一个基于 Web 的解决方案,使用 AI 将手绘的用户界面草图转换为可用的 HTML 代码。Sketch2Code 由微软和 Kabel、Spike Techniques 合作开发

链接: https://github.com/Microsoft/ailab/tree/master/Sketch2Code

7、Google 将 Service Worker 用于重复搜索

image
Google 工程总监 Dion Almaer 和产品高级总监 Ben Galbraith 透露,搜索巨人正在将 Service Worker 用于缓存重复搜索,加快搜索结果的加载。Almaer 称,Google 搜索的使命是尽可能快的将相关结果提供给用户。他表示,Service Worker 能将搜索结果的加载时间减少到原来的二分之一。

链接:https://venturebeat.com/2018/09/01/google-search-now-uses-service-worker-for-repeated-searches/

8、jakezatecky/react-checkbox-tree

image
React 简单而优雅的 checkbox tree。

链接:https://github.com/jakezatecky/react-checkbox-tree

【后端】

1. 可能是 2018 年最受欢迎的 Python 开源项目

Python 是当下最火的编程语言之一,在 GitHub 上有大量热门开源项目,近日开源众包平台 IssueHunt 评选出了 2018 年 GitHub 上最流行的 50 个 Python 开源项目。例如 TensorFlow Model(深度学习代码库)、 Keras(一个高级神经网络API)、Flask(轻量级的WSGI Web应用程序框架)、Zulip(开源群聊应用程序)等。

链接:https://mp.weixin.qq.com/s/vaSUb3JC8GmoJu4AkFWbRA

2. 从TensorFlow.js入手了解机器学习

对前端开发者来说了解机器学习是一件有挑战性的事情。不过,在使用已有的 AI 模型的时候我们并不需要很深的机器学习知识。我们可以使用现有的一些工具比如 Keras、TensorFlow 或 TensorFlow.js。这里我们将看看如何创建 AI 模型并且使用 TensorFlow.js 中的一些复杂的模型。

链接:https://mp.weixin.qq.com/s/gpMTMaCKQRJu13F-QK4NCA

3、GopherCon 2018 - 揭开二元搜索树算法的神秘面纱

image
学习算法有时可谓是令人沮丧的,但并非时时都是如此。Kaylyn 的这篇文章通过 Go 代码示例以简单直接的方式解释了什么是二叉搜索树,文章含有大量配图。

链接:https://about.sourcegraph.com/go/gophercon-2018-binary-search-tree-algorithms/

4、适用于 deno 的多版本管理工具 dvm 发布

image
不知不觉中,deno 已经默默的发布了 3 个版本了。作者的参考 nvm 做了一个 deno 多版本的管理工具。
链接:https://cnodejs.org/topic/5b8f85dc4cdb88f72f5a90ab

【其他】

1、@程序员,只要 GitHub 上 1000+ 的 Star 就能获得 BAT 的 offer?

image
今日 GitHub 榜单第一名的 star 居然是买的,开源不易,且行且珍惜。

链接:https://mp.weixin.qq.com/s/L4M6koo0CEh7YqYCyVDm4A

2、这些 Max 程序员幸福感的神器,你都有了吗

image
在程序员工作当中,除了自身码代码的手速和实力外,如果能够用工具极大优化自己的工作体验,提高自己的专注程度,以及合理化自己的休息,也一样能极高地提高自己的工作效率。以下就推荐几款我觉得是程序员必备的神器。

链接:https://mp.weixin.qq.com/s/ZUEaghZdMQCJMcXgkwp5cg

技术周刊 第 20 期

【前端】

1. WebAssembly 现状与实战(中文)

WebAssembly 并不是一门编程语言,而是一份字节码标准,需要用高级编程语言编译出字节码放到 WebAssembly 虚拟机中才能运行, 浏览器厂商需要做的就是根据 WebAssembly 规范实现虚拟机。本文重点介绍如何使用 AssemblyScript 来编写 WebAssembly。

链接:https://www.ibm.com/developerworks/cn/web/wa-lo-webassembly-status-and-reality/index.html

2. 什么是Redux:设计师指南

一个 Redux 的简洁介绍,它在状态管理之外还提供了什么东西。

链接:https://www.smashingmagazine.com/2018/07/redux-designers-guide/

3. 移动端跨平台开发的深度解析

跨平台一直是老生常谈的话题,cordova、ionic、react-native、weex、kotlin-native、flutter等跨平台框架的百花齐放,颇有一股推倒原生开发者的势头。(事实上更多是共存发展)看完本篇,相信你会对于当下跨平台移动开发的现状、实现原理、框架的选择等有更深入的理解。

链接:https://juejin.im/post/5b395eb96fb9a00e556123ef

4. 推荐21个顶级的Vue UI库

最近,随着“星球大战”(指 GitHub 的 Star 数量大比拼)的爆发,Vue.js 在 GitHub 上的 Star 数超过了 React。虽然 NPM 的下载量仍然落后于 React,但 Vue.js 的受欢迎程度似乎在持续增长,与 React 一样,Vue 的最佳特性之一就是能够使用独立的模块化组件来组合 UI。为了帮助读者更快地构建下一个应用程序,以下列出了 2018 年的一些最佳 UI 组件库。

链接: https://mp.weixin.qq.com/s/kYZxwd4EvEaRcs3vJtxMyQ

5. 你不知道的前端SDK开发技巧

作为一个SDK,我们的目标是让使用者能够减少查看文档的时间,所以我们需要提供一些类型的检查和智能提示,一般我们的做法是提供JsDoc,大部分编辑器可以提供快捷生成JsDoc的方式,我们比较常用的vscode可以使用Document This 。

链接:https://mp.weixin.qq.com/s/i_Zxaie1xMALymQ-1Jqz_Q

6. Gio.js:3D地球数据可视化的开源组件库

Gio.js 是一个基于Three.js的web 3D地球数据可视化的开源组件库。使用Gio.js的网页应用开发者,可以快速地以申明的方式创建自定义的Web3D数据可视化模型,添加数据,并且将其作为一个组件整合到自己的应用中。这个库的开发是受到Google 2012 Info大会上的项目世界武器贩卖可视化的启发,该项目开发者是Google员工Michael Chang。使用Gio.js就可以快速构建这种炫酷的3D模型,并以此为基础进行深入地开发。
易用性 -- 仅使用4行Javascript即可创建3D地球数据可视化模型
定制化 -- 使用Gio.js提供的丰富的API来创建自定义样式的3D地球
现代化 -- 基于Gio.js构建高交互、自适应的现代化3D前端应用

链接:https://mp.weixin.qq.com/s/i_Zxaie1xMALymQ-1Jqz_Q

7. 如何将 emoji 当成单色 icon 使用

在 web 设计中 icon 变得越来越重要,在网上有很多关于 icon 的资源,免费的付费的都有。在这里,介绍如何运用一种已经我们非常熟悉的方式 -- emoji ,来当成 icon 使用。emoji 的一个好处是已经在系统中内置,而 icon 资源还需要从站点服务器获取。emoji 只是一些跟普通文本类似的简单字符,所以这会是传统 icon 图片的一种很好的替代方式;

链接:https://zhuanlan.zhihu.com/p/38767488

8. Web 前端框架:是解药还是毒药

要使用现代的前端框架,你需要下载开发环境和依赖,编译代码,然后在浏览器上运行。这个是好是坏?究竟是什么导致了这种不必要的复杂性?是因为我们构建的网站太复杂,还是因为框架本身就很复杂?从本文作者从过去的 Web 前端开发、人们使用框架的原因、框架失效时等几个方面来分析,最后得出结论:不使用框架有可能是你的项目的最佳解决方案,但也可能是其他项目的噩梦。就像使用工具一样,关键的不只是学习如何使用它们,还要知道在什么时候使用它们更合适,以及它们都有哪些优点和缺点。在纯 JS 中进行编码就像使用框架一样,在感觉游刃有余之前,需要花点时间掌握它;

链接:http://t.cn/Rdo6SqK

【后端】

1. 工具 — 将终端会话记录为 SVG 动画

termtosvg 是一个用 Python 编写的 Linux 终端记录器,可将你的命令行会话以独立的 SVG 动画呈现,让我们能更炫酷和简洁地记录和分享终端操作。类似的工具还有 asciinema。

链接:https://github.com/nbedos/termtosvg

2. mkcert — 零配置制作本地可信开发证书

通常使用来自真实证书颁发机构(CA)的证书进行开发很不方便,这就需要管理自己的 CA。mkcert 是一个简单的零配置工具,用于制作本地可信开发证书。可生成本地 HTTPS 加密证书,一个命令就可以生成证书,不需要任何配置。

链接:https://github.com/FiloSottile/mkcert

3. Python 超越 Java 并逐渐拉开差距

PYPL 已发布7月编程语言指数榜,Python 在今年5月首次超越 Java 拿下榜首位置后,保持上涨趋势,正逐渐与 Java 拉开差距。
此外,JavaScript 和 PHP 在季军位置的争夺上也十分激烈。二者在上半年的指数得分上十分接近,不过本月由于 PHP 出现了 1.5 个百分点的下降,地位有点危险。

链接:https://mp.weixin.qq.com/s/9-7oRJUNVYMBijYAQRJ8FA

4. 深入理解 flutter 的编译原理与优化

对于开发者而言,什么是 Flutter?它是用什么语言编写的,包含哪几部分,是如何被编译,运行到设备上的呢?Flutter 如何做到 Debug 模式 Hot Reload 快速生效变更,Release 模式原生体验的呢?Flutter 工程和我们的 Android/iOS 工程有何差别,关系如何,又是如何嵌入 Android/iOS 的呢?Flutter 的渲染和事件传递机制如何工作?Flutter 支持热更新吗?Flutter 官方并未提供 iOS 下的 armv7 支持,确实如此吗?在使用 Flutter 的时候,如果发现了 engine 的 bug,如何去修改和生效?构建缓慢或出错又如何去定位,修改和生效呢?凡此种种,都需要对 Flutter 从设计,开发构建,到最终运行有一个全局视角的观察。本文将以一个简单的 hello_flutter 为例,介绍下 Flutter 相关原理及定制与优化;

链接:https://yuque.com/xytech/flutter/sh4fbm

5.Data Structures Reference - 用于技术面试和计算机科学课程

一份很好的数据结构教程,图文并茂,简明扼要,列出每种结构的定义和优缺点,非常适合初学者;

链接:https://www.interviewcake.com/data-structures-reference

6.用 Python 来做点什么?[英文]

Python 是一种非常通用的编程语言,在各种不同领域都有很多用途。如果已经掌握了基础知识并且渴望使用该语言构建一些东西,那么看看本文中提供的一些建议,包括几个不同的项目、资源和教程,尝试开始使用 Python 来构建内容吧。

链接:https://realpython.com/what-can-i-do-with-python/

【其他】

1. 一些优秀的 macOS 开源应用

包括音乐、视频、聊天工具、浏览器、数据库、编辑器、新闻、VPN 工具、壁纸、游戏、IDE 等应用,例如 MacDown、Atom、ShadowsocksX-NG、QuickLook Video、PDF Archiver、YouTube-Music 等等。

链接:https://github.com/serhii-londar/open-source-mac-os-apps

2. Github 事故报告

上周,有人拿到 Gentoo 的 GitHub 管理员权限,然后把密码改了,其他管理员都删了,在应用程序的源码里面加入 rm -rf 。虽然,GitHub 官方已经处理这件事情,但是看了也是一身冷汗。万一真的以 root 权限运行,莫名其妙你的系统就全没了;

链接:https://wiki.gentoo.org/wiki/Project:Infrastructure/Incident_Reports/2018-06-28_Github

3. Firefox 和 Chrome 下架流行扩展 Stylish

用户样式管理器 Stylish 是一个非常受欢迎的浏览器扩展,但在被多次转手之后,这个扩展开始变得恶意了。软件工程师 Robert Heaton 对其代码进行分析后指出,Stylish 窃取了用户所有的浏览历史。在收到报告之后,Firefox 和 Chrome 从其各种的扩展网站移除了 Stylish,Firefox 还建议所有用户禁用该扩展。想要继续使用自定义样式的用户可选择安装 Stylish 的分支 Stylus( Google Chrome);

链接:https://www.solidot.org/story?sid=57084

前端周刊 - 第 1 期

01. 2018 JavaScript 测试概览

文章介绍了JavaScript测试的关键术语、测试类型、工具和方法,并简要分析了工具jsdom、Istanbul、Karma、Chai、Wallaby等,测试框架mocha、jest、jasmine、AVA等以及UI测试工具TestCafe、WebdriverIO、Puppeteer等。

详情:https://medium.com/welldone-software/an-overview-of-javascript-testing-in-2018-f68950900bc3

02. WebAssembly在线IDE — Web Assembly Studio

Web Assembly Studio是一个简单的在线IDE

详情:https://webassembly.studio/

03. CanJS 4.0 一套前端架构库

CanJS 说不上快速,但其集成了自定义元素、可观察对象、路由等,是一款轻量级的JS库。Apple Store、Yahoo和HP等都有使用它。

详情:https://www.bitovi.com/blog/canjs-4.0

04. Chrome计划将非https连接的网站标记为不安全

谷歌刚刚宣布,从2018年7月开始,随着Chrome 68 的发布,未加载 https 的网页将被标记为“不安全”。这篇文章回顾了https 的发展历程,以及接下来会发生什么。

详情:https://blog.cloudflare.com/https-or-bust-chromes-plan-to-label-sites-as-not-secure/

05. Exploring ES2018 and ES2019

这是一本涵盖ECMAScript 2018和ECMAScript 2019内容的新书,可在线阅读或付费下载电子书。

详情:http://exploringjs.com/es2018-es2019/

06. 2018 我们如何使用 JavaScript

文章从command-line tools、Webpack、Babel、TypeScript 和 Flow等方面讨论了2018年我们如何使用JavaScript。

详情:https://www.telerik.com/blogs/how-to-javascript-in-2018

07. 如何在React项目中使用CSS模块

这篇文章探讨了如何在react项目中使用css模块的方法,包括将CSS作为JS对象使用和使用CSS模块。

详情: https://blog.pusher.com/css-modules-react/

08. 用CSS实现键盘记录的方法

CSS Keylogger 是一款 Chrome 扩展程序和Express 服务器,可利用 CSS 实现键盘记录的功能。

详情:https://github.com/maxchehab/CSS-Keylogging

09. 使用 Webpack 进行 web 性能优化

文章从减小资源大小、利用长期缓存、监控和分析应用程序三个方面讲述了如何使用 Webpack 进行 web 性能优化。

详情:https://developers.google.com/web/
fundamentals/performance/webpack/

10. npm V5.7.0 发布

v5.7.0 允许 npm install 修复 package-lock.json 和 npm-shrinkwrap.json 合并冲突的文件;该版本新增的 npm ci 命令仅从锁定文件进行安装,如果 package.json 和锁定文件不同步,那么它会报告一个错误。

详情:http://blog.npmjs.org/post/171139955345/v570

11. Font Awesome 发布版本 5.0.6

FontAwesome是一款图标工具库,5.0.6版本新增了许多图标,减小了js文件大小,修复了一些问题等。

详情:https://github.com/FortAwesome/Font-Awesome

12. 前端面试手册

准备找工作?这是一份不错的前端面试手册,包括了html、css 和 js问题。

详情:https://github.com/yangshun/front-end-interview-handbook

技术周刊 第 42 期

【前端】

(Hazel)

1、8 张图让你一步步看清 async/await 和 promise 的执行顺序

说实话,关于 js 的异步执行顺序,宏任务、微任务这些,或者 async/await 这些慨念已经有非常多的文章写了。但是怎么说呢,简单来说,业务中很少用 async,不太懂 async 呢,研究了一天,感觉懂了,所手痒想写一篇,哈哈。毕竟自己学会的知识,如果连表达清楚都做不到,怎么能指望自己用好它呢?

https://segmentfault.com/a/1190000017224799

(Hazel)

2、测试工程师良品 —— Fiddler 工具简介

Fiddler 是目前最强大最好用的调试工具之一,它能记录所有客户端和服务器的 http 和 https 请求,设置 CGI 请求的断点,甚至修改输入输出数据。Fiddler 的工作原理,是它在 web server 和 web browser 之间搭了一层 proxy,所有的请求都会经过它,如下图所示:

image.png | left | 564x214

Fiddler 可以针对 web 端和移动端网络请求进行抓包分析,如何安装和实现抓包,以及如何在无数请求中运用强大的过滤机制进行精准定位,这里不再进行介绍。Fiddler 除了进行以上常用功能之外,还能针对抓包过程和请求进行设置。以下将按照 fiddler 菜单和 fiddler script 分类介绍 Fiddler 的一些功能。

https://mp.weixin.qq.com/s/uLXUySbSwwinTpbXOqN2dw

[phobal]

3、30-seconds 学习系列

该组织整理了部分常见的代码片段,代码都比较简短,能让你在 30 秒内能理解,目前已推出了30-seconds-of-interviews30-seconds-of-react30-seconds-of-css 和 刚推出的 30-seconds-of-code、,维护者还在积极贡献更优质的代码段,值得关注!

https://github.com/30-seconds

[phobal]

4、如何使用 Vue CLI 3 加速你的开发工作流?

最新版的 Vue CLI 3 不仅功能强大、灵活,还提供了完整图形用户界面。使用新的 Vue CLI 及其 Vue UI GUI 可以更轻松地创建新的 Vue.js 项目。本文将向你展示如何使用 Vue CLI 以及 Vue UI 进一步加快你的工作流程

https://mp.weixin.qq.com/s/49ahSgjypkELwGFXXUEMvw

5、使用 TypeScript 两年后

作者回顾了使用 TypeScript 两年的经历,总体上还是推荐的,也提出了一些值得注意的问题。

https://ecom.software/after-two-years-with-typescript-was-it-worth-it/

6、2018 年 JavaScript 开发者调查

2018年 JS 开发者的调查报告,主要是各种框架、工具的使用情况。

https://2018.stateofjs.com/

(枫)

7、NPM 2018 年回顾与 2019 年预测

image.png | left | 600x375

近日,npm 发布了 2018 年 JavaScript 生态的一些数据,并对 2019 年的 JavaScript 生态圈进行了预测。数据显示,npm 每月有超过 1000 万个用户进行超过 300 亿次的下载。其中,在某个周二,也就是 npm 最繁忙的一天,用户下载 JavaScript 包的次数超过 13 亿。

链接:https://mp.weixin.qq.com/s/YBDJzenxlbx-oyEky7oUUw

(枫)

8、来年继续使用 Node.js 需要注意的 19 个点

image.png | left | 600x399.9

作者总结了 2019 继续使用 Node.js 需要注意的 19 个点,包含添加类型校验,TypeScript 是个很好的选择;丰富你的 Linters,让代码更加强壮;熟悉至少一种 API 技术,GraphQL 是个不错的选择;制定包的更新策略,过早更新是种危险的行为等。

链接:https://medium.com/@me_37286/19-ways-to-become-a-better-node-js-developer-in-2019-ffd3a8fbfe38

【后端】

(Hazel)

1、十大经典排序算法

一本关于排序算法的 GitBook 在线书籍 《十大经典排序算法》,使用 JavaScript & Python & Go & Java 实现。

https://github.com/hustcc/JS-Sorting-Algorithm

(Lmagic)

2、SQLite 被曝存在漏洞,数千应用受影响

SQLite 被曝存在一个影响数千应用的漏洞,受害应用包括所有基于 Chromium 的浏览器。
据 ZDNet 报导,该漏洞由腾讯 Blade 安全团队发现,允许攻击者在受害者的计算机上运行恶意代码,并在危险较小的情况下泄漏程序内存或导致程序崩溃。由于 SQLite 嵌入在数千个应用程序中,因此该漏洞会影响各种软件,包括物联网设备、桌面软件、Web 浏览器、Android 与 iOS 应用。

https://mp.weixin.qq.com/s/3MtpQ5iNHZ2Yem7IkeNboA

(Lmagic)

3、用动画的形式呈现解 LeetCode 题目的思路

作者将 LeetCode 上所有的题目都用动画的形式演示出来,简直太棒了!

image.png | left | 827x519

https://github.com/MisterBooo/LeetCodeAnimation

【其他】

(枫)

1、e.ee

image.png | left | 747x337

在 GitHub Trending repositories 发现一只很厉害的喵,貌似什么语言都会。后面看消息有人称作者回应只是测试
GitHub 用户名的最长长度。

链接:https://github.com/eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee/eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

(枫)

2、估值一个亿的代码

image.png | left | 600x727.7777777777778

前端周刊 - 第 2 期

01. Propel:JS的科学计算框架

Propel 是一种 JavaScript 科学计算框架,类似于 Python 中的科学计算库 NumPy,也就是说利用 JS 也可以进行机器学习啦。Propel可以依靠 TensorFlow 来提高性能,适用于Node 和浏览器环境。

详情:http://propelml.org/

02. 事件循环详解

详情链接是一段在 2018 JSConf.Asia 大会上详解浏览器中事件循环和渲染机制的视频,总长35分钟。

详情:https://www.youtube.com/watch?v=cCOL7MC4Pl0

03. webpack 4 正式发布

webpack 4 于2.25号正式发布,版本代号为legato。该版本构建速度最快可提升98%,新增 mode 配置项,提供零配置平台来扩展,废除了 CommonsChunkPlugin 插件,默认支持 WebAssembly,更多更新请戳详情。

详情:https://medium.com/webpack/webpack-4-released-today-6cdb994702d4

04. V8 中的 DOM 对象

Chrome 66的 DevTools 可以跟踪C++ DOM对象,并显示 JavaScript 引用的所有可访问的 DOM 对象,因此在 Chrome 中调试内存泄漏变得更加容易。

V8 6.4版默认启用了Lazy deserialization,使得平均每个浏览器选项卡的V8内存消耗减少了500KB以上。

详情:https://v8project.blogspot.com/2018/03/tracing-js-dom.html

05. CityJSConf 2018

CityJSConf 2018 将在3月26号于伦敦举行。

详情:http://cityjsconf.org/

06. 如何使用 Vue.js 创建可访问的自动完成组件?

这篇文章讲述了如何在 vue 中使用 aria 属性创建一个完全可访问的自动完成组件,即使是使用类似 MacOS 中 VoiceOver 这样的辅助技术浏览网页,也可识别出自动完成组件。Aria 属性可以使 HTML 元素语义更明确,方便残障人士浏览网页。

详情:https://alligator.io/vuejs/vue-a11y-autocomplete/

07. Konva: HTML5 2D Canvas 库

Konva 是一个适用于桌面和移动应用程序的HTML5 2D Canvas 库,提供分层、缓存、过滤、桌面和移动事件支持等功能。

详情: https://konvajs.github.io/

08. TypeScript —超能量 JavaScript

这篇文章探讨了 TypeScript 强大的静态类型检查功能,并分析了 JS 和 TS 中的数据类型。上个月 TypeScript 有 10,327,953 次下载量,大大超过了 Flow 的下载量。

详情:https://medium.freecodecamp.org/typescript-javascript-with-super-powers-a333b0fcabc9

09. NodeJs 中的安全配置

'npm install sqreen' 使用可配置的插件扩展Node.js Web 应用程序安全性,以保护应用程序和用户账户信息,避免XSS、NoSQL注入和数据泄露等。

详情:https://www.sqreen.io/

10. 检测未使用的 CSS 选择器

JitBit 开发了一款检测无用的 CSS 选择器的工具,它通过用户输入的网站根URL来递归检测所有内部链接的网页,找出其中未使用的 CSS 选择器。但对于伪类选择器,其总是显示为未使用。

详情:https://www.jitbit.com/unusedcss/

11. WebKit 新增Storage Access API

Storage Access API 允许第三方嵌入的网站可请求访问第一方网站的 cookie,但这并不是指放宽了同源策略。该 API 已经在 Safari 的预览版本中实现,但是对于跨浏览器支持似乎有点不稳定。

详情:https://webkit.org/blog/8124/introducing-storage-access-api/

12. Electron 2.0.0-beta.1 版本发布

Electron 2.0.0-beta.1 升级了 Chrome、Node 、V8的版本,从 GTK2 切换到GTK3,更多更新请点击详情查看。

详情:https://electronjs.org/releases#2.0.0-beta.1

前端周刊 - 第 6 期

01. JS 引擎 V8 v6.6 的更新

最新 v6.6 版本的 V8 JavaScript 引擎更新了方法 Function.prototype.toString(),改进了代码缓存机制、异步性能和 Array#reduce 性能,为 String.prototype添加了 trimStart() 和 trimEnd() 方法。

详情:https://v8project.blogspot.com/2018/03/v8-release-66.html

02. 2018 开发者调查结果

这是一份来自 StackOverflow 10万开发者的调查结果,请查收一下~
调查结果显示 JavaScript 是连续 6 年最常用的编程语言;TensorFlow 是 StackOverflow 发展最快的技术之一,最受开发者青睐;全球范围内,使用 F#,Ocaml,Clojure 和 Groovy 的开发者薪资最高。

详情:https://insights.stackoverflow.com/survey/2018/

03. React 16.3.0 发布

React 16.3.0 版本引入了新的 Context API,允许开发者使用 React.createContext() 生成两个关联组件;组件生命周期也发生了变化,废除了 componentWillMount, componentWillUpdate, componentWillReceiveProps, 引入了 getDerivedStateFromProps;此外,还提供了 StrictMode, createRef 和 forwardRef APIs,以保证代码符合最佳实践。

详情:https://reactjs.org/blog/2018/03/29/react-v-16-3.html

04. 11 种 JavaScript 机器学习库

文章介绍了 11 种 JavaScript 机器学习库: Brain.js,Synaptic,Neataptic,Conventjs,Webdnn,Deeplearnjs,Tensorflow Deep Playground,Compromise,Neuro.js,mljs,Mind.

详情:https://blog.bitsrc.io/11-javascript-machine-learning-libraries-to-use-in-your-app-c49772cca46c

05. TypeScript 2.8 发布

TypeScript 2.8 新版本继续支持条件类型(形式为 A extends B ? C : D),新增了 VS Code 中组织 import 导入的功能(可删除未使用的导入和对导入进行排序),并改进了 JSX 支持。

详情:https://blogs.msdn.microsoft.com/typescript/2018/03/27/announcing-typescript-2-8/

06. 2018 JS 库与框架概览

文章介绍了目前JS库与框架的状态,包括React、Vue.js、Angular、Polymer、TypeScript 和 jQuery,同时通过回顾各框架的历史情况,来预测各框架未来的发展,为前端工程师的技术选型提供参考。

详情:https://medium.com/@alberto.park/the-status-of-javascript-libraries-frameworks-2018-beyond-3a5a7cae7513

07. npm v5.7.0发布

新版本中 npm install 可以自动修复 package-lock.json 和 npm-shrinkwrap.json 合并冲突的文件,还新增了 npm ci 命令。

注意:该版本出现文件系统权限被更改问题。 issue:npm/npm#19883

详情:http://blog.npmjs.org/post/171139955345/v570

08. 开始使用新的CSS Typed Object Model

CSS 类型化对象模型带来了类型,方法和灵活的对象模型来处理 JavaScript 中的 CSS 值。作为 Houdini 的一部分,新的 CSS 类型对象模型(Typed OM)通过给 CSS 值添加类型、方法和适当的对象模型来进行扩展。值不再是字符串,而是作为 JavaScript 对象的值,用于提升 CSS 的性能和更加合理的操作。Chrome 66 已经率先支持 Typed OM。

详情:https://zhuanlan.zhihu.com/p/35029796

09. React Apollo 打造 GitHub 客户端

React还能开发客户端应用?这篇文章教你使用 React Apollo 构建一个与 GitHub GraphQL API 进行交互的应用程序。

详情:https://www.graphql.college/building-a-github-client-with-react-apollo/

10. Vue Design System

Vue Design System 是一个用 Vue.js 构建 UI 设计系统的开源工具,提供了一套基础应用程序开发的工具,模式和实践。

详情:https://github.com/viljamis/vue-design-system

11. 'display:contents'如何工作

display: contents 使元素的子元素显示为其父元素的直接子元素,而忽略元素本身。它可以帮助我们保持良好的语义化结构,同时也能帮助我们得到我们想要的布局。目前,只有 Firefox 和 Chrome的最新版本支持该属性。

详情:https://bitsofco.de/how-display-contents-works/

12. Chrome DevTools的12个使用技巧

伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chrome 已成为一个必须掌握的工具。在这篇文章中,分享了 12 个很酷的技巧,包括拖拽元素重新布局,直接通过 CSS 选择器查找元素和类似 sumlime gotoanything 的功能等。

详情:https://medium.freecodecamp.org/cool-chrome-devtools-tips-and-tricks-you-wish-you-knew-already-f54f65df88d2

前端周刊【收集】

最新前后端最新动态,开源项目,开发教程等推荐,格式如下:

【前端】

1. Sucrase:一个新的 JavaScript 转码器,号称比 Babel 快20倍

Sucrase 是 Babel 的另一种选择,允许您更快的开发构建。Sucrase 并没有将大量的 JS 特性编译成 ES5,而是假定您将目标定位于一个现代 JS 运行时,并且专注于编译非标准语言扩展: JSX,TypeScript 或 Flow。Sucrase 的解析器是从 Babel 的解析器中抽出来的,并将其细化为专注于解决 Babel 的一小部分。 如果它正合您意,希望 Sucrase 可以给您带来更好的开发体验;

详情: https://github.com/alangpierce/sucrase

2. 领域驱动设计

随着我们解决的场景越来越专业化和复杂化,大型 SPA 应用的流行,前端承担的职责越来越多。代码的质量和系统的完整性越来越难把握。很容易导致迭代着迭代着发现代码改不动了。最后只能新起炉灶,重新开发。归根到底在于复杂度的失控,本文会尝试分析其中的问题以及从前端如何应用领域模型开发的角度给出一些建议;

详情: https://yuque.com/mayiprototeam/gfyt69/oq14ia

技术周刊 - 第 24 期

【前端】

1、Chrome 浏览器开发者工具教程

随着现代框架ES6的出现以及日常安全风险的增加,了解如何使用Chrome开发人员工具可以大大提高工作效率,并有助于轻松诊断网站的性能。本文旨在概述Chrome开发人员工具中可用的各种功能及其用法。本文的大部分内容可以外推到Mozilla Firefox和Microsoft Edge 的开发人员工具上。

链接:https://apsdehal.in/blog/chrome-developer-tools-to-master

2、Github 已经完全将 jQuery 从其前端中完全移除

并且他们用来替换它的是 xx 框架?不,没有框架,他们只是使用了 querySelectorAll,自定义元素,polyfill 等。

链接:https://twitter.com/mislav/status/1022058279000842240

3、Uber开源Fusion.js:一个基于插件架构的通用Web框架

Uber 的 Web 平台团队开发了 Fusion.js,一个开源的 Web 框架,用于简化 Web 开发,并构建出高性能的轻量级 Web 应用程序。简单地说,Fusion.js 是一个 MIT 许可的 JavaScript 框架,支持 React 和 Redux 等流行库,并提供了很多现代特性,如模块热加载、数据感知服务器端渲染和捆绑拆分支持。

除了预配置的样板,Fusion.js 还提供了灵活的基于插件的架构。因此它非常适合用于现代单页应用程序以及依赖复杂服务层来满足各种质量要求的现代 Web 应用程序。

链接:https://mp.weixin.qq.com/s/HQFLRQHfjpg83lZayiJxXA

4、前端监控和前端埋点方案设计

实现前端监控有三个步骤:前端埋点和上报、数据处理和数据分析。本文针对整个前端监控,设计适用的方案。本文的主要内容分为:
为什么需要前端监控
常用前端埋点方案总结
前端埋点方案选型和前端上报方案设计
前端监控结果可视化展示系统的设计

链接:https://juejin.im/post/5b62d68df265da0f9d1a1cd6

5、TypeScript 3.0重磅发布,新特性详解!

今天,微软正式发布 TypeScript 3.0,这是 TypeScript 之旅的一个新的里程碑!3.0 虽然是个大版本,但并没有包含太多重大的突破性变更(也就是说升级很容易)。新版本引入了一种新的灵活且可扩展的方式来构建项目、对操作参数列表提供了更强大的支持、新的强制显式检查类型、更好的 JSX 支持、更好的错误 UX,等等。

链接:https://mp.weixin.qq.com/s/qLyXpECAUai26fWUkUuxpg

6、wasm + ffmpeg实现前端截取视频帧功能

有没有那么一种可能,在前端页面处理音视频?例如用户选择一个视频,然后支持他设置视频的任意一帧作为封面,就不用把整一个视频上传到后端处理了,本文作者使用 webassembly + ffmpeg 搞定了这个需求!

链接: https://zhuanlan.zhihu.com/p/40786748

7、React v16.4.2:服务器端漏洞修复

React DOM 发布新版本 16.4.2 来解决 ReactDOMServer 中的安全漏洞(CVE-2018-6341),它是在 16.0.0 版本中被引入,且在后面版本中都存在。该漏洞只会影响某些服务器渲染的 React 应用程序;

链接:https://reactjs.org/blog/2018/08/01/react-v-16-4-2.html

8、我用 Vue 和 React 构建了相同的应用程序,这是它们的差别

作者分别用 Vue 和 React 构建了一个标准的待办事项应用程序,并在数据改变、创建新待办事项、删除待办事项、传递事件监听器、将数据传给子组件、将数据发送回父组件过程中将他们的代码进行了并排比较,以研究这两个框架在开发应用时有哪些差别;

链接:http://t.cn/RDwbKXn

【后端】

1、系统设计入门

大型 Web 应用最关键的就是架构,最难的也是架构。学习如何设计可扩展的系统将会有助于你成为一个更好的工程师。系统设计是一个很宽泛的话题。在互联网上,关于系统设计原则的资源也是多如牛毛。这个仓库就是这些资源的组织收集,它可以帮助你学习如何构建可扩展的系统。

链接:https://github.com/donnemartin/system-design-primer/blob/master/README-zh-Hans.md

2、23 个 Node 安全最佳实践

本文是 i0natan/nodebestpractices 的子集,包含 23 个 Node 安全最佳实践,内容涉及拥抱 linter 安全规则、调整 HTTP 响应标头、使用 Bcrypt 而不是 Node.js 加密库来处理密码、以非 root 身份运行 Node.js,避免使用 JavaScript eval 语句等;

链接:https://medium.com/@nodepractices/were-under-attack-23-node-js-security-best-practices-e33c146cb87d

3、IEEE Spectrum 2018 年度编程语言排行榜,Python 卫冕

IEEE Spectrum 发布了 2018 年年度编程语言排行榜。IEEE Spectrum 对 48 种语言进行排行,其排序综合 9 个重要线上数据源的 11 个指标而成(今年去掉了 Dice,因为其关闭了 API),例如 Stack Overflow、Twitter、Reddit、IEEE Xplore、GitHub、CareerBuilder 等。今年的榜单中 Python 卫冕成功,并且与第 2 名的距离拉得更远了一些,如今人工智能、大数据等重数据领域的浪潮未息,预估 Python 还会继续火下去。
IEEE Spectrum 2018 编程语言 Top 10 如下:

链接:https://mp.weixin.qq.com/s/jbrJ1iuZykL6ikmK8uSV3w

4、JVM 和 Python 解释器的硬盘夜话

这个电脑的主人是个程序员,他相继学习了 C、Java 、Python、 Go, 但是似乎停留在 Hello World 的水平。 随着hello.c, HelloWorld.java , Hello.py等文件被删除,曾经热闹非凡的硬盘夜话也冷清了起来.....

链接:https://mp.weixin.qq.com/s/s9IykGHC-QY_smNprZgTmw

【其他】

1、Reddit 系统遭黑客入侵,用户数据被访问

Reddit 披露,一名黑客入侵了它的系统,访问了部分用户数据和一个旧的备份数据库。Reddit 是美国访问量最高的社交网站之一。Reddit 在声明中称,事故发生在 6 月 14 日到 6 月 18 日之间,黑客入侵了多名公司雇员在云端和源代码托管商的账号。虽然这些账号启用了二步认证 2FA,但黑客仍然设法访问了他们的账号。Reddit 称黑客利用了 SMS 拦截。在入侵账号之后,黑客访问了一个保存有 2005 年到 2007 年 5 月之间用户数据的备份数据库,获取了账号凭证(用户名和加盐哈希密码),电子邮件地址和所有公开及私有内容。如果用户是在 2007 年 之后注册的,那么他们的信息没有失窃。Reddit 正在通知受影响的用户,重置可能仍然有效的密码。

链接:https://www.solidot.org/story?sid=57429

2、苹果市值突破一万亿美元

苹果成为首个突破 1 万亿美元市值的美国上市公司,周四收盘价 207.39 美元,市值 1.002 万亿美元。苹果股价的上涨得益于 iPhone 销售强劲和上千亿美元的庞大资本返还计划。在乔布斯 (Steve Jobs) 在该公司濒临破产之际回到公司扭转乾坤 20 年后,苹果公司蓬勃发展,这归功于一系列产品和服务,从 iPod 到 iTunes,从 iPhone 到 App Store。达到万亿美元市值大关对于 CEO 库克 (Tim Cook) 是一个扬眉吐气的时刻。自 2011 年接替去世的乔布斯以来,他一再面对有关其领导力的质疑。在历史上,荷兰东印度贸易公司的市值换算成今天的币值超过 7 万亿美元,中石油市值也一度达到一万亿美元。

链接:https://www.solidot.org/story?sid=57433

技术周刊 第 26 期

【前端】

1. SVG 图像入门教程

SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics)。其他图像格式都是基于像素处理的,SVG 则是属于对图像的形状描述,所以它本质上是文本文件,体积较小,且不管放大多少倍都不会失真。

链接:http://www.ruanyifeng.com/blog/2018/08/svg.html

2、DNS over HTTPS

DNS 查询都是基于 HTTP 协议的,即使是加密通信,网络服务商依然可以知道你想访问的网站。现在有多种解决方案,本文介绍如何在 Firefox 浏览器打开设置,使得 DNS 协议走 HTTPS 协议。

链接:https://medium.com/@nykolas.z/getting-started-with-dns-over-https-on-firefox-e9b5fc865a43

3、如何将Web站点改造为PWA?

移动 Web 访问将会将会超过其他设备的总和,面对这种趋势,你能视若无睹吗?好消息是实现 PWA 并不困难。实际上,将现有的 Web 站点转换为 PWA 是非常具有可行性的。在本教程中,我们讨论这一话题,在本文结束的时候,我们将会有一个行为与原生 Web 应用一致的站点。它能够离线运行并且具有自己的主页屏幕图标。

链接:https://www.sitepoint.com/retrofit-your-website-as-a-progressive-web-app/

4、Flutter 热文,都在这里了

本篇文章整理的是掘金技术社区6月-7月中,优秀的 Flutter 文章,其中包括引用教程、应用组件、插件、效率工具、实用文章几个分类。希望能够帮助正在学习 Flutter 的小伙伴。

链接:https://zhuanlan.zhihu.com/p/41671820

5、重磅!Vue CLI 3.0 正式发布,带来多项重大更新

近日,Vue 的作者尤雨溪在 Medium 上宣布正式发布 Vue CLI 3.0,它也将为很多开发者带来期待已久的新特性。

链接: https://mp.weixin.qq.com/s/hfr2Q3FXZFIdqM_r8HrLwQ

6、微前端的设计理念与实践初探

微前端与微服务一样,都是指将某个单一的应用转化为多个可以独立运行、独立开发、独立部署、独立维护的服务或者应用的集合,从而满足业务快速变化及分布式多团队并行开发的需求,本文着眼阐述了微服务与微前端的设计理念以及微服务的潜在可行方案

链接: https://zhuanlan.zhihu.com/p/41879781

7、12 个极具启发性的 React 开源应用程序

在过去几年里,React 已经成为一个广受欢迎的 JavaScript 库和开发人员生态系统。有成千上万的软件项目使用 React,其中许多项目在 Github 上公开发布。本文就来看看其他开发人员使用 React 做了什么,并深入了解他们如何编写代码,这很有趣,也很有启发性。

链接:https://appendto.com/2018/08/12-public-react-repos-apps-to-inspire-your-next-project/

8、我最喜欢的给编程新手的免费资源

作者分享了自己最喜欢的免费资源给编程新手,所有资源均是自己亲身使用过的并觉得非常友好的。

链接:https://dev.to/aspittel/my-favorite-free-resources-for-new-programmers-bia

【后端】

1. 深入浅出 Go 语言的库源码文件

你用过 Go 语言编写小命令(或者说微型程序)吗?当你在编写“Hello, world”的时候,一个源码文件就足够了,不过这种小玩意儿没什么用,最多能给你一点点莫名的成就感。Go 语言可以编写库源码文件,库源码文件不能被直接运行,它仅用于存放程序实体。只要遵从 Go 语言规范,这些程序实体就可以被其他代码使用。这些“其他代码”可以与被使用的程序实体在同一个源码文件内,也可以在其他源码文件,甚至其他代码包中。

链接:https://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2651008754&idx=1&sn=b09f37e8a20192ca2fb9554d276e2e43

2. chinese-xinhua: 新华字典数据库

chinese-xinhua 是一个关于新华字典数据库的 github 项目,收录包括 14032 条歇后语,16142 个汉字,264434 个词语,31648 个成语。并且提供新华字典API。

链接:https://github.com/pwxcoo/chinese-xinhua

3、klauscfhq/taskbook:任务,板块和笔记都在命令行这个栖息地

通过使用简单且最小化的使用语法,平坦的学习曲线,使您可以在终端内跨多个板块,有效地管理任务和笔记。所有数据都以原子方式写入存储,以防止损坏,并且永远不会与任何第三方实体共享。已删除的项目会自动存档,并且可以随时完成或恢复。

链接:https://github.com/klauscfhq/taskbook/blob/master/docs/readme.ZH.md

4、deepsweet/foxr

用于控制 Firefox 的 Node.js API。

链接:https://github.com/deepsweet/foxr

【其他】

1. 写给工程师的十条精进原则

每个人都应该有自己的原则,当我们需要作出选择时,一定要坚持以原则为中心。但是在现实生活中,我们往往缺少对原则的总结,对于很多人来说这是一门“只可意会不可言传”的玄学,是属于老司机的秘密,其实不然。“追求卓越”是美团的价值观。作为一名技术人员,我们应该如何践行呢?这篇文章总结了十条精进原则,希望能够给大家带来一些启发,更好地指导我们的行动。

链接:https://tech.meituan.com/10_principles_for_engineers.html

2. VS Code 1.26 发布,有你想要的新特性?

Visual Studio Code 1.26 已发布,一些主要的更新亮点包括:Breadcrumbs(面包屑)、"问题"面板快速修复、Windows 默认用户设置、Grid: 自动最大化编辑器、更好的 JS / TS 错误报告、Copy relative path(复制相对路径)等等。

链接:https://mp.weixin.qq.com/s?__biz=MjM5NzM0MjcyMQ==&mid=2650083050&idx=1&sn=ba32bb2d2d53ec69f51425907452e161

3、API 之下

软件正在变得越来越强大,用途越来越广,那么 API 层将越来越厚。未来的年轻人生活在 API 之下,抬头向上看,只会看到一个无边无际的软件层,根本不知道如何爬到云端,去做那些 API 之上的工作。

链接:http://www.ruanyifeng.com/blog/2018/08/api-below.html

4、EFF 呼吁 Google 澄清其**计划

过去两周,Google 为**开发审查版搜索引擎的计划引发了广泛的争议。代号为 Dragonfly 的计划最早是 The Intercept 曝光的,但此后 Google 一直处于无线电静默,既不承认也不否认。电子前哨基金会(EFF)呼吁 Google 澄清和公开其**计划。

链接:https://www.solidot.org/story?sid=57597

技术周刊 第 37 期

【前端】

1、WebAssembly 的未来

WebAssembly 目前只是 MVP(最小可行产品)阶段,本文介绍了这种编译语言未来可能具有的功能。

链接:https://hacks.mozilla.org/2018/10/webassemblys-post-mvp-future/

2、 33 个 JS 程序员需要知道的概念

按照主题,收集 JS 学习资源的仓库。

链接:https://github.com/leonardomso/33-js-concepts

3、Netflix Web 性能案例研究

Netflix.png | center | 747x451

Netflix 是世界上最受欢迎的流媒体播放服务商,过去2年用户数增长巨大,这得得益于网站极好的用户体验,工程师们使用 React SSR,客户端删 React 换原生 JS,以及 2 种方式的 preload 等手段使 TTI 提升了 50%,另外在大流量下使用 loading page 也很值得借鉴。

链接:https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9

4、精打细算浏览器空闲时间 - requestIdleCallback

requestIdleCallback.jpg | center | 747x405

浏览器的主线程在每一帧处理完用户输入、动画计算、合成帧等操作后,通常会处于空闲状态,直到下一帧开始、或者收到新的用户输入、或者pending的任务满足了执行条件等。这段空闲时间应该充分地利用起来。比如用空闲时间来执行后台任务就十分合适,浏览器提供了 requestIdleCallback API 就是专门来做这类调度任务的。

链接: https://mp.weixin.qq.com/s/2apcqQbQFL8L4dYYZ8DTqw

5.富文本编辑器的技术演进之路

浏览器提供了两个原生特性:
contenteditable:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content
document.execCommand():
https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

https://mp.weixin.qq.com/s/PyXpfiZ-PiP8S5pQcHRZng

6. 纯 CSS 实现多行文字截断

看似十分简单的标题截断效果,但是竟然没有一个统一 CSS 属性实现标准,需要用到一些奇淫妙计来实现,一般来说,在做这样文字截断效果时我们更多是希望:

  • 兼容性好,对各大主流浏览器有好的支持
  • 响应式截断,根据不同宽度做出调整
  • 文本超出范围才显示省略号,否则不显示省略号
  • 省略号位置显示刚好

http://www.10tiao.com/html/59/201811/2651555258/3.html

7、GitHub 仓库数量破亿了

image.png | left | 747x249

上个月中旬,GitHub 刚刚发布了年度报告,宣布拥有 9600 万个项目和 3100 万用户,今天,GitHub 官方博客宣布:GitHub 上的仓库数量正式突破 1 亿,这对 GitHub 来说是一个巨大的里程碑。

链接:https://mp.weixin.qq.com/s/G74xre03WtTu2Y_40cBIuQ

8、React hooks都是数组,没那么神秘

image.png | left | 630x331

作者是 hooks API 的忠实粉丝,不过它在使用方面确实存在一些奇怪的限制。在这篇文章里,作者提出了一个模型,为那些难以理解 hooks API 使用规则的人提供一种思路。

链接:https://mp.weixin.qq.com/s/KPgGUjMjpTK3fA1Zjw5MNA

【后端】

1、后台技术栈/全栈开发/架构师之路

Full Stack Developer Tutorial,后台技术栈/全栈开发/架构师之路,秋招/春招/校招/面试。 from zero to hero。

链接:https://github.com/frank-lam/2019_campus_apply

2、 GoCity—3D可视化库

GoCity 是将项目的文件结构、目录、方法数、变量数、源码行数等信息进行 3D 可视化展示,3D图就类似于城市。其中 UI 使用 React 构建,并使用 babylon.js 进行 3D 绘制。

image.png | left | 827x444

链接:https://github.com/rodrigo-brito/gocity

【其他】

1、漫威API示例

几天前,整个互联网上最棒的API——Mavel API发布。我喜欢API,也喜欢漫画,二者的结合就是行星吞噬者级别的新闻。(此处我所指的行星吞噬者是那紫色的大家伙,而不是神奇四侠电影中的无定形巨云。)

链接:https://mp.weixin.qq.com/s/OCk1348fWsDQMkDuvXL82A

2、 参加2018成都web前端交流大会是个什么样的体验?

感谢大家百忙之中抽出时间参与FCC成都社区主办的前端交流大会活动,FCC成都社区一直为给大家举办高质量的、干货满满的、用户体验好的技术活动持续不断的精进着,但社区坚信此次大会还是有很多值得FCC成都社区团队优化、反思和改进的地方,社区也十分渴望大家能给予社区意见和建议,力争下次技术活动我们可以做得更好。

链接:https://www.zhihu.com/question/302090291

技术周刊 第 44 期

技术周刊 第 44 期

【前端】

1、Sky

image | left

一个形成动态背景的 React 组件。

https://github.com/lucagez/sky

2、htm

JSX 语法必须使用 Babel 才能编译,现在 preact 的作者出手了,写了一个模板函数。只要把 JSX 写成模板字符串,就可以摆脱 Babel 了。

https://github.com/developit/htm

3、webpack loader 机制源码解析

image.png | left | 747x516

本文从源码角度解释 webpack 是如何处理 loader 主要 4 大特性(同步 & 异步、raw、pitch、context)的, 并在最后举一些实际的例子帮助大家理解如何写一个loader

链接: https://mp.weixin.qq.com/s/tUw_okkCRnvr3NNEgHk3Ew

4、最好用的 JavaScript 测试框架大盘点

image.png | left | 720x400

这篇文章将列出 JavaScript 测试方面最重要的工具,它融合了很多来自其他优秀文章的信息,并增加了我们多年来为不同产品实施不同测试解决方案的经验总结

链接: https://mp.weixin.qq.com/s/Zd6PXuc-ydpuFITAsMLevw

5、Chrome 开发者工具如何使用断点?

本文通过实例讲解,如何设置事件监听断点和 watch 表达式。

链接:https://codeburst.io/learn-how-to-debug-javascript-with-chrome-devtools-9514c58479db

6、CSS Animation 101

开源电子书《CSS Animation 101》,从零开始介绍 CSS 动画。

链接:https://github.com/cssanimation/css-animation-101

7、2019 年,全栈开发者应该学些什么?

image.png | left | 600x338.88888888888886

对于什么是全栈开发者并没有一个明确的定义。但是,有一件事是肯定的:2019 年对全栈开发者的需求量很大。本文作者概述一些趋势,读者可以尝试根据这些趋势来投入自己的时间。

链接:https://www.infoq.cn/article/CQCF0ETQVZVgE8_7dDrw

8、学习和练习现代 JavaScript 最简单的方法

image.png | left | 600x337.74834437086093

链接:https://learnjavascript.online/

【后端】

1、互联网 Java 工程师进阶知识完全扫盲

内容包括消息队列、搜索引擎、缓存、分库分表、读写分离、高并发系统等等。

链接:https://github.com/doocs/advanced-java

2、cim(cross IM) 适用于开发者的即时通讯系统

CIM(CROSS-IM) 一款面向开发者的 IM(即时通讯)系统;同时提供了一些组件帮助开发者构建一款属于自己可水平扩展的 IM。借助 CIM 你可以实现以下需求:1)IM即时通讯系统。2)适用于 APP 的消息推送中间件。3)IOT 海量连接场景中的消息透传中间件。

image.png | left | 827x275

链接:https://github.com/crossoverJie/cim

【其他】

1、体验科技与好的社会

image.png | left | 747x412

1 月 5 号在 蚂蚁 Z 空间举办了第二届 SEE Conf 体验科技大会,在大会开幕式上玉伯做开幕致辞,强调 【体验科技是技术与设计的融合,是服务与用户的链接】,以下是原稿

链接: https://www.yuque.com/yubo/words/tcaywl

2、新型偷车方式

image | left

加拿大多伦多出现了一种新型偷车方式。有些车钥匙会发出电波,只要靠近车辆,车门就会自动打开,主人也很大意,往往一回家,就将车钥匙放在门口的柜子上。

半夜里,窃贼拿着信号捕捉器靠近房门,找到车钥匙的信号,再将其放大,传给车旁边的同伙,同伙将信号再对准车门。车门发现信号,就自动打开,然后车贼设法发动汽车,将它开走。

https://www.cbc.ca/news/canada/toronto/car-thefts-rising-1.4930890

技术周刊 - 第 23 期

【前端】

1、Node v10.7.0 (Current)发布

更新内容主要包括:

  • 新方法 console.timeLog() 
  • libuv 和 Unicode 依赖的升级
  • http.request 支持 timeout 和 agent 配置

链接:https://nodejs.org/en/blog/release/v10.7.0/

2、JSON Web Token 入门教程

JSON Web Token(缩写 JWT)是目前最流行的跨域认证解决方案,本文介绍它的原理和用法。

链接:http://www.ruanyifeng.com/blog/2018/07/json_web_token-tutorial.htm

3、前端性能检测表

性能是一个巨大的主题,但它并不总是一个“后端”或“管理”主题:它也是一个前端责任。前端性能检查表是您应该检查或至少要注意的元素的详尽列表,作为前端开发人员应该将其运用到您的项目

链接:https://github.com/thedaviddias/Front-End-Performance-Checklist

4、v8n - 流畅的JavaScript验证库

v8n (validation 的缩写) 是一个验证库,它为您提供了一种简单且非常流畅的方式来构建和运行验证。有了这个,您可以像在英语中一样轻松地构建验证策略

链接:https://github.com/imbrn/v8n

5、Ant Design of Vue 1.0版本发布

vue-antd-ui是一个站在巨人(antd)肩膀上的UI组件库,有着其它组件库没有的优势,几乎继承了antd所有的功能特点,自带antd各种buff。vue-antd-ui诞生于17年9月份,18年3月份正式开源,800多次commit,发布23个版本,51个组件,共计686个单测,测试覆盖率85.19%。

链接:https://vuecomponent.github.io/ant-design/docs/vue/introduce/

6、使用Web Beacon API

Beacon API主要用于发送不需要服务器回应的HTTP请求或强制浏览器发送一个请求。开发人员可以从浏览器向Web服务器异步发送数据有效载荷较小的HTTP请求,而不会延迟页面unload事件中其它代码的执行或者影响下一步页面导航的性能。navigator.sendBeacon()方法会尽快将需要浏览器传输的数据存入队列,而不会降低导航速度。如果浏览器能够将待传输的数据存入队列,那么该方法就会返回true,否则,返回false。目前主流浏览器已经支持这一 API,IE则只有Edge 才支持,此外Opera Mini 暂时不支持。

链接:https://www.smashingmagazine.com/2018/07/logging-activity-web-beacon-api/

7、调试匿名函数的一个小技巧

image

有人联想到使用逗号操作符调试匿名函数,可以作为一个小技巧;

链接:https://www.reddit.com/r/javascript/comments/92l1wa/tiny_tip_for_debugging_anonymous_functions/

8、如何通过 npm 窃取信用卡密码

image

本文讲述了作者通过 npm 发布恶意代码的种种手段;

链接: https://hackernoon.com/im-harvesting-credit-card-numbers-and-passwords-from-your-site-here-s-how-9a8cb347c5b5

【后端】

1、Go Cloud

Go Cloud 是一个开放给 Go 中云开发者的库和工具,目前Go Cloud提供的通用 API 包括:非结构化二进制(blob)存储,在运行时更改的变量(配置),连接 MySQL 数据库,服务器启动和诊断:请求日志,跟踪和运行状况检查。

链接:https://github.com/google/go-cloud

2、Photon — 快速爬虫

Photon 是令人难以置信的快速爬虫,可以提取网址、电子邮件、文件(例如pdf, png, xml)、网站帐户以及 JavaScript 文件和基于自定义正则表达式模式的字符串。该网络爬虫主要的特点是采用了智能多线程和 Ninja Mode。

链接:https://github.com/s0md3v/Photon

3、Python 将计算机编程带给了广大的新人

image

根据谷歌搜索指数,Python 语言过去 10 年一直在上升,现在已经是最热门的编程语言;

链接:https://www.economist.com/science-and-technology/2018/07/19/python-has-brought-computer-programming-to-a-vast-new-audience

4、GoogleChromeLabs/ndb

image

ndb 增强了 Node.js 的调试体验,由 Chrome DevTools 启用;

链接:https://github.com/GoogleChromeLabs/ndb

【其他】

1、**撤回批准 Facebook 在华成立子公司的许可

对 Facebook 来说,在**取得的成功是短暂的。非常短暂。有几个小时,**政府的数据库显示,Facebook 已经获得在浙江开设一家子公司的许可。Facebook 表示,将利用该公司在当地设立一个创新中心。然后,注册信息消失了,在**媒体上,一部分提到了这家子公司的报道被删除。《纽约时报》援引匿名知情人士的消息报道,许可目前已经被撤回。知情人士表示,这一态度突变并没有完全终结 Facebook 设立该公司的机会,但可能性也不是特别大。他还说,撤回许可的决定是在浙江官员和网信办发生意见分歧后作出的。后者由于没有与其进行更密切的商榷而感到愤怒;

链接:https://www.solidot.org/story?sid=57344

2、Chrome 开始将 HTTP 网站标记为不安全

Google 释出了 Chrome 68,开始将 HTTP 网站标记为不安全。Chrome 68 的主要变化包括 Page Lifecycle API,Payment Handler API,以及地址栏的 HTTP 网站标记变更(如图)。Google 在今年 2 月通过官方博客解释说,HTTPS 普及进展显著:在 Android 和 Windows 上超过 68% 的 Chrome 流量是加密的;在 Chrome OS 和 Mac 上超过 78% 的 Chrome 流量是加密的;100 个最流行网站 81 个默认启用了 HTTPS。Google 此举旨在推动所有网站默认采用 HTTPS,但它的做法也遭到了批评,因为互联网上有很大一部分内容是存档;

链接:https://www.solidot.org/story?sid=57320

技术周刊 第 38 期

【前端】

1. ES6 的 Symbol 竟然那么强大

symbol 是 es6 出的一种类型,他也是属于原始类型的范畴(string, number, boolean, null, undefined, symbol)。

https://xiaohesong.gitbook.io/today-i-learn/front-end/es6/understanding-es6/symbol

2. H5 移动调试全攻略

随着移动设备的高速发展,H5 开发也成为了 F2E 不可或缺的能力。而移动开发的重中之重就是掌握调试技巧,定 Bug于无形。因为移动端操作系统分为 iOS 和 Android 两派,所以本文的调试技巧也会按照不同的系统来区分。寻找最合适高效的方式,才能让你事半功倍。

http://jartto.wang/2018/11/01/mobile-debug/

3. Web 长列表的救星?谷歌推出 Virtual Scroller

众所周知,渲染性能主要取决于渲染量, 过多的 DOM 会使你的网站速度变得很慢,即使在本地,也会出现相同的问题,但若通过虚拟滚动的方式,也就是在用户滚动时用足够的内容填充屏幕并不断更新,就能让网站保持高速运行,这也是 virtual-scroller 的基本原理。

链接: https://mp.weixin.qq.com/s/uhqEqoESeBZ13kl6OEc9KQ

4. 交互细节:页面链接打开方式探讨

本文讨论三种链接打开方式(当前页打开、新开页面、弹出框)的页面交互关系,进行适用场景举例,并总结每种方式的优缺点,方便在设计中更好的根据不同的场景选择合适的页面打开方式

链接: https://mp.weixin.qq.com/s/rcu6qswqti8sg3fgqCAVSw

5. Javascript 里面的 This

还分不清 javascript 里面的 This 指的什么吗?看看这篇文章吧。

链接:https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/

6. 深入理解Javascript core

无论是这些流行的动态化方案,还是WebView Hybrid方案,亦或是之前广泛流行的JSPatch,JSCore都在其中发挥了举足轻重的作用。

https://mp.weixin.qq.com/s/H5wBNAm93uPJDvCQCg0_cg

7. 你不知道的 Node.js 性能优化

Uploading 1542526440382-535df77c-eb77-4066-866d-8ca754e1770d.png…

本文是 TCB·云开发周刊发表的第一篇干货,列举了 8 个 Node.js 可以优化性能的点,包含使用 fast-json-stringify 加速 JSON 序列化,提升 Promise 的性能,使用 node-clinic 快速定位性能问题等。

链接:https://zhuanlan.zhihu.com/p/50055740

8. 图解浏览器的基本工作原理

1542526823858-9fc7f25f-16f5-42b0-9711-8db6b16268a1

可能每一个前端工程师都想要理解浏览器的工作原理。我们希望知道从在浏览器地址栏中输入 url 到页面展现的短短几秒内浏览器究竟做了什么;我们希望了解平时常常听说的各种代码优化方案是究竟为什么能起到优化的作用;我们希望更细化的了解浏览器的渲染流程。本文详而不腻,使用图解的方式说明浏览器的基本工作原理。

链接:https://zhuanlan.zhihu.com/p/47407398

【后端】

1. “淘气”字符串清单

big-list-of-naughty-strings 是一个字符串列表,而当用户输入这些字符串时很可能导致问题。例如在 Twitter 中输入zero-width space (U+200B) ,就会出现提示 "internal server error" 。虽然用户一般不会输入这样奇怪的字符,但我们永远不能防止这样的意外输入,实际上这可能是更深层的字符串验证问题。

链接:https://github.com/minimaxir/big-list-of-naughty-strings

2. XSStrike:基于 Python 的 XSS 检测工具

XSStrike 是一个  Cross Site Scripting检测工具。XSStrike 不是像其他工具那样注入 payload 并检查其工作,而是通过多个解析器分析响应,然后通过与模糊引擎集成的上下文来分析,可以扫描 DOM XSS 漏洞。

链接:https://github.com/s0md3v/XSStrike

【其他】

1. 快递员凌晨送件,将下班程序员误认为小偷

双11期间,杭州一位快递员深夜前往某小区送快递,把深夜下班程序员业主误认为“小偷”。出于小区安全考虑,他及时上前进行劝阻,一番功夫下来才知自己闹了乌龙。网友们评价:“这么负责的快递员小哥太可爱了!“这是程序员被黑得最惨的一次”

链接:https://www.weibo.com/1642512402/H2WlCiBzm?type=comment

2. 基于 UDP 的 HTTP/3 或成为新标准 

据国际互联网工程任务组(The Internet Engineering Task Force,简称 IETF )消息,HTTP-over-QUIC 实验性协议将被重命名为 HTTP/3,并有望成为 HTTP 协议的第三个正式版本。QUIC (Quick UDP Internet Connections)是 Google 推出的一个项目,旨在降低基于 TCP 通讯的 Web 延迟。QUIC 非常类似 TCP+TLS+SPDY ,但是基于 UDP 实现的。

链接:https://mp.weixin.qq.com/s/j-rq-WX5LcyiXbV3-j5uCQ

技术周刊 第 21 期

【前端】

1、Phenomenon:一个快速且仅2kb的底层WebGL API,基于GPU的着色器

它的核心功能是围绕如何好好利用 GPU来这一理念展开的,并且具有以下特色:体积小,仅2kb,无任何依赖;基于 GPU,性能表现出色;底层封装,高可配置性;文档详尽;动态生成/销毁实例。

链接:https://github.com/vaneenige/phenomenon

2、微前端的那些事儿

微前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。同时,它们也可以在共享组件的同时进行并行开发——这些组件可以通过 NPM 或者 Git Tag、Git Submodule 来管理。
注意:这里的前端应用指的是前后端分离的单应用页面,在这基础才谈论微前端才有意义。

链接:https://microfrontend.cn/

3、微信小程序的下一步:支持 NPM、小程序云、可视化编程、支持分包

7月11日,微信公开课微信小程序技术专场在上海举行,会上,微信公布了面向开发者的技术规划,内容主要包括小程序技术能力与规划、小程序生态体系、小程序性能优化三个方面。

链接: https://mp.weixin.qq.com/s/deGrFb0mhwBFZw_-e0Txbw

4、28 个顶级的 React UI 组件库,请查收

上周给大家推荐了 21 个顶级 Vue UI 组件库,这周给大家推荐 28 个顶级的 React UI 组件库, 旨在帮助大家快速开发。

链接:http://t.cn/RdxFrPm

5、JavaScript Blockchain

作者发布了一个教程, 通过 JavaScript 在浏览器中 6 步搞清楚区块链具体是如何工作的,这项挑战可以帮助大家更为熟悉区块链中的基本概念。

详情:https://www.chainshot.com/challenges/5b3afd70d9f99763e5c4b4fe/

6、如何监控网页的卡顿

要监控网页的卡顿,我们必须从 FPS 说起。FPS 是来自视频或者游戏里的概念,即是每秒的帧数,代表视频或者游戏的流畅度,俗话说,就是“不卡”。那在前端开发领域,网页的 FPS 是什么呢。

详情:https://zhuanlan.zhihu.com/p/39292837

7、在 TypeScript 中通过 async/await 使用 Promise

TypeScript 旨在开发大型应用程序并转换为 JavaScript。 由于 TypeScript 是 JavaScript 的超集,所以现有的JavaScript 程序也是可用的 TypeScript 程序。TypeScript可用于为客户端和服务器端开发。await 关键字是语法简写,用于指示一段代码应该异步等待其他一段代码。 让我们看看 async / await 是如何工作的以及我们如何在 TypeScript 中使用它。

链接:https://blog.bitsrc.io/keep-your-promises-in-typescript-using-async-await-7bdc57041308

8、carbon-now-cli:用命令行工具生成漂亮的源代码图

一个很棒的工具,通过命令行来生成高亮的源代码图,可以自定义字体,主题,窗口控件等。

链接:https://github.com/mixn/carbon-now-cli/

【后端】

1、基于后编译的国际化解决方案

随着业务的迭代和需求复杂度的增加,常见的国际化 I18n 插件不一定能满足相关的需求开发,本文介绍了滴滴 WebApp 架构组在做国际化项目的过程中所遇到的问题以及所做的思考。

详情:https://juejin.im/post/5b47148c518825196b01ca3a

2、为什么选择 GraphQL:优点,缺点以及替代方案

虽然 REST 被大家使用过很长一段时间,但 Facebook 近年来出现了另一种技术:它叫做 GraphQL。以下部分将向您介绍 GraphQL,它的优点,缺点,以及是否有替代方案。

详情:https://www.robinwieruch.de/why-graphql-advantages-disadvantages-alternatives/

3、Python 之父不再担任 Python 社区领导人

Python 创始人和仁慈的领导者 Guido van Rossum 决定,不再担任 Python 项目的领导人。由于 PEP 572 的讨论过程让人沮丧,使得 Guido 做出了这个决定。他说,“现在 PEP 572 已经确定,我没想到促成一个 PEP 是如此地艰难,也没想到会有这么多人鄙视我的决定。我决定不再参与决策过程。我还会继续以一个普通核心开发的身份参与项目,我也还是会去给其他人指导 -- 由于不做决策了,可能指导他人的时间还更多些。我将不再是仁慈的**者,以后社区决定你们自己讨论决定。

详情:http://t.cn/RgGzB5T

4、图解基于 HTTPS 的 DNS

本文主要介绍如何通过基于 HTTPS 的 DNS 和可信递归解析器来保护用户的数据。文章介绍了什么是 HTTP?什么是 DNS?DNS 如何被利用?欺骗攻击等等。

详情:http://t.cn/RgGw3Ke

【其他】

1、命令行工具 — cheat.sh

cheat.sh 是一个命令行工具,更是一个实用的速查工具。试想一下,一个理想的速查工具应该具备什么功能?简洁、快速、全面、通用、不显眼。而 cheat.sh 就具有以下这些功能特性:简洁的 curl/browser 界面、涵盖 55 种编程语言,一些 DBMSes 和 1000 多个最重要的 UNIX/Linux 命令、无需安装,随处可用、超快,通常在 100 毫秒内即可返回答案、可以直接在代码编辑器中使用,无需打开浏览器。

链接:https://github.com/chubin/cheat.sh

2、当 Google 降级 Firefox Mobile 的搜索体验

2014 年,用户在 Bugzilla 递交报告称,相同的关键词搜索 Google 在不同移动浏览器上展示了不同的内容(Firefox Mobile,UC browser),其中 UC 是基于 WebKit 渲染引擎,与 Chrome 和 Safari 相同。四年后这个问题仍然没有解决。Mozilla 在与 Google 反复磋商之后仍然没有说服搜索巨人将 Firefox 移动版与其它 WebKit 浏览器一视同仁。Google 发言人在一份声明中称,Firefox 使用的是 Gecko 引擎,为确保功能兼容性需要额外的测试,它在 Firefox 桌面版做了额外测试,但移动版本的测试没有达到与桌面版相同水平。这种情况迫使 Mozilla 开发者采取了修改用户代理字符串的策略,欺骗 Google 将 Firefox Mobile 视为 Chrome。IE **时代的策略在 Google Chrome 支配的时代又再现了。

详情:https://www.solidot.org/story?sid=57130

技术周刊 第 40 期

【前端】

1、CSS 与网络性能

CSS 是页面渲染的关键因素之一,本文总结了一系列 CSS 加载的最佳实践,包括:懒加载非关键 CSS、避免使用 @import、关注 CSS 与 JavaScript 的顺序、仅加载 DOM 依赖的 CSS 等

https://juejin.im/post/5bf4bcbee51d4514e0512f72

2、像呼吸一样自然:React Hooks + RxJS

Leetcode 团队尝试用 Hooks 写 RxJS, 并写了一个 rxjs-hooks 库,一起来看一下官方的介绍吧

https://mp.weixin.qq.com/s/KNu0YUXyuZPoSz0Tn9mqpg

3、网页加载Three.js、Rust 和 WebAssembly

本文通过一个简单的实例,介绍网页如何加载用 Rust 写的 WebAssembly 模块。

https://medium.com/@cwervo/parc3l-combining-three-js-rust-and-webassembly-c1e643ef7681

4、浅谈webpack4.0 性能优化

对开发者而言,我们希望webpack这个工具可以给我们带来流畅的开发体验。比如,当不断修改代码时,我们希望代码的变更能及时的通知浏览器刷新页面,而不是手动去刷新页面。更进一步的我们希望,代码的修改只会局部更换某个模块,而不是整个页面的刷新。这样可以使我们不需要在等待刷新中浪费很多时间,大大提高了页面的开发效率。

https://zhuanlan.zhihu.com/p/50851312

5、Cookie 知识二则

SSO?你需要知道些什么?Cookie 还有优先级?赶紧来看作者怎么介绍Cookie的。

https://zhuanlan.zhihu.com/p/50541175

6、Web Worker 初探

Web Workers 使得一个Web应用程序可以在与主执行线程分离的后台线程中运行一个脚本操作。这样做的好处是可以在一个单独的线程中执行费时的处理任务,从而允许主(通常是UI)线程运行而不被阻塞。

https://juejin.im/post/5b4af72ae51d45198d4b1388

7、ervy:在终端中使用图表

没有什么特别的原因,只是因为喜欢终端,所以作者创建了这个可以在终端中打印图表的库。

链接:https://github.com/chunqiuyiyu/ervy

8、reactorx:React 全家桶与 RxJs 的完美结合

该仓库目前还在建设中,作者基于 RxJs 结合 React 全家桶提供了新的状态,路由管理等方案,喜欢 React 的同学可以关注一波。

https://github.com/querycap/reactorx

【后端】

1、史上最快、最强大的Gradle 5.0发布,新特性全解

Gradle 5.0 是有史以来速度最快、最安全、最强大的 Gradle 版本,这是 Gradle 官方给出的评价,v5.0 新增的功能主要包括:

  • 在构建缓存和更新检查功能的基础之上,Gradle 5.0 又改进了增量编译和增量注解处理功能。

  • 依赖约束、依赖对齐和版本锁定提供了可伸缩且灵活的依赖管理模型。

  • 新的性能提升、依赖关系管理、日志和弃用 API 使用检查让构建扫描得到了显著改善。

  • 静态类型的 Kotlin DSL 提供了代码自动完成、重构和其他 IDE 辅助,为 IDE 用户带来了一股清新的空气

https://gradle.org/whats-new/gradle-5/

2、Linkedin 工程师是如何优化他们的 Java 代码的

最近在刷各大公司的技术博客的时候,我在Linkedin的技术博客上面发现了一篇很不错博文。这篇博文介绍了Linkedin信息流中间层Feed Mixer,它为Linkedin的Web主页,大学主页,公司主页以及客户端等多个分发渠道提供支撑(如下图所示)。

https://greenrobot.me/devpost/java-faster-less-jvm-garbage/

【其他】

1、Material Design 大奖 2018 结果揭晓

今年的获奖作品在 4 个方面创造性地使用了 Material Design------表达创新体验适配。这些获奖者从数百个公开提名中脱颖而出,我们希望他们的这些作品能够让大家感受到设计的能量,正如我们从它们中感受到的那样。我们将继续推动和扩展 Material Design,添加 Material Theming 和定制等功能,但我们最愿意看到的,还是您如何继续让 Material 展现出只属于您自己的特色。

https://mp.weixin.qq.com/s/Q3sik-lu66Cp_HtIjGJYZw

2、第二届VueConf

VueConf 杭州的所有演讲 PPT

https://vue.w3ctech.com/#schedule

GitHub私有仓库免费

2019年1月7日,GitHub推送了最新博文《New year, new GitHub: Announcing unlimited free private repos and unified Enterprise offering》,主要有两个更新:
1、私有存储库免费
没有数量限制、每个仓库支持最多3个开发者协作。
2、统一了企业云和企业服务器
统一化的企业云(GitHub Businiess Cloud)和企业服务器(GitHub Enterprise),可以使用GitHub Connect进行无缝连接。
链接:https://blog.github.com/2019-01-07-new-year-new-github/

技术周刊 第 19 期

【前端】

1.漫谈组件复用

如何「懒」出效率,是值得思考的问题。减少代码的拷贝,增加封装复用能力,实现可维护、可复用的代码,无疑是我所认为的「懒」的高级境界。鉴于笔者之前使用 React 偏多,进入饿了么后也逐步使用了不少 Vue 进行开发,所以就借此机会,谈谈在 React 和 Vue 中各种基于组件的复用与实现方式。

详情:https://zhuanlan.zhihu.com/p/38136388

2.怎样以及为什么要保持你的 Git 提交记录的整洁

Git 提交记录很容易变得混乱不堪,现在教你怎么保持整洁。提交功能是 Git 仓库的关键部分之一,不仅如此,提交信息也是仓库的生命日志。项目或者仓库在随着时间的推移不断演变(新功能不断加入,Bug 被不断修复,体系架构也被重构),提交信息成为了人们查看仓库所发生的变化或者怎么发生变化的地方。因此使用简短精确的提交信息反映出内部的变化是非常重要的。

详情:https://about.gitlab.com/2018/06/07/keeping-git-commit-history-clean/
翻译版:https://zhuanlan.zhihu.com/p/38457882

3. React 的初学者指南

本课程面向 React 新手以及那些希望更好地理解 React 基础知识的人员。重点关注 React 基础知识,您将从本课程中了解 React 可以为您解决的问题以及解决这些问题的方法。您将很好地掌握 JSX 是什么以及它如何转换为常规的 JavaScript 函数调用和对象;

详情:https://egghead.io/courses/the-beginner-s-guide-to-react

4. Webpack 4 配置最佳实践

Webpack 4 发布已经有一段时间了。Webpack 的版本号已经来到了 4.12.x。但因为 Webpack 官方还没有完成迁移指南,在文档层面上还有所欠缺,大部分人对升级 Webpack 还是一头雾水。本文的重点在:Webpack 4 在配置上带来了哪些便利?要迁移需要修改配置文件的哪些内容;之前的 Webpack 配置最佳实践在 Webpack 4 这个版本,还适用吗;

详情:https://github.com/ProtoTeam/blog/blob/master/201806/3.md

5. ECMAScript 2018语言规范已发布

如果你缺乏睡前阅读(这是一个重要的文档,但是,是的,这是一个冗长且枯燥的规范),那么我兴奋的告诉你,ES2018的官方规范(基本上是JS规范的第9版)已经以HTML和PDF的形式发布了。

详情:https://www.ecma-international.org/publications/standards/Ecma-262.htm

6.Vuetify: Vue的语义组件框架

Vuetify是Vue的语义组件框架。它旨在提供干净,语义和可重用组件,使构建应用程序变得轻而易举。

详情:https://github.com/vuetifyjs/vuetify

7. Node.js 10.5 多线程新特性实践介绍

上周 Node 10.5 正式发布,带来了对 “ 工作线程” 实验性支持,也就说 Node 支持多线程了,接下来一起来看看它是怎么使用的吧,[视频链接](BxJS - Using Worker threads in Node.js - YouTube)

详情: https://medium.com/dailyjs/threads-in-node-10-5-0-a-practical-intro-3b85a0a3c953

8. 大前端时代前端监控的最佳实践

随着前端项目的复杂性的增加,大家都开始重视前端监控了,上周在北京举办的GMTC(全球大前端技术大会)上由阿里云前端监控团队前端技术专家@彭伟春带来的关于大前端时代前端监控的最佳实践,下面一起来听听他是怎么说的吧

详情: https://mp.weixin.qq.com/s/YiKRY_LDURY0uONtEhkUfg

【后端】

1.Java 编程之美:并发编程高级篇

借用 Java 并发编程实践中的话:编写正确的程序并不容易,而编写正常的并发程序就更难了。相比于顺序执行的情况,多线程的线程安全问题是微妙而且出乎意料的,因为在没有进行适当同步的情况下多线程中各个操作的顺序是不可预期的。文章作为 Java 并发编程之美系列的高级篇之三,主要讲解锁。

详情链接:https://mp.weixin.qq.com/s/y0wYil9K4JSZuYka1epj6A

2.JAVA 面试知识点

该项目是作者总结的 JAVA 知识点,内容包括:Java 基础知识、底层原理、算法详解。也有上层应用设计,其中不乏一些大厂面试真题。

详情链接:https://github.com/crossoverJie/Java-Interview

3.Python 3.7.0 正式发布,官方文档语种新增日韩法

Python 官网于 6 月 27 日发布 v3.7.0 的更新说明。v3.7.0 是最近比较大的更新。此次发布包含了诸多新特性和优化。

详情链接:https://mp.weixin.qq.com/s/bhJkSndL--H3xXoKxVFo8w

4.一款入门级的人脸、视频、文字检测以及识别的项目

使用了 Python3.6 、tensorflow 和 OpenCV 等工具,具有如下功能:人脸检测、识别(图片、视频),轮廓标识, 头像合成,数字化妆,性别识别,表情识别等等。

详情链接:https://github.com/vipstone/faceai

【其他】

1. DDOS 攻击的防范教程

一个多月前,阮老师的个人网站遭受 DDOS 攻击,下线了 50 多个小时。这篇文章记录了阮老师认为最有帮助的一些解决方案;

详情:http://www.ruanyifeng.com/blog/2018/06/ddos.html

2. 北大引入刷脸入校系统

北大引入了人脸识别门禁系统。为了保证识别速度和准确度,系统采用了 1:N 实时人脸识别技术。人脸识别应用场景一般分为 1:1 和 1:N。1:1 就是判断两张照片是否为同一个人,通常应用在人证匹配上,例如身份证与实时抓拍照是否为同一个人。而 1:N 应用场景,则是给定 N 个输入包括人脸照片以及其 ID 标识,再执行识别环节。随着 N 的变大,误识别率会升高,识别时间也会增长,所以相似度阈值通常都设定得较高,通过率会下降。北大的系统支持十万张照片底库,每次开门,需要即时从数万张照片中快速找出人脸特征精准匹配。这套系统目前仅在西南门部署,未来会推广到各个校门;

详情:https://www.solidot.org/story?sid=57013

技术周刊 - 第 12 期

【前端】

1. JavaScript 的新数据类型:BigInt

BigInt 是 JavaScript 中的一个新的数字基本(primitive)类型,可以用任意精度表示整数。使用 BigInt 可以安全地存储和操作大整数,即使这个数已经超出了 Number 能够表示的安全整数范围。V8 引擎已正式宣布支持 BigInt,从此 JS 可以精确表示任意位数的整数,再也不受 64 位双精度浮点数格式的限制了。本文将介绍一些用例,并通过比较 JavaScript 中的 BigInt 和 Number 来解释 Chrome 67 中的新功能。

详情: https://developers.google.com/web/updates/2018/05/bigint

2. NestJs:用 TypeScript 开发 NodeJs 服务器端的框架

Nest 是用于构建高效且可扩展的服务器端应用程序的渐进式 Node.js 框架,深受 Angular 的启发。它使用现代的 JavaScript 或 TypeScript(保留与纯 JavaScript 的兼容性),并结合 OOP(面向对象编程),FP(函数式编程)和 FRP(函数响应式编程)的元素,底层使用 express,旨在提供一个开箱即用的应用程序体系结构,允许轻松创建高度可测试、可扩展、松散耦合且易于维护的应用程序。

详情: https://www.codementor.io/samueleresca/server-side-architecture-with-node-and-typescript-using-nest-jazqpf6db

3. 用 Puppeteer 和 Jest 测试你的 React App

端到端测试可以帮助我们确保我们的 React 应用程序的所有组件都按我们预期的方式协同工作,以弥补单元测试和集成测试的不足。Puppeteer 是谷歌出品的端到端测试库, 它为我们提供了一个高层次的 API,可以通过开发工具协议控制 Chromium。在这篇文章中,作者将展示如何使用 Puppeteer + Jest 在简单的 React 应用程序上运行不同类型的测试。

详情: https://blog.bitsrc.io/testing-your-react-app-with-puppeteer-and-jest-c72b3dfcde59?gi=18fdd22f6a0

4. 用 vue 开发一个实时报表系统

本文向我们展示了一个实时报表系统的搭建过程,它的交互式仪表板有一个折线图, 显示每天的收入和开支,能够添加新的开支和收入,并能看到图表的实时更新。技术栈采用 Node.js + Express做后端服务, Vue + vue-chartjs做前端框架。

详情: https://www.codementor.io/iamlese/build-a-realtime-chart-with-vue-js-j7h1yvcbk

5. 怎样规避 async/await 地狱

作者先介绍什么是 async/await 地狱,以及在开发过程中怎样去规避 async/await 地狱,async/await 一时爽、性能问题火葬场。

详情: https://medium.freecodecamp.org/avoiding-the-async-await-hell-c77a0fb71c4c

6. 那些前端 MVVM 框架是如何诞生的

作者从 最原始的刀耕火种直接操作 DOM → 模板引擎 → 局部更新 → 组件化, 一步一步来还原 MVVM 的历史,具体分析每一种方案的不足和下一代方案的优点。

详情: https://zhuanlan.zhihu.com/p/36453279

7. Guess.js 一个通过数据驱动去提高用户体验的套件

一个非常有趣的项目,开发者可以通过 Google Analytics 集合机器学习来为你的网站智能的预加载资源,Addy Osmani 在本周的 Google I/O 大会 上也对这个项目进行了介绍,开发者可以通过 webpack 插件快速的添加到 React 和 Anguar 项目中去。

详情: https://blog.mgechev.com/2018/05/09/introducing-guess-js-data-driven-user-experiences-web/

8. JSX 还能这么玩

作者先简单介绍 JSX 的常规用法,随后通过用 JSX 实现一些简单的 Math 运算 和 merge sort 举例说明 JSX 还有更多新奇的玩法,令人大开眼界。

详情: https://medium.com/@pomber/jsx-can-do-that-1b2666c23a32

9. 我关掉 Javascript 上了一天的网

现在如果没有 JavaScript,可以在网上做任何事情吗? 这篇文章不仅用一个整洁的旅程来回答了这个问题,还提供了很多关于如何改善自己的网站和应用程序的见解。

详情:https://www.smashingmagazine.com/2018/05/using-the-web-with-javascript-turned-off/

10. 用 React 打造一个 Instagram

初学者适用哦!这个四节的教程会带你一步步用 React, Node, Pusher 来实现一个和 Instagram一样的照片分享小应用。

详情:https://react.statuscode.com/link/46696/web

11. Proton Native:使用 React Native 来构建桌面应用

和 React Native 一样的语法,使用原生组件而且跨平台。Proton Native 比 Electron更快,占用资源更少。React Native 在手机上做的一切你都可以用 Proton Native 在桌面端实现。

详情:https://proton-native.js.org/

12. CSS-Grid - 响应式布局和组件

css-grid 是新的特性(feature),跟着本文作者学习用仅仅几行 CSS 代码实现一个响应式的相册。

详情:https://medium.com/deemaze-software/css-grid-responsive-layouts-and-components-eee1badd5a2f

【后端】

1. 后端架构师技术图谱

大波干货来袭,内容包括:数据结构,常用算法,并发,操作系统,设计模式,运维 & 统计 & 技术支持,中间件,网络,数据库,搜索引擎,性能,大数据,安全,常用开源框架,分布式设计,设计** & 开发模式,项目管理,技术资源等等。

详情: https://github.com/xingshaocheng/architect-awesome

2. 200 行 Java 代码实现依赖注入框架

作者写了一个基本满足标准依赖注入规范「JSR-330」的小框架 iockids,这个小框架只有一个主类 Injector,大约 200 行代码,它具备以下功能:单例/非单例注入,构造器注入,字段注入,循环依赖注入和 Qualifier 注入。该项目在 GitHub 上开源。

详情: https://mp.weixin.qq.com/s/R14Xaq2iSUbVphdVtRiyjg

3. 2018 Java 开发人员的 10 个 Tips

文章提出了 2018 Java开发人员的 10 个 Tips:学习 Java 8,学习 Spring 框架(Spring Boot),学习单元测试,学习 API 和库,学习 JVM 原理,学习设计模式,学习 DevOps 工具,学习 Kotlin,学习微服务和更好地使用你的 IDE。

详情: https://javarevisited.blogspot.ca/2018/05/10-tips-to-become-better-java-developer.html

4. 互联网公司技术架构

国内外互联网公司技术架构和开源项目,包括:微信/淘宝/微博/网易/腾讯/阿里/美团点评/百度/Google/Facebook/Amazon/eBay.

详情: https://github.com/davideuler/architecture.of.internet-product

5. Python 开发者画像:用什么,做什么

这是由开发 PyCharm 的 JetBrains 公司在 2017 年末进行的一项调查,收集了全球约 9500 名 Python 程序员的反馈。看看大家都在用 Python 做什么,最常用的是哪些工具和库,而你是不是一个典型的 Python 开发者呢?

详情:https://www.infoworld.com/article/3269582/python/python-developers-profiled-what-you-use-what-you-do.html

6. Python 中优化数据分析处理代码的七个策略

这是正在进行的 PyCon 2018 上分享的一个 Slides 演示文稿。Python 为处理数据提供了一个强大的平台,但通常最直接的数据分析可能会非常缓慢。 但是,如果使用得当,Python 可以像 C 这样的编译语言一样快。这个分享概述了如何有效地利用 Python 优化数字类代码,涉及 numpy、pandas、scipy、cython 和 numba 等工具库。

详情:https://speakerdeck.com/jakevdp/seven-strategies-for-optimizing-numerical-code

7. 号称性能提升 2 倍的 MySQL 8 来袭,我们该如何应对?

这是 OSCHINA 第 196 期的高手问答。MySQL 8.0 正式版发布已有两周,官方表示 MySQL 8.0 要比上个版本 MySQL 5.7 快 2 倍。对于开发者来说,性能的改进固然是让人兴奋的,不过除了这些看得到的改进,更值得我们关注的是,我们该如何应对和利用新版本带来的变更?

详情:https://www.oschina.net/question/2720166_2279371

8. Git Merge 怎么用(正确的打开方式)

将功能用不同的分支来管理,对于认真的开发人员来说是至关重要的事情。 通过分离开每个功能、错误修复或者一些实验性代码,能帮您避免很多问题并保持开发分支的清洁。直到某个时候,一段代码会达到了你想要将它与项目其余部分整合的状态,这时候就要用到 git merge 命令了。

详情:https://dev.to/neshaz/how-to-use-git-merge-the-correctway-25pd

【其他】

1. 2018 Google I/O 亮点汇总

2018 Google I/O 开发者大会已于北京时间 5 月 9 日凌晨在美国山景城正式启幕。新的 Android P 系统发布,更智能、更简化;下一代的 Android 组件 Android Jetpack 发布;改善 Kotlin 开发体验;AI 芯片 TPU 3.0 发布;Gmail 新增实时推荐功能,可智能书写邮件;Google Photos 可智能 P 图,可对老照片进行色彩还原;Google Assistant 提供 6 种新声音,更加真实自然,还扩展了视觉交互能力和电话预约功能;此外还有 Google Map、Google Lens、Android Things 1.0 和 无人驾驶等技术更新。

详情: https://mp.weixin.qq.com/s?__biz=MjM5NzM0MjcyMQ==&mid=2650080824&idx=1&sn=61f913b655fe4bcf2b846a0191251fc1

2. 高效阅读 GitHub 源代码

文章介绍三种方法帮助你更有效的阅读 Github 源代码。用 Chrome 插件 Octotree,左侧会出现树形结构,方便你浏览源代码;用 Github Desktop 桌面应用,方便把代码 clone 到本地,然后进行各种 git 操作;直接把 Chrome 变成一个在线 IDE,帮你把npm 包都准备好,直接可以运行。

详情:https://zhuanlan.zhihu.com/p/35778751

技术周刊 第 28 期

【前端】

1. Firefox Nightly 63不再信任赛门铁克证书

Firefox 浏览器最新版已不再信任赛门铁克证书,其他浏览器很快也会跟进。这个是 2017 年 moliza 共识提案 的一部分,Google Chrome Team 同样接受了这个提案,这个改进同样在Chrome Canary中已经生效,这意味着拥有赛门铁克证书且未被替换的网站的访问者现在会收到警告页面。

链接:https://blog.nightly.mozilla.org/2018/08/14/symantec-distrust-in-firefox-nightly-63/

2. CSS 实战之渐变动画

我们将学习如何在实际世界中使用CSS变换来解决各种任务并获得有趣的结果。具体来说,您将学习如何垂直调整元素,创建漂亮的箭头,构建加载动画以及创建翻转动画。

链接:https://www.sitepoint.com/css-transforms-real-world/

3. Babel 7.0 正式发布,支持 TypeScript,JSX Fragment

Babel 官方博客宣布正式推出 Babel 7.0,在过去两年内,Babel 7 经历了 4000 次提交,发布了 50 多个预览版本,这也是三年前发布 v6.0 之后的最大更新。新特性有:使用 @babel 命名空间,因此 babel-core 就变成了 @babel/core;移除(并停止发布)任何年度预设(preset-es2015 等),@babel/preset-env 取代了对这些内容的需求等。

链接:https://mp.weixin.qq.com/s/P8SUIQB5nUGc4A_BzYCMMA

4. Vue 业务实践指北

写业务,对于一个前端而言,应该是再正常不过的事了,业务对标着需求,前端 er 们根据产品的需求以及设计师的设计稿开发出相应的 web 应用,无论是一个简单的页面或是一套复杂的系统,或多或少掺杂着业务逻辑。然而,我们有时候写的业务逻辑到底是为了去写业务逻辑而写的吗,作为一个常年与业务抗战的* nian,我认为我们写的业务不光光是为了在排期内完成简单的任务,而是要打磨自己写业务的能力,并学会根据实际场景去设计一套灵活的,可维护,易理解的业务代码。

链接:https://zhuanlan.zhihu.com/p/39400697

5、一口(很长的)气了解 Babel

趁着 babel7 的发布,我们再来重温以下 babel 的前世今生,先从 babel 是什么、有什么作用,以及怎么使用,再到 babel 的整个生态。希望通过本篇博客能对你刚接触 babel 的同学起到入门的作用,对于 “老司机” 能从中发现不一样的知识点

链接: https://mp.weixin.qq.com/s/qetiJo47IyssYWAr455xHQ

6、《Web 推送通知》系列翻译

本系列文章均翻译自谷歌开发者网站,目的是让对 Web 推送服务有兴趣的开发者,能够通过阅读本系列的文章而初步掌握 Web 推送的一些基本原理和实现方式,从而在实际工作中可以应用起来

链接:https://zhuanlan.zhihu.com/p/43063120

7、深入理解 TypeScript

image

《TypeScript Deep Dive》中文翻译。

链接:https://jkchao.github.io/typescript-book-chinese/

8、闲鱼基于Flutter的移动端跨平台应用实践

image

本文来自阿里巴巴闲鱼无线技术专家王树彬在今年 GMTC 大会上的演讲。Flutter 作为 Google 新一代的跨平台框架,有较多的优点,但跟其他跨平台解决方案相比,最吸引我们的是它的高性能,可以轻松构建更流畅的 UI。虽然各跨平台方案都有各自的特点,但 Flutter 的出现,给闲鱼、给大家都提供了一种新的可能性。

链接:https://mp.weixin.qq.com/s/RiWzt4WTrCVX__AO6mNkVQ

【后端】

1. Shuttle:基于 Go 开发的全平台 ss-local 工具

Shuttle是一个基于Go开发的全平台ss-local工具,具有代理、多服务器选择、HTTP/HTTPS抓包、独立DNS解析机制,目标为开发者提供便利。
Shuttle 可以成为你的网络管理员:1)它实现了ss-local可以与远端的ss-server通信,能根据设置选择直连、拒绝或代理;2)有更强大的规则配置:域名规则设置、IP段规则设置、GEO-IP规则设置;3)多个ss-server时,可以进行分组管理。组中服务器选择方式支持:往返时间选择(rtt),手动选择(select);4)可以实现HTTP/HTTPS 抓包,反向代理,请求头修改,返回头修改,返回体伪造等;5)支持DNS服务器设置以及多种域名解析方式:静态解析(static)、直连解析(direct)、代理服务器解析(remote)

链接:https://github.com/sipt/shuttle

2. Python 自动化测试框架有哪些?

对于任何编程语言来说,都没有绝对理想的测试框架。它取决于开发者的舒适度、项目需求和项目中特定模块所需的测试类型。可用的自动化测试框架有线性自动化、基于模块的测试、函数库框架测试、混合测试、关键词驱动和数据驱动测试等。文章介绍了几种 python 中性能最全面的自动化测试框架:Robot Framework、RedwoodHQ、Jasmine、Pytest。

链接:http://www.infoq.com/cn/articles/python-frameworks-available-test-automation
Lmagic

3、Go 高级编程

image

《Go 语言高级编程》开源图书,涵盖 CGO、Go 汇编语言、RPC 实现、Protobuf 插件实现、Web 框架实现、分布式系统等高阶主题。

链接:https://github.com/chai2010/advanced-go-programming-book

4、zeit/pkg

image

将Node.js项目打包成可执行文件。

链接:https://github.com/zeit/pkg

【其他】

1. 这些必备的 VS Code 插件你都用过吗?

如今,Visual Studio Code无疑是最流行的轻量级代码编辑器。VS Code的强大无疑来自于它的插件市场。多亏了开源社区,VS Code现在几乎对所有的编程语言、框架和开发技术都有支持。提供这种支持的方式是多样的,主要包括了为特定技术提供代码片段、语法高亮、Emmet以及智能提示功能。

链接:https://my.oschina.net/powertoolsteam/blog/1932551

2. Vim是从何而来:智慧积累的伟大力量

Vim无处不在。太多的人使用过它,像是支持HEX文件这种事根本算不上是一个惊喜。Vim被预装在Mac OS上,同时在Linux世界中有着一大批拥趸。即使那些讨厌它的人对它也很是熟悉,因为有足够多的主流命令行工具会在默认情况下把用户扔到Vim中,以至于外行人被困在Vim中不知所措,仿佛vim是一种病毒一样。有一些主流的网站,包括Facebook,当你按下j键时,页面会向下滚动,当你按下k键时会向上滚动——这种不可思议现象正是Vim通过数字文化广泛传播的高水位标志。

链接:https://mp.weixin.qq.com/s/k4dH7rEvvLaaq5l7QJOzQw

3、Lerna添加(然后删除)许可条款阻止某些公司使用

image

Lerna 修改了 MIT 许可证,加了一个条款:凡是帮助美国海关移民执行局(ICE)虐待非法移民的公司,一律不得使用该工具,排在第一名的是微软,之后又回滚到之前版本撤销本次修改。

链接:lerna/lerna#1616

4、程序员需要改变的一些坏习惯

image

1、在休息期间从不尝试外出;
2、不参加锻炼;
3、只有编程一个爱好;
4、一直保持很舒适的状态;
5、没有明确的目标和方向。

链接:https://dev.to/lewismenelaws/bad-habits-developers-should-fix-53n9

前端周刊 - 第 11 期

1. Angular 6 正式发布

Angular 6.0.0 已正式发布,新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。Angular v6 是统一整体框架、Material 和 CLI 三大 Angular 组件的第一个版本,此次没有将重点放在底层框架,而是更多地关注于工具链上,以使其具有更好的可移植性。

详情:https://alligator.io/angular/angular-6/

2. 体验友好的数值输入"InputMode"

数值输入框都需要一个数值输入的 UI 界面。在大多数小屏幕手机上,只要把 input的 type 设置为 number,就可以轻松唤出数字键盘,处理数字输入。可是在稍大点的手机屏幕上,在输入框最右侧会像 PC 端一样出现一个默认的小上下箭头,当手指去点这个箭头,体验会非常不好,这不是我们希望的结果。当我们输入的内容不仅仅是数字,还包括加号、减号时,input='number' 并不能很好地工作。能解决这一问题的 InputMode 已经被 WHATWG 提倡了很多年,现在 Chrome 66 终于率先支持这一模式。

详情:https://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/

3. 有了Meiosis,也许你不再需要Redux, MobX或RxJS

Meiosis 实际上并不是一个库,它只是提供一个更简单的状态管理模式。它的特点是:你在开发时有更多的自由空间,不必依赖库的支持;没有"黑科技",你完全知道代码在做什么;提供可复用的纯函数对象组件;具有和 Render Props,React Context 相同的功能;支持第三方插件的引用如 Bootstrap、jQuery 等等。

详情:https://medium.com/@foxdonut00/you-dont-need-redux-mobx-rxjs-cerebral-6a735b150a02

4. 打造你的第一个 RESTful API

如果你是从未写过服务器端代码的前端开发者,又想拓展技能树往后端发展,可以试试走出第一步,跟着本文作者学习如何用 NodeJS 打造一个 RESTFUL 风格的 API。

详情:https://codeburst.io/building-my-first-restful-api-95575eb7ed42?gi=98b1f135d032

5. 漫画:深入浅出 ES 模块

ES 模块为 JavaScript 提供了官方标准化的模块系统。然而,这中间经历了一些时间——近 10 年的标准化工作,但等待已接近尾声。随着 5 月份 Firefox 60 发布(目前为 beta 版),所有主流浏览器都会支持 ES 模块,并且 Node 模块工作组也正努力在 Node.js 中增加 ES 模块支持。同时用于 WebAssembly 的 ES 模块集成也在进行中。
让我们来看看 ES 模块能解决什么问题,以及它们与其他模块系统中的模块有什么不同。

详情:https://zhuanlan.zhihu.com/p/36358695

6. 团队开发中如何统一构建标准

在开发团队工作时,在开发者中建立共同的构建标准以节省时间和防止重复工作至关重要。下面是 CircleCI 在整个团队中自动执行共享构建标准的 3 种方法:强制代码格式化,强制构建时间限制,强制 PR 分支目标。

详情:https://circleci.com/blog/enforce-build-standards/

7. 用 CSS 开发下拉菜单

CSS 越来越强大,并且具有 CSS grid 和自定义属性(也称为CSS变量)等功能,我们看到一些真正有创意的解决方案正在出现。其中一些解决方案的重点不仅在于使网页更漂亮,而且使网页更易于访问。这篇文章讲述了如何使用伪类 focus-within 制作一个简单的下拉菜单。

详情:https://css-tricks.com/solved-with-css-dropdown-menus/

8. React构建表单-您需要知道的一切

表单对于任何现代应用都是必不可少,它们是用户与应用进行交互的基本媒介。在应用中表单可表现为各种形式:用户安全地登录,搜索和过滤产品列表,预订产品和构建购物车等。在本教程中,我们将看看 React 如何处理表单。我们不仅介绍基础知识,还介绍验证和最佳实践,以及一些有经验的开发人员也会遇到的错误。

详情:https://www.codementor.io/blizzerand/building-forms-using-react-everything-you-need-to-know-iz3eyoq4y

9. 你每天都应该使用的现代JS功能

JavaScript 仅用于在网站上添加一点交互作用的时代已经一去不复返了。新的 ECMAScript 标准现在每年发布,带来了越来越有用和强大的功能。JavaScript 不仅在前端使用,还可以构建后端体系结构、移动、桌面或物联网应用。本文作者作为全栈开发者和移动端开发专家,为我们提供了他日常工作中使用的 JS 技巧。

详情:https://www.codementor.io/thomas478/modern-javascript-features-which-you-should-be-using-every-day-for-better-development-and-what-problems-do-they-solve-itkhcemti

10. 如何处理 JavaScript 内存泄漏

这篇文章为深入探讨 JavaScript 以及其工作原理系列的第三篇,讨论了一个开发者容易忽视的重要主题 :内存管理。文章内容包括:什么是内存,内存生命周期,JavaScript 中的内存分配,内存释放,垃圾收集,4 种常见的 JavaScript 内存泄漏以及如何处理 JavaScript 内存泄漏的技巧。

详情:https://mp.weixin.qq.com/s?__biz=MzAwNDcyNjI3OA==&mid=2650841194&idx=1&sn=c7994c15f1ad38b636c763a01f9c18ad

11. 技术面试需要掌握的基础知识

这是来自 GitHub Trending 的热门项目,目前已有超 2 万 star。项目总结了技术面试需要掌握的基础知识,包括:算法,操作系统,网络,面向对象,数据库,Java,分布式,工具和编码实践等等。

详情:https://github.com/CyC2018/Interview-Notebook

12. **程序员容易发音错误的单词

**程序员容易发音错误的单词,包括我们熟知的 Angular、AJAX、Git、hidden、Linux、module 和 width 等。一起来看看,或许会有新发现。

详情:https://github.com/shimohq/chinese-programmer-wrong-pronunciation

技术周刊 - 第 18 期

【前端】

1. V8 改进垃圾清理机制

V8 引擎宣布"垃圾清理机制"的重大改进。我们知道,对于大型程序,垃圾清理很影响性能,因为程序必须暂停,让引擎识别哪些内存不再需要。

V8 现在允许内存识别不暂停程序,而是并发进行,使得程序停顿时间减少70%左右。引擎如何识别不再需要的对象,希望了解具体实现的朋友,可以看看下面这篇文章。

详情:https://v8project.blogspot.com/2018/06/concurrent-marking.html

2. Github Star !== 使用(Usage): React 仍然比 Vue 有更广泛的用户

上周有一个关于 Vue.js 的有趣的社区故事:Vue 在 GitHub 上获得了比 React 更多的 star,但是尽管 Vue 增长迅速,React 仍然在实际使用中占主导地位。

详情:https://zendev.com/2018/06/19/react-usage-beating-vue-angular.html

3. JavaScript 引擎基础:Shapes 和 Inline Caches

本文就所有 JavaScript 引擎中常见的一些关键基础内容进行了介绍——这不仅仅局限于 V8 引擎。作为一名 JavaScript 开发者,深入了解 JavaScript 引擎是如何工作的将有助于你了解自己所写代码的性能特征。
详情:https://zhuanlan.zhihu.com/p/38202123

4. 如何在浏览器中使用 JavaScript 模块

所有主流浏览器现在都已支持 JavaScript 模块!本文将介绍如何使用 JS 模块,如何正确地发布,以及 Chrome 团队如何努力使模块今后做的更好。

详情:https://developers.google.com/web/fundamentals/primers/modules

5. SpriteJS -- 一款简单的跨终端 canvas 绘图框架

SpriteJS 是一款由360奇舞团开源,月影大大亲自操刀的跨终端 canvas 绘图框架,可以基于 canvas 快速绘制结构化 UI、动画和交互效果,并发布到任何拥有canvas环境的平台上(比如浏览器、小程序和node)。

详情: https://zhuanlan.zhihu.com/p/38262981

6.ES2018(ES9) 新特性

每年 ES(ECMAScript) 都会将处于 Stage 4 阶段的提案作为本年度的 ES 规范,一起来看看今年都有哪些新特性值得我们 GET 的呢?

详情:https://juejin.im/post/5b2a186cf265da596d04a648

7.浅析前端安全之 XSS

作为前端开发者,我们需要时刻保持安全意识。虽然安全始终是相对的,但如果我们通过提高开发中的安全意识,也就增加攻击者发起攻击的成本。本篇文章例举详实的例子详细介绍了 XSS 的风险、产生和防御,希望对各位前端 er 的日常开发有所帮助。

详情:https://zhuanlan.zhihu.com/p/38327058

8.前端本地文件操作与上传

本文讨论了3种交互方式的读取方式,通过input控件在input.files可以得到File文件对象,通过拖拽的是在drop事件的event.dataTransfer.files里面,而通过粘贴的paste事件在event.clipboardData.files里面,Safari这个怪胎是在编辑器里面插入一个src指向本地的img标签,可以通过发送一个请求加载本地的blob数据,然后再通过FileReader读取,或者直接append到formData里面。得到的File对象就可以直接添加到FormData里面,如果需要先读取base64格式做处理的,那么可以把处理后的base64转化为blob数据再append到formData里面。对于老浏览器,可以使用一个iframe解决表单提交刷新页面或者跳页的问题。

详情:https://fed.renren.com/2017/11/25/local-file-manage-upload/

【后端】

1. Java 生态圈知识汇总

该项目列举了工作中常用的一些技术(汇总 Java 生态圈常用技术框架、开源中间件,系统架构、项目管理、经典架构案例、数据库、常用三方库、线上运维等知识),以及如何锻炼提升自己的架构能力。
由于每块技术市场上基本都有对应的网络资料或书籍,所以项目只是少篇幅列举工作中用到的核心知识点,抛砖引玉,属于进阶型,不适用初学者。

详情:https://github.com/aalansehaiyang/technology-talk

2. Go 微服务实战汇总

包括国内经验:今日头条 Go 建千亿级微服务的实践、华尔街见闻基于 Golang 的微服务实践、阿里云基于 Go 的微服务架构分享、Golang 微服务在腾讯游戏用户运营领域的探索及实践等。以及国外经验:Microservices in Golang 等。

详情:https://gocn.vip/question/1999

3. 用于 Web 开发的公共 JSON API 集合

内容包括 Books、Business、Calendar、Machine Learning、Music、New、Vehicle、Video、Weather 等。

详情:https://github.com/toddmotto/public-apis

4. Google API Design Guide

API设计规范一直是个让人很头痛的问题,不同的设计风格会导致同一个公司之间无论是前端浏览器还是后端服务调用不同的实现时产生很多不可预知的情况,维护成本和理解成本还很高。这是一份针对网络API的通用设计指南。这份指导可同时应用于基于HTTP的REST APIs与基于socket的RPC APIs,尤其是gRPC APIs。

详情:https://google-cloud.gitbook.io/api-design-guide/

5. 利用 EasyWeChat 和 ChatterBot 简单搭建一个公众号「自动回复机器人」

自从公众号列表页改版以来,很多人都说会弱化公众号菜单的作用,所以索性「放弃菜单」,制作「自动回复」来替代菜单功能。本文简述使用这两个工具来构建公众号的「自动回复」功能。

详情:https://juejin.im/post/5b2f7030f265da597c772c3e

6. 后端应该如何安全地储存用户数据?

合格的后端开发者和运维人员需要考虑每个接口的安全性、每个可被公网访问到的服务器的安全性,保证不要犯错。但是我们还需要考虑,如何在已经犯错的情况下把损失降低到最小。在做数据的存储方案时,我们需要假设储存的数据已经被泄露出去了,如用户密码这种隐私数据的存储就是一个重点。

详情:https://zhuanlan.zhihu.com/p/38057805

【其他】

1. 美团外卖 Android Crash 治理之路

Crash 率是衡量一个 App 好坏的重要指标之一。如果你忽略了它的存在,它就会得寸进尺,愈演愈烈,最后造成大量用户的流失,进而给公司带来无法估量的损失。本文讲述美团外卖Android客户端团队在将 App 的 Crash 率从千分之三做到万分之二过程中所做的大量实践工作,抛砖引玉,希望能够为其他团队提供一些经验和启发。

详情:https://mp.weixin.qq.com/s/FoimQL9XsgnM8gKtsC5jRA

2. 除了技术实力,程序员晋升还需要具备哪些软技能?

程序员如何保持较快速度成长?程序员如何转型做管理?除了技术能力以外,程序员还需要具备哪些软技能,才能获得快速晋升?当下最热的人工智能技术商业落地情况如何?
前两周,极客 Live 邀请了馒头商学院创始人王欣、知识星球创始人吴鲁加、美团技术学院院长刘江、知道创宇 CTO&COO 杨冀龙、商汤科技联合创始人 &副总裁杨帆,为大家贡献了 5 场高质量的直播分享。应观众的呼吁,现在将直播回放奉上,因为各种原因错过直播的小伙伴赶紧补功课啦!

详情:https://mp.weixin.qq.com/s/l-qX30NzOIudwvvQK27j8A

技术周刊 第 27 期

【前端】

1. 在开始React之前,你需要学好这些JavaScript

我在给别人培训 React 的过程中得出这样的一个结论:React 完全是关于 JavaScript 的。而且,有很多材料是关于 JavaScript 而不是 React。其中大部分是 JavaScript ES6 及其特性和语法,还包括三元运算符、简化的语法、this 对象、JavaScript 内置函数(map、reduce、filter)或更一般的概念,如可组合性、可重用性、不变性或高阶函数。在刚开始接触 React 之前,你可能不需要掌握这些基础知识,但在学习或实践过程中肯定需要用到它们。这篇文章列出了大部分有用的 JavaScript 特性,将在你学习 React 的过程中助你一臂之力。

链接:https://mp.weixin.qq.com/s/2HLrU43Qsc61gaeJj2Q2Og

2. Tone.js:交互式音乐 web 框架

Tone.js是一个用于在浏览器中创建交互式音乐的Web Audio框架。 Tone.js的架构旨在让希望创建基于Web的音频应用程序的音乐家和音频程序员熟悉。 在高层,Tone提供通用的DAW(数字音频工作站)功能,如用于安排事件和预建合成器和效果的全局传输。 对于信号处理程序员(来自Max / MSP等语言),Tone提供了大量高性能,低延迟的构建模块和DSP模块,可构建您自己的合成器,效果和复杂的控制信号。

链接:https://github.com/Tonejs/Tone.js

3. StyleURL

我们有时会在 Chrome 浏览器的开发者工具里面,修改 CSS 样式表。这个浏览器插件会比较修改前后的样式表,生成 diff 文件,并存入 GitHub Gist。

链接:https://www.styleurl.app/

4. TLS 1.3 介绍(英文)

image | left

HTTPS 协议的最新版本 TLS 1.3,最近成为了国际标准 RFC 8446。本文详细介绍这个新协议,包括 TLS 1.2 的缺陷,以及 TLS 1.3 如何解决它。

链接:https://blog.cloudflare.com/rfc-8446-aka-tls-1-3/

5、js-lingui - 面向 JavaScript 和 React 的可读、自动化和强优化的 i18n 库

jsLingui 简化了 JavaScript 的国际化。它涵盖了所有 i18n 功能,同时通过使用编译的消息目录来保持库的小尺寸,消息会自动从源代码中提取出来,并在构建步骤中编译,这使得生产代码变得更小、更快。

链接: https://github.com/lingui/js-lingui

6、anu 小程序 - React 转 小程序解决方案

anu小程序是去哪儿网推出的基于anujs的React转微信小程序方案。近年来,涌现不少转换小程序的方案,mpvue, mina, wept, wepy, mpvue-wxparser, taro,一方面说确了小程序的确兴旺发达,另一方面也暴露了小程序自身的抽象能力不足,更体现这些补救工具也是各种槽点,因此才一直混战到现在。作者 通过系列文章来探讨 React 转 小程序的可能性。

链接: https://zhuanlan.zhihu.com/p/42788287

7、三角函数在前端动画中的应用

image.png | left | 600x327.95031055900625

作者结合图像应用,SlowInSlowOut 和角度控制等场景以及行走动画案例,带领大家掌握三角函数在前端动画中的应用。

链接:https://w3ctrain.com/2018/08/20/trigonometry-you-must-know/

8、第四届 FEDAY 的 PPT 已全部更新

schedule.jpg | center | 600x266

2018 年 8 月 19 日于广州,由 w3ctech、前端圈共同举办的第四届 FEDAY 落下帷幕,来自全国各地的前端爱好者共聚一堂,畅聊前端,畅聊未来,目前 PPT 已更新。

链接:https://fequan.com/2018/#schedule

【后端】

1、结合 Apollo Server 和 Express 的 GraphQL Server 教程

graphql-apollo-server-tutorial.jpg | center | 600x196

本文提供了一个完全可用的 GraphQL server 模版,包含身份验证,角色访问,订阅,分页等。

链接:https://www.robinwieruch.de/graphql-apollo-server-tutorial/

2、使用 Go 创建一个简单的跨平台桌面游戏

image.png | left | 512x434

跨平台桌面应用一般用 Electron 开发,打包体积很大。对于纯静态应用,其实有另一种轻量级选择。操作系统都有自己的 Webview,Mac 是 webview,Windows 是 MSHTML,Linux 是 gtk-webkit2。这篇文章教你怎么用 Webview,开发一个跨平台的桌面打飞机游戏。

链接:https://sausheong.github.io/posts/cross-platform-games-with-go/

3. 1.25亿用户以后,Netflix总结的系统高可用经验

Netflix 可谓是硅谷最酷的公司之一,其企业文化也备受推崇:这家公司没有 CTO,只保留高效能人士,不论公司发展如何都提供市场价最高的薪资……也正是在这样的背景下,Netflix 发展迅速,从 5000 万用户增长到 1.25 亿用户,他们总结了哪些可供参考的系统高可用经验?

链接:https://mp.weixin.qq.com/s/Pak3ADWx5Wlgtkn8lTODVA

4. Go 1.11 正式发布:添加对模块 "modules" 的初步支持

美国当地时间8月24日,Go 开发团队宣布推出 Go 1.11 正式版。下载地址:https://golang.org/dl/ or https://golang.google.cn/dl/

链接:https://mp.weixin.qq.com/s/-0HiWG17EBesGFHeZcaCTQ

【其他】

1、微信的历史

image.png | left | 512x250

微信能够拥有现在如此庞大的用户群,是有原因的。

链接:http://www.ruanyifeng.com/blog/2018/08/weixin.html

2、工程师以道德方面的原因拒绝科技巨头的招募

image.png | left | 530x398

Anna Geiduschek 是 Dropbox 的一名软件工程师,通常没时间回应招聘邮件,但最近她强硬的拒绝了 AWS 的招募,原因是她反对 AWS 托管一家科技公司的服务,该服务被美国政府用于对非法移民进行拘留和驱逐。亚马逊、Facebook、Google 和微软等公司面临越来越多的内乱,它们的员工对公司的服务和产品提出了道德方面的质疑。

链接:https://plus.google.com/104314277918209223775/posts/fkEVX36GYW4

技术周刊 第 33 期

【前端】

1. 为什么说 ReasonReact 是编写 React 的最佳方式?

reasonml

使用 React 编写用户界面是一件很酷的事儿,但是由于 JS 语言本身设计的缺陷,React 提倡的一些原则与 JS 格格不入,特别是对象的不可变性、函数式编程**、类型系统等,好在 ReasonML 就是这样一门语言,Reason 提供了开箱即用的不可变性,因为它是基于函数式语言 OCaml,所以也具备了 OCaml 内置的一些特性,同时它也提供了一套强大的类型系统

链接: https://mp.weixin.qq.com/s/doYEfIUFoqV4fBk6OCkDbw

2. awesome-vscode

vscode

一系列实用 VSCode 插件,包括插件下载地址和插件源码地址

链接: https://viatsko.github.io/awesome-vscode/

3. 30-seconds-of-code

精选的有用JavaScript代码段集合,您可以在30秒或更短的时间内理解这些代码段。每天花一点时间,复习一下这些竞猜用法吧。

链接:https://30secondsofcode.org/

4. 如何实现前端录音功能

前端实现录音有两种方式,一种是使用MediaRecorder,另一种是使用WebRTC的getUserMedia结合AudioContext,MediaRecorder出现得比较早,只不过Safari/Edge等浏览器一直没有实现,所以兼容性不是很好,而WebRTC已经得到了所有主流浏览器的支持,如Safari 11起就支持了。所以我们用WebRTC的方式进行录制。
利用AudioContext播放声音的使用,我已经在《Chrome 66禁止声音自动播放之后》做过介绍,本篇我们会继续用到AudioContext的API。为实现录音功能,我们先从播放本地文件音乐说起,因为有些API是通用的。

链接:https://www.yinchengli.com/2018/09/02/js-record-audio/

5. 正则表达式真的很6,可惜你不会写

本文旨在用最通俗的语言讲述最枯燥的基本知识,本文作者用一种比较通俗点的方式讲一下正则,让你能在读完之后,能自己写出一些简单的正则,再不济,能看懂别人写的正则,那也不错了。

链接:https://mp.weixin.qq.com/s/CBexZfG1DHYji_Pk6Zo38w

6. 深拷贝的终极探索(90%的人都不知道)

本文我将给大家破解深拷贝的谜题,由浅入深,环环相扣,总共涉及4种深拷贝方式,每种方式都有自己的特点和个性。

链接:https://juejin.im/post/5bc1ae9be51d450e8b140b0c

7. 如何将 Web 应用做成 Docker?

本文通过一个很简单的单页应用,演示如何将 Web 应用放到 Docker 里面,然后通过 Docker 运行。

链接:https://itnext.io/dockerizing-modern-web-apps-cd9667eebf44

8. Cephes

Cephes 是 JavaScript (准确说是 WebAssembly)的数学函数库,类似 Python 的 SciPy。

链接:https://www.nearform.com/blog/webassembly-cephes/

【后端】

1. 体验go语言的风*式编程

最近想搞搞后台开发,话说注意力就转移到了公司用的golang。用Go做微服务比较方便,或许是因为golang强悍的语法吧,看到go的语法,自己已被深深的吸引。来我们一起感受下Go的风*式的代码风格。

链接:https://juejin.im/post/5bbd564be51d450ea40220ad

2. 面试必备:八种排序算法原理及Java实现

1539507326324-8e9f43ea-d54e-4316-a257-6ca1c232da08

经常提及的八大排序算法指的就是内部排序的八种算法,分别是冒泡排序、快速排序、直接插入排序、希尔排序、简单选择排序、堆排序、归并排序和基数排序,如果按原理划分,冒泡排序和快速排序都属于交换排序,直接插入排序和希尔排序属于插入排序,而简单选择排序和堆排序属于选择排序,如上图所示。

链接:https://juejin.im/post/5b95da8a5188255c775d8124

3. Java编程详细解析—淘宝大秒杀系统是如何设计的?

最初的秒杀系统的原型是淘宝详情上的定时上架功能,由于有些卖家为了吸引眼球,把价格压得很低。但这给的详情系统带来了很大压力,为了将这种突发流量隔离,才设计了秒杀系统,文章主要介绍大秒系统以及这种典型读数据的热点问题的解决思路和实践经验。

链接:https://my.oschina.net/u/3972077/blog/2231326

4. 来,见识一下内存12TB的超大服务器

作者在1977年建造的Altair 8800计算机只有4千字节的内存。而今天能够使用一个12TB(确切地说是12TiB)的EC2实例,几乎是过去的40亿倍!新的Amazon EC2高内存实例使您可以利用其他AWS服务,它们旨在允许AWS客户运行大规模SAP HANA安装,并可用于构建提供企业级数据保护和业务连续性的生产系统。

链接:https://mp.weixin.qq.com/s/NfLvZ0zxr6ZLM0iSrJ4YEg

【其他】

1. 精品 Mac 应用分享推荐

收集各种类别非常好用的 Mac 应用程序、软件以及工具,打造开发者利器,相信能帮助大家更快乐、高效地工作。

链接:https://wangchujiang.com/awesome-mac/index.zh.html

2. 那些年,面试中常见的数据结构基础和算法题

作为一个多年的老菜鸟,有感于大部分的公司面试 “面试造航母,工作螺丝钉” 的作风,特整理了这个数据结构和算法面试题系列。对于校招而言,如果没有太多实践/实习经验,大公司往往喜欢考察数据结构和算法,如微软就特别喜欢在校招时手写算法题,而且难度还不小,当年我毕业找工作时也是颇受折磨。

链接:https://juejin.im/post/5bbc1f6af265da0ace214e9d

從 Redux 作者 Dan Abramov 的文章談前端學習路線圖

常常會看到許多有名的開發者被稱之為大神,既然會被稱作是大神一定有其原因,可能是每年都會在 conference 上面演講、在社群耕耘許久且貢獻良多、寫過一本很厲害的書等等,在這些方面他們的確很厲害,但大神只是個稱號,終究還是個人,他們在那些擅長的領域很厲害沒有錯,可是不用把他們想成什麼都會。
链接:aszx87410/blog#37

技术周刊 - 第 16 期

【前端】

1. 多端统一开发框架 - Taro

Taro 是由京东 - 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。
使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信小程序、H5、App 端等)运行的代码。同时 Taro 还提供开箱即用的语法检测和自动补全等功能,有效地提升了开发体验和开发效率。目前 Taro 已经支持一套代码同时生成 H5 和小程序,App端(React Native)端也即将支持,同时诸如快应用等端也将得到支持。更重要的是,这是一个开源框架哦,是不是很想尝试一下呢?

详情:https://aotu.io/notes/2018/06/07/Taro/

2. GitHub 的用法与礼仪

前一阵国内用户滥用 Issue 的事件已逐渐平息,风波过后,留给我们一些思考:我们该如何参与并回馈这类全球开源社区。这篇好文作者与我们一起来聊聊使用 GitHub 的正确使用姿势。

详情:https://juejin.im/post/5b18b61ce51d45069b00ae0f

3. Puppeteer 1.5.0发布

 
Puppeteer 是 Google Chrome 团队官方维护的无界面(Headless)Chrome 工具。利用 Node.js 和 DevTools 协议,提供了封装良好的 API 来控制 headless Chrome 或者 Chromium。通过 Puppeteer 我们可以让浏览器帮我们自动完成很多事情,例如:生成页面的截图或者 PDF; 自动提交表单,UI 测试,键盘输入; 创建自动化测试环境等。

详情:https://pptr.dev/

4. Firefox 浏览器支持 Web Components

image | left

Firefox 浏览器最新的 Nightly 测试版本已经支持 Web Components。这是 Chrome 浏览器5年前开始推广的一种新技术,现在除了 Edge 浏览器,其他主要浏览器都已经支持了。
Web Components 是浏览器原生的组件解决方案。如果你愿意对新技术下赌注,可以考虑它。

详情:https://www.cnet.com/news/mozilla-firefox-joins-chrome-safari-making-it-easier-to-build-sophisticated-websites/

5. CSS 不仅是选择器,你甚至可以用它来破解 Facebook 的匿名用户

CSS Is So Overpowered It Can Deanonymize Facebook Users | left | 400x178

Catalin Cimpanu 分享了一则关于两名安全工程师的精彩故事,这两名安全工程师揭示了攻击者将如何通过混合模式(mix-blend-mode) 来窃取用户的信息。

详情:https://www.bleepingcomputer.com/news/security/css-is-so-overpowered-it-can-deanonymize-facebook-users/

6. 苹果公司宣布 Safari 将是一个更注重隐私的浏览器 

Craig Federighi 在 WWDC 全球开发者大会上宣布,Safari 浏览器的最新版本将更严格的限制广告跟踪器 (ad-trackers) 技术和设备指纹技术 (device fingerprinting),这些技术是营销人员和数据经纪人用来监控用户浏览网页的重要手段。而 Facebook 将是他们这场战役要的第一个目标。

详情:https://www.wired.com/story/apple-safari-privacy-wwdc/

7. G6 图可视化库

G6 是一个图可视化框架。它提供了一套图可视化的基础设置,能帮助开发者搭建属于自己的图,图分析应用或是图编辑器应用。

详情: https://github.com/antvis/g6

8. 聊一聊前端同构

同构是指开发一个可以跑在不同的平台上的程序。例如开发一段 js 代码可以同时被基于 node.js 开发的 web server 和浏览器使用。本文中我们就要聊聊这种场景下,为什么以及怎么样开发一个同构的 web 应用。

详情: https://juejin.im/entry/5b1631085188257d492adc9e?utm_medium=fe&utm_source=weixinqun

9. JSConf EU 2018 有哪些值得关注的点?

历时两天 JSConf EU 2018 结束,讲到了不少有趣的点,包括错误处理、BigInt、deno、**开发者、无障碍性访问、事件循环、ECMAScript 及未来、Node.js 安全、可视化、人工智能与深度学习、增强现实、AI & DL 和 Push 推送等等。

详情: https://www.zhihu.com/question/279637889/answer/408989776

【后端】

1. 基于 C 的教程清单

这是基于 C 的教程清单,内容包括:计算机网络(例如 Socket 编程、编写 TCP / IP协议栈),数据库,游戏开发(例如国际象棋 、数独编程),操作系统(例如 Linux 内核、Shell),编程语言(例如 C 编译器、C 解释器、垃圾收集器)以及一些其他学习资源(实践项目)等。

详情:https://github.com/rby90/Project-Based-Tutorials-in-C

2. 唯品会的 Java 工具

主力于 Java 的唯品会,关于 Java 的一些小家底。包括 Java Standard、Java Core Library(关于文本,集合,并发等基础功能的核心类库) 和 Java Tools( JMAP 的分代打印版、打印 JVM 概况及繁忙线程、线上紧急收集 JVM 数据脚本)。

详情:https://github.com/vipshop/vjtools

3. 从单一架构到分布式交易架构,网易严选的成功实践

 
电商产品如何在保证交易服务安全稳定的同时做到良好的扩展和弹性。InfoQ 采访了网易严选技术经理,ArchSummit 全球架构师技术峰会讲师 马超,从核心数据模型迭代、服务架构演变等方面介绍严选商城在交易环节的分布式技术架构实践。

详情:https://mp.weixin.qq.com/s/syM4ReAWpZ5d4KI87ogpiQ

4. Linux vs. Unix:有什么不同?

Unix 是什么?漫画中提到了像巫师一样留着“灰胡子”,坐在发光的绿色屏幕后面,写着 C 代码和 shell 脚本,由老式的、滴灌的咖啡提供动力。但是,Unix 的历史比上世纪 70 年代那些留着胡子的 C 程序员要丰富得多。虽然详细介绍 Unix 历史和 “Unix 与 Linux” 比较的文章比比皆是,但本文将提供高级背景和列出这些互补世界之间的主要区别。

详情:https://linux.cn/article-9717-1.html

5. Python 数据可视化-00后高考大军

网络上对这次高考的报道很多(毕竟00后小鲜肉嘛),很多都关注了今年的考生数据,并且用炫酷的图表展示。看着是不是有点小嫉妒,为什么图表还可以做得这么漂亮???是不是也想自己动手做一张???其实这些图表都可以用python制作出来的数据可视化的产物,所以当然是可以自己动手制作

详情:https://mp.weixin.qq.com/s/9QshHxDa8xZ3NZNQGsiu8A

6. 微信好友信息分析并可视化以及自动回复微信消息

 
利用 Python 进行微信好友分析,包括:统计好友的性别,统计好友的地域分布,并且可视化在地图上展示,将好友的昵称做成词云,统计好友个性签名中的高频词汇,将所有好友的头像合并成一张大图,微信自动发送与回复消息。

详情:https://github.com/yangxuanxc/wechat_friends

【其他】

1. 2018 开发者生态报告

JetBrains 发布了 2018 开发者生态报告,该报告包含开发人员对各种编程语言以及数据库和团队工具的偏好。Java 被评为最流行的语言,JavaScript 是最常用的语言,而 Go 被认为是最有前途的语言。Go 是最多人想去尝试的语言,之后是 Kotlin 和 Python。此外还有工具、开发环境、操作系统以及编码时爱听的音乐类型调查等等。

详情:https://www.jetbrains.com/research/devecosystem-2018/

2. 据说这份高考卷,只有程序员能得满分

又是一年高考季,一起来做做“程序员们的高考试卷”,压压惊吧~

详情:https://mp.weixin.qq.com/s/OuO108JafkKzu07Bs3q82w

技术周刊 第 22 期

【前端】

1. React 性能优化大挑战:一次理解 Immutable data 跟 shouldComponentUpdate

文章以如何优化 React 应用为主线,牵连出许多跟优化有关的概念,比如 Component 和 PureComponent 的区别,shouldComponentUpdate 的作用,React 的渲染机制,以及为什么要用 Immutable data structures,文章以实际代码为例进行深入讲解,可读性很强,还有一股浓浓的**腔哦!

链接:https://mp.weixin.qq.com/s/oxy3yXipelNKYKi7t2KbeA

2. 巧用 TypeScript

整理了一些比较巧用的 TypeScript 定义类型的技巧,比如:巧用注释、typeof、联合类型、查找类型、泛型、DeepReadonly、Omit,掌握这些技巧后可以大幅提高代码的可读性和整洁性

链接: https://zhuanlan.zhihu.com/p/39620591

3.你可能从未听说过这15个HTML元素方法

虽然现代化的 web 开发更多地依赖各种 MVC 框架,但开发者仍需要熟练掌握 HTML 与 DOM 方面的基础知识。不过,即使是有着多年经验的前端开发者,也会遇到一些不明所以的情况。本文首先将为初学者介绍 HTML 与 DOM 的基本常识,随后为大家介绍 15 个比较冷门的 HTML 元素的方法。

链接:https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247489226&idx=1&sn=5a6bd84ae30777ca5c57c1b0b1903a01

4.GraphQL 在微服务架构中的实践

这篇文章中,首先会简单介绍 GraphQL 是什么,它能够解决的问题;在这之后,我们会重点分析 GraphQL 在微服务架构中的使用以及在实践过程中遇到的棘手问题,在最后作者将给出心中合理的 GraphQL 微服务架构的设计,希望能为同样在微服务架构中使用 GraphQL 的工程师提供一定的帮助,至于给出的建议是否能够满足读者在特定业务场景下的需求就需要读者自行判断了。

链接:https://draveness.me/graphql-microservice#

5、图解 React

文本作者使用朴实的语言和插图来解释 React 家族中的各种术语,并深入探索究竟是什么使得 React 如此特别,本文不需要任何代码知识便可阅读;

链接:https://juejin.im/post/5b481f6b51882519ad6175c2

6、将你的 Virtual dom 渲染成 Canvas

一个基于 Vue 的 virtual dom 插件库,按照 Vue render 函数的写法,直接将 Vue 生成的 Vnode 渲染到 canvas 中。支持常规的滚动操作和一些基础的元素事件绑定;

详情:https://zhuanlan.zhihu.com/p/39886896

7、ESLint 组件库 NPM 账户被盗,并被注入恶意代码

7月12日,ESLint 的两个组件库被注入恶意代码,会窃取用户的 npm token,导致 npm 重置了所有 token。

详情:https://juejin.im/entry/5b48000de51d45199154a731

8、WebAssembly的未来:展望新的功能和提案

WebAssembly是一种二进制指令格式,在所有主流浏览器中都能以高性能运行。 它仍然很新,而且正在开发中。 本文将介绍WebAssembly的路线图以及它在最近可能开发的新功能。

详情:https://blog.scottlogic.com/2018/07/20/wasm-future.html

【后端】

1. 什么是缓存击穿

缓存击穿、缓存并发和缓存雪崩是常见的由于并发量大而导致的缓存问题。缓存击穿通常是由恶意攻击或者无意造成的;缓存并发是由设计不足造成的;缓存雪崩是由缓存同时失效造成的,三种问题都比较典型,也是难以防范和解决的。本文讲解其产生原因和解决方案。

链接:http://t.cn/Rg1JNGB

2. CAP 定理的含义

分布式系统正变得越来越重要,大型网站几乎都是分布式的。分布式系统的最大难点,就是各个节点的状态如何同步。CAP 定理是这方面的基本定理,也是理解分布式系统的起点。本文介绍该定理;

链接:http://www.ruanyifeng.com/blog/2018/07/cap.html

3.教你用 C++ 搭建一条迷你区块链!

程序员的天赋技能就是通过代码实践自己的想法,完成一个作品会有相当的成就感,所以今天我们以 C++14 的代码为例子,和你分享设计并实现一个迷你区块链例子。

链接:https://mp.weixin.qq.com/s/k_mYbnchN2UF0kZ_2JD4Wg

4.用不到 20 行的 Python 代码构建一个对象检测模型

当一张图片显示在眼前时,我们的大脑会马上会识别出图片里面所含的对象。另一方面,我们需要花费大量的时间和训练数据才能让机器识别这些对象。不过鉴于硬件和深度学习方面最近的进步,这个计算机视觉领域变得容易和直观了许多。

链接:https://mp.weixin.qq.com/s/UsAGI9cIlrQEwk_rbVKAoQ

【其他】

1、InterviewMap/InterviewMap:打造最好的面试图谱

打造最好的面试图谱。目前内容包含了 JS、网络、浏览器相关、性能优化、安全、框架、Git、数据结构、算法等,无论是基础还是进阶,亦或是源码解读,都能在本图谱中得到满意的答案;

详情:https://yuchengkai.cn/docs/zh/

2. 再见,Google 地图

Google 大幅提高了 Google 地图 API 的收费标准,将免费使用的次数限制到了原来的大约三十分之一,而同时搜索巨人留给用户的时间非常短。为了让地图服务能带来更多收入,Google 严重破坏了客户的信任。一家使用 Google Maps 的创业公司发表博文对 Google 地图说再见,并宣布将远离其它 Google 服务。作者称,Google 突然改变政策是专门针对创业公司,这连带影响到了他们对于 Google 作为一家供应商的信任度。未来他们将与 Google Cloud 保持距离,并避免与任何 Google 服务进行深度集成,比如免费的网络分析服务 Google Analytics;

链接:https://www.solidot.org/story?sid=57271

技术周刊 - 第 43 期

【前端】

1、高级 Web 安全主题(英文)

本文收集各种网页入侵的技术,已经收集了十多种。

https://blog.georgovassilis.com/2016/04/16/advanced-web-security-topics/

2、Vue.js 框架的作者尤雨溪专访

介绍了 Vue.js 的发展历程,以及背后的想法。

https://blog.hackages.io/https-blog-hackages-io-evanyoubhack2017-cc5559806157

3、你(可能)不知道的 web API

作为前端er,我们的工作与 web 是分不开的,随着 HTML5 的日益壮大,浏览器自带的 web API 也随着增多。本篇文章主要选取了几个有趣且有用的 web API 进行介绍,分别介绍其用法、用处以及浏览器支持度。

https://juejin.im/post/5c1606d9f265da613d7bf7a4

4、前端模块化详解(完整版)

本文内容主要有理解模块化,为什么要模块化,模块化的优缺点以及模块化规范,并且介绍下开发中最流行的CommonJS、AMD、 ES6、CMD 规范。

https://juejin.im/post/5c17ad756fb9a049ff4e0a62

5、2019 年 React 学习路线图

作者通过脑图的形式将整个 React 技术栈相关的知识点进行串联起来,对于新手可以通过它快速了解和学习 React 技术,对于老手可以查漏补缺。

https://mp.weixin.qq.com/s/PWSeeqDwu8QOcamlo_FJrA

6、初探 Vue3.0 中的一大亮点——Proxy

不久前,也就是11月14日-16日于多伦多举办的 VueConf TO 2018 大会上,尤雨溪发表了名为 Vue3.0 Updates 的主题演讲,对 Vue3.0 的更新计划、方向进行了详细阐述(感兴趣的小伙伴可以看看完整的 PPT),表示已经放弃使用了 Object.defineProperty,而选择了使用更快的原生 Proxy。做为一个 “前端工程师” ,有必要安利一波 Proxy。

https://mp.weixin.qq.com/s/X_Rq-K0QfY_Rbx8uidzYww

7、解读2018:我们处在一个什么样的技术浪潮当中?

最近经济寒冬的说法越来越多,身边的互联网企业裁员的也有不少,越是寒冬,我们越需要了解趋势,找准前进的方向。过去几年,互联网各种“风口”此起彼伏,到底哪些才是真正的趋势?这篇文章里我将试图分析目前互联网技术的发展,找出它们背后的原因和逻辑。

链接:https://mp.weixin.qq.com/s/ffhq4tG0UA0Is2IJLEJ2aQ

8、这些鲜为人知的JavaScript特性,你知道多少?

JavaScript 通常被认为是最容易入门却最难以掌握的编程语言。我完全赞同这种说法。这是因为 JavaScript 是一门非常古老却又非常灵活的语言。它有着各种各样神秘的语法和古老的特性。我是一个 JavaScript 老用户,直到现在,我仍然会时不时地发现一些我从来都不知道的隐藏语法或技巧。

链接:https://mp.weixin.qq.com/s/DkSfRCOcn1ZkABzgyyAonA

【后端】

1、《统计学习方法》的代码实现

《统计学习方法》可以说是机器学习的入门宝典,许多机器学习培训班、互联网企业的面试、笔试题目,很多都参考这本书。本站根据网上资料用 Python 复现了课程内容,并提供本书的代码实现、课件下载。

https://github.com/fengdu78/lihang-code

2、秒杀系统设计与实现-互联网工程师进阶与分析

高并发大流量如何进行秒杀架构,作者对这部分知识做了一个系统的整理,写了一套系统。

1

https://github.com/qiurunze123/miaosha

【其他】

1、一个人如何开发游戏《星露谷》。

2

畅销游戏《星露谷》(Stardew Valley)作者只有一个人埃里克·巴罗恩,从编码到美术音乐都靠自己。大学毕业后,他没找工作,而是待在公寓写了四年游戏。唯一收入是晚上打工,在电影院门口收电影票。

上线前,唯一测试就是女朋友玩了几天。如果卖不出去(绝大多数游戏的结局),四年就浪费了,幸好成功了。不过,这个游戏借鉴了任天堂的《牧场物语》,有人认为他抄袭了。

https://www.gq.com/story/stardew-valley-eric-barone-profile

2、坚定你选择的前端技术方向

行业的发展必然带来职业的细分,在前端领域也一样,目前行业前端有下面这几个方向:界面展现用户体验和可访问性方向、偏后的js/nodejs开发方向、audio/video音视频富媒体方向、SVG/canvas/webGL动效创意表现与数据可视化方向、工具建设文档管理内部站建设的前端运维方向以及会议预定团建组织对外品牌宣传的前端运营方向。

https://juejin.im/post/5c1a48a86fb9a04a03792b69

前端周刊 - 第 4 期

01. Angular, React or Vue?

如何为下一个 Web 应用程序选择合适的JavaScript 框架?Progress 的新白皮书提供了对 Angular、React 和 Vue 当前状态的分析和全方面的比较。请戳详情下载白皮书~

详情:https://www.telerik.com/campaigns/kendo-ui/wp-choosing-js-framework

02. Rough.js:创建手绘外观的图形

利用 Rough.js 可以创建出粗略的手绘外观图形,包括直条、曲线、弧线、多边形、圆形和椭圆等基本图形和 SVG paths。

详情:https://github.com/pshihn/rough

03. TypeScript 2.8 RC 发布

该版本最大的亮点是新增了条件类型,条件类型是基于 JavaScript 的条件语法,采用 A extends B ? C : D 形式。

详情:https://blogs.msdn.microsoft.com/typescript/2018/03/15/announcing-typescript-2-8-rc/

04. MobX 4 发布:简单的状态管理库

MobX 4 新增了很多功能:无装饰器语法的装饰器,动态扩展的可观察对象,await when 和 flow 进一步简化异步过程,onBecome(Un)Observed 自动获取数据源,生产版本更小更快。

详情:https://medium.com/@mweststrate/mobx-4-better-simpler-faster-smaller-c1fbc08008da

05. Pell1.0:一个仅有 1.38kb 的 web 文本编辑器

Pell 是一款简单的 WYSIWYG web 文本编辑器,由 ES6 编写,无任何依赖,最小压缩版仅1.38kb。

详情:https://github.com/jaredreich/pell/#readme

06. 2018 React 学习指南

这是一篇 2015 年发布的经典 React 教程,从最基础部分开始讲解,最近更新了包括 React 16.3 版本的部分。

详情:https://tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-building-apps-with-react/

07. UnCSS:删除未使用的样式

UnCSS 是一个从样式表中删除未使用 CSS 的工具。它可以跨多个文件,并支持JavaScript 注入的 CSS。

原文: https://github.com/uncss/uncss

08. TOAST UI Chart:真正的跨浏览器图表

TOAST UI Chart 作为数据可视化图表工具,不仅跨浏览器支持(甚至支持IE8),而且高颜值~

详情:https://github.com/nhnent/tui.chart

9. npm 5.8.0(-next.0) 发布

该版本有大量的调整和改进。但 next 版本仅供测试和开发使用,而不是用于生产。

详情:http://blog.npmjs.org/post/171813275740/v580-next0

10. Emma:用于查找和安装 npm 软件包的 CLI 工具

Emma 是一个命令行工具,可帮助您更快速地搜索和安装 npm 软件包。采用 Algolia 的搜索功能,可提供您所需的全部信息,以确定哪个软件包是正确的。

详情:https://github.com/maticzav/emma-cli

11. Houdini 和 CSS Paint API 解析

Houdini 是 W3C 工作组为开发人员提供CSS 扩展功能的一套 CSS API,CSS Paint API (使用 CSS 属性来绘制图像)就是其中之一。文章对 Houdini 和 CSS Paint API 进行了详细解析。

详情:https://www.w3cplus.com/css/say-hello-to-houdini-and-the-css-paint-api.html

12. 参与 2018 年前端工具调查

为收集前端开发人员的意见,并了解整个 Web 开发行业的工具习惯,请戳详情参与调查吧~

这是 2016 年的调查结果:https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results

详情:https://medium.freecodecamp.org/launching-the-front-end-tooling-survey-2018-927bf975fdf0

前端周刊 - 第 7 期

01. ES2016, 2017, 2018 中的新特性

文章介绍了 18 个 ECMAScript 2016,2017 和 2018 中新增加的特性,这些特性已被加入到 TC39 提案中。包括Array.prototype.includes、Object.values()、Object.entries()、String padding、指数运算符、对象的rest属性和Promise.prototype.finally() 等。

详情:https://medium.freecodecamp.org/here-are-examples-of-everything-new-in-ecmascript-2016-2017-and-2018-d52fa3b5a70e

02. Webpack 4.5.0 发布

Webpack 于 4 月 4 号发布了 4.5.0 版本,除了性能改进、bug 修复外,首次添加了贡献者的 yarn setup 安装脚本。

详情:https://github.com/webpack/webpack/releases

03. 纯 CSS 实现一个太阳系

Jamie Coulter 用纯 CSS 创建了一个非常棒的 demo,它可以让你探索太阳系的行星和卫星,包括各个星球的图片和简要介绍,并带有一些炫酷的效果。

详情:https://codepen.io/jcoulterdesign/pen/ZxXbeP

04. 网页设计中的 10 种排版技巧

网页设计中的 10 种排版技巧:保持最少的字体数量,使用标准字体,限制文本长度,使用在各种屏幕分辨率下可用性良好的字体,使用字母区分度高的字体,避免全英文大写文本,善用空白区域的技巧,增加色彩对比,减少单独红/绿色文本的使用,避免使用闪烁的文字。

详情:https://uxplanet.org/10-tips-on-typography-in-web-design-13a378f4aa0d

05. iOS 11.3 中的 PWA 应用

Apple 在 iOS 11.3 中悄悄增加了对“渐进式 Web 应用”(PWA) 这一系列新技术的基本支持,这意味着现在可以在没有 App Store 批准的情况下在 iOS 上安装应用程序,不过会有一些限制。文章概括了最新发布的 iOS 11.3 对 PWA 的支持情况,以及PWA 应用开发者需要注意的问题。

详情:https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7

06. 第四届 CSS 大会

**第四届 CSS 开发者大会已于 2018 年 03 月 31 日在厦门成功举办。前端工程师的本质就是做出用户体验更好的产品,不仅仅要考虑的是在交互上的体验,还需要考虑性能的优化,如何为用户节约带宽,如何让用户打开的速度更快。

详情:https://zhuanlan.zhihu.com/p/35278699

07. Node v9.11.0 (Current) 发布

本次发布做了一些常规小调整和功能增强。这一次,通过将 ICU 升级到 61.1 改进了对 Unicode 的支持,fs 模块增加了为 ReadStream 和 WriteStream 发送 ready 事件的功能。(从技术上讲,9.11.1已经不在了,但它是一个快速补丁版本,仅用于修复 x64 的非功能 MSI 安装程序。)

详情:https://nodejs.org/en/blog/release/v9.11.0/

08. React 生命周期的正确打开姿势

这张 React 生命周期图来自 React 开发团队核心成员 Dan。Twitter 上的很多人都发现可以从中学到一些有用的东西。React 严格定义了组件的生命周期会经历如下三个过程:挂载过程(Mount),更新过程(Update),卸载过程(Unmount)。

详情:https://twitter.com/dan_abramov

09. Bulma:基于 Flexbox 的 CSS 框架

Bulma 是基于 Flexbox 的开源 CSS 框架,支持浏览器 Chrome、Edge、Firefox、Opera 和 Safari 的最新版本,IE10+ 仅部分支持。Bulma 可支持图标库 Font Awesome 5,此外 Bulma 还有许多衍生项目,例如用于 React 的 Bloomer 和用于 Vue 的Buefy。

详情:https://bulma.io/

10. MVVM 前端数据流框架精讲

本次分享是带大家了解什么是 MVVM,MVVM 的原理,以及近几年产生了哪些演变。同时借 MVVM 这个话题拓展到对各类前端数据流方案的思考,形成对前端数据流整体认知,帮助大家在团队中更好的做技术选型。

详情:https://zhuanlan.zhihu.com/p/35211052

11. Pose:用于 HTML,SVG 和 React 的声明性动画库

当 CSS 的简洁遇上 Popmotion 灵活的强大功能,会碰撞出怎样的火花?本文介绍了 SVG,React 和 CSS 的综合应用,甚至都不需要配置,你就可以非常轻松地制作出声明式和触发式的动画。

详情:https://popmotion.io/pose/

12. 网络错误日志(NEL)

2017 年 12 月 8 日W3C 的 Web 性能工作组(Web Performance Working Group)更新了网络错误日志(Network Error Logging)的工作草案。该文档定义了一个机制,允许 Web 站点声明一个网络错误汇报策略(reporting policy),浏览器等用户代理可以利用这一机制,汇报影响资源正确加载的网络错误。该文档还定义了一个错误报告的标准格式及其在浏览器和 Web 服务器之间的传输机制。

详情:https://dcreager.net/nel/intro/

技术周刊 第 36 期

【前端】

1. 精读《谈谈 Web Workers》

本周精读的文章是 speedy-introduction-to-web-workers,是一篇 Web Workers 快速入门的文章,借精读这篇文章的机会,谈谈对 Web Workers 的理解与运用。

https://zhuanlan.zhihu.com/p/47326066

2. 一张图看懂JavaScript中数组的迭代方法:forEach、map、filter、reduce、every、some

在《JavaScript高级程序设计》中,分门别类介绍了非常多数组方法,其中迭代方法里面有6种,这6种方法在实际项目有着非常广泛的作用。其中本人最爱用forEach和map,好用又高效,不用什么都是for循环大法。但是初学的时候往往觉得头大,这些方法都很像,到底有什么区别?趁着今天有空,我把对着6个方法的认知,用最浅显的图画出来,希望看到的同学觉得有用。

https://juejin.im/post/5835808067f3560065ed4ab2

3. Atag - Web Components 最佳实践

上一次社区中谈论起 Web Components 已经可以追溯到三四年前了,彼时 Web Components 仍处于不稳定的草案阶段,Polymer 的出世使大家似乎看到了新一代的前端技术,但直到今天,在今年五月 Google I/O 发布 Polymer 3 之后, Web Components 的规模化应用才看似成为了可能,本文来自淘宝小程序团队对使用 Web Components 编写的一套组件库 Atag 的一些经验总结

链接: http://taobaofed.org/blog/2018/10/31/a-tag/

4. fastest-validator Nodejs 中最快的 JS 验证库

该库内置了 JS 中的数据类型常用的验证方法,开发者在使用的前先定义一套待验证数据的 schema,然后进行 compile 为内置的 schema 类型,在验证的地方直接 check 就能很快的返回验证结果,速度可以到达每秒 500 万验证

链接: https://github.com/icebob/fastest-validator

5. Sol LeWitt

Sol LeWitt 是一个美国画家,但是他根本不作画,而是用语言描述自己的画,让别人画出来。现在,有人做了一个 JS 库,专门用来根据他的描述,生成画作。

链接:https://github.com/wholepixel/solving-sol

6. 利用 Github托管单页 React应用

如果您已经构建了React应用程序,并且在本地计算机上看起来很棒。现在让我们把它放在 Github 上吧。

链接:https://itnext.io/so-you-want-to-host-your-single-age-react-app-on-github-pages-a826ab01e48

7. 如何用浏览器调试器代替 console.log()

对于初级开发人员来说,代码调试是一个不小的挑战。本文通过案例实战介绍使用浏览器自带的调试工具替代 console.log() 打印来定位 bug 的方法。

链接:http://www.10tiao.com/html/788/201810/2247489786/1.html

8. 理解 React Hooks

本周,Sophie Alpert 和 Dan Abramov 在 React Conf 上提出了“Hooks”提案,Dan 强烈建议我们观看此次主题演讲,看看此次提案究竟为我们解决了什么问题。本文分享了 Dan 关于 Hook 的一些想法。

链接:https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889

【后端】

1. A-to-Z-Resources-for-Students

当我在大学时,由于缺乏意识,我错过了很多机会,如黑客马拉松,实习,比赛和许多全球性活动。我不希望新兴开发者像我一样受苦。因此,我和来自各地的许多其他开发人员为学生收集了这一系列资源。如果你大学在读,大学毕业,或刚刚开始作为开发人员,这些或许对你有帮助!

链接:https://github.com/dipakkr/A-to-Z-Resources-for-Students

2. 蚂蚁金服 Service Mesh 实践探索

本文整理自蚂蚁金服高级技术专家在 QCon 上海 2018 上的演讲。演讲者是来自蚂蚁金服中间件团队的敖小剑,目前是蚂蚁金服 Service Mesh 项目的 PD。同时也是 Servicemesher **技术社区的创始人,是 Service Mesh 技术在国内最早的布道师。

链接:https://mp.weixin.qq.com/s/543MsQkrtTdIfnfGd7LciA

3. Algojammer-用于编写算法的代码编辑器

maopao

Algojammer是一个实验性的概念验证代码编辑器,用于在Python中编写算法。它主要是为了帮助解决Google Code Jam,Topcoder和HackerRank等竞争中出现的算法问题。

链接:https://github.com/ChrisKnott/Algojammer

4. Flutter瘦身大作战

闲鱼技术团队于2018年上半年率先引入了Flutter技术实现客户端开发,到目前为止成功改造并上线了复杂的商品详情和发布业务。随着改造业务的增多,安装包体积急剧上增。安装包体积决定了用户等待下载的时间和可能会耗费的流量,如何控制安装包体积,减小Flutter产物的大小成为当务之急。本文从闲鱼客户端项目实践角度给出了一些通用的包大小检测以及优化方案,希望为对Flutter感兴趣的技术开发人员提供参考

链接: https://mp.weixin.qq.com/s/IIoaY2uw6Bqzc9XWI91YFw

【其他】

1. 五岁男孩的简历引发教育争论

fiveold

“我要青出于蓝胜于蓝,”一个5岁男孩为申请上海一所私立小学,写了长达15页的简历,其中有好的表现评语(比如“敢拼”)、旅行去过的地方(东京和巴厘岛)和今年已读过的书(408本)。此事在互联网上引发关注与辩论:**的应试教育体系培养出来的孩子是否都是没有灵魂的奔命者?

链接:https://twitter.com/nytchinese/status/1058184894432501760

2. 把14亿**人都拉到一个微信群在技术上能实现吗?

最近,知乎上有一个非常热门的问题:“把 14 亿**人民都拉到一个微信群里在技术上能实现吗?” , 目前,微信群组成员人数上限为 500 人,把近 14 亿**人都拉到一个微信群,从技术的角度考虑现实吗?需要多少台服务器?

链接: https://mp.weixin.qq.com/s/sjQ0wMIrZEJE3qzVTSUIYw

技术周刊 - 第 13 期

【前端】

1、Firefox 60 支持同域才能发送 Cookie

本月初,Firefox 60 浏览器发布。它有一个很大的亮点,就是它解决了 CSRF 攻击。

所谓 CSRF 攻击,就是使用真实的 Cookie 进行恶意行为。比如,用户访问 B 网站,页面上有一张来自 A 图站的图片,这时浏览器就会向 A 网站发出请求,并带上 A 网站的 Cookie。如果这张图片的 URL 被精心伪造过(比如是划款请求),麻烦就来了。因为 A 网站的服务器会以为,这个请求是真实的请求,因为 Cookie是对的,从而授权进行各种操作。

Firefox 60 按照最新的标准,为 Cookie 新增了一个 SameSite 属性,明确规定访问 B 网站时向 A 网站发出的请求,一律不许带上 Cookie,这就从根本上防止了 CSRF 攻击。

另外,Firefox 60 还默认打开了 ES6 模块支持,至此所有浏览器都默认支持 ES6 模块。

链接:https://blog.mozilla.org/security/2018/04/24/same-site-cookies-in-firefox-60/

2、TypeScript 2.9 RC 发布 

此次发布亮点包括 import() 类型以及对 keyof 和映射对象类型(mapped object types)中的符号(symbols)和数字文字(numeric literals)的支持。

新增特性:支持使用 keyof 和映射类型命名属性的编号和符号; 支持将泛型传递给 JSX 元素; 支持将泛型传递给标记的模板调用; 允许在任何位置导入(...)类型; 默认情况下输出 --pretty 错误; 支持 import.meta; 新增 --resolveJsonModule; 声明源 map 和通过它们的代码导航。

链接:https://blogs.msdn.microsoft.com/typescript/2018/05/16/announcing-typescript-2-9-rc/

3、2018 年前端工具报告

由 Ashley Watson-Nolan 创建的 2018 年前端工具调查结果已经发布,报告对当前 CSS 和 JS 工具的使用情况提供了一些有趣的统计。

链接:https://ashleynolan.co.uk/blog/frontend-tooling-survey-2018-results

4、node 8.11.2 LTS 发布

特性:
同步 http2 和 n-api,和 当前版本(Node 10 )一致
更新了 node-inspect 和 nghttp2 依赖

链接: https://nodejs.org/en/blog/release/v8.11.2/

5、精读《重新思考 Redux》

dva 之后,有许多基于 redux 的状态管理框架,但大部分都很局限,甚至是倒退。但直到看到了 rematch,总算觉得 redux 社区又进了一步。

这篇文章的宝贵之处在于,抛开 Mobx、RXjs 概念,仅针对 redux 做深入的重新思考,对大部分还在使用 redux 的工程场景非常有帮助。

https://zhuanlan.zhihu.com/p/36810237

6、React 应用架构设计

现在已经有很多脚手架工具,如create-react-app,支持一键创建一个React应用项目结构,很方便,但是享受方便的同时,也失去了对项目架构及技术栈完整学习的机会,而且通常脚手架创建的应用技术架构并不能完全满足我们的业务需求,需要我们自己修改,完善,所以如果希望对项目架构有更深掌控,最好还是从0到1理解一个项目。

链接: https://mp.weixin.qq.com/s/cI26iodw302vyRzl3XGyGQ

7、Angular Ivy抢鲜看

“Ivy” 是 Angular v6 的新一代渲染器。从 v6.0.0-beta.1 开始,Ivy 已经作为体验 API 发布。作为下一代的 Angular 的视图引擎,重点在于彻底缩减代码尺寸并增强灵活性。在这个示例中,你可以看到,对于一个 Hello, world 应用,代码的尺寸可以压缩到 3K 左右。Ivy还具有打包更快速,更具可阅读性等特点。

链接:https://www.telerik.com/blogs/first-look-angular-ivy

8、如何阅读大型前端开源项目的源码

这是来自蚂蚁金服数据体验技术团队的干货分享。这篇文章主要讲的是阅读大型的前端开源项目比如 React、Vue、Webpack、Babel 的源码时的一些技巧,目的是让大家在遇到需要阅读源码才能解决的问题时,可以更快的定位到自己想看的代码。希望大家可以通过这篇博客,了解到阅读大型前端项目源码时的切入点。在之后遇到好奇的问题时,可以自己去探索。

链接:https://juejin.im/post/5afe3735518825426539afce

9、可用但最不常见的 HTML5 标签

我可以确定你们都已经在使用 HTML5 做网页了,并且会使用一些常见的标签,如 <header><section><article> <footer> 等等,除此之外,还有一些不常用的标签是有助于正确使用 HTML5 的语义化开发,如<details><dialog><mark><time><datetime><progress>等,来了解一下。

链接:https://codeburst.io/the-most-uncommon-html5-tags-52273fabc0a7

【后端】

1、消息批量推送工具WePush

WePush 是由 Java 编写的专注批量推送的小而美的工具,目前支持的类型:模板消息-公众号、模板消息-小程序、微信客服消息、阿里云短信、阿里大于模板短信 、腾讯云短信。

详情: https://github.com/rememberber/WePush

2、构建你的技术体系

如何构建全面的技术体系?内容包括:3D Renderer 、Blockchain / Cryptocurrency 、Database 、Docker 、Front-end Framework / Library 、Game 、Git 、Network Stack 、Neural Network 、Operating System 、Physics Engine 、Programming Language 、Shell、Web Search Engine 、Web Server 等等。

详情: https://github.com/danistefanovic/build-your-own-x

3、10 个常用的软件架构模式

你是否曾经思考过如何设计大型的企业级系统?在决定启动软件开发之前,首要的是选择恰当的架构来指引系统的功能及质量属性设计。因此在将软件架构应用于设计之前,必需要了解常用的架构模式。文章介绍了多种架构模式(分层模式、客户端/服务器模式、主/从模式、管道/过滤器模式、代理模式、对等模式、事件总线模式、MVC模式、黑板模式、解析器模式),及各种架构模式的使用场景。

详情: http://blog.jobbole.com/113953/

4、假装很忙的三个命令行工具

有时候你很忙,而有时候你只是需要看起来很忙,就像电影中的黑客一样。有一些开源工具就是干这个的,让我们在 Linux 和终端里忙起来!

详情:https://linux.cn/article-9591-1.html

5、看完这篇 Linux 基本的操作就会了

由一个刚学习使用 Linux 的小伙伴整理而成,主要总结了 Linux 的基础操作以及一些简单的概念,常用的命令,Shell 和 Vi 编辑器的使用等。对于开发者来说,能使用 Linux 做一些基本的操作是必要的!

详情: https://zhuanlan.zhihu.com/p/36801617

6、Python 最佳实践指南 2018

高级 Python 开发者必知必会的知识,涉及安装、配置、部署以及 Python 日常使用的最佳实践。这份指南是由 Kenneth Reitz 以开源的方式构建和维护的, PythonCaff.com 组织和翻译。

详情:https://pythoncaff.com/docs/python-guide/2018

7、Django 2.0 官方文档中文版

Django 最初被设计用于具有快速开发需求的新闻类站点,目的是要实现简单快捷的网站开发,现在已经成为最流行的 Python Web 开发框架。官方文档详细而且完整,是学习和使用必查资料。对于没有尝试过的小伙伴来说,现在中文也翻译好了,你还有什么理由不去快速了解一下呢?

详情:https://docs.djangoproject.com/zh-hans/2.0/

【其他】

1、微信开源PhoenixGo:业界领先的人工智能围棋

PhoenixGo 以 BensonDarr(昵称“金毛”)的名义在腾讯野狐围棋平台上和全球顶尖职业棋手、围棋爱好者及各路围棋AI对弈,在 4 月底取得了 200 多连胜,并在福州 2018 世界人工智能围棋大赛上夺冠。微信已将 PhoenixGo 对弈源码和训练好的模型开源。

详情: https://mp.weixin.qq.com/s/mkcNQ14cYaV2VWGywbHCsg

2、提高效率的几个技巧和工具分享

来自一位有 12 年开发经验的老司机的分享,偏向于介绍非技术性的工作流方面的经验。比如一些键盘的快捷按键设置(Mac 为主);笔记记录软件;项目管理或者 GTD;email 工作流;番茄钟工作法等。

详情:https://medium.com/@fabrik42/my-productivity-boosters-a-random-collection-of-tricks-and-tools-336c7a492d3d

前端周刊 - 第 10 期

1. Node.js 10 正式发布

在过去的一周,Node.js 10.0.0 正式发布,带来大量改进和修复。这是自 Node.js Foundation 开展以来的第七个主要版本,并将在 2018 年 10 月成为下一个 LTS 分支。新版本自带定制化的 Node-ChakraCore 引擎,其功能亮点包括:全面支持 N-API,支持 TTD 的生成器和异步函数,支持 Inspector 协议等等。

详情:https://nodejs.org/en/blog/release/v10.0.0/

2. npm 6 的更新

Node.js 10.0.0 附带 npm 5.7.x, 但是,预计在 Node.js 10.x 生命周期的早期会更新为 npm 6。第 6 版将侧重于性能、稳定性和安全性,与先前版本的 npm 相比,性能提高 17 倍。以后,如果使用具有已知安全问题的代码,npm Registry 的用户会收到警告通知。npm 将自动检查针对 NSP 数据库的安装请求,并在代码包含漏洞时发出警告通知。

详情:https://blog.npmjs.org/post/173260195980/announcing-npm6

3. Gooact:用 160 行代码实现一个“React”

本教程分为四部分,教你如何用 160 行代码从头构建一个类似 React 的库,包括实现组件 API 和虚拟 DOM。学习本教程需要具备基本的 React 知识。

详情:https://medium.com/@sweetpalma/gooact-react-in-160-lines-of-javascript-44e0742ad60f

4. Tone.js:创建交互式音乐

Tone.js 是在浏览器中创建交互式音乐的框架。它提供高级调度功能、合成器效果, 以及在 Web 音频 API 之上构建的直观的音乐抽象。

详情:https://tonejs.github.io

5. 马里奥卡丁车:纯CSS打造的小游戏

Stephen Cook 解释了他如何使用纯 CSS 创建交互式马里奥卡丁车游戏。这个项目中,作者没有使用一行 JS 代码和一张图片,100% 纯 CSS 打造,其中 HTML 代码也仅有 13 行。

详情:https://codeburst.io/mario-kart-css-7572bd2ce608

6. 用 video 替代 GIF 的方案

GIF 动画可能会由于非常庞大造成页面卡顿、性能下降等问题, 在本指南中,我们将看到如何通过用大多数浏览器中可用的 MPEG-4 和 WebM 视频源代替它们来遏制这种膨胀。本指南使用 ffmpeg 工具,你可能需要先安装它。

详情:https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/replace-animated-gifs-with-video/

7. TUI Calendar:全能的日历控件

TUI Calendar 是高度可定制的全能 JavaScript 日程安排日历,支持多种视图类型(每日,每周,每月等),支持任务和 milestone 的高效管理,支持通过鼠标拖拽来调整日程安排,支持按主题自定义用户界面,支持 Chrome、Safari 、Firefox、Edge 和 IE9+。

详情:https://github.com/nhnent/tui.calendar

8. 使用数组进行函数式编程

借鉴函数式编程中的技巧,文章讲述了如何使用 map,filter 和 reduce 操作数组对象。由于这些方法不会改变调用数组本身,所以我们可以有效地使用它们而不用担心副作用。

详情:https://www.telerik.com/blogs/functional-programming-with-javascript-object-arrays

9. Day.js:Moment.js 的轻量化方案

Day.js 是一个轻量级( 2kB )的 JavaScript 时间日期处理库,和 Moment.js 的 API 设计保持完全一样。如果你曾经用过 Moment.js,那么你已经知道如何使用 Day.js。Day.js 并没有改变或覆盖 Javascript 原生的 Date.prototype,而是创造了一个全新的包含 Javascript Date 对象 Dayjs 的对象。Dayjs 对象是不可变的,所有的 API 操作都将返回一个新的 Dayjs 对象。

详情:https://github.com/xx45/dayjs

10. 原生般的页面转场动画

为了帮助用户快速收集信息,获得更好的浏览体验,目前前端开发中出现了许多原生般的技术实例。本篇文章讨论了如何使用 Vue 和 Nuxt 构建一个原生般的网页,整个页面从一个布局转换到另一个布局展现出漂亮的流畅平滑动画。

详情:https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web/

11. TypeORM: 用于 TS 和 JS 的ORM

TypeORM 是一种 ORM(Object Relational Mapping),可以在 NodeJS、Browser、Cordova、PhoneGap、Ionic、React Native 和 Electron 平台上运行,并且可以与 TypeScript 和 JavaScript(ES5,ES6,ES7)一起使用。其目标是始终支持最新的 JavaScript 功能以及提供附加功能,以帮助您开发任何使用数据库的应用程序,不论是只有少数表格的小型应用程序,还是具有多个数据库的大型企业级应用程序。

详情:http://typeorm.io/

12. 手写 WebAssembly

WebAssembly(wasm) 是一个可移植、体积小、加载快并且兼容 Web 的全新格式,其目标是充分发挥硬件能力以达到原生执行效率。WebAssembly 不仅可以运行在浏览器上,也可以运行在非 web 环境下。本篇文章探索了如何使用 WebAssembly 来编写经典的康威生命游戏。

详情:http://blog.scottlogic.com/2018/04/26/webassembly-by-hand.html

前端周刊 - 第 9 期

1. Node.js 10 将带来什么?

Node.js 10 的第一个版本将于本周二(4 月 24 日)发布,并将在 10 月份推出 LTS 版本,将带来哪些更新? N-API,持续 HTTP/2 支持,ECMAScript Modules(ESM),Async Hooks 等等。

详情:https://nodesource.com/blog/what-you-can-expect-from-node-js-10

2. webpack 4.6.0 发布

webpack 4.6.0 发布了对 Prefetch/Preload 的支持。Preload 可以更早地发现资源以避免瀑布似的获取,不会花费额外的带宽。Prefetch 使用浏览器的空闲时间来获取资源,可能需要额外的带宽。

详情:https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c

3. 200 行 JavaScript 人脸识别库

picojs 是仅 200 行 JavaScript 代码的人脸识别库,最小只有 2KB。它可以实时检测出图像中的脸部,所有处理都在客户端完成。

详情:https://github.com/tehnokv/picojs

4.CSS Grid 布局的最佳实践

什么是 CSS Grid 布局的最佳实践?除了采用规范中的布局方式,还需考虑 Grid 与其他布局方式(例如 Flexbox)的结合,构建方式,以及团队的工作模式等。

详情:https://www.smashingmagazine.com/2018/04/best-practices-grid-layout/

5. Yarn 和 npm 大比拼

npm 是 Node.js 的默认包管理器,Yarn 是 Facebook 发布的包管理器。这篇文章深入介绍了这两者软件包管理器提供的内容,它们之间的区别以及它们如何演变。

详情:https://blog.risingstack.com/yarn-vs-npm-node-js-package-managers/

6. 开发大型 JavaScript 应用

这是根据 JSConf Australia 上发表的演讲整理的文章,分享了作者在开发大型 JavaScript 应用后的一些心得。文中给出了整个演讲的视频链接。

详情:https://medium.com/@cramforce/designing-very-large-javascript-applications-6e013a3291a3

7. Houdini:CSS杀手级别的项目

Houdini 是一个伟大的项目,它本着可扩展 Web 宣言(Extensible Web Manifesto)的精神,让开发者直接可以访问浏览器的 CSS 引擎,这使得开发者能够自定义自己的 CSS 功能,以便能在浏览器的本地渲染管道中高效运行。了解更多请阅读原文。

详情:https://codersblock.com/blog/say-hello-to-houdini-and-the-css-paint-api/

8. 9个诀窍教你写出更好的 React 代码

如何在 React 中写出更好的代码,作者为我们提供了 9 个有用的 tips: 使用 propTypes 和 defaultProps,在恰当的时候使用 Component、PureComponent 和 Stateless Functional Component,如何使用 React Dev Tools,使用 Bit / StoryBook 提高工作效率等。

详情:https://blog.bitsrc.io/how-to-write-better-code-in-react-best-practices-b8ca87d462b0

9. 介绍JavaScript即将推出的三种新功能

本文介绍了 JavaScript 即将发布的新功能,作者用实例展现了 JavaScript 在可选链式调用(Optional Chaining)、Nullish coalescing 和 Pipeline operator 上的改变。

详情:https://medium.freecodecamp.org/here-are-three-upcoming-changes-to-javascript-that-youll-love-387bce1bfb0b

10. 5分钟教你学会Bulma

Bulma 是一个简单、易用的 CSS 框架,虽然很多开发人员喜欢用 Bootstrap,但是作者认为Bulma的设计更好,而且更轻量。在文章中,作者给出了一些步骤让你快速上手Bulma。

详情:https://medium.freecodecamp.org/learn-bulma-in-5-minutes-ec5188c53e83

11. 使用官方 Vue.js 测试工具与 Jest 编写组件的单元测试

Vue.js 以其灵活、高性能、易上手的特性正逐步被应用到更多的 Web 项目中,本系列文章依次介绍了编写首个简单的组件单元测试用例,测试递归渲染的 Vue.js 组件,测试组件的样式与结构,测试组件的状态、计算属性与方法,测试属性与自定义事件,测试生命周期回调,测试 Vue.js Slots,利用模块别名配置 Jest 等内容。

详情:https://alexjoverm.github.io/series/Unit-Testing-Vue-js-Components-with-the-Official-Vue-Testing-Tools-and-Jest/

12. 2018 GraphQL 必知必会

大部分开发者都了解如何构建 REST API,也感受过它的红与黑;本文则是对 API 领域的新星—GraphQL 进行介绍与讨论。GraphQL 经常被称作是面向前端的 API 技术方案,因为它允许前端开发者以更简单灵活的方式进行数据请求。该特性也正是弥补了传统 REST API 的一个不足:无法为不同的客户端返回定制化数据;而 GraphQL 的另一个优势在于,能够将原本需要向多接口发起的请求仅向单接口请求。

详情:https://medium.com/@weblab_tech/graphql-everything-you-need-to-know-58756ff253d8

技术周刊 第 41 期

【前端】

1、GraphQL 之路

image

开源电子书,介绍如何使用 React.js 和 Node.js 开发 GraphQL 应用。

https://www.robinwieruch.de/the-road-to-graphql-book/

2、React 16.x 路线图

如果您在过去一年中一直关注React,那么您将遇到各种新概念,例如hooks和“Suspense”,并且可能想知道它是如何适应大局的,这里简洁的解释了所有的问题。

https://reactjs.org/blog/2018/11/27/react-16-roadmap.html

3、前端真的能做到彻底权限控制吗?

权限控制大致分为两个维度:
垂直维度: 控制用户可以访问哪些url的权限
水平维度: 控制用户访问特定url,获取哪些数据的权限(e.g. 普通用户、管理员、超级管理员访问同一url,获取的数据是不同的)

https://juejin.im/post/5c0a96e66fb9a049ec6ae305

4、用一分钟理解 console 的这个原理,多留几根黑发

问题: console打印出的值与实际值不符的原因。
碰到这个问题是因为更改某一个值a后将其存储起来,更改为a1后,然而打印出来的值却是a1,展开打印的值是a。因为不理解这个现象,导致调试代码走了很多弯路,最后才定位到问题。一起来一探究竟~

https://juejin.im/post/5c0a2dac6fb9a04a037906e5

5、取代 Edge,微软最快本周推出新款基于 Chromium 的浏览器

传微软将放弃 Edge 及其渲染引擎 EdgeHTML,转而基于 Chromium 开发新浏览器 —— 根据最新传言,微软已经在开发新的浏览器,代号 Anaheim,基于 Chromium 构建,以此来替代目前的 Edge 浏览器。

https://mp.weixin.qq.com/s/wqmCyL5Wf9rTEzlp5VqIyA

7、React 是如何区分 Class 和 Function 的 ?

React 团队核心成员 Dan 最近新开了一个叫 Overreacted 的博客,更加深入地讲解 React 的内部原理, 这篇文章处于此翻译而来

https://zhuanlan.zhihu.com/p/51705609

8、我们为什么要写 super(props)

这篇文章也翻译自 Dan 的个人博客,来了解一下为啥在 构造函数中需要调 super 方法

https://juejin.im/post/5c04fea5f265da6133565696

【后端】

1、在Java中如何优雅地判空

作为搬砖党的一族们,我们对判空一定再熟悉不过了,不要跟我说你很少进行判空,除非你喜欢NullPointerException。不过NullPointerException对于很多猿们来说,也是Exception家族中最亲近的一员了。

https://juejin.im/post/5bf60e286fb9a049dd7fe9f8

2、一些有趣且鲜为人知的 Python 特性—wtfpython

image

Python, 是一个设计优美的解释型高级语言, 它提供了很多能让程序员感到舒适的功能特性。但有的时候, Python 的一些输出结果对于初学者来说似乎并不是那么一目了然。这个有趣的项目意在收集 Python 中那些难以理解和反人类直觉的例子以及鲜为人知的功能特性, 并尝试讨论这些现象背后真正的原理!

https://github.com/satwikkansal/wtfpython

【其他】

1、RollToolsApi

一个提供开发中常用数据的一个稳定聚合Api接口源,运行于独立服务器,免费,且长期维护,会持续添加新的接口!

https://github.com/MZCretin/RollToolsApi

2、Mac OS X 配置指南

每次更换了电脑或者重新安装了系统后,再对电脑进行配置总是一件头疼的事情,常常发现自己在工作的途中,回头去看仍需要做很多配置。本指南包含了大部分的通用软件的配置,也有部分针对特定的编程语言的配置。这里面配置适用于大部分的科研工作者/程序员/码农,也适用于有志于从事类似工作的学生。

https://wild-flame.github.io/guides/

技术周刊 第 31 期

【前端】

1、一款关于 JavaScript 的在线桌面游戏

image

您对JavaScript中的 == 运算符的规则有多了解? 使用这款古怪的扫雷游戏来测试你的JavaScript 知识。

链接:https://slikts.github.io/js-equality-game/

2、网页设计博物馆

image

该博物馆展出了900多个精心挑选和分类的网站,展示了过去 20 多年的网页设计趋势。上图是苹果公司2001年的主页。

链接:https://www.webdesignmuseum.org/

3、精准操控的滚动体验,浅谈新标准 Scroll Snap

image

在最近更新的 Chrome 69 稳定版中,全面支持了 CSS Scroll Snap 标准。该标准用于设置一个滚动捕捉点,让最终的滚动位置附着于就近或特定类型的捕捉点中,以达到更好的滚动体验。今天我们就来研究一下。

链接: https://mp.weixin.qq.com/s/UP6ib3B39OOsEd-X9ZJ8UQ

4、immer.js 简介及源码简析

JS 里面的变量类型可以大致分为基本类型和引用类型。在使用过程中,引用类型经常会产生一些无法意识到的副作用,早前的 immutable.js 是处理此类问题的代表,然后它也存在很多的不足,所以 immer 应运而生

链接: https://mp.weixin.qq.com/s/GEKkesqFs86_nSWcem2tJg

5、前端小知识--地图坐标转换

LBS,基于位置的服务(Location Based Service),近年来已经无处不在,尤其是我们前端,相信或多或少都有接触一些地图API服务,比如高德、百度啊、谷歌啊但是用的时候可能看到下面这些字眼:比如BD09、火星坐标、WGS84……不由得还是蒙圈了啊?那么接下来,我们就来了解一下,关于当前用到的一些互联网地图的基础坐标转换知识

链接:https://segmentfault.com/a/1190000013558653

6、你拆分JS代码的方法可能是错的!

一个网站该如何以最佳的方式向用户发送资源文件?有很多不同的场景,不同的技术和不同的术语。在这篇文章里,我希望能够让你明白:哪种文件分割策略最适合你的网站和用户,以及如何实现。
链接:https://mp.weixin.qq.com/s/a946nG0oNYnDBMMwgtDBpA

7、State Of JavaScript 2018

image

The State Of JavaScript 调查,帮助大家了解 2018 年最流行的 JavaScript 技术。

链接:https://stateofjs.com/

8、Iceworks 支持小程序开发

image

小程序开发无疑是目前前端领域炙手可热的开发方式之一,熟知的有支付宝小程序,微信小程序等;各种围绕着小程序的框架也开始在社区出现,如可以使用 Vue.js 开发小程序的 mpvue,遵循 React.js 语法规范的多端统一开发框架 Taro 等。这些框架的出现能有效的提升开发体验,一次编写,多端运行,开发者只需根据自己熟悉的语法,开发的小程序便可以运行在多个设备上,听起来很酷,确实也很酷。而 Iceworks 希望在这些很酷的基础上,能让前端开发更酷一点。
链接:https://juejin.im/post/5ba4befe6fb9a05d096550f3

【后端】

1、alibaba/arthas:Alibaba 开源的 Java 诊断利器

image

当你遇到这个类从哪个 jar 包加载的?为什么会报各种类相关的 Exception 类似问题而束手无策时,Arthas 可以帮助你解决。Arthas 采用命令行交互模式,同时提供丰富的 Tab 自动补全功能,进一步方便进行问题
的定位和诊断。

链接:https://github.com/alibaba/arthas

2、如何用十分钟学会函数式 Python

函数式编程到底是什么?本文将详解其概念,同时分享怎样在 Python 中使用函数式编程。主要内容包括列表解析式和其他形式的解析式。
链接:https://mp.weixin.qq.com/s/_hb7YLUzJjmnxVjCWdJQ4g

3、apachecn/awesome-leetcode

Leetcode 题解 (跟随思路一步一步撸出代码) 及经典算法实现。
image

链接: https://github.com/apachecn/awesome-leetcode

4、MMKV—基于 mmap 的高性能通用 key-value 组件

MMKV 是基于 mmap 内存映射的 key-value 组件,底层序列化/反序列化使用 protobuf 实现,性能高,稳定性强。从 2015 年中至今,在 iOS 微信上使用已有近 3 年,其性能和稳定性经过了时间的验证。近期也已移植到 Android 平台,一并开源。
链接: https://github.com/Tencent/MMKV

【其他】

1、Linus Torvalds 宣布无限期休假,开始自我反省

image

Linux 内核之父 Linus Torvalds 为其无理咆哮而道歉,并决定离开 Linux 内核项目休息一段时间,学习一下如何与人相处之道。

链接:https://linux.cn/article-10022-1.html

2、15 行代码让苹果设备崩溃,最新的 iOS 12 也无法幸免

image

国外安全研究人员 Sabri Haddouche 发现了一个只需几行代码就可以让 iPhone 崩溃并重启的方法。Sabri Haddouche 在 GitHub 上发布了一个示例网页,只有 15 行代码,如果在 iPhone 或 iPad 上访问这个页面,就会崩溃并重启,在 macOS 上使用 Safari 打开该页面也会出现浏览器挂起,无法动弹。

链接:https://mp.weixin.qq.com/s/Fw-DLZXC0OFWMg2wsqBu6A

3、因代码不规范,码农枪击 4 名同事的新闻并非真实

image

最近有篇描述因代码不规范,码农枪击 4 名同事,一人情况危急的文章刷爆了朋友圈和微信群,一些自媒体都在转载,然而这并非真实,其动机据多篇报道描述目前尚不明确,还在调查。

链接:https://posts.careerengine.us/p/5ba68d7d19cdfb5e0804ac44

4、删库惹的祸,顺丰高级工程师“被跑路”

image

日前,据微博知名互联网资讯博主@大佬坊间八卦爆料,顺丰科技数据中心的一位邓某因误删生产数据库,导致某项服务无法使用并持续 590 分钟。

链接:https://mp.weixin.qq.com/s/e5e3j6ick2ZFITTDzYbCRw

5、这届互联网公司月饼:阿里卡哇伊,百度酷炫风,京东乾隆审美……

image

在这一年一度的中秋佳节来临之际,月饼作为中秋节的福利的代表,当然是各大公司必不可少的礼品之一。然而如何设计富有公司文化色彩的月饼,顺带还能为公司品牌宣传一波,并引起求职小高潮?CSDN 为我们盘点了今年各大互联网公司,都出了什么样的月饼。

链接:https://mp.weixin.qq.com/s/u3oIFoNHa6MHoJdsdDtgWA

前端周刊 - 第 8 期

01. 2018 前端开发者手册

这是一份 2018 前端开发手册,内容包括三个部分:前端工程实践、前端开发学习和前端开发工具。

详情:https://frontendmasters.com/books/front-end-handbook/2018/

02. Bootstrap v4.1.0 发布

Bootstrap 发布了最新版本 v4.1.0,该版本除了常规的 bug 修复和文档更新外,还新增了自定义范围表单控件、轮播工具 carousel-fade、纯文本下拉菜单项 dropdown-item-text 和 box-shadow 工具等功能。

详情:https://blog.getbootstrap.com/2018/04/09/bootstrap-4-1/

03. Firefox Reality:简单的 VR 浏览器

2018 年 4 月 3 日 Mozilla 推出 Firefox Reality,这是一款全新的 VR 浏览器,专门为虚拟现实(VR)和增强现实(AR)而设计。该浏览器已在 GitHub 上开源。

详情:https://blog.mozilla.org/blog/2018/04/03/mozilla-brings-firefox-augmented-virtual-reality/

04. Angular 6 有什么新功能?

随着 Angular 6 候选版本 RC5 的发布,正式版将很快发布。一起来看看 Angular 6 中的新功能:支持 TypeScript 2.7+ ,新增渲染引擎 lvy,支持 Bazel 编译器,将 navigationSource 和 restoredState 添加到 NavigationStart。

详情:https://walkingtree.tech/whats-new-angular-6/

05. 浏览器无密码登录的新标准 WebAuthn

2018 年 4 月 10 日 FIDO 联盟(FIDO Alliance)与 W3C 联合取得了 Web 认证标准的重大进展,为全球用户带来更简单、更强大的 Web 认证方式。由 FIDO 提交的文档 Web Authentication(WebAuthn),已经正式进入 W3C 候选推荐标准(Candidate Recommendation,简称CR)阶段。目前 WebAuthn 标准已获得 Firefox 最新版本的支持,未来几个月即将推出的 Chrome 和 Edge 新版本也将支持该标准。

详情:https://www.theverge.com/2018/4/10/17215406/webauthn-support-chrome-firefox-edge-fido-password-free
中文版:https://mp.weixin.qq.com/s/enjl4i-3naF0iOdZMfrYuw

06. Site Palette:网页调色板工具

Site Palette 是一个简单易用的免费 chrome 浏览器扩展程序,可提取出网页的基本颜色生成调色板,可作为设计师和前端开发人员的有用工具。

详情:http://palette.site/

07. 图像和视频的懒加载

如何改善初始页面加载时间和降低每页有效载荷?本指南介绍了懒加载相关技术,懒加载库 lazysizes 和懒加载中需要注意的问题。

详情:https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/

08. 使用CSS filter解决SVG背景颜色问题

你可能发现使用 SVG 图片做背景图时会难以控制 fill color 等属性,在这种情况下,可以尝试使用 CSS filter。它提供了 10 多个属性,包括 blur,contrast,brightness,grayscale 和 hue-rotate 等,用于直接在浏览器中实现类似 Photoshop 滤镜的视觉效果。

详情:https://css-tricks.com/solved-with-css-colorizing-svg-backgrounds/

09. NodeJs 中的 HTTP/2 推送功能

HTTP/2 的主要目标是通过启用完整的请求和响应复用来减少延迟,通过 HTTP 头域的高效压缩来最大限度地减少协议开销,并增加对请求优先级和服务器推送的支持。HTTP/2 Server Push 允许服务器在收到浏览器的请求之前,主动向浏览器推送资源。文章介绍了 NodeJs 中 HTTP/2 服务端推送的更新。

详情:https://medium.com/the-node-js-collection/node-js-can-http-2-push-b491894e1bb1

10. 从头开始编写自己的 Promise 库

随着 NodeJs 对 Async/await 的支持,我们越来越少使用 Callbacks。而 Async/await 又是基于 Promise 的,因此理解这种流行的异步实现机制是很有必要的。在这篇文章中, 作者讲解了如何编写自己的 Promise 库,并演示如何使用 Async/await。

详情:http://thecodebarbarian.com/write-your-own-node-js-promise-library-from-scratch.html

11. Epic Spinners:一个简单易用的CSS旋转动画库

Epic Spinners 是一个 CSS 旋转动画库,可以通过 html/css 源码使用,或者作为 Vue.js 组件使用。此外还有用于 Angular 的库 angular-epic-spinners 和用于 React 的库 react-epic-spinners。

详情:http://epic-spinners.epicmax.co/

12. 优化 React:虚拟 DOM 详解

这是一份全面的对初学者友好的 React 内部机制的介绍,作者为我们揭开 JSX 的神秘面纱,给我们展示 React 如何做出渲染决策,如何找到性能瓶颈, 并分享了一些经验和提示, 以避免常见的错误。

详情:https://evilmartians.com/chronicles/optimizing-react-virtual-dom-explained

技术周刊 - 第 17 期

【前端】

1. MVVM与redux的概念类比

 
太阳下没有新事,许多东西是旧酒装新瓶,司徒正美大大如是说。在他这篇专栏文章中,类比了 MVVM中的 getter,setter 和Redux的 reducer,getState等几种概念,详细阐述了它们各自背后的实现原理,非常值得一读。

详情:https://zhuanlan.zhihu.com/p/38025611

2. JavaScript 是如何工作的:内存管理 + 处理常见的 4 种内存泄漏

JavaScrip 在对象被创建时分配内存,并在对象不再使用时“自动”释放内存,这个过程被称为垃圾回收。这种看似“自动”释放资源的特性是导致混乱的来源,它给了 JavaScript(和其他高级语言)开发者们一种错觉,他们可以选择不去关心内存管理。这是一种错误的观念。

即使使用高级语言,开发者也应该对内存管理有一些理解(至少关于基本的内存管理)。有时,自动内存管理存在的问题(比如垃圾回收器的错误或内存限制等)要求开发者需要理解内存管理,才能处理的更合适(或找到代价最少的替代方案)。

详情:https://blog.sessionstack.com/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks-3f28b94cfbec
翻译版链接:https://zhuanlan.zhihu.com/p/37863088

3. 领域驱动设计

来源: 语雀

随着我们解决的场景越来越专业化和复杂化,大型SPA应用的流行,前端承担的职责越来越多。代码的质量和系统的完整性越来越难把握。很容易导致迭代着迭代着发现代码改不动了。最后只能新起炉灶,重新开发。归根到底在于复杂度的失控,本文会尝试分析其中的问题以及从前端如何应用领域模型开发的角度给出一些建议

详情: https://yuque.com/mayiprototeam/gfyt69/oq14ia

4. Sonar 面向移动开发工程师的桌面调试平台

来源: github trending

Facebook 开源的 Sonar 是调试 iOS 和 Android 应用程序的桌面平台,通过桌面界面就能可视化、检查和控制你的应用程序,它还提供了一系列有用的工具,包括日志查看、交互式布局检查器和网络检查器

详情: https://github.com/facebook/Sonar?utm_source=gold_browser_extension

5. Node 创始人否定 Node

Nodejs 的创始人 Ryan Dahl 一共做过两次关于 JS 的公开演讲。 一次是2009年宣布 Node 项目诞生,另一次是九年后的昨天,演讲题目是《Node 的设计失误》。

这个演讲的内容非常火爆,基本上把 Node 全部否定了,认为 libuv 和 npm(包括 package.json)都是设计错误,怪不得 JS 圈里面没人作声。他觉得,Node 已经无药可救了,所以动手写了一个新项目 deno(这个名字是 node 的拆分,表示 node 重组)。

详情:http://tinyclouds.org/jsconf2018.pdf

6. Vue Native:使用Vue.js构建原生移动应用程序

来源:jsweekly

React 拥有 React Native,现在如果你是 Vue.js 开发者,你可以试试这个。 与 React Native 不同,这不是来自同一团队的正式项目,本质上它是 React Native 本身的 Vue 封装。

详情:https://vue-native.io/

7. 你可能用错了 async/await

ES7 引入的 async/await 是 JavaScript 异步编程的一个重大改进,提供了在不阻塞主线程的情况下使用同步代码异步访问资源的能力。在本文中,我们将从不同的角度探索 async/await,并演示如何正确有效地使用它们。

详情:https://hackernoon.com/javascript-async-await-the-good-part-pitfalls-and-how-to-use-9b759ca21cda

8. Sucrase:一个新的 JavaScript 转码器,号称比 Babel 快20倍

Sucrase 是 Babel 的另一种选择,允许您更快的开发构建。Sucrase 并没有将大量的 JS 特性编译成 ES5,而是假定您将目标定位于一个现代 JS 运行时,并且专注于编译非标准语言扩展: JSX,TypeScript 或 Flow。Sucrase 的解析器是从 Babel 的解析器中抽出来的,并将其细化为专注于解决 Babel 的一小部分。 如果它正合您意,希望 Sucrase 可以给您带来更好的开发体验。

详情: https://github.com/alangpierce/sucrase

【后端】

1. 设计模式集锦

软件中的设计模式是针对常见问题的通用可重用解决方案。该项目包括各种语言和框架(如 C++、Go、Java、JavaScript、PHP、Python、Ruby 等)的设计模式、通用设计模式、云设计模式、微服务和分布式系统、物联网、大数据、数据库、移动开发和前端开发中的设计模式等。

详情:https://github.com/DovAmir/awesome-design-patterns

2. 用 Python 分析 4W 场球赛,2018 世界杯冠军竟是...

比赛已经开始,我们不妨用 Python 来对参赛队伍的实力情况进行分析,并大胆的预测下本届世界杯的夺冠热门球队吧!通过数据分析,可以发现很多有趣的结果,比如:
找出哪些队伍是首次进入世界杯的黑马队伍
;找出 2018 年 32 强中之前已经进入过世界杯,但在世界杯上没有赢得过一场比赛的队伍。

详情:https://mp.weixin.qq.com/s?__biz=MjM5NzM0MjcyMQ==&mid=2650081623&idx=1&sn=b1073c2139cae81a54819bcde8c1df70

3. Deepin 操作系统面临重重困境,创始人兼 CTO 已离职

 
作为国内做的最好的 Linux 发行版,源自 Debian sid 的 Deepin 目前正面临重重困境,新版本不断延期,开发人员离职,bug 长期得不到修复,和 Debian/Ubuntu 的兼容性问题也面临越来越严重的挑战。
如今,雪上加霜的事情发生了,其联合创始人王勇离职,Deepin 的前途更是坎坷。

详情:https://www.oschina.net/news/97099/deeepin-cto-leaved-his-job

4. TensorFlow 基础入门

这篇文章的内容来自课程 [Improving Deep Neural Networks: Hyperparameter Tuning, Regularization and Optimization] 的编程练习。courseraT上的编程练习设计得非常贴心,一步步引导学员完成练习,对于编程基础薄弱的同学尤为友好。

详情:https://mp.weixin.qq.com/s/9Jg_FIejfRt6_DNcpYXVyw

5. Go 程序的持续分析

通过使用 Stackdriver Profiler,可以看到谁在使用 CPU 和内存,可以持续地监控我们的生产服务以争用和阻止配置文件,并且可以生成分析和报告,并轻松地告诉我们可以进行哪些有重要影响的优化。

详情:https://linux.cn/article-9713-1.html

6. Python 中 logging 模块的基本用法

在 PyCon 2018 上,Mario Corchero 介绍了在开发过程中如何更方便轻松地记录日志的流程。梳理一下整个演讲的过程,其实其核心就是介绍了 logging 模块的使用方法和一些配置。

详情:https://cuiqingcai.com/6080.html

【其他】

1. Android 性能优化来龙去脉总结

一款 app 除了要有令人惊叹的功能和令人发指交互之外,在性能上也应该追求丝滑的要求,这样才能更好地提高用户体验。文章作者针对 Android 性能优化进行了总结,依据故事的发展路线,将其分为了5个部分,分别是:常见的性能问题;产生性能问题的一些可能原因;解决性能问题的套路;代码建议及潜在性能问题排查项。

详情:http://wetest.qq.com/lab/view/390.html

2. 从世界杯竞猜骗局谈二分法

四年一度的足球盛典——世界杯已在本月14号响起号角。这是一场球迷的狂欢,同时也是骗子的节日。作者聊到一个经典骗局,并用二分法**解释了其中原理。

详情:https://mp.weixin.qq.com/s?__biz=MzAxOTc0NzExNg==&mid=2665514720&idx=1&sn=64e56b4e494fad02e589ebe56b36886e

技术周刊 第 32 期

【前端】

1. react-proto

image | left

React-Proto 是一个面向开发人员和设计人员的 React 应用程序原型设计工具。

链接:https://github.com/React-Proto/react-proto

2. mdwiki

一个前端脚本,将 Markdown 文件自动转成静态网站,完全使用客户端的 Javascript 和 HTML5 完成渲染。

链接:https://github.com/Dynalon/mdwiki

3. 简析Web应用6种主要漏洞及解决方案

保障Web应用的安全需要前后端配合,但主要还是服务端。服务端需要全面分析项目所实现的功能,对任何可能暴露漏洞、引发攻击的接口,都要提前拟定防御措施,由前后端共同配合实施,落实到位。
本文总结了Web应用最常见的6种漏洞,并对这些漏洞的危害、成因以及解决方案进行了简要分析:

  • SQL注入
  • 权限绕过
  • XSS
  • CSRF
  • SSRF
  • 邮件/短信轰炸

https://mp.weixin.qq.com/s/Umd-HAbUsLBoxEOIrdZ8vg

4. 浅谈表格组件的实现:固定表头和固定列

在前端开发中,表格组件相对来讲是比较复杂的组件之一,主要原因在于大家对表格组件的需求不同,笔者没看到过一个表格组件可以覆盖所有人的需求。从业务场景来讲,可以把表格组件分成三种类型:

  • Bootstrap 类:CSS 就可实现的表格,主要用在信息展现类的页面上。
  • 中后台类:着重在展现,编辑通过按钮来操作,主要用在中后台系统中。与 Bootstrap 类表格比较大的一个分界点就是有固定表格头、固定列等功能。
  • Excel 类:着重在编辑上,主要在线数据编辑的场景,这类场景相对来讲比较小众。这类表格组件对性能要求较高,和前面两种相比,有一些独有的特性:比如双击行内编辑、固定行等功能。

https://zhuanlan.zhihu.com/p/33280304

5. Create React App 2.0正式版发布,不再支持 Node 6

Create React App 2.0 正式发布,带来的众多改进值得开发者一年的等待,让我们来看看它带来了哪些新特性以及如何使用它吧!

链接: https://mp.weixin.qq.com/s/3kKDvrvnUhYdnoz4qmUivg

6. 精读《12 个评估 JS 库你需要关心的事》

作者给出了从 12 个角度全面分析 JS 库的可用性,分别是: 特性、稳定性、性能、包生态、社区、学习曲线、文档、工具、发展历史、团队、兼容性、趋势。

链接: https://segmentfault.com/a/1190000016504733

7、Nginx与前端开发

本文的目的是通过对 Nginx 的简单介绍,来让前端童靴了解其实通过 Nginx 可以强有力地助力前端开发:完全可以把之前 Node.js 的一些工作放到 Nginx 上,而不是痛苦地在 npm 中找包或者造轮子。

链接:https://juejin.im/post/5bacbd395188255c8d0fd4b2

8、如何防止 XSS 攻击

美团梳理了常见的前端安全问题以及对应的解决方案,将会做成一个系列,希望可以帮助前端人员在日常开发中不断预防和修复安全漏洞。本文是该系列的第一篇,也是关于 XSS 最详尽的一篇。

链接:https://tech.meituan.com/fe_security.html

【后端】

1. 腾讯内容平台系统的架构实践

随着云结合微服务架构切实的提高了生产效率;深度学习不断深入内容处理的各个领域促进生产力的发展。 在消息系统,数据仓库,计算框架,存储系统等基础架构层建设逐步提升的基础上,大型互联网公司进一步提出了业务基础设施的需求。在基础架构和上层业务之间急需一个中台系统来承载。中台系统把业务层同性的算法能力,服务能力,业务能力高度集成,有效组织 ,动态规划。更好的帮助上层业务。

链接:https://mp.weixin.qq.com/s/G26lg2xTClbuszYY7h0Dkw

2. Git使用教程:最详细、最傻瓜、最浅显、真正手把手教!

Git 是什么?SVN 与 Git 的最主要的区别?在 windows 上如何安装 Git?如何操作?如何理解工作区与暂存区的区别?如何 Git 撤销修改和删除文件操作?如何多人协作?

链接:https://juejin.im/entry/5bab71655188255c3272c2fc

3、如何实现可以获取最小值的栈

我现在需要实现一个栈,这个栈除了可以进行普通的 push、pop 操作以外,还可以进行 getMin 的操作,getMin 方法被调用后,会返回当前栈的最小值,你会怎么做呢?你可以假设栈里面存的都是 int 整数。

链接:https://mp.weixin.qq.com/s/tLaRUCEgtQwoFdELZlcsZA

【其他】

1. 尤雨溪公布 Vue 3.0 开发路线:将从头开始重写 3.0

在 Vue.js 伦敦大会上,Vue.js 作者尤雨溪简要介绍了 Vue 下一个主要版本要发布的内容,9 月 30 日,尤雨溪在 medium 个人博客上发布了 Vue 3.0 的开发路线,我们不妨看看 Vue 3.0 将会有怎样的发展。

链接:https://www.oschina.net/news/100515/plans-for-the-next-iteration-of-vue-js?

2. 「评论设计」的8个思考维度

近些年,各类移动应用都或多或少的融入了社交属性。其中,“评论”功能作为人与人、人与内容、人与产品之间交流的工具,已成为不可或缺的一部分。文章中整理了一套__评论设计的8个思考维度。__

链接:https://zhuanlan.zhihu.com/p/37169989

3、Facebook 遭网络攻击影响五千万用户

Facebook 官方发布了一篇博文,表示其工程团队发现了一个自创立 14 年以来最大的漏洞,黑客可利用 Facebook 应用中的“View As”这一功能代码的 Bug 来访问近 5000 万用户账号并完全控制它们。消息一出,各路网友再次炸锅,因为这真的已经记不清是 Facebook 的第几次数据泄露了,所以,这一次究竟又是怎么一回事。

链接:https://mp.weixin.qq.com/s/zUpmX5TshR0dTNXG6kkqpQ

4、Chrome 69 清空 Cookies 会保留 Google 的 Cookies

Google 本月初作为纪念发布十周年释出的 Chrome 69 曝出了多个隐私方面的严重问题,先是自动登录凭证,同步浏览器数据,现在又有用户发现浏览器的清空所有 Cookies 功能不会清空掉所有浏览器保存的 Cookies,而是会选择性保留所有 Google 的 Cookies,这一做法既带来隐私方面的问题又会带来安全方面的问题。很多人批评 Google 正在变成微软。

链接:https://news.ycombinator.com/item?id=18064537

技术周刊 第 30 期

【前端】

1. v86:JavaScript中的x86虚拟化

适用于浏览器和 Node 。 可以运行Windows 98,Linux和其他操作系统。

链接:https://github.com/copy/v86

2. 使用 Webview 开发跨平台桌面应用

跨平台桌面应用一般用 Electron 开发,打包体积很大。对于纯静态应用,其实有另一种轻量级选择。

操作系统都有自己的 Webview,Mac 是 webview,Windows 是 MSHTML,Linux 是 gtk-webkit2。这篇文章教你怎么用 Webview,开发一个跨平台的桌面打飞机游戏。

链接:https://sausheong.github.io/posts/cross-platform-games-with-go/

3. 浏览器输入 URL 后发生了什么?

这是一道非常经典的题目,相信你被面试或者面试别人有非常大的概率接触过,也可能只是其中某一部分进行提问。这道题涵盖的知识点非常多,考察得比较全面,网上一搜也有成百上千篇文章,不同的人有不同的见解,然而大部分都是千篇一律。如果你没有深入透彻系统性地研究过,光靠死记硬背,面试官稍稍针对某一点提问,或者换成另外一种方式提问,就有可能露出破绽。仔细想想,学习积累到了一定阶段,也该凭技术储备对知识体系进行一遍全面的梳理总结。

链接:https://zhuanlan.zhihu.com/p/43369093

4. Ky: 基于浏览器 Fetch API 的简洁优雅的 HTTP 客户端

Ky 是 github 上新鲜出炉的基于浏览器 Fetch API的轻量简洁HTTP客户端。比起原生 Fetch,它的优势在于:比原生 Fetch简单,简洁的接口操作,把非200+的状态都当做 error处理,请求失败时自动重新尝试,支持 JSON配置,支持超时操作等。对于不支持 Fetch API的浏览,你需要polyfill。

链接:https://github.com/sindresorhus/ky

5. WatermelonDB

下一代功能强大的 React 和 React Native APP 的数据库,WatermelonDB 特地为复杂的 React 和 React Native APP 做了优化,首要目标就是性能,换句话说就是要快速启动。当应用简单时,可以使用 Redux 或者 Mobx,但如果扩展到数千或数万个数据库记录,应用程序启动速度会受到很大影响,尤其在速度较慢的 Android 设备上,将完整的数据库加载到 JavaScript 代价巨大。WatermelonDB 的解决方案就是延迟加载,并且因为所有查询都是以单线程的方式直接在 SQLite 数据库上执行,所以即使在较慢的 Android 设备上,大多数查询也会在不到 1 毫秒的时间内解析,即使有 10000 条记录!

链接:https://github.com/Nozbe/WatermelonDB

6. 盘点 React 16.0 ~ 16.5 主要更新及其应用

大约一年前,React 团队发布了 React 16.0,时至今日,已更新到 16.5 ,这其中有不少激动人心的特性(如 Fiber 架构的引入、新的周期函数、全新 Content API、Fragment、Error Boundary、Portal 等)都值得开发者跟进学习,本文就以 React 更新日志 为引,选取几个重要且用于工作的更新,和大家一起学习。所有示例代码在 react-upgrade-examples, 配合文章一起食用更佳~ 😆

链接: https://zhuanlan.zhihu.com/p/44452592

7、Yarn Plug'n'Play: 摆脱 node_modules

Yarn 将有一个新功能,可以摆脱 node_modules 目录。实现很简单,就是所有 Node 应用的依赖都放在一个**缓存里面。每个项目不再有自己的node_modules,而会多一个.pnp.js文件,里面列出依赖的版本,直接读缓存。

链接:yarnpkg/rfcs#101

8、Ant Design 实战教程(beta 版)

Ant Design 有 3 万 + 的 Star,应该是国内使用最广泛的 React 组件库。现在,官方团队发布了免费的《Ant Design 实战教程》,从零开始教你怎么写复杂的单页应用。支付宝内部也用这个教程做前端培训,想学 React 的同学可以关注。

链接:https://www.yuque.com/ant-design/course

【后端】

1、HHVM 将停止支持 PHP

Facebook 开发的 PHP 执行引擎 HHVM 宣布将停止支持 PHP,以后只支持 Facebook 自已的 Hack 语言。现在不好判断这对PHP有什么影响。很清楚的一点是,大公司越来越倾向于用自己的语言:谷歌有go和dart,苹果有swift,微软有.net和TS,Facebook 有Hack。

链接:https://hhvm.com/blog/2018/09/12/end-of-php-support-future-of-hack.html

2、如何降低软件的复杂性

阮一峰新的博客文章《如何降低软件的复杂性?》:John Ousterhout 是斯坦福大学计算机系教授,出版了一本新书《软件设计的哲学》。大部分书教你怎么写正确的代码,这本书教你如何正确设计软件。

链接:http://www.ruanyifeng.com/blog/2018/09/complexity.html

3. SQL样式指南 · SQL Style Guide

这篇文档翻译自以署名-相同方式共享 4.0 国际协议发布的http://www.sqlstyle.guide ,译文以原文同样的协议发布。

链接:https://mp.weixin.qq.com/s/pygMaLYA_yh_RbJJ-sBUPg

4. Redis作者摊上事儿了:多人要求修改Redis主从复制术语master/slave

近日,Redis 作者在 GitHub 上发起了一个“用其他词汇代替 Redis 的主从复制术语”的 issue。有人认为 Redis 中的术语 master/slave (主人 / 奴隶)冒犯到了别人,要求 Redis 作者 ANTIREZ 修改这个术语,甚至连 ruby on rails 的作者 DHH 都在表态。本文对此 issue 做了简单翻译,以飨读者。

链接:https://mp.weixin.qq.com/s/DWH7e87q_h52VPH8amlrXw

【其他】

1、Windows 10 拦截用户安装 Firefox 和 Chrome

微软不放过任何机会推销自家的浏览器,即将在下个月发布的 Windows 10 更新将包含更多使用 Microsoft Edge 的提示,它会拦截用户安装 Chrome 和 Firefox,提醒用户:你已经有了更快更安全的浏览器 Microsoft Edge?赶快打开 Microsoft Edge 吧,不管,继续安装。

链接:https://www.ghacks.net/2018/09/12/microsoft-intercepting-firefox-chrome-installation-on-windows-10/

2、Chrome 70 将继续在地址栏隐藏 WWW

Google 在本月初释出的 Chrome 69 中引入了一项受争议的改动:隐藏网址中的 WWW 和 m。然而, www.example.com 和 example.com 是有区别的,它们很可能是不同的网站,Google 的做法会带来安全隐患,用户可能会更容易的被钓鱼网站欺骗。在引发争议之后,Google Chromium 产品经历 Emily Schecter 表示他们听取了社区反馈,决定 Chrome 70 将作出一些改动:继续省略 WWW 但不省略 m。

链接:https://bugs.chromium.org/p/chromium/issues/detail?id=883038

前端周刊 - 第 5 期

01. D3.js 5.0 发布

D3 一直是 JavaScript 数据可视化的不错选择。本次发布的 5.0 版本的更新包括:使用 Promise 代替回调函数,等高线图和密度图。

详情:https://github.com/d3/d3/blob/master/CHANGES.md#changes-in-d3-50

02. 用 Parcel 搭建 React App

号称开箱即用的后起之秀 Parcel,不到半年在Github 已经有 2w 多 star。本文教你用 Parcel 搭建 React App,作者认为它甚至比 create-react-app 更简单。

详情:https://itnext.io/react-with-parcel-99229106dac8

03. 使用 Node 调用 GraphQL API

Facebook 推出的接口查询语言 GraphQL,立志在简洁性和扩展性方面超越 REST,其已被应用在很多复杂的业务场景中。这是一篇讲解如何在 Node 中使用 GraphQL API 的文章。

详情:https://itnext.io/call-graphql-api-with-native-node-modules-5e4d088ca969

04. 用 JavaScript 写一个区块链

这篇文章讲解了如何使用 JavaScript 来创建一个简单的区块链,并演示它们的内部是如何工作的。全文包括三个部分:实现一个基本的区块链,实现POW(proof-of-work:工作量证明),交易与挖矿奖励。

详情:https://zhuanlan.zhihu.com/p/34522746?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io

05. 渲染引擎性能优化指南

这篇文章详细讲解了页面渲染的整个过程以及渲染的性能优化技巧。优化技巧包括:优化 JavaScript 与 DOM 交互,CSS 样式优化,页面布局优化,减少 repaint/reflow (重绘/回流)。

详情:https://blog.sessionstack.com/how-javascript-works-the-rendering-engine-and-tips-to-optimize-its-performance-7b95553baeda

06. React/Redux 10 Tips

这是来自具有 2 年 React/Redux 开发经验的 20 人团队的见解和技巧分享:使用 React 和 Redux 进行大规模开发的 10 个Tips。

详情:https://www.youtube.com/watch?v=NQta2urK3zk

07. Node v9.9.0 (Current) 发布

该版本更新包括:assert 模块调整,tty 模块新增函数 getColorDepth(判断终端是否支持颜色),弃用函数 Buffer 和 new Buffer 等。

原文: https://nodejs.org/en/blog/release/v9.9.0/

08. Chrome 66+ 允许异步剪贴板访问

Chrome 66 版本中新增了异步剪贴板API (navigator.clipboard 等),通过检查应用的交互权限允许异步剪切板访问,仅支持 HTTPS 页面。

详情:https://developers.google.com/web/updates/2018/03/clipboardapi

09. CSS Gradient: 为你的网页制作渐变

CSS Gradient 是一个在线工具,通过在线调色可生成你所需的渐变 CSS 代码,同时提供多种多样的渐变色板和示例。

详情:https://cssgradient.io/

10. MEAN/MERN 技术栈开发课程

这是来自 MongoDB University 的免费课程,讲解了如何使用现代化的 MEAN/MERN 技术栈进行开发。

MEAN (MongoDB, Express, Angular2, Node.js)

MERN (MongoDB, Express, React, Node.js)

详情:https://www.mongodb.com/blog/post/the-modern-application-stack-part-1-introducing-the-mean-stack

11. Angular CLI 参考指南

这篇文章详细讲解了 Angular CLI 的使用,包括CLI 的安装,应用程序的创建,添加功能,自动化配置单元测试和端到端测试,应用程序的构建和部署等。

详情:https://www.sitepoint.com/ultimate-angular-cli-reference/

12. JS 动画库在 React 中的使用比较

这篇文章讨论了 GreenSock、Anime.js、Mo.js、Popmotion 和 Velocity 等动画库在 React 中的使用评分及体验。

详情:https://blog.logrocket.com/comparing-the-top-js-animation-libraries-for-use-in-react-apps-e3ba5ccad68d

前端周刊 - 第 3 期

01. Chrome65 的新功能

CSS Paint API 允许使用编程方式生成图像;Server Timing API允许服务器将时间信息通过HTTP headers传递给浏览器; CSS display: contents可使盒子消失;

详情:https://developers.google.com/web/updates/2018/03/nic65

02. Boxy SVG:基于 Web 的 SVG 编辑器

Boxy SVG 是一款基于 Web 的 SVG 编辑器

详情:https://boxy-svg.com/app

03. Fontanello:查看网页字体信息的浏览器插件

一款 Chrome 和 Firefox 的浏览器插件,通过右键单击显示选定文本的字体样式信息

详情:https://fontanello.oktavilla.se/

04. 5大 CSS 前端框架比较

文章精选了 GitHub 上 star 数最多的5大 CSS 前端框架进行比较:Bootstrap,Foundation,Semantic UI,Pure和UIkit。

详情:https://www.sitepoint.com/most-popular-frontend-frameworks-compared/

05. Node v8.10.0 (LTS) 发布

Node v8.10.0 (LTS)已发布,这个版本带来了很多重大变化,更新包括V8,libuv,ICU(Unicode支持)和OpenSSL 1.1.0支持等。

详情:https://nodejs.org/en/blog/release/v8.10.0/

06. DoneJS 2.0发布:高性能实时 Web 应用程序框架

DoneJS 2.0 带来了 CanJS 4.0 的最新增强功能,并通过集成 Travis CI,Heroku 和 Firebase 简化持续集成和持续部署。

详情:https://www.bitovi.com/blog/donejs-2.0

07. React.js 常见问题小结

文章涵盖了 React 初学者的一些常见问题,例如组件名没有用大写字母开头、模板字符串与字符串的使用和 React.PropTypes 的使用等等。

原文: https://dev.to/samerbuna/reactjs-frequently-facedproblems--l5g

08. 用 Vue.js 开发微信小程序:开源框架 mpvue 解析

mpvue(Vue.js in mini program)是一款使用 Vue.js 开发微信小程序的前端框架。使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力。

详情:https://mp.weixin.qq.com/s/fY3HMV__wiXLF1G2pOCBaA

9. Rollbar-JavaScript实时错误监控、警报和分析

Rollbar 跟踪完整的堆栈、请求参数、URL、环境和受影响的用户,进行实时错误监控、警报和分析。

详情:https://rollbar.com/error-tracking/javascript/

10. 使用 Angular UI 组件和 SpreadJS 电子表格增强 web 应用

使用 GrapeCity 无依赖性的 Angular JavaScript 解决方案构建完整的企业 Web 应用程序,包括 SpreadJS的类 Excel 表格组件和 Wijmo 的网格,图表和输入框等UI控件。
详情:https://www.grapecity.com/en/javascript-solutions

11. CSS 30秒

这是一个有趣的 GitHub 项目:30秒或更短的时间内理解有用的 CSS 代码片段,包括布局、视觉、动画和交互等知识点。

详情:https://atomiks.github.io/30-seconds-of-css/

12. JavaScript 反调试技巧

这篇文章讨论了如何给代码主动调试增加困难,给那些想要分析你 JavaScript 代码的人增加一定的难度。文中提出的反调试技巧包括检测未知的执行环境、检测调试工具(例如 DevTools)、代码完整性控制、流完整性控制和反模拟。
详情:http://www.freebuf.com/articles/system/163579.html

技术周刊 第 35 期

前端

1. fullPage.js

有的网页每次滚动就是一屏,fullPage.js 就是制作这种效果的一个 JS 库。

链接:https://github.com/alvarotrigo/fullPage.js

2. 如何让不纯的函数变纯?

通过 JavaScript 代码解释函数式编程的一些基本概念。

链接:https://jrsinclair.com/articles/2018/how-to-deal-with-dirty-side-effects-in-your-pure-functional-javascript/

3. 【译文】构建大型 Redux 应用的五个建议

Redux 是一个用于管理应用状态的出色工具。它的单向数据流和 immmutable state 特色让我们更容易追踪状态的变更。每一个状态的变更都是由被调度的 action 引起 reducer 函数返回新的状态而产生的。我们站点上许多使用 Redux 构建的用户界面都需要处理大量的数据和复杂的交互,因为用户需要通过这些界面管理他们的广告或者在平台上更新库存信息。在开发这些界面的过程中,我们掌握了一些规则和窍门有助于让 Redux 更易于维护。

链接:https://zhuanlan.zhihu.com/p/47396514

4. 深度介绍:你听说过原生 HTML 组件吗?

在说原生 HTML 组件之前,要先简单介绍一下四大 Web 组件标准,四大 Web 组件标准分别为:HTML Template、Shadow DOM、Custom Elements 和 HTML Imports。实际上其中一个已经被废弃了,所以变成“三大”了。

链接:https://juejin.im/post/5bc7ead7f265da0afc2c2c6b

5. React v16.6 发布

React v16.6 发布,包含一些便捷的功能,包括:React.memo、React.lazy、static contextType、static getDerivedStateFromError()、弃用了 ReactDOM.findDOMNode() 和 Legacy Context 2 个 API

链接:https://mp.weixin.qq.com/s/8cJwUj8_C-W9ZC0fTWq8YA

6. React v16.7 "Hooks" - What to Expect

Hooks 是一个 React 函数组件内一类特殊的函数(通常以 "use" 开头,比如 "useState"),使开发者能够在 function component 里依旧使用 state 和 life-cycles,以及使用 custom hook 复用业务逻辑
链接:https://zhuanlan.zhihu.com/p/47684983

7、 30 Seconds of CSS

image

可以在30秒或更短的时间内理解的实用CSS代码片段。

链接:https://30-seconds.github.io/30-seconds-of-css/

8、Node.js 11 发布,Node 10正式进入LTS

Node 基金会正式发布 Node.js 11,同时宣布,到 10 月 30 日,Node.js 10.x 将成为 LTS(Long Term Support)版本,也就是长期支持版本。Node官方建议如果你是在工作中使用 Node,请使用 LTS 版本,LTS 版本更注重稳定性和扩展支持,通常将支持 30 个月,目前仍在使用 Node.js 4.x 或 Node.js 6.x 的开发者,应尽快升级为 Node.js 10。

链接:https://mp.weixin.qq.com/s/vROpVslfHEJwbLwp5DEDtg

后端

1. 深度学习 500 问

以问答形式对常用的概率知识、线性代数、机器学习、深度学习、计算机视觉等热点问题进行阐述,以帮助自己及有需要的读者。 全书分为15个章节,近20万字。

链接:https://github.com/scutan90/DeepLearning-500-questions

2. 报告显示:Python 是黑客的首选语言

在本月Python首次进入Tiobe编程语言排行榜前三之后(仅次于C和Java),它似乎又赢得了黑客的心。
根据 Imperva 发布的网络攻击统计报告,它们保护的公司受到的网络攻击中,有三分之一的攻击是使用Python编写的工具进行的,有77%的攻击过程中至少使用了一种Python工具。

链接:http://url.cn/5rnETzM

其他

1. 神翻译

image

2. 阿里巴巴集团开源软件巡礼

image

在 1024 这个特殊的节日里,语雀为大家整理了近十年来阿里集团对外开源软件、框架以及提效工具,希望让大家感受到程序猿对世界的爱。

链接:http://1024.yuque.com/

3. 保罗·艾伦的故事

image

上周,保罗·艾伦逝世。《财新周刊》约阮一峰写一篇纪念文章,发表在他们杂志上。

链接:https://www.ruanyifeng.com/blog/2018/10/paul-allen.html

技术周刊 - 第 15 期

【前端】

1. Material-UI

大家知道,谷歌的材质化组件(Material Design)是 Angular 专用的。社区维护的 React 移植版Material-UI,今天发布 1.0 版,已经完全可用了。以后,React 项目照样可以有官方安卓 UI 的那种材质化效果。

详情:https://github.com/mui-org/material-ui/releases/tag/v1.0.0

2. 生日快乐!React 开源迄今已经五周年

React发推称:「 今天(5月29日),React 开源已经整整五年的时间了,React非常荣幸能够参与并帮助改变UI的发展。」一起来祝贺 React 生日快乐吧:D!🎂

详情:https://twitter.com/reactjs/status/1001521260482904064

3. Jest 23发布 | 更快的JS测试

Jest 是一款流行的 JavaScript 测试工具。当 Webpack 从 Mocha 切换到 Jest 23 测试版以后,测试套件的速度提高了6倍。

详情:https://facebook.github.io/jest/blog/2018/05/29/jest-23-blazing-fast-delightful-testing.html

4. 2018年最值得关注的30个Vue开源项目

在过去的一年中,作者比较了近3000个Vue.js开源项目,选出30强(1%的比例)。这是一个有竞争力的清单,因为他仔细挑选2017年1月至12月期间发布的最佳开源Vue.js库,工具和项目。通过考虑流行度,参与度和近况来评估这份清单的质量。开源项目对程序员来说是很有用的。你可以通过读代码并且在现有项目的基础上构建一些东西来学习,因为如果想提高你的Vue开发技术,那么花些时间来玩一下过去一年你可能错过的Vue.js开源项目是很值得的。

详情:https://medium.mybridge.co/30-amazing-vue-js-open-source-projects-for-the-past-year-v-2018-d39a0d019bb7

5. Chrome 67 正式发布

Chrome 67 提供了桌面 PWA 功能,也就是说,可以把网页变成桌面应用,能够离线使用,并且 Windows 和 Mac 都支持。增加了对通用传感器 API 的支持,使其更容易获得诸如加速度计、陀螺仪等设备传感器,以及对 BigInt 的支持。不过也有用户反应Chrome 67太耗费内存和 CPU了,导致电脑风扇声音很大的问题。

详情:https://developers.google.com/web/updates/2018/05/nic67

6. Touch UI:基于vue的高质量移动端UI框架

TouchUI是一套完全免费的高质量移动端UI框架。基于vue.js框架,我们精心打造了上百种的移动端UI组件,几乎囊括了开发移动应用的所有细节,真正实现拿来即用,像搭积木一样开发移动应用。

通过借鉴微信小程序的**,TouchUI设计了与微信小程序相似的开发方式和API,希望通过这种方式降低学习成本,让任何水平的开发者都能做出精美应用。另外,配合我们的小程序开发框架:TouchUI WX,可以将TouchUI做的H5应用直接转成微信小程序。

TouchUI还提供了开发工具方便开发(微软的VSCode编辑器+插件),开发工具集成了编译环境,可以通过可视化菜单的方式对代码进行编译和项目输出。通过在线更新插件的方式可以第一时间获取TouchUI的更新。

详情:https://www.touchui.io/index.html

7. 精读《Typescript2.0 - 2.9》

精选了 TS 在 2.0-2.9 版本中最重要的功能,并配合实际案例解读,帮助你快速跟上 TS 的更新节奏
链接:https://zhuanlan.zhihu.com/p/37374083

8. Node之父ry发布新项目deno:下一代Node

Node 之父 Ryan Dahl 发布新的开源项目 deno,从官方介绍来看,可以认为它是下一代 Node,使用 Go 语言代替 C++ 重新编写跨平台底层内核驱动,上层仍然使用 V8 引擎,最终提供一个安全的 TypeScript 运行时

链接:https://juejin.im/entry/5b0f972f518825156e4b65d7

9. JS Linter 进化史

主要介绍了 JS Linter 进化史中的三个里程碑式的工具:JSLint、JSHint 和 ESLint
链接: https://zhuanlan.zhihu.com/p/34656263

【后端】

1. JVM 内存的那些事

对于 C 语言开发的程序员来说,在内存管理方面,必须负责每一个对象的生命周期,从有到无。
对于Java程序员来说,在虚拟机内存管理的帮助下,不需要为每个 new 对象都匹配 free 操作,内存泄露和内存溢出等问题也不太容易出现。不过也正是因为把内存管理交给了虚拟机,一旦运行中的程序出现了内存泄露问题,给排查过程造成很大困难。所以只有理解了 Java 虚拟机的运行机制,才能够对各种代码运筹帷幄。本文以 HotSpot 为例说说虚拟机的那些事。

详情:http://www.linkedkeeper.com/1149.html

2. Python3 网络爬虫实战

Python3 爬虫实战:实战源码+博客讲解。内容包括:VIP视频破解助手;GEETEST验证码破解;小说、动漫下载;手机APP爬取;财务报表入库;火车票抢票;抖音APP视频下载;百万英雄辅助;网易云音乐批量下载等。

详情:https://github.com/Jack-Cherish/python-spider

3. 高性能、高可用平台架构的演变过程

对于互联网平台或网站来说,网站的高可用、不间断服务是平台运营过程中的一个重大决定因素。文章讲解了各类高可用架构的一个演变过程到底是如何的?没有完美的架构,只有不断演变、不断完善的架构。其最终目的就是“快速响应用户的请求,从而达到比较好的用户体验”。

详情:https://mp.weixin.qq.com/s/xx4Wnd0YMi234R9BuiXMIQ

4. Jupyter Notebooks 入门

Jupyter 从 IPython 项目发展而来,它是个具有交互式 shell 和基于浏览器的笔记本,支持代码、文本和数学表达式。Jupyter 支持超过 40 种编程语言,包括 Python、R 和 Julia,其代码可以导出为 HTML、LaTeX、PDF、图像和视频,或者作为 IPyhton 笔记本与其他用户共享。它使用户能够创建包含实时代码、方程式、可视化和文本的交互式共享笔记本。

详情:https://linux.cn/article-9664-1.html

5. PyCon2018 Review (Part 1)

上个月的 PyCon 有 170 多个视频在 Youtube 上,网友 @laixintao 写了个简单看后感,目前包括对如下几个演讲的回顾:Python 依赖管理的未来?importlib.resources in Python3.7;Pythoner为什么要了解Systemd?命令行UI也需要设计。

详情:https://www.kawabangga.com/posts/2912

6. 断点单步跟踪是一种低效的调试方法

云风大神认为,虽然断点单步跟踪的交互式调试器算得上市软件开发史上的一项重大发明,但它和图形交互界面一样,都是用牺牲效率来降低学习门槛,本质上是一种极其低效的调试方法。让我们来看看云风的理由和说明吧。

详情:https://blog.codingnow.com/2018/05/ineffective_debugger.html

【其他】

1. 6 周深度学习课程

深度学习是我们这个时代的黑暗艺术,有着令人难以置信的强大、神秘和准确。这是 5 月 28 日发布在 Youtube 上的“6 周深度学习”课程,目前已有超 3 万次观看。内容包括:前馈神经网络(FNN)和反向传播,卷积网络(CN),循环网络(RN),生成对抗网络(GAN)和工具等。

详情:https://github.com/llSourcell/Learn_Deep_Learning_in_6_Weeks

2. 传微软将全资收购 GitHub,价格达 50 亿美元或更高

长期以来就有传言表示,微软有意收购流行的代码托管平台 GitHub。现在关于这个传言又有了新的实质性进展 —— 最新消息,据外媒 Business Insider 报道,微软在过去几周曾举行会谈,讨论收购代码托管平台 GitHub 的事宜。GitHub 在 2015 年最后一轮融资中估值 20 亿美元,但根据去年的发展状况,目前的收购价格可能达到 50 亿美元或更高。

详情:https://mp.weixin.qq.com/s/5qqBpVZfMoDqCDJqKcmUPA

【活动资料】

1. 6月2日美团沙龙

关注公众号 fcc-chengdu,后台回复关键词「20180602」查看资料链接。

2. 5月26日咕咚点融后端活动

关注公众号 fcc-chengdu,后台回复关键词「20180526」查看资料链接。

技术周刊 第 34 期

【前端】

1. 如何写一个 Chrome 浏览器的扩展

想写 Chrome 浏览器的扩展吗?可以看这篇教程,很容易懂。
链接:https://www.thepolyglotdeveloper.com/2018/09/creating-basic-chrome-extension/

2. 为什么国际航线的航路如此混乱?

《南华早报》的长篇可视化报道,解释为什么国际航线弯弯曲曲,不采用最近的直线距离飞行。本文使用D3.js 图文并茂的呈现方式,值得借鉴。
链接:https://multimedia.scmp.com/news/world/article/2165980/flight-paths/index.html

3、Chrome 70正式版发布:Windows端将支持PWA

Chrome 70 正式版发布,Windows、Linux、Mac 和 iOS 平台都可开始使用,但 Android 平台还需等些时日。
Chrome 70 此次带来的更新主要包括:支持在 Windows 平台上安装 PWA、新增 AV1 解码器、支持画中画功能、新增 Shape Detection API、修复了 23 处安全漏洞等。
https://mp.weixin.qq.com/s/2U_M3bRBDrSe0d5N7dyngA

4、JavaScript 开发者应懂的 33 个概念

hazel
这个项目是为了帮助开发者掌握 JavaScript 概念而创立的。它不是必备,但在未来学习(JavaScript)中,可以作为一篇指南。
https://juejin.im/entry/5bc9aae56fb9a05d20687bf3

5. ECMAScript 2016/2017/2018新特性详解

要跟踪 JavaScript(ECMAScript)究竟提供了哪些新特性并不容易,找到有用的代码示例更加困难。在本文中,我将介绍在 ES2016、ES2017 和 ES2018 中添加的 18 个特性,并提供有用的示例
链接: https://mp.weixin.qq.com/s/MfEEOWEAoHQHCNg9F0hjBQ

6. NLP.js 自然语言处理库

Nlp.js一个 nodejs 自然语言处理库,具有实体提取、情感分析、自动语言识别等功能
链接: https://github.com/axa-group/nlp.js

7、如何防止CSRF 攻击

美团梳理了常见的前端安全问题以及对应的解决方案,做成一个系列,希望可以帮助前端同学在日常开发中不断预防和修复安全漏洞。本文是该系列的第二篇:如何防止 CSRF 攻击。

链接:https://tech.meituan.com/fe_security_csrf.html

8、F2 基金可视化方案

数据可视化什么最难?很多人觉得,最难的并不是代码实现,而是想出数据展示的视觉形式。本教程通过基金业的真实案例,介绍针对移动设备的数据可视化设计方案和实现。

链接:https://www.yuque.com/mo-college/f2-fund-course

【后端】

1. Kafka 如何做到 1 秒处理 1500 万条消息?

Apache Kafka 是一款流行的分布式数据流平台,它已经广泛地被诸如 New Relic(数据智能平台)、Uber、Square(移动支付公司)等大型公司用来构建可扩展的、高吞吐量的、且高可靠的实时数据流系统。一位软件工程师将通过本文向您呈现 Apache Kafka 在大型应用中的 20 项最佳实践。

链接:https://mp.weixin.qq.com/s/AwZA7fQlcPx9wPN2WQ767w

2. PostgreSQL 11 发布,Angular 7.0.0 发布,Ubuntu 18.10 发布

Ubuntu 18.10 发布,游戏性能显著提高,此版本专注于多云部署、AI 软件开发、新的社区桌面主题和更丰富的 snap 集成。

链接:https://mp.weixin.qq.com/s/Rwowt6g839HR-6I7XeuCRA

3、MongoDB 更换开源协议

MongoDB 宣布其开源许可证从 GNU AGPLv3 切换到 Server Side Public License (SSPL)。新许可证将适用于新版本的 MongoDB Community Server 以及打过补丁的旧版本。AGPLv3 和 SSPL 在自由使用、自由修改和重新分发代码上没有区别,最大的区别是 MongoDB 希望从软件即服务上获取收入,SSPL 明确要求托管 MongoDB 实例的云计算公司要么获取商业许可证要么向社区开源其服务代码。相比之下 AGPLv3 只声明需要将修改的代码回馈社区,但没有涉及到任何软件即服务。

链接:https://www.solidot.org/story?sid=58242

【其他】

1. Git 飞行规则

Git 飞行规则(Flight Rules) 是记录在手册上的来之不易的一系列知识,记录了某个事情发生的原因,以及怎样一步一步的进行处理。本质上, 它们是特定场景的非常详细的标准处理流程。 内容详尽,包括编辑提交(editting commits)、暂存(Staging)、未暂存(Unstaged)的内容、分支(Branches)、Rebasing 和合并(Merging)等等。

链接:https://github.com/k88hudson/git-flight-rules

2、GitHub发布史上最大更新,年度报告出炉

在最近的 GitHub Universe 开发者大会上,GitHub 发布了史上最大更新:可直接运行部分代码的 GitHub Actions,以及宣布了 2018 年的 GitHub 年度报告,包括最热门的开源项目和编程语言等。

链接:https://mp.weixin.qq.com/s/ccEYMl2_0QZ5B5VHSqDXLA

3、搜索不是橙色的水果

如果在搜索引擎中搜索“不是橙色的水果”,结果返回的都是橙色的水果。这证明,搜索引擎目前都是基于关键词,而不是语义搜索。

链接:https://hashtag.ai/blog/2018/09/23/fruit.html

4、优秀到无法忽略

美国最近出版了一本新书《优秀到无法忽略》提出:热情不是凭空产生的,它跟自主权有关。如果你在某个职位上的自主权越大,能够掌控的东西越多,就越容易对当前的职业产生热情。你必须使自己变得优秀,让别人无法忽视你,同意让你掌控更多的资源,这就是书名的含义。

链接:https://commoncog.com/blog/so-good-they-cant-ignore-you/

技术周刊 - 第 25 期

【前端】

1、可视化搭建前端工程 - 阿里飞冰了解一下

"海量可复用物料,通过 GUI 工具极速构建中后台应用"。这句 slogan 还是非常准确的:飞冰是一套综合解决方案,用来极速构建中后台应用(其实也可以做非中后台应用)。可以做到极速是通过『海量可复用物料』和『GUI 开发工具』实现的。
使用飞冰的开发工作流是这样的:
下载 GUI 工具并安装 => 可视化的选择我们提供的初始模板创建项目 => 可视化的创建页面并选择我们提供的 100+ 高质量可复用区块 => 生成代码进行二次开发 => 开发完成之后点击打包编译出 HTML、JS、CSS 文件 => 部署使用
在整个流程中,你可以完全通过 GUI 工具点击操作,无需安装配置 Node 环境等前端开发工具,也无需配置 webpack 等构建脚本,我们已经按照淘宝前端最佳实践全部内置。此外,绝大部分的业务需求,我们都已经开发出对应的物料,可以通过 GUI 进行可视化的拼装,尽可能避免你去编写额外的业务逻辑。

链接:https://juejin.im/post/5b6349716fb9a04f834669d6

2、前端er怎样操作剪切复制以及禁止复制+破解等

有时候我们经常会碰到这些场景:玩掘金、知乎的时候复制一段文字,总是会在内容后面加上一些版权信息,以及像小说网站等都有禁止选中,禁止复制这种功能,还有点击自动复制账号的功能。

我也经常遇到这些场景,有时候会去想这后面到底是怎么做,周末趁着有空去研究了一下,然后发现这些都跟操作剪贴板有关系,并且都不难,了解一下基本都知道怎么做了,整理分享一波给大家。

链接:https://juejin.im/post/5b66993ee51d451924734c35

3、蚂蚁金服玉伯:我们是如何从前端技术进化到体验科技的?

玉伯分享了他从前端开发到体验可以的一些个人思考,并详细介绍了体验科技的历史及未来发展,以及本次开发体验科技的愿景

链接: https://mp.weixin.qq.com/s/IYddaaw2ps1wR2VT1dZWPg

4、REST将会过时,而GraphQL则会长存

在实现 API 时,REST 是常用的方式,但是 RESTful API 有一些固有的不足,在本文中,作者介绍了 GraphQL 的基本原理和设计**,以及如何借助其灵活性来解决 RESTful API 面临的问题,并且探讨了灵活性所带来的成本

链接:http://wemedia.ifeng.com/72984356/wemedia.shtml

5. WebAssembly 的发展方向(英文)

WebAssembly 是浏览器可以执行的字节码,使得非 JS 编写的程序可以在浏览器运行。它现在的功能非常少,还处在 MVP(最小可用产品)状态。这篇文章介绍了一些很可能采纳的 WebAssembly 提案。

链接:https://blog.scottlogic.com/2018/07/20/wasm-future.html

6. V8 版本 6.9:效率和性能发布

通过嵌入式内置函数减少内存使用量,通过新的Liftoff编译器启动更快的WebAssembly,更好的DataView和WeakMap性能等等。

链接:https://v8project.blogspot.com/2018/08/v8-release-69.html

7、网页设计的常见错误

作者列举了网页设计和文章排版中常见的一些错误,教我们如何利用简单的布局和设计技巧,创建令人惊叹的网页。

链接:http://blog-en.tilda.cc/articles-website-design-mistakes

8、Vue CLI 3.0 来了

在过去的几个月里,作者及其团队一直在努力开发下一代 Vue CLI,Vue CLI 是 Vue 应用程序的标准构建工具链。今天,他们很高兴地宣布 Vue CLI 3.0 发布及其附带的所有令人兴奋的功能:

丰富的内置功能;
可配置,且不需要 Eject;
可扩展的 Plugin System;
图形化用户界面;
Instant Prototyping;

链接:https://medium.com/the-vue-point/vue-cli-3-0-is-here-c42bebe28fbb

【后端】

1、一个令人敬佩的 Go 语言布道者

郝林小哥哥希望本专栏能帮助或推动大家去做更多的实践和思考,当然也会通过先点、后线、再面的方式帮你占领一个个重要的阵地。别的不敢说,如果你认真地跟他一起走完这个专栏,那么基本掌握 Go 语言是肯定的。

链接:https://mp.weixin.qq.com/s/WR53WahB_xA9WlJG10nLFQ

2、AriaMinaei/pretty-error

让 node.js 的错误提示更加简洁明了。

链接:https://github.com/AriaMinaei/pretty-error

3、集 Python、C、R、Ruby 之所长,Julia 1.0 正式发布

由 MIT 开发的动态编程语言 Julia 迎来了 1.0 正式版本,Julia 可以看作是一门集众家之所长的编程语言。具有快速、通用、动态、专业、(可选)多样、可组合的特点,擅长于科学计算。

链接: https://www.oschina.net/news/98846/julia-1-0-released

4、提高 Python 程序性能的七个习惯

Python 在性能方面不卓越,但是使用一些小技巧,可以提高 Python 程序的性能,避免不必要的资源浪费。例如:使用局部变量、减少函数调用的数量、使用映射来替换条件搜索、直接迭代序列元素、用生成器表达式替换列表解析、先编译后调用、模块编程的习惯。

链接:https://mp.weixin.qq.com/s/aQ-E3KNoya5QupMUnYv2UQ

【其他】

1、人民日报欢迎谷歌返华但要遵守法律

人民日报在被**屏蔽的社交网站 Facebook 上发表文章,谈论了谷歌准备重返**大陆推出审查版搜索引擎的计划,称谷歌在 2010 年退出**大陆是巨大的错误,错过了**互联网的黄金发展时期。人民日报欢迎谷歌重返**,但先决条件是它必须遵守**的法律,人民日报称许多国家都承认网络空间也有主权,任何国家都不允许互联网充斥着色情、暴力、颠覆性信息、民族分裂主义、宗教极端主义,种族主义和恐怖主义。**互联网管理的底线就是确保网络空间的活动对社会是安全的,所有外国互联网公司都需要尊重这一底线。人民日报还在另一个被**屏蔽的社交网络 Twitter 转发了这则评论。

链接:https://www.solidot.org/story?sid=57473

2、腾讯云给一家创业公司带来的灾难

一家名为前沿数控技术的创业公司把创业至今的所有的用户数据、内容数据等核心数据都放在了腾讯云上,上个月 20 号的时候该公司网站、小程序、H5 突然无法打开,联系腾讯云那边,腾讯云给的回复是他们的云硬盘出现了故障,导致了数据的丢失,并且确定所有数据无法找回。

链接:http://t.cn/RDKwWZ7

FCC 成都社区·技术周刊 第 39 期

【前端】

1. NodeJS中被忽略的内存

虽然从很久以前就知道内存问题是不容忽视的,但是日常开发的时候并没有碰到性能上的瓶颈,直到最近做了一个百万PV级的营销项目,由于访问量,并发量都达到了一个量级。一些细小的、平时没注意到的问题被放大,这才映入眼帘,开始注意到了内存问题。殊不知Node对内存的泄露是如此的敏感。为此,赶紧去补习了一下V8中的内存处理机制。那么,V8中的内存机制是怎么样的?

链接: http://t.cn/RtTGlE4

2. 用代码生成Glitch Art风格的抖音字体

最近看到不少文章教大家用 photoshop 实现抖音的 logo 跟字体,我也非常喜欢这种风格的字体,于是趁着晚上的时间,动手用代码实现了下此类风格的字体特效,顺便开发了个小工具,地址见文末。本文主要是从艺术手法和 JS 前端实现 2 个方面进行梳理,我们可以看到如何用代码来描述艺术手法,达到自动化生成某一风格作品的目的。

链接:https://mp.weixin.qq.com/s/W6BFziTEYD06_0a2Ao6RVw

3. JavaScript 错误处理权威指南

本文将分三部分分析 JavaScript 中的错误,首先我们将了解错误的一般情况,之后,我们将关注后端(Node.js + Express.js),最后,我们将重点看下如何处理 React.js 中的错误。选择这些框架,是因为它们是目前最流行的,但是,你应该也能够将这些新发现应用到其他框架中吧!

https://mp.weixin.qq.com/s/dmMc2ADUv4efEj1P-noo8A

4. 2018 JavaScript 趋势报告来啦

2018 年的报告,总共有来自 153 个不同的国家共 20,000 多名 JavaScript 开发者参与调查(**占总数的 0.37%,共 75 个开发者)。我们通过这个调查,来确定这些开发者正在使用什么技术,他们喜欢哪些技术,以及他们对哪些技术感兴趣。希望这个报告能帮助你在 JavaScript 生态之中找到适合自己的技术栈。

https://mp.weixin.qq.com/s/exAKbJ9Nc4HpisOFhcxFGg

5. 测试 JavaScript 函数的性能

假设你有一个正在工作的函数,但是你怀疑它运行得没有期望的那样快,并且你有一个改善它性能的计划。那怎么去证明这个假设呢?在今天,有什么最佳实践可以用来测试JavaScript函数的性能呢?一般来说,完成这个任务的最佳方式是使用内置的performance.now()函数,来衡量函数运行前和运行后的时间。

链接: http://t.cn/ELbFtvp

6. React 项目结构和组件命名之道

React 作为一个库,不会决定你如何组织项目的结构。这是件好事,因为这样我们有了充分的自由去尝试不同的组织方式并且选取最适合我们的方式。但是从另一个角度讲,这可能会让刚刚上手 React 的开发者产生些许困惑。我将会在本文为大家展示我已经使用过一段时间并且效果不错的方式,这些方式没有通过重新造轮子来实现,而是通过将社区中的方案组合和提炼得到。

https://github.com/dawn-plex/translate/blob/master/articles/Structuring-projects-and-naming-components-in-react.md

7、看看这些被同事喷的 JS 代码风格你写过多少

现在写代码比以前好多了,代码的格式都有 eslint、prettier、babel(写新版语法) 这些来保证,然而,技术手段再高端都不能解决代码可读性(代码能否被未来的自己和同事看懂)的问题,因为这个问题只有人自己才能解决。我们写代码要写到上图中左边这样基本上就功德圆满了。

链接:https://juejin.im/post/5becf928f265da61380ec986

8、一篇看懂 React Hooks

作者将之前对 React Hooks 的总结整理在一篇文章,带你从认识到使用 React Hooks。

链接:https://zhuanlan.zhihu.com/p/50597236

【后端】

1. 有史以来最快的终端文件管理器

nnn 可能会是您使用过的最快且最能资源感知的文件管理器。它集成了  DE和实用的 GUI 工具,可运行在Linux, OS X, Raspberry Pi, Cygwin, Linux subsystem for Windows 以及 Termux。

链接: https://github.com/jarun/nnn

2. Go 编写的 GameBoy Color 模拟器

GoBoy 是一款多平台的 Nintendo GameBoy 和 GameBoy Color 模拟器。模拟器可以运行大多数 GB 游戏和一些CGB游戏。还包括颜色和声音的支持。该模拟器主要是作为开发练习使用。

链接:https://github.com/Humpheh/goboy

【其它】

1. 2019年前端面试都聊啥?一起来看看

JavaScript ES2015 规范出现后,一切都大变样啦。 该规范很大——随着对modules(模块)原生支持以及不断发展的函数式编程,新的 JavaScript 语言重焕新生。并且每年持续推出 ES2016,ES2017 ...

链接: https://mp.weixin.qq.com/s/e-IC588SZPJK2QRBm3KuHA

2. 理解数字世界中的纸张:PDF | 科普

尽管 PDF 格式和 Word 格式在实际用途上有诸多重叠之处,但那只是表面现象。从技术角度看,两种格式之间的差异要远远大于 Word 文档和网页之间的差异,甚至还要大于 Word 文档和 Excel 表格之间的差异。

链接: https://zhuanlan.zhihu.com/p/44360779

技术周刊 - 第 14 期

【前端】

1. React Fiber 架构

React16 启用了全新的架构,叫做 Fiber,其最大的使命是解决大型 React 项目的性能问题,再顺手解决之前的一些痛点。

详情:https://zhuanlan.zhihu.com/p/37095662

2. React 16 加载性能优化指南

作者从用户打开一个链接到页面完全呈现出来的全过程来分析各个阶段的优化,整个过程分为:打开页面 -> 首屏渲染 -> 首次内容渲染 -> 可交互 -> 内容加载完毕, 使用到的关键优化方法包括:动态 polyfill、SplitChunksPlugin 拆分公共代码、动态 import,以及使用 lazyload 和 placeholder 提升加载体验。

详情:https://zhuanlan.zhihu.com/p/37148975

3. TypeScript 2.8 下的终极 React 组件模式

有状态组件、无状态组件、默认属性、Render回调、组件注入、泛型组件、高阶组件、受控组件,你不想了解下么?

详情:https://juejin.im/post/5b07caf16fb9a07aa83f2977

4. ScrollHint - 指示滚动元素

一个简单的 JavaScript 库,用来指示元素是否可以水平滚动,并带有指针图标。

详情:https://appleple.github.io/scroll-hint/

5. JavaScript 常见算法和数据结构

用 JavaScript 实现的各种算法(例如洗牌算法,汉明距离,二分查找)和数据结构(例如链表,树,堆,栈),每种算法和数据结构都有自己的 README 并提供相关说明以及进一步阅读和 YouTube 视频。(含中文版)

详情:https://github.com/trekhleb/javascript-algorithms/blob/master/README.zh-CN.md

6. Keyframes - CSS 动画创建器

前端工程师的一个小工具:通过一个可视化的时间线来帮助您创建、查看和运行动画,而无需在浏览器和编辑器之间来回切换。提供 chrome 扩展程序和 web 应用程序。

详情:https://keyframes.app/

7. 页面可视化搭建工具前生今世

页面可视化搭建, 是一个历久弥新的话题。更广义上讲, 页面是 GUI 的一部分, GUI 的拖拉生成在各种开发工具上很常见, 如 Android Studio, Xcode, Visual Studio 等。前端页面早在十几年前就能用 Dreamweaver, Frontpage 等工具可视化搭建出来。文章主要从这些方面探讨了页面可视化搭建工具:页面构成和页面组件化;页面可视化搭建工具的必要性;页面可视化搭建工具的区分维度;业界的实践实例。

详情:https://mp.weixin.qq.com/s/fq1uuVztlzYIeM7TAEQa7A

8. ElemeFE/v-charts:基于 Vue2.0 和 ECharts 封装的图表组件

在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式设置简单的配置项,便可轻松生成常见的图表。

详情:https://github.com/elemefe/v-charts

9. Material Theme Editor: 帮你更好地设计 Material Design 风格应用

在刚结束不久的 Google I/O 大会上,Google 公布了一系列 Material Design 的更新,其中包含一款名为 Material Theme Editor 的 Sketch 插件。Material Theme Editor 内置了四套主题,可以将它们看作是四个案例 App 的设计规范文档,我们可以通过 Material Theme Editor 全局修改这些规范文档中的颜色、字体、形状等元素,创建符合自身需求的 Symbol 库,从而生成自己的 Material App 设计规范。这篇文章非常详细地介绍了使用方法,一起来动手实现一下吧。

详情:https://zhuanlan.zhihu.com/p/37094123

【后端】

1. golang 版本的文字云算法实现

文字云(词云),是对文本数据中出现频率较高的“关键词”在视觉上的突出呈现,通过关键词的渲染形成类似云一样的彩色图片,从而一眼就可以领略文本数据的主要表达意思。该项目是 golang 版本的文字云算法实现。

详情:https://gitee.com/bangbaoshi/wordcloud

2. Python-100天从新手到大师

Python 作为一个“优雅”、“明确”、“简单”的编程语言,其比较流行的领域包括:云基础设施、DevOps、网络爬虫、数据分析挖掘、机器学习。该项目内容涵盖:  Python语言基础、Python语言进阶、Web前端、Linux操作系统、数据库基础和进阶、Django、Flask、爬虫、数据处理和机器学习、团队项目开发。

详情:https://github.com/jackfrued/Python-100-Days

3. Docker 资源和项目清单

Docker 作为一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化。Docker 可提供一次性的环境,提供弹性的云服务以及组建微服务架构。该项目涵盖了 Docker 相关的资源和项目。

详情:https://github.com/veggiemonk/awesome-docker

4. pipenv 更优雅的管理你的 python 开发环境

 pipenv,可以说完美的解决了 python 版本及包的管理问题。并且 pipenv 是 Python.org 正式推荐的 python 包管理工具,出自极受欢迎的 requests 包 Kennethreitz 大神之手。

详情:https://segmentfault.com/a/1190000012837890

5. 漫画:什么是 ZooKeeper

Apache ZooKeeper 是 Apache 软件基金会的一个软件项目,他为大型分布式计算提供开源的分布式配置服务、同步服务和命名注册。文章通过漫画的形式讲解了 ZooKeeper 的大致原理。

详情:https://mp.weixin.qq.com/s/Gs4rrF8wwRzF6EvyrF_o4A

6. 新手 MySQL 工程师必备命令速查手册

MySQL 的基本操作可以包括两个方面:MySQL 常用语句如高频率使用的增删改查(CRUD)语句和 MySQL 高级功能,如存储过程、触发器、事务处理等。文章整理了常用的命令,作为参考。

详情:http://dbaplus.cn/news-11-2055-1.html

【其他】

1. 一个程序员的成长之路 - 剖析别人,总结自己

这是张云龙老师于 2018 年 5 月 19 日在「 FDCON 2018 **前端开发者千人峰会」上的发言。作为走在前端工程化前列,现任全民直播 CTO 的张云龙老师,分享了他的个人成长之路,希望能够在前端职业规划上,给大家一些参考和启发。

详情:https://mp.weixin.qq.com/s/zWPjfHiYxx0HH9lE99Yijw

2. 了解下 DDoS 攻击方式

DDoS 攻防对抗多年,从 DoS 到 DDoS,从以流量取胜到以技巧取胜,从单一攻击到混合攻击,攻击手段正不断进化,文章介绍了最常见、最具代表性的攻击方式。包括 ICMP Flood、UDP Flood、NTP Flood、SYN Flood 和 CC 攻击等。

详情:https://zhuanlan.zhihu.com/p/29784472

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.