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


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!


Thanks for a very informative article! As a frontend developer, I think it's very important to have at least a high-level understanding of a design system. Creating a bridge between developers and designers will improve scalability and efficiency in an organization especially with tools like Theo(Design Tokens), Storybook, Bit...


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:


This is very interesting, thanks! The GitHub links are not working, would be great if we can see a working example.


Thanks for an amazing introductory to web components! I fully agree with you regarding Web Components complementing frameworks such as Vue or React. They work together very nicely especially if you are building a framework-agnostic design system that works across multiple technologies.

I recently wrote about creating thin wrappers to make web components work with React if it interests you. https://muhimasri.medium.com/web-components-with-react-hooks-f0e2a62de323

Cheers!


This is very informative, thanks! One of the things that I really like about design tokens (as a developer) is that it imposes an opinionated variables structure on developers. I used to see developers struggling with getting the right naming conventions and ending up creating redundant colors, sizes… which leads to a scalability nightmare.


Introduction:

Web Components are of great use when it comes to creating a future proof component-based design system that can be interoperable and shared across multiple products.

Unfortunately, React is one of the few modern libraries that does not have full support to Web Components, especially when it comes to handling events. The reason is that React implements its own synthetic event system, it cannot listen for DOM events coming from Web Components.

The great news is that you don’t need to rewrite all your design system from scratch using React. …


In this article we will learn how to convert an image (containing a simple form) to an HTML form using Amazon Textract and NodeJS. Amazon Textract is a service that automatically extracts text and data from scanned documents. It’s an AI powered optical character recognition (OCR) that makes it very simple to accurately pull out content from an image.

One of Textract’s strengths is the ability to identify a form in an image and extract the data with its associated relationship. Meaning, if we look at a basic form:

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