FEX 技术周刊 - 2017/03/20
Announcing Guetzli: A New Open Source JPEG Encoder
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
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
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
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
这么多年了，Web Components 还是基本不可用，而且还有许多不确定的问题（如数据绑定）
Introducing Create React Native App
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
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
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.
写在 Element 一周年之际
Element 伴随着开发团队的成长而壮大，它可能是 Vue 2 最有名的组件库，但要想做到 Top 1，或者保持 Top 1，我们还需要加倍努力。当然，Element 一路走来，跟公司的支持密不可分，饿了么大前端团队在未来还会提供更多更好用、好玩、有趣的东西给大家，我们始终坚持开源精神，不忘初心。另附：如何落地和管理一个“大前端”团队?饿了么大前端团队解密、PWA 在饿了么的实践
滴滴 webapp 5.0 Vue 2.0 重构经验
滴滴的 webapp 是运行在微信、支付宝、手 Q 以及其它第三方渠道的打车软件。借着产品层面的功能和视觉升级，我们用 Vue 2.0 对它进行了一次技术重构。
像 Dropbox 这样的 SaaS 公司需要持续升级迭代他们的系统，并且这会涉及整个架构栈的所有层。当需要调整某些基础架构，发布一个新功能，或是设置 A/B 测试时，最重要的是我们如何快速变更并体现在产品中。
Scrolling on the web: A primer
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
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.
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.
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.
好东西，上期已推 - The System Design Primer
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
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
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
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!
“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
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
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)
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.
Introducing React Loadable
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.
AR.js - Efficient Augmented Reality for the Web using ARToolKit
整合 three.js 和 jsartoolkit5 的 AR 库
New StdLib Utils: SMS, Storage and Image Manipulation
Sketch — A Playground for React Native
在线编辑和学习 React Native 的平台
开源 Serverless 框架
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
a collection of ready to use CSS animations
ngx-datatable (f.k.a. angular2-data-table)
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
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.
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
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.
学习的使命之一就是不断反思，永远保持怀疑和批判的精神。即便你已经从碎片化学习中受益良多，如果你仍然单纯享受碎片化学习中一阵阵“爽”的感觉，或者全然相信某些人兜售的碎片化学习资料，那么，你距离真正的学习还有挺长的距离。你正在的这期 Weekly 其实也是碎片化知识，只能帮你解决“信息 & 知道”的问题，真正要掌握技术，光靠这些远远不够，必须系统化地看书、看论文、看源代码，在编码实践中持续寻找解决问题的最佳方式，只有这样才能成为专业码农。