Data Structures.
They seem tough, don't they? 😅
#javanoscript #webdev
But here's a secret.
They're not.
They're just explained in a complicated way.
I want to make it easy.
Plain.
Clear.
Simple.
Stack:
• LIFO (Last In, First Out), perfect for things like browser history.
Queue:
• FIFO (First In, First Out), used in scenarios like song playlists or print jobs.
Array:
• Ordered collection, essential for lists like blog entries or product displays.
LinkedList:
• Nodes pointing to the next, great for sequences like music playlists.
Set:
• Holds unique values, ideal for tracking distinct user preferences or inputs.
Map:
• Key-value storage, like fetching product details by ID in online shopping.
Graph:
• Nodes connected by edges, useful for mapping complex networks or social connections.
Tree:
• Hierarchical structure for data with parent-child relationships, like org charts or file systems.
Object:
• Structured key-value pairs, representing entities like user profiles.
Heap:
• Prioritizes elements, facilitating tasks like job scheduling based on urgency.
They seem tough, don't they? 😅
#javanoscript #webdev
But here's a secret.
They're not.
They're just explained in a complicated way.
I want to make it easy.
Plain.
Clear.
Simple.
Stack:
• LIFO (Last In, First Out), perfect for things like browser history.
Queue:
• FIFO (First In, First Out), used in scenarios like song playlists or print jobs.
Array:
• Ordered collection, essential for lists like blog entries or product displays.
LinkedList:
• Nodes pointing to the next, great for sequences like music playlists.
Set:
• Holds unique values, ideal for tracking distinct user preferences or inputs.
Map:
• Key-value storage, like fetching product details by ID in online shopping.
Graph:
• Nodes connected by edges, useful for mapping complex networks or social connections.
Tree:
• Hierarchical structure for data with parent-child relationships, like org charts or file systems.
Object:
• Structured key-value pairs, representing entities like user profiles.
Heap:
• Prioritizes elements, facilitating tasks like job scheduling based on urgency.
#Angular router unwrap of default import ▶️
As of Angular 15 lazy-loaded routes can automatically unwrap default exported components and modules
Simply add the default keyword after your export to transform your export into a default export, and inside your route configuration, you can use a much simpler and cleaner syntax for your lazy loaded routes 💡
As of Angular 15 lazy-loaded routes can automatically unwrap default exported components and modules
Simply add the default keyword after your export to transform your export into a default export, and inside your route configuration, you can use a much simpler and cleaner syntax for your lazy loaded routes 💡
A less-shown feature of #Angular signals.
The dependency on the multiplicator signal inside the "untrack()" isn't tracked the effect isn't triggered on changes.
The dependency on the multiplicator signal inside the "untrack()" isn't tracked the effect isn't triggered on changes.
Angular's new `defer` block is really cool.
Now you can lazy load parts of your application easily and finer granular than just over routes. The #Angular compiler creates "Lazy Chunk Files" for you with all bundled you use (components, pipes, directives...)
Now you can lazy load parts of your application easily and finer granular than just over routes. The #Angular compiler creates "Lazy Chunk Files" for you with all bundled you use (components, pipes, directives...)
The fastest and most impactful #Angular perf tip of all times!
1️⃣ Open your fav editor
2️⃣ Search (regexp) on the whole src (or projects)
3️⃣ Use \*ngFor="(\s|((?!trackBy).))*?"
4️⃣ Add trackBy: trackByIndex (or id, name, ...)
5️⃣ Enjoy (often massive) perf improvements
Please open Telegram to view this post
VIEW IN TELEGRAM
Directive Composition API
Available since #Angular v15.0.0
🔹 Streamlines directive application.
🔹 Boosts reusability & DX!
Key Points:
1️⃣ Simplified Integration:
• Use hostDirectives for easier merging of directive functionalities.
2️⃣ Encapsulation & Reusability:
• E.g., Interactive product cards now centralize logic within the component, not the template.
3️⃣ Extended Functionalities:
• Enhance apps by extending built-in directives or external libraries.
4️⃣ Advanced Interactions:
• Pass data or emit values with ease using expanded host directive declarations.
5️⃣ Compilation Phase:
• Host directives are statically applied, ensuring proper integration.
⚠️ Performance Watch:
Avoid overuse to prevent component bloat and performance issues.
Use directive composition strategically for efficient, high-performing apps. Handle with care!
Real-World Usage:
• Hover-to-zoom on product images.
• Drag-and-drop data cards.
• Click-to-expand for trip details.
• Touch-to-rotate 3D models.
Available since #Angular v15.0.0
🔹 Streamlines directive application.
🔹 Boosts reusability & DX!
Key Points:
1️⃣ Simplified Integration:
• Use hostDirectives for easier merging of directive functionalities.
2️⃣ Encapsulation & Reusability:
• E.g., Interactive product cards now centralize logic within the component, not the template.
3️⃣ Extended Functionalities:
• Enhance apps by extending built-in directives or external libraries.
4️⃣ Advanced Interactions:
• Pass data or emit values with ease using expanded host directive declarations.
5️⃣ Compilation Phase:
• Host directives are statically applied, ensuring proper integration.
⚠️ Performance Watch:
Avoid overuse to prevent component bloat and performance issues.
Use directive composition strategically for efficient, high-performing apps. Handle with care!
Real-World Usage:
• Drag-and-drop data cards.
• Click-to-expand for trip details.
• Touch-to-rotate 3D models.
❤1
⚠️ Be very careful using this! ⚠️
takeUntilDestroyed() in #Angular v16
Unsubscribing from #RxJS observable.
• Context:
Always pass destroyRef if using takeUntilDestroyed() outside an injection context.
• Injection Context:
Code running before a class (e.g., a component) is instantiated.
Examples: class constructor & class field declarations.
✅ Will Work ✅
• Using inject directly within a class field & chaining with takeUntilDestroyed().
• Using takeUntilDestroyed() within a constructor.
• Explicitly injecting DestroyRef and using it with takeUntilDestroyed().
❌ Won’t Work ❌
• Using takeUntilDestroyed() within ngOnInit without DestroyRef.
• In a Guard or Interceptor DestroyRef.onDestory() in most cases is never called. Since Injector is not destroyed.
takeUntilDestroyed() in #Angular v16
Unsubscribing from #RxJS observable.
• Context:
Always pass destroyRef if using takeUntilDestroyed() outside an injection context.
• Injection Context:
Code running before a class (e.g., a component) is instantiated.
Examples: class constructor & class field declarations.
✅ Will Work ✅
• Using inject directly within a class field & chaining with takeUntilDestroyed().
• Using takeUntilDestroyed() within a constructor.
• Explicitly injecting DestroyRef and using it with takeUntilDestroyed().
❌ Won’t Work ❌
• Using takeUntilDestroyed() within ngOnInit without DestroyRef.
• In a Guard or Interceptor DestroyRef.onDestory() in most cases is never called. Since Injector is not destroyed.
👍1
🎙 Exciting News! 🎙
Get ready for an electrifying episode of the Angular Master Podcast! We're thrilled to announce our upcoming episode featuring a special guest straight from Lyon, France – Younes Jaaidi!
In this episode, we'll cover a wide range of topics with Younes:
✅ How Younes started his journey in programming.
✅ The importance of testing in Angular development.
✅ Dive into various types of tests in Angular, from unit tests to end-to-end tests.
✅ Best practices for mocking dependencies and services.
✅ Common challenges in testing large Angular applications.
✅ Exploring test-driven development (TDD) in Angular.
✅ Tips for handling Angular forms and user interactions.
✅ Strategies for optimizing Angular test execution.
✅ Debugging and troubleshooting tips for failing tests.
✅ Maintaining a healthy test suite as your Angular project evolves.
✅ The integration of Continuous Integration (CI) and Continuous Deployment (CD) in testing workflows.
But that's not all! Younes is also the mastermind behind the "Pragmatic Angular Testing - Master Class." We'll get an exclusive sneak peek into what participants can expect from this workshop, covering everything from Test-Driven Development to choosing the right tests and implementing pragmatic testing strategies.
Are you excited yet? We sure are! Don't miss this episode, and stay tuned for the release date.
And speaking of workshops, remember to join us for the Pragmatic Angular Testing - Master Class, available both in-person and online. Testing is a vital aspect of frontend development, and Younes will equip you with practical techniques to implement meaningful, maintainable tests for your Angular applications.
But here's the kicker! You can listen to our podcast on all major streaming platforms and catch it on the NG Poland Conf YouTube channel. Stay tuned for more updates, and we look forward to seeing you at NG Poland and JS Poland 2023. 👏🚀
https://bit.ly/amp49-apple
https://bit.ly/amp49-spotify
https://bit.ly/amp49-google
https://bit.ly/amp49-youtube
Get ready for an electrifying episode of the Angular Master Podcast! We're thrilled to announce our upcoming episode featuring a special guest straight from Lyon, France – Younes Jaaidi!
In this episode, we'll cover a wide range of topics with Younes:
✅ How Younes started his journey in programming.
✅ The importance of testing in Angular development.
✅ Dive into various types of tests in Angular, from unit tests to end-to-end tests.
✅ Best practices for mocking dependencies and services.
✅ Common challenges in testing large Angular applications.
✅ Exploring test-driven development (TDD) in Angular.
✅ Tips for handling Angular forms and user interactions.
✅ Strategies for optimizing Angular test execution.
✅ Debugging and troubleshooting tips for failing tests.
✅ Maintaining a healthy test suite as your Angular project evolves.
✅ The integration of Continuous Integration (CI) and Continuous Deployment (CD) in testing workflows.
But that's not all! Younes is also the mastermind behind the "Pragmatic Angular Testing - Master Class." We'll get an exclusive sneak peek into what participants can expect from this workshop, covering everything from Test-Driven Development to choosing the right tests and implementing pragmatic testing strategies.
Are you excited yet? We sure are! Don't miss this episode, and stay tuned for the release date.
And speaking of workshops, remember to join us for the Pragmatic Angular Testing - Master Class, available both in-person and online. Testing is a vital aspect of frontend development, and Younes will equip you with practical techniques to implement meaningful, maintainable tests for your Angular applications.
But here's the kicker! You can listen to our podcast on all major streaming platforms and catch it on the NG Poland Conf YouTube channel. Stay tuned for more updates, and we look forward to seeing you at NG Poland and JS Poland 2023. 👏🚀
https://bit.ly/amp49-apple
https://bit.ly/amp49-spotify
https://bit.ly/amp49-google
https://bit.ly/amp49-youtube