Form dialogs are very common and useful especially when you don’t want to redirect the user to a separate page. A common example would be a newsletter subscription dialog, whether or not users choose to subscribe, they shouldn’t have to navigate back to the initial page.
A good practice is to trigger a loading bar as soon as the user submits a request to the server. Here is an example I created using Material Linear Progress:
In this article I’d like to share with you how to create a reusable custom checkbox element using CSS and VueJS. Most of us are used to having custom UI elements out of the box when using Bootstrap, Material or other libraries but in my recent project I was asked not to use any of the UI libraries. So I accepted the challenge, rolled up my sleeves and went right into it 💪
The goal here is to change the styling of the checkbox using pure CSS (with SCSS support) and enable color customization for developers
In this article I will explain a simple approach I took in one of my projects that required me to develop a dynamic table where users can read and modify fields. The challenge was that there is no set of defined tables or data models from the back-end. At any time, a new data model can be created or removed from the database and the front-end is required to adapt without having to add/remove tables manually.
So from the very beginning I decided to go with an abstract approach solution to make the table model dynamic and schema agnostic. For…
Building a design system is a progressive and abstractive approach to maintaining a consistent and cost-efficient components library that follows a specific styling guide and is sharable across multiple products. A design system has always been associated with designers but now it’s becoming critical for frontend developers to understand it from the technology perspective.
In this article, I will share some of the tools I used to successfully build a design system in React. Of course, before building the library, we require the designer’s expertise to develop the brand’s look and feel, user experience, style guide, etc.
One of the…
Great resources, thanks for sharing! Another really useful tool for creating UI color palettes is "Color Tool" from Material Design. https://material.io/resources/color
BootstrapVue offers components with extensive features that can be used for almost any application. With the power of Vue, Bootstrap components can be easily extended and customized to meet your product’s requirements.
In this article, I will walk you through a step-by-step guide to how to customize a Bootstrap table to enable inline editing, on both row and cell levels. I will show you how to encapsulate all new features in a component that can be reused anywhere in the project. The end results will look and behave as follows:
Bootstrap Vue Table with inline row editing:
If you come from a Vue or React (styled component/JSS) background, a single file component is your “normal” definition of a component. I fully appreciate the separation of concern that Angular conveys to the world along with all the amazing features that it provides out of the box. But in some cases, especially when building a design system, components tend to be small and it might make more sense to encapsulate JS, HTML, and CSS in one single file representing a customized and composable UI element.
In this article, I will walk you through few easy steps you need to…
Great article, thanks! I find it useful as well to pass down the "refetch" function from "useAxios" in case the UI requires a refresh on-demand behavior. Cheers!
Here are some of the project’s requirements:
Let’s dig a bit deeper into some of Preact’s features that I put together from research…