Angular

Angular Development in Enterprise

Published Oct 31, 2019

Updated Feb 14, 2023

8 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

There are a few posts that teach you how to develop Angular applications but some of them are missing some of the tips that I'm going to mention here.

FYI: some of the tips can be used in any kind of enterprise app, not just angular.

I'm not going to get into detail on how to apply each one of the tips or tools. I will only talk about them overall for you to start applying them in your Angular enterprise project.

Remember that all tips mentioned are not mandatory but will help your team to write cleaner, better, and more scalable application.

Content Structure

-Typing -SASS -State Management -Libraries -Monorepos -NPM for Enterprise -Lazy Loading -Components -Component Libraries -Reactive Programming with RxJS -Compilation -Design Systems -Angular with Bazel -VS Code Tools

Typing

Typing with TypeScript

When working on such a big application, like an enterprise application, with a big number of developers, typing your code is very important. This will help the developers in preventing mistakes and understanding the code base faster.

so... stop using any Please, stop it!

Typescript Entities -classes -enums -interfaces (and types)

DON'T DO:

  tasks$: any;

DO:

tasks$: Observable<Task[]>;

SASS

Time to power up your CSS with SASS. By using SASS, you are going to be more DRY which means you won't be repeating yourself. Your CSS code will be more structured, cleaner, and more readable.

When creating a new Angular project using the CLI, it will ask you "what stylesheet format would you like to use?", select SCSS.

If you want to get started with SASS, visit the official docs:

https://sass-lang.com/guide.

State management

It is very important to handle the state of your application. By handling the state of your app, you will gain some of the benefits like:

-Better performance: The way Angular works when using state, the data updates can flow down through your components relying on slices of the store.

-Centralized immutable state: The state living in a central location inside of your app.

-Save time: Imagine you have an application with a very elaborated workflow where you have to write a bunch of data in the forms and click multiple buttons. Thanks to a tool like Redux Dev Tools, it allows you to travel in time in your application so you don't have to do all the workflow again to test your app - you can simply go to a specific point.

-Easy to test: All state updates are handled in reducers which are pure functions. Pure functions are extremely simple to test, as it is simply input in and assert against output.

A lot of people don't like using state management tools, so they decide to just use RxJS and services. If you have a very good data flow you may not need to handle the state with some of the tools previously mentioned, but you essentially are going to be inventing the wheel. If you are going to do that, you might as well use a tool that is used by millions of developers.

Libraries

If you are working in a big company the probability of you need to share multiple pieces of code is probably very high, so why would you make your engineers rewrite existing code? Thanks to Angular libraries you can avoid this by creating a sharable code like components, services, etc across your organization. Libraries will allow your apps to avoid code inconsistencies and different standards and will help your company to save money.

How to create a library? https://medium.com/@tomsu/how-to-build-a-library-for-angular-apps-4f9b38b0ed11

NPM for Enterprise

After talking about Angular libraries you may be wondering: how can I share them across my organization?

Well, NPM offers solutions for enterprise applications. Your public npm package will be kept private and only visible/available to your organization.

To learn more about NPM Enterprise visit: https://www.npmjs.com/products/enterprise

Monorepos

Not everything is pretty with Angular libraries when working on enterprise applications.

-Every time a new change happens in a shared repo, you need to go to all your projects using this library and update their npm packages -Every shared library needs to have its own CI/CD workflow -Each CI/CD workflow should handle versioning of changes -There can be mismatches with different npm packages for angular projects which can lead to apps being broken -In general, harder to do changes across multiple apps and libraries as these are all in their own repository

If you are working on an enterprise project, it's recommended to organize your code in bigger parts like common service, UI components, etc. Thanks to the Nrwl team, we can accomplish this when working with monorepos by using Nx in our angular projects.

Lazy Loading

Thanks to lazy loading, we can improve the performance of our applications dramatically. Imagine you have a huge enterprise app and you don't want the app to take a long time to load. People will lose their minds and will stop using your app. Lazy loading will help us achieve a better performance of our app by loading our ngModules on demand. Some of the advantages of lazy loading your angular app are:

-High performance in bootstrap time on initial load -Modules are grouped according to their functionality (feature modules) -Smaller code bundles to download on initial load -Activate/download a code module by navigating to a route

