FEX 技术周刊 - 2017/03/20
微信搜索『FEX』关注我们的公众号，及时获得最新资讯。
深阅读
Announcing Guetzli: A New Open Source JPEG Encoder
https://research.googleblog.com/2017/03/announcing-guetzli-new-open-source-jpeg.html
At Google, we care about giving users the best possible online experience, both through our own services and products and by contributing new tools and industry standards for use by the online community. That’s why we’re excited to announce Guetzli, a new open source algorithm that creates high quality JPEG images with file sizes 35% smaller than currently available methods, enabling webmasters to create webpages that can load faster and use even less data. 译文。
Three challenges for the web, according to its inventor
http://webfoundation.org/2017/03/web-turns-28-letter/
Today marks 28 years since I submitted my original proposal for the worldwide web. But over the past 12 months, I’ve become increasingly worried about three new trends, which I believe we must tackle in order for the web to fulfill its true potential as a tool that serves all of humanity: 1) We’ve lost control of our personal data; 2) It’s too easy for misinformation to spread on the web; 3) Political advertising online needs transparency and understanding.
A formal spec for GitHub Flavored Markdown
https://githubengineering.com/a-formal-spec-for-github-markdown/
https://github.github.com/gfm/
We’re hoping to improve on this situation by releasing a formal specification of the syntax for GitHub Flavored Markdown, and its corresponding reference implementation. This formal specification is based on CommonMark, an ambitious project to formally specify the Markdown syntax used by many websites on the internet in a way that reflects its real world usage.
Getting Started with CSS Grid
https://css-tricks.com/getting-started-css-grid/
CSS Grid is the first real layout system for the web. It’s designed for organizing content both into columns and rows and it finally gives developers almost God-like control of the screens before us. That means that we can finally ditch decades of hacks and workarounds for setting elements on a web page – ultimately it means that complex layouts and beautifully typeset pages are now not only possible but easy and maintainable. 另附：How to Order and Align Items in Grid Layout。还不知道 CSS Grid 的请移步 Webkit 对它的介绍：CSS Grid Layout: A New Layout Module for the Web
The broken promise of Web Components
https://dmitriid.com/blog/2017/03/the-broken-promise-of-web-components/
这么多年了，Web Components 还是基本不可用，而且还有许多不确定的问题（如数据绑定）
Introducing Create React Native App
https://facebook.github.io/react-native/blog/2017/03/13/introducing-create-react-native-app.html
Create React Native App: a new tool that makes it significantly easier to get started with a React Native project! It’s heavily inspired by the design of Create React App and is the product of a collaboration between Facebook and Expo (formerly Exponent). 另附：Sketch — A Playground for React Native
Why WebAssembly is Faster Than asm.js
https://hacks.mozilla.org/2017/03/why-webassembly-is-faster-than-asm-js/
WebAssembly, a new binary execution format for the Web, is starting to arrive in stable versions of browsers. A major goal of WebAssembly is to be fast. This post gives some technical details about how it achieves that.
How Progressive Web Apps make the Web great again
http://webagility.com/posts/how-progressive-web-apps-make-the-web-great-again
In this blog post we tried to achieve the impossible - explain the concept behind PWA in a way that would be engaging and understandable not only for IT-professionals but also for those that are generally interested in what’s new and hot in the web industry today.
Android热更新方案Robust开源，新增自动化补丁工具
http://tech.meituan.com/android_autopatch.html
Robust热更新系统借鉴Instant Run原理，实现了一个兼容性更强而且实时生效的热更新方案。其基本思路是，Robust热更新系统在一个方法的入口处插入一段跳转代码，当发现某个方法出现bug就跳转执行补丁中的代码，略过原有代码的执行，否则执行原有方法体逻辑。Robust凭借着自身的优势，已经在美团点评各个团队得到了快速普及。
Atlas
http://atlas.taobao.org/
https://github.com/alibaba/atlas/tree/master/atlas-docs
Atlas是伴随着手机淘宝的不断发展而衍生出来的一个运行于Android系统上的一个容器化框架，我们也叫动态组件化(Dynamic Bundle)框架。它主要提供了解耦化、组件化、动态性的支持。覆盖了工程师的工程编码期、Apk运行期以及后续运维期的各种问题。
写在 Element 一周年之际
https://zhuanlan.zhihu.com/p/25739512
Element 伴随着开发团队的成长而壮大，它可能是 Vue 2 最有名的组件库，但要想做到 Top 1，或者保持 Top 1，我们还需要加倍努力。当然，Element 一路走来，跟公司的支持密不可分，饿了么大前端团队在未来还会提供更多更好用、好玩、有趣的东西给大家，我们始终坚持开源精神，不忘初心。另附：如何落地和管理一个“大前端”团队?饿了么大前端团队解密、PWA 在饿了么的实践
滴滴 webapp 5.0 Vue 2.0 重构经验
https://github.com/DDFE/DDFE-blog/issues/13
滴滴的 webapp 是运行在微信、支付宝、手 Q 以及其它第三方渠道的打车软件。借着产品层面的功能和视觉升级，我们用 Vue 2.0 对它进行了一次技术重构。
译-Dropbox灰度发布平台系统架构
http://mp.weixin.qq.com/s?__biz=MzAwMDU1MTE1OQ==&mid=2653548381&idx=1&sn=23484f894cc3758590c9c9eb40af3a2e
像 Dropbox 这样的 SaaS 公司需要持续升级迭代他们的系统，并且这会涉及整个架构栈的所有层。当需要调整某些基础架构，发布一个新功能，或是设置 A/B 测试时，最重要的是我们如何快速变更并体现在产品中。
Scrolling on the web: A primer
https://blogs.windows.com/msedgedev/2017/03/08/scrolling-on-the-web/
Scrolling is one of the oldest interactions on the web. Long before we had pull-to-refresh or infinite-loading lists, the humble scrollbar solved the web’s original scaling problem: how can we interact with content that’s stretched beyond the available viewport?
Common Async/Await Design Patterns in Node.js
http://thecodebarbarian.com/common-async-await-design-patterns-in-node.js.html
Async/await in Node.js opens up a host of powerful design patterns. Tasks that used to take complex libraries or intricate promise chaining can now be done with rudimentary if statements and for loops. I already wrote about these kind of design patterns with co, but async/await makes these patterns accessible in vanilla Node.js, no outside libraries required.
The Evolution of JavaScript Modularity
https://github.com/myshov/history_of_javascript/tree/master/4_evolution_of_js_modularity
In this article, which is a result of communication with members of TC39, the developers of the different frameworks, reading source code, blogs and books, we will look at the following approaches/formats: Namespace, Module, Detached Dependency Definitions, Sandbox, Dependency Injection, CommonJS, AMD, UMD, Labeled Modules, YModules, ES2015 Modules. And meanwhile we will restore historical context of their emergence.
Things you should know about Objects and Immutability in JavaScript
https://www.ckl.io/blog/objects-immutability-javascript/
As a JavaScript developer, we should know that most things are objects – from core features, like strings and arrays, to the browser’s APIs. Here you can have a full introduction about objects in JavaScript.
Golden Guidelines for Writing Clean CSS
https://www.sitepoint.com/golden-guidelines-for-writing-clean-css/
As mentioned, there are some rules for writing clean CSS that you should try your best to avoid breaking. They’ll help you write CSS that is lightweight and reusable: Avoid global and element selectors; Omit overly specific selectors; Use semantic class names; Don’t tie CSS too closely to markup structure.
Writing a JavaScript Framework - Client-Side Routing
https://blog.risingstack.com/writing-a-javascript-framework-client-side-routing/
This is the last chapter of the Writing a JavaScript framework series. In this chapter, I am going to discuss how client-side routing in JavaScript differs from server-side routing and why should it be treated differently. The series is about an open-source client-side framework, called NX. During the series, I explain the main difficulties I had to overcome while writing the framework.
好东西，上期已推 - The System Design Primer
https://github.com/donnemartin/system-design-primer
系统架构设计入门，内容很丰富，有大量的资料
JOSE (Javascript Object Signing and Encryption) is a Bad Standard That Everyone Should Avoid
https://paragonie.com/blog/2017/03/jwt-json-web-tokens-is-bad-standard-that-everyone-should-avoid
There are several problems with the JOSE family of standards. These are not flaws specific to any particular implementation, and in fact many libraries work around the deficits of the standards.
新鲜货
Observables Proposal for ECMAScript
https://ponyfoo.com/articles/observables-coming-to-ecmascript
Observables in JavaScript were largely popularized by libraries such as RxJS and Bacon.js. Jafar Husain, a Netflix tech lead and long-time functional programming advocate who’s also on TC39 has been developing a proposal to bring observables into the core language. The Observable proposal is at stage 1 but marked as ready to move up to stage 2, at the time of this writing.
Firefox 52 setTimeout() Changes
https://blog.wanderview.com/blog/2017/03/13/firefox-52-settimeout-changes/
Firefox 52 hit the release channel last week and it includes a few changes to setTimeout() and setInterval(). In particular, we have changed how we schedule and execute timer callbacks in order to reduce the possibility of jank.
Open source license descriptions and metadata
https://github.com/blog/2335-open-source-license-descriptions-and-metadata
If a project is licensed under a popular open source license like MIT, Apache, or GPL, you’ll see a brief description of the license, along with an overview of what you can and can’t do with the project.
Faster 3D rendering with WebGL 2.0
http://blog.chromium.org/2017/03/faster-3d-rendering-with-webgl-20.html
Chrome 56 brings support for WebGL 2.0, a major upgrade to the API which unlocks a variety of new graphics features and advanced rendering techniques. WebGL 2.0 is currently available for Chrome users with modern graphics hardware on Windows, macOS, and Linux, and is coming soon to Android. 另：Chrome 支持 Animated PNG 了.
Sketch 43 is coming to town with a new game. An open file format!
https://medium.com/sketch-app-sources/sketch-43-is-coming-to-town-with-a-new-game-an-open-file-format-ae62e7e7c223#.3urfj7r1u
“enables more powerful integrations for third-party developers” is stating it lightly. This is what the fine folks at Bohemian Coding has done — they opened up Sketch’s file format into a neat JSON making it possible for anyone to create and modify Sketch compatible files.
Notes from the Node.js VM Summit
https://blogs.windows.com/msedgedev/2017/03/13/notes-from-nodejs-vm-summit/
The Chakra team was delighted to host the third Node.js VM Summit recently here at Microsoft. These meetings bring together JavaScript VM vendors, Node collaborators, and CTC members including participants from Google, IBM, Intel, Microsoft, nearForm, and NodeSource. This group is currently focused on addressing ABI compatibility problems facing the Node native module ecosystem. Today, we’d like to share a quick recap of the meeting and some of the next steps.
Meet The Next Smashing Magazine
https://next.smashingmagazine.com/2017/03/a-little-surprise-is-waiting-for-you-here–meet-the-next-smashing-magazine/
Smashing Magazine is changing: a new design, a new layout, a new technical stack, a new printed magazine, a new Smashing Membership, and the same good ol’ obsession with quality content. Here’s a sneak preview of what’s coming up.
GitLab acquires software chat startup Gitter, will open-source the code
http://venturebeat.com/2017/03/15/gitlab-acquires-software-chat-startup-gitter-will-open-source-the-code/
Gitter has popped up more and more on GitHub, which is arguably GitLab’s biggest competitor. But Gitter chat rooms are also sprinkled throughout GitLab. For example, a repository for a command-line interface (CLI) for talking on Gitter itself has a Gitter chat room.
Introducing Zero Round Trip Time Resumption (0-RTT)
https://blog.cloudflare.com/introducing-0-rtt/
Today we are introducing another performance-enhancing feature: zero round trip time resumption, abbreviated as 0-RTT. We’re happy to announce that 0-RTT is now enabled by default for all sites on Cloudflare’s free service.
rxdb
https://github.com/pubkey/rxdb
Client-Side Database for Browsers, NodeJS, electron, cordova, react-native and every other javascript-runtime
Introducing React Loadable
https://medium.com/@thejameskyle/react-loadable-2674c59de178#.xk8y8uqxo
https://github.com/thejameskyle/react-loadable
When you have a large enough application, a single large bundle with all of your code becomes a problem for startup time. You need to start breaking your app into separate bundles and load them dynamically when needed.
React VR
https://facebookincubator.github.io/react-vr/index.html
React VR lets you build VR apps using only JavaScript. It uses the same design as React, letting you compose a rich VR world and UI from declarative components.
AR.js - Efficient Augmented Reality for the Web using ARToolKit
https://github.com/jeromeetienne/AR.js
整合 three.js 和 jsartoolkit5 的 AR 库
nofux
https://github.com/jayphelps/nofux
Unpredictable state container for JavaScript apps. Rethinking best practices, when you’re all out of fucks to give.
Propeller
https://github.com/PixelsCommander/Propeller/
JavaScript library to rotate elements with mouse or touch gestures. Supports inertia and stepwise rotation. Optimized for better performance.
New StdLib Utils: SMS, Storage and Image Manipulation
https://medium.com/stdlibhq/new-stdlib-utils-sms-storage-and-image-manipulation-954c224de1a7#.iy4x17n74
Node 微服务框架
新兴的web服务器caddy
https://tech.crandom.com/post/2017/caddy/
内置了很多新功能的支持，比如 HTTP2、CORS、JWT、JSONP
Sketch — A Playground for React Native
https://blog.expo.io/sketch-a-playground-for-react-native-16b2401f44a2#.tnhpfp4q8
在线编辑和学习 React Native 的平台
CloudBoost
https://github.com/cloudboost/cloudboost
开源 Serverless 框架
Planck.js
https://github.com/shakiba/planck.js
Planck.js is JavaScript rewrite of Box2D physics engine for cross-platform HTML5 game and interactive application development.
jQuery 3.2.0 Is Out!
http://blog.jquery.com/2017/03/16/jquery-3-2-0-is-out/
This release includes some bug fixes, improvements, and some deprecations. There should be no compatibility issues if upgrading from jQuery 3.0+. 另附：Top 5 jQuery UI Alternatives
Animista
http://animista.net/
a collection of ready to use CSS animations
ngx-datatable (f.k.a. angular2-data-table)
https://github.com/swimlane/ngx-datatable
ngx-datatable is an Angular component for presenting large and complex data. It has all the features you would expect from any other table but in a light package with no external dependencies. The table was designed to be extremely flexible and light; it doesn’t make any assumptions about your data or how you: filter, sort or page it.
Eagle.js - A slideshow framework for hackers
https://github.com/zulko/eagle.js/
Eagle.js is a slideshow system built on top of the Vue.js web framework. It supports animations, themes, interactive widgets (for web demos), and makes it easy to reuse components, slides and styles across presentations.
产品及其它
Lean Inception
https://martinfowler.com/articles/lean-inception/
Agile projects emphasize the early and continuous delivery of valuable software, whose value comes from business objectives and the needs of customers. Lean StartUp product creation helps this by promoting the incremental release of an MVP (Minimum Viable Product) — a simple version of a product that is given to users in order to validate the key business assumptions.
Teams and the Way They Work
https://www.infoq.com/articles/teams-way-work
As soon as the job gets large enough, we need more than one person. People are great, however each person is unique, with a different skillset, knowledge base, history, value system and wants and needs. It is only when there is clear direction, shared desire to succeed, and clear boundaries that they will thrive and flourish.
透明，真实，自组织
http://www.iheima.com/zixun/2017/0317/161923.shtml
透明、真实、自组织，这些移动产品上的关键词，是否可以也作为高科技企业的组织文化理念？腾讯联合创始人、前CTO、腾讯学院荣誉院长张志东(Tony)，在2017腾讯HR内部年会中分享到：保持独立思考，尝试更开放的思想，把更多的精力放在创造具有内生力的智慧支撑平台上。
吴穹：既然没有退路，创新转型不可避免
http://www.ituring.com.cn/article/274562
创业圆梦、创新转型已经成为许多人精神上的一剂鸦片，好像只要还在创业、创新，那些关于未来的美好幻象就永远不会消失。 全民逐浪的游戏里，少数成功者登至浪潮顶端，风光无限，而那些曾全力追赶浪潮，最后仍被浪潮吞噬的“失败者”沉默得就像从未出现过。致力于推广“精益敏捷”创新思想的吴穹，告诉我们创新并非一场赌博，全靠运气，它有法可循。
给碎片化学习泼点冷水
http://mp.weixin.qq.com/s?__biz=MzA3MDMwOTcwMg==&mid=2650004789&idx=1&sn=db923025f969e2bcc9813a912f150ac1
学习的使命之一就是不断反思，永远保持怀疑和批判的精神。即便你已经从碎片化学习中受益良多，如果你仍然单纯享受碎片化学习中一阵阵“爽”的感觉，或者全然相信某些人兜售的碎片化学习资料，那么，你距离真正的学习还有挺长的距离。你正在的这期 Weekly 其实也是碎片化知识，只能帮你解决“信息 & 知道”的问题，真正要掌握技术，光靠这些远远不够，必须系统化地看书、看论文、看源代码，在编码实践中持续寻找解决问题的最佳方式，只有这样才能成为专业码农。
