FEX 技术周刊 - 2017/07/17
微信搜索『FEX』关注我们的公众号，及时获得最新资讯。
业界会议
2017 JavaScript中国开发者大会
http://2017.jsconf.cn/
附：参加 JSConf CN 2017 是个什么样的体验
深阅读
Let’s Dev: A Package Manager
https://yarnpkg.com/blog/2017/07/11/lets-dev-a-package-manager/
Hello everyone! Today, we’re gonna write a new package manager, even better than Yarn! Ok, maybe not, but at least we’re gonna have some fun, learn how package managers work, and think about what could come next on Yarn.
ES8 was Released and here are its Main New Features
https://hackernoon.com/es8-was-released-and-here-are-its-main-new-features-ee9c394adf66
EcmaScript 8 or EcmaScript 2017 was officially released at the end of June by TC39. It seems that we are talking a lot about EcmaScript in the last year. It’s not for nothing. Currently the standard is to publish a new ES specification version once a year. ES6 was published in 2015 and ES7 was published in 2016, but did someone remembered when ES5 was released? It happened in 2009, before the magical rise of JavaScript. 另附：Pattern Matching in ECMAScript
Security updates for all active release lines
https://nodejs.org/en/blog/vulnerability/july-2017-security-releases/
Updates are now available for all active Node.js release lines as well as the 7.x line. These include the fix for the high severity vulnerability identified in the initial announcement, one additional lower priority Node.js vulnerability in the 4.x release line, as well as some lower priority fixes for Node.js dependencies across the current release lines.
Introducing npx: an npm package runner
https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b
npx is a tool intended to help round out the experience of using packages from the npm registry — the same way npm makes it super easy to install and manage dependencies hosted on the registry, npx makes it easy to use CLI tools and other executables hosted on the registry. 另：npm v5.3.0
Upcoming RegExp Features
https://v8project.blogspot.jp/2017/07/upcoming-regexp-features.html
ES2015 introduced many new features to the JavaScript language, including significant improvements to the regular expression syntax with the Unicode (/u) and sticky (/y) flags. In this blog post we want to give you a preview of this exciting future. If you’d like to follow along with the upcoming examples, enable experimental JavaScript features at chrome://flags/#enable-javascript-harmony.
Introducing sphinx-js, a better way to document large JavaScript projects
https://hacks.mozilla.org/2017/07/introducing-sphinx-js-a-better-way-to-document-large-javascript-projects/
sphinx-js consumes standard JSDoc comments and tags—you don’t have to do anything weird to your source code. You just have Sphinx initialize a docs folder in the root of your project, activate sphinx-js as a plugin, and then write docs to your heart’s content using simple reStructuredText. When it comes time to call in some extracted documentation, you use one of sphinx-js’s special directives, modeled after the Python-centric autodoc’s mature example.
A look inside React Fiber - how work will get done.
http://makersden.io/blog/look-inside-fiber/
Fiber 是如何实现的
The MVC Design Pattern in Vanilla JavaScript
https://www.sitepoint.com/mvc-design-pattern-javascript/
The MVC pattern is good for client-side frameworks, but modern frameworks change. What is modern today is subject to the passing of time and withers away. In this take, I’d like to explore alternatives and see where a little discipline takes us.
Event Delegation: Pattern or Anti-Pattern
https://www.sitepen.com/blog/2017/07/11/event-delegation-pattern-or-anti-pattern/
Event delegation is one of the defacto ways of doing event handling. But is it the right methodology for all projects? In fact, the better question might be whether the assumptions each toolkit has made are right for your project. Knowing whether an API is right for your project depends on knowing what assumptions these tools are built on and understanding how each toolkit has interpreted them.
架构开发技术百科全书
https://mp.weixin.qq.com/s?__biz=MzIyNjE4NjI2Nw==&mid=2652559046&idx=1&sn=209b4499f3884cf02514f38e75b24d39
本文是笔者多年来积累和收集的知识技能图谱，有的是笔者原创总结的最佳实践，有的是小伙伴们的分享，其中每个秘籍图谱里面的内容都是互联网高并发架构师应该了解和掌握的知识，笔者索性把这些图谱收集在一起，并且归类便于查找和学习，希望能够帮助到每一位想成为架构师或者已经是架构师的小伙伴。
百度转型AI，Web大有可为
http://www.infoq.com/cn/news/2017/07/Web-baidu-AI-HTTPS
HTTPS、MIP、AR 等相关的技术分享
单向数据流动的函数式 View Controller
https://onevcat.com/2017/07/state-based-viewcontroller/
在这篇文章里，我会先实现一个很常见的 MVC 架构，然后对状态和状态改变的部分进行抽象及重构，最终得到一个纯函数式的易于测试的 View Controller 类。希望通过这个例子，能够给你在日常维护 View Controller 的工作中带来一些启示或者帮助。
ios10 vs ios11 :完整UI比较分析
https://mp.weixin.qq.com/s/E8TQZAX5riS-xjVzI-x_wA
很详细的 UI 对比及说明
Developer Experience Lessons Operating a Serverless-like Platform At Netflix
https://medium.com/netflix-techblog/developer-experience-lessons-operating-a-serverless-like-platform-at-netflix-a8bbd5b899a0
This is the first in a series of posts where we draw from our learnings to outline various aspects that we are addressing in the next generation of our platform. We believe these aspects are applicable to general purpose serverless solutions too. Here we will look at application development, delivery and code composition. Future posts will delve into topics such as deployments, insights, performance, scalability and other operational concerns.
How Uber Uses JavaScript and Node.js
https://www.youtube.com/watch?v=JWFyH13_I3o
Talk recording from AmsterdamJS Conference 2017.
Reverse Engineering One Line of JavaScript
https://www.alexkras.com/reverse-engineering-one-line-of-javascript/
如何分析一个高度混淆的代码，能学到不少知识
What 10 Things Should a Serious Javascript Developer Know Right Now
https://www.reddit.com/r/javascript/comments/6mlc9d/what_10_things_should_a_serious_javascript/
Scope, Architecture, DOM, Node.js…
How Rust is tested
https://brson.github.io/2017/07/10/how-rust-is-tested
I’ve always admired well-tested software projects, like SQLite, and aim to place Rust among the pantheon of the best. This document then, is a catalog of all the ways we test Rust. I hope it provides insight into what it takes to deliver a production-quality programming language, a hint at the wide variety of techniques employed in software validation, and that it reinforces your confidence in Rust’s reliability. 另附：Principles of Automated Testing
Mock system APIs
https://glebbahmutov.com/blog/mock-system-apis/
When you write your module (let’s say a Node JavaScript one), you often expose public API, but internally your code accesses the outside world via own code. Testing the public API is the best, but often it is hard, since your code interacts with the file system, user or network. How do you test the exposed API when you need to mock the rest of the system? I think it is preferable to NOT mock your own code modules, but to mock the interface to the external world.
Don’t write an SPA* Unless it makes sense to
https://blog.semanticscholar.org/dont-write-an-spa-57aaa40e0314
SPAs are a good choice if: The interface you’re building is highly interactive and needs to be fast / responsive — and you want an architecture and abstractions that supports this out the gate; You’re not worried about each and every bit of content being indexed by search engines correctly. On the other hand, an SPA might not be worth the complexity if: Your application is simple (there’s not a lot of interactive content); SEO is of pivotal importance.
What is “modern” programming
http://lemire.me/blog/2017/07/15/what-is-modern-programming/
I submit to you that modern programming has little to do with the look of your desktop. Graphical user interfaces are only skin deep. Modern programming techniques are all about processes and actual tools, not the skin on top of them. I don’t care whether you are using Eclipse or Emacs… this tells me nothing about how modern you are. So what is “modern”?
A Complete List Of UX Deliverables
https://uxplanet.org/a-complete-list-of-ux-deliverables-d62ccf1de434
The list below contains most common deliverables produced by UX Designers as they craft great experiences for users. For better readability, I’ve combined the deliverables according to UX activities: User Research, Market Research, Design, Testing. For each item in the list you’ll find additional links or video with detailed explanation or best practices.
URLs are UI
https://www.hanselman.com/blog/URLsAreUI.aspx
So many folks spend time on their CSS and their UX/UI but still come up with URLs that are at best, comically long, and at worst, user hostile.
新鲜货
Angular 4.3 Now Available
http://angularjs.blogspot.jp/2017/07/angular-43-now-available.html
Angular version 4.3 has been released. This is a minor release following our announced adoption of Semantic Versioning, meaning that it contains no breaking changes and that it is a drop-in replacement for 4.x.x.
Babylon.js 3.0
https://blogs.windows.com/buildingapps/2017/07/12/announcing-babylon-js-3-0/
Babylon.js is an open source framework that allows you to create stunning 3D experiences in your browser. Built with simplicity and performance in mind, it is the engine that fuels the Remix3D site or the Xbox Design Lab.
Tim Berners-Lee approves Web DRM
http://defectivebydesign.org/blog/tim_bernerslee_approves_web_drm_w3c_member_organizations_have_two_weeks_appeal
Tim Berners-Lee, the chief arbiter of Web standards, approved the controversial proposed Digital Restrictions Management (DRM) standard for the Web, Encrypted Media Extensions (EME).
Introducing Channels: Private Q&A for Your Team
https://stackoverflow.blog/2017/07/11/introducing-channels-private-qa-team/
We’re announcing Stack Overflow Channels for teams that need a dedicated, private space to share knowledge. We’re working hard on an early beta, and we want your active involvement in the product as we build it.
Building open source tools for Adobe Creative Cloud updates
https://code.facebook.com/posts/1555751614499319/building-open-source-tools-for-adobe-creative-cloud-updates/
Our Enterprise Engineering team recently developed a software management script that could save teams hundreds of hours in building application packages for Mac users. The new system makes it easier for people to access Adobe apps with centrally-managed Creative Cloud licensing, while saving time and improving reporting and accounting accuracy.
emotion - The Next Generation of CSS-in-JS
https://github.com/tkh44/emotion
emotion is a high performance, lightweight css-in-js library. The core idea comes from Sunil Pai’s glam library and its philosophy is laid out here. The basic idea is simple. You shouldn’t have to sacrifice runtime performance for good developer experience when writing CSS. emotion minimizes the runtime cost of css-in-js dramatically by parsing your styles with PostCSS during compilation instead of at runtime. 详见介绍文。
WeSketch
https://github.com/weixin/WeSketch
微信开源的 Sketch 辅助插件
Pell: A Simple, Small (5kB) WYSIWYG Web Text Editor
https://github.com/jaredreich/pell
pell is the simplest and smallest WYSIWYG text editor for web, with no dependencies
gpu.js
https://github.com/gpujs/gpu.js
gpu.js is a single-file JavaScript library for GPGPU (General purpose computing on GPUs) in the browser. gpu.js will automatically compile specially written JavaScript functions into shader language and run them on the GPU using the WebGL API. In case WebGL is not available, the functions will still run in regular JavaScript.
p5.js
https://p5js.org/
p5.js is a JavaScript library that starts with the original goal of Processing, to make coding accessible for artists, designers, edcators, and beginners, and reinterprets this for today’s web.
BotUI
https://github.com/moinism/botui
A JavaScript framework to create conversational UIs.
TagUI
https://github.com/tebelorg/TagUI
TagUI is a general purpose tool for automating web interactions
CSS Database
https://jonathantneal.github.io/css-db/
CSS Database is a comprehensive list of CSS features and their positions in the process of becoming implemented web standards.
create sea animals using pure CSS
https://codepen.io/ChhaviKhandelwal/pen/pwdeRO/
用纯CSS来制作几个海洋生物的样子，值得学习
PHP7 to ES7 syntax translator
https://gitlab.com/kornelski/babel-preset-php
最近我们有同事正好用过别的类似工具，语法和函数都好说，字符编码不一致的问题比较麻烦。另附：V8Py - Write Python APIs, then call them from JavaScript
Real World React
https://github.com/jeromedalbert/real-world-react
收集了大量 React 项目，方便通过查找代码的方式学习
Microcosm
http://code.viget.com/microcosm/
Microcosm is Flux with actions at center stage. Write optimistic updates, cancel requests, and track changes with ease。附：官方介绍
3 New Tools to Speed Up Your Apps
https://medium.freecodecamp.org/make-react-fast-again-tools-and-techniques-for-speeding-up-your-react-app-7ad39d3c1b82
In this post I’ll highlight tools and techniques for making React apps fast. Each section also has an interactive, and (hopefully) fun demo. Tools: The Performance Timeline, why-did-you-update, React Developer Tools.
Web Tools & Services Highly Rated By Experts
http://codecondo.com/web-tools-services-highly-rated-by-experts/
Welcome to this great showcase of 21 web tools & services that are highly rated by experts. The used methods to find out the most popular solutions were to search the internet, test the web tools and discuss with different experts from several domains.
6 Free Material Design CSS Frameworks for 2017 Compared
https://www.sitepoint.com/free-material-design-css-frameworks-compared/
对6个比较火热的 Material Design 的CSS框架进行对比，用户可以根据自己的需求场景以及各个框架的生态情况选择适合自己的那一款
PouchDB 6.3.0
https://pouchdb.com/2017/07/13/pouchdb-6.3.0.html
PouchDB is an open-source JavaScript database inspired by Apache CouchDB that is designed to run well within the browser. PouchDB was created to help web developers build applications that work as well offline as they do online.
API Security Checklist
https://github.com/shieldfy/API-Security-Checklist
Checklist of the most important security countermeasures when designing, testing, and releasing your API.
Redis 4.0 GA is out!
https://groups.google.com/forum/#!msg/redis-db/5Kh3viziYGQ/58TKLwX0AAAJ
Redis 4.0.0 is out. I’m very happy about 4.0, because this release finally overcomes several very important limits of Redis. There are many things in the 4.2 plan, so Redis with 4.0 is not magically perfect. Yet it is a very important, measurable, step forward, because of the following features.
Go Makes It Into TIOBE’s Top 10 Languages
https://www.tiobe.com/tiobe-index/
This is an important landmark for the Go programming language, but it also makes you wonder what’s next. Is Go really able to join the big stars in the programming language world and leave languages such as JavaScript and Python behind? We will see.
产品及其它
Seeing AI: Talking Camera for the Blind
https://www.microsoft.com/en-us/seeing-ai/
A free app that narrates the world around you. Designed for the low vision community, this research project harnesses the power of AI to describe people, text and objects. 另附：Google - Using Deep Learning to Create Professional-Level Photographs、Facebook - ELF: An extensive, lightweight and flexible platform for game research
Dashboard设计思考
https://mp.weixin.qq.com/s?__biz=MTEwNTM0ODI0MQ==&mid=2653434474&idx=1&sn=8cfd25c46f5634b3f4da989dddd33549
在企业类应用服务（SaaS）、检测工具（手机安全助手）、量化自我工具（智能手环）等后台管理系统中，使用Dashboard可以帮助用户监控和分析数据，快速获取重要信息。但如果对Dashboard设计缺乏认知，就很可能会造成Dashboard呈现的信息杂乱，充斥着无关紧要的指标、文本信息及各种半成品的图表等，让用户抓不到重点。那么，设计师该如何设计内容精确、体验友好的Dashboard以满足用户需求呢？
蚂蚁金服CTO程立 - 昨天最好的表现是今天最低的要求
https://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2650996875&idx=1&sn=02e6d7c94a29a0d220a814790999b37e
技术连接了两个端，一端是需求、目的，另一端是一个已有的技术，将两者结合一起，商业贡献与技术贡献的有效结合形成化学反应，出现了一个新技术，而这个新技术再去满足新的技术，再出来一个新的技术，形成一个化学反应过程。如果团队成员每个人想法背景多元化，但梦想又相同时，会出现很多创新的结果，技术本身是化学反应不是物理反应。比团队认同自己更重要的是，认同共同的目标。最顺利的时候总是最危险的时候。今天很残酷，明天更残酷，但是后天很美好。
陆奇-如何成为一个优秀的工程师
https://mp.weixin.qq.com/s?__biz=MzA3OTQyNzcwNw==&mid=2650387426&idx=1&sn=8f47c85367575a4d65608d8d6e4fdcae
我们一定要有一个坚定不移的深刻的理念，相信整个世界终究是为技术所驱动的；有没有其他人已经解决这个问题？然后你可以把你的时间放在更好的创新上；做什么事情一定要做最好，一定要是做业界最强的；我把自己想象是一个软件、一个代码，今天的版本一定要比昨天版本好，明天的版本肯定会比今天好；看到问题也不要去问别人，就把它Fix。
