#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
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM