Stripe의 가격 책정 페이지를 다시 만들면서 배운 3가지

프로젝트를 확인하십시오.

My Recreation of Stripe's Pricing Page

원본과 비교:

Stripe's Pricing Page

SVG는 성능 이상의 애니메이션 및 디자인 이점을 제공합니다.

대부분의 사람들은 SVG를 사용하는 것이 웹 사이트 로딩 시간 동안 성능을 절약할 수 있는 좋은 방법이라는 것을 알고 있습니다.

그러나 당신이 모를 수도 있는 한 가지는 SVG 아이콘이 다른 이미지 형식이 할 수 없는 방식으로 쉽게 스타일을 지정하고 애니메이션을 적용할 수 있다는 것입니다.

CSS의 배경 클립 속성을 사용하여 SVG 이미지 아이콘의 색상을 채울 수 있습니다.

호버 상태에서 SVG 이미지의 경로를 모핑하여 SVG 이미지에 애니메이션을 적용할 수도 있습니다.

Z-인덱스 값을 조정하는 것보다 절대 및 상대 위치 지정을 사용하여 배경 요소 레이아웃을 만드는 것이 더 쉽습니다.

많은 웹 페이지와 마찬가지로 Stripe의 가격 책정 페이지는 배경 레이아웃을 사용하여 중요한 고객 메시지에서 사용자를 방해하지 않고 시각적 감각을 더합니다.

이러한 배경 요소는 단순한 배경 색상 전환, 전면 표지 이미지, 영웅 패턴으로 구성될 때 쉽게 만들 수 있지만 배경 자체가 그리드 요소로 구성될 때 개발자는 사용 방법에 대한 약간 더 자세한 이해가 필요합니다. 절대 및 상대 포지셔닝을 구현합니다.

<!-- background color grid -->
<div class="relative min-h-screen">
  <div class="absolute inset-0 transform -skew-y-12 origin-top-left">
    <div class="bg-green-100 grid grid-cols-10 grid-rows-6 min-h-screen bg-gradient-to-r from-green-400 to-green-200 transform">
    <div class="bg-green-200 opacity-50 row-start-3 col-span-2"></div>
    <div class="bg-green-100 opacity-50 row-start-5 col-start-9 col-span-2"></div>
   </div>
</div>

설계 및 엔지니어링의 의도적인 단순성에 대한 깊은 이해

Stripe의 디자인 및 엔지니어링에 대한 연구를 수행하는 동안 블로그에서 훌륭한 콘텐츠를 발견했습니다.

Connect: behind the front-end experience 많은 통찰력을 제공했습니다.

내 주요 테이크 아웃 중 일부:

Stripe의 팀은 이미지 파일 대신 CSS를 사용하여 Stripe의 플랫폼이 장치에서 어떻게 보이는지 렌더링하여 SVG와 같은 효율적인 이미지 파일 형식이 제공하는 것 이상으로 파일 크기를 줄이고 성능을 향상시킵니다.

"We can add hardware-acceleration, animate any part, make it responsive without losing image quality, and precisely position DOM elements (e.g. other images) within the laptop’s display. This flexibility doesn’t mean giving up on clean code—the markup stays clear, concise and descriptive"

<div class="laptop">
  <span class="shadow"></span>
  <span class="lid"></span>
  <span class="camera"></span>
  <span class="screen"></span>
  <span class="chassis">
    <span class="keyboard"></span>
    <span class="trackpad"></span>
  </span>
</div>

서로 다른 유형의 웹 애니메이션 간의 장단점에 대한 설명:

"CSS transitions. This is the fastest, easiest, and most efficient way to animate. For simple things like hover effects, this is the way to go."

"Web Animations API...This should be your default choice for any animation where you need interactivity, random effects, chainable sequences, and anything richer than a purely declarative animation."

내가 재미있게 읽은 몇 가지 다른 Stripe 기사:

To design and develop an interactive globe

"The most straightforward way to animate individual dots is to generate them in a three-dimensional space. To do this, we reused the code from our SVG to generate rows of dots as geometry in Three.js. Each row includes a different number of dots, from zero at the poles to five hundred at the equator. We used a sine function to choose the number of dots for each row, plotted each dot, and applied the lookAt method to rotate each dot to face the center of the sphere. However, the number of dots jumped inconsistently along a few latitudes, creating harsh lines and an unnatural effect in the longitudinal columns."

"we turned off the antialias parameter of the WebGL renderer. This one change not only fixed the issue on high-res monitors, but also improved performance of the animation and smoothness of scrolling on all devices, even those already running at 60fps. One might assume that removing antialiasing would make everything look pixelated. Since it only applies to the edges of the geometry, our image textures were still smooth and gradients and lighting were unaffected."

Designing accessible color systems

"the way HSL calculates lightness is flawed. What most color spaces don’t take into account is that different hues are inherently perceived as different levels of lightness by the human eye—at the same level of mathematical lightness, yellow appears lighter than blue."

"When we take a sample of colors with the same lightness and saturation in a perceptually uniform color space, we can observe a significant difference. These colors appear to blend together, and each color appears to be just as light and as saturated as the rest."

How Stripe teaches employees to code

"It’s easy for familiarity with code to become a barrier between different groups within a technology company: lots of companies have an upper tier of code-wrangling wizards that are supported by the rest of the company, sometimes known as the non-engineers. From the beginning, we’ve tried hard to avoid this at Stripe. In seating, we mix engineering teams with non-engineering teams. When we hire, we seek out engineers who are excited about problems beyond code itself."