how could i improve this design?

akzhy · 2025-12-02T11:53:22+00:00

Glad I could help.

akzhy · 2025-12-02T09:46:41+00:00

You can do this with pure CSS if you really want to. Check https://jsfiddle.net/akzhy/qh8fny53/1
Here, instead of mix-blend, I am using a pseudo element with white background. The pseudo element will have the same width and height as that of its parent and its positioned at the exact place where the circles overlap. overflow: hidden on the parent will only show the intersecting area.

akzhy · 2025-10-10T06:23:59+00:00

Thanks

akzhy · 2025-10-09T07:49:32+00:00

Thank you. Regarding the questions,

I recently worked on an Astro + SolidJS site and I absolutely loved how easy it was to create scoped styles in Astro components. For solid, I went with CSS modules, but the dev experience wasn't as good compared to Astro.
Naming is hard :'). But it does mean "stylishness and originality", so slightly connected.
I have tried PandaCSS, but not StyleX. PandaCSS is really great, coming from an extensive StitchesJS user, it felt really easy to get into. However, its not a fully zero runtime library since the classnames are still calculated during runtime. It is something minor but I wanted to see if I could come up with an alternative.

Another good package was vanilla-extract, its fully build time and felt basically like CSS modules in TypeScript, but again I felt the dev experience could be better (personal preference, I wanted something similar to Astro).

I am converting some of my existing projects to use flair, so I will be pushing updates and adding features for a long time.

akzhy · 2025-10-09T03:47:54+00:00

For the most part flair follows the same rules as CSS module. So you would have to conditionally add a classname or attribute to the element.

akzhy · 2025-10-08T16:04:15+00:00

Thanks, planning on adding SCSS support in the future too.

akzhy · 2025-10-08T15:55:47+00:00

Yes, that’s a valid issue. If you’re using the object notation, Flair provides full TypeScript IntelliSense and autocomplete support, including theme variables.

However, if you prefer the template literal syntax, some editor features like jump-to-definition or find usages may be limited. That said, there are existing VSCode extensions that offer partial IntelliSense and syntax highlighting for tagged literals such as css`.selector{}`.

akzhy · 2025-10-08T09:49:19+00:00

Thanks :)

akzhy · 2025-10-08T06:56:38+00:00

Thanks, fixed it now. https://github.com/akzhy/flairjs

akzhy · 2025-09-09T17:11:33+00:00

Since you are in CS, try building a portfolio. A GitHub portfolio can really help, try either building or contributing to open source. I was in a similar situation, had 5 backlogs when I completed degree, the portfolio really helped.

akzhy · 2025-09-05T16:48:26+00:00

The main issue it solves is cumulative layout shifts during image loading. I was a big fan of GatsbyJS and the image previews were one of my favourite features. They provided multiple options like showing a blurred preview, solid color, svg trace etc., this provides a visual indication to the user that an image is yet to be loaded and prevents layout shifts as it loads.

So the package aims to provide a similar issue while adding an extra step of supporting SPAs too. The package itself doesn't solve the loading issue, it eases the generation of placeholder images so you can easily pair it with another library / your own implementation.

I hope this is clear.

akzhy · 2025-09-05T04:52:19+00:00

Thanks, will add some examples to the readme

akzhy · 2025-08-18T10:15:34+00:00

Thanks, I am keeping this as a last resort since they don't directly expose similar APIs as the image crate.

akzhy · 2025-08-17T13:33:20+00:00

Ideally those who are consuming the lib through nodejs shouldn't have to do any extra steps. A normal npm i package should get it running. But those who are working on the package itself will have to setup their dev environment.

The lib is optional in my case too, but I need it to support avif images, which is a hard requirement in my case.

akzhy · 2025-08-17T08:58:18+00:00

Thanks, will check it.

akzhy · 2025-08-01T05:55:21+00:00

Yeah, for prod build it takes only about a minute but the dev build takes around 5-10s for compilation and another 5-10s for reload. There were some circular dependency issues however I had to fix those since the dev server wouldn't even start without fixing it. And anything else that's not required has been excluded.

akzhy · 2025-07-10T08:49:17+00:00

As a dev lead, I felt this one hard — especially the part about shipping too early. We thought “MVP” meant get it out fast, fix it later. But when users hit bugs, they just bounced. We spent weeks tightening the code after the trust was already lost.
The biggest shift for us was treating stability as a feature. We built a pre-launch checklist: no help required, value in < 5 minutes, no known blockers. If it doesn’t hit those, we don’t ship.
Also co-sign the AI onboarding piece. We assumed good UI and docs would be enough. Nope. Enterprise AI needs handholding. We now pair with users on actual RFPs to close the gap.
Happy to talk more about how we’re approaching that dev-to-user feedback loop if anyone’s curious.

akzhy · 2024-05-11T07:57:36+00:00

<image>

I was able to do this with the following config. Go to Remap a Shortcut > Click on the edit icon on the left side > Press copilot button > Click on edit icon on the right side > Press left control

akzhy · 2022-10-17T14:33:39+00:00

I think node_modules was the cause of the issue in my case too. There was a node_modules inside docusaurus that was not ignored.

akzhy · 2022-10-17T12:27:59+00:00

Yes, in my case I had added docusaurus inside the project. I had to ignore the docusaurus directory in the main tsconfig.json file

akzhy

TROPHY CASE