FEX 技术周刊 - 2020/06/01

本期看点

面向 Model 编程的前端架构设计
https://zhuanlan.zhihu.com/p/144157268
这篇文章将简略地介绍我们当前的无线前端架构设计及其演进之路。主要内容分成几个部分：1）当前的前端方案及其解决的问题; 2）现在面对的新挑战; 3）我们的前端方案设计和选择。希望我们的经验能带给大家一些启发。另附：我来聊聊模型驱动的前端开发.

Snowpack 2.0: A Build System for the Modern Web
https://www.snowpack.dev/posts/2020-05-26-snowpack-2-0-release/
Snowpack 2.0 is a build system designed for this new era of web development. Snowpack removes the bundler from your dev environment, leveraging native ES Module (ESM) support to serve built files directly to the browser. This isn’t just a faster tool, it’s a new approach to web build systems.

Software will eat software in a remote-first world
https://themargins.substack.com/p/software-will-eat-software-in-a-remote
[译]软件吃软件，编程工作会越来越多吗？ http://www.ruanyifeng.com/blog/2020/05/will-programmers-increase.html
This topic is really too big to fit in a single newsletter, and we are already at more than a thousand words. On the one hand, I do welcome these changes. I fundamentally believe that I’ve lucked into the technology industry, and many of the opportunities I’ve exploited were available to me because only I was in the right room at the right time, a few times quite literally so.

Rediscovering the Small Web
https://neustadt.fr/essays/the-small-web/
Most websites today are built like commercial products by professionals and marketers, optimised to draw the largest audience, generate engagement and ‘convert’. But there is also a smaller, less-visible web designed by regular people to simply to share their interests and hobbies with the world. A web that is unpolished, often quirky but often also fun, creative and interesting.

The Web We Lost: Volume One
http://www.zeldman.com/2020/05/29/the-web-we-lost-volume-one/
Idon’t miss Flash but I sure miss this level of creativity and experimentation on the web. As today’s “The Web We’ve Lost” exercise for designers, please take a look back at Matt Owens’s historic Volume One project—outstanding design work Matt created in Flash during the 1990s and early 2000s, now memorialized in screenshots.

深阅读

The Process of Making Vue 3
https://increment.com/frontend/making-vue-3/
Lessons from rewriting the next major version of Vue.js.

High-performance garbage collection for C++
https://v8.dev/blog/high-performance-cpp-gc
This post is the first in a series of Oilpan blog posts which will provide an overview of the core principles of Oilpan and its C++ APIs. For this post we will cover some of the supported features, explain how they interact with various subsystems of the garbage collector, and do a deep dive into concurrently reclaiming objects in the sweeper.

A first look at records and tuples in JavaScript
https://2ality.com/2020/05/records-tuples-first-look.html
In this blog post, we take a first look at the ECMAScript proposal “Record & Tuple” (by Robin Ricard and Rick Button). This proposal adds two kinds of compound primitive values to JavaScript: Records, immutable compared-by-value versions of plain objects. Tuples, immutable compared-by-value versions of Arrays.

Today’s JavaScript, From An Outsider’s Perspective
http://lea.verou.me/2020/05/todays-javascript-from-an-outsiders-perspective/
Lea is a JavaScript expert, but she was trying to help a computer scientist friend work with JS and commented on the frustrations along the way.

RecoilJS is meant to rock your React world
https://mariosfakiolas.com/blog/recoiljs-is-meant-to-rock-your-react-world/
RecoilJS is a state management library for React which was made publicly available recently by Facebook . The truth is that they have been using it for some time internally, so they finally decided to open-source it 😍 In my humble opinion RecoilJS makes React hell stronger. Let’s see why.

Watched All 27 React Europe Talks So You Don’t Have To
https://www.telerik.com/blogs/i-watched-all-27-react-europe-talks-so-you-dont-have-to
Ok, you still might want to watch the talks—they were quite good! But we’re all busy people, so I thought you all might appreciate my notes from all twenty-seven React Europe talks. The notes should help you quickly get a sense of what each talk covered, so you can decide if you want to watch the full video or not. 另附：Node.js Turns 11 Years Old.

