Using Vue3, TypeScript, Element Plus, Axios, Husky, Commitizen, Jest, Vite, and GitHub Actions to create enterprise-level development environments.

Vue3 and Vite have been released for a long time, and the author has used this tech stack in many projects. My feeling is that this tech stack can better help us complete the mission. And the ecosystem of Vue3 and Vite is thriving now, which is pretty suitable for enterprise-level development projects.

This article will help you build a standard Vite + Vue3 + TypeScript enterprise-level development environment, step by step from zero.

First, I will work with you to complete the core skeleton of a Vue.js project, using technologies such as Vue.js, VueRouter, and Vuex. Then we will…


Explained with 20 GIFs.

If you were to type the following code in the editor, how long would you need to type?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum mollitia illo deserunt possimus dicta, quod aliquam, fugiat eligendi debitis sed magni, perferendis recusandae tenetur officia ipsa ipsam tempore fugit error!
</div>
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
<li>list 5</li>
<li>list 6</li>
<li>list 7</li>
<li>list 8</li>
</ul>
</body>
</html>

If you use the traditional method of typing line by line, even with the editor’s…


GIFs are better than plain English.

Stack Overflow is the most popular Q&A platform for programmers. If a question is popular on Stack Overflow, you probably have or will have the same type of question.

Here are the top 5 of the most popular CSS questions on Stack Overflow that may be useful for you.

Copyright: the content on Stack Overflow is distributed based on CC BY-SA.

Table of Content

  1. Debugging CSS with Chrome Devtools
  2. Disable Text Selection Highlighting
  3. Horizontally Center an Element
  4. Change an HTML5 Input’s Placeholder Color
  5. Usage of table
  6. Make a Textarea Unable to Resize

Chrome Devtools

When explaining the knowledge points related to CSS, I think that…


Dear friends, do you prefer to use a desktop browser to read articles on Medium or use Medium’s mobile app?

Because the layout and content of my articles are browser-first, and some of the content does not perform well on Medium’s mobile app, I want to do a questionnaire survey.

Thank you for the feedback!


Learn with Stack Overflow

How to remove a specific item from an array?

Stack Overflow is the most popular Q&A platform for programmers. If a question is popular on Stack Overflow, you probably have or will have the same type of question.

Here are the top 5 of the most popular questions on Stack Overflow that may be useful for you.

Copyright: the content on Stack Overflow is distributed based on CC BY-SA.

Table of content:

  1. Remove a specific item from an array.
  2. Check if an element is hidden in Javascript.
  3. What does “use strict” do in Javascript?
  4. How to redirect to another webpage?
  5. How to check whether a string contains a substring?

TOP 1: How to Remove a Specific Item from An array?

  • Views: 8.0 million

EXPLAINED WITH EMBED DEMO

With code snippets and embeds included

Created by the author

Spread Syntax(…) is a feature introduced in ES6 that allows us to extract elements from an iterable object quickly. With this syntax, we can avoid using a lot of complex APIs and write more concise code. After you finish reading this article, I believe you will like this feature.

Note: The embed demo may take a little time to load; please wait for a while.

1. Copy an array

The conventional way to copy an array is to use the slice method of an array.

However, the slice method is intended to capture fragments of arrays, not to copy them. …


A special aspect to understand TypeScript for beginners.

Create by bytefish

When I first learned TypeScript, I noticed that TS code was full of notations that were hard to understand. Some notations also appear in JavaScript, but when they appear in TypeScript, they have a completely different meaning. This used to be very confusing to me.

Later, with further study, I understood the use of these notations and felt their charm. Here are 10 notations that I thought were weird at the time, but now find very useful.

Table of Contents:

· Unions type: | · Intersection Types: & · Numeric Separators: _ · Non-null assertion operator: ! · Optional notation: ? ∘ Optional…

Using XMLHttpRequest with real examples.

Making an HTTP request in JavaScript of browsers’ environment is a prevalent task, and this task is accomplished through the XMLHttpRequest API. Despite having XML in its name, as JavaScript has evolved, it doesn’t have much to do with XML. Now, it might be more appropriate to call it HttpRequest.

The basic purpose of XMLHttpRequest is to send HTTP requests, so before introducing XMLHttpRequest, I want to introduce the basic flow of HTTP transport briefly.

There are three steps for a client from sending an HTTP request to receiving an HTTP response:

  • The client writes the HTTP request message and…

Use Postman to make HTTP requests to the GitHub REST API.

When we learn how to use some HTTP clients, such as XMLHttpRequest, Fetch API, Axios, etc. to make HTTP requests, we need a server to handle our HTTP requests.

Usually, we would build a server-side application manually, but there are two disadvantages to doing so:

  • It’s too much trouble. Setting up a server-side application is not an easy task, especially for beginners.
  • Not easy to share code. The client-side code you write relies on the local server to run, which makes it impossible for someone else to copy your client-side code and run it directly.

To solve this problem, I…

bytefish

Diagrams are better than words. Animations are better than English. Embed demos are better than code snippets.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store