• Implementation of extremely thin border (1px border)


    Mobile terminalwebProblems encountered in development: the UI draft requires setting the border to1px, CSS settingsborder: 1px solid #eee;After that, the UI said the border was too thick. that is becausedevicePixelRatioThis is caused by the characteristics. CSS settings1pxyesCSS pixelAnd the UI draft refers toDevice pixelThere is a proportional relationship between them,devicePixelRatio. IPhonedevicePixelRatio == 2, andborder-width: 1pxIt […]

  • CSS – two column layout


    Two column layout (one side fixed width, one side adaptive), should be used frequently in work, can be said to be the front-end foundation. In an interview, however, interviewer: write down all the ways you can think of two column layout on paper. I thought: it’s not easy. Think about it… Suddenly! Don’t say much, […]

  • Es8 (1) — async & await


    catalog The difference between async and ordinary function await Async / await handles multiple callbacks asynchronously Async and await must be used together On the handling of errors in using await M1:try-catch M2:.catch M3: two return values (refer to node) Es6-es10 learning map The difference between async and ordinary function //Ordinary function function fuc() { […]

  • The difference between react routing parameters


    1.params <Route path=’/path/:name’ component={Path}/> <link to=”/path/2″>xxx</Link> this.props.history.push({pathname:”/path/” + name}); To read parameters: this.props.match . params.name Advantage: refresh address bar, parameters still existDisadvantages: you can only pass strings, and if you pass too many values, the URL becomes long and ugly. 2.query <Route path=’/query’ component={Query}/> <Link to={{ path : ‘ /query’ , query : { name […]

  • New idea of state management under react hooks


    Telestate feature 1. State sharing of hooks API. 2. The state can be changed outside the component through dispatch 3. No provider is required, regardless of whether the component is in the scope of provider. 4. The volume is only 4K 5、typescript friendly. shortcoming Class components are not supported at the moment, so you need […]

  • Classic three column layout front entry layout


    1. Float + margin (floating layout) <template> <div class=”container”> <div class=”left”>Left</div> <! — the right should be written in the middle — > <div class=”right”>Right</div> <div class=”main”>Main</div> </div> </template> <style scoped> html,body, .container { height: 100%; width: 100%; margin: 0; padding: 0; } /*Left floating*/ .left { float: left; height: 100%; width: 200px; background: #e056fd; […]

  • Cache penetration


    Cache penetration is to request a large number of data that does not exist originally, such as request a data. At this time, if there is no data in the cache, it will be queried from the database, but the database has no value, so when it returns null, the cache still has no data. […]

  • IOS — advantages and disadvantages of MVC and MVVM


    Advantages of MVC: 1. Ease of use: the smallest amount of code compared with other modes. Many people are familiar with it, so it’s easier to maintain even for less experienced developers. Disadvantages of MVC: 1. Poor testability 2. More and more bulky controller     Advantages of MVVM: 1. Easy to test 2. Easy […]

  • Figure out the advantages and disadvantages of each tree


    preface There are two ways to realize data structure, one is sequential storage, the other is chain storage Sequential storage: the use of a continuous piece of logical address to store dataChained storage: use a pointer to the address of the next element instead of a continuous address Common data structures are: linear table, stack, […]

  • Support API idempotent operation


    background Some APIs of the platform need to ensure the idempotency of the interface, so as to prevent resource waste caused by frequent API brushing, or the impact of message retransmission. Explanation of terms InterfaceidempotentWhen an operation is repeated N times, the result (side effect) is equal to that of one operation. For example, in […]

  • Front end Q & A – how line breaks are output on the page


    In our work, we have the following ways to collect user input Input field, single line, overall style, plain text. Textarea input box, multi line, overall style, plain text. Contenteditable, multiline, independent style, rich text. Other rich text editors, multi line, independent style, rich text. If you don’t want to use such a heavy rich […]

  • Webmix – returns a unified custom response object


    preface [TOC] Generally speaking, the status code of an HTTP request only indicates whether there is a problem with the request, but it can not indicate where the error is. For example, the user is just a business problem and needs to give a warning, but the HTTP status code can not indicate the business […]