Responsive Web Design Turns Ten
https://ethanmarcotte.com/wrote/responsive-design-at-10/
Ten years ago the phrase ‘responsive web design’ was first coined. This guiding blog post, outlining the three ‘ingredients’ needed (fluid grids, flexible images, and media queries), soon followed. Here, Ethan takes a look back at just how responsive design came to be.

Godot Engine - Godot Editor running in a web browser
https://godotengine.org/article/godot-editor-running-web-browser
Godot Engine - Free and open source 2D and 3D game engine. In the last few months, thanks to the great sponsorship of Mozilla I’ve been working on a big surprise for Godot 4.0, namely making the editor available as an HTML5 application. This DOES NOT mean that we will move completely to the Web like other engines did. It will only be provided as a complementary option to the native editor, as a way to lower the entry barrier. Let me explain further.

Why is Kubernetes getting so popular?
https://stackoverflow.blog/2020/05/29/why-kubernetes-getting-so-popular/
To try to understand the popularity of Kubernetes, let’s consider some questions. When was the last time developers could agree on the way to deploy production applications? How many developers do you know who run tools as is out of the box? How many cloud operations engineers today don’t understand how applications work? We’ll explore the answers in this article.

A Jepsen Analysis of MongoDB 4.2.6
http://jepsen.io/analyses/mongodb-4.2.6
This report represents a brief investigation relative to most Jepsen reports; we have not investigated pauses, crashes, or clock skew in depth; nor have we introduced membership changes or shard reallocation. Disk and filesystem-related issues could also prove fruitful. 另附：Do You Still Use MongoDB?.

What blocks faster code releases? It starts with testing
https://about.gitlab.com/blog/2020/05/29/what-blocks-faster-code-release/
Our 2020 DevSecOps Survey found testing was the number one reason for release delays, but planning and code reviews were also challenges. Here’s what you need to know.

新鲜货

Marketing for Engineers
https://github.com/LisaDziuba/Marketing-for-Engineers
GitHub 热榜：乌克兰小姐姐写给工程师看的《市场修炼手册》 https://zhuanlan.zhihu.com/p/144565273
It’s a hand-picked collection of resources for solving practical marketing tasks, such as: finding beta testers, growing first user base, advertising project without a budget, scaling marketing activities for building constant revenue streams. We faced these question when we made our first product (a tool for iOS engineers). It took us almost 2 years to learn how to market our project. 😤 During this time we read, tried and bookmarked many useful things: articles, videos, spreadsheets, podcasts & tools. These resources helped us a lot! Please, learn, adapt and test awesome marketing hacks from our collection & experience. Good luck!

Code in the browser with GitHub Classroom
https://github.blog/2020-05-26-code-in-the-browser-with-github-classroom/ A familiar scenario for teachers: students need to run your starter code for an assignment, but software conflicts and varying devices get in the way. Whether they’re in your classroom or working from their homes, you want all of your students to successfully complete their assignments, but first, you’ll have to help them navigate their different devices and setups. 另附：How to make small changes using GitLab’s Web IDE.

The Best GraphQL IDEs and Their Features
https://retool.com/blog/the-best-graphql-ides-and-their-features/
To support the growing number of developers building APIs, new integrated development environments (IDEs), tools, and resources have been developed. But which one is the best for you? Below, we review the best GraphQL IDEs available.

The 2020 Developer Survey results are here!
https://stackoverflow.blog/2020/05/27/2020-stack-overflow-developer-survey-results/
The results of this survey reflect the opinions and experiences of nearly 65,000 developers. It’s important to note, however, that the survey was conducted in February, before COVID-19 had been declared a global pandemic, and countries across the world had gone into lockdown. We’re eager to share with the public some of the interesting statistics and changes reflected in this data, but we also understand that it’s important to be humble and realistic: a lot of the answers developers gave might look very different if the same survey were conducted today.

