Author: King Invite moon bear editor: Xu Chuan

Front-end weekly list focuses on front-end domain content, mainly on the collection of foreign language information, to help developers understand the weekly front-end hot spots; Divided into hot news, development tutorials, engineering practice, in-depth reading, open source projects, peak life and other columns. Welcome to pay attention to [front top] wechat public number (ID: Frontshow), timely access to the front weekly list.

The news

At home and abroad, the latest developments in the front end

  • Webpack 4.0.0 release: Webpack 4 is officially released this week with a number of feature updates and significant performance improvements (up to 98%). The CommonsChunkPlugin was removed in Webpack 4 and replaced with a set of default configurations and a simple optimize.splitchunks interface. At the same time, Webpack 4 brings mode configuration items, allowing developers to choose whether to optimize for development environment or production environment according to different needs, thus lowering the threshold for beginners. For more information on the changes, see here.

  • Parcel V1.6.0 release: Just three weeks after Parcel V1.5.0 was released, Parcel V1.6.0 still brings us over 15 new features and a number of fixes. Notable features in this release include: ES6+ zero configuration conversion based on Babel, automatic JSX support for React and Preact, Node and Electron target support, package body analysis in production, Node 6 and W3C WebManifest support, etc.

  • NPM V5.7.0 release: This release brings a number of exciting features and fixes, and this article details the key changes. Package-lock. json files are automatically merged with nPm-shrinkwrap. Json when using NPM install. This version also introduces a new CI command that only installs dependencies in the Lock file and throws an error if package.json is inconsistent with the lock file. This command provides a 2-10x performance improvement over NPM install and greatly optimizes the current CI continuous integration process.

Development tutorial

Step by step, master the basics

  • Everything you need to know about CSS Variables: Most programming languages support Variables, or similar features; While CSS has long failed to support custom variables, with the rapid development of the Web we are glad to see the introduction of custom properties, or so-called variables. This article is a comprehensive introduction to CSS Variables, from the characteristics and principles of CSS Variables to its practice in practical application development; To better illustrate this, the author also builds three projects from scratch: creating polymorphic components using CSS Variables, and creating small CSS Variable Booths based on the theme features of CSS Variables. For more information, see Fundamentals of Modern Web Development and Engineering Practices – Basics.

  • Overview of JavaScript Testing 2018: This guide aims to introduce you to the concepts, terms, tools, and methods you should know about JavaScript testing in 2018. This article brings together ideas from many of the best articles, as well as the author’s own years of experience building Welldone software solutions. The author has practiced the combination and collocation of different test solutions for different products in his years of work. In this paper, Jest is used for unit test and integration test, and TestCafe is used for interface test. For more information, see the Awesome JavaScript Reference.

  • Face Recognition: Use React-Redux and Kairos to identify yourself: We are in the age of rapid development of ARTIFICIAL intelligence and machine learning technology, Face ID and Face recognition are no longer distant, but become an indispensable part of life. Better to do it than talk about it, here’s how to use React-Redux and Kairos to create facial recognition applications and do some interesting things with them. See DataScienceAI MindMap for more information.

The engineering practice

Base on practice, prompt actual level

  • Spectrum Streaming Server-side Rendering and Distributed Caching Practice: React 16 brings Streaming ServerSide Rendering, which allows concurrent HTML transfer and interface Rendering. This feature optimizes the first byte transfer and first screen rendering time, allowing users to see meaningful interfaces faster. This article is shared by Spectrum CTOS on how they used streaming responses and distributed caching to ensure high-performance React server rendering practices. See modern Web Development Basics and Engineering Practices in React for more information.

  • GraphQL API security hardening: GraphQL allows the front-end to query data easily and at will, which ensures the FLEXIBILITY of the API, but also brings some security risks. In addition to legitimate, valid queries, malicious attackers can submit many time-consuming, multi-layer nested queries that drain your servers, databases, networks, and other computing and storage resources. In this article, Spectrum CTO shared how they implemented security hardening for the GraphQL API in production; See the GraphQL Reference for more information.

  • Event sourcing vs CRUD: In many cases, Event Sourcing is closely associated with the domain-driven development (DDD) and CQRS design patterns, but Event Sourcing is not just part of them. This article is a detailed comparison of Event Sourcing and CRUD. Event Sourcing can also be regarded as a special data storage method. Different from the traditional storage method with relational database as the core, Event Sourcing does not persist records, but stores changes as time sequence or other types, so as to facilitate processing by consumers. For more information, see MicroService MindMap.

Deep reading

Deep thinking, sublimation development wisdom

  • Promises are not Neutral: Promises make it easier to do asynchronous things in JavaScript, but the authors of this article argue that Promises are not neutral enough to harm the ecosystem. The simplest goal of a Promise is to include some future knowable value, which may be available in the next Event Loop or a few minutes later. The authors consider the reasons why promises are not neutral enough to include: non-delayed execution; Non-cancelable; Unable to pass; Then () confuses map() with flatMap(). Refer to modern JavaScript development basics for more information.

  • CSS Keylogging: This project, CSS Keylogging, includes a Chrome plugin and an Express server to demonstrate how to implement Keylogging attacks using CSS. The principle of this attack is very simple, is to use CSS property selector to match the character, and background-image property to judge the character to the server; The project also includes simple scripts to generate a unique request format for each ASCII character. Refer to WebSecurity MindMap for more information.

  • The significance of decentralization: During the first wave of Internet development, from the 1980s to the 2000s, Internet services were built on open-source protocols and maintained and controlled by communities. In the second decade, roughly from 2000 to the present, giants like Google, Apple, Facebook and Amazon dominated the Internet. With the rise of cryptographic networks represented by blockchain, perhaps we will enter the era of decentralization in the future. This paper discusses the significance of decentralization from the perspective of macroscopic historical development, as well as its disadvantages or advantages compared with the application of decentralization. The crypto web allows us to build community-led networks that are easy for third-party developers, innovators, and business talent to join. See Web Series for more information.

The open source project

Willing to share, push forward the front-end development

  • GhostText: GhostText provides us with a rich editor plug-in that allows us to write content directly to the browser input box from the editor; In other words, everything entered in the editor is synchronized to the browser in real time.

  • Proton Native: On mobile, React Native offers cross-platform interface building and state management, making it easier to build cross-platform applications. Proton Native is similar to React Native, which relies on the React ecosystem to develop desktop and extended-platform applications. It also allows developers to use popular libraries such as Redux.

  • Vue-ethereum-ipfs: Vue-Ethereum-IPFS is a distributed application server based on VUE, Ethereum, and IPFS. Ethereum can be considered a distributed virtual machine, IPFS is a type of distributed content delivery network, and Vue is a JavaScript framework for building Web applications. Vue-ethereum-ipfs enables Web applications to run more efficiently by storing state in Ethereum and using IPFS to distribute HTML.

  • BasicScroll: basicScroll provides independent concurrent scrolling effects based on CSS Variables for mobile terminals and desktops. BasicScroll allows us to change CSS Variables based on the scrolling position, and we can use CSS Variables to customize animations.

The peak of life

  • Hinton: Humans are Machines, wonderful machines: This is a brief introduction to the life and career of Geoffrey Hinton, the father of deep learning. Geoffrey Hinton has been on the fringes of artificial intelligence research for more than 30 years. He clung like an outsider to a simple idea: that computers could think like humans, relying on intuition rather than rules.

At the top of the front end

InfoQ is a vertical community focused on front-end technology. To join the InfoQ learning group, please follow the “Front-end top” public account and reply to “Add group”. Please email your submission to [email protected], marked “Top of the Front”.