Introduction

In terms of CSS architecture, there are three mainstream methods: OOCSS, SMACSS, and BEM. The purpose of introducing these architectures is to make CSS easier to maintain. You can refer to @arvinh’s Introduction to CSS Methodology and Atomic CSS for an introduction and comparison of these methods.

However, today we are not going to talk about the above three methods, but another method that is not as mainstream (but seems to be slowly gaining popularity) and is not easily accepted at first glance: functional CSS.

Read More

Introduction

A few days ago, I read this article by Dan Abramov, the creator of Redux: Things I Don’t Know as of 2018. After reading it, I felt quite touched. I had been thinking about things related to confidence recently and had made a simple summary in Can I Be Called a Senior Engineer Two Years Later?.

Coincidentally, I also saw some updated learning roadmaps for 2019 these days. Some comments still say things like “Why do front-end developers have to learn so much?” “How can we learn everything?” “Front-end is so difficult,” etc. Although these two things seem unrelated, I think they are actually related.

Read More

Preface

Recently, I was busy with the product redesign of my company, switching from the original PHP to backend Go + frontend React SPA. It was divided into two different projects, desktop version and mobile version. Since we were redesigning, we naturally wanted to include the latest and coolest PWA in our goals. Although I had heard of PWA for a long time, I had never implemented it before, so I had the opportunity to try it out.

Now that the product has been redesigned and has been online for two or three months, it has gradually stabilized. In the process of optimizing PWA, I have gained some experience that I can share with everyone.

Before giving some practical examples, let’s talk about what PWA is.

Read More

Introduction

CORS (Cross-Origin Resource Sharing) has always been a classic problem in front-end development. Simply put, due to some security considerations of the browser, you will encounter some restrictions when loading resources from other domains. The solution is simple, just add some response headers such as Access-Control-Allow-Origin on the server side. With this header, the browser will recognize that you have been verified and there will be no problem.

I have written an article about this problem before: Understanding Ajax and Cross-Origin Requests, which details the problems encountered and their solutions.

I thought that since I had delved into this problem last time, CORS would never be a problem for me again, and I would never see the error of “forbidden to access cross-origin” in the console.

But I was wrong.

This time, I stumbled in a specific use case, but I also learned a lot from it. This experience also reminded me of what I wrote before: The most difficult cookie problem I have ever encountered.

Great, there is something to share with you again!

Read More

Introduction

I recently came across this article on Hacker News: Show HN: A CSS Keylogger, which opened my eyes and inspired me to study it in depth and write an article to share with everyone.

This article will cover the following topics:

1. What is a keylogger
2. The principle of CSS keylogger
3. CSS keylogger and React
4. Defense methods

Alright, let’s get started!

Read More

Introduction

I have been interested in RxJS for quite some time. I first learned about it through redux-observable, a middleware for Redux that Netflix uses to solve complex asynchronous problems. At that time, I hadn’t even figured out redux-saga, and I didn’t expect another new thing to come out.

Half a year ago, I spent some time searching for information on the internet, trying to understand the whole thing. However, for me, many of the tutorials were either too fast-paced or too detailed, making it difficult for beginners to follow.

This time, I had the opportunity to try to introduce redux-observable into a new project at work. As someone who advocates for its adoption, I must have a certain understanding of this thing. With this idea in mind, I spent some time last week studying the relevant resources again and gradually came up with a method of “I think I can explain RxJS more clearly” and share it with you here.

Before we begin, I want to give a big shoutout to last year’s iT 邦幫忙鐵人賽 Web group champion: 30 Days to Master RxJS. This series of articles is very comprehensive, and you can feel that the author has put a lot of effort into it. If you are interested in more applications after reading this article, you can read the entire series of articles.

Okay, let’s get started!

Read More

Introduction

I came across an article on Hacker News about Payment Request API — Now Being Implemented in All Major Browsers, which means that Payment Request API will be implemented in mainstream browsers.

Before that, I had never heard of it and had no idea what it was doing. But after a little research, I found out that it is the future of web payment interface.

Read More

Preface

This post (You go your way, I’ll go mine: Front-end Separation) is one of the articles I wrote for the iT Ironman Contest. After receiving some feedback, I decided to revise and clarify the article.

If you have the following questions, this article is perfect for you:

1. Why does the front-end have MVC?
2. What is the difference between front-end MVC and back-end MVC?
3. Why do we need SPA (Single Page Application)?

Read More

Introduction

When learning to write web pages, you usually start with HTML and CSS, which are responsible for creating and beautifying the layout. Once you have a solid foundation, you start learning JavaScript to create interactive effects. In addition to user and browser interactions, don’t forget about the interaction between the client and server, which means you must learn how to use JavaScript to retrieve data from the backend server. Otherwise, your web page data will be static.

The main target audience of this article is beginners in web front-end development. I hope that after reading this article, readers who do not understand how to exchange data with the server or how to connect to APIs can have a better understanding of how to connect to the backend.

Read More

Introduction

(Supplement: Thanks to the guidance of senior othree, it is pointed out that this is actually talking about the order of event propagation in the DOM, so the title and content are revised. The original title is: JavaScript Event Propagation: Capturing and Bubbling)

Today, we bring you the event propagation mechanism in the DOM, and the code related to these events, I believe everyone should be familiar with, that is addEventListener, preventDefault and stopPropagation.

Simply put, it is the order in which events are propagated in the DOM, and what you can do with these events.

Why is there the term “propagation order”? Suppose you have a ul element with many li elements underneath, representing different items. When you click on any li, you actually click on ul because ul wraps all li.

If I add eventListener to two elements, which one will be executed first? At this time, it is important to know the execution order of events.

In addition, because the mechanism of some browsers (yes, I am talking about IE) is different, I will not mention those things at all. Those who are interested can study the reference materials attached at the end of the article.

Read More