Excited to introduce Pillar-UI, a lightweight React design system focused on accessibility and developer experience (DX)! Explore it and share your feedback! If you like it, please consider adding a star, thanks

Hamza Miloud Amar — Tue, 28 Jan 2025 16:12:37 +0000

Introducing Pillar-UI: A New React Design System

Hamza Miloud Amar ・ Jan 23

Introducing Pillar-UI: A New React Design System

Hamza Miloud Amar — Thu, 23 Jan 2025 15:29:21 +0000

Hey friends! I've got some exciting news to share with you all. After 2 years of work, we're finally launching Pillar-UI a brand new design system that's all about making your React apps faster, more accessible, and a whole lot easier to build. I know how frustrating it can be to deal with slow load times. That's why we've built Pillar-UI from the ground up with performance, accessibility, and developer experience in mind. I'm excited to share it with you, and I think you're going to love it!

Performance Deep Dive

So, what makes Pillar-UI's bundle size so remarkably tiny? We're talking about a library that's an impressive 9 times smaller than some of the other popular React design systems out there!

The answer lies in our thoughtful approach to theming and styling. By leveraging the power of CSS, we've avoided relying on CSS-in-JS libraries or large theming providers. This approach has allowed us to keep our JavaScript bundle size to a minimum.

But that's not all. We've also use used power of CSS variables to streamline our design and reduce the bundle size even further. Gone are the days of cumbersome JavaScript conditions and workarounds!

Under the hood, we've implemented a state machine-like structure that eliminates a ton of unnecessary code and conditions. This means our library is not only smaller but also more efficient.

We've also developed a clever naming convention for our class names, making them shorter and more unique to minimize conflicts with your custom class names.

Finally, we've employed techniques like tree shaking to eliminate unnecessary code and optimize our library for faster load times. The result? A design system that's remarkably small, blazingly fast, and optimized for performance.

Accessibility Focus

At Pillar-UI, our focus is not only about performance, but we try our best to make our design system accessible to everyone. That's why we've integrated a range of accessibility features into our design system, including:

Follow WCAG guidelines out of the box.
Support RTL languages.
Support Windows High Contrast Mode.
We Do our best to make the color contrast ratios of our components accessible.
Use Reduce Motion to avoid janky animations for users with motion sensitivity issues.
Support font size adjustment in zoom mode.
Use Semantic Markup when possible to make the library accessible and lightweight.
Make it Color-blind Friendly Design

Developer Experience (DX) and Getting Started

Beyond performance and accessibility, we've poured our hearts into making Pillar-UI as simple and enjoyable to use as possible. Let me share a little story with you: I've been there, wrestling with some React design systems, where simple things like styling hundreds of buttons became a nightmare. Imagine every button in your project is sharp, with no border radius and the library default is radius.

You've got two common solutions when you want to make the corner of those button sharp: either you tweak each button individually or create a new component just for that. But honestly, this is time-consuming? That's where our design system shines. We leverage CSS variables to set default styles, making customization a breeze. Here's how you can do it

:root {
  --button-rad: 0;
  --button-size: 1rem;
  --avatar-transform: uppercase;
}

.footer {
  --button-rad: 1rem;
}

This means you can easily customize the look across your entire project or just a part of it. Want rounded buttons in your footer? Just tweak --button-rad there, and voila, all buttons in the footer get that rounded love without you having to change each one. And remember, this isn't just about buttons; every component in Pillar-UI has a set of default values you can change once per project. To see these, go to any component documents section, scroll down to the bottom, and you'll find them.

Getting started

Ready to dive in? We've prepared a set of examples to help you get started with Pillar-UI in React, as well as popular frameworks like Next.js and Remix. For more information and to explore these examples, head over to our documentation site.

Pillar-UI: More Than Just a Design System

While Pillar-UI is primarily a design system, it's also a collection of useful packages that can enhance your React development workflow. Here's a brief overview:

Hooks

Pillar-UI includes a set of reusable hooks that can help simplify your code and improve performance. From state management to side effects, our hooks are designed to make your life easier.

Icons

We've curated a collection of high-quality icons that you can use in your Pillar-UI applications. Our icons are carefully crafted to ensure consistency and visual appeal.

Utils

Our utility package includes a range of helpful functions and tools that can aid in tasks such as data formatting, validation, and more. These utilities are designed to save you time and reduce boilerplate code.

