DEV Community: Sidi Jeddou

A new online form builder alternative just dropped

Sidi Jeddou — Fri, 09 Feb 2024 09:20:39 +0000

Revolutionizing Online Form Building: Introducing RapidForms

I’m thrilled to unveil RapidForms, a game-changer in the world of online form creation. As a website owner myself, I understand the frustration of needing sleek, customized forms without the hassle of coding or the burden of hefty monthly subscriptions.

Check RapidForms's launch - I will really appreciate your support on product hunt.

Traditionally, building forms meant grappling with clunky APIs and spending hours coding, diverting attention from core priorities. Moreover, existing form builders often come with unnecessary features bundled into pricey monthly plans, leaving users feeling shortchanged.

RapidForms aims to disrupt this status quo by offering a solution tailored to the needs of makers and small business owners. With RapidForms, you can effortlessly create forms that seamlessly blend with your website's design, all without writing a single line of code.

My journey to RapidForms stemmed from personal frustrations with the limitations of existing form builders. Through extensive research and conversations with fellow entrepreneurs facing similar challenges, it became evident that a new approach was needed.

Many existing form builders rely on subscription-based models, forcing users into recurring payments for features they may not even need. This model doesn't align with the preferences of makers and small business owners, who seek cost-effective solutions that prioritize functionality and design flexibility.

RapidForms addresses these pain points head-on, offering a user-friendly interface and a wide array of customization options to match your unique style. Say goodbye to the frustration of spending hours tweaking form designs or shelling out hefty monthly fees for features you'll never use.

I believe that form building should be intuitive, affordable, and empowering for users. RapidForms is not just a solution; it's a commitment to revolutionizing the way we create and integrate forms online. Join me in shaping the future of online form building with RapidForms – where simplicity meets sophistication, and affordability meets functionality.

Why you should stop using google forms in 2024?

Sidi Jeddou — Tue, 16 Jan 2024 13:55:09 +0000

If you have used google form builder before, this article is definitely for you.

Years ago google forms were super popular, and it was the best choice and the way to go back then, people were using it to create google survey, forms quiz, contact forms …etc.
And everyone was happy, because we didn’t have much choice.
But now I don’t think google forms are the best choices.

Why Google forms aren’t the best in 2024

Outdated Design and Customization: One glaring issue with Google Forms in 2024 is its outdated design and limited customization options. Users are now accustomed to sleek, modern interfaces, and unfortunately, Google Forms seems to have lagged behind in this aspect. Competing platforms offer a more aesthetically pleasing experience with advanced design capabilities that Google Forms simply cannot match.
Lack of Advanced Features: While Google Forms excelled in simplicity, it has fallen short in keeping up with the demand for more advanced features. Users now expect seamless integrations with third-party apps, sophisticated logic branching, and comprehensive analytics. The stagnation of innovation within Google Forms means that users are missing out on the cutting-edge functionalities offered by newer platforms.
Privacy Concerns: As awareness of data privacy grows, users are becoming more discerning about the platforms they trust with their information. Google Forms, being part of the Google ecosystem, raises concerns about data security and privacy. Some users may prefer alternative solutions that prioritize robust privacy measures and are not tied to large tech conglomerates.
Users don’t like it anymore: Google forms became old, and users don’t like them for some reasons, but there are many great alternatives out there that you can use to boost your business with well designed and implemented forms, and I will

Why you should not pay monthly for form builders

I have checked many Form builders, and they all have monthly subscription.

And we all know that we makers/small business founders don’t like to pay monthly for such things, right?

And the other thing we miss is a good editor and the ability to create forms matching our style without using code, and this is something we don’t have in the existing form builder.

So I decided to work on my own form builder which is RapidForms to solve exactly the problems I mentioned above.

And here are some demos

An alternative to form builders you pay for monthly

Sidi Jeddou — Mon, 25 Dec 2023 15:27:57 +0000

I always wanted to build forms that match my website design in easy way, with less cost.

But unfortunately, every time I end up using the API and code the form myself, and that takes time instead of focusing on what matters.

And the worst thing is that I have to pay monthly to get the necessary features with so many features that I don’t need.

Let me introduce you to RapidForms

RapidForms is an online form builder that helps you create shareable and embeddable forms like newsletter, waitlist, and contacts that look great on your website with no effort or coding skills.

