
u/riti_rathod

Interesting Figma file on UI structure and component organization
Just came across this Figma community file and thought it was worth sharing.
Really liked how it’s structured, clean design patterns, reusable components, and solid inspiration for anyone building interfaces.
https://www.figma.com/community/file/1527646378189493961/mantis-free-dashboard-kit
The easiest way to vertically center a div
If you're centering content inside a container, Flexbox is usually the simplest solution.
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
Why it works -
- align-items: center → vertical alignment
- justify-content: center → horizontal alignment
- height: 100vh → full viewport height
This one-line CSS trick fixes page jumping when scrollbars appear
If your layout shifts a few pixels when a scrollbar appears, this helps:
body {
scrollbar-gutter: stable;
}
Such a tiny property, but it makes the UI feel much smoother.
Modern CSS keeps solving problems we used to hack around for years.
Useful free figma dashboard UI Kit for SaaS/Admin projects
If you design or build dashboards regularly, this free Figma UI kit is worth checking out.
The layouts feel developer-friendly and practical instead of overly conceptual.
https://www.figma.com/community/file/1468460364009262125/berry-free-dashboard-ui-kit
Useful free figma dashboard UI Kit for SaaS/Admin projects
If you design or build dashboards regularly, this free Figma UI kit is worth checking out.
The layouts feel developer-friendly and practical instead of overly conceptual.
https://www.figma.com/community/file/1468460364009262125/berry-free-dashboard-ui-kit
Are you using the CSS :has() selector yet?
I have been experimenting with the :has() selector recently and it honestly changes how I think about CSS selectors.
Example:
.container:has(.active) {
background: #111;
}
Feels like CSS finally got a real parent selector.
Tiny CSS feature that helps reduce repeated color values
Was exploring some CSS tricks recently and found currentColor.
It automatically uses the element’s current text color for other properties.
button {
color: tomato;
border: 2px solid currentColor;
}
So instead of repeating the same hex value everywhere, the border just follows the text color automatically. Pretty useful for buttons, icons, SVGs, hover states, theme systems
Small feature, but makes CSS feel cleaner.
I’ve been trying to rely less on the mouse in VS Code and more on shortcuts lately, and honestly, it makes a noticeable difference once you get used to it.
So I just wanted to share a simple cheat sheet of the shortcuts I use most while working with Windows + macOS.
What are your most-used VS Code shortcuts that you can’t live without?
I’ve been trying to rely less on the mouse in VS Code and more on shortcuts lately, and honestly, it makes a noticeable difference once you get used to it.
So I just wanted to share a simple cheat sheet of the shortcuts I use most while working with Windows + macOS.
What are your most-used VS Code shortcuts that you can’t live without?
I want something:
- Easy to use (not too complicated like full editing software)
- Good for short, clean, modern videos
- Can animate text and UI/visual elements
Free tools are great, but I’m okay with paid ones if they’re worth it.
If you’ve used any good tools for this, please share
I want something:
- Easy to use (not too complicated like full editing software)
- Good for short, clean, modern videos
- Can animate text and UI/visual elements
Free tools are great, but I’m okay with paid ones if they’re worth it.
If you’ve used any good tools for this, please share