The front-end is the front-end part of the website, which runs on the browsers such as PC and mobile terminals and is displayed to users. Front-end technology is generally divided into front-end design and front-end development. Front-end design can generally be understood as the visual design of a website; front-end development is the realization of the front-end code of a website. CSS and JavaScript, as well as various derived technologies, frameworks, and solutions, are used to realize user interface interaction of Internet products.
Front-end development has brought a large number of high-performance mobile terminal device applications with the development of mobile Internet. HTML5, the wide application of Node.js, various UI frameworks, and JS class libraries emerge in an endless stream, and the development difficulty is gradually increasing.
热门文章
"CSS implements a column layout that can be stretched and resized"
Achieving this effect requires the help of the resize feature, which can naturally achieve the element stretching feature. The most common is textarea , which can be stretched by default
<textarea></textarea> 
However, what we need here is not textarea , but ordinary elements. It is also very easy for ordinary elements to achieve this effect, just add the resize attribute in the case of overflow not visible
.resizable {
resize: both;
overflow: scroll;
}"Sass application to achieve theme switching"
Background: There are several different schemes for implementing theme switching, such as using CSS variables, using JavaScript to dynamically load the corresponding theme style files, etc. This article mainly talks about how to use Sass to achieve theme switching.
Essence: As a CSS preprocessor, Sass needs to be compiled into CSS before it can be recognized and parsed by browsers. Therefore, it is not possible to use Sass directly in the browser to achieve dynamic switching similar to CSS variables. Essentially, if there are several themes in the project, it is necessary to define several theme styles in advance and introduce them all.
In most cases, network requests are first-request-first-response. However, in some cases, due to some unknown problems, the requested api may be returned first. The easiest solution is to add a loading state so that the next request cannot be made until all requests are completed.
But not all businesses can take this approach. At this time, the developer needs to deal with it to avoid rendering wrong data.
"The construction steps of front-end monitoring, don't be confused anymore! 》
Before implementing it, you must first have an overall context in your mind and understand the specific process steps for building front-end monitoring. Because the front-end monitoring system is actually a complete full-stack project, not just the front-end, and even the main implementation revolves around data.
Of course, there is another point to explain. The realization of this article is mainly for ordinary business and for the direction of self-research by small and medium-sized factories. I have seen the monitoring system made by the big factory. It is very complex and powerful, and it is hundreds of millions of data at every turn. In the end, it has reached the direction of big data. I only introduce how to implement the main function, how to solve the problem.
"Building front-end monitoring, how to collect abnormal data? 》
Exception data refers to the execution exception or loading exception triggered by the front-end in the process of operating the page. At this time, the browser will throw an error message.
For example, if your front-end code uses an undeclared variable, the console will print a red error to tell you the reason for the error. Or there is an error in the interface request, and the abnormal situation can also be found in the network panel, whether it is the abnormality of the request sending or the abnormality of the interface response.
In our actual development scenario, the exceptions captured by the front-end are mainly divided into two categories, interface exceptions and front-end exceptions. Let's take a look at how to capture these two categories of exceptions.
"JSONP cross-domain principle and implementation"
Same origin policy (English full name Same origin policy) is a security feature provided by browsers.
The concept officially given by MDN: the same-origin policy restricts how a document or script loaded from the same origin can interact with resources from another origin. This is an important security mechanism for isolating potentially malicious files.
Popular understanding: the browser stipulates that the JavaScript of the A website does not allow the interaction of resources with the non-same-origin website C, for example:
Unable to read cookies, LocalStorage and IndexedDB for non-same-origin web pages
Unable to touch the DOM of non-same-origin web pages
Unable to send AJAX request to non-same-origin address
Pain points:
In daily development, we often refer to many dependent packages in the project, but with the upgrade of dependent packages, the dependencies between our projects are more and more difficult to maintain, and the reference of versions between packages also gives us a headache.
Lerna package management:
As the official website says, Lerna is a management tool for managing JavaScript projects containing multiple packages, optimized for the workflow of managing multi-package code repositories using git and npm.
"Three.js creates a colorful summer 3D dream island🌊"
Before development, you need to prepare the materials required for the page. The island materials used in this article are free models found on sketchfab.com. After downloading the material, open it in Blender, adjust the color, material, size ratio, angle, position and other information of the model according to your own ideas, delete unnecessary modules, reduce the number of faces to compress the model volume, and finally delete the camera and lighting , UV, animation and other redundant information, only the model mesh is exported for backup.
"How to implement a Markdown editor that can scroll precisely synchronously"
unified is an interface for parsing, inspecting, transforming, and serializing textual content using syntax trees, and can handle Markdown, HTML, and natural languages. It is a library, as an independent execution interface, responsible for the role of the executor, calling its ecologically related plug-ins to complete specific tasks. At the same time, unified also represents an ecology. To complete the text processing tasks mentioned above, it needs to cooperate with various plug-ins in its ecology. As of now, there are more than 300 plug-ins in its ecology! Given that there are too many, it is easy to get lost in its huge ecology, which can be described as an ecology of persuasion.
Unified has four main ecosystems: remark, rehype, retext, and redot. These four ecosystems have their own ecosystems, as well as some tools for processing syntax trees and other construction-related tools.
"Problems caused by changing UI library theme in "Front-end BUG Record"
By looking at the styles, we found that they are all UI styles, and there is no style that we manually override.
But there is an anomaly here with four valid styles. Normally, there will be only one. But here I ignored this problem, I thought there were just redundant introductions, or there were multiple externals and peerDependencies without externals.
It seems that the style is in effect, but the effect is not correct. I suspect that there is a problem with theme-p, but it is displayed normally on the document site.
Then we can only find a way to check who introduced this wrong style.
"CSS through walls! too strong"
The brightness property is used to modify the brightness. The value can be a percentage or a numeric value (0.5 = 50%), the default value is 1, but cannot be negative. The closer the value is to 0, the darker the picture will be. When it is equal to 0, the entire picture will be almost pure black; the value can theoretically be infinitely large. When it reaches a certain value, the picture will be almost pure white and can be used. What are you doing here? There is a very common effect that everyone must have seen
"Front-end speech-to-text practice summary"
I recently prepared a technical sharing. I saw a function of speech-to-text that I had done before and put it on slides. I simply sorted it out and shared it with you.
From technology selection, to solution design, to actual implementation, it can be said that the entire link is covered.
Speech transcription flow chart
How does the browser on the PC side record and how to send the voice after the recording is completed?
热门问答
- How to use vue2+el-table to implement Gantt chart?
- Can vue realize dynamic configuration when deploying like the backend?
- js data processing
- Write a js algorithm to delete the values that appear 2 or more times in the array with one loop
- Why not use localhost when axios sends requests to the backend in a production environment?
- When I use the plugin plaiceholder in next.js to deblur the image, why does it get stuck when there are a lot of images?
- How to understand the difference between recursion and dynamic programming?
- animation to achieve seamless scrolling animation will be blank
- If a web page operation itself only triggers one reflow/redraw, is there any advantage to virtual dom?
- How to use webapck to handle special files, such as xx.lock files
课程推荐
"Front-end Big Data Visualization Practice"
Course gains:
- Master a ubiquitous and growing need for technology
- Improve your own technology and broaden your front-end vision
- Strengthen hard power and seize promotion opportunities
- Based on the bottom layer of the computer, moving forward to the front-end architecture
PS: What technical content do you want to see, you can leave a message in the comment area~
If you have any questions, you can add Ms. WeChat~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。