FEX 技术周刊 - 2018/08/20
中国首届React DEV Conf & FEDAY 2018
Who Left Open The Cookie Jar?
As browsers have become enormously complex, certain edge-cases may have been overlooked or the interplay of specific features may have unwanted side-effects. In our research, we created a framework to verify whether all imposed cookie- and request-policies are correctly applied (will be made available soon). Worryingly, we found that most mechanisms could be circumvented: for instance for all ad-blocking and anti-tracking browser extensions we discovered at least one technique that could bypass the policies. For the technical details of these findings, we invite you to read our paper, which was presented at USENIX Security ’18.
V8 built-in functions (builtins) consume memory in every instance of V8. The builtin count, average size, and the number of V8 instances per Chrome browser tab have been growing significantly. This blog post describes how we reduced the median V8 heap size per website by 19% over the past year.
Principles of Modern Application Development
These principles can be summarized as keep it small, design for the developer, and make it networked. With these three principles, you can design a robust, complex application that can be delivered quickly and securely, scaled easily, and extended simply.
The 10:1 rule of writing and programming
Give that my data set is limited, I can only draw a few preliminary conclusions: The ratio of “raw materials” to “finished product” in a book is roughly 10:1. Keep this in mind the next time an editor asks you for a timeline! If you want to write a 300 page book, you’ll probably have to write around 3,000 pages. Similarly, the ratio of “code churn” to “lines of code” in mature and non-trivial software is also at least 10:1. Keep this in mind the next time a manager or customer asks you for a time estimate! To build a 10,000 line app, expect to write roughly 100,000 lines. These can be summarized as what I shall dub the 10:1 rule of writing and programming: Good software and good writing requires that every line has been rewritten, on average, at least 10 times.
前端下半场：构建跨框架的 UI 库
跨框架的 UI 库，即前端 UI 库可以不经任何修改，直接能运行在 React、Angular、Vue 等框架上。
漫谈前端性能 突破 React 应用瓶颈
洞察 video 超能力系列——玩转 flv
flv的全程是 Flash Video，顾名思义，就是专门给flash播放器提供的播放格式，这种格式具有结构简单、清晰的优点，最早出现是为了解决flash导出的swf文件体积过大，不适合在web中播放的问题。随着flash的逐渐淘汰，新的video标签自然是不支持flv格式的，人们开始把web视频的重点放在mp4或者hls上，但是随着直播这种视频形式的火热兴起，flv迎来了新一轮的生机。
Simple internationalization of React apps
react-intl is still a standard when it comes to i18n of React apps. Even though it haven’t been maintained for about a year, the community is so strong that it’s gaining on popularity and new independent tools are constantly being published. I would like to introduce you to alternative i18n solution I’ve been working on for the last year and a half — jsLingui. The low-level API is very similar to react-intl to make migration of my projects easier, but on top of that there’s a completely different developer experience.
Creating a Chrome extension in 2018: The good, the bad and the meh
We shipped an initial version of Puppeteer Recorder, a Google Chrome extension that records your browser interactions and generates a Puppeteer script. It turns out Chrome extension development is almost like real web development, but with a weird dash of quasi embedded development mixed in. This post talks you through the development lifecycle when creating an extension and lists some of the architectural gotcha’s. Source code for the extension in question is on github.
Browser painting and considerations for web performance
In this article, I’d like to focus on the last part: painting. All of those steps combined is a lot of work for a browser to do on load… and actually, not just on load, but any time the DOM (or CSSOM) is changed. That’s why many web developers tend to partially solve this by using some sort of frontend framework, such as React which, apart from many other advantages, can help to highly optimize changes in the DOM to avoid unnecessary recalculating or rendering.
Creating the “Perfect” CSS System
A high level guide for designers and developers who write CSS, but want to be more strategic about building moderate to large scale CSS systems.
另附：Everything You Need To Know About Alignment In Flexbox.
Cross-tab Synchronization with the Web Locks API
Shadow DOM in Ionic (and Why it’s Awesome)
I’d like to think we here at Ionic know a thing or two about Shadow DOM, as we recently made the move to using it in Ionic 4, and with that, received a lot of questions from the community on just what the heck it is. There’s a lot of information (and misinformation) floating around about Shadow DOM, so let’s go through the API and see what it actually does.
WebAssembly: How and why
Dweb: Building a Resilient Web with WebTorrent
The web is healthy when the financial cost of self-expression isn’t a barrier. In this installment of the Dweb series we’ll learn about WebTorrent – an implementation of the BitTorrent protocol that runs in web browsers. This approach to serving files means that websites can scale with as many users as are simultaneously viewing the website – removing the cost of running centralized servers at data centers.
Introducing headless Chrome support in Cloud Functions and App Engine
We’re pleased to announce that the Google Cloud Functions and Cloud Functions for Firebase Node.js 8 runtimes have also been upgraded with the OS packages required to run headless Chrome. This means that you can now author Cloud Functions that use headless Chrome—and utilize all the features of a web browser in a fully serverless environment. Headless Chrome lets you take advantage of the modern web platform features from Chromium and the Blink rendering engine too.
另附：Puppeteer 1.7 Released.
Beyond Web and Worker: Evolution of the Modern Web App on Heroku
This is the first in a series of blog posts examining the evolution of web app architecture over the past 10 years. This post examines the forces that have driven the architectural changes and a high-level view of a new architecture. In future posts, we’ll zoom in to details of specific parts of the system.
How to Debug a Node.js app in a Docker Container
While containerization, in general, is a very powerful tool - and here at RisingStack we always start new projects by spinning up the needed infrastructure in a docker-compose.yaml - it can be tricky to reach the enveloped Node process if you don’t know how to do it.
Serverless Docker Beta
The focus of our ZEIT Day Keynote this year was on the new capabilities of the Now cloud platform. In particular, we emphasized our focus on Serverless Docker Deployments. Today, we are announcing their availability as a public beta, which features: A 10x-20x improvement in cold boot performance, based on data from 1.5M+ deployments…
Beyond Interactive: Notebook Innovation at Netflix
Notebooks have rapidly grown in popularity among data scientists to become the de facto standard for quick prototyping and exploratory analysis. At Netflix, we’re pushing the boundaries even further, reimagining what a notebook can be, who can use it, and what they can do with it. And we’re making big investments to help make this vision a reality. In this post, we’ll share our motivations and why we find Jupyter notebooks so compelling. We’ll also introduce components of our notebook infrastructure and explore some of the novel ways we’re using notebooks at Netflix.
Maximizing Process Performance with Maze, Uber’s Funnel Visualization Platform
By applying Maze to the logs captured during driver sign-up, we can visualize the actual paths drivers take when signing up with Uber, and identify bottlenecks that occur in the process. Maze’s application at Uber has since expanded beyond the sign-up use case, and it is now used to visualize many processes—from rider pick-up and drop-off to user interactions with our website. Read on to learn how the Uber Visualization team developed Maze and why this new solution offers unparalleled insight into the Uber user experience.
Capturing Data Evolution in a Service-Oriented Architecture
Building Airbnb’s Change Data Capture system (SpinalTap), to enable propagating & reacting to data mutations in real time.
E-Commerce at Scale: Inside Shopify’s Tech Stack
Shopify is a multi-channel commerce platform for small and medium businesses that lets you create a shop and sell products wherever you want: online via web store or social media and offline with a POS card reader. Shopify powers 600K merchants and serves 80K requests per second at peak. While helping aspiring entrepreneurs to launch their stores, Shopify also holds some of the world’s largest sales for the Super Bowl, Kylie Cosmetics, and celebrities like Justin Bieber and Kanye West. These “flash sales” are tricky from an engineering point of view because of their unpredictably large volumes of traffic.
Cost of a Join
It depends! It depends what the join criteria is, what indexes are present, how big the tables are, whether the relations are cached, what hardware is being used, what configuration parameters are set, whether statistics are up-to-date, what other activity is happening on the system, to name a few things.
Universal Method to Sort Complex Information Found
The nearest neighbor problem asks where a new point fits into an existing data set. A few researchers set out to prove that there was no universal way to solve it. Instead, they found such a way.
Dijkstra’s in Disguise
Dijkstra’s, Bellman-Ford, Johnson’s, Floyd-Warshall are good algorithms for solving the shortest paths problem. This blog post is a gentle tutorial on how all these varied CS topics are connected. No prior knowledge of finance, reinforcement learning, or computer graphics is needed. The reader should be familiar with undergraduate probability theory, introductory calculus, and be willing to look at some math equations. I’ve also sprinkled in some insights and questions that might be interesting to the AI research audience, so hopefully there’s something for everybody here.
另附：The Total Beginner’s Guide to Game AI.
GiuHub - Release Radar · July 2018
July has come and gone, leaving a lot of exciting releases in its wake! It’s been an especially big month for people learning to program—we’re highlighting two releases that will help new programmers—but there’s something for everyone in this month’s Release Radar.
Front-End Performance Checklist
The only Front-End Performance Checklist that runs faster than the others. One simple rule: “Design and code with performance in mind”
另附：Learning Web Development in 2018.
Preventing downloading images or objects until they are visible in the viewport
One solution to this is to have an attribute for declaring which images or objects should not be downloaded and decoded until they are visible in the viewport. For example,
<img lazyload>.*. Alternatively, a meta element could be placed in the head to globally set all images and objects to only download once they are visible in the viewport.
bbx 是一个极其简单高效的 React 状态管理方式。你可以很方便的使用 bbx 进行状态管理而不用太多的困扰，也就是说，要是你会 React，那就已经会使用 bbx 了。
Simple libraries for delightful interfaces.
A Web Audio framework for making interactive music in the browser.
另附： Setosa - data visualization and visual explanations.
OpenPGPjs, has passed an independent security audit
As part of our commitment to open source, we maintain the OpenPGPjs encryption library. After some recent code enhancements, OpenPGPjs underwent an independent security audit, the results of which are discussed below.
A python command-line tool which draws basic graphs in the terminal.
Python Fire is a library for automatically generating command line interfaces (CLIs) from absolutely any Python object.
Distributed bug tracker embedded in Git.
The easiest way to keep your web apps accessible: Just use text
Keeping increasingly complex web apps accessible is a necessity. Fortunately, there is one thing you can do to keep any web app accessible to as many users as possible, and lessen the burden of development and maintenance for yourself, too. Just use text.
Framer X — Initial Impressions
The power of code meets the power of design. Framer X, currently in invite only Beta, is the future of Framer(RIP). AND IT IS EXCITING!!! Apologies for the caps but it is indeed exciting and here’s why…
Living in Information, Responsible Design for Digital Places: a Book Excerpt
We are in the midst of a major social transformation — moving many of our day-to-day activities from physical places to information-based places that we experience on our phones and computers. The central question of this book is: How can we design these information environments so they serve our social needs in the long term?
How to design for (and with) developers
Designers have a challenging task: Solve problems to empower users to do their best work. To understand how designers balance the demands of their roles as problem solvers with the evolving needs of an audience, I chatted with UX Manager Sarrah Vesselov about the considerations that go into designing for developers.
Make Something Great: Become an Open Source Contributor
You may think that open source is not for you. After all, it has always been a developer-dominant ecosystem. But code is by no means the only thing a piece of software is made of. Open source is first and foremost about community. Whether you’re a designer, developer, writer, doctor, or lawyer, there are many paths to the open source world. Learn what you need to know to set out on your journey, from first steps to becoming a core contributor. It might change your career.