If you want to learn more about lazy loading, take a look at the official Angular docs or this awesome article/tutorial.

https://angular.io/guide/lazy-loading-ngmodules

https://blog.bitsrc.io/boost-angulars-performance-by-lazy-loading-your-modules-ca7abd1e2304

Components

When creating an Angular app, I would suggest that you create 2 kinds of components: the smart and the dumb components.

Smart components are the only ones that have access to the services usually via DI and the source of data. The dumb components will be used as pure functions hence no side effects should be created by them (something comes in and something comes out).

Can I use smart/dumb components with state management?

Yes, you can apply the concept of smart and dumb components when doing state management with tools like NgRx.

When using smart and dumb components, you are going to come up with the need of using Input() and Output() to communicate between components. People have asked me: how far should I chain my components? I try to keep them to 1 level up and 1 level down. There may be special scenarios where you do 2 levels up and 2 levels down of component communication using Input() and Output() but please try to avoid this.

If you want to learn more about Smart and dumb components, take a look at this link: https://medium.com/@jtomaszewski/how-to-write-good-composable-and-pure-components-in-angular-2-1756945c0f5b

Component Libraries

When working on enterprise Angular application, it is common to make mistakes and stop following standards and company's practices. A way to achieve consistency in your applications is by using component libraries like:

- PrimeNG: http://primefaces.org/primeng/#/

- Angular Material: https://material.angular.io/

- NgBoostrap: https://ng-bootstrap.github.io/#/home

- Ng-Zorro: https://ng.ant.design/docs/introduce/en

- NgSemantic: https://ng-semantic.herokuapp.com/#/

In my personal opinion, for an enterprise application, PrimeNG is the way to go. They have over 80 components that are easy to customize via CSS and multiple companies in the industry use PrimeNG which translates to good support by the community.

Design Systems

You may be wondering: what about custom components? Once again, keeping the standards of your company, the design, and the consistency in your application is very important. If your company doesn't have a designated UX/UI designer, taking a look at design systems will be a good place to start for keeping this consistency in your application's design.

Here are some great resources:

-Semantic UI: https://semantic-ui.com/ -PrimeNG: https://www.primefaces.org/designer/primeng -Material Design: https://material.io/design/ -Polaris Shopify: https://polaris.shopify.com/ -Ant Design: https://ant.design/

Reactive Programming with RxJS

Time to start thinking reactively in Angular applications. We have an awesome library called RxJS that will help us achieve this.

When working with enterprise projects you are probably going to encounter getting data from multiple sources that depend on each other, or you will have to play a lot with multiple observable to achieve reactive programming. If this is the case, I'd suggest you take a declarative approach when using observables.

Benefits of a declarative approach: -Leverage the power of RxJs observables and operators -Effectively combine streams -Easily share observables -Readily react to user's action

To learn more about reactive programming, I'd suggest you take this course: https://www.pluralsight.com/courses/rxjs-angular-reactive-development

When working on the Angular project, if I have to consume promises I try to convert them to an observable. I do this because I want my app to be as reactive as possible. There are a few specific cases where I wouldn't convert promises to observables.

To learn more about Observables and Promises: https://medium.com/@mpodlasin/promises-vs-observables-4c123c51fe13

https://stackoverflow.com/questions/50269671/when-to-use-promise-over-observable

Compilation

Ivy is the new generation of the Angular compiler. Ivy will help you with your bundle size, re-build times, run-time performances, backward compatibility and more.

To learn more about Ivy: https://angular.io/guide/ivy https://blog.angularindepth.com/all-you-need-to-know-about-ivy-the-new-angular-engine-9cde471f42cf https://medium.com/js-imaginea/ivy-a-look-at-the-new-render-engine-for-angular-953bf3b4907a

Angular with Bazel

Thanks to the Google team, now we have this awesome tool called Bazel in our hands. Bazel allows us to build and test our backend and frontend with the same tool.

Bazel also helps your organization with continuous integration and it also helps with the build time. Bazel only builds what is necessary because Bazel uses a caching strategy where it only compiles what it has been changed or what is new.

learn more about bazel: https://blog.ninja-squad.com/2019/05/14/build-your-angular-application-with-bazel/

https://bazel.build/

VS Tools

