Frontend beer
@FullTimeVue
31 subscribers
15 photos
3 files
516 links
SOFU
Download Telegram
About
Blog
Apps
Platform
Join
Frontend beer
31 subscribers
Frontend beer
https://twitter.com/argyleink/status/1688619003126886400?s=52&t=HHPE0yPKLMDJXVppPVq0nw
51 views
Frontend beer
https://twitter.com/jh3yy/status/1690004573572747264?s=52&t=HHPE0yPKLMDJXVppPVq0nw
47 views
Frontend beer
https://twitter.com/jh3yy/status/1692586829961187741
X (formerly Twitter)
jhey ▲🐻🎈 (@jh3yy) on X
Future CSS Tip! 🔮

You can create responsive animated text reveals with CSS scroll-driven animations 🔥

section { /* The red element in the video */
view-timeline-name: --section;
}
p {
animation: fill both linear;
animation-timeline: --section;
animation…
45 views
Frontend beer
https://x.com/jh3yy/status/1695223468071989554?s=52&t=HHPE0yPKLMDJXVppPVq0nw
X (formerly Twitter)
jhey ▲🐻🎈 (@jh3yy) on X
It was this one! 👇

You can create an Apple dock style interaction for your site using a combination of CSS trigonometric functions and CSS :has() (C'mon Firefox! 🙌) 😎

.block:has( + :is(.block:hover, .block:focus-visible)),
:is(.block:hover, .block:focus…
47 views
Frontend beer
https://x.com/steveschoger/status/1695139153753604384?s=52&t=HHPE0yPKLMDJXVppPVq0nw
X (formerly Twitter)
Steve Schoger (@steveschoger) on X
Lately I've been relying on opacity for borders instead of solid colors. Really useful on elements like inputs that have a subtle box shadow. I’ve found that having the shadow poke through the border gives you a much more crisp looking edge.

‘lil tip I picked…
52 views
Frontend beer
https://x.com/madewithvuejs/status/1695110337811423735?s=52&t=HHPE0yPKLMDJXVppPVq0nw
51 views
Frontend beer
https://x.com/madewithvuejs/status/1696515585889185844?s=52&t=HHPE0yPKLMDJXVppPVq0nw
X (formerly Twitter)
MadeWithVueJS (@MadeWithVueJS) on X
Demana lets restaurant and bar owners create a digital menu that customers can use to order & pay directly 🥘 Their website and app are #madewithvuejs and @vuetifyjs! - https://t.co/E5eVBjqbua
41 views
Frontend beer
https://x.com/jh3yy/status/1696978822157988177?s=52&t=HHPE0yPKLMDJXVppPVq0nw
X (formerly Twitter)
jhey ▲🐻🎈 (@jh3yy) on X
Future UI && CSS Tip! 😍

You can use View Transitions to power form micro-interactions ⚡️

This caret morph is powered by this 🤙

.caret {
view-transition-name: caret;
}
::view-transition-new(caret),
::view-transition-old(caret) {
animation-duration:…
44 views
Frontend beer
https://twitter.com/davidm_ml/status/1697175338361500140
X (formerly Twitter)
David Mraz (@davidm_ml) on X
Image zoom hover effect with pure CSS 👨‍💻 Nice and easy way to make your images more interactive 🚀
48 views
Frontend beer
https://twitter.com/jh3yy/status/1705359842523701520
X (formerly Twitter)
jhey ▲🐻🎈 (@jh3yy) on X
✨New✨ article day!

You can create elastic and bouncy CSS easing with the linear() function 🔥

:root { /* Generated elastic ease 👇 */
--elastic-out: linear(
0, 0.2178 2.1%, 1.1144 8.49%,
...
1.0056 72.24%, 0.9981 86.66%, 1
);
}

button {
…
41 views
Frontend beer
Channel photo updated
Frontend beer
Channel name was changed to «Frontend beer»
Frontend beer
https://x.com/nanouusymeon/status/1706171453714907273?s=52&t=HHPE0yPKLMDJXVppPVq0nw
32 views
Frontend beer
https://twitter.com/_georgemoller/status/1706643357403935174
X (formerly Twitter)
George Moller (@_georgemoller) on X
⚛️ React Tip: Clean up your code by using absolute imports + module aliases ↓
31 views
Frontend beer
https://twitter.com/nuxt_js/status/1706680945254764807
X (formerly Twitter)
Nuxt (@nuxt_js) on X
Nuxt UI Figma Kit is out 🖌️

https://t.co/7fwWWtHhrx
33 views
Frontend beer
https://x.com/jh3yy/status/1707514774685106581?s=52&t=HHPE0yPKLMDJXVppPVq0nw
X (formerly Twitter)
jhey ▲🐻🎈 (@jh3yy) on X
CSS Trick ⭐️

You can create a resizable panel UI with CSS alone by leaning into resize and display:grid 👀

.panels{
display: grid;
grid-template-columns: auto 1fr; 👈
}

.resizer{
max-width: 100cqi;
overflow: hidden;
resize: horizontal; 👈
}
…
41 views
Frontend beer
https://x.com/dluzar/status/1708457333280440443?s=52&t=HHPE0yPKLMDJXVppPVq0nw
X (formerly Twitter)
David Luzar (dwelle) (@dluzar) on X
I forgot that setTimeout evals first arg if string, so it can be even shorter:
44 views
Frontend beer
https://auto-animate.formkit.com/
Formkit
AutoAnimate - Add motion to your apps with a single line of code
A zero-config, drop-in animation utility that automatically adds smooth transitions to your web app. Use it with React, Solid, Vue, Svelte, or any other JavaScript application.
39 views
Frontend beer
So as of recently I’ve been having some trials between Vue composition API and React hooks and the difference is so small that it becomes confusing between very similar APIs with slightly different behaviors. Did something in Vue and React relatively fast as well as of similary quality.
39 views
Frontend beer
Conclusion: Modern frameworks are almost erasing differences - use it your advantage, be open minded and learn your next framework you been eyeing so long.
37 views