Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
๐ Practices for the Sign-up Flow: Provide clear and specific error messages
#guide
#guide
When a user enters something incorrectly in an input field or misses a required field, the error message should indicate where the error occurred and how to resolve it. Otherwise, the user has to guess which information was entered incorrectly and why it was wrong.
#angular #env #lib
Some days ago I had to initialise a new Angular app for a side project of mine. The use case would be fairly simple, and I needed some basic features like user authentication and some entities to store on a backend.
In such cases Supabase is a great open-source alternative to setting up a custom backend, and integrating it into an Angular app is fairly simple, given the existing supabase dependencies like @ supabase/supabase-js. The only prerequisite to make it work is initialising a supabase project and generating an API key.
However, I found out that managing environment variables in an Angular project is not really straight forward. Once we generate a project via the Angular CLI, we get the environment.ts and environment.prod.ts files, but these cannot be used for declaring such API keys, especially if we want to push our codebase to a github repository.
โ Article link
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
๐ How to design user-friendly forms: Field input type
#guide
#guide
Use different input fields to help the user understand what information they need to provide (date of birth, mobile number, etc). This will help you gather all the information correctly and create an organised database with correlated information. As shown below, itโs best to provide selection boxes where the user can pick from the available options or receive guidance on the type and format of data to include. This will make it easier to collect data and thus reduce the chances of mistakes.
๐1
#angular #patterns #composite
The Composite pattern defines two basic types of elements sharing the same interface: simple leaves and complex containers. A container can consist of both leaves and other containers. This allows for the construction of a nested, recursive structure of objects resembling a tree.
โ Article link
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
๐ How to design user-friendly forms: Aligning sections
#guide
#guide
Aligning sections may seem like a tiny detail but in reality, it makes a huge difference. The idea is to make a form easier to read by putting all the information in one direction.
Users are most likely to look at your information vertically, as itโs faster and more efficient to understand all the information. With this in mind, ideally, you want to make the field names of your form vertical which will make it more accessible and help you limit any potential errors in data collection.
๐ How to design user-friendly forms: Group fields
#guide
#guide
Sometimes, forms can be very long and complex so itโs best to have clusters of information that contain titles, subtitles, or even descriptions that can facilitate the userโs experience. By organising the information into blocks, the user can quickly connect each type of information.
With the main information located vertically, any additional information or instructions can be added to the left section. When adopting this method, make sure you leave space between each section so the user can easily tell which one it is.
#angular #cdk #directives #dynamic
Use Case
This method can be used when you need to manipulate the DOM directly, often in scenarios where you are working with non-Angular libraries or need to integrate with existing DOM elements that are not part of Angularโs template system.
Pros
โ Direct control over the DOM.
โ Can be useful for integrating with non-Angular libraries or existing scripts that manipulate the DOM directly.
Cons
โ Bypasses Angularโs change detection and lifecycle hooks.
โ Can lead to issues with Angularโs dependency injection and component lifecycle management.
โ Harder to maintain and debug.
Performance Impact
Potentially high impact due to bypassing Angularโs optimized change detection. Direct DOM manipulation can also lead to performance issues if not handled properly.
โ Article link
Please open Telegram to view this post
VIEW IN TELEGRAM