A step-by-step guide to creating a reusable material form dialog with a loading progress bar.

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:


Introduction:

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


Introduction:

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…


A step-by-step guide to creating a custom and framework agnostic File Upload component.

Introduction:

I love JavaScript and all the amazing engineers who helped to make Web Development simpler and more joyful. But, as a consultant and UI engineer, I always ask myself the same question “why do I have to write the same exact custom element every time I start a new project?” Whether it’s Vue, React, Angular… I always end up writing the same code again and again and again.

Web Components to the rescue!


Sharing my experience with tools that helped me build a successful design system in React

Introduction:

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.

create-react-library:

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

Cheers,

Muhi


A comprehensive guide to creating dynamic editable cells with Bootstrap Vue Tables.

Introduction

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:


A few easy steps to create a single file component with Angular including intellisense and auto-generation configuration.

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!


Sharing my experience working with Preact on my recent JavaScript project.

As part of my ongoing consultation, architecture, and development work with JavaScript applications, I’ve recently started a new project that required me to re-evaluate the typical options that I usually go for (Angular, React, or Vue).

Here are some of the project’s requirements:

  • Web Components support
  • Progressive Web App
  • Server-Side rendering
  • JSX-like syntax and functional components
  • Size and performance

While, to some extent, this is all achievable by most of the popular JavaScript frameworks, Preact fully met the criteria without any hurdles and workarounds.

Let’s dig a bit deeper into some of Preact’s features that I put together from research…

Muhi Masri

UI architect and JavaScript specialist with emphasis on efficiency and great user experience. https://muhimasri.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store