I am creating another UI Library, yes the title is correct.
And yep, I know it’s unnecessary, and yes, I’m not a front-end developer. But hear me out…

I’ve decided to create a centralized and unified design language for both my personal projects and my professional work. The inspiration for this UI? Glassmorphism—a current design trend famously embraced by Apple.

You’re allowed to call me a copycat. But in my defense, I’ve been fiddling with neomorphic-glassmorphic UIs for ages now. My latest GitHub page? Built entirely under my creation (before apple announced liquidglass). I know I’m more of a systems engineer than a front-end’er, which is why I’ll be developing this UI as an extension of SRF.JS.


So, What Is SRF.JS?

Before we dive into the technical details of my UI library, let me ask you something:

Have you ever wondered why some websites load content without refreshing the entire page?

If you’re a web dev, this might sound like Web Development 101. But for any hardware enthusiasts or everyday tech readers following along, let me break it down. Imagine this:

In the traditional approach to serving content, we render a separate document for each page. This is why, every time you click on a new link, your browser reloads. Frustrating, right?

Well, JavaScript gives us a sneaky workaround—manipulating the DOM dynamically! By doing so, we can update the page’s content on the fly without a reload. Here’s an ultra-basic example of what I mean:

<span id="my-element">Loading...</span>

<script>
    setTimeout(() => {
        let my_element = document.getElementById("my-element")
        my_element.innerText += " Loaded Successfully!"
    }, 5000)
</script>

I’m pretty confident you don’t need me to explain this—it’s basic English after all.

What did we just do here? We dynamically updated the content on the page using a short snippet of JavaScript. Frameworks like React take this concept further and make such updates super-efficient.

This brings me back to SRF.JS—a framework I originally built to handle dynamic UI components, bootstrap replacements, and more. It plays nicely with almost every web technology since it’s just a tiny JavaScript file. Oh, and it’s fast—which is impressive considering I built the first version in under 25 minutes.


The New Kid on the Block: My UI Library

Now, I’m building something new—this time, a fully fleshed-out UI library. It’s going to be a strong contender to bootstrap and, hopefully, even Tailwind. I said hopeful, didn’t I?

This library will focus on glassmorphic design elements, offering a sleek, modern aesthetic. My aim is to balance innovation with simplicity, ensuring that anyone—front-end dev or not—can use it seamlessly.

What do you think?

Why Am I Doing This?

You may still be asking, “Why, though?” And to that, I say: innovation doesn’t come from following trends—it comes from playing with them until you make something unique. Plus, there’s a sweet satisfaction in knowing you built it. (Also, I need a consistent UI through my oss projects 😀 Win win?)


And that’s all for today! Hope to see you on the next one. Until then


Subscribe to my newsletter

Leave a Reply

Your email address will not be published. Required fields are marked *


ABOUT ME

Hey there! I’m Metin, also known as devsimsek—a young, self-taught developer from Turkey. I’ve been coding since 2009, which means I’ve had plenty of time to make mistakes (and learn from them…mostly).

I love tinkering with web development and DevOps, and I’ve dipped my toes in numerous programming languages—some of them even willingly! When I’m not debugging my latest projects, you can find me dreaming up new ideas or wondering why my code just won’t work (it’s clearly a conspiracy).

Join me on this wild ride of coding, creativity, and maybe a few bad jokes along the way!