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
📄 How to design user-friendly forms: Write clear labels
#guide
#guide
The labels should be simple and easy to understand so that the user can quickly see what information to put in each field. Use simple labels to explain simple fields and add as few words as possible for each label. Here’s an easy example: use the “Full Name” label instead of “My name is”.
#settimeout #setinterval #event_loop #requestAnimationFrame
Why setTimeout is Inaccurate? ❌
setTimeout and setInterval in JavaScript are based on the event loop and task queue. Their execution time may vary due to several factors:
Event Loop Mechanism:
JavaScript executes code within a single event loop. If earlier tasks take a long time or the task queue is busy, the timer callback will be delayed.
Task Queue Priority:
The priority of tasks in the task queue varies. User interaction events or rendering updates might have higher priority than setTimeout and setInterval, delaying their execution.
JavaScript Engine Limitations:
The JS engine normally imposes a minimum delay; for example, nested setTimeout calls usually have a minimum delay of 4 milliseconds.
System Performance and Load:
System performance and current load can also affect timer accuracy. High system load can further delay task execution.
✅ Article link
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM