web dev tings

It's taken me over 4 years...

But I think I finally have the perfect method for nailing ☀️/🌙  modes in @figma

Here's my step-by-step process 👇

How to use local custom fonts in nextjs/tailwind

Learn how to create dynamic blur data URLs for images in Next.js.

A blur-up placeholder technique demonstrated with a photo by <n>Luca Bravo</n>.

CSS Trick ✨

You can create this glitch hover effect by animating pseudoelement content 🎬

button:hover span:after {
  animation: flip 0.2s calc(var(--i) * 0.05s);
}
@​keyframes flip {
20% { content: '_'; }
40% { content: var(--c1); }
60% { content: var(--c2); }
}

It's a funky…

Convert local time to EST using JavaScript

Sometimes you have to work smarter not harder.

For analyst ratings, we exported a static SVG for the background instead of fiddling with the graphing library.

3 minutes of work vs 3 hours+

Mastering Responsive Web Design with Tailwind CSS: A Comprehensive Guide

Moment Timezone | Home

CSS Trick 🤙

You can create an infinite logo marquee with blurred entry/exit and without repeating elements 😎

1. Animate the elements, not the track
2. Use two overlays with elements that progressively blur 🫠

This one's for @AllanMcAvoy 🙏

How to read text file in react

UI && CSS Tip! 🤙

You can create this morphing signup button component with View Transitions and linear() easing ⭐️

document.startViewTransition(() => {
  form.dataSet.state = "open"
})

input { view-transition-name: form-input; }
[data-state=open] input { width: auto; }…

the little details™

Use trigonometric functions in CSS to create a smooth staggered transition delay 🎬

.character {
  transition-delay:
    calc(sin((var(--index) / 12) * 45deg) * 0.475s);
}

Future CSS Tip! 🍏

You can create that Apple style blow out text effect with CSS scroll-driven animations ⚡️ No JavaScript!

The trick is to animate SVG text along the z-axis using 3D transforms 👀

.word {
  animation: blow-out both ease-in;
  animation-timeline: --section; 👈…

Could you make this tear strip with CSS alone? ✅

Should you? Probably not 😅

┬┴┬┴┤•ᴥ•ʔ├┬┴┬┴

UI && CSS Tip! 🚀

You can use View Transitions to create that @radix_ui style theme switcher 👀

::view-transition-new(root) { animation: reveal;}
keyframes reveal {
  0% { clip-path: polygon(...);}
  /* Code 👇 */
}

Animate clip-path between modes 😍

@CodePen link below! 👇