If you have read my blog before, you should know that I have always been writing in React and have never touched Vue or Angular. Since I started using React in 2015, I have been using it for work.
However, recently due to work requirements, I started working with Vue. Coincidentally, some readers asked me about my insights on transitioning from React to Vue, so I decided to write a brief post to share my thoughts.
Did you know that when you discuss SSR with your friends, it’s highly likely that your understanding of SSR differs? Let’s take a few scenarios. Which ones do you consider as SSR?
renderToString to render React into a string, but there is no data. The data is fetched on the frontend.renderToString to output HTML. On the client-side, hydration is performed to make the page interactive.Some people believe that any view generated by the backend is considered SSR, so all scenarios 1 to 5 are SSR. Others think that the frontend must be an SPA for it to be called SSR, so scenarios 2 to 5 are SSR. Yet, some people consider hydration as the key aspect of SSR, so only scenario 5 (or 45) is SSR.
Some websites use GIFs for certain images because they are animated and appear more impressive than static images. Sometimes, the need for an animated image arises, such as in the case of stickers where animation is expected.
However, one of the well-known drawbacks of GIFs is their large file size. Especially on mobile devices with higher resolutions, larger images are required. Even if only a 52px image is displayed, a 156px image needs to be prepared, resulting in increased file size. In terms of web development, it is always better to have fewer and smaller resources to load.
Recently, there has been a series of discussions about Tailwind CSS on the Front-End Developers Taiwan Facebook group. The reason for this is another post that has been deleted. I have seen that post, but I won’t talk about what it was about because it’s not the focus of this article.
Anyway, that post sparked a lively discussion among front-end communities on Facebook, and many articles related to technology were quickly added within two or three days.
And many people are actually discussing the concept of Atomic CSS more than the tool Tailwind CSS.
It’s a blog post about a few magical features that I have encountered recently. It is not interesting to say it directly. Let’s start with a few small challenges:
Here are a few magical features that I recently encountered. Let’s start with a few challenges:
If you want to generate a new window on a webpage, there are probably only two options: one is to embed resources on the same page using tags such as iframe, embed, and object, and the other is to use window.open to open a new window.
As a front-end developer, I believe that everyone is familiar with these. You may have used iframe to embed third-party web pages or widgets, or used window.open to open a new window and communicate with the original window through window.opener.
However, from a security perspective, there are many interesting things about iframes, which often appear in the real world or in CTF competitions. Therefore, I want to record some of the features I learned recently through this article.
I believe that in order to understand the JavaScript programming language, it is important to understand the concept of the “execution environment” or “runtime”. Many people are not aware of this concept, which can lead to differences in understanding of JavaScript or other technologies. Therefore, in this article, let’s talk about the execution environment.
Note: In addition to “runtime”, “execution environment” is also used to refer to the same concept, but these two terms are completely different. To avoid confusion, we will use the term “runtime” throughout this article.
Also, “runtime” has many meanings, but in this context, it refers to the runtime environment.
If you don’t know what CTF is, you can refer to my previous article: How to Get Started with Web Challenges in CTF?, which briefly introduces what CTF is and some basic types of challenges.
I played DiceCTF 2021 seriously last year and finally solved 6 web challenges. My experience is here: DiceCTF 2021 - Summary. I took a look at this year’s DiceCTF and was completely shocked. The difficulty level is completely different.
There are a total of 10 web challenges this time, with 1 easy challenge solved by 365 teams, another relatively simple one solved by 75 teams, and the other 8 challenges solved by only 5 teams or less, with one of them unsolved.
As a person who likes web and JS-related tips, this is a great learning opportunity to learn various techniques through the writeup released after the competition. There won’t be notes on all web challenges below, only the ones I’m interested in.
If your website wants to experience new features that have not yet been officially launched by the browser, what should you do?
Usually, these features are already available, but not yet open. Therefore, browsers provide some flags that can be turned on and off. As long as the switch is turned on, you can experience the new features in advance. However, we usually cannot ask users to turn on the switch themselves.
Therefore, Chrome provides a mechanism called origin trials. You can register on the website to obtain a set of tokens. After setting it up, if the user visits your website with Chrome, the new feature will be turned on, allowing your website to use it.
This article will briefly introduce how to use this mechanism.
