FEX 技术周刊 - 2020/05/25
本期看点
A Guide to Threat Modelling for Developers
https://martinfowler.com/articles/agile-threat-modelling.html#ExplainAndExplore
This article provides clear and simple steps to help teams that want to adopt threat modelling. Threat modelling is a risk-based approach to designing secure systems. It is based on identifying threats in order to develop mitigations to them. With cyber security risk increasing and enterprises becoming more aware of their liabilities, software development teams need effective ways to build security into software. Unfortunately, they often struggle to adopt threat modelling. Many methodologies require complicated, exhaustive upfront analysis which does not match how modern software teams work. Therefore, rather than stopping everything to create the perfect threat model, I encourage teams to start simple and grow from there.
The Third Age of JavaScript
https://www.swyx.io/writing/js-third-age/
2020 feels like the start of a new Age. If the First Age was about building out a language, and the Second Age was about users exploring and expanding the language, the Third Age is about clearing away legacy assumptions and collapsing layers of tooling.
Framer for Web is Here!
https://blog.prototypr.io/framer-for-web-is-here-65b7376a583d
And It’s Here to Kill Figma. The Framer Team is pulling up it’s pants. I sniffed something cooking when they announced a public beta for Framer for web… FRAMER FOR WEB? Yes, I don’t know how they did it, but their powerful set of tools, plugins and animation controls are now all on web.
Microsoft Build 2020
https://www.microsoft.com/en-us/build
https://new.qq.com/rain/a/20200523A04MVT00
Introducing .NET Multi-platform App UI https://devblogs.microsoft.com/dotnet/introducing-net-multi-platform-app-ui/
Microsoft: we were wrong about open source https://www.theverge.com/2020/5/18/21262103/microsoft-open-source-linux-history-wrong-statement
Introducing App Service Static Web App https://techcommunity.microsoft.com/t5/azure-app-service/introducing-app-service-static-web-apps/ba-p/1394451
Windows Package Manager Preview https://devblogs.microsoft.com/commandline/windows-package-manager-preview/
Windows Terminal 1.0 https://devblogs.microsoft.com/commandline/windows-terminal-1-0/
Microsoft is bringing Linux GUI apps to Windows 10 https://www.theverge.com/2020/5/19/21263377/microsoft-windows-10-linux-gui-apps-gpu-acceleration-wsl-features
Announcing Microsoft Lists https://techcommunity.microsoft.com/t5/microsoft-365-blog/announcing-microsoft-lists-your-smart-information-tracking-app/ba-p/1372233
OceanBase：蚂蚁爬上舞台
https://mp.weixin.qq.com/s/9EA_mHtkBpJ0prPK0hfgjA
2020年，阳振坤55岁。每天晚上下班回到家大概十点半，他会换一套衣服，在小区里快走半小时，大概3000米，如果下雨就换成室内走路，这是他坚持了22年的习惯。OceanBase 团队，从最初的一个人，到0.1版本时的20人，到1.0时的50人，到2.0时的100人，到如今所有人都在为 3.0 加班加点。十年难言顺遂，容颜渐老，但大多数人都未离队。“有什么东西支撑你们走下来吗？”我问。“集中式数据库的技术已经走到了尽头，我丝毫不怀疑在未来会有几家公司打破“分布式数据库”的技术瓶颈。不过，目前我们是世界上唯一的那个。如果说这么多年有东西在支撑着我，这就是理由。”阳振坤说。
深阅读
The Science Behind Web Vitals
https://blog.chromium.org/2020/05/the-science-behind-web-vitals.html
Web Vitals is an initiative by Google to help business owners, marketers and developers alike identify opportunities to improve user experiences. These signals are guided by extensive work by many researchers in the fields of human–computer interaction (HCI) and user experience (UX). But figuring out the right metrics and thresholds is not as simple as picking up a research paper and finding the answer.
The Need for Speed, 23 Years Later
https://www.nngroup.com/articles/the-need-for-speed/
Summary: In spite of an increase in Internet speed, webpage speeds have not improved over time. 另附：What’s New in Lighthouse 6.0, New metrics, Performance score update, new audits, and more.
Understanding the ECMAScript spec, part 4
https://v8.dev/blog/understanding-ecmascript-part-4
In this episode, we take a deeper look into cover grammars. They are a way to specify the grammar for syntactic constructs which look ambiguous at first. Again, we’ll skip the subscripts for [In, Yield, Await] for brevity, as they aren’t important for this blog post.
Figure It Out
https://alistapart.com/article/figure-it-out/
Color is, without a doubt, the visual element most often misunderstood and misused. While it’s nice to think that precise color values are interchangeable (setting aside any cultural associations), your perception doesn’t work that way. In the same way that certain frequencies on the radio come in clearer than others, certain colors do the same. You need to account for, or at least consider, the unevenness of color perception.
前端状态管理设计——优雅与妥协的艺术
https://cdc.tencent.com/2020/05/22/frontend-state-management-research/
本文主要是想表达，在状态管理这件事上，我们尝试一切，试图找到某种通用的优雅的解决方案，但是，在所有方案中，我们都不得不进行一些妥协。如果我们能够从历史的角度去观察，往往能够发现，世界上没有完美的事物，有一种说法“历史都是妥协出来的”，我们可以换一个好听的词，叫“博弈”，但是无论如何，我们都在追求着，每个人的追求不同，代码风格的优雅，代码量少，代码性能极致，代码明显没有bug……这些追求，驱动着我们不断探索和思考。
icejs：企业级前端研发框架的演进与实践
https://mp.weixin.qq.com/s/9nPwc0s93PZxOdM1ZllTCA
icejs 是淘系中后台项目组经过近三年的演进沉淀出的一个基于 React 的研发框架，目前已在淘系、飞猪等众多内部中后台业务项目里被广泛使用。从最初的工程构建工具演进成研发框架，这背后有着怎样的历程，以及新的框架又给我们提供了怎样的能力，这篇文章将会给大家进行分享。
阿里云开放平台微前端方案的沙箱实现
https://mp.weixin.qq.com/s/yXi1jYACrDAFqT7IKv3a5w
应用沙箱可能是微前端技术体系里面最有意思的部分。一般来说沙箱是微前端技术体系中不是必须要做的事情，因为如果规范做的足够好，是能够避免掉一些变量冲突读写，CSS 样式冲突的情况。但是如果你在一个足够大的体系中，总不能仅仅通过规范来保证应用的可靠性，还是需要技术手段去治理运行时的一些冲突问题，这个也是沙箱方案成为微前端技术体系的一部分原因。首先纵观各类技术方案，有一个大前提决定了这个沙箱如何做：最终微应用是 单实例 or 多实例 存在宿主应用中。这个直接决定了这个沙箱的复杂度和技术方案。另附：State of Microfrontends
积木Sketch Plugin：设计同学的贴心搭档
https://tech.meituan.com/2020/05/21/waimai-sketch-plugin.html
多年来，美团外卖一直在高速增长，但整个客户端的UI组件一直没有得到很好的统一。而在开发过程中因UI缺乏同一的标准导致各种问题凸显，积木插件Sketch Plugin应运而生。外卖技术团队将其打造成为UI一致性的抓手，最终帮助团队减少开发成本，提升了交付的质量，并为美团多个业务团队提供了很好的支持服务。本文主要介绍了Sketch Plugin项目的背景，并由浅入深地带领大家认识了Sketch Plugin项目，文中还详细解读了该技术的各种优缺点，同时还提供了详细的实践步骤和踩坑总结。
Good coders borrow, great coders steal
https://stackoverflow.blog/2020/05/20/good-coders-borrow-great-coders-steal/
Copying and pasting can be dangerous, but then again, so can many aspects of software development when done incautiously. In this post, I’ll take a look at what code copying actually means for software development, what good code theft means, and the pitfalls of copying badly.
The Modern Web
https://css-tricks.com/the-modern-web/
Do people reach for React-powered SPAs too much? Probably, but that’s not without reason. There is innovation there that draws people in. The question is, how can we improve it? From a front-of-the-front-end perspective, the fact that front-end frameworks like React encourage demand us write a front-end in components is compelling all by itself. There is optimism and pessimism in both posts. The ending sentences of both are starkly different.
npm v7 Series - Arborist Deep Dive
https://blog.npmjs.org/post/618653678433435649/npm-v7-series-arborist-deep-dive
@npmcli/arborist is the dependency tree manager for npm, new in npm v7. It provides facilities for doing nearly everything that npm does with package trees, and fully replaces large parts of the npm CLI codebase. Way back in the summer of 2019, I stumbled upon and wrote about an old bug buried deep in npm’s read-package-tree module. At the time, I was just trying to work out why npm install was so much slower than npm ci, and if there was anything that could be done about it. Stumbling across that weird old bug, and seeing the refactoring required to fix it, is what led eventually to Arborist.
The Unreasonable Effectiveness Of Declarative Programming
https://bollu.github.io/mathemagic/declarative/index.html
I show off minanim.js , a tiny, 100LoC, yet feature-complete library for building animations declaratively, and why someone would want to do things this way. Enjoy!
Stealing Secrets from Developers using Websockets
https://medium.com/@stestagg/stealing-secrets-from-developers-using-websockets-254f98d577a0
A couple of articles have hit the sites recently about websites abusing websocket functionality to port-scan user’s computers’. The reason these techniques work is because browsers allow websockets from public origins to open websockets connections to localhost without many protections. This got me thinking. I know that popular JavaScript frameworks use websockets in development to automatically reload pages when content changes. Could a malicious website eaves-drop on that traffic, and find out when developers are saving their code? The reality was slightly worse than I had thought.
The Great CoffeeScript to Typescript Migration of 2017
https://dropbox.tech/frontend/the-great-coffeescript-to-typescript-migration-of-2017
This post is longer than most. We wanted to capture the massive scope of migrating hundreds of thousands of lines of CoffeeScript to TypeScript. We share how we picked TypeScript in the first place, how we mapped out the migration, and when things didn’t go according to plan. The migration wrapped up in fall 2017. In the process we developed some pretty nifty tooling, and became one of the first companies to adopt TypeScript at scale.
What a typical 100% Serverless Architecture looks like in AWS!
https://medium.com/serverless-transformation/what-a-typical-100-serverless-architecture-looks-like-in-aws-40f252cd0ecb
What would such an architecture look like on a web project? At Theodo, we’re loving serverless and using the technology on more and more projects. Some services and patterns start to be used extensively. So we decided to share our architecture best-practices for a web application. If you are new to serverless and looking for a high level guide answering those questions, you’ve come to the right place! 另附：You want efficient application scaling? Go serverless!.
Data-Driven Algorithm Design
https://cacm.acm.org/magazines/2020/6/245164-data-driven-algorithm-design/fulltext
The best algorithm for a computational problem generally depends on the “relevant inputs,” a concept that depends on the application domain and often defies formal articulation. Although there is a large literature on empirical approaches to selecting the best algorithm for a given application domain, there has been surprisingly little theoretical analysis of the problem. We model the problem of identifying a good algorithm from data as a statistical learning problem. Our framework captures several state-of-the-art empirical and theoretical approaches to the problem, and our results identify conditions under which these approaches are guaranteed to perform well. We interpret our results in the contexts of learning greedy heuristics, instance feature-based algorithm selection, and parameter tuning in machine learning.
Three bugs in the Go MySQL Driver
https://github.blog/2020-05-20-three-bugs-in-the-go-mysql-driver/
Adding to this challenge, authzd is deployed to our Kubernetes clusters, where we’ve been experiencing issues with high latencies when opening new TCP connections, something that particularly affects the pooling of connections in the Go MySQL driver. One of the most dangerous lies that programmers tell themselves is that the network is reliable, because, well, most of the time the network is reliable. But when it gets slow or spotty, that’s when things start breaking, and we get to find out the underlying issues in the libraries we take for granted. Here’s what it took, from a MySQL point of view, to get authzd ready to serve all our production traffic while meeting our availability SLOs.
SQL Is Dead, Right?
https://thenewstack.io/sql-is-dead-right/
In 2020, SQL begins to think about its near half-century reign. It is a solid, relatively easy to use (and certainly, very familiar), reliable solution that just gets the job done. As the armies of analysts and database developers who know and love it will attest, SQL has been a groundbreaker in its field. After all, it’s the language of the relational databases that deliver the solutions that power every big enterprise and has done so for decades.
Designing tasteful CLIs: a case study
http://esr.ibiblio.org/?p=8697
Ian is working on a utility he calls “igor” intended to script interactions with GitLab, a major public forge site. Like many such sites, it has a sort of remote-procedure-call interface that allows you, as an alternative to clicky-dancing on the visible Web interface, to pass it JSON datagrams and get back responses that do useful things like – for example – publishing a release tarball of a project where GitLab users can easily find it.
Five Years of Rust
https://blog.rust-lang.org/2020/05/15/five-years-of-rust.html
With all that’s going on in the world you’d be forgiven for forgetting that as of today, it has been five years since we released 1.0! Rust has changed a lot these past five years, so we wanted to reflect back on all of our contributors’ work since the stabilization of the language.
新鲜货
Electron 9.0.0
https://www.electronjs.org/blog/electron-9-0
Electron 9.0.0 has been released! It includes upgrades to Chromium 83, V8 8.3, and Node.js 12.14. We’ve added several new API integrations for our spellchecker feature, enabled PDF viewer, and much more! 另附：Is there still a place for native desktop apps.
AI-powered code submissions
https://daniel.haxx.se/blog/2020/05/20/ai-powered-code-submissions/
On this day, the curl project received the first “AI-powered” submitted issues and pull-requests. They were submitted by MonocleAI, which is described as: MonocleAI, an AI bug detection and fixing platform where we use AI & ML techniques to learn from previous vulnerabilities to discover and fix future software defects before they cause software failures.
What Is Nix
https://engineering.shopify.com/blogs/engineering/what-is-nix
The most basic, fundamental idea behind Nix is this: Everything on your computer implicitly depends on a whole bunch of other things on your computer. All software exists in a graph of dependencies. Most of the time, this graph is implicit. Nix makes this graph explicit.
Announcing React Native for macOS and more
https://microsoft.github.io/react-native-windows/blog/2020/05/19/rn4mupdadates
We’re excited to announce our first preview release aligning with React Native 0.62! As a preview release, we will try our best not to make breaking changes, but still have a few bumps to sort out before we’re ready for release. You can now start trying out the 0.62-preview of React Native for Windows! A similar upgrade for React Native for macOS is in progress. Stay tuned for the next update!
A Complete Walkthrough to Using WebGL
https://xem.github.io/articles/webgl-guide.html
This guide is a complete, summarized WebGL tutorial, with tiny interactive demos in each chapter. It’s mainly inspired by the book WebGL Programming Guide and the websites Webgl2Fundamentals, LearnWebgl & MDN. Starting nearly from scratch, you’ll be able to create your own 3D interactive scenes without needing to use any library or framework: only vanilla JS & WebGL. My goal was to gather all the information and tricks about WebGL I found scattered everywhere, and present them in a short and helpful way. I hope you’ll enjoy it!
Defold
https://defold.com/
Defold is a free and open game engine with a developer-friendly license.
umi-request
https://github.com/umijs/umi-request/blob/master/README_zh-CN.md
网络请求库，基于 fetch 封装, 兼具 fetch 与 axios 的特点, 旨在为开发者提供一个统一的 api 调用方式, 简化使用, 并提供诸如缓存, 超时, 字符编码处理, 错误处理等常用功能.
React-Pivot
https://github.com/davidguttman/react-pivot
React-Pivot is a data-grid component with pivot-table-like functionality for data display, filtering, and exploration.
React Motion Layout
https://github.com/jeffersonlicet/react-motion-layout
Beautiful immersive React hero animations.
Revealjs V4.0
https://github.com/hakimel/reveal.js/releases/tag/4.0.0
reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create fully featured and beautiful presentations for free.
Howler.js
https://github.com/goldfire/howler.js
Javascript audio library for the modern web.
new.css
https://newcss.net/
new.css is a classless CSS framework to write modern websites using only HTML. It’s ~4.5kb. It’s perfect for: A dead-simple blog; Collecting your most used links; Making a simple “about me” site; Rendering markdown-generated HTML. 另附：Drop-in Minimal CSS.
XP.css
https://botoxparty.github.io/XP.css/
A design system for building faithful recreations of old UIs.
ws: a Node.js WebSocket library
https://github.com/websockets/ws
ws is a simple to use, blazing fast, and thoroughly tested WebSocket client and server implementation. Passes the quite extensive Autobahn test suite: server, client.
Discrete Mathematics - An Open Introduction, 3rd edition
http://discrete.openmathbooks.org/dmoi3.html
The text began as a set of lecture notes for the discrete mathematics course at the University of Northern Colorado. This course serves both as an introduction to topics in discrete math and as the “introduction to proofs” course for math majors. The course is usually taught with a large amount of student inquiry, and this text is written to help facilitate this. Four main topics are covered: counting, sequences, logic, and graph theory. Along the way, proofs are introduced, including proofs by contradiction, proofs by induction, and combinatorial proofs. 另附：Second Edition of A Programmer’s Introduction to Mathematics.
设计
Responsible Innovation: The Next Wave of Design Thinking
https://medium.com/microsoft-design/responsible-innovation-the-next-wave-of-design-thinking-86bc9e9a8ae8
Building your moral imagination to create a more ethical future.
Design education for the next generation
https://blog.marvelapp.com/design-education-next-generation/
How School of Art at California State University Long Beach use Marvel to bring students up to speed with real industry tools.
Can Data Visualization Improve The Mobile Web Experience?
https://www.smashingmagazine.com/2020/05/data-visualization-mobile-web-experience/
Since more and more web traffic comes from mobile users, our websites need to be in the best position to serve them. The easiest thing to do would be to remove unnecessary content from the site. However, it may not always be the best solution. In this article, Suzanne Scacca proposes some ways to turn essential content into graphics to conserve space, create a more engaging UI and preserve the overall integrity of your content on mobile.
Modern Touch-Friendly Design
https://addyosmani.com/blog/touch-friendly-design/
These are touch-friendly guidelines I strive to follow for my apps and am happy to recommend to others. I’ve visualized these recommendations for YouTube and Twitter’s mobile sites.
产品及其它
Architecture Jams: a Collaborative Way of Designing Software
https://blog.pragmaticengineer.com/software-architecture-jams/
Most successful projects I’ve seen from rebuilding Uber’s payments systems to building Skype for the Web all started as an architecture jam. Of course, eventually these massive projects broke up to multiple streams, with their own architecture jams. Some were more, and some less efficient. Here are approaches I’ve seen good architecture jams follow, over the years.
It’s Time to Get Back Into RSS
https://danielmiessler.com/blog/its-time-to-get-back-into-rss/
We all mourned when Reader died and took RSS with it, but it’s time to return to what made it great. A lot of people who were on the internet in the early 2000’s remember something called RSS. It stands for really simple syndication, and it allowed content creators to publish updates to the world in a well-understood format. The idea—which seems strange to type out—is that millions of people in the world could create and publish ideas, thoughts, and content…and then people who enjoyed that content would collect sources into a reader, which was called, well, an RSS Reader.
玉伯：做一个简单自由有爱的技术人
https://segmentfault.com/a/1190000022676508
前端工程师如何成长？如何管理前端团队？如何打造团队文化？近日，蚂蚁研究员兼体验技术部负责人玉伯，在蚂蚁内部技术人的成长公开课上，分享了他的人生愿景和心路历程。
如果失去华为，中国会怎样
https://mp.weixin.qq.com/s/-eYKZ25-yUZ72n_ZQBcwYg
华为的问题，不是一个简单的企业问题，美国已经将华为的问题，上升到了政治和国家安全的角度，这背后一定是有战略性考量的，中国一定要以同等的支持，来帮助华为脱困，这关系到能否保住中国改革开放成果的问题，也可以说关系到中国国运的问题。另附：任正非：我的精神导师是毛泽东。
对数据可视化有兴趣的可以阅读由 AntV 带来的 墨者修齐 2020-05-24 Happy Data、数据匿名化的五种方法、星空彩绘诺贝尔、城市建筑档案的可视化
– THE END —
