FEX 技术周刊 - 2018/09/10
深阅读
React 16.5.0
https://github.com/facebook/react/blob/master/CHANGELOG.md
尚未正式发布，变更蛮多的，可围观下。另附：Dan Abramov Explains How ‘Time Slicing’ Will Help Pre-Render Hidden Nodes.
Removing jQuery from GitHub.com frontend
https://githubengineering.com/removing-jquery-from-github-frontend/
We have recently completed a milestone where we were able to drop jQuery as a dependency of the frontend code for GitHub.com. This marks the end of a gradual, years-long transition of increasingly decoupling from jQuery until we were able to completely remove the library. In this post, we will explain a bit of history of how we started depending on jQuery in the first place, how we realized when it was no longer needed, and point out that—instead of replacing it with another library or framework—we were able to achieve everything that we needed using standard browser APIs.
Migrating from Underscore to Lodash
https://blogs.dropbox.com/tech/2018/09/migrating-from-underscore-to-lodash/
Over the past two years we’ve worked to modernize our front-end stack. We’ve successfully moved from CoffeeScript to TypeScript, from jQuery to React, and from a custom Flux implementation to Redux. Having completed these migrations we identified our utility library, Underscore, as one more candidate for migration.
Build a Website with Modern Tooling and No Frameworks
https://blog.bitsrc.io/build-a-website-with-modern-tooling-and-no-frameworks-a33e65099f9
We all love React, Vue, Angular, [front-end framework]. But, it might be overkill to use them if you just need to build a simple website.
Goodbye Redux
https://hackernoon.com/goodbye-redux-26e6a27b3a0b
A complete breakdown on why we needed Redux in the past, and why we don’t any more. 原来是呼吁用 GraphQL 的…
The System Design Primer
https://github.com/donnemartin/system-design-primer
学习后端架构的入门知识
公司为什么需要建立一套统一的开发框架
https://mp.weixin.qq.com/s?__biz=MzIwMzg1ODcwMw==&mid=2247488436&idx=1&sn=b22a02c590ea1b2e85ece70ff0ee2d1e
在公司发展初期，为了快速的进行业务拓展，大都不考虑成本投入，运营维护以及技术沉淀等问题。所有的指标导向都是业务的快速发展，尽可能的抢占市场份额，获取足够多的用户数量。在公司发展到一定阶段后，市场逐渐趋于稳定，先期快速扩展的各种问题会逐步暴露出来。从技术层面来讲，如果可以形成公司级别的统一开发框架，会在实际的生产过程中带来非常大的收益。
漂亮的实力派 Ant Design Pro 2.0 正式发布
https://www.yuque.com/ant-design/ant-design-pro/ant_design_pro_2.0_is_out
1.0 发布之后，Ant Design Pro 受到了业界广泛关注和使用，GitHub 上 star 数一路增长到 11,686 个，在蚂蚁金服内部也落地数百个中后台应用。在这 8 个月内，2.0 研发计划也在持续进行中，在给 V2 版本发起过 PR 的 38 位贡献者帮助下，经历了 600 个 commit，一次整体架构升级后，我们带来了全新的 Ant Design Pro 2.0。在这个版本中我们带来了四个全新的页面、多种布局方式来丰富 pro 的使用场景、脚手架从 roadhog 切换到了 umi2，并且加入了一个炫酷的设置抽屉。另附：G6 2.1 一路同行 及基于 G6 的 GGEditor - A visual graph editor based.
用微前端的方式搭建类单页应用
https://tech.meituan.com/fe_tiny_spa.html
微前端由ThoughtWorks 2016年提出，将后端微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。本文将为大家介绍“微前端构建类单页应用”在美团HR系统中的一些实践。同时也分享一些我们的思考和经验，希望能够对大家有所启发。
Announcing styled-components v4: Better, Faster, Stronger
https://medium.com/styled-components/announcing-styled-components-v4-better-faster-stronger-3fe1aba1a112
A brand new global styles API, native support for the “as” and “ref” props, removal of .extend, full React v16 StrictMode-compliance, tons of speed, and more 💪
Going International at the Front-End - Simple React i18n
https://blog.daftcode.pl/going-international-at-the-front-end-13983cee429d
Internationalization (i18n) is as old as the Internet, but in the fast changing world we are moving from the “web pages” generated by the server-side, to “single page applications”. This is great in so many ways, but often we find ourselves rediscovering the wheel. In some cases, server-side solutions are easily transferable to the client, but sometimes it’s not that simple and there are additional things to consider.
Take A New Look At CSS Shapes
https://www.smashingmagazine.com/2018/09/css-shapes/
In this article, we take a look at CSS Shapes and how to create non-rectangular shapes using images, gradients, and basic shapes. We also discover how the new tools in Firefox make editing shapes easier. 另附：Make your web layouts bust out of the rectangle with the Firefox Shape Path Editor、Variable Font Support.
What We’ve Learned from the July 2018 Flutter User Survey
https://medium.com/flutter-io/what-weve-learned-from-the-july-2018-flutter-user-survey-cbbf1e04370c
The survey was open to the public for two weeks in July of 2018 and received responses from 1,016 users. Thank you so much for giving us your valuable feedback! In this post, we would like to share what we learned from the survey and what we plan to do to address your feedback.
Who left open the cookie jar? A comprehensive evaluation of third-party cookie policies
https://blog.acolyer.org/2018/09/05/who-left-open-the-cookie-jar-a-comprehensive-evaluation-of-third-party-cookie-policies/
This paper won a ‘Distinguished paper’ award at USENIX Security 2018, as well as the 2018 Internet Defense Prize. It’s an evaluation of the defense mechanisms built into browsers (and via extensions / add-ons) that seek to protect against user tracking and cross-site attacks. Testing across 7 browsers and 46 browser extensions, the authors find that for virtually every browser and extension combination there is a way to bypass the intended security policies. 另附：All You Need to Know About Cookies - Cookiepedia.
Forecasting at Uber: An Introduction
https://eng.uber.com/forecasting-introduction/
This article is the first in a series dedicated to explaining how Uber leverages forecasting to build better products and services. In recent years, machine learning, deep learning, and probabilistic programming have shown great promise in generating accurate forecasts. In addition to standard statistical algorithms, Uber builds forecasting solutions using these three techniques. Below, we discuss the critical components of forecasting we use, popular methodologies, backtesting, and prediction intervals.
Introducing the Service Map in Datadog
https://www.datadoghq.com/blog/service-map/
The Service Map decomposes your application into all its component services and draws the observed dependencies between these services in real time, so you can identify bottlenecks and understand how data flows through your architecture.
Sample Dialogs: The Key to Creating Great Actions on Google
https://developers.googleblog.com/2018/09/sample-dialogs-key-to-creating-great.html
These days, I’m keen to introduce designers and developers to our conversation design best practices so that Actions will provide the best possible user experience. Today, I’ll be talking about a fundamental first step when thinking about creating an Action: writing sample dialogs.
新鲜货
Chrome Turns 10 Years Old as Chrome 69 Released
https://developers.google.com/web/updates/2018/09/nic69
In Chrome 69, we’ve added support for: CSS Scroll Snap allows you to create smooth, slick, scroll experiences; Display cutouts let’s you use the full area of the screen, including any space behind the display cutout, sometimes called a notch; The Web Locks API allows you to asynchronously acquire a lock, hold it while work is performed, then release it. 另附：Firefox 62 for developers、10 Years of Chrome DevTools、The ‘Capable Web’: A 10 Year Retrospective、Chrome’s new design — a UX perspective、Google’s Chrome New Design — what’s good, what’s bad, and what’s still missing、Chrome 十岁了：一款「中危」浏览器的操作系统梦
Take the State of JavaScript 2018 Survey!
https://medium.com/@sachagreif/take-the-state-of-javascript-2018-survey-c43be2fcaa9
Just like Christmas or the flu, the State of JavaScript survey comes back around every year. But unlike these, it’s something to actually look forward to! 另附：Stack Overflow - Developer Salaries in 2018.
AngularFire
https://github.com/angular/angularfire2#readme
The official library for Firebase and Angular.
react-dates
https://github.com/airbnb/react-dates
An easily internationalizable, accessible, mobile-friendly datepicker library for the web.
Paper
https://callstack.github.io/react-native-paper/
Material Design for React Native (Android & iOS).
Vuesax Frontend Vue Components
https://lusaxweb.github.io/vuesax/
Vuesax is a library of Vuejs components that facilitates front-end development and streamlines work with great visual quality.
nodebook
https://github.com/netgusto/nodebook
Nodebook - Minimalist Node REPL with web UI
Microjob
https://github.com/wilk/microjob
Microjob is a tiny wrapper for Node.js threads and is intended to perform heavy CPU loads using anonymous functions. So, Microjob treats Node.js threads as temporary working units: if you need to spawn a long-living thread, then you should use the default API.
Sqorn
https://github.com/lusakasa/sqorn
Sqorn is a Javascript library for building SQL queries. Ergonomic: Sqorn’s intuitive API might make you forget you’re building SQL. Composable: Build complex queries from simple parts. Chain, extend, and embed queries. Boilerplate free: Sqorn provides concise syntax for common CRUD operations. Fast: 10x faster than Knex.js and 200x faster than Squel.
WatermelonDB
https://github.com/Nozbe/WatermelonDB
Next-gen database for powerful React and React Native apps that scales to 10,000s of records and remains fast. Build powerful React and React Native apps that scale from hundreds to tens of thousands of records and remain fast.
Tiny and elegant HTTP client based on the browser Fetch API
https://github.com/sindresorhus/ky
Ky targets modern browsers. For older browsers, you will need to transpile and use a fetch polyfill. For Node.js, check out Got. 1 KB (minified & gzipped), one file, and no dependencies.
date-fns - Modern JavaScript date utility library
https://date-fns.org/
date-fns provides the most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js.
Create Websites and Landing Pages - Slides 4 Framework
https://designmodo.com/slides/
Impressive animated websites. Slides Review: Create Awesome Animated Websites
Web Design Museum
https://www.webdesignmuseum.org/
The museum exhibits over 900 carefully selected and sorted web sites that show web design trends between the years 1995 and 2005.
Magic Sandbox
https://www.magicsandbox.com/
Learn Kubernetes by doing.
Select Star SQL
https://selectstarsql.com
This is an interactive book which aims to be the best place on the internet for learning SQL. It is free of charge, free of ads and doesn’t require registration or downloads. It helps you learn by running queries against a real-world dataset to complete projects of consequence. It is not a mere reference page — it conveys a mental model for writing SQL.
An Intensive Introduction to Cryptography
https://intensecrypto.org/public/
These are lecture notes for lecture notes for an introductory but fast-paced undergraduate/beginning graduate course on cryptography. I am using these notes for Harvard CS 127. 另附：How to teach yourself hard things.
Py-Spy: A sampling profiler for Python programs
https://github.com/benfred/py-spy
Py-Spy is a sampling profiler for Python programs. It lets you visualize what your Python program is spending time on without restarting the program or modifying the code in any way. Py-Spy is extremely low overhead: it is written in Rust for speed and doesn’t run in the same process as the profiled Python program, nor does it interrupt the running program in any way. This means Py-Spy is safe to use against production Python code.
kitty
https://sw.kovidgoyal.net/kitty/
A cross-platform, fast, feature full, GPU based terminal emulator.
An Introduction to Modern CMake
https://cliutils.gitlab.io/modern-cmake/
CMake 3.1+, maybe even CMake 3.12+! It’s clean, powerful, and elegant, so you can spend most of your time coding, not adding lines to an unreadable, unmaintainable Make (Or CMake 2) file. And CMake 3.11+ is supposed to be significantly faster, as well!
Google Dataset Search
https://toolbox.google.com/datasetsearch
Dataset Search enables users to find datasets stored across thousands of repositories on the Web, making these datasets universally accessible and useful.
设计
The ultimate guide to proper use of animation in UX
https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9
Nowadays it’s hard to impress or even surprise with an interface animation. Well, in this article I won’t write anything new, I just want to collect all the main principles & rules in one place, so that other designers who want to start animating interfaces don’t have to search for additional information.
Data Visualization - Best Practices and Foundations
https://www.toptal.com/designers/data-visualization/data-visualization-best-practices
Good data visualization should communicate a data set clearly and effectively by using graphics. The best visualizations make it easy to comprehend data at a glance. They take complex information and break it down in a way that makes it simple for the target audience to understand and on which to base their decisions.
Build Better Requirements Documentation: Why, Who, and How
http://www.uxbooth.com/articles/build-better-requirements-documentation-why-who-and-how/
Great products are built from great plans. They require research, a comprehensive strategy, and roadmap. Defined and documented requirements are a key part of the process for the development of a new or complex system. To ensure the product meets users’ needs, it needs to be understood, captured, and agreed upon. Knowing what is required and communicating it in a clear way is a critical part of any new project.
Design with Difficult Data
https://alistapart.com/article/design-with-difficult-data
You’ve been asked to design a profile screen for a mobile or web app. It will need to include an avatar, a name, a job title, and a location. You fire up Sketch or Figma. Maybe you pull out your drafting pencil or head straight to markup and CSS. Regardless of your choice in tools, you’re probably going to end up with some placeholder data.
产品及其它
Stellarium Web Online Planetarium
https://stellarium-web.org/
虚拟天文馆的 Web 版，对观星有兴趣的可以玩玩。
The Tools I Use To Write Books
https://thorstenball.com/blog/2018/09/04/the-tools-i-use-to-write-books/
In the beginning, there is always a single text file, nothing more. It’s called ideas.md or book.md. It contains a list of thoughts and ideas, an outline. Everything else grows from there. It only makes sense that we start by talking about files. The Files Both of my books, Writing An Interpreter In Go and Writing A Compiler In Go, are written in GitHub Flavored Markdown (GFM).
腾讯的产品思维VS阿里的终局思维
https://mp.weixin.qq.com/s/SWwX9MP-IQ02k6T7thOISA
从成立到借壳上市，有赞用了5年多时间。这期间，它有好几次机会死掉，有很多的理由活不到今天，白鸦曾经说，每一次度过难关最关键都是靠团队的力量。谢天谢地，它活了下来。那么，这个在To B领域敢打敢拼的团队，关于企业文化、新老融合以及人才招聘等基本问题，创始人白鸦曾有过哪些思考？
硅谷的64岁，西二旗的35岁
https://mp.weixin.qq.com/s?__biz=MzIxMjE5MTE1Nw==&mid=2653195201&idx=1&sn=46129c15a0250c65760d4b288ccd3f89
不久前，现年64岁的 Bill Budge 老爷爷给谷歌V8引擎（V8是Chromium项目的JavaScript解释器。如果你现在阅读本文的工具是基于Chromium内核的微信版本，那么，你可能就在使用V8）提交了一些补丁。
– THE END –
