一年好文回顾@2018 (100)

[whatwewant]

【译】chrome扩展---Message Passing(2018-10)

• 【翻译】由于content scripts 运行在web页面的上下文中，而不是在扩展中，它们经常需要某种能实现与其他扩展通信的方式，例如，一个RSS reader扩展可能需要使用content scripts来检测页面中一个RSS feed的存在，然后通知background页需要为该页展示一个页面操作按钮。
• tags: chrome,chrome-extension

10个编译为JavaScript的语言 - 众成翻译(2018-10)

• 现代应用相比普通的网页有不同的要求。但是浏览器是一个有着一套（大部分）固定可用的技术的平台，JavaScript依然是web应用的核心语言；任何需要在浏览器上跑的应用都需要使用这种语言。
• 我们都知道Javascript并不是最好的语言，特别是在复杂的应用中，它可能不太能胜任。为了避免这种情况，一些新的语言或现有语言的编译器被创造出来，你不用写一行Javascript或者考虑这种语言的局限，就能生产在浏览器能运行的代码。
• 这篇文章包括了十种有趣的语言能够编译为Javascript，在浏览器或者Node.js中被执行。
• tags: JavaScript,Dart,TypeScript,Elm,ClojureScript,Reason

如何在 Chrome 插件中访问任意网页中的 JavaScript 变量？ | Yqf's Blog(2018-10)

lusaxweb/devAwesome: 🐣 Upload your own sites as portfolio or projects of your github(2018-10)

• 收集和展示Github优秀项目资料，UI很赞.

Page Lifecycle API - 众成翻译(2018-10)

• 今天的现代浏览器有时在系统资源受限的情境下会暂停页面或完全放弃执行它。将来，浏览器会主动执行此操作，因此它们会消耗更少的电量和内存。在Chrome 68中提供的Page Lifecycle API提供了生命周期钩子，因此网页可以安全地处理这些浏览器干预，而不会影响用户体验。具体请查看API了解你的应用程序是否需要实现这些特性。
• tags: html5

f/graphql.js: A Simple and Isomorphic GraphQL Client for JavaScript(2018-10)

• 添加描述
• tags: graphql

Lazy Loading Images with Vue.js Directives and Intersection Observer | CSS-Tricks(2018-10)