Why RapidForms? Here's what we aim to solve:

Easy Design Integration: No more coding headaches! RapidForms empowers you to seamlessly integrate forms into your website's design without sacrificing precious time or resources.
Cost-Effective Solutions:
Forget about paying monthly fees for features you don't need. RapidForms offers a straightforward and cost-effective solution tailored to your form-building requirements, so you do not need to pay monthly fees to build forms and get unlimited responses anymore.
Time Efficiency:
Time is money, and we get that. RapidForms allows you to focus on what truly matters by providing a quick and efficient form-building process.
User-Friendly Experience:
RapidForms is designed with simplicity in mind, ensuring that you don't need a tech degree to create forms that captivate your audience.

If you want to build forms that match your style and getting unlimited responses without paying monthly fees, please check RapidForms out to get access.

Why you should not use Product Hunt as a developer anymore?

Sidi Jeddou — Thu, 14 Sep 2023 14:59:44 +0000

First of all what is product Hunt? product Hun is a popular online platform and community where individuals and companies can discover, share, and discuss new and innovative products and services. It is often described as a place where early adopters, entrepreneurs, investors, and tech enthusiasts gather to stay updated on the latest tech products, apps, websites, and other digital creations.

Why you should use devHunt as a developer instead of Product Hunt?

Product Hunt, once a go-to platform for product discovery, has been facing some challenges. It has become overcrowded, with ads blending into the "real" content, diluting the user experience. Furthermore, the platform's focus on non-developer-oriented products has resulted in DevTools receiving little attention from its predominantly non-technical user base. To compound matters, Product Hunt has turned into a marketing platform, allowing bad actors to promote irrelevant products and artificially inflate upvotes. These issues have been exacerbated by the fact that Product Hunt is owned by AngelList.

How DevHunt started?

DevHunt idea started as a project idea on twitter that solves problems we have, because as you know we developers don't have a perfect platform to launch our development tools. So, we use Product Hunt, which is a bit like a goalkeeper trying to win the best player award. It's tough, and most of the attention goes to the strikers (other products), so after asking our network and fellow dev tools makers on Twitter if it makes sense to build one that we all co-own, the feedback was extremely positive, and this is how DevHunt born.

Our Goal is to make DevHunt the best place for developers and DevTools

Our primary objective is to elevate DevHunt to become the foremost hub catering specifically to developers and aficionados of DevTools. We are dedicated to curating an exceptional platform that not only offers a wealth of resources but also delivers an unrivaled user experience, ensuring that developers find DevHunt to be their go-to destination for all things related to software development tools and technologies.

The key differentiating factor of DevHunt.org lies in its unwavering commitment to serving developers. By focusing solely on products and tools relevant to the developer community, this platform ensures that valuable devtools receive the attention they deserve. With no intrusive ads, users can explore the platform without distractions, immersing themselves in a world curated specifically for their needs.

DevHunt's dedication to authenticity is evident in its strict vetting process. A team of dedicated moderators ensures that only genuine and relevant products make it to the platform. This eliminates the problem of fake upvotes and guarantees that developers can rely on the integrity of the showcased creations.

Conclusion: DevHunt is more than just a joke turned into a real product; it's a testament to the power of community and the determination to create a better, more inclusive platform for developers. As the platform continues to evolve and adapt to the needs of its users, one thing is certain: DevHunt.org is here to stay and will shape the future of product discovery for developers worldwide.

Tailwind CSS vs Float UI: which one is the best in 2023?

Sidi Jeddou — Sat, 24 Jun 2023 19:42:47 +0000

Few days ago, I wrote a blog post about Float UI, and someone commented on it as you can see in the image below, which means some people still don’t understand the difference between Float UI and Tailwind CSS, and in this article I want to clarify some points.

To understand more let’s see what is Tailwind CSS, and what is Float UI, then we gonna learn how they work together.

What is Tailwind CSS

Tailwind CSS is a highly popular utility-first CSS framework that has been gaining significant attention and adoption among web developers. Unlike traditional CSS frameworks that come with predefined styles and components, Tailwind CSS takes a unique approach by providing a comprehensive set of utility classes that can be combined to build custom user interfaces.