web.dev LIVE: A digital event over three days and three time zones
https://blog.chromium.org/2020/05/webdev-live-digital-event-over-three.html
we’re planning a three day digital event - web.dev LIVE - where web developers can come together, from the comfort of their homes to hear about the latest, most helpful updates to the platform, learn modern web techniques and to connect with other developers — including those who are pushing the community forward and have been on the front line with COVID related work. The event will take place from June 30th to July 2nd and will include short three-hour content streams (in English) hosted on web.dev/live.

Homebrew 2.3.0
https://brew.sh/2020/05/29/homebrew-2.3.0/
he most significant changes since 2.2.0 are GitHub Actions CI usage, fetching resources before installation, Docker image improvements and the deprecation of brew install from URLs.

Android Studio 4.0 Released
https://android-developers.googleblog.com/2020/05/android-studio-4.html
Lots of new stuff in the latest release of the official IDE for Android development, including a new Motion Editor to help bring your apps to life, a Build Analyzer to investigate causes for slower build times, and Java 8 language APIs you can use regardless of your app’s minimum API level.

Strapi 3.0 Released: An Open Source Headless Node.js CMS
https://strapi.io/blog/strapi-stable-community-edition
5 years after the first commit, 3 years after the launch of the company, we’re incredibly excited to announce the general availability of Strapi Community Edition. This stable version is a huge milestone and marks the beginning of a new and exciting chapter for the Strapi project and open source community.

Pug 3.0.0
https://medium.com/rollingversions/pug-3-0-0-2897d6dec294
Pug is a high-performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers.

React Animation Libraries for 2020
https://blog.bitsrc.io/react-animation-libraries-for-2020-437a21c73fed
Recommended React animation libraries that take care of page transitions, scroll events, entering and exiting components, etc.

React Cosmos - A dev environment for building scalable, high-quality user interfaces
https://github.com/react-cosmos/react-cosmos
React Cosmos is intended to bridge the gap between UI designers and developers by creating a single repository for UI components.

number-precision
https://github.com/nefe/number-precision
Perform addition, subtraction, multiplication and division operations precisely using javascript.

Fluor.js - Sprinkle interactivity on your design
https://fluorjs.github.io/
Fluor.js is a tiny JavaScript library that provides you with a high-level language to easily add interactions and effects to your websites. It is great for prototypes, UI and UX research and for all websites that do not require the cumbersome machinery of a full-fledged framework. It is inspired by uilang and Alpine.js, has no dependencies and can be added to any page with a single line of HTML.

Perspective
https://github.com/finos/perspective
Perspective is an interactive visualization component for large, real-time datasets. Originally developed for J.P. Morgan’s trading business, Perspective makes it simple to build real-time & user configurable analytics entirely in the browser, or in concert with Python and/or Jupyterlab. Use it to create reports, dashboards, notebooks and applications, with static data or streaming updates via Apache Arrow.

LATEX.css
https://latex.now.sh/
This almost class-less CSS library turns your HTML document into a website that looks like a LATEX document. Write semantic HTML, add <link rel="stylesheet" href="https://latex.now.sh/style.css"> to the <head> of your project and you are good to go. The source code can be found on GitHub at https://github.com/vincentdoerig/latex-css.

Pure CSS Gaze - An ongoing series in which I create art using only CSS and HTML
https://github.com/cyanharlow/purecss-gaze
HTML/CSS drawing in style of italian renaissance painting. Hand-coded entirely in HTML & CSS.

htmlx - high power tools for HTML
https://htmx.org/
htmx allows you to access AJAX, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext. htmx is small (~7k min.gz’d), dependency-free, extendable & IE11 compatible

Rough Notation - A small JavaScript library to create and animate annotations on a web page
https://roughnotation.com/
Rough Notation uses RoughJS to create a hand-drawn look and feel. Elements can be annotated in a number of different styles. Animation duration and delay can be configured, or just turned off. Rough Notation is about 3.2kb in size when gzipped, and the code is available on GitHub.

RobotGo, Go Native cross-platform GUI automation
https://github.com/go-vgo/robotgo
Golang Desktop Automation. Control the mouse, keyboard, bitmap, read the screen, Window Handle and global event listener.

Micro
https://github.com/zyedidia/micro
micro is a terminal-based text editor that aims to be easy to use and intuitive, while also taking advantage of the capabilities of modern terminals. It comes as a single, batteries-included, static binary with no dependencies; you can download and use it right now!

