set up the environment every time you start a job or buy a new computer. Here are some of my essential software tools raycast www.raycast.com/   this is an efficiency tool on macOS. The body looks like this, similar to the native Spotlight, but it has a lot of features and third-party plug-ins. personal frequently used functions are: Software preset: Open APP, the most basic function File Search-File search Calculator-enter the formula in the input box to automatically calculate Coin conversion-enter the corresponding currency, such as 100usd Window Management-split, window management (instead of Rectangle) clipboard history-pasteboard history Snippets-Quick input fixed vocabulary it is easier to use third-party plug-ins: Easydict-look up words, translate IP-Geolocation-query IP View 2FA Code-SMS verification code (by reading iMessage) the above commonly used instructions I will add personal keyboard shortcuts to call, reducing the use of steps. notion www.notion.so/product this is an All-in-one note-taking tool with many templates built into it, including bookkeeping, reminders, etc., basically covering all aspects of life. at present, I am mainly used to record some ideas and summarize the knowledge system. Command Line iterm2 iterm2.com/ Mac command line tools, some keyboard shortcuts and display effects are better than native terminal, and are used to it. zsh & oh my zsh ohmyz.sh/#install provides command line beautification, syntax highlighting and automatic completion, and many convenient shortcut instructions can be added through plug-ins for example, there are gst, gco and other short commands in the git plug-in to facilitate input in addition, you can adjust the theme of the interface according to your personal preferences…

there have been various disputes over front-end framework for a long time. The most controversial items are the following two: performance dispute dispute over API design for example, emerging frameworks come up with benchmark to prove their excellent runtime performance, and React is usually at the bottom of these benchmark . in the API design, Vue enthusiasts believe that "more API constrains developers and will not cause significant differences in code quality due to differences in the level of team members." and React enthusiasts think: " Vue a large number of API limits flexibility, JSX yyds". the above discussion boils down to the trade-off between framework performance and flexibility. this article introduces a state management library called legendapp , which is very different from other state management libraries in terms of design philosophy. rational use of legendapp in React can greatly improve the runtime performance of the application. but the purpose of this article is not just to introduce a state management library, but to share with you changes in framework flexibility as performance improves. performance optimization of React It is an indisputable fact that the performance of React is really not very good. The reason is the top-down update mechanism of React . with each status update, React traverses the entire component tree first, starting from the root component. since the traversal mode is fixed, how do you optimize performance? The answer is looking for subtrees that can be skipped when traversing . what kind of subtree can skip traversal? Obviously a subtree of that hasn't changed. in React…

there are three front-end framework concepts that are easily confused: responsive updates unidirectional data flow Bidirectional data binding before continuing with this article, readers can think about whether they clearly know the meaning of the three. these three are easy to be confused because although they belong to the same front-end framework, they are not the same level of abstraction, so it is difficult to compare them directly. this article will explain the differences between these three levels of abstraction. responsive updates responsive update is also called fine-grained update . At the same time, the recently popular concept of Signal describes responsive updates . In a nutshell, responsive update describes the relationship between state and UI , that is, how state changes map to UI changes . consider the following example (from what are signals article): function TodoApp() { const [todos, setTodos] = useState( [{ text: 'sleep', completed: false }] ) const [showCompleted, setShowCompleted] = useState(false) const filteredTodos = useMemo(() => { return todos.filter((todo) => !todo.completed || showCompleted) }, [todos, showCompleted]) return ( <TodoList todos={filteredTodos} /> ) } in the TodoApp component, two states are defined: to-do todos whether to show completed items showCompleted and the state derived from the above state filteredTodos . Finally, the & lt;TodoList/> component is returned. if the state of todos changes, how does UI change? That is, how do we know the scope of influence of state changes ? At this point, there are two ideas: push ( push ) pull ( pull ) the principle of push We can start with the changing…

