比語意化標籤更重要的事
身為一位前端工程師，雖然我們不需要把全部的 HTML 標籤背得滾瓜爛熟，但是常見的 HTML 標籤與使用場景還是要有一定程度的了解，根據不同場景使用。 但是，使用語意化標籤的目的是什麼？我發現很多文章對於語意化標籤往往只停在表面，也就是討論某某標籤應該使用在哪裡，導致網頁上的標籤看似多彩繽紛，但使用者體驗卻沒有得到相對的提升。
我會把一些不成文的筆記或是最近的生活雜感放在短筆記，如果有興趣的話可以來看看唷！
Current Category：前端
Writing Newsletter Websites with Astro
Discussing the requirements for building a newsletter website, Astro was ultimately chosen to create the website. This article will explore the comparison with other static site generators and the reasons for choosing Astro.
2022 Advent Of Code: Cathode-Ray Tube
Suddenly, I thought about recording interesting topics, especially those that can be visualized. If I have extra energy, I will write notes for each day's topic. Anyway, I find the Advent Of Code Day10 problem quite interesting, so I'll record it first.
HTML and CSS can solve many problems, but JavaScript is also very important.
In 2017, I read an article that mainly shared various typesetting techniques achievable with HTML/CSS. Upon first reading, I resonated deeply with it and learned many techniques that I was not familiar with at the time. I highly recommend everyone to take a look. Although JavaScript can solve almost all problems, from the perspective of accessibility design, performance, and bundle size, it is better to use CSS if possible. However, "try not to use JS" does not mean completely avoiding JS, as there are still some differences between the two. In this article, I will reread the aforementioned article and point out some areas that I believe can be improved.
Pseudo-classes used for styling
When using CSS for layout, we process it with corresponding CSS based on styles. Sometimes, we even need to use JavaScript to accomplish it. However, in CSS, there are actually many pseudo-classes that can simplify CSS if used properly. This can also reduce unnecessary JavaScript implementations and is no longer limited to only a few supported browsers as it used to be.
Rewrite the entire blog using Next.js
Recorded the process and thoughts of migrating the blog from Gatsby to Next.js. Includes the technologies used and implementation details, etc.
Exploring the form and data retrieval mechanism of remix
Although some people may think, "Oh no, another framework," Remix does have its unique features. If you have gone through the documentation and followed the most obvious,
Some tricks about reading files in node.js.
In node.js, it is common to use the fs module to manipulate files. However, when dealing with high throughput scenarios, any IO-related operations should be handled with caution.
Integrate Sentry's Web Vitals into Slack.
Many websites now incorporate the process of measuring Web Vitals to identify areas for improvement through quantifiable metrics. However, what fewer people know is that Sentry actually introduced statistical functionality for Web Vitals earlier, which allows developers to track various indicators such as LCP, FP, and CLS. This enables developers to view relevant charts in the backend, and even includes average values, which is quite thoughtful.
From a Frontend Perspective: SwiftUI
From a UI perspective, the challenges faced in frontend and mobile development are similar, despite the differences in languages or development approaches used. We all need to create a user-friendly interface. As such, we will encounter similar problems such as component-based development, state management, data flow, and managing side effects (API or IO), which I find to be a great area for mutual learning.
Drawing lines with WebGL is even more difficult than I imagined.
WebGL does not support lines with a lineWidth greater than 1. Even Three.js does not have support for adjustable line widths. Therefore, I started working on my own implementation for lines.
How to determine if the owners of two domains are the same?
When browsing the web, we often use subdomains to differentiate the content of services. However, determining whether a website is a subdomain or if two websites are SameSite is not as straightforward as it may seem.
Several use cases of useMemo
In frontend applications, it is common to encounter a situation where the displayed value is calculated by combining other values or undergoes some calculation before being inserted into the UI. Usually, this type of processing can be simplified using `useMemo` to reduce code complexity.
Change from prismjs to shiki
shiki is a package that provides syntax highlighting for code. It is relatively newer and less well-known compared to other packages like highlightjs and prismjs. The main reason is that it supports a wider range of languages and is easier to configure. It also comes with a good variety of built-in themes, making it convenient to replace prismjs.
Frontend Anxiety Disorder
This article is only intended to express personal opinions and thoughts and has no intention of criticizing industry peers. I believe that the frontend field (referring to web development) is gradually maturing, with frontend frameworks adopting a component-based approach and responsive mechanisms, combined with framework-specific syntax, development practices, and philosophies, which can handle most usage scenarios.
Reading Temperature and Humidity with Arduino via Web Serial API
Google Chrome 89 introduces the Web Serial API, which allows external devices to interact directly through browser APIs, including USB devices or Bluetooth devices with a serial interface. This enables the browser to communicate directly with hardware.
Application of form tag with formData
This article introduces how form tags are handled behind browsers, and how formData can be used in JavaScript to simplify form manipulation
HTML together to understand which form-data
Forms are a common application in web pages, not only can you transfer plain text, but also upload files. However, because the behavior of form is different from other methods of transmission, there are sometimes doubts and misunderstandings. This article tries to understand the ins and outs of the specification, to understand what the form does in the end, and how forms differ from other transport methods, and finally mention what the HTML does behind the form tag.
Deep Understanding of Svelte (2) — Analyzing Svelte Generating Code
From the core concept of Svelte, Svelte wants to get as much information as possible from the compilation process and reduce overhead in dynamic. In the previous article, we explained how Svelte works from compiling to generating code. Today, look at how the code generated by Svelte works.
4 Reasons to Learn Svelte in 2022
Svelte's attention climbed year by year. This article highlights a few reasons to learn about Svelte in 2022, and will also talk about the shortcomings of Svelte use.
In-depth understanding of Svelte (1) — Svelte Compilation Process
In order to generate the final code, Svelte has to compile the components once to obtain the necessary information. The compilation process from Svelte to the build code will go through several stages, and in this article, we will cover them one by one
An in-depth understanding of Svelte (0) — What is an Abstract Syntax Tree?
This series of articles explores the implementation of Svelte principles, hoping to give readers a deeper understanding of Svelte's compilation mechanism and code generation. Because the Svelte compilation process involves code parsing, this article discusses what an abstract syntax tree is, and further describes the role and importance of an abstract syntax tree.
Hotwire and Turbolinks
Turbolinks is a JavaScript package that is usually used with Ruby on Rails (it can be used as a library alone), mainly by fetching HTML to avoid the cost of re-sending the request and CSS. In fact, “no need to use JavaScript” is not entirely correct, JavaScript is still there, but it's done for you in the library, so you can develop it without writing JavaScript.
linaria - CSS-in-JS solution that doesn't require runtime
linaria is a library that emphasizes css-in-js without runtime. It can use a syntax similar to styled-components, but generates CSS at compile time, thereby reducing overhead for dynamically modifying styles
Data Visualization — Taiwan Sexual Assault Statistics
This time I wanted to implement this topic because I saw a relatively aligned relationship with the news and the data, just to say that Svelte itself can also be promoted, and he was implemented while conceived.
Thinking and Using Scenarios for SSR
When the browser crawls a web page, the crawler crawls the HTML content of the page to generate the content, and it will also cache it in the database and update it regularly. That is, if SSR is not implemented, the html file itself is blank, and the actual page will not be visible until JavaScript is parsed and executed
Vue ref syntax sugar with Svelte
Vue author Youyu Creek recently proposed an RFC, which is about the syntax of ref declarations that can be further simplified with JavaScript label statement. This syntax is like Svelte, record your own ideas here.
Svelte Summit 2020 notes and experience
Svelte is one of my favorite front-end frameworks, the simple syntax and flexibility, the author's philosophy, as well as the use of various animations, cutscenes have made me quite like, and I have written a few articles about their views on Svelte before. The Svelte Summit was held on October 18, 2020, as the pandemic was broadcast live online, with a total of 7 hours and 17 speeches. Here we record some interesting speeches and my own experience.
iOS mousedown event triggering issue
iOS does not work correctly with some versions of mousedown, but mousedown will still work correctly on other devices (like Android, etc.).
Explanation of regular expression to add a number to comma
In general, there is usually a need to display the currency, is to convert the original number into a human-friendly format, in the front end we can achieve it in several ways, such as Intl.numberFormat or regular expressions.