Victor
@vpon
Helping devs, founders and designers fix their UI. 100 UI/UX tips (free) 👉
padding-inline/block are not just shortcuts. These are logical properties. They adapt to writing-mode and direction (RTL, vertical text), unlike physical properties that stay fixed. inline/block depend on text flow, left/right/top/bottom don't. x.com/vponamariov...
CSS tip 💡 Instead of writing: padding-left: 24px; padding-right: 24px; padding-top: 16px; padding-bottom: 16px; You can use padding-inline: 24px; padding-block: 16px; or just padding: 16px 24px; (top/bottom, left/right)
Everyone knows Murphy laws. I think it's time to collect our own list. Because... So. Many. Things. Go. Wrong. 😡 My first one: if someone tells you that something will be done today or tomorrow, it'll be done in 2 weeks. Add yours 👇
Design Engineer needs to know: - UI/UX - Frontend - Accessibility - Product thinking - Prototyping - AI - Different Tools - And much more... Not just code or design.
Every button needs these 6 states: • Default • Hover • Pressed • Focus (for keyboard navigation) • Disabled • Loading The focus state is probably the most forgotten one.
Feedback loop is one of the most basic UX concepts: User acts → System responds → User reacts → System responds again No response = user doesn't know if anything happened = confusion.
UX Puzzle: 1. You go to MacOS settings 2. Type "Screen resolution" in the search Where is the screen resolution?
UI/UX Tip 💡 You don't need an icon for every menu item. Especially when: • They're barely visible • They don't match the label • Half of them look the same Sometimes a clean list of text is more scannable than a wall of tiny, unclear icons.
When did we decide that EVERYTHING needs to float and rounded? Floating buttons, floating panels, floating menus. All with shadows, frosted glass effects and so on. Why does it look like someone's shining a lamp at the UI? What's with all the shadows?
How it works: 1. Target the elements where you don't want selection highlights (e.g. empty paragraphs) 2. Apply ::selection with transparent background 3. Text remains selectable and copyable, just without the highlight inempty paragraphs Browser support is ~82%.
Have you ever noticed when selecting text also highlights empty space between paragraphs? There's an easy one-line fix: ::selection { background-color: transparent; }
CSS Tip 💡 align-content works on regular block elements. .card { display: block; align-content: center; } No flex. No grid. Just blocks. So you can easily align vertically with one line.
UX tip 💡 Show validation feedback for things that can be validated, like the SWIFT code. This little "Valid" label is so reassuring.
Mega menus can be dangerous. Like, actually dangerous. 😱 For example, if yours flashes and blinks that much. You're creating an accessibility hazard that can trigger seizures.
UI/UX tip 💡 Clickable area. The bigger, the better 😅 Product Hunt, how about making the whole area clickable?
UX tip 💡 Got 5 different login options? Mark the one your user picked last time. One tiny label prevents "wait, did I use Google or GitHub?" moments.