• 基于Intersection Observer(https://developer.mozilla.org/en-US/docs/Web/Apps/Progressive/Loading)实现Vue Lazy Load Image.
• tags: LazyLoad,Intersection Observer

如何成功创建每周用户反馈机制 - 众成翻译(2018-10)

• 如果您是产品经理，用户体验研究员或创业公司创始人，那您肯定知道用户反馈的价值。 您可能已经听过当前的流行语“持续交付”，并意识到通过了解用户的问题和体验，可以做出更好，更有创意，更有效的产品决策。
• 毫无疑问，您肯定发现获取用户反馈非常耗时。 安排会议和电话会议，重新安排会议和电话会议，参加会议和电话会议，花时间参加会议和电话会议......只要你和用户交流，这些事情就无可避免。

The Suspense is Killing Redux – Ryan Florence – Medium(2018-10)

• 添加描述

精致化的微前端开发之旅 - 知乎(2018-10)

• 微前端（Micro-Frontend），是将微服务（Micro-Services）理念应用于前端技术后的相关实践，使得一个前端项目能够经由多个团队独立开发以及独立部署。
• 本文中将会以此为目标，从零构建一套微前端的开发方案的最佳实践*，并用于完成 Micro Frontends 网站中的示例应用
• tags: 微前端

深拷贝的终极探索 - 颜海镜(2018-10)

• 首先这是一道非常棒的面试题，可以考察面试者的很多方面，比如基本功，代码能力，逻辑能力，而且进可攻，退可守，针对不同级别的人可以考察不同难度，比如漂亮妹子就出1☆题，(^__^) 嘻嘻……
• 一般在面试者回答出问题后，我总能够潇洒的再抛出一些问题，看着面试者露出惊异的眼神，默默一转身，深藏功与名
• 本文我将给大家破解深拷贝的谜题，由浅入深，环环相扣，总共涉及4种深拷贝方式，每种方式都有自己的特点和个性
• tags: 深拷贝,deep-copy,deep-clone

Understanding Design Patterns in JavaScript – Bits and Pieces(2018-10)

• 简单的设计模式，值得读读。
• tags: design pattern

History of front-end frameworks(2018-10)

• 前端框架发展史。
• tags: frontend

Mason - Front-end as a service(2018-10)

• [工具] 概念不错，只是API变成了SDK，也就是说Mason帮你封好了API，直接调用就行，也就是抽象服务层(service)作为SDK。

Want to learn Angular? Here’s our free 33-part course by Dan Wahlin!(2018-10)

• 33步教你学会Angular. 步骤很详细，可以Angular官方的Hero例子一起看。
• tags: angular

50 recommended frameworks for nodejs(2018-10)

• tags: nodejs

常用的puppeteer爬虫api - 掘金(2018-10)

• 入门puppeteer和进阶的必经之路。
• tags: puppeteer

[集合] puppeteer 深入应用，案例丰富(2018-10)

• Puppeteer, Headless Chrome；爬取《es6标准入门》、自动推文到掘金、站点性能分析；高级爬虫、自动化UI测试、性能分析；
• tags: puppeteer,前端监控

Puppeteer: 更友好的 Headless Chrome Node API - 谦行 - 博客园(2018-10)

• Puppeteer 实用API.
• tags: puppeteer

retejs/rete: JavaScript framework for visual programming and creating node editor(2018-10)

• JavaScript可视化Node编程框架
• tags: Github

30天精通Rxjs(2018-10)

• 教你读书系列，内容丰富。
• tags: rxjs,reactive programming

使用Express和MongoDB构建Serverless API的速成课程 - 众成翻译(2018-10)

• Serverless 实践
• tags: serverless

JavaScript Functions详解（包含ES6箭头函数） - 众成翻译(2018-10)

• JavaScript中的所有内容都发生在函数中。
• tags: es6

Mobx React 最佳实践 - 每日JS - 众成翻译(2018-10)

• Mobx React 最佳实践 - 每日JS
• tags: mobx

使用mobx优化React应用程序 - 众成翻译(2018-10)

• 使用mobx优化React应用程序。从1.5秒到50-100毫秒（每次更新）在这里我将简短地讲述我关于如何通过简单的技巧将网络应用程序的性能提高10倍的故事。
• tags: mobx

为什么说ReasonReact是编写React的最佳方式？(2018-10)

• 为什么说ReasonReact是编写React的最佳方式？

日常 Python 编程优雅之道 - 众成翻译(2018-10)

• Python 提供了一组独特的工具和语言特性来使你的代码更加优雅、可读和直观。为正确的问题选择合适的工具，你的代码将更易于维护。在本文中，我们将研究其中的三个工具：魔术方法、迭代器和生成器，以及方法魔术。
• tags: python

React v16.4.0: 指针事件 - React Blog - 众成翻译(2018-10)

• React 指针事件

零基础学UI设计，学费要多少？UI设计培训或自学UI到底哪里好？ - 知乎(2018-10)

• tags: design,ui

Sketch Tutorials - YouTube(2018-10)

• 非常棒的Sketch教程，很多实践。
• tags: sketch,design

Build a Simple Web App with Express, React and GraphQL | Okta Developer(2018-10)

• tags: graphql

How to Create a Gist Download Chrome Extension Using React(2018-10)

• 用React开发Chrome扩展，主要是ContentScript注入方式，例子挺不错的。
• tags: chrome extension

Stop building websites with infinite scroll!(2018-10)

• 文章中讲述了为什么你需要停止使用无限滚动，有一定道理，但是也有一些漏洞。

Why Using reduce() to Sequentially Resolve Promises Works | CSS-Tricks(2018-10)

• reduce用于处理同步序列数据已经很常见了，但是用于处理序列Promise或者说异步对我来说其实还是挺新鲜的，但是要注意reduce处理Promise(异步)的时候仍然是同步的。
• tags: map/reduce

CSS scroll-behavior和JS scrollIntoView让页面滚动平滑 « 张鑫旭-鑫空间-鑫生活(2018-10)

数据可视化入门教程（beta） · 语雀(2018-10)

• AntV 团队编写的数据可视化入门教程。
• tags: 数据可视化

短网址安全浅谈 - 博客 - 腾讯安全应急响应中心(2018-10)

• 短网址服务在方便了广大网民的同时也带来了一定的安全风险。

每个Web开发者都应该知道的SOLID原则 - 前端之巅(2018-10)

• S：单一职责原则
• O：开闭原则
• L：里氏替换原则
• I：接口隔离原则
• D：依赖倒置原则
• tags: SOLID原则,solid

A quick intro to Dependency Injection: what it is, and when to use it(2018-10)

• DI其实并不高深，相反很常见，和适配器设计模式也有很多相同之处，只是不同场景不同说法。
• tags: 设计模式,依赖注入,DI

对Web开发者很有用的6个好习惯(2018-10)

• 1. 多关注技术前沿；2. 发现好网站，看看能不能实现它们的效果; 3. 向大佬学习; 4. 代码注释；5. 重构(Refactor); 6. 多犯错误，失败是成功他妈。
• 当然文章中还推荐了很多有用的网址，比如Hackernoon, FreeCodeCamp, Web Fundamentals by Google, FWA, CSS Design Awards等.
• tags: web

Top 10 Website Builders - October 2018 | WebCreate(2018-10)

• 十大网站编辑器。
• tags: website builder

高手经验！25个步骤让你成为一个优秀设计师 - 优设-UISDC(2018-10)

• tags: design

33-js-concepts: 📜 33 concepts every JavaScript developer should know.(2018-10)

• 关于JavaScript的33个基础概念，必读。

GraphQL-Designer/graphqldesigner.com: A developer web-app tool to rapidly prototype a full stack CRUD implementation of GraphQL with React.(2018-10)

• 可视化编辑并生产GraphQL root queries、schemas, mutations, 以及Client Query，看起来非常不错。
• tags: graphql

UX best practices: How to design scannable app screenshots(2018-10)

• UX最佳实践，设计狮们可以看看。
• tags: design

React v16.6.0: lazy, memo and contextType – React Blog(2018-10)

• 1 React.memo 让 Function Components 可以像 Class components 用 PureComponent/shouldComponentUpdate一样，只有当props变化时才重新渲染;
• 2 React.lazy 运用Suspense支持Code-Splitting，类似于 react-loadable，但是写法不一样，需要注意的是它不支持SSR;
• 3 class Components支持定义static contextType来运用React.createContext();
• 4 支持static getDerivedStateFromError(): 虽然16已经支持了Error； Boundaries(componentDidCatch)捕捉错误并汇报给日志服务器，也支持使用setState来改变UI，但是它不支持SSR，所以这个接口貌似是给SSR使用的；
• tags: react

fs-remote: Drop-in replacement for fs that lets you write to the filesystem from the browser(2018-10)

• 在浏览器中使用fs, 实际上它封装了异步请求给服务器，最终交给服务器处理。
• tags: lib

⚛️👆 Part 1/3 - Beginners guide to React Renderers. How to build your own renderer from scratch? | Blog(2018-10)

• Beginners guide to React Renderers
• tags: react

React Higher-Order Components(2018-10)

• 通过讲解High Order Function理解High Order Component，讲的不错，HoC常常用withXxx开始，常见的有withRouter等, 还可以结合decorator运用。
• tags: react,HoC

什么是函数计算_函数计算-阿里云(2018-10)

• Serverless 已经这么成熟了，如果AWS Serverless不了解的话，可以看看在中文版。
• tags: serverless

TypeScript 2.8下的终极React组件模式 - 掘金(2018-10)

• 蚂蚁翻译，必属精品。
• tags: react,typescript

DevTools an Animated Journey 2016(2018-10)

• 1 Layout Editor
  • 1.1 Hover to see: margin + padding
  • 1.2 Drag to modify
  • 1.3 Guidelines help with alignment
• 2 Animation Inspecting
• 3 Debugger Story
  • 3.1 DOM to Event Listeners
  • 3.2 Live Edit
  • 3.3 Blackboxing
• 4 Source Maps
• 5 快捷键
  • 5.1 ALL COMMANDS: Shift + Cmd + P
  • 5.2 Search File: Cmd + P
• 6 Source Maps
• 7 快捷键
  • 7.1 ALL COMMANDS: Shift + Cmd + P
  • 7.2 Search File: Cmd + P
• tags: chrome,devtools

Chrome 开发者工具  |  Tools for Web Developers  |  Google Developers(2018-10)

• Chrome 开发者工具(devtools) 官方文档，精品。
• tags: devtools

下一代的微服务架构基础是ServiceMesh?(2018-10)

• 1、服务注册发现和负载均衡是微服务架构在技术上的根本问题，解决的办法是采用代理 Proxy。根据代理在架构上的位置不同，服务发现代理一般有三种模式：
• 模式一：集中式代理
• 模式二：客户端嵌入式代理
• 模式三：主机独立进程代理
• 这三种模式没有绝对的好坏之分，只是三种不同的架构风格，各有优劣和适用场景，在不同企业都有成功落地案例。
• 2、ServiceMesh 本质上就是模式三中主机独立进程代理，它结合了模式一和模式二的优势，但是分布式部署运维管理开销大。Istio 对 ServiceMesh 的架构、功能和 API 进行了标准化。
• 3、ServiceMesh 还在演进中，生产落地仍有挑战，一般企业不建议生产级使用。集中式代理最成熟，对于一般中小企业，建议从集中式代理开始，等达到一定规模和具备一定的研发运维能力，再根据需要考虑其它服务发现模式。
• 4、架构师不要盲目追新，在理解微服务架构原理的基础上，可以学习和试点新技术，但是对于生产级应用，应该以成熟稳定，有大规模落地案例作为选型第一准则。
• tags: 微服务,servermesh,kong,nginx,api gateway

阿里巴巴敏捷实践，4个迭代打造高效开发团队(2018-10)

• 迭代1: 可视化研发工作，寻找问题的关键点；
• 迭代2: 合理拆分需求，让需求变小、独立、可测试；
• 迭代3: 构建测试环境，恢复端到端持续测试；
• 迭代4: 环境稳定并持续可用;
• tags: 敏捷开发,敏捷

gRPC-Web发布，REST又要被干掉了？(2018-10)

• 1.想法是好的，看来理解层面是上了一层，可以做，但是替代还谈不上吧。
• 2.首先，从类型上看，RPC是远程调用协议，REST是API设计规范，两者在这个层面没什么可比性;
• 3.其次，从数据服务层看，曾经一段时间也有很多想法，用RPC代替Rest，因为API调用变成了方法调用或者说服务调用，想想都很爽，统一接口层规范了，但是想想要是架构师严格规范了REST，封装好REST，甚至做成远程服务框架(哈哈, ~= RPC )，那不就做到了前后端数据交换最难的痛点？(当然RPC远不止这一层) 但是情况往往是REST的理解每个人都不一样，所以想用RPC来统一，因为后端开发往往是用某个成熟的RPC框架，比如gRPC、sofa-RPC、thrift、motan等，他们都有严格定义，必须严格遵守，否则程序挂机，而RESTful只是规范，不是严格框架;
• 4.最后, 在业务层，完全可以把RPC的思想拿过来运用，RPC的思想很好，至于是基于TCP实现还是HTTP实现都可以，传输消息用json还是protobuf或者其他都可以，比如json-rpc，其根本上是严格统一前后端接口层定义，当然做成个框架更好，但是很难大规模应用，主要是后端平台很多，要覆盖很难，而且这一层往往不被大佬们重视，因为大佬往往喜欢炒概念，分布式，ServiceMesh。。。其实都不是新东西，往往是在已有的东西加上一些东西，包装出新概念。
• tags: rpc,restful,rest,json-rpc,gRPC,sofa-RPC

w3cTrain - Helkyle(2018-10)

• 这个博客很nice
• tags: blog

制作 Sketch 插件提高你的页面开发效率 | w3cTrain(2018-10)

• sketch插件开发入门到高级，厉害厉害。官方文档资料太简单。
• tags: sketch

JS 如何判断是否安装某个 Android APP？(2018-10)

• 仅Android有效。

Introducing Hooks – React(2018-10)

• React 16.7 将会引入 Hooks，不用 class 也能使用 state、生命周期函数，目的是减少HoC这样多层嵌套、以及方便组件间通信，主要有useState、userEffect、以及通过useState+useEffect构建自定义的useXXX，确实可以做到之前只有HoC、renderProps、class Component才做得到的东西，初看一般，深看还不错。结合Motivations和Overview看效果更好
• tags: react,react hooks,hook

React Conf 2018 - Fall 2018 in Lake Las Vegas, Nevada(2018-10)

• ReactConf2018 内容不错，大家可以看 livestream
• tags: react

Chromium Blog: Chrome 71 Beta: relative time formats and more(2018-10)

• Chrome 71 beta 支持相对时间 format，比如 rtf.format(-5, 'minute') = 5 minutes ago
• tags: chrome

React Hooks and Suspense on @eggheadio(2018-10)

• 如何使用 React Hooks(16.7-alpha) 和 React Suspense(16.6)
• tags: react,hook,suspense

rehooks/awesome-react-hooks: Awesome React Hooks(2018-10)

• React Hooks 资源
• tags: react,hooks

Small Focused Modules – 🦄 Sindre Sorhus’ blog(2018-10)

• Sindre Sorhus 大佬讲述了他做 Small Focused Modules的原因，值得看看

stephentian/33-js-concepts: 每个 JavaScript 工程师都应懂的33个概念 @leonardomso(2018-10)

• "中文版"的33-js-concepts，有点纠结，感觉github变味了，算不算蹭热度？
• tags: 33-js-concepts

如何在前端中使用protobuf（vue篇） - 掘金(2018-10)

• Protobuf才是解救Restful的解药。
• tags: protobuf,rest,restful

umi 2.2 发布，pwa, svg as component, yarn Plug'n'Play, modifyRouteProps, umi/prompt · Issue #76 · sorrycc/blog(2018-10)

• tags: umi

Sketch-Plugins-Cookbook: A collection of recipes for Sketch App plugins developers(2018-10)

• tags: sketch

Sketch Plugin Snippets for Plugin Developers – Design + Sketch – Medium(2018-10)

• tags: sketch

Sketch Developer Resources(2018-10)

• sketch 开发者资源，不错的
• tags: sketch

An official directory of Sketch Plugins(2018-10)

• 官方Sketch插件仓库
• tags: sketch

Make your app extensible with JavaScript Core – iOS App Development – Medium(2018-10)

• JavaScript Core扩展，支持iOS，支持Sketch
• tags: javascriptcore,ios,sketch,ObjectC

AE基础！NO .1 界面介绍 - 优优教程网(2018-10)

• AE基础教程，收藏。
• tags: AE,adobe

深入理解JSCore - 美团技术团队(2018-10)

• tags: jscore

以面试官的角度来看 React 工作面试(2018-10)

• tags: react,面试

Nginx 中的两种限流方式 - 码代码的陈同学(2018-10)

• tags: nginx

React.js Videos(2018-10)

• 全部 React.js 会议视频的索引网站，大家可以关注下 React Conf 2018 的视频
• tags: react,react 2018

SOLID原则在React中的应用(2018-10)

• 如果还不了解SOLID原则是什么，可以结合看看这篇文章: 每个开发者都需要知道的SOLID原则。
• tags: react,solid,SOLID原则

设计师编程指南之Sketch插件开发 8 之Cocoa基础知识(2018-10)

• tags: cocoa,sketch

create-react-app v2.1.0 支持typescript(2018-10)

• tags: react,typescript,create-react-app,cra

umi Roadmap for 2.x(2018-10)

• 主要roadmap:
  • 支持物料市场
  • 有一套umi ui, 类似vue ui 和 angular console
  • 支持单组件开发、发布、维护
  • SSR支持
• tags: umi,react

git commit message emoji 使用指南(2018-10)

• git commit emoji 使用指南
• tags: git-commit,emoji

Making Sense of React Hooks – Dan Abramov(2018-10)

• tags: react,react-hooks

rollout: Feature flippers 管理Feature是否展示，以及对哪些用户展示(2018-11)

• 1 某些地方类似灰度发布，但是完全控制;
• 2 开发完的功能，即使发布到生产也不应当马上对外，还需要在生产回归测试，这时候rollout作用就很大了;
• tags: rollout,rollouts

灰度发布：灰度很简单，发布很复杂(2018-11)

• 简单了解下灰度发布是什么，为什么要灰度发布，以及有哪些灰度发布策略针对Web、App等.
• 发布策略有三大类型:
• 1 web页面灰度: 按IP或用户ID，按比例或随机
• 2 服务端灰度: 逻辑开关, 比如rollout
• 3 客户端灰度: 按用户ID
• 灰度发布策略中，目标用户选取策略是关键:
• 1 地理位置
• 2 用户端特性(分辨率、性能)
• 3 用户自身特性(性别、年龄、忠诚度或者活跃度)
• tags: 灰度发布,rollout

ObJective-C UIViewController生命周期及iOS程序执行顺序 - 简书(2018-11)

• tags: objective-c,uiviewcontroller

仅需这一篇，妥妥的吃透“”负载均衡” - 开源中国(2018-11)

• tags: 负载均衡,lb,slb

Anima Toolkit for Sketch – Design + Sketch – Medium(2018-11)

• 牛逼的Sketch插件，支持预览、导出网页(牛逼动画)、响应式自动化布局(auto-layout, 自动生成多设备)等
• tags: sketch,sketch-plugin

使用Xcode开发Sketch Plugin，步骤很详细(2018-11)

• tags: sketch,xcode

插件开发 Sketch Plugin Development + 高效制作设计果效果图 Perspective Mockup In Sketch - Speaker Deck(2018-11)

• 完整、全面
• tags: sketch,xcode

my-development-tools | 我的开发工具箱(2018-11)

开发小院 - 项目挺多的(2018-11)

Taro 1.1 发布，全面支持微信/百度/支付宝 小程序 - 掘金(2018-11)

• 值得一提的是，司徒正妹的同类小程序框架nanachi(https://rubylouvre.github.io/nanachi/)已经支持微信、百度、支付宝和快应用，开发体验还不确定，找时间试试。
• tags: 小程序,taro,nanachi

对React Hooks的一些思考 - 知乎(2018-11)

• 有状态的组件没有渲染，有渲染的组件没有状态。这句话，是我最赞同的，也是我一直遵循的React开发原则。
• tags: react,hook,react-hook,react-hooks

vuedarkmode: 👩‍🎨👨‍🎨 A minimalist dark design system for Vue.js. Based components designed for the insomniacs who enjoy dark interfaces as much as we do.(2018-11)

• 主题设计相关, 黑色主题很酷
• tags: vue,theme

umi ui 方案架构(2018-11)

• tags: umi

JavaScript 复杂判断的更优雅写法 - 掘金(2018-11)

• match的思想，本文的做法有些地方不是很好，混用了matchOne和matchMany这两种不同的类型，导致算法时间复杂度都是O(n); 另外，match是之前参考大神，在redux中封装reducer操作的时候衍生的做法(后来把它整理成zcorky/rematch)，这里使用Map实现了，本质上和{}类似，只是多了些语法糖，可以结合链接一起看JavaScript技巧(https://scotch.io/tutorials/5-tips-to-write-better-conditionals-in-javascript?from=singlemessage#toc-1-use-array-includes-for-multiple-criteria)
• tags: javascript

Stanford CS193P iOS 11 Swift 4 - YouTube(2018-11)

• 斯坦福老爷子iOS 11 Swift公开课，赞
• tags: 斯坦福,Stanford,iOS,swift

React Server Side Rendering with Hypernova(2018-11)

• tags: hypernova,教程