Dev_Ryomi

Philip Walton Optimizing for quality of user experience is key to the long-term success of any site on the web. Whether you're a business owner, marketer, or developer, Web Vitals can help you quantify the experience of your site and identify opportunities to improve. 사용자 경험의 질을 최적화하는 것은 장기적인 웹 사이트 성공의 핵심입니다. 당신이 사업자, 마케터, 또는 개발자든 상관없이, Web Vital은 사이트의 경험을 정량화하고 개선할 기회를 식별하는데 도움이 될 수 있습니다. overv..

Hiding website elements can be useful for a variety of reasons, such as protecting sensitive information, restricting access to premium content, or personalizing content for specific user groups. For example, we may want to hide certain promotions or offers from users who have already made a purchase or personalize content based on a user’s geographic location or browsing history. We can use CSS..

Hidden Choices display: none has been the favorite solution to hide elements for many years, but it’s been superseded by more flexible, animatable options. It’s still valid, but perhaps only when you want to permanently hide content from all users. transform or opacity are better choices when considering performance. 'display: none'은 오랫동안 요소를 숨기는 가장 인기 있는 방법이었지만, 더 유연하고 애니메이션 가능한 옵션들로 대체되었습니다. 여..

Introduction There are occasional instances where content should be made available to screen reader users but hidden from sighted users. In the vast majority cases, content that is available visually should be available to screen reader users, and vice versa. Verbose cues or instructions that are only read by screen reader users usually do more harm than good. However, there are a few cases wher..

author: Airbus A380Ti Though these two might sound the same, visibility: hidden and display: none works differently and can be used for several different cases. Let’s see the difference between them and their use cases here. 이 둘은 같아 보이지만, 'visibility: hidden'과 'display: none'은 다르게 동작하며 여러 다른 경우에 사용될 수 있습니다. 이들의 차이와 use case를 살펴봅시다. Visibility: hidden When you use this CSS property on an element,..

Author: Santiago García da Rosa We are always looking for ways to improve how our clients manage their images, we have made that part of our mission and part of our culture. 우리는 고객들이 이미지를 관리하는 방법을 개선하기 위한 방법을 찾고 있고, 이는 우리의 미션과 문화의 일부입니다. Working with one of our clients, we noticed that their image traffic on mobile was three times more, compared to similar websites. When we started investigating..

회사에서 프로젝트를 진행할 때, 모든 아이콘을 svg로 처리하고 있다. 최근에 svg를 최적화할 수 있는 SVGO라는 라이브러리가 있다고 하여 도입하게 되면서, svg에 대해, 그리고 SVGO에 대해 알아볼까 한다. SVGO와 관련된 내용은 공식문서와 관련 에세이를 번역했다. 먼저, 자주 사용하는 이미지 형태에 대해 알아보자. Image formats SVG (Scalable Vector Graphics): - 벡터 기반의 이미지 형식으로, 확대/축소해도 이미지의 선명도와 질이 유지됩니다. - XML 기반의 형식이며, 코드로 작성되어 편집이 용이하고 검색 엔진 최적화에 유리합니다. - 아이콘, 로고, 차트 등 복잡한 그래픽을 표현하는 데 적합하며, 반응형 디자인에도 용이합니다. JPG/JPEG (Join..

TypeScript is a popular programming language that offers static type checking and advanced features for working with complex data structures. One important concept in TypeScript is type narrowing, which allows developers to make precise assertions about the types of variables in their code. In this article, we will explore how to use Type Predicate Functions to narrow types in TypeScript. 타입스크립트..

최근 ECMAScript 2023 Specification이 확정되었다. 이는 자바스크립트 프로그램을 더 예측가능하고 유지관리할 수 있게 하는 배열 method를 포함한다. toSorted(), toReversed(), toSpliced(), with()는 data를 변경하지 않고 data 복사 후 이를 변경함으로써 배열에 작업을 수행할 수 있게 한다. 그 차이 당신의 프로젝트에 이들을 적용하는 방법을 배워보자. Mutation and Side effects 배열은 항상 다소 기이하다. sort(), reverse(), splice()와 같은 method는 배열 그 자체를 변경한다. cancat(), map(), filter()와 같은 다른 method는 배열을 복사한 후 그 배열을 조작한다. 배열을 ..