After several years in the industry, I have noticed that having the same environment settings can help us avoid merge conflicts and have a consistent codebase, especially when working with multiple developers across different teams.

The following plugins for VS Code will help your team develop your next Angular project.

-Angular Snippets (Version 8). -Angular Console. -Angular Schematics. -Prettier. -TS Lint. -Auto Rename Tag. -Highlight Matching Tag. -HTML Snippets. -IntelliSense for CSS class names in HTML. -JavaScript (ES6) code snippets. -RxJs Snippets. -Paste JSON as Code.

Got more?

If you have any other suggestions on how to help a team be successful in their enterprise project, put some comments and I will add them to the article.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Pato Vargas
Google Developer Expert on Angular and Web Technologies, Google Women Techmaker Ambassador, Auth0 Ambassador, Media Developer Expert at Cloudinary, Platzi Master Coach, and SpringBoard mentor.
@devpato @devpato

4 Angular Component Libraries That are Perfect for Beginners

For beginners starting with Angular, the journey can feel daunting, especially when it comes to setting up projects from scratch. However, there is a range of outstanding Angular component libraries that alleviate this initial hurdle: ready-made toolkits, empowering newcomers to start building Angular applications without the complexities of bootstrapping their projects. Let’s take a look! Angular Material Angular Material is a UI component library by Google for Angular applications. It provides a variety of pre-built components following the Material Design guidelines, offering customization options, responsive design, and accessibility features. It's seamlessly integrated with Angular and offers extensive documentation and community support. NG-ZORRO NG-ZORRO is an Angular UI component library based on Ant Design by Alibaba. It offers a variety of customizable components for building modern web applications. With seamless Angular integration, responsive design, and accessibility features, NG-ZORRO simplifies development while following Ant Design principles. NG Bootstrap NG Bootstrap is a library for Angular developers to easily incorporate Bootstrap components into their applications without relying on jQuery. It offers Angular-specific directives and components, ensuring compatibility and performance within Angular projects while maintaining Bootstrap's responsive design and customization options. Clarity Design System Clarity is an open-source design system by VMware that offers a set of Angular components for building enterprise-scale applications. It provides components specifically tailored for data-centric applications, dashboards, and complex user interfaces. Clarity Design System emphasizes clarity, consistency, and usability in its components. The beginner’s journey can be both exhilarating and challenging. However, with the advent of powerful component libraries like Angular Material, NG-ZORRO, NG Bootstrap, and the Clarity Design System, the path becomes significantly smoother. These libraries offer pre-built components and design systems that eliminate the need to bootstrap projects from scratch. As beginners embark on their Angular journey, these libraries provide a sturdy foundation, allowing them to dive into development with confidence. By harnessing the capabilities of these libraries, beginners can not only expedite their learning curve but also craft exceptional Angular applications with ease and efficiency....

Mar 14, 2024

2 mins

Angular

Exploring Angular Forms: A New Alternative with Signals

