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…
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...
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:
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):
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…
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
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.