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

  • Let’s Encrypt announces that it will offer wildcard certificate services in January 2018: Since its launch in 2015, Let’s Encrypt has served millions of online sites and dramatically increased the percentage of encrypted traffic across the Web. Let’s Encrypt recently announced that it will provide wildcard certificate services in January. A wildcard certificate can be applied to any number of subsites under a root site, making it easier for web administrators to use a single certificate to add HTTPS deployment support to multiple subsites. ( https://parg.co/bIp )

  • Baidu Web ecosystem construction: released THE VUe-based PWA solution LAVAS; Will fully support Web AR: At Baidu Create 2017 Web Ecology sub-forum, Baidu Search officially released LAVAS, a PWA solution based on Vue, and announced that it will fully support Web AR. In addition, Baidu also in-depth analysis of THE architecture and principle of MIP, HTTPS and other technologies. (https://parg.co/bIZ) more detailed content and PPT download can access the AI baidu transformation, Web “(http://www.infoq.com/cn/news/2017/07/Web-baidu-AI-HTTPS)

  • Webpack Import is coming to support asynchronous CSS imports: A month ago Tobias Koppers wrote about Webpack’s concerns with CSS processing and plans to treat CSS code as well as JS; That is, developers can load CSS code asynchronously using dynamic code blocks built by code splitting plug-ins. This paper discusses this solution in detail and its possible impact on future code segmentation and first-screen loading, and proposes an asynchronous CSS loading solution that can be implemented based on React Universal Component and Webpack Flush Chunks in the current state. ( https://parg.co/bI8 )

  • MobX 3.2.0 release: MobX has built-in global states to help track and schedule Observables or reactions. In the 3.2.0 release, MobX automatically detects the presence of multiple MobX instances within an application and generates a response alarm. For more MobX information, see https://parg.co/bVC. ( https://parg.co/bIk )

Step by step, master the basics

  • Styled – Components of actual combat: Styled Components is a new CSS-in-JS tool library, created by Max Stoiber and Glen Maddern, to help you organize style declarations in React or React Native projects. This article focuses on the design concept and basic usage of Styled Components, first describing the design goals of Styled Components and then showing how to use Styled Components to create reusable Components or create global style declarations. ( https://parg.co/bev )

  • React Redux Concepts and Workflows Checklist: This article contains a graphical checklist of Redux concepts and workflows, as well as a detailed step-by-step introduction to the basic Redux concepts. This article first Outlines the significance of using Redux in project development and the stack related to Redux. Then it introduces the meaning of Store in Reudx and how to use it in conjunction with Immutable. This article introduces the hierarchy of React Redux components, and how to define actions, ActionCreator, Reducer, and so on. For more information on Redux, see https://parg.co/bVQ. (https://parg.co/bej)

  • Role-based permission validation based on Vue.js 2: The author prefers vue.js for front-end development because of the smooth learning curve and easy to understand official documentation of vue.js. In this article, the author introduces how to add role-based permission control functions to projects using Vue.js 2. In this paper, the author first introduces the concept and design of role-based permission control, then discusses how to use VUE-CLI to build the basic project architecture and delineate the directory hierarchy according to the characteristics, and finally introduces the key part of the code implementation and how to use Vuex to manage the application state. For more information on Vue, see https://parg.co/byL. ( https://parg.co/bIs )

  • Try out the new Angular HTTP Client: The HTTP Client API has been greatly improved in Angular 4.3.0-RC.0. This article introduces the use of the new Angular HTTP Client. In the new version of HTTP Client, return value parsing is assumed in JSON format by default, and a flexible Interceptor is introduced to dynamically manipulate the request header or response body. At the same time, the new VERSION of THE HTTP Client API provides real-time feedback callback for upload and download time-consuming operations, which facilitates debugging and feedback to users. ( https://parg.co/bIV )

  • Building real-time dashboard based on Vue.js and Laravel: This article is a practical summary of engineers from Spatie, introducing the construction of real-time team and event information display panel based on Laravel and vue.js. This paper first introduces the shortcomings of historical projects and the design considerations of current projects, and then discusses the solution of front-end grid layout. Next, the author respectively introduces the implementation of the key code based on Laravel on the server and vue.js on the client. For more information on Vue, see https://parg.co/byL. ( https://parg.co/bIJ )

Base on practice, prompt actual level

  • Interface Safety Checklist: This article covers security considerations for project interfaces during the design, testing, and release phases. This list begins by explaining that standard permission control methods, JWT or OAuth, should be used instead of Basic Auth, and then discusses the design essentials of JWT and OAuth respectively. The list goes on to include access filtering and anti-ddos attacks, using appropriate HTTP methods and verifying user input, avoiding leakage of critical resources, and setting up appropriate responses. ( https://github.com/shieldfy/API-Security-Checklist )

  • JavaScript Project Development Style Guide: Starting a new project is like running on a green field, where developers have a lot of freedom; But without a good foundation, future project maintenance can be a nightmare. This article is collected from Hive development team JavaScript project development guide, covering Git, document specification, environment variable control, dependency management, testing, file structure and naming, code style, log, API design and other aspects; For more JavaScript engineering practices, see https://parg.co/bIO. ( https://github.com/wearehive/project-guidelines )

  • Redux is an excellent application state management tool with a one-way data flow structure that allows developers to focus on developing business logic. In this paper, the author summarizes recommendations for Redux use in large projects based on his own practice. It includes establishing data index and using selector to access data, separating standard state from variable interface state and user edit state, reasonably sharing data between interfaces, extracting common Reducer function, and how to connect React component and Redux state tree, etc. For more information on Redux, see https://parg.co/bVQ. ( https://parg.co/bIi )

  • Web RESEARCH and development process and basic service practice: in the enterprise environment, Web research and development often encounter tedious process, difficult to rely on upgrade and other problems; The various services relied on in the r&d process also have different application processes and use methods, and lack of documentation. As a Web application development process and basic service platform mainly for ant front end, Basement has many users in Alibaba due to its simplicity and ease of use.

  • Summary of front-end JavaScript interview questions: The author of this article has found that there are not many satisfactory lists of front-end JavaScript interview questions, so he has compiled this article based on his own interview experience and practice. This article mainly includes the following parts. First, it introduces the basic concepts, such as closure, EventLoop, REST, etc. Then the coding ability is considered, such as the implementation of common data structures and algorithms, code debugging ability and error location evaluation, etc. Finally, there are concerns about overall system design capabilities, such as how to design a full-stack Twitter implementation architecture. ( https://parg.co/bIL )

Deep thinking, sublimation development wisdom

  • This series of articles introduces the inner workings of React. Js in detail. The author debugs the entire code base, analyzes the sequence of code execution and calls, and shows the whole logic clearly in the form of flow charts. This series of articles will contain two parts for the Stack Reconciler and Fiber. The Stack Reconciler is divided into fifteen sections so far. It includes the process of JSX conversion into DOM from rendering function call, internal transaction processing to component mounting and updating process, and so on. Learn more about React at https://parg.co/bM1. ( https://parg.co/be2 )

  • Using WebGL to unlock GPU computing potential: With the advent of big data era, computing power has become one of the key performance bottlenecks. It is well known that GPU has more powerful Computing capacity than CPU. This series of articles introduces how to use WebGL to realize GPGPU (General Purpose Computing on Graphics Processing Units) high-performance Computing. This series of articles first discussed the feasibility of GPGPU calculation using WebGL, and then introduced the concrete implementation steps; The main steps include matrix initialization, matrix calculation, result return, condition control, instability treatment, sample practice and so on. ( https://parg.co/bIQ )

  • Vue direct memory leakage problem tracing practice: recently, the author encountered Vue direct memory leakage problem, and trace. The background of the project is that the author happened to encounter the problem of memory leakage in a large-scale operation activity. The technical background and business background are as follows: Technical background: Node direct project, direct output using Vue direct output scheme; Business Background: Under the pressure of QPS of operation activities with one PV up to 1400W, certain error rate of service appeared in the later period. This article will review the whole tracing practice. ( https://parg.co/bIN )

  • Data structures are an important part of software development and a common topic in job interviews. This article reviews the top 10 data structures commonly used in JavaScript, with detailed tutorials and links to online practices. The data structures involved in this paper include linked list, stack, queue, set, map, hash table, binary search tree, Trie tree, binary heap, graph, etc. For more data structures and algorithms, see https://parg.co/bIt. ( https://parg.co/bIC )

Willing to share, push forward the front-end development

  • Ink: Ink allows us to write command line interfaces in a similar way to how we write the React component, with the major difference that Ink renders the component as a string output to the standard console. I think reading Ink’s source code is also a good way to understand the internal workings of the simplified React, including basic JSX transformations, virtual DOM rendering and comparison, batch updates, and so on. ( https://github.com/vadimdemedes/ink )

  • React: This repository collects a series of open source application code libraries based on react development environment, which can help beginners learn react from experienced developers’ code step by step. The application covers various information applications based on Redux, common music players and many other aspects. ( https://github.com/jeromedalbert/real-world-react )

  • Icaro: icARO is a lightweight, efficient JavaScript object observer implementation that automatically detects changes in JavaScript objects and performs operations such as DOM updates accordingly. Icaro uses Proxies, Proxies, WeakMaps, And Symbols to Proxies. Icaro is a great open source library for learning to implement JavaScript responsive frameworks using the latest language features. ( https://github.com/GianlucaGuarini/icaro )

  • Titanic: Titanic provides us with an interesting set of mutable SVG ICONS that animate feedback as the user clicks or does something. Titanic provides animated ICONS including checkboxes, mailboxes, smiley faces and so on. ( https://github.com/icons8/titanic )

  • Formik: Forms handling in React has always been a pain point, and many forms-processing libraries today add too many abstractions that are not only hard to understand but also cause a lot of additional performance costs. Formik provides easy-to-use, high-level components to help you handle the tasks of converting functions to flat React states, automating field validation and error prompts, and converting flat React states to usable objects. ( https://github.com/jaredpalmer/formik )

Tips for young Programmers from Microsoft’s top Code goddess: This is a video review and summary of bullet points given by Ms Julia Liuson, Senior Vice President worldwide of Microsoft.

Julia currently leads Microsoft’s global development platform engineering team, responsible for Visual Studio,.net development framework, C#… Is a driving Microsoft development tools and development technology of mass behind open source is changed, and lead the global division of thousands of senior developer towards the success of the enterprise transformation, let Microsoft from a three years grinding sword, a suit of software company, and is now able to in the cloud on the iterative delivery, match with the emerging hero Internet companies.

This article shares some of Julia’s opinions: How to learn and make choices in the face of changing technology? Microsoft went from closed to open source to what? Does age matter to programmers? How to go from programmer to leader? What should women programmers think about their careers?

“Top of the front end” follows the development of the front end and shares first-line technology. Please email your submission to [email protected], marked “Top of the Front”.