Exploring Angular Forms: A New Alternative with Signals In the world of Angular, forms are essential for user interaction, whether you're crafting a simple login page or a more complex user profile interface. Angular traditionally offers two primary approaches: template-driven forms and reactive forms. In my previous series on Angular Reactive Forms, I explored how to harness reactive forms' power to manage complex logic, create dynamic forms, and build custom form controls. A new tool for managing reactivity - signals - has been introduced in version 16 of Angular and has been the focus of Angular maintainers ever since, becoming stable with version 17. Signals allow you to handle state changes declaratively, offering an exciting alternative that combines the simplicity of template-driven forms with the robust reactivity of reactive forms. This article will examine how signals can add reactivity to both simple and complex forms in Angular. Recap: Angular Forms Approaches Before diving into the topic of enhancing template-driven forms with signals, let’s quickly recap Angular's traditional forms approaches: 1. Template-Driven Forms: Defined directly in the HTML template using directives like ngModel, these forms are easy to set up and are ideal for simple forms. However, they may not provide the fine-grained control required for more complex scenarios. Here's a minimal example of a template-driven form: ` ` 2. Reactive Forms: Managed programmatically in the component class using Angular's FormGroup, FormControl, and FormArray classes; reactive forms offer granular control over form state and validation. This approach is well-suited for complex forms, as my previous articles on Angular Reactive Forms discussed. And here's a minimal example of a reactive form: ` ` Introducing Signals as a New Way to Handle Form Reactivity With the release of Angular 16, signals have emerged as a new way to manage reactivity. Signals provide a declarative approach to state management, making your code more predictable and easier to understand. When applied to forms, signals can enhance the simplicity of template-driven forms while offering the reactivity and control typically associated with reactive forms. Let’s explore how signals can be used in both simple and complex form scenarios. Example 1: A Simple Template-Driven Form with Signals Consider a basic login form. Typically, this would be implemented using template-driven forms like this: ` ` This approach works well for simple forms, but by introducing signals, we can keep the simplicity while adding reactive capabilities: ` ` In this example, the form fields are defined as signals, allowing for reactive updates whenever the form state changes. The formValue signal provides a computed value that reflects the current state of the form. This approach offers a more declarative way to manage form state and reactivity, combining the simplicity of template-driven forms with the power of signals. You may be tempted to define the form directly as an object inside a signal. While such an approach may seem more concise, typing into the individual fields does not dispatch reactivity updates, which is usually a deal breaker. Here’s an example StackBlitz with a component suffering from such an issue: Therefore, if you'd like to react to changes in the form fields, it's better to define each field as a separate signal. By defining each form field as a separate signal, you ensure that changes to individual fields trigger reactivity updates correctly. Example 2: A Complex Form with Signals You may see little benefit in using signals for simple forms like the login form above, but they truly shine when handling more complex forms. Let's explore a more intricate scenario - a user profile form that includes fields like firstName, lastName, email, phoneNumbers, and address. The phoneNumbers field is dynamic, allowing users to add or remove phone numbers as needed. Here's how this form might be defined using signals: ` > Notice that the phoneNumbers field is defined as a signal of an array of signals. This structure allows us to track changes to individual phone numbers and update the form state reactively. The addPhoneNumber and removePhoneNumber methods update the phoneNumbers signal array, triggering reactivity updates in the form. ` > In the template, we use the phoneNumbers signal array to dynamically render the phone number input fields. The addPhoneNumber and removePhoneNumber methods allow users to reactively add or remove phone numbers, updating the form state. Notice the usage of the track function, which is necessary to ensure that the ngFor directive tracks changes to the phoneNumbers array correctly. Here's a StackBlitz demo of the complex form example for you to play around with: Validating Forms with Signals Validation is critical to any form, ensuring that user input meets the required criteria before submission. With signals, validation can be handled in a reactive and declarative manner. In the complex form example above, we've implemented a computed signal called formValid, which checks whether all fields meet specific validation criteria. The validation logic can easily be customized to accommodate different rules, such as checking for valid email formats or ensuring that all required fields are filled out. Using signals for validation allows you to create more maintainable and testable code, as the validation rules are clearly defined and react automatically to changes in form fields. It can even be abstracted into a separate utility to make it reusable across different forms. In the complex form example, the formValid signal ensures that all required fields are filled and validates the email and phone numbers format. This approach to validation is a bit simple and needs to be better connected to the actual form fields. While it will work for many use cases, in some cases, you might want to wait until explicit "signal forms" support is added to Angular. Tim Deschryver started implementing some abstractions around signal forms, including validation and wrote an article about it. Let's see if something like this will be added to Angular in the future. Why Use Signals in Angular Forms? The adoption of signals in Angular provides a powerful new way to manage form state and reactivity. Signals offer a flexible, declarative approach that can simplify complex form handling by combining the strengths of template-driven forms and reactive forms. Here are some key benefits of using signals in Angular forms: 1. Declarative State Management: Signals allow you to define form fields and computed values declaratively, making your code more predictable and easier to understand. 2. Reactivity: Signals provide reactive updates to form fields, ensuring that changes to the form state trigger reactivity updates automatically. 3. Granular Control: Signals allow you to define form fields at a granular level, enabling fine-grained control over form state and validation. 4. Dynamic Forms: Signals can be used to create dynamic forms with fields that can be added or removed dynamically, providing a flexible way to handle complex form scenarios. 5. Simplicity: Signals can offer a simpler, more concise way to manage form states than traditional reactive forms, making building and maintaining complex forms easier. Conclusion In my previous articles, we explored the powerful features of Angular reactive forms, from dynamic form construction to custom form controls. With the introduction of signals, Angular developers have a new tool that merges the simplicity of template-driven forms with the reactivity of reactive forms. While many use cases warrant Reactive Forms, signals provide a fresh, powerful alternative for managing form state in Angular applications requiring a more straightforward, declarative approach. As Angular continues to evolve, experimenting with these new features will help you build more maintainable, performant applications. Happy coding!...