background: when users open the page, they need to render different iterative versions according to the active id of the page. For example, the code used by activity An is v0.0.1 (featureA), and the version used by activity B is v0.0.2 (featureB) of course, the grayscale strategy is not only the active id, but may include the following situations by percentage of traffic by region user id activity id Press ip wait purpose Let product applications be put on the market step by step, find and modify problems step by step, and adapt to the market method: 1. nginx + lua + apollo recommendation index: ⭐️⭐️⭐️⭐️ modify cost: ⭐️⭐️⭐️ specific practice: the user requests nginx,nginx to determine the version that the user needs to render according to the grayscale policy and returns the corresponding version of html. The logic of judging the version is processed by nginx, and the grayscale policy is stored in a database or apollo (such as whitelist ip, whitelist id, percentage value) advantages: does not change the front-end business code, and is easy to maintain disadvantages: the cost of modification is slightly higher, and it requires backend or operation and maintenance support, lua language, and may need to modify the construction process. 2. bff + apollo recommendation index: ⭐️⭐️⭐️ modify cost: ⭐️⭐️⭐️⭐️ specific approach: similar to the first, only nginx is replaced with node.js, which is suitable for projects with bff layer and bff is responsible for rendering front-end pages advantages: does not change the front-end business code, and is easy to maintain disadvantages: for projects…

recently, in the process of promotion in the department, I encountered a question and answer session about front-end security, and I felt that I was lack of knowledge. Here is a summary of my learning experience. This paper summarizes the security strategies that you need to master as a front-end engineer. XSS XSS (Cross Site Scripting) is called a cross-site scripting attack, which uses the privileges of the logged-in user to inject a script into the page to fake the user's request backend. scenario of being attacked pages with unsafe form input Promotion of unknown links or pop-up window use ID theft tamper with, steal and delete enterprise information data illegal transfer DDos attacks on others using host ... attack type reflective XSS script is hidden in the connection, and after deceiving the user to click, it will execute the hacker's script, or take advantage of the loophole in the blog site to enter the attack script in the input box and trigger the user to click or access passively. Storage XSS scripts (for example: & lt;script>alert (document.cookie) & lt;/script> ) are stored on the server, such as online blogs, and the hacker script is executed every time the data is read from the server or when the user is induced to click after rendering. an example of storage + reflection is as follows: when you fill in the form and save it, when you open it for editing again, there will be not only a value field in the input, but also an additional onckick event. Each time you…

React Router is a routing library for React applications that provides an easy way to match URL to components. React Router implements the following main concepts: Router: it provides the basic routing capabilities of the application. Routes: it defines the mapping between URL and components. Link: it provides a convenient way to navigate through the application. Switch: it is used to ensure that only one route can match the current URL. createBrowserHistory: this is used to create an instance of HTML5 History API. next, we will delve into the implementation principle of React Router. We will first discuss the implementation of Router components, then discuss the implementation of Routes components, and finally discuss the implementation of Link components. implementation of Router components The Router component is the core component of the React Router library, which provides the basic routing capabilities of the application. The following is the simplified version of the Router component implementation code: const Router = ({ children }) => { const [location, setLocation] = useState(window.location.pathname); useEffect(() => { const handlePopState = () => setLocation(window.location.pathname); window.addEventListener('popstate', handlePopState); return () => window.removeEventListener('popstate', handlePopState); }, []); return <RouterContext.Provider value={{ location }}>{children}</RouterContext.Provider>; }; in the above code, we first define a Router component. It accepts a children attribute, which is the root component of our application. Then we use useState Hook to create a state variable named location . It will be used to track the current URL. We will update this state variable using the setLocation function. next, we use useEffect Hook to register a function that listens for popstate…

Preface Dropdown drop-down menu import import Dropdown from '@/components/Dropdown/Dropdown' The use of subcomponents is as follows: const MenuItem = Dropdown.MenuItem; const SubMenu = Dropdown.SubMenu; Props 1. trigger Type: string (required) default: click | hover description: drop-down trigger mode, click click trigger menu, hover trigger menu 2. onClickMenu Type: func default value: no description: click to trigger the callback function to change the classname of the sub-component. Input parameters: {string} trigger drop-down trigger mode 3. title Type: string default value: no description: drop-down button prompts for title MenuItem child content components import import Dropdown from '@/components/Dropdown/Dropdown'; Props 1. trigger Type: string (required) default: click | hover description: drop-down trigger mode, click click trigger menu, hover trigger menu 2. className Type: string (required) default: click | hover description: class:'dropdownType-click' of the outer div of the sub-content | 'dropdownType-hover' 3. disabled Type: bool default value: false Note: the sub-content of the drop-down is grayed out, true is grayed out, false is normal 4. onClickMenuItem Type: func (required) default value: no description: click on a single sub-content to perform the action. Input parameters: {string | number} value | some item selected by key parent of SubMenu child content import import Dropdown from '@/components/Dropdown/Dropdown'; Props 1. trigger Type: string (required) default: click | hover description: drop-down trigger mode, click click trigger menu, hover trigger menu 2. className Type: string (required) default: click | hover description: class:'dropdownType-click' of the outer div of the sub-content | 'dropdownType-hover' 4. title Type: string default value: no description: drop-down button prompts for title Let's implement dropdown.js import React from 'react';…