At its core, Tailwind CSS focuses on offering a utility-first approach to styling. This means that instead of relying on pre-built components, developers can leverage a wide range of small, single-purpose utility classes to style their HTML elements. These utility classes can be applied directly in the HTML markup, allowing for a more flexible and modular approach to styling.

One of the key advantages of Tailwind CSS is its extensive set of utility classes. The framework provides a vast collection of utility classes that cover a wide range of styling properties such as margins, padding, typography, colors, and more. These classes follow a consistent naming convention, making it easy to understand and apply styles to elements. With Tailwind CSS, you can quickly and efficiently create custom designs without having to write custom CSS code from scratch.

Here are a few examples of Tailwind CSS utility classes in action:


<div class="container mx-auto">
  <!-- The 'container' class centers the content horizontally -->
  <!-- The 'mx-auto' class adds horizontal margin for centering -->
  <h1 class="text-3xl font-bold text-blue-500">Welcome to my website!</h1>
  <!-- The 'text-3xl' class sets the font size to 3xl (extra-large) -->
  <!-- The 'font-bold' class makes the text bold -->
  <!-- The 'text-blue-500' class sets the text color to a specific shade of blue -->
  <p class="mt-4">Tailwind CSS is awesome!</p>
  <!-- The 'mt-4' class adds margin-top of 4 units -->
</div>

Another notable feature of Tailwind CSS is its responsive design capabilities. The framework includes built-in responsive utility classes that enable developers to create responsive layouts without writing media queries manually. By applying responsive classes, you can easily control the appearance of elements across different screen sizes, making your website or application fully responsive and mobile-friendly.

What is Float UI

Float UI is a powerful UI library built on top of Tailwind CSS that empowers web developers to create visually stunning and responsive interfaces. With its extensive library of components, emphasis on responsiveness, customizable design options, and commitment to accessibility, Float UI offers a comprehensive solution for building captivating and inclusive web interfaces. By harnessing the capabilities of Float UI, developers can streamline their development process, achieve consistent designs, and deliver exceptional user experiences.

Float UI goes beyond its comprehensive library of UI components by offering a range of website templates that simplify the process of building responsive sites. With these templates, you can quickly create visually appealing websites that adapt seamlessly to different devices. The inclusion of important SEO elements further enhances your website's visibility in search engines.

Here is an example of Float UI component, a simple banner :

export default () => {
    return (
        <div className="bg-indigo-600">
            <div className="max-w-screen-xl mx-auto px-4 py-3 items-center justify-between text-white sm:flex md:px-8">
                <div className="flex gap-x-4">
                    <div className="w-10 h-10 flex-none rounded-lg bg-indigo-800 flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
                            <path strokeLinecap="round" strokeLinejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" />
                        </svg>
                    </div>
                    <p className="py-2 font-medium">
                        We just launched a new version of our library.
                    </p>
                </div>
                <a href="javascript:void(0)" className="inline-block w-full mt-3 py-2 px-3 text-center text-indigo-600 font-medium bg-white duration-150 hover:bg-gray-100 active:bg-gray-200 rounded-lg sm:w-auto sm:mt-0 sm:text-sm">
                    Learn more
                </a>
            </div>
        </div>
    )
}

Tailwind CSS vs Float UI

Now we have more information about both of them Float UI and Tailwind CSS, so they work with each other, and to make Float UI works we need Tailwind CSS, because it’s built on top of it, and we can’t make a comparison between them in this case, it’s like when you try to compare JavaScript with Reactjs, and which one is the best.

90% of people who use Tailwind CSS don't know these 6 simple tricks

Sidi Jeddou — Wed, 21 Jun 2023 19:21:10 +0000

Tailwind CSS has gained popularity for its simplicity and utility-first approach to styling web interfaces. While many developers are familiar with the basics of using Tailwind CSS, there are some lesser-known tricks that can enhance productivity and streamline development workflows. In this article, we'll explore six simple yet powerful tricks that 90% of Tailwind CSS users may not be aware of.

Styling based on parent state

In Tailwind CSS, you can apply styles to a child element based on the state of its parent element, such as when the parent is hovered or focused. This is achieved using the group feature, which allows you to define a group of related elements that share common styles based on the parent's state.