Oct 4, 2024

5 mins

AngularJavaScript

PWA Push Notifications with Firebase (Cloud Messaging)-pt1

Push Notification In Your PWA Have you ever wondered how to add the famous/annoying push notifications to your app? Well, in this tutorial I'm going to show you how to do it using Firebase Cloud Messaging. *Note:* This tutorial requires some basic knowledge on PWAs and Service Workers. You can take a look to my Intro to PWA and Service Workers here and About PWA and notifications here. Before we begin, I need to clarify that the Notification API, and the Push API, are not the same. People get them confused all the time. Push API: The Push API gives web applications the ability to receive messages pushed to them from a server, whether or not the web app is in the foreground, or even currently loaded, on a user agent. This lets developers deliver asynchronous notifications and updates to users that opt in, resulting in better engagement with timely new content. Let's doooo it!! The final code is in the FINAL branch inside of the repo. 1) Clone this repo: https://github.com/devpato/pwa-FCM-notifications-tutorial As you can see, I already have the basic structure of the app created for you, since we are only going to worry about how to send the messages via push notifications using the Firebsae Cloud Messaging service. 2) Navigate to the index.html file. Notice I imported Firebase for you: ` 3) Navigate to Firebase.com, and create an account if you don't have one. 4) Once you are in the Firebase console, navigate to project settings (in case you don't have a project yet - just create it there) 5) Inside of project setting, under the General tab scroll all the way down to find your Firebase SDK snippet (if it's not there yet - this means that you've created a new project, and need to add there an app. Either way, this can be done in the same place where you then will have your SDK snippet - under the General tab). Copy paste it in a safe place. The snippet should look like this: 6) Go to your index.js file, and copy paste the following after the global variables I declared for you. Replace it with your project's customized code - the snippet from step 4. ` 7) Right after - initialize the firebase instance. ` 8) Then, we are going to create a constant called messaging, and will set it to firebase messaging service. ` 9) Time to request permission from firebase cloud messaging. Once we get the thumbs up, they will give us a token as a promise. ` 10) Then, we are going to use the messaging.onMessage() method. This is used for receiving data, and notification payloads, by all users that are currently viewing the page (the page is in the foreground). To do so, we add the following code: ` 11) Notice a firebase-messaging-sw.js file. This file name is going to be searched by the Firebase SDK. The file needs to be in the ROOT of your project. The Firebase SDK will do some magic in the background to register the file as a service worker. 12) Inside of your firebase-messaging-sw.js, initialize the Firebase app by passing in the messagingSenderId. The sender id can be found inside of your project settings as the following image shows. ` 13) Retrieve an instance of Firebase Messaging so that it can handle background messages. ` 14) Background message handler (this one will be invoked when the page is in the backround) ` Test The Notification 15) Run the app using any http server 16) Inside of your Cloud Messaging settings (a tab in the Firebase Console > Project Settings), copy the server key. 17) If you have a Postman http client, do the following: POST URL:* https://fcm.googleapis.com/fcm/send * HEADERS: Content-Type - application/json Authorization - key=server_key BODY: ` Then, click the Send button. At this point, if our app is in the foreground (it is currently opened tab in your browser), then you'll see the message we've sent in the console - handled by messaging.onMessage. But if it is in the background, then it will be handled by messaging.setBackgroundMessageHandler in the service worker, and you'll see something like this: Test your app on a real device by deploying to Firebase or any other hosting provider. If you want to host your app on the Firebase - take a look at my other tutorial. In the next tutorials, I will show you how to successfully subscribe to notifications and push them using the Firebase console....

Feb 3, 2020

5 mins

JavaScriptPWAFirebase

Understanding the Difference Between `:focus` and `:focus-visible` in CSS

