DEV Community: Sujan Sundareswaran

I made a monospace font for your IDE

Sujan Sundareswaran — Mon, 19 May 2025 02:38:52 +0000

✨ Buy it here: https://archetypefoundry.gumroad.com/l/parse-grotesk-mono

So, I’m one of those guys who need everything in their workspace to be juuuuuust right. I need everything setup the way I want it, and the font is one of the things that we stare at the most while writing code.

“It’s legit insane how legible it remains at my 12pt size on my retina screen 🔥”

— m0xieman

“Heh, finally a monospace font with some character, in today’s barrage of soulless geometric fonts”

— balestraw

While there are tons of great fonts out there, I wante—nay, needed to make my own.

Here’s Parse Grotesk Mono—
Heads-up, the dev.to image compression makes it fuzzy.

I’ve made a couple of other fonts as well, will share those here soon. Meanwhile, please support a dev!

✨ Buy it here: https://archetypefoundry.gumroad.com/l/parse-grotesk-mono

Any designers here who are looking to start a bit of coding?

Sujan Sundareswaran — Sat, 22 Mar 2025 12:57:59 +0000

Any designers here looking to start doing some UI code?

Sujan Sundareswaran — Sat, 22 Mar 2025 02:22:30 +0000

I wish more designers wrote code

Sujan Sundareswaran ・ Dec 14 '24

#webdev #ui #react #design

Made a whimsical theme toggle, with CSS and emojis

Sujan Sundareswaran — Mon, 16 Dec 2024 03:54:24 +0000

You can check it out in action here: https://fictoan.io/

It’s all CSS, and two lines of JS, just for the rotation trigger. I wanted to make it into a bigger scene, but wanted to share this right away!

Can you spot all the micro-details here?

Full code:
https://github.com/fictoan/fictoan-docs/tree/main/src/components/Header/ThemeToggle

I wish more designers wrote code

Sujan Sundareswaran — Sat, 14 Dec 2024 17:34:28 +0000

I know this can be a touchy topic for many—but let me start by saying I’m a designer myself, but I’m slowly turning into a front-end dev. It’s one thing to mock up the design, but its entirely another to bring to life and deploy it yourself.

I’ve been doing this for a few years now, and I came up with a React UI library to help me do the things I do, faster. Over time, with a whole bunch of my own elbow grease, and the magnanimous help from a few other devs in the company I work at, have made this into a full-featured framework that’s used in pretty much all the UI that we build.

I wanted to share that with the rest of you here: https://fictoan.io/

While the Docs are still fairly a work-in-progress, the components themselves are mostly not, and would be great if you folks would share your opinions on this.

Now, it’s not just another component library.

It’s main selling point is the declarative, unambiguous syntax.

The target audience for any code is always you and your team—the compiler doesn’t care about formatting, line breaks or naming conventions. What if code was understandable and obvious at first glance?

Here’s an example of Tailwind markup used to create an input field, with a search icon on the left, and arrow icon on the right:

<!-- Tailwind input with icons ================== -->
<div className="relative w-full max-w-md">
      <div className="absolute
left-3 top-1/2 -translate-y-1/2 text-gray-400">
        <Search size={20} />
      </div>
      <input
        type="text"
        className="w-full rounded-lg border border-gray-300
py-2 pl-10 pr-10 focus:border-blue-500
focus:outline-none focus:ring-1 focus:ring-blue-500"
        placeholder="Search..."
      />
      <button className="absolute right-3 top-1/2
-translate-y-1/2 text-gray-400 hover:text-gray-600">
        <ArrowRight size={20} />
      </button>
    </div>

Now, the same thing in Fictoan:

// Fictoan input with icons =======================
<InputField
    label="Search"
    iconLeft={<SearchIcon />}
    iconRight={<CheckboxIcon />}
/>

Here’s another example of an oft-used Card component:

<Card padding="small" bgColour="red-light20" borderColor="red-dark-40">
  <Text size="large" horizontallyCentreThis>
    Hello there!
  </Text>
</Card

The British/US spelling is no typo—either work!

Here’s some layout code:

<Row horizontalPadding="small">
  <Portion desktopSpan="half" mobileSpan="8">
    <SomeComponent />
  </Portion>

  <Portion desktopSpan="10" mobileSpan="one-sixth">
    <SomeComponent />
  </Portion>
</Row>

The fractions define a portions of 24-column grid.

Here’s another:

<CodeBlock withSyntaxHighlighting language="jsx" showCopyButton>
  import { CodeBlock } from "fictoan-react";
</CodeBlock>

Are you seeing where I’m getting at?

Now, don’t get me wrong. Tailwind works, and it’s popular for a reason. But, I also think its one of the main reasons why designers find code intimidating—it’s the unfamiliar syntax. It’s cryptic, unintelligible and scary at first glance.

What if code was a lot more cleaner, friendly and self-explanatory?

And, there are a million frameworks aimed at developers, who are already spoilt for choice—Bootstrap, Chakra, Shadcn, Bulma—the list is endless.

What if the entry barrier was lower for designers looking to implement their designs? What if they could also bring to life their ideas more easily?

In any case, those interested, please do take it for a spin, would love to hear your thoughts!

Again, the Docs I’m still working on, so bear with me if something is incomplete/broken!

Question for FE devs—how do you collaborate with designers?

Sujan Sundareswaran — Wed, 27 Nov 2024 15:42:43 +0000

So—what is your workflow like when the designers hand-off their designs? Is it transactional, or very collaborative? What is your preference?

Do you mind/prefer that the designers offer to make tweaks in the code (just UI, not the logic), or is it very hands-off?

Just trying to get a sense of how different devs operate.