Let’s see how can we use it in real example, like what’s in this image from Float UI without any javaScript code or external libraries, only Tailwind CSS.

You can watch this example live and play with the code, check it out.

Beautiful gradient background

This kind of gradient backgrounds is so trend now, it’s exists in a lot of websites today, and always looks beautiful if you implemented it in a good way, in this part we will learn how to make something like this using Tailwind CSS, we just user a Hero component from Float UI to save time.

<!-- Background -->
  <div class="absolute inset-x-0 m-auto h-80 max-w-lg bg-gradient-to-tr from-indigo-400 via-teal-900 to-[#C084FC] blur-[118px]"></div>
<!-- End -->

This is the background, check the full code with the preview to see it with the component, and let’s explain the code step by step

absolute: Positions the element absolutely, relative to its nearest positioned ancestor.
inset-x-0: Sets the left and right positions to 0, making the element span the entire width of its container.
m-auto: Centers the element horizontally by setting the left and right margins to "auto".
h-80: Sets the height of the element to 80 units. You can adjust this value as needed.
max-w-lg: Sets the maximum width of the element to a large value, restricting its width within a specific range.
bg-gradient-to-tr: Applies a gradient background to the element that transitions from one color to another diagonally from the bottom-left to the top-right corner.
from-indigo-400: Specifies the starting color of the gradient as an indigo shade with a 400 color variant.
via-teal-900: Specifies an intermediate color for the gradient, transitioning between the starting and ending colors. It uses a teal shade with a 900 color variant.
to-[#C084FC]: Specifies the ending color of the gradient as a custom hex color value, #C084FC.
blur-[118px]: Applies a blur effect to the background, making it slightly blurred. The value specifies the amount of blur to apply, in this case, 118 pixels.

By combining these classes and color values, the code creates a gradient background that starts with an indigo color, transitions through a teal color, and ends with a custom hex color. The background is also slightly blurred using the specified blur effect.

Dark Mode Styling

Tailwind CSS provides built-in support for dark mode styling, allowing you to easily create a dark theme for your application. By adding the dark class to your HTML element, you can activate dark mode and apply specific styles for dark backgrounds, text colors, and more. This enables you to provide a seamless user experience across light and dark modes without writing extensive custom CSS.

And to make it work you have to add this in your tailwind.config.js file like this:

module.exports = {
    darkMode: 'class',
    // ...
}

Here is an example from Tailwind with HTML uses dark mode:

<p class="text-slate-600 dark:text-slate-300">
    Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.
</p>

Tailwind CSS Typography

The @tailwindcss/typography plugin is an official plugin for Tailwind CSS that provides a set of utility classes for styling typographic elements in your web application. It simplifies the process of creating consistent and visually appealing typography by offering predefined styles and configurations.

To get started with @tailwindcss/typography, you need to install it as a dependency in your project:

To install @tailwindcss/typography as a dependency in your project, run the following command in your terminal:

npm install @tailwindcss/typography

After installing the plugin, you need to add it to your Tailwind CSS configuration. Open your tailwind.config.js file and add require('@tailwindcss/typography') to the plugins section:

module.exports = {
    // Other Tailwind CSS configurations...
    plugins: [
        // Other plugins...
        require('@tailwindcss/typography'),
    ],
};

Once the plugin is added, you can start using the typographic utility classes in your HTML markup. The @tailwindcss/typography plugin provides classes for headings, paragraphs, lists, and more. These classes enable you to apply consistent typographic styles to your content without writing custom CSS.

For example, you can use the prose class to style your text content:

<div class="prose">
    <h1>Heading 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

Adapting to dark mode

To make your content look great in dark mode, the Tailwind CSS typography plugin includes a hand-designed dark mode version for each default theme.

To enable it, simply add the dark:prose-invert class to the

element:

<div class="prose dark:prose-invert">
    <h1>Heading 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

Arbitrary properties

Arbitrary properties in Tailwind CSS provide a powerful and flexible way to add custom CSS properties and values directly within your Tailwind utility classes. They allow you to extend the capabilities of Tailwind CSS beyond its predefined utility classes, giving you the freedom to apply any CSS property to your elements without leaving the comfort of the Tailwind ecosystem.

Here’s an example, and you can get a preview and play with the code out, check the demo

<ul class="[&>li:nth-child(2)]:text-3xl [&>li:nth-child(3)]:text-indigo-600">
  <li>First Item</li>
  <li>Second Item Item</li>
  <li>Third Item</li>
</ul>

Smooth images transition

To achieve smooth transitions for images using Tailwind CSS Scroll Snap Align, you can take advantage of the scroll-snap properties and the built-in utility classes provided by Tailwind. Here's a step-by-step guide to implement this:

<div class="flex snap-x snap-mandatory items-center gap-x-3 overflow-x-auto p-4">
  <div class="max-w-lg shrink-0 snap-center snap-always">
    <img class="rounded-lg" src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="max-w-lg shrink-0 snap-center snap-always">
    <img class="rounded-lg" src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="max-w-lg shrink-0 snap-center snap-always">
    <img class="rounded-lg" src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="max-w-lg shrink-0 snap-center snap-always">
    <img class="rounded-lg" src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="max-w-lg shrink-0 snap-center snap-always">
    <img class="rounded-lg" src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="max-w-lg shrink-0 snap-center snap-always">
    <img class="rounded-lg" src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="max-w-lg shrink-0 snap-center snap-always">
    <img class="rounded-lg" src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="max-w-lg shrink-0 snap-center snap-always">
    <img class="rounded-lg" src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
</div>

The code snippet provided showcases a smooth transition effect for a collection of images within a container. The use of Tailwind CSS utility classes and scroll snap properties enables an interactive and visually appealing scrolling experience.

With the snap-x utility class applied to the container, horizontal scroll snapping is enabled. This means that when the user scrolls horizontally, the images align themselves neatly, snapping into place. This behavior gives the impression of a seamless transition between each image, creating a polished and professional appearance.

The flex utility class ensures that the container adapts its width to accommodate the images and allows them to be displayed in a row. The gap-x-3 utility class adds a small horizontal gap of size 3 between the images, providing a subtle spacing effect.

Each image is wrapped in a <div> element with the max-w-lg, flex-none, and snap-center utility classes. These classes control the maximum width of the image container, prevent it from growing or shrinking, and center it within the parent container during scrolling.

To enhance the visual presentation, the <img> tags have the rounded-lg class, which applies a rounded border to each image, giving them a softer and more elegant look.

This combination of Tailwind CSS utility classes and scroll snap properties results in a smooth and visually pleasing transition effect as users scroll through the images. It adds an element of interactivity and engagement to the image gallery, enhancing the overall user experience.
Check out the demo

If you liked this article, you can
follow me on Twitter I share about my journey and something related to web development, and building DevTools.

Float UI: The Tailwind UI Alternative for Building Beautiful Web Interfaces

Sidi Jeddou — Fri, 16 Jun 2023 22:57:04 +0000

In the world of web development, creating visually appealing and user-friendly interfaces is paramount. While there are many frameworks and tools available, Tailwind UI has gained significant popularity due to its comprehensive set of pre-designed components and utility classes. However, an emerging contender has entered the scene - Float UI. In this article, we will explore Float UI as a compelling alternative to Tailwind UI and delve into its features, and benefits.

What is Float UI?

Float UI is a powerful free Tailwind UI library and website templates designed to simplify and streamline the process of building stunning web interfaces. Developed as an alternative to Tailwind UI, and many other libraries, Float UI offers a comprehensive collection of components and website templates, enabling developers to create visually appealing websites quickly, the best thing is that it’s fully free and open source.

Features of Float UI:

Extensive Component Library: Float UI provides a rich selection of meticulously designed components, ranging from Navbars and Cards to Forms and Modals. These pre-built components allow developers to save time and effort by leveraging ready-to-use elements for their projects.
Customizable Styles: Float UI emphasizes flexibility, allowing developers to easily customize the appearance of components to match their unique design requirements. With a robust set of configuration options, it enables fine-grained control over colors, typography, spacing, and more.
Responsive Design: Float UI is built with responsiveness in mind, ensuring that the components adapt seamlessly across different screen sizes and devices. This responsiveness empowers developers to create interfaces that provide an optimal user experience on desktops, tablets, and mobile devices.
Lightweight and Performant: Float UI is designed to prioritize performance without sacrificing functionality. The library is optimized for speed and efficiency, enabling faster load times and smooth interactions, resulting in a snappy and delightful user experience.
Documentation: You don’t need to read a documentation to understand how Float UI works, or how to use it, just copy and paste in your code editor. I even built many projects with it, and the last one was TryFreeTool

Benefits of Using Float UI:

Time Savings: Float UI's extensive collection of pre-designed components significantly reduces the time and effort required to build complex interfaces from scratch. Developers can focus on implementing business logic and user interactions, rather than spending hours on visual design.
Consistent and Polished Designs: Float UI ensures consistency in design by offering a cohesive set of components with a unified visual language. This consistency helps maintain a polished look and feel throughout the application, enhancing the overall user experience.
Increased Productivity: With Float UI's intuitive customizable styles, developers can work more efficiently, iterate quickly, and rapidly prototype interfaces. The library's simplicity and ease of use contribute to improved productivity, allowing developers to deliver projects faster.
Seamless Integration: Float UI seamlessly integrates with popular JavaScript frameworks such as React and Vue.js, providing dedicated packages and components for these frameworks. This ensures smooth compatibility and makes it easy to incorporate Float UI into existing projects. Furthermore, Float UI has plans to extend support to Vue.js in the near future, allowing developers using Vue.js to leverage the benefits of Float UI's powerful UI library.

You can check Float UI out, and if you liked this article, you can
follow me on Twitter I share about my journey and something related to web development, and building DevTools.

Revolutionizing web design with Unicorn Platform's AI website builder

Sidi Jeddou — Sun, 07 May 2023 19:27:45 +0000

Are you a developer or a SaaS entrepreneur looking to revolutionize web design? Look no further than Unicorn Platform's AI website builder! With a variety of articles available on their blog, you can learn how to use Unicorn Platform's AI to create stunning websites in just minutes.

Start with "How to Use AI to Build Website," which provides a comprehensive overview of Unicorn Platform's AI and how it can be used to streamline web design. From there, explore "Craft Stunning Pages With Unicorn Platform's AI Page Builder" and "AI Building Websites: Unicorn Platform Landing Pages Simplified" to learn how to create beautiful and functional landing pages.

If you're interested in exploring other AI website builders, check out "Create Amazing Websites With the OpenAI Website Builder" and "2023 Top Free Website Builder AI: Unlock the Power of Unicorn Platform" for a broader perspective on the industry.

And for those looking to take their web design to the next level, "Get Revolutionary Results With Website Building AI - Unicorn Platform" and "Power Up: Revolutionize Web Design With ChatGPT Website Builder" offer insights into how AI can be leveraged to create truly innovative websites.

So what are you waiting for? Unlock the power of AI website building with Unicorn Platform and start creating stunning websites today!

Let's connect. I share web development, Web design, my journey and much more on my Twitter account.

How AI is Revolutionizing Website Building: Insights from Top Articles

Sidi Jeddou — Sun, 07 May 2023 18:42:17 +0000

Building a website has never been easier thanks to the power of AI. With the advent of automatic website builders, like Unicorn Platform, entrepreneurs and developers alike can create stunning websites with minimal coding experience.

In this article, we'll explore the top articles about using AI to build websites and provide crosslinks to each one. Whether you're a saas entrepreneur looking to build a website for your product or a developer interested in the latest web development tools, these articles are sure to provide valuable insights.

First up is "Build Website With AI: What You Need to Know". This article covers the basics of building a website with AI and provides an overview of the benefits of using an automatic website builder.

Next, we have "Build Websites Using AI: Unlock the Future of Web Development". This piece delves deeper into the future of web development and how AI is transforming the industry.

"Build an AI Website Now: Tips & Tricks With the Unicorn Platform Builder" provides practical advice for using Unicorn Platform to build your website. From customizing your design to optimizing for SEO, this article covers it all.

"Revolutionizing Web Development: How to Use AI to Build Your Website" provides a step-by-step guide to building a website with AI. This article is a must-read for anyone interested in learning more about the process.

In "The Benefits of Using an Automatic Website Builder Using AI", the author explores the benefits of using an automatic website builder and why it's a game-changer for web development.

Next, we have "Building a Website With AI: Unlock the Power of Unicorn Platform". This article provides a comprehensive overview of Unicorn Platform and how it can help you build a stunning website in minutes.

"Build Website with AI: The Ultimate Guide" is a comprehensive guide to building a website with AI. From choosing the right platform to optimizing for SEO, this guide covers everything you need to know.

Finally, "Top Free AI Website Makers for 2023: Create Your Website for Free" provides an overview of the top free AI website makers on the market. Whether you're on a budget or just looking to try out a new platform, this article has got you covered.

In conclusion, AI is changing the game when it comes to building websites. From automatic website builders to powerful design tools, the future of web development is looking bright. So why not try it out for yourself and see what all the fuss is about?

Let's connect. I share web development, Web design, my journey and much more on my Twitter account.

How was my journey building an open source project?

Sidi Jeddou — Wed, 19 Apr 2023 10:49:23 +0000

Hello there! My name is Sidi and I am a 19-year-old guy from Mauritania. As a frontend developer, I am always looking to improve my skills in programming and design. I believe that the combination of these two things is what makes a great website or application.

I have always had a love for technology, especially video games. When I was a kid, I spent hours exploring new games and discovering new worlds and locations. I was a big fan of games like GTAV and God Of War. I started to join WhatsApp groups related to video games. These groups were a great way for me to connect with other gamers and share my experiences.

However, after a while, I started to explore other areas of technology. I remember joining groups related to tech stuff and seeing people share their blog posts about programming. This intrigued me, and I decided to start my own blog where, I was able to build relationships with other members and even make some friends who built mobile apps. I contacted them and they gave me an introduction to programming.

At first, I was interested in all aspects of programming, but I soon realized that frontend development was what I enjoyed most. Unfortunately, at that time, I did not have a laptop, so I started learning from my phone. It was a challenging experience, but also a wonderful and interesting time for me.

Learning

When I began learning frontend development, I started with a book on HTML and CSS. It was an exciting journey, and I enjoyed it thoroughly. I followed the book step by step and applied what I learned in a simple code editor on my phone. Additionally, I watched tutorials on YouTube, which helped me grasp the concepts better.

A year later, I finally bought my first laptop, which opened up a whole new world of possibilities for me. As I continued to learn, I found myself building cool things like forms, search boxes. Every time I learned something new, I would try to implement it in my projects. I started learning new technologies, building websites on my own, and even began freelancing.

One of the most exciting projects I worked on during this time was Float UI, my side project. It started as a way to improve my frontend development skills and showcase my portfolio to potential clients. However, as I continued to work on it, I realized that it had the potential to be something much bigger.

How Float UI was created

First of all, what is Float UI? It's a collection of UI components and website templates that can be used to build web apps faster than starting from scratch. Simply copy and paste what you need from Float UI into your code editor and customize it to fit your needs.

I created Float UI as a side project to improve my skills and showcase my portfolio. Since its creation, more people have come to know me and have thanked me for building it. I have received job offers and long-term freelancing work, but I have rejected them all because I want to invest my time in improving Float UI and making it the best it can be. I also want to work on something I love and am comfortable with.

Initially, I created a premium user interface kit for React.js with the goal of helping developers make their apps more beautiful using my modern Tailwind UI component library.

Then, I met John on Twitter...

When I met John

During our conversations with John Rush, the Founder of MarsX, I was struck by the company's vision. I was so inspired by the vision that I felt compelled to join MarsX's mission. Our decision to merge our projects was a natural next step, driven by our shared desire to make software development more productive and effective.

One of the key tenets of MarsX's vision is that most code needs to be free and open source. In line with this philosophy, we decided to make Float UI, which is an integral part of our project, free and open source as well. This move would make Float UI accessible to anyone in the world with no limitations on usage. We believe that this will help to democratize software development and foster innovation. It is also a statement of our commitment to the open-source community.

What happened?

Float UI serves as the foundation for MarsX's UI library microapp, powering the UI for all other microapps in the MarsX ecosystem.

Our goal for Float UI, as a standalone open-source project, is to use MarsAI to auto-generate versions of Float UI for every popular framework in use today. Moreover, thousands of MarsX contributors and developers will be updating Float UI daily. Our aim is to make Float UI the most complete and advanced Tailwind application UI library in the world.

It took us almost a month to make Float UI completely free and open source. To launch it on Product Hunt, which was challenging since we had never done it before, we enlisted the help of John and especially Alex Isora, who assisted us in preparing everything for the launch, including creating a video, copy, and images. We launched on a pre-planned Friday.

Our traffic boomed, and we won second place that day! Check out our page: https://www.producthunt.com/products/float-ui#float-ui.

Due to our hard work on the product, I received a lot of messages and mentions in listings and articles. As developers, we know that you can't "sell" bullshit!

What about me?

Since our launch a few months ago, the Float UI team has been hard at work to continuously improve the product. We have been working on a range of new features, including enhancing user experience, implementing new design patterns, and optimizing the codebase.

As the CEO of Float UI, my role has shifted from being heavily involved in the coding process to focusing more on the overall product vision. I now spend a significant amount of time gathering feedback from our users and stakeholders, and prioritizing new features that align with our vision. In addition, I am actively engaging with startup founders to encourage them to adopt Float UI and its companion product, MarsX, which offers a range of powerful tools to help startups grow and scale.

I believe that by staying focused on our vision and continuing to innovate, we can make Float UI the go-to platform for developers and entrepreneurs alike.

If you liked this article, you can
follow my journey on Twitter

Float UI is now part of MarsX mission

Sidi Jeddou — Thu, 16 Feb 2023 10:31:09 +0000

Today, we are excited to announce that Float UI is now part of the marsx.dev mission! We are thrilled to be part of this mission and to be able to contribute our expertise in user interface design and development, and the best thing is that Float UI pro will be open source 🥳.

If you don't know what is Float UI, you can read this blog post, contains everything you need to know about Float UI, read this now.

What is MarsX

Mars is a free dev tool for building web and mobile apps out of micro-apps combining no-code and code interfaces. We can also say it's a platform that is designed specifically for startups and aims to make their journey easier, bringing more power and flexibility by allowing them to reuse thousands of micro-apps from previous projects built on the platform.

With this new partnership, we will make all of our components open source. This means that developers can now access our codebase and use it in their own projects without any restrictions or fees. We believe that this will make it easier for developers to create beautiful user interfaces quickly and easily.

We are also excited to be part of the marsx.dev mission because it allows us to collaborate with other talented developers from around the world who share our passion for creating great user experiences. We look forward to working together on projects that will help make the web a better place for everyone!

Note

We are working now on making Float UI open source, so make sure to follow us on Twitter to get notified, follow us

What is new in Float UI - The UI components & Website templates

Sidi Jeddou — Sat, 21 Jan 2023 20:06:14 +0000

Welcome to the launch of the new version of Float UI! We have some exciting changes for you and your team.

The world of User Interface design is constantly changing and evolving, so we decided to keep up with those changes by updating Float UI.

This new version includes a variety of new features, such as:

New UI components
Website templates
Complete redesign of the Float UI website
Redesign the logo
Dark mode for the Float UI website for those who prefer a browser experience with less strain on their eyes.

New UI components

The new components have been designed to give users more flexibility in how they design their web experiences. Float's new UI components are perfect for building modern websites that are both visually appealing and highly functional. With a wide range of components, including navbars, hero sections, modals, and more, you can create a website that looks great and works seamlessly. The components are designed to be responsive and mobile-friendly, so your website will look great on any device.

Website templates

In addition to this, we have included website templates that makes building responsive sites easier than ever before. It doesn't matter what kind of website your developing – there is sure to be a template that fits your project's needs. With pre-built layouts that include helpful SEO elements, you can create great-looking websites in no time at all!

Complete redesign of the Float UI website

The new design for Float UI also takes these principles of user experience into account— After understanding what our users need from us most when using our tool, the redesign showcases these values innately. The result is an easier to read interface that provides cleaner navigation points, so that users can find exactly what they are looking for without having to spend too much time scouring through content channels.

Dark mode

As touched upon above the Float UI now also supports an optional dark mode interface that allows those who need it access to reduce light emissions while working on the backend side of things - perfect for longer sessions indoors where regular exposure light might cause fatigue or irritations over extended periods of time; this small addition can work wonders when it comes productivity & effects on wellbeing as proven with other implementations found in other software suites today - so feel free with making use as needed throughout your workflows.

We hope you like all these improvements and get lots out of them during your creative endeavors!

Here is the original blog post