Keep updated.
- Use Chrome DevTools Like a Senior Frontend Developer
- Use VSCode Like a Senior Developer
- 5 JavaScript Tips I Learned From Vue Source Code
- Why Proxy is a Gem in JavaScript?
- 5 Vanilla JavaScript Tips I Learned from Vue Source Code
- Functions in JavaScript Have More Secrets Than You Think
- Clean Up Your Code by Removing ‘if-else’ Statements
- You Must Understand These 14 JavaScript Functions
My Email:
bytefish.medium@outlook.com
It’s nice to meet you in the vast crowd, my friend. You are welcome to contact me, anything is fine.
Username
My penname on Medium was bitfish, but the Medium subdomain of this name was used by others. In order to better use Medium’s subdomain, I changed my penname to bytefish.
A coding principle you should know to be an advanced front-end developer.
The creators of the Web have provided us developers with three tools for developing webpages: HTML, CSS, and JavaScript.
Among them:
- HTML is responsible for the structure of a webpage
- CSS is responsible for the presentation style of each element on a webpage
- JavaScript is responsible for the interaction between the page and the user
HTML is relatively simple. CSS and JavaScript are very flexible, and some functions can be implemented in both CSS and JavaScript.
The elegant code should be low-coupled. We should keep these three tools as separate as possible to make our code more maintainable and extensible.
Switch Themes
…
Best Practice of HTTP Caching.
Caching is a common strategy used to improve the performance of a website. The more we use cached resources, the better the responsiveness and the performance of a website will be.
The purpose of the HTTP cache is to reduce repeated requests for the same resource. The downside of caching is that the server may have updated its resources, but the client cache not.
When talking about HTTP caching, you’ve probably heard a lot of technical terms, such as CacheControl, ETag, etc. But here’s the question: there are so many different techniques for caching, so which one? …
Debug with Chrome DevTools and find the solution!
Have you ever been asked such a question during the interview: if a webpage freezes, what do you think might be the cause? Is there any way to find the cause and solve it?
This is a broad and in-depth question, which involves a lot of page performance optimization issues. I still remember how I answered this question when I was asked in the interview:
- First check whether there are too many network requests, which results in slower data transfer. This problem can be optimized by caching.
- It is also possible that the bundle of a certain resource is too…
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
Chrome Devtools
When explaining the knowledge points related to CSS, I think that…
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:
- Remove a specific item from an array.
- Check if an element is hidden in Javascript.
- What does “use strict” do in Javascript?
- How to redirect to another webpage?
- 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
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.
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 Chaining: …
bytefish
Diagrams are better than words. Animations are better than English. Embed demos are better than code snippets.
