Weather Forecast Component

6 Mar, 2025
By Rainforest Cheng

Random

Positioning the Indicator

To position the indicator correctly, we need to calculate its left and right positions relative to the container. This is done by calculating the percentage of the temperature values within the lower and upper bounds.

left=tempMin−lowerBoundupperBound−lowerBoundleft = \frac{tempMin - lowerBound}{upperBound - lowerBound} right=tempMax−lowerBoundupperBound−lowerBoundright = \frac{tempMax - lowerBound}{upperBound - lowerBound}

and the indicator is positioned using CSS:

.indicator {
  position: absolute;
  left: calc(v-bind(left) * 100%);
  right: calc((1 - v-bind(right)) * 100%);
}

Visualizing Temperature Ranges

The gradient background visualizes temperature ranges, transitioning from cool to warm colors. The “from” and “to” endpoints represent the positions correlating with the lower and upper bounds of these temperatures. As the temperature approaches the lower bound, it shifts towards cooler hues like teal, indicating a smaller proportion of warm color in the mix. Conversely, as the temperature nears the upper bound, it transitions to warmer tones such as amber, reflecting an increased presence of warm colors. This effect is implemented using the color-mix function in CSS, which allows for blending colors based on these position ratios relative to the bounds.

warmness=temp−lowerBoundupperBound−lowerBoundwarmness = \frac{temp - lowerBound}{upperBound - lowerBound} 
.indicator {
  --color-source-from: var(--color-teal-500);
  --color-source-to: var(--color-amber-300);
  --color-from: color-mix(
    in oklab,
    var(--color-source-from),
    var(--color-source-to) calc(v-bind(left) * 100%)
  );
  --color-to: color-mix(
    in oklab,
    var(--color-source-from),
    var(--color-source-to) calc(v-bind(right) * 100%)
  );
  @apply bg-gradient-to-r from-(--color-from) to-(--color-to);
}

Tailwind CSS with LitElement for Efficient Web Development

28 Jan, 2025
By Rainforest Cheng

CSS in JS

import style from './theme.css?inline';

@customElement('md3-lit')
export class RfMd3Lit extends RfTwLit {
  static override styles = [unsafeCSS(style.replaceAll(':root', ':host'))];
}

Define properties with defaults

@customElement('md3-lit')
export class RfMd3Lit extends RfTwLit {
  static {
    if (!isServer) {
      const styleSheets = Object.entries(
        getSchemeProperties(defaultTheme.schemes.light)
      ).map(
        ([key, color]) =>
          unsafeCSS(`
      @property ${key} {
        syntax: "<color>";
        inherits: true;
        initial-value: ${hexFromArgb(color)};
      }
    `).styleSheet as CSSStyleSheet
      );
      document.adoptedStyleSheets.push(...styleSheets);
    }
  }
}

Streamline Your User Experience: Leveraging enterKeyHint for Better Accessibility

16 Jan, 2025
By Rainforest Cheng

Address Input

When aiming to deliver an exceptional user experience, consider utilizing the enterKeyHint attribute. This feature provides guidance on what action should be taken when the Enter key is pressed, thereby enhancing accessibility for users who rely on screen readers and other assistive technologies. On iOS devices, the ‘Done’ button on keyboards often leads users to close the keyboard inadvertently, which can result in missed form submissions due to a lack of understanding about the grey-colored return key’s purpose. By incorporating enterKeyHint, you can mitigate this issue and create a more intuitive experience for your users.

Multi-line Address Input

Taiwan
Blogs Posts