Why did the React team discard defaultProps ? in functional components come to a conclusion first, because it is not necessary. in functional components, we can declare default properties in the form of JS default parameters, as follows: function Foo({foo = 1, bar = "hello"}) { let props = {foo, bar}; //... } The advantage of this is that React 's defaultProps is a black box for most teams. if we put the behavior of the default property in the function component definition, it is more controllable from the point of view of code quality. so what was defaultProps designed for? React the team thinks defaultProps is very useful in classes. because props objects are passed to many different methods: life cycle, callback, and so on. Each function has its own context that requires an initial default value. This makes it difficult to implement using the JS default parameter, because you have to copy the same default value in each function. The following is an example: class Foo { static defaultProps = {foo: 1}; componentDidMount() { let foo = this.props.foo; console.log(foo); } componentDidUpdate() { let foo = this.props.foo; console.log(foo); } componentWillUnmount() { let foo = this.props.foo; console.log(foo); } handleClick = () => { let foo = this.props.foo; console.log(foo); } render() { let foo = this.props.foo; console.log(foo); return <div onClick={this.handleClick} />; } } to sum up, the role of defaultProps is that in class components, new default values can be used in each lifecycle and scope of methods. therefore, it has been implemented in subsequent updates of the React team: using…

recently, t3dotgg, a foreign netizen, suggested that React officially use Create React App to create a new project instead of in the document . It is recommended to use Vite to create a new project . Most netizens agree with this: React's new official document is about to be released (99% is now complete). However, Create React App is still recommended in the Beta version of the official document to create a new project. Two additional alternatives are provided: Vite , Parcel . looking at Create React App's Github repository, we can see that it has not been updated for 5 months, accumulating 1500 + issues . on January 31, Dan Abramov, a core member of the React team, responded to this suggestion, explaining the tradeoffs made by React team members and providing some options. Let's take a look at the details (you can skip to the final conclusion)! Evolution of Create React App when Create React App was released in 2016, the environment of the tool was decentralized. If you want to add React to an existing application, you need to add a & lt;script> tag or import from npm, and then adjust the existing build tool configuration. However, if you want to create a new application built only using React from scratch, there is no clear way to do this. before Create React App, you must install a bunch of tools and connect them together, provide correct presets to use JSX, make different configurations for development and production environments, provide correct settings for resource caching, configure linter, etc.,…

8 Mock.js installation and use in the process of development, in order to make it easier for the front end to debug the interface alone, Mock.js is often used to intercept Ajax requests and return preset data. This section describes how to use Mock.js in a react project. perform installation: npm install mockjs --save create a new mock.js under src, as follows: import Mock from 'mockjs' const domain = '/api/' // Simulating the getData interface Mock.mock(domain + 'getData', function () { let result = { code: 200, message: 'OK', data: 'test' } return result }) then introduce mock.js: into src/index.js import React from 'react' import ReactDOM from 'react-dom' import App from './App' import { Provider } from 'react-redux' import store from './store' + import './mock' import './common/style/frame.styl' ...（summary） it's so simple. In this way, when a / api/getData is requested in a project, it is intercepted by Mock.js and the data written in mock.js is returned. 9 solve the cross-domain problem of local development in the react development environment, port 3000 is started by default, while the back-end API service may be on port 80 of the machine, so cross-domain problems may occur during ajax requests. Reverse proxy can be implemented with the help of http-proxy-middleware tools. perform installation: npm install http-proxy-middleware --save-dev create a setupProxy.js under src, as follows: const proxy = require('http-proxy-middleware'); module.exports = function (app) { app.use( '^/api', proxy({ target: 'http://localhost', changeOrigin: true }) ) } this code means that as long as the request address starts with "/ api", it will reverse proxy to the http://localhost…