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…


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:


React material is a great library to use for UI elements, grids, or even to create your own design system that could support multiple projects. It comes with lots of mature and functional components and uses JSS, a tool for CSS which allows you to use JavaScript to describe styles in a declarative way.

Material components have built-in styles and options but in many cases you still need to customize (could be behavioral or styling changes). Today, I will show you how to add a new variant to a Button. Currently, it comes with three variants (text, contained, and outlined):


Introduction:

I wrote in a previous article the importance of Web Components and how to make them work with React. Today, I’m focusing on a Vue example with a Web Component input element.

Fortunately, Vue fully supports Web Components according to custom-elements-everywhere.com but I faced a small inconvenience while using v-model directive with an input element.

V-model is a built-in directive in Vue that makes data binding easier with less code.

The code below:

Is the same as:

Currently, we can’t use v-model in a Web Component but we can create our own custom directive to make it behave…


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.

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