Bear Blog
https://bearblog.dev/
https://github.com/HermanMartinus/bearblog/
Free, no-nonsense, super-fast blogging. No javascript, no stylesheets, no trackers. Just your words. Bear is all you need to build a fantastic and optimized site or blog. It works perfectly on any viewing device. All you need to focus on is writing good content. View example blog.

Obsidian
https://obsidian.md/
Obsidian is a powerful knowledge base that works on top of a local folder of plain text Markdown files. The human brain is non-linear: we jump from idea to idea, all the time. Your second brain should work the same. In Obsidian, making and following [[connections]] is frictionless. Tend to your notes like a gardener; at the end of the day, sit back and marvel at your own knowledge graph.

AudioMass - an open-source web based audio and waveform editing tool
https://audiomass.co/
AudioMass lets you record, or use your existing audio tracks, and modify them by trimming, cutting, pasting or applying a plethora of effects, from compression and paragraphic equalizers to reverb, delay and distortion fx. AudioMass also supports more than 20 hotkeys combinations and a dynamic responsive interface to ensure ease of use and that your producivity remains high. it is written solely in plain old-school javascript, weights approximately 65kb and has no backend or framework dependencies.

设计

Prototyping at Slack
https://slack.engineering/prototyping-at-slack-b1ec3a298226
A picture is worth a thousand words; a prototype is worth a thousand meetings.” A brief look at some examples of Slack’s prototyping process.

Understanding color theory: the color wheel and finding complementary colors
https://www.invisionapp.com/inside-design/understanding-color-theory-the-color-wheel-and-finding-complementary-colors/
In order to unleash the power of color, you first have to start by understanding color theory, the color wheel, how to use complementary colors to create an impactful color scheme, and the psychological effects of those colors.

Equivalent Experiences: What Are They?
https://www.smashingmagazine.com/2020/05/equivalent-experiences-part1/
An equivalent experience is one that has been deliberately conceived of and built to be able to be used by the widest possible range of people. To create an equivalent experience, you must understand all the different ways people interact with technology, as well as common barriers they experience.

有内味儿了！新版QQ黄脸表情是如何设计出来的？
https://www.uisdc.com/qq-expression-evolution-diary
发消息带表情已成为「网上冲浪」的社交礼仪，QQ 内自带的黄脸表情同样被广为使用。但伴随着社会文化的变迁，黄脸表情在使用时总让人感觉「表情用时方恨少」。别着急，新表情已安排。QQ 4 月上新了一批神仙表情，「疑惑」「 辣眼睛」「 沧桑」「 尴尬」，这些表情是否也是你的日常？如果你也被击中的话，跟我一起看看表情的设计故事吧！

产品及其它

Habits of High-Functioning Teams
https://deniseyu.io/2020/05/23/habits-of-high-performing-teams.html
I often struggle to explain what it means to be part of a high-functioning software team. Sure, there are mountains of literature, and an entire genre of LinkedIn thought leadership that professes all kinds of guidelines and heuristics about what makes teams work, but in my experience, it’s hard to internalize these ideas and follow someone else’s model if you’ve never seen what good looks like. In this post, I’ll try to document the characteristics and habits of the highest-performing teams I’ve been on.

Tools for better thinking
https://untools.co/
Collection of thinking tools and frameworks to help you solve problems, make decisions and understand systems.

How an 8-Year-Old Millionaire is Changing Content and Design
https://uxmag.com/articles/how-an-8-year-old-millionaire-is-changing-content-and-design
In 2019, the top earning YouTuber was Ryan ToyReview AKA “Ryan’s World.” He made over $26 Million from his business ventures thanks to his YouTube success. He’s 8.

每个周五夜晚，都有几十万个智能音箱被同时唤醒
https://mp.weixin.qq.com/s/euOPTD8b1ZJABbpn3NBGwg
智能音箱为何半夜说梦话，语音助手为何频频插嘴？是机性的丧失还是道德的沦丧？欢迎收看本期浅黑科技之“语音唤醒技术背后的小秘密”。

– THE END —