FEX 技术周刊 - 2019/09/02
深阅读
How Web Content Can Affect Power Usage
https://webkit.org/blog/8970/how-web-content-can-affect-power-usage/
Users spend a large proportion of their online time on mobile devices, and a significant fraction of the rest is users on untethered laptop computers. For both, battery life is critical. In this post, we’ll talk about factors that affect battery life, and how you, as a web developer, can make your pages more power efficient so that users can spend more time engaged with your content.
The story of a V8 performance cliff in React
https://v8.dev/blog/react-cliff
Previously, we discussed how JavaScript engines optimize object and array access through the use of Shapes and Inline Caches, and we’ve explored how engines speed up prototype property access in particular. This article describes how V8 chooses optimal in-memory representations for various JavaScript values, and how that impacts the shape machinery — all of which helps explain a recent V8 performance cliff in React core.
The Baseline Interpreter: a faster JS interpreter in Firefox 70
https://hacks.mozilla.org/2019/08/the-baseline-interpreter-a-faster-js-interpreter-in-firefox-70/
Modern web applications load and execute a lot more JavaScript code than they did just a few years ago. While JIT (just-in-time) compilers have been very successful in making JavaScript performant, we needed a better solution to deal with these new workloads. To address this, we’ve added a new, generated JavaScript bytecode interpreter to the JavaScript engine in Firefox 70. The interpreter is available now in the Firefox Nightly channel, and will go to general release in October. Instead of writing or generating a new interpreter from scratch, we found a way to do this by sharing most code with our existing Baseline JIT.
How JavaScript Grew Up and Became a Real Language
https://medium.com/young-coder/how-javascript-grew-up-and-became-a-real-language-17a0b948b77f
Few imagined that the one-time toy language would become a professional platform.
Put Down the Javascript: Learn HTML & CSS first
https://www.freecodecamp.org/news/put-down-the-javascript-learn-html-css/
A growing trend in front end development is the idea that you can dive right in to Javascript and succeed. Honestly, for better or worse you probably can. But you’re just building on top of a fragile foundation that will come back to bite you.
A Journey into Node.js Internals
https://www.youtube.com/watch?v=LbwUETu7Rgc
In this talk, I will give an overview on some of the platform internals. We will do a deep dive into the event loop, how it works, what its different phases are, and how it enables non-blocking IO. And, of course, we will answer the repeating question – is the event loop single threaded? We will also talk about the JIT compiler and the v8 engine. The session will end with a look at the garbage collector mechanism, the different algorithms that exists in each garbage collector phase, and how we can monitor our software to start detecting memory leaks.
【重构系列】什么时候需要进行代码重构？
https://juejin.im/post/5d6695f051882554e26201d2
在日常项目开发中，被众人说烂了的重构到底是什么？在我见过的很多开发者的眼中，对重构的理解，就是推翻以前的软件，重新花时间设计架构一个和界面一模一样的东西！有这种想法我认为是很危险的，在效率为王的当今社会，这样的人力资源浪费是不被社会和商业所接受的，索性我们这次认真探讨一下到底什么才是真正的重构？在正式开始之前，我们先来看一下大神是如何理解重构的。
京东 PC 首页 2019 改版前端总结
https://aotu.io/notes/2019/08/26/jdindex_2019/index.html
距离上次首页改版，已有2年3个月零五天。相比上次改版对首页整体框架、开发流程的大刀阔斧（前两次改版总结传送门：2016版，2017版），这次的改版看起来显得有点像跳水——没什么水花。在站在巨人肩膀上的小巨人的叮咛与期盼下，这次改版在延续17版的框架与流程的基础之上，为首页的稳定性、安全性、视觉体验、无障碍体验方面见缝插针地添了砖加了瓦。
Angular Tools for High Performance
https://blog.angular.io/angular-tools-for-high-performance-6e10fb9a0f4a
This post, contains a list of new tools and practices that can help us build faster Angular apps and monitor their performance over time. In each section, you’ll find links for further reference on how to incorporate them in your project. The focus of this post is on decreasing initial load time and speeding up page navigation using code-splitting and preloading.
Should you be using Web Workers? (hint: probably not)
https://medium.com/@david.gilbertson/should-you-should-be-using-web-workers-hint-probably-not-9b6d26dc8c6a
Anyhoo, if you’re doing an auto-save and taking 100ms to process data client-side before sending it off to a server, then you should absolutely use a Web Worker. In fact, any ‘background’ task that the user hasn’t asked for, or isn’t waiting for, is a good candidate for moving to a Web Worker.
Delivering ReactJS applications at scale
https://medium.com/walmartlabs/delivering-reactjs-applications-at-scale-5cb8a363f99
Scalability of applications is an important part of application design. There are multiple ways to scale the application. The application can be scaled by writing performant and efficient code, or by adding more instances of servers. In this blog, we are going to look into scaling multiple applications built by different teams, along with robust CI/CD to support it.
Write fewer, longer tests
https://kentcdodds.com/blog/write-fewer-longer-tests
Don’t worry about having long tests. When you’re thinking about your two users and avoid the test user, then your tests will often involve multiple assertions and that’s a good thing. Don’t arbitrarily separate your assertions into individual test blocks, there’s no good reason to do so. The principle: Think of a test case workflow for a manual tester and try to make each of your test cases include all parts to that workflow. This often results in multiple actions and assertions which is fine. 另附：Best Practices for Unit Testing in React Version 16.
Don’t get locked up into avoiding lock-in
https://martinfowler.com/articles/oss-lockin.html
A significant share of architectural energy is spent on reducing or avoiding lock-in. That’s a rather noble objective: architecture is meant to give us options and lock-in does the opposite. However, lock-in isn’t a simple true-or-false matter: avoiding being locked into one aspect often locks you into another. Also, popular notions, such as open source automagically eliminating lock-in, turn out to be not entirely true. Time to have a closer look at lock-in, so you don’t get locked up into avoiding it!
6 Lessons we learned when debugging a scaling problem on GitLab.com
https://about.gitlab.com/2019/08/27/tyranny-of-the-clock/
Get a closer look at how we investigated errors originating from scheduled jobs, and how we stumbled upon “the tyranny of the clock.”
Here is a story of a scaling problem on GitLab.com: How we found it, wrestled with it, and ultimately resolved it. And how we discovered the tyranny of the clock. The problem We started receiving reports from customers that they were intermittently seeing errors on Git pulls from GitLab.com, typically from CI jobs or similar automated systems. The reported error message was usually: ssh_exchange_identification: connection closed by remote host, fatal: Could not read from remote repository.
Up to 75% Faster Maintenances with Heroku Postgres and Redis Premium Plans
https://blog.heroku.com/faster-maintenances-with-heroku-postgres-and-redis-premium-plans
Heroku Data services undergo routine maintenances for security and patching. In this post, we describe the process used to minimize downtime for Heroku Postgres and Heroku Redis premium ‘High Availability’ plans and how we optimized the process to perform up to 75% faster.
How Quip Builds In-Product Debugging Tools
https://quip.com/blog/how-quip-builds-inproduct-debugging-tools
This post describes a few places where we’ve created such tools to help with our development. They augment our abilities and have significantly repaid the time spent creating them, creating a positive feedback effect. Once the effectiveness of the first few tools was apparent, it became much easier to justify the time spent creating them, and we added even more to our collection.
How Redis Enterprise Manages Growing Data
https://redislabs.com/blog/how-redis-enterprise-manages-growing-data/
Across our customer base, we’ve seen how rapidly database size and throughput requirements can grow. Let’s say you launched a new app some time ago, and it stores data in Redis. Suppose your dataset size was about 1 GB when you launched, but your app became very popular. Your Redis dataset may have grown to over 20 GB, and be on track to reach about 50 GB in the next few days. In this type of scenario, a 100,000 operations/second launch throughput could now be inching towards a requirement of 1,000,000 operations/second – a challenge for any database.
What happened to Hadoop
https://architecht.io/what-happened-to-hadoop-211aa52a297
Hadoop’s path to ubiquity intersected a host of other technology shifts that as a whole would prove to be more impactful in the long run, in part by peeling off the most valuable promises of big data and making them more consumable. The story of Hadoop can help us understand why the world of data looks how it does today. It also should be a valuable lesson for anybody trying to make sense of the next big thing in enterprise IT, and the next one after that.
新鲜货
蚂蚁金服体验科技精选
https://www.yuque.com/antfe/featured
从业十余载，内心一直有个声音问自己：除了支撑好业务，阿里经济体 2000 多名设计师及 2000 多名前端工程师，还可以做点什么，怎样为业务创造更大的价值，如何才能在历史的洪流中开出鲜艳的花？体验科技是对上面这些问题的一个答案。2013 年始，蚂蚁金服肥沃的业务土壤中，逐步生长出 Ant Design、支付宝小程序、语雀等微小而美好的产品。这就是蚂蚁金服体验科技，尝试融合艺术与科技的力量，去做出一些对世界有幸福感的东西出来。此次推出《蚂蚁金服体验科技精选》，是想在体验科技前行的路上，让彼此不孤单，让我们能共同看见业界的最新进展，同时让业界多一扇窗了解蚂蚁金服在做什么。
OpenArkCompiler
https://www.openarkcompiler.cn/home
方舟编译器是为支持多种编程语言、多种芯片平台的联合编译、运行而设计的统一编程平台，包含编译器、工具链、运行时等关键部件。 方舟编译器还在持续演进中，陆续将上述能力实现和开源。
npm.community: The Official npm Forum
https://npm.community/
This is the official npm forum. Here, you can interact with other members of the npm community, ask questions, look for answers, post bug reports, ask for features, and more! 另附：npm bans terminal ads, Supporting Open Source Maintainers.
Announcing Dojo 6
https://dojo.io/blog/version-6-dojo
Mikeal Rogers once said React is the new Dojo, but Dojo, a popular ‘batteries included’ framework, is still innovating with v6 being the most ambitious release since last year’s v2.
Announcing TypeScript 3.6
https://devblogs.microsoft.com/typescript/announcing-typescript-3-6/
Stricter Generators, More Accurate Array Spread, Improved UX Around Promises, Better Unicode Support for Identifiers…
PubSub in the browser with the JS IPFS HTTP API client
https://blog.ipfs.io/2019-08-29-pubsub-in-the-browser/
The lite client has been a great proving ground for ensuring the “hard parts” of the API are now possible using browser native APIs. I’ll be applying more of the learnings from there to the regular http client in the near future, which should hopefully result in a smaller bundle size, as well as more cool new features like this one.
CKEditor 5 v12.4.0 with image resizing, to-do lists, RTL language support and more
https://ckeditor.com/blog/CKEditor-5-v12.4.0-with-image-resizing-to-do-lists-RTL-language-support-and-more/
We are happy to announce the release of CKEditor 5 v12.4.0. This editor version introduces Paste from Google Docs, image resizing, a simple image upload adapter, to-do lists, right-to-left language support as well as a spell and grammar checker and support for creating math and chemical formulas right in the WYSIWYG editor content. There is more — so read on!
exFAT in the Linux kernel? Yes!
https://cloudblogs.microsoft.com/opensource/2019/08/28/exfat-linux-kernel/
Microsoft ♥ Linux – we say that a lot, and we mean it! Today we’re pleased to announce that Microsoft is supporting the addition of Microsoft’s exFAT technology to the Linux kernel. 另附：littlefs - A little fail-safe filesystem designed for microcontrollers.
Reactime: A Time Travel Debugger for React
https://github.com/oslabs-beta/reactime
Reactime is a debugging tool for React developers. It records state whenever state is changed and allows user to jump to any previous recorded state. One important thing to note. This devtool is for React apps using only stateful components and prop drilling. If you’re using Redux, Hooks, Context, or functional components, this devtool will not function on your app. Another thing is that this library does not work well when mixing React with direct DOM manipulation. Since DOM manipulation doesn’t change any React state, this library cannot record or even detect that change. Of course, you should be avoiding mixing the two in the first place.
Easy File Uploading With JavaScript
https://pqina.nl/filepond/
A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.
Apexcharts.js - Interactive SVG Charts
https://github.com/apexcharts/apexcharts.js
A modern JavaScript charting library to build interactive charts and visualizations with simple API.
Karma
https://github.com/karma-runner/karma
A simple tool that allows you to execute JavaScript code in multiple real browsers.
Introducing Feathers 4: A framework for real-time apps and REST APIs
https://blog.feathersjs.com/introducing-feathers-4-a-framework-for-real-time-apps-and-rest-apis-afff3819055b
Feathers is a framework for creating real-time applications and REST APIs using JavaScript or TypeScript with Node.JS, React Native and the browser. It works with any backend supporting many databases out of the box and with any frontend technology like React, VueJS, Angular, Android or iOS.
ndb
https://github.com/GoogleChromeLabs/ndb
ndb is an improved debugging experience for Node.js, enabled by Chrome DevTools
GoAccess - Visual Web Log Analyzer
https://goaccess.io/
GoAccess is an open source real-time web log analyzer and interactive viewer that runs in a terminal in *nix systems or through your browser. It provides fast and valuable HTTP statistics for system administrators that require a visual server report on the fly.
Is Perl 6 Being Renamed?
http://blogs.perl.org/users/ovid/2019/08/is-perl-6-being-renamed.html
By now, many of you have seen the Perl 6 Github issue “Perl” in the name “Perl 6” is confusing and irritating. While the proposed name was “camelia”, Damian Conway made a strong argument in favor of “raku” and it appears the community is leaning towards this name for various reasons. This post is my attempt to summarize what’s going on for those who have missed it.
High-Availability SQLite
https://dqlite.io/
Dqlite is a fast, embedded, persistent SQL database with Raft consensus that is perfect for fault-tolerant IoT and Edge devices.
Salsify
https://snr.stanford.edu/salsify/
Salsify is a new design for real-time Internet video that jointly controls a video codec and a network transport protocol. Current systems (Skype, Facetime, WebRTC) run these components independently, which produces more glitches and stalls when the network is unpredictable. In testing, Salsify consistently outperformed today’s real-time video systems in both quality and delay.
WTF - the terminal dashboard
https://wtfutil.com/
WTF is a personal information dashboard for your terminal, developed for those who spend most of their day in the command line. It allows you to monitor systems, services, and important information that you otherwise might keep browser tabs open for, the kinds of things you don’t always need visible, but do check in on every now and then. Keep an eye on your OpsGenie schedules, Google Calendar, Git and GitHub repositories, and New Relic deployments. See who’s away in BambooHR, which Jira tickets are assigned to you, and what time it is in Barcelona. It even has weather. And clocks. And emoji.
Iosevka
https://github.com/be5invis/Iosevka
Slender typeface for code, from code.
设计
How to Approach Design for Developers
https://www.toptal.com/designers/ui/design-for-developers
Even though they may be working on the same projects and products, developers and designers often work apart from one another in silos. Design is often considered by developers as a secondary thing, unimportant when compared with the functionality of a product. That kind of thinking can be detrimental to the developer-designer relationship. Not having a basic grasp of design can hold developers back in their careers, or prevent them from pursuing projects just because they don’t have a designer on board.
Designing Dark Mode
https://medium.com/microsoft-design/designing-dark-mode-31400530787a
How we’re crafting Dark Mode experiences across Microsoft 365 that adapt to your daily flow.
Large Devices Preferred for Important Tasks
https://www.nngroup.com/articles/large-devices-important-tasks/
Despite substantial improvements in mobile UX over the past decade, people still tend to do their most important online activities on larger screens.
Why Small Words Matter – The Importance of Microcopy UX
https://www.toptal.com/designers/ui/microcopy-impact-ux
Microcopy is the small, informative, or instructional text on forms, pop-ups, buttons, search prompts, tips, etc. They inform and assist people in small ways as they are using a product. Microcopy serves as a guide when users take specific actions, such as searching for products or trying to choose an appropriate response. Microcopy can also build trust and empathy with users and form a stronger bond with the brand overall.
产品及其它
Things I Learnt from a Senior Software Engineer
https://neilkakkar.com/things-I-learnt-from-a-senior-dev.html
Every day, whenever I came across an interesting situation, I logged it. All thanks to sitting next to a senior software engineer, I could closely observe what they were doing, and how it was different from what I would do. We pair-programmed a lot, which made doing this easier. Further, in my team culture it’s not frowned upon to “snoop behind” people writing code. Whenever I sensed something interesting going on, I’d roll around and watch what was happening. I always had the context, thanks to regular standups. I sat next to a senior software engineer for a year. Here’s what I learnt.
28 facts about Linux for its 28th birthday
https://www.redhat.com/en/blog/28-facts-about-linux-its-28th-birthday
Nearly three decades ago, Linus Torvalds sent the email announcing Linux, a free operating system that was “just a hobby” and not “big and professional like GNU.” It’s fair to say that Linux has had an enormous influence on technology and the world in general in the 28 years since Torvalds announced it. Most people already know the “origin story” of Linux, though. Here’s 28 things about Linux (the kernel and larger ecosystem) you may not already know.
纪念一位大师中的大师
https://mp.weixin.qq.com/s/s6ScOFqoMB8HnEBbC6D3qQ
每次我翻到Richard Stevens的书都会极为惊叹：这是个什么样的人，怎么能掌握这么多的技术细节？的确，他的书每一本都是经典中的经典，在各自的领域几乎都是“圣经”级别， 五本主要著作在豆瓣上的评分都是在9分以上，这实在是太不可思议了！二十年多年后的今天看来，这些依然不过时，可见基础知识的生命力，程序员应该把更多的时间和精力投入到基础知识当中去。
TED高赞演讲：我们的认知，正在被这3种偏见毁掉
https://mp.weixin.qq.com/s/iw2Dfxetwn0e7LPjvN_avg
所谓认知力，无非就是对世界万物的判断，你的判断越接近事实，你的认知力就越高。人的智力、能力都相差无几，但出到社会后的几年内，发展往往大相径庭，其中除了机遇的因素，认知能力就是其中最重要的一部分。正如职场作家良大师所言：“认知能力决定了做正确的事，这比正确地做事要重要100倍。”想要提升认知能力，其实并不容易，我们一直以为自己足够冷静理智，殊不知每一个人看待世界的方式，都被外界深刻影响着。在这其中，有3种特别值得关注的思维误区，它们严重妨碍了我们理智看待这个世界。人们总倾向于寻找证据来支持我们已经相信的事情，抵制不同的看法；总有一些人认为自己什么都懂，或者低估自己不懂的事情；新信息与已有的信念相矛盾，无法理解现有经验外的事物的时候，会让人产生失调的感觉，这种感觉会驱使一个人去寻找合理化的解释，让自己的认知达到一致。
没有好的思维模型，积累再多知识也没用
https://mp.weixin.qq.com/s?__biz=MzIxNTAzNzU0Ng==&mid=2654636159&idx=1&sn=563d7514c1b0329b35f978cdceb24d8f
过去8年，我们邀请了全球300多位顶级创新者担任讲师，我们去挖掘学科背后的深刻道理，探访站在时代潮头的变革者，汲取屹立于历史之巅的思想家的智慧。创新的答案慢慢浮现于眼前。没错，答案就是哲科思维。查理•芒格（Charlie Munger）说：“要想更好地投资，必须更深刻地理解世界。”哲学，追问终极；科学，假设验证。我们过去说，哲科思维是无用之大用。言外之意是，你手头上已经没有紧要的事情需要做的时候，学习哲科思维可以帮助你升级。但我现在意识到，这个说法是错误的。我应该斩钉截铁地说：“哲科思维就是最有用的思维方式。”
对数据可视化有兴趣的可以阅读由 AntV 带来的 [墨者修齐 2019-09-02·色彩表达、台风 火灾 气候变化可视化、Galaxy of Covers](https://www.yuque.com/mo-college/weekly/xpgz2g)
