Build a Customizable Next.js Blog with Material UI
Developers always want to showcase or share their work, whether that’s through GitHub projects, technical blogs, or personal portfolios…
Muhi Masri RSS Feed
A front-end engineer focused on building top-notch web apps and helping developers improve their skills.
Latest posts
Creating React Fieldset Component with MUI
The element is a commonly used HTML element that serves a specific purpose in forms: grouping related information. For example…
React Responsive Navbar with MUI
Creating a responsive header for mobile and other devices is essential to accessing a wider audience. Users increasingly access websites…
React Vertical Tabs: Complete Customization with MUI
Tabs are a commonly used layout approach to display different pieces of information on the same screen. Users can quickly switch between…
How to Create a Sticky Header & Column in React
In the modern digital era, where data is growing faster than ever, efficiently handling and displaying complex tabular data becomes crucial…
MUI Grid: Building Web Layouts Responsively
MUI Grid is an essential component for creating flexible and responsive layouts. The core mechanism of the Grid component is based on the 1…
How to Create a Responsive Table with React
In web development, tables are a core element for displaying tabular data, integral to numerous projects and applications. However…
MUI Stack: A Comprehensive Guide to the Material UI Stack Layout Component
The MUI Stack component is a powerful tool for creating flexible layouts in a Material UI project. The Stack simplifies arranging items in a…
How to Use and Customize MUI Box
The MUI Box component is a fundamental building block in the Material UI library, designed to serve as a generic container element. Unlike…
MUI FormControl: Creating Dynamic and Customized Forms
MUI Form Control is a component that enhances form functionality within Material UI. It provides essential context for form inputs, such as…
MUI TextField: How to Customize Variants, Colors & Styles
Customizing TextField colors is an essential part of building a beautiful UI. MUI TextField component is not just an input field, but it’s a…
How to Create and Style a Readonly TextField in Material UI (MUI) React
Readonly is a native HTML attribute that can be used with the input element. Its primary purpose is to prevent the user from editing the…
MUI TextField and Form Validation
Validating TextFields and Forms is an essential aspect of web application development. This tutorial navigates through various validation…
MUI Typography - Complete Styling & Customization Guide
MUI Typography is a CSS utility component that is used to display text. It is a wrapper that renders a limited set of HTML elements like p…
Spacing, Padding, and Margin with Material UI (MUI)
Applying spacing between components is an essential part of building a UI. One common way is to use CSS padding and margin. MUI spacing…
Breakpoints and Responsive Design with Material UI (MUI)
Breakpoints are a crucial concept in responsive design. They allow us to define the application’s appearance on different screen sizes. In…
How to Create Global Styles in Material UI (MUI)
In every application, specifically modern front-end apps, we tend to encapsulate styles to a specific component. This great practice helps…
[Part 4] Read and Write Table Data with API Requests using React Tanstack
In the previous parts of this series, we learned how to create an editable dynamic table, add and remove rows dynamically, and validate…
[Part 3] Validate Table Rows and Fields Using React Tanstack
In the previous part, we learned how to add and remove table rows using React Tanstack. In this part, we will learn how to validate table…
[Part 2] Add and Remove Table Rows with React TanStack
In the previous part, we went through a detailed approach to creating an editable React table with a dynamic column schema. We also utilized…
Creating an Editable and Dynamic React Table with TanStack
An editable table is an essential component in many applications in the real world. While plenty of excellent React libraries are feature…
How to Create Skeleton Table Loaders with Material UI (MUI)
Many of us developers encountered the scenario where a data table stays empty and idle until data arrives from an API call and the table…
How to Create a Multiselect Component with Material UI (MUI)
Multiselect in Material UI is an extended feature to the regular select or dropdown menu that enables users to select multiple values within…
How to Create and Customize Variants with Material UI (MUI)
variant is a built-in property used in MUI components. Its primary usage is to provide different look and feel options to fulfill the…
Customizing Theme, Palette, and Colors with Material UI (MUI)
Palettes and themes are essential parts of the overall UI look and feel. They convey meaning and consistency throughout the application…
Customizing disabled button color with Material UI (MUI)
Disabling buttons is essential in the UI world as it stops the user from committing an action until specific criteria are met. A disabled…
Creating a Button Link with Material UI (MUI)
In many scenarios, we often want a button to behave like a link but still look like a button, especially when we need to change the page or…
MUI Container: How to Customize and Override Width
The MUI Container is a fundamental layout component in Material UI. It is designed to manage the width of the content it encloses, ensuring…
How to Create an Icon Button with Material UI (MUI)
In this tutorial, we will learn how to create a React icon button using Material UI. In particular, we will cover two different techniques…
[Part 4] Validate Table Rows and Fields with Angular Material
This part will focus on adding input field validations for table rows; we’ll leverage the built-in HTML form validation to identify input…
How to Style and Customize a Button with Material UI
MUI components have plenty of useful built-in styles and variants, but we might still need to customize them (behavioral or styling changes…
[Part 5] Validate Table Rows and Fields with Bootstrap Vue
In this part of the BootstrapVue Table series, we will implement table validation for input fields. We will start by adding a basic…
How to Create an Icon Text Field Component with Material UI
MUI provides an easy way to add icons to a TextField component: TextField component internally encapsulates FormControl, InputLabel, and…
How to Create Circular, Linear, and Skeleton Loading with Material UI
In this article, we’re going to learn and apply some useful loading techniques using Material UI and React components. If you’d like to jump…
[Part 4] Load, Add, Update and Delete Table Rows using API Services
In this part of the Bootstrap Vue Table series, we are taking all features we built in previous parts and connecting them to API services…
How to Replace Multiple Words and Characters in JavaScript
Using replace() function in JavaScript has many use cases such as removing unwanted or escape characters in a string. Also, education and…
How to Save and Download Files in JavaScript
In the web world, “save file”, “save as”, or “download file” are used interchangeably and mean the same thing, which is to download and save…
How to Create Dynamic States with React Redux
Redux is one of the most popular state management libraries in the React ecosystem. If you’re not familiar with the state management concept…
[Part 3] Add and Remove Table Rows with Bootstrap Vue
In the previous part, we learned how to convert an editable Bootstrap table to a dynamic reusable component that works with any schema. Also…
[Part 2] Create a Dynamic Table with Bootstrap Vue
In the previous part, we did a deep dive into editing a table, both at a row and cell level. The approach we did can only support one data…