Olivia
Online
Alex Garrixen
@AlexGarrixen
Front-end web dev / Contributor in @Anime_Onegai.
Creating beautiful and intuitive interfaces that people can use.
Maker of
🇲🇽
Joined September 2018
149 Following
82 Followers
166 Posts
I built PaletteUI for UI/UX designers, product designers, and frontend developers who want to know if a color palette actually works in a real interface.
Generate a complete 50–950 color scale from a single color and test it in context.
→ Real UI previews for Website & Dashboard
→ Inspect color tokens used by each element
→ WCAG 2 + APCA contrast checking
→ Find accessible color steps
→ Preview your design system in context
→ Export to Tailwind CSS 4, CSS Variables, Sass, JSON & more
Don’t just generate colors. See how they work before production.
Try: 🔗 https://t.co/qCQQvg7PO7
#UIDesign #UXDesign #UI #Frontend #DesignSystems #Accessibility #TailwindCSS
¿Te cuestan los colores de tu UI?
Este recurso te va a ayudar un montón
Te dice si el contraste es correcto...
¡Y te ofrece mejores alternativas con IA!
→ https://t.co/CB7guPIQQh
@UPSMexico Solicito información sobre el estado de mi envío, el cual fue reprogramado debido a un bloqueó en la carretera México-Puebla.
@Segob_Puebla informo que se ha habilito un carril para el libre tránsito. Por lo que me gustaría saber si esto permite reanudar mi envío
It's 2024, CSS has custom timing functions for your animations and transitions ✨
transition: scale 0.5s var(--elastic-out);
--elastic-out: linear(
0 0%, 1.11 8.49%, 1.37 12.94%,
1.36 14.48%, 1.31 16.20%,
0.94 24.01%, 0.86 27.84%, ...
);
Next.js file-based Metadata: `icon`
Add an `icon` file to the app folder and Next.js will generate the correct `<head>` metadata.
Use:
• Image files (.svg .jpg .png)
• Code (.js .tsx) and Next.js APIs to generate an icon e.g. change color based on the current environment
CSS Tip! 📜
You can create scroll-driven micro-interactions with animation-timeline and custom properties 🔥
.search {
animation: shrink;
animation-timeline: scroll();
animation-range: 0 calc(var(--header-height) * 0.5);
}
@keyframes shrink {
to { width: calc(100% - var(--button-size); }
}
The --header-height is being used to dictate the container height for the header. You can use that for the animation-range used across different scroll animations 🤙
For another example, you can animate the box-shadow reveal on the header once the search has stuck 🍡
header {
animation: shadow;
animation-timeline: scroll();
animation-range:
var(--header-height)
calc(var(--header-height) * 1.5);
}
@keyframes shadow {
to { box-shadow: 0 5px 10px hsl(0 0% 0%); }
}
Then you have the little extras! 🧸🎈
Everything powered by the scroll() animation-timeline which hooks into the page scroll. And then using the --header-height in the different animation-range ✨
Give it a try! ⭐️
@CodePen link below! 👇
Improvements in Cool Contrast, my tool for choosing accessible colors that comply with WCAG guidelines!
Thanks to @midudev for his support in continuing to share my tool in his reels🙏.
👉 Live preview: https://t.co/fluAiTGgVi
#uxui #ColorContrastChecker #wcag
3 lines of CSS to make your tooltips/menus stay in view 🤯
(Check it! 👇)
[popover] {
top: anchor(top);
left: anchor(right);
position-try-options: flip-block, flip-inline;
}
Responds to scroll, layout change, etc. Watch the nested menu 👇
Anchor Positioning is coming 🚀
React compiler in Next.js 15
¡Brutal Extensión SEO para Programadores Web!
✓ Detecta los errores en tu HTML
✓ Muestra los datos de tu página
✓ Lista enlaces e imágenes
✓ Compatible con SPAs
→ https://t.co/AkAQ2jSTgd
React 19:
Context.Provider → Context
useContext → use
React 19: forwardRef → ref
Maaaaan, React 19 is packed with goodies!
Here are 5 new things
The use() API for promises, the new context API, and the <head> tag hoisting are very welcome additions!
Can't decide on UI colors? Start designing in grayscale 🔲 ⬛️
Here's why it might be beneficial👇
How to improve your UI designs - part 2
UI/UX Designers, don't use #000000 in your designs, use these alternatives instead 👇
Bookmark it for later 💜
PREVIOUSLY:
separate rulesets for light and dark
NOW:
one ruleset with `light-dark()`
To celebrate the launch of the 2nd edition of @practicalUI - I’m giving away 3 FREE copies 🥳
❤️ Like and 🔁 repost to be in the running.
I’ll randomly select a winner on 2 Apr 2024.
Good luck🤞
PS I'd love your support on Product Hunt 👇
https://t.co/GwbN0T1oqF
Warp for Linux is here!
You can now download the Warp terminal for popular distros like Ubuntu, Fedora, Arch Linux, or RedHat.
Last Seen Users on Sotwe
mert şule
Seen from Turkey
DesahanMantan
Seen from Indonesia
Db
Seen from Saudi Arabia
Dean
Seen from Germany
ديوت حقيقي
Seen from Algeria
jorge Rodriguez 🇮🇨
Seen from Spain
MurocaNıN MaliKanesi
Seen from Turkey
doja doja
Seen from Malaysia
Premium Arşiv
Seen from Germany
cowboy ometv
Seen from Malaysia
Most Popular Users
Elon Musk
@elonmusk
241.6M followers
Barack Obama
@barackobama
119M followers
Cristiano Ronaldo
@cristiano
114.1M followers
Donald J. Trump
@realdonaldtrump
111.8M followers
Narendra Modi
@narendramodi
107.2M followers
Rihanna
@rihanna
98.7M followers
NASA
@nasa
92.4M followers
Justin Bieber
@justinbieber
91.8M followers
KATY PERRY
@katyperry
89.8M followers
Taylor Swift
@taylorswift13
83.8M followers
Lady Gaga
@ladygaga
75.3M followers
Virat Kohli
@imvkohli
73.1M followers
Kim Kardashian
@kimkardashian
70.8M followers
YouTube
@youtube
68.8M followers
Neymar Jr
@neymarjr
66.1M followers
Bill Gates
@billgates
65M followers
Selena Gomez
@selenagomez
62.9M followers
The Ellen Show
@theellenshow
62.3M followers
CNN
@cnn
61.8M followers
X
@x
60.7M followers