Based on an article by Jake Archibald, this post organizes how modern responsive images should be written: why `width`/`height` still matter, when to use CSS `aspect-ratio`, how to choose between AVIF and WebP, and how to use `picture`/`source`/`srcset` for switching images on mobile.
Making a textarea auto-resize used to require JavaScript to watch scrollHeight. CSS field-sizing: content replaces all of that in one line, supporting textarea, input, and select.
By default, underlines sit very close to the text, and some designers dislike this style. Personally, I don’t think it looks very good either.
Only pay attention to Pixel Perfect when it really matters; otherwise, it often leads to a lose-lose situation.
In web development, the traditional HEX and RGB color notations are widely used, but they are not very readable or intuitive, and their capabilities are limited in wider color spaces such as P3. HSL (Hue, Saturation, Lightness) provides a more intuitive way to define colors, making it easier for developers to understand and adjust them. By describing colors through the three dimensions of hue, saturation, and lightness, HSL makes color adjustment more human-friendly. In design systems in particular, HSL can better represent lightness variations in a color palette.
This article discusses why it's not advisable to set the line-height to 1 in web design, as well as the linguistic issues encountered when using ellipsis.
I’d like to share some experiments I plan to undertake as I approach nearly a decade in software development and front-end engineering. Having navigated through the vibrant and diverse era of front-end development, my experiences have significantly shaped my understanding of the ongoing changes in the field. Although I've already shared numerous articles on my blog, there are still many insights and ideas I wish to convey that remain unwritten.
本篇為 IT 2023 鐵人賽文章：與程式有關的遊戲三選 (1) – A=B
身為一位前端工程師，雖然我們不需要把全部的 HTML 標籤背得滾瓜爛熟，但是常見的 HTML 標籤與使用場景還是要有一定程度的了解，根據不同場景使用。 但是，使用語意化標籤的目的是什麼？我發現很多文章對於語意化標籤往往只停在表面，也就是討論某某標籤應該使用在哪裡，導致網頁上的標籤看似多彩繽紛，但使用者體驗卻沒有得到相對的提升。
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.
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.
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.
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.
Recorded the process and thoughts of migrating the blog from Gatsby to Next.js. Includes the technologies used and implementation details, etc.
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,
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.
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 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.
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.
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.
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.
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.
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.
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.
This article introduces how form tags are handled behind browsers, and how formData can be used in JavaScript to simplify form manipulation
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.
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.
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
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.
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.
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 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
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
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.
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 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 does not work correctly with some versions of mousedown, but mousedown will still work correctly on other devices (like Android, etc.).
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.
Talking about the release of the Samesite policy, I think again about cookies and CORS. Are cookies really dripping? Let's take a look at some of the scenarios.
React 17 released with no major updates or new features, but useEffect's clean up timing has changed quietly. This article does not explain each update one by one, but rather a note of what is worth keeping track of in the article.
As the browser can do more and more, the scope of front-end can be covered more and wider, just the term front-end, you may have multiple branches
When I'm working on the new library, I also study the person (not all of it, or an npm install will take a lifetime to look at). Because the creator of technology is human, the creator of the library is human, the creator of the framework is human, and everyone is flesh and blood.
In part1, we mentioned how to write a JSON parser and implement the function of parsing strings. Next, we add other functions. (In fact, as long as you know the fundamentals, the rest of the function implementations are just as follows)
Today we'll start with parsing JSON and explain how to build a JSON parser from scratch. Due to the simple architecture of JSON, it is a good practice.
Just after I was happy to implement smooth-scroll with svelte, I realized that I could actually achieve it with one line of CSS
Run to see the Svelte source code today，Familiar with the architecture while taking a look at any simple issue can be used to practice。
The mechanism of the feeling rollup itself is not so complete webpack
But the way Svelte is also destinated to encounter some problems，The main thing is that Svelte can not help you do too many things in the runtime。
The first time I saw Svelte, I thought, “Well... is it a new front-end framework yet?” , holding such a mood did not care too much. It began to arouge my curiosity after seeing more and more blog posts and a lot of websites being used later.
Starting with Chrome 80+, samesite in cookies is set to lax by default. We'll start with the definition of samesite and what it's useful for, and reflections on cookies, what I think about the whole thing.
Before hoping to be able to put some things on the front-end development record, but has not been started to do it, taking advantage of the Ironman race all sorted out in one breath. The series is divided into several parts, and there is a chance to continue to write about it in the future. Introduction of JavaScript Basics JavaScript with ECMAScript...
react-transition-group upgrade from v1 to v4 is more important: after the upgrade CSstransitionGroup component was removed leave becomes exit transitionName becomes classenterTimeout...
Instead of introducing the API for react-hooks, this article tries to explore the reasons behind the design from a design perspective. It is divided into sections: The Difference between Function Component and Class Component How to Reuse Similar Logic in Components for High-order Components...
This article is done by looking at Implementing a pin-to-bottom scrolling element with only CSS, and explains how to use JavaScript. Now the more often the page appears, the scroll is positioned to the bottom each time new content is added. Like Twitch...
One day while developing a page, to check that the header fields are correct, open the development tools and see a few more suspicious headers in the request: network. Have you noticed something suspicious? A closer look to find out how there are three to Sec-Fetch...
Many web pages have a variety of scripts to be executed, of course, there will be priority, such as the more important: rendering the UI, registering relevant interactive events, calling the API to fetch data, etc., are high-priority tasks, such as relatively unimportant tasks: Analytic script, lazy loading, initialization comparison Unimportant events. How to count Idle...
In the front-end, we can mainly send requests in two ways: XHR and Fetch. XHR is from, um... That had an API a long time ago. However, because it is troublesome to set up, it is often wrapped into higher-level APIs, such as Jquery getJSON, axios, RxJS ajaxObservable...
CORS and cookies on the front end is a very important problem, but most of the time in development, because the domain of the front and back end is often the same, so rarely to care for these problems. Or just ask the backend to be Access-Control-Allow-Origin...
Array.sort analysis This article is not talking about things to note in Javascript's native sort. For example, the default sort method will convert the value to String and sort according to the char code, so the above result will appear. Today we're going to explore the implementation behind Javascript sort
Recognize the fact that table is not used as a brilliant visual, recently there is a need to use tables frequently in the background, how to design a good table for users is a challenge, especially in the case of a large number of data pens and many fields, users are easily attracted to additional elements. Actually for rendering data on, table...
react finally released v16，In fact, the introduction of the official blog is quite complete (and pleasing to the eye)。 This article serves as notes and consolidation, streamlining some of the details. ComponentDidPatch (error, info) react16's brightest part, adding errorBoundary functionality to ensure that the life cycle...
Finally, time to organize the recent interview process. Summarize some of the things that we see: Usually, company interviews only test Javascript familiarity, mostly about algorithms or interpreting prototype chains, etc., rarely examines DOM or Event operations. Almost without CSS, even if there is simply a basic question such as class and ID priority. No interview exam HTML...
ramda is a very useful library. If you have heard of lodash or underscore, you can think of ramda as functional programming lodash. Their API has many similarities, except that ramda has FP functions, any API...
Today is the last day of the Ironman race, I feel that the last part of the end of my harvest is not very good, and there are many parts that are not fully introduced because of the relationship between time.
In front-end pages, we often come across layouts that require the same height. The most intuitive way to do this is to set all elements of the container to float or inline-block. float and inline-block If you use float typesetting，Not only to stretch the parent element container (clearfix)，But also for child elements set margin...
Before writing an article about their own idea of css variable，Originally not held much expectations for this attribute，Own used to SASS variables also feel like this CSS variable but like an awkward system，But if you think so people，You can refer to this article
From SASS to PostCSS about a year ago, PostCSS began to fling in the front-end ecosystem, nothing more than the so-called preprocessor features, highly customized their own plugin, the first to use cssnext function, but also with a variety of construction tools (gulp, webpack...
Semantics, Class Naming, Event Propagation