Understanding the Difference Between :focus and :focus-visible in CSS I have learned my fair share about the importance of keyboard accessibility, so I know that visual indication of the focused element is very important. But the well-known :focus pseudo-class is not always the best fit for this job. That's where :focus-visible comes in. Let's look at the differences between these two pseudo-classes and explore the best practices for using them effectively. What is the :focus Pseudo-Class? The :focus pseudo-class is a CSS selector that applies styles to any element that receives focus, regardless of how that focus was triggered. This includes focus events from keyboard navigation, mouse clicks, and touch interactions. Example Usage of :focus ` In this example, the button will display a blue outline whenever it is focused, whether the user clicks on it with a mouse, taps it on a touchscreen, or navigates to it using the keyboard. What is the :focus-visible Pseudo-Class? The :focus-visible pseudo-class is more specialized. It only applies styles to an element when the browser determines that the focus should be visible. This typically occurs when the user navigates via the keyboard or assistive technologies rather than through mouse or touch input. Example Usage of :focus-visible ` Here, the button will only show a blue outline when focused through keyboard navigation or another input method that usually requires visible focus indicators. Key Differences Between :focus and :focus-visible :focus - Behavior: Applies to any element that receives focus, regardless of the input method. - Use Cases: Ensures that all interactions with the element are visually indicated, whether by mouse, keyboard, or touch. :focus-visible - Behavior: Applies styles only when the focus should be visible, such as using a keyboard or assistive technology. - Use Cases: Ideal for scenarios where you want to provide focus indicators only to keyboard and assistive technology users while avoiding unnecessary outlines for mouse and touch users, typically required by design. Accessibility Implications :focus - Pros: - Guarantees that all users can see when an element is focused, which is critical for accessibility. - Cons: - Can lead to a suboptimal experience for mouse users, as focus styles may appear unnecessarily during mouse interactions. :focus-visible - Pros: - Enhances user experience by showing focus indicators only when necessary, thus keeping the interface clean for mouse and touch users. - Tailors the experience for keyboard and assistive technology users, providing them with clear visual cues. - Cons: - Additional considerations may be required to ensure that focus indicators are not accidentally omitted, especially in older browsers that do not support :focus-visible. - There may be cases where you want to show focus indicators for all users, regardless of input method. Best Practices for Using :focus and :focus-visible To achieve the best accessibility and user experience, combining both :focus and :focus-visible in your CSS is often a good idea. Combining :focus and :focus-visible ` Here is a Stackblitz example of what such styling could look like for you to try out and play with. Additional Tips - Test with Keyboard and Assistive Technology: Ensure that your web application is navigable using a keyboard (Tab, Shift + Tab, etc.) and that focus indicators are visible for those who rely on them. It's never a bad idea to include accessibility testing in your e2e testing suite. - Provide Clear Focus Indicators: Make sure that focus indicators are prominent and easy to see. A subtle or hard-to-spot focus indicator can severely impact accessibility for users who rely on keyboard navigation. Conclusion The :focus-visible pseudo-class offers a more refined way to manage focus indicators, improving accessibility and user experience, particularly for keyboard and assistive technology users. By understanding the differences between :focus and :focus-visible, and applying best practices in your CSS, you can create more accessible and user-friendly web applications. Remember, accessibility should never be an afterthought. By thoughtfully applying focus styles, you ensure that all users, regardless of how they interact with your site, can easily navigate and interact....

Nov 8, 2024

3 mins

AccessibilityCSSPlaywright

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

Angular Development in Enterprise

Content Structure

Typing

SASS

State management

Libraries

NPM for Enterprise

Monorepos

Lazy Loading

Components

Can I use smart/dumb components with state management?

Component Libraries

Design Systems

Reactive Programming with RxJS

Compilation

Angular with Bazel

VS Tools

Got more?

Pato Vargas

You might also like

4 Angular Component Libraries That are Perfect for Beginners

Exploring Angular Forms: A New Alternative with Signals

PWA Push Notifications with Firebase (Cloud Messaging)-pt1

Understanding the Difference Between `:focus` and `:focus-visible` in CSS

Let's innovate together!

You might also like

4 Angular Component Libraries That are Perfect for Beginners

Exploring Angular Forms: A New Alternative with Signals

PWA Push Notifications with Firebase (Cloud Messaging)-pt1

Understanding the Difference Between `:focus` and `:focus-visible` in CSS