FEX 技术周刊 - 2019/01/28
深阅读
The TypeScript Tax - A Cost vs Benefit Analysis
https://medium.com/javascript-scene/the-typescript-tax-132ff4cb175b
As TypeScript stands, I would definitely use it again in small open-source libraries, primarily to make life easier for other TypeScript users. But I will not use the current version of TypeScript in my next large scale application, because the larger the project is, the more the costs of using TypeScript compound.
The Great Divide
https://css-tricks.com/the-great-divide/
Two front-end developers are sitting at a bar. They have nothing to talk about. Let’s say there is a divide happening in front-end development. I feel it, but it’s not just in my bones. Based on an awful lot of written developer sentiment, interviews Dave Rupert and I have done on ShopTalk, and in-person discussion, it’s, as they say… a thing. The divide is between people who self-identify as a (or have the job title of) front-end developer, yet have divergent skill sets.
Yarn’s Future - v2 and beyond
https://github.com/yarnpkg/yarn/issues/6953
This thread aims to expose our roadmap for the next major Yarn release, and let you know about significant changes that we plan to make regarding Yarn’s design. The codename for these changes is Berry - that’s how we’ll refer to it during the next few months.
Introducing Ionic 4: Ionic for Everyone
https://blog.ionicframework.com/introducing-ionic-4-ionic-for-everyone/
Ionic 4 represents the culmination of more than two years of research and hard work transforming Ionic from “mobile for Angular” into a powerful UI Design System and app framework for every web developer in the world. There are so many things to talk about with this release, but first I’d like to talk about how we got here.
前端性能优化の备忘录 2019 版
https://www.yuque.com/w3ctech/front-end-performance-checklist-2019
在（网站）项目刚启动时，我们就应该（对网站）采取（一些有助于网站）性能提升的手段，并且该过程一直要持续到网站的最终版本发布上线。在这段时间里，假设我们需要牢记这些优化手段，并且希望针对这些优化手段做一下总结，内心 OS：天啦噜，这总结应该长啥样呀？往下阅读，你就会发现一篇非常客观的年度总结：前端性能优化の备忘录 2019 版，今年这一版的内容讲的是对一些问题的后续跟进。比如，如何让网站的响应速度更快、交互体验更顺畅以及如何做才不会让网站耗尽用户的带宽。
程序员的成长路线Remix
https://mp.weixin.qq.com/s?__biz=MjM5MzYzMzkyMQ==&mid=2649826412&idx=1&sn=47571b15bd3a2990e540c1059bd1bae3
前面两篇程序员的成长路线文章比较受欢迎，决定再重新整合写一篇，希望自己和大家能够一起在这条路上成长的更好，这篇文章主要讲程序员的硬实力的能力成长，软实力那些就不多讲了。
[译]使用Flutter一年后，这是我得到的经验
https://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2651013049&idx=2&sn=02d3be0c89406ba89d88ec6d4c093209
在过去的一年里，我是如何使用 Flutter 的呢？我做了以下这些事情：使用 Flutter 重写一款已经发布到 App Store 的 iOS 应用程序；开发了一个 Flutter 免费速成课程，录制 5 个多小时的教学视频内容；使用 Flutter 开发一些小型尚未发布的应用程序。以下是在过去一年中，我通过使用 Flutter 学到的东西。
HTML5 Input Types: Where Are They Now?
https://www.smashingmagazine.com/2019/01/html5-input-types/
HTML5 introduced thirteen new types of form input, adding significantly to the number of different fields web designers and developers could add to our forms. These new types all require browsers to support them, and take-up has been slower than some of us would have liked. What is the state of those field types in 2019? Which can we use, and which should still be avoided?
React 16.6.0 Goodies
https://css-tricks.com/react-16-6-0-goodies/
We’re going to cover what I consider the best of those new goodies with examples of how we can put them to use in our work. 另附：Understanding Fragments in React、Why Isn’t X a Hook?.
Why I don’t use React-Router
https://medium.com/@bgdam/why-i-dont-use-react-router-e71b87cef591
React-Router is the most popular routing solution out there for React applications — so much so, that a lot of developers think of it as the ‘Official Routing Solution’ for React. While I’m sure React-Router works quite well for a lot of people, I’ve always disliked working with React-Router. I’ll try to summarize my reasons in this article.
Interactive Text Animation with React Hooks
https://blog.bitsrc.io/interactive-text-animation-with-react-hooks-f89820af8301
How to animate headings that respond to mouse movements using React Hooks, CSS Modules, CSS variables and clip-path.
We’re making Tumblr more accessible!
https://engineering.tumblr.com/post/182191949110/were-making-tumblr-more-accessible
If you’re an avid user of Tumblr on mobile web, then you might’ve noticed some improvements we made. Bigger font sizes and higher contrast text? Your screen reader actually reads what you hope it would? You’ve guessed it, we’re making Tumblr ✨accessible✨.
storytelling with data - new year, new tools!
http://www.storytellingwithdata.com/blog/2019/1/24/new-year-new-tools
We’re excited to see the variety of tools exemplified here. These range from the familiar go-to’s (Tableau, Excel, PowerBI) and also some that may be less widely known throughout the broader community (Datawrapper, Flourish, RAWGraphs). Interested in seeing a specific tool? We’ve organized the submissions alphabetically by tool and encourage you to scroll through the entire post to familiarize yourself with the wide array available for visualizing data.
What is tree shaking and how does it work?
https://bitsofco.de/what-is-tree-shaking/
Tree shaking is a method of optimising our code bundles by eliminating any code from the final file that isn’t actually being used.
Node.js multithreading: What are Worker Threads and why do they matter?
https://blog.logrocket.com/node-js-multithreading-what-are-worker-threads-and-why-do-they-matter-48ab102f8b10
What exactly is this new worker thread module and why do we need it? In this post, we will talk about the historical reasons concurrency is implemented in JavaScript and Node.js, the problems we might find, current solutions and the future of parallel processing with worker threads. 另附：Node.js: The Road to Workers.
Introducing The Component-Based API
https://www.smashingmagazine.com/2019/01/introducing-component-based-api/
In the world of APIs, GraphQL has lately overshadowed REST due to its ability to query and retrieve all required data in a single request. In this article, I will describe a different type of API, based around components, which takes a step further the amount of data it can fetch from a single request.
Working with GraphQL using Vanilla JS
https://medium.com/walmartlabs/writing-a-graphql-client-in-vanilla-js-d2a09aee7c6c
Writing a light GraphQL client can be made simpler using vanilla JavaScript features like fetch, promises and string templates. Some example scenarios would be building a thin client with minimal dependencies or building out a prototype solution. Let’s build a simple form that can communicate with a GraphQL API and search titles of books. We will only use HTML5, CSS3 and ES6 JavaScript.
Developing Microservices with Behavior Driven Development and Interface Oriented Design
https://www.infoq.com/articles/microservices-bdd-interface-oriented
With Behavior Driven Development (BDD), a service’s functionality is described by tests that concentrate on the operations to be performed rather than the syntax of these operations such as JSON or XML. Interface Oriented Design (IOD) includes other contractual obligations of a microservice, such as limitations on resource usage, throughput, and error reporting. Together BDD and IOD help describe a service’s behavior so that consumers can easily understand and rely upon it.
Programming paradigms for dummies: what every programmer should know
https://blog.acolyer.org/2019/01/25/programming-paradigms-for-dummies-what-every-programmer-should-know/
Programming paradigms are approaches based on a mathematical theory or particular set of principles, each paradigm supporting a set of concepts. Van Roy is a believer in multi-paradigm languages: solving a programming problem requires choosing the right concepts, and many problems require different sets of concepts for different parts.
Our Software Dependency Problem
https://research.swtch.com/deps
Software dependencies carry with them serious risks that are too often overlooked. The shift to easy, fine-grained software reuse has happened so quickly that we do not yet understand the best practices for choosing and using dependencies effectively, or even for deciding when they are appropriate and when not. My purpose in writing this article is to raise awareness of the risks and encourage more investigation of solutions.
The scalable fabric behind our growing data center network
https://blogs.dropbox.com/tech/2019/01/the-scalable-fabric-behind-our-growing-data-center-network/
Dropbox needs its underlying network infrastructure to be reliable, high-performing, cost-effective, and truly scalable. In previous posts we described how the edge network was designed to improve user performance, and how the supporting multi-terabit backbone network spans continents to interconnect edge PoPs and multiple data centers. In this post we describe how we evolved the Dropbox data center network from the legacy chassis based four-post architecture to a scalable multi-tier, quad-plane fabric.
Managing Distributed Tasks with Helix Task Framework
https://engineering.linkedin.com/blog/2019/01/managing-distributed-tasks-with-helix-task-framework
Stateless tasks are widely used for serving large-scale data processing systems. Lots of requests were made by systems, which rely on Apache Helix, for a stateless task management feature to be added to Apache Helix. Recently, our team decided to explore new ways to manage stateless tasks, in addition to our ongoing work to support Helix. The result of these efforts is Helix Task Framework, an engine that powers distributed execution of stateless tasks. In this post, we’ll introduce Helix Task Framework, which is available in Helix as an advanced feature.
HTTP/3: From root to tip
https://blog.cloudflare.com/http-3-from-root-to-tip/
In this blog post we’ll explore the history behind some of HTTP/3’s previous names and present the motivation behind the most recent name change. We’ll go back to the early days of HTTP and touch on all the good work that has happened along the way.
Network protocols for anyone who knows a programming language
https://www.destroyallsoftware.com/compendium/network-protocols?share_key=97d3ba4c24d21147
The network stack does several seemingly-impossible things. It does reliable transmission over our unreliable networks, usually without any detectable hiccups. It adapts smoothly to network congestion. It provides addressing to billions of active nodes. It routes packets around damaged network infrastructure, reassembling them in the correct order on the other side even if they arrived out of order. It accommodates esoteric analog hardware needs, like balancing the charge on the two ends of an Ethernet cable. This all works so well that users never hear of it, and even most programmers don’t know how it works.
The Future Will Be Documented
https://www.mongodb.com/blog/post/the-future-will-be-documented
https://www.mongodb.com/blog/post/documents-are-everywhere
MongoDB was born out of frustration from using relational databases not designed for today’s modern applications. After 40 years of no real alternatives, we pioneered a new way to work with data – the MongoDB document model and the associated query language.
It’s Time to Move on from Two Phase Commit
http://dbmsmusings.blogspot.com/2019/01/its-time-to-move-on-from-two-phase.html
In this post, we will first describe 2PC: how it works and what problems it solves. Then, we will show some major issues with 2PC and how modern systems attempt to get around these issues. Unfortunately, these attempted solutions cause other problems to emerge. In the end, I will make the case that the next generation of distributed systems should avoid 2PC, and how this is possible.
The Internals of PostgreSQL
http://www.interdb.jp/pg/index.html
In this document, the internals of PostgreSQL for database administrators and system developers are described. PostgreSQL is an open source multi-purpose relational database system which is widely used throughout the world. It is one huge system with the integrated subsystems, each of which has a particular complex feature and works with each other cooperatively. Although understanding of the internal mechanism is crucial for both administration and integration using PostgreSQL, its hugeness and complexity prevent it. The main purposes of this document are to explain how each subsystem works, and to provide the whole picture of PostgreSQL.
The Practical Linux Hardening Guide
https://github.com/trimstray/the-practical-linux-hardening-guide
This guide details the planning and the tools involved in creating a secure Linux production systems - work in progress.
新鲜货
What’s New In DevTools (Chrome 73)
https://developers.google.com/web/updates/2019/01/devtools
Use Logpoints to log messages to the Console without cluttering up your code with console.log() calls. When inspecting a node, DevTools now shows an expanded tooltip containing commonly important style properties like font, margin, and padding. Code coverage data can now be exported as a JSON file. The Sources and Network panels now support code folding. 另附：What the Firefox DevTools Team Did in 2018
How to make VR with the web, a new video series
https://hacks.mozilla.org/2019/01/how-to-make-vr-with-the-web-video-series/
In this new YouTube series, How to make a virtual reality project in your browser with three.js and WebVR, I’ll take you through building an interactive birthday card in seven short tutorials, complete with code and examples to get you started. The whole series clocks in under 60 minutes. We begin by getting a basic cube on the screen, add some nice 3D models, set up lights and navigation, then finally add music.
Electron v5.0.0 Timeline
https://electronjs.org/blog/electron-5-0-timeline
For the first time ever, Electron is excited to publicize our release schedule starting with v5.0.0. This is our first step in having a public, long-term timeline.
Jest 24: Refreshing, Polished, TypeScript-friendly
https://jestjs.io/blog/2019/01/25/jest-24-refreshing-polished-typescript-friendly.html
It’s been 4 months since the last minor release, and 8 months since Jest 23, so this upgrade is a big one, with something for everyone! Highlights include built-in support for TypeScript by upgrading the Jest internals to Babel 7, fixing some long-standing issues with missing console output and performance issues when computing large diffs, and a brand new sparkling website. ✨
Prettier 1.16: HTML improvements and better CRLF handling
https://prettier.io/blog/2019/01/20/1.16.0.html
This release improves HTML formatting and contains better CRLF handling, new syntax features, and fixes several bugs.
The State of the Octoverse: Machine Learning
https://github.blog/2019-01-24-the-state-of-the-octoverse-machine-learning/
We pulled data on contributions between January 1, 2018 and December 31, 2018. Contributions could include pushing code, opening an issue or pull request, commenting on an issue or pull request, or reviewing a pull request. For the most imported packages, we used data from the dependency graph, which includes all public repositories and any private repositories that have opted in to the dependency graph. 另附： Github Release Radar · December 2018.
W3C Strategic Highlights - Future Web Standards
https://www.w3.org/blog/2019/01/w3c-strategic-highlights-future-web-standards/
W3C has a variety of mechanisms for listening to what the community thinks could become good future Web standards. There are lots of good ideas. The W3C strategy team has been identifying promising topics and invites public participation.
Twitter migrates data to Google Cloud to keep the world tweeting
https://cloud.google.com/twitter/
To determine if a migration of this scale would even be possible, Twitter had a rigorous cloud evaluation process. After months of in-depth analysis, Twitter engineers found Google Cloud to be the best fit for Twitter’s needs because it provided flexibility in storage and compute scaling in both dimensions independently while also providing access to a high-speed network.
AMD Open Source Driver for Vulkan
https://github.com/GPUOpen-Drivers/AMDVLK
The AMD Open Source Driver for Vulkan® is an open-source Vulkan driver for Radeon™ graphics adapters on Linux®. It is built on top of AMD’s Platform Abstraction Library (PAL), a shared component that is designed to encapsulate certain hardware and OS-specific programming details for many of AMD’s 3D and compute drivers. Leveraging PAL can help provide a consistent experience across platforms, including support for recently released GPUs and compatibility with AMD developer tools.
Remote Code Execution in apt/apt-get
https://justi.cz/security/2019/01/22/apt-rce.html
I found a vulnerability in apt that allows a network man-in-the-middle (or a malicious package mirror) to execute arbitrary code as root on a machine installing any package. The bug has been fixed in the latest versions of apt. If you’re worried about being exploited during the update process, you can protect yourself by disabling HTTP redirects while you update.
RE:DOM
https://github.com/redom/redom
RE:DOM is a tiny (2 KB) UI library by Juha Lindstedt and contributors, which adds some useful helpers to create DOM elements and keeping them in sync with the data. Because RE:DOM is so close to the metal and doesn’t use virtual dom, it’s actually faster and uses less memory than almost all virtual dom based libraries, including React.
Hotkey Behavior
https://github.com/github/hotkey
Trigger a action on element when keyboard hotkey is pressed. Automatically binds hotkeys to any link with a data-hotkey attribute set. Multiple hotkeys are separated by a ,. Key combinations are separated by a +, and key sequences are separated by a space.
Code Galaxies Visualization
https://anvaka.github.io/pm/
Software Galaxies visualizes dependencies among most popular package managers. Every star in this visualization represents a package.
Fast Node Manager (fnm)
https://github.com/Schniz/fnm
Fast and simple Node.js version manager, built in ReasonML.
Release It!
https://github.com/webpro/release-it
Automate the tedious tasks of software releases. Happily release and publish your Git repositories, npm packages, GitHub & GitLab releases, changelogs, and much more!
websocketd
https://github.com/joewalnes/websocketd
Full duplex messaging between web browsers and servers**
PouchDB
https://pouchdb.com/
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. It enables applications to store data locally while offline, then synchronize it with CouchDB and compatible servers when the application is back online, keeping the user’s data in sync no matter where they next login.
GitHub Windows Edition: User style transforming GitHub into Windows 9x
https://github.com/Athari/CssGitHubWindows
浓浓的复古风，另附：Windows 98 Icons are Great，看来 Windows 98 是很多人的记忆中的“味道”。
设计
Ant Design 情感化设计
https://zhuanlan.zhihu.com/p/55364776
对企业级产品而言，行为水平的设计是至关重要的，从没有人反对过可用性、易用性。在此基础上，我们再综合去考虑本能层和反思层的设计，才能为产品创造深入人心的体验。这正是我们理解的企业级产品情感化设计。
Rethinking UX for AI-driven Alerting
https://www.datadoghq.com/blog/engineering/rethinking-ux-for-ai-driven-alerting/
I’ve been designing monitoring tools for almost 10 years now, and in that time a lot has changed. The infrastructure we build software on, for example, has been transformed multiple times—moving first from physical hosts to VMs in the cloud, then from VMs to containers, and now from containers to serverless and cloud service-based infrastructure. With the introduction of advanced statistical methods into alerting I think we’re seeing the first major transformation in alerting UX, so I want to unpack it and talk about where things are going.
7 Google Web Design Resources to Improve your UX
https://medium.com/google-design/7-google-web-design-resources-to-improve-your-ux-648c9ff28b8e
This list of resources will help you and your team squeeze as much value out of your web development investment as possible.
Top Four Principles of Human-Centred Design
https://blog.marvelapp.com/top-four-principles-human-centred-design/
Focus on the people. Find the right problem. Think of everything as a system. Always test your design decisions.
9 Product Design Do’s and Don’ts
https://uxdesign.cc/9-product-design-dos-and-don-ts-fcd1dce484a5
Sometimes you can do all the right things and still get to the wrong place. The key is to do the right things the right way.
An Analysis of 24 Creative 404 Error Pages
https://blog.prototypr.io/an-analysis-of-24-creative-404-error-pages-7be770535a8f
Here are 24 examples of 404 error pages that will help you understand how to design a user-friendly error page.
产品及其它
AlphaStar: Mastering the Real-Time Strategy Game StarCraft II
https://deepmind.com/blog/alphastar-mastering-real-time-strategy-game-starcraft-ii/
we introduce our StarCraft II program AlphaStar, the first Artificial Intelligence to defeat a top professional player. In a series of test matches held on 19 December, AlphaStar decisively beat Team Liquid’s Grzegorz “MaNa” Komincz, one of the world’s strongest professional StarCraft players, 5-0, following a successful benchmark match against his team-mate Dario “TLO” Wünsch. The matches took place under professional match conditions on a competitive ladder map and without any game restrictions. 另附：星际2人机大战：职业高手首次被AI击败.
金山办公葛珂：如何用 30 年的时间实现一个最初的想法
https://www.geekpark.net/news/237669
WPS 却走过了 30 年时间，从桌面 PC 到智能手机时代，WPS 不仅是见证中国软件发展史兴衰的重要一员，还成为中国办公软件领域的排头兵。当从 PC 时代走到智能手机时代，WPS 又很早开始打造移动版本，这一脚步为其随后的发展扩展了新的道路，并收获了上亿用户的认可。「可怕的不是变化可能伴随短期困境，而是拒绝改变还缄默无声。」葛珂曾担心 WPS 前进的道路，但走到今天，这家公司找到了属于自己的步子，也创造了不平凡的结果。而在这条路上究竟有哪些不为人知的关键词？办公软件领域这三十年的变化又是如何？在 WPS 看来一家有历史积累的公司又如何走向未来？三十岁的 WPS 也许有着自己的理解。
白鸦 - 聊聊 enjoy
https://mp.weixin.qq.com/s?__biz=MzA4NTUyMTkwMw==&mid=2453373628&idx=1&sn=ba097012eadda5e45a1a4e78a9c4a0cf
了解一下有赞的企业文化，可以和 有赞宣布“996工作制” 参照着看。
– THE END –