By providing these additional packages, we aim to make Pillar-UI a one-stop-shop for your React development needs. Whether you're building a complex enterprise application or a simple web app, Pillar-UI has got you covered.

Roadmap and Future Plans

Pillar-UI isn't just a project; it's a community-driven adventure. We've got exciting plans on the horizon, including:

We're open-source, which means this design system is ours. We hope to work together to improve it. If anyone finds any issues or needs a new feature, please let's discuss it!

Call to Collaboration

I'm inviting you to join us on this exciting journey! Whether you're passionate about fixing bugs, suggesting features, or discussing UI design, your input is invaluable. Let's build something amazing together.

This design system belongs to all of us. We hope to collaborate and improve it together. If you find any issues or need a new feature, let's discuss it!

Join the Pillar Community

Here's how you can get involved:

GitHub Discussions: Share ideas, ask questions, and get feedback.
GitHub Issues: Report bugs, suggest features, and track progress.
Discord Community: Connect with fellow developers, share your wins, and get help when you're stuck.
Star the Repo: Help others discover Pillar UI and join our community

Remember, this project is about more than just code – it's about building a supportive, inclusive, and fun community. Happy coding!

Web Rendering Patterns Made Simple: A Beginner's Guide

Hamza Miloud Amar — Sat, 17 Aug 2024 11:38:29 +0000

Hey there, fellow web enthusiasts! 👋

Before we dive in, I wanted to let you know that this article is an introduction article series about rendering patterns on my portfolio. If you're curious, you can check out the full, chatty version on my website. It's written like a fun conversation, making it super easy to follow along. But for now, let's keep it simple and straightforward here on dev.to!

Now, let's talk about web rendering patterns!

What Are Web Rendering Patterns?

Imagine you're building a house. You have different ways to construct it, right? Some methods are quick, others are fancy, and some are a mix of both. Web rendering patterns are kind of like that, but for websites.

They're different ways to build and show web pages. Each way has its own good points and not-so-good points. Knowing these patterns helps you pick the best way to build your website.

Why Should You Care?

Understanding these patterns is important because they affect:

How fast your website loads
How smooth it feels to use
How well search engines can find your site
How easy it is to update your site

The Main Rendering Patterns

Here are the main patterns we'll be looking at:

Static Sites

Multi-Page Applications (MPA)

Client-Side Rendering (CSR)

Server-Side Rendering (SSR)

Static Site Generation (SSG)

Incremental Static Regeneration (ISR)

Hydration

Progressive Hydration

Streaming Server-Side Rendering

Island Architecture

Server Components

Some Important Terms

Before we go further, let's learn some key words:

Time To First Byte (TTFB): How quickly the server starts sending data
Time to Interactive (TTI): When you can start using the website
First Contentful Paint (FCP): When you first see something on the page
Largest Contentful Paint (LCP): When the biggest part of the page shows up
Pre-rendering: Making web pages ahead of time
Meta Frameworks: Special tools that make building websites easier
Isomorphic Rendering: A way to make websites fast and interactive at the same time

Wrapping Up

Understanding these patterns is super helpful if you want to make great websites. Each pattern has its own use, and knowing when to use them can make your websites much better.

This is just the start of our journey into rendering patterns. If you want to learn more about each pattern, with examples and how to use them, check out my full guide on my portfolio site.

Remember, the key is not just knowing these patterns, but understanding when to use them. Happy website building! 🚀

If you find any errors or have suggestions for improvement, please let me know! Your feedback is valuable in making this content even better.

Forem: Hamza Miloud Amar

Excited to introduce Pillar-UI, a lightweight React design system focused on accessibility and developer experience (DX)! Explore it and share your feedback! If you like it, please consider adding a star, thanks

Introducing Pillar-UI: A New React Design System

Hamza Miloud Amar ・ Jan 23

Introducing Pillar-UI: A New React Design System

Performance Deep Dive

Accessibility Focus

Developer Experience (DX) and Getting Started

Getting started

Pillar-UI: More Than Just a Design System

Hooks

Icons

Utils

Roadmap and Future Plans

Call to Collaboration

Join the Pillar Community

Web Rendering Patterns Made Simple: A Beginner's Guide

What Are Web Rendering Patterns?

Why Should You Care?

The Main Rendering Patterns

Some Important Terms

Wrapping Up