https://www.chenshaowen.com/en/tags/frontend/Recent content in Frontend on Shaowen Chen's WebsiteHugo -- gohugo.ioen©2016 - {year}, All Rights Reserved.Sat, 13 May 2023 00:00:00 +0000weeklyhttps://www.chenshaowen.com/en/blog/get-webassembly-programs-using-go.htmlSat, 13 May 2023 00:00:00 +0000Sat, 13 May 2023 00:00:00 +0000https://www.chenshaowen.com/en/blog/get-webassembly-programs-using-go.html1. Introduction to WebAssembly Cross-platform: it can run on any platform that supports WebAssembly, including web browsers, servers, and mobile devices High performance: it uses a compact binary format that can be loaded and parsed quickly in the browser, improving application performance Security: it uses a sandbox model that isolates the code running inside it, protecting the system from malicious code微信公众号GoWebAssemblyFrontendR&Dhttps://www.chenshaowen.com/en/blog/django-full-stack-optimization-guide.htmlThu, 15 Nov 2018 00:00:00 +0000Thu, 15 Nov 2018 00:00:00 +0000https://www.chenshaowen.com/en/blog/django-full-stack-optimization-guide.htmlAs the data volume exploded, the system responded very slowly. We carried out a series of optimizations on the application, and the system’s response time improved by an order of magnitude. Overall, optimizations in file compression and faster network access gave a noticeable boost to frontend performance, while optimizations in stored procedures, caching, and logic code gave a noticeable boost to backend performance.微信公众号DjangoPythonOptimizationFrontendBackendGuideR&Dhttps://www.chenshaowen.com/en/blog/using-axios-in-vue.htmlMon, 25 Jun 2018 15:00:00 +0000Mon, 25 Jun 2018 15:00:00 +0000https://www.chenshaowen.com/en/blog/using-axios-in-vue.html1. Installing axios Install with npm 1 npm install axios --save There are two ways to register it globally: Bind it to the prototype 1 2 import axios from "axios"; Vue.prototype.axios = axios; With this approach, every Vue object gets a new axios object. 1 2 3 this.axios.post(apiUrl).then((res) => {微信公众号FrontendInterfaceAPIVuejsAxiosR&Dhttps://www.chenshaowen.com/en/blog/front-webpack-practice-of-gitlab-ci.htmlWed, 08 Nov 2017 09:15:56 +0000Wed, 08 Nov 2017 09:15:56 +0000https://www.chenshaowen.com/en/blog/front-webpack-practice-of-gitlab-ci.htmlStarting with GitLab 8.0, GitLab began integrating CI (Continuous Integration) functionality. You only need to add a Runner on the server and a .gitlab-ci.yml file in the project, and you can run CI. In GitLab Setup and Configuration I recorded the whole process of setting up a GitLab service from微信公众号FrontendContinuous IntegrationToolsDevOpsGitLabCICDhttps://www.chenshaowen.com/en/blog/control-of-static-file-version-in-django.htmlFri, 06 Oct 2017 09:58:43 +0000Fri, 06 Oct 2017 09:58:43 +0000https://www.chenshaowen.com/en/blog/control-of-static-file-version-in-django.htmlTo respond quickly to user needs and meet the requirements of marketing campaigns, internet products usually have a very high release frequency. Adopting agile development shortens the delivery cycle and speeds up product iteration, but it also brings challenges to a project’s file management. Frontend engineering faces users directly, bears微信公众号DjangoFrontendJavaScriptFilesR&DVersionhttps://www.chenshaowen.com/en/blog/axios-ajax.htmlFri, 04 Aug 2017 07:07:11 +0000Fri, 04 Aug 2017 07:07:11 +0000https://www.chenshaowen.com/en/blog/axios-ajax.html1. Basic Concepts 1.1 Ajax Ajax stands for “Asynchronous JavaScript and XML”. At its core it is made up of the JavaScript, XmlHttpRequest, and DOM objects: through the XmlHttpRequest object it sends an asynchronous request to the server, gets data back from the server, and then uses JavaScript to manipulate微信公众号FrontendToolsAxiosAjaxAPIhttps://www.chenshaowen.com/en/blog/page-uses-a-custom-font.htmlTue, 01 Aug 2017 19:30:47 +0000Tue, 01 Aug 2017 19:30:47 +0000https://www.chenshaowen.com/en/blog/page-uses-a-custom-font.html1. Font-family The fonts you can use on a web page are limited to the handful of fonts already installed on the PC the browser is running on. Windows operating system, Chinese fonts: SimHei (Hei) SimSun (Song) NSimSun (New Song) FangSong (FangSong) KaiTi (Kai) FangSongGB2312 (FangSong GB2312) KaiTiGB2312 (Kai GB2312)微信公众号FrontendCSSR&DFontsLearninghttps://www.chenshaowen.com/en/blog/symmetric-encrypted-transmission-of-aes.htmlWed, 26 Jul 2017 18:52:18 +0000Wed, 26 Jul 2017 18:52:18 +0000https://www.chenshaowen.com/en/blog/symmetric-encrypted-transmission-of-aes.html1. Basic Concepts Symmetric encryption: Symmetric encryption is an encryption method that uses a single-key cryptosystem, in which the same key is used both to encrypt and to decrypt the information. Because it is fast, it is often used to encrypt the transmission of large amounts of data. DES (Data微信公众号SecurityFrontendBackendEncryptionR&Dhttps://www.chenshaowen.com/en/blog/book/the-101-of-ecma-script.htmlTue, 27 Jun 2017 20:05:01 +0000Tue, 27 Jun 2017 20:05:01 +0000https://www.chenshaowen.com/en/blog/book/the-101-of-ecma-script.htmlAuthor: Ruan Yifeng Publisher: Publishing House of Electronics Industry Publication year: 2014-8-1 ISBN: 9787121238369 E-book微信公众号BooksJavaScriptFrontendLearninghttps://www.chenshaowen.com/en/blog/mock-server.htmlFri, 16 Jun 2017 21:10:54 +0000Fri, 16 Jun 2017 21:10:54 +0000https://www.chenshaowen.com/en/blog/mock-server.htmlIn frontend-backend separated development, when the backend API is not finished, the frontend cannot continue debugging. So that frontend and backend can develop in parallel, the frontend needs a set of API interface environments — this is the Mock API. The diagram below lays out the development flow nicely. Without a Mock data step, frontend-backend integration takes up a great deal of time.微信公众号FrontendBackendMockR&Dhttps://www.chenshaowen.com/en/blog/xss-cheat-sheet.htmlSat, 20 May 2017 09:12:31 +0000Sat, 20 May 2017 09:12:31 +0000https://www.chenshaowen.com/en/blog/xss-cheat-sheet.htmlIf you use the Chrome browser to test XSS vectors, disable the browser’s XSS interception first. First, close all Chrome browser processes, then run: 1 chrome.exe -args --disable-xss-auditor --args --disable-web-security Enter non-web-safe mode. 1. Injecting HTML/JavaScript with the <> tags 1 <script>alert('XSS')</script> 1 '';!--"<XSS>=&{()} 1 2 //The quotes around SRC can be omitted <SCRIPT SRC=http://ha.微信公众号SecurityXSSR&DVulnerabilityFrontendhttps://www.chenshaowen.com/en/blog/how-to-export-excel-quickly-in-web-development.htmlThu, 18 May 2017 17:51:05 +0000Thu, 18 May 2017 17:51:05 +0000https://www.chenshaowen.com/en/blog/how-to-export-excel-quickly-in-web-development.htmlIn web development you often run into the need to export data. This post mainly covers how to quickly export data and save it as an Excel file. 1. Frontend In web development, formatted data is usually displayed as a table. Below is an employee salary table; we will use微信公众号DjangoFrontendDataDemohttps://www.chenshaowen.com/en/blog/front-auto-build-tools-gulp.htmlTue, 28 Jun 2016 21:59:04 +0000Tue, 28 Jun 2016 21:59:04 +0000https://www.chenshaowen.com/en/blog/front-auto-build-tools-gulp.html1. Frontend Automated Build Tools When dealing with frontend scenarios, you write CSS with Less, HTML with Jade, modularize with Browserify, and add MD5 hashes to resources for non-overwriting deployments. If all this work were done purely by hand, the efficiency would be extremely low. A frontend automated build tool微信公众号FrontendgulpToolsR&DBuildLearningAutomation