Latest Angular updates from Google I/O.
- Signals under the hood of YouTube
- Signals are now officially available in Angular
- RxJS optional
etc.

https://youtu.be/srP2P6j4Cqw?si=NdvKyez39zwl9Erc

#angular

Don't use enums in TS. Any other thoughts?
https://www.wordman.dev/blog/typescript-enums

#advanced #typescript

Check out Angular Challenges. It might be interesting for those who who lack some practise and way how to implement some stuff in Angular.

#angular #tips

https://angular-challenges.vercel.app/

There are now Schematics available to migrate your components from one file to multiple with .html and styles and vice versa.

https://github.com/ngxtension/ngxtension-platform/issues/362

#angular #tips

The only certification any developer will need soon is copilot prompting 😁

https://www.youtube.com/live/NTYJqgGBChM?si=Z0LxaBOpTaRihFFW

#ai #copilot #advanced #tips

The way you can optimize your images with almost no efforts in Angular with NgOptimizedImage Directive

https://angularindepth.com/posts/1511/improve-page-performance-and-lcp-with-ngoptimizedimage

#angular #tips #images #LCP

Full Stack developement can be easier with monorepos like you can see on the picture. Of course the most popular is NX, but Lerna & TurboRepo from Vercel are to consider in future.

https://monorepo.tools/

#tips

Learning RxJS is always a challenge 😅
https://youtu.be/OhuRvfcw3Tw?si=BgEsECRdSkSegU1X

#rxjs #angular #tips

Zoneless Angular and new Router features. https://buff.ly/4eHuEbS

#angular #v18

If you want to use Headless UI components in your projects instead of libraries like material you can use both
https://www.spartan.ng/documentation/installation
and
http://angularprimitives.com/
But make sure this will cover all your needs, because it is far from feature set regular libraries has, especially for big projects.

#angular #ui

Що захищає твої дані й гроші від хакерів? Асиметричне шифрування та цифровий підпис
Нарешті нове відео на каналі 😃

Шифрування й цифровий підпис лежить в основі безпеки Інтернету. Базове розуміння цих концепций важливе для кожного інженера.

У відео спробував відповісти на:
✅ Чим відрізняється симетрична й асиметрична криптографія?
✅ Навіщо потрібен вектор ініціалізації?
✅ Як працює аутентифікація по ключу в SSH?
✅ Як працює Дія підпис чи підпис в банківських системах?
✅ Як працює шифрування листів за допомогою PGP. Той самий Proton mail?
✅ Як працює JWT?
✅ Як праюють холодні гаманці в блокчейні?
✅ Як працює двофакторна аутентифікація через Google Authenticator?

Відео - https://youtube.com/watch?v=rbDsf9DGrqg

output & outputToObservable - new outputs API comes to handy
https://blog.angular.dev/meet-angulars-new-output-api-253a41ffa13c

#angular #v17

Two-way binding with signals in developer preview:

https://angular.dev/guide/signals/model#two-way-binding-with-signals

#angular #signals

If you have multiple directives on your element you can order their execution if those are related to each other
https://angular.dev/guide/directives/directive-composition-api#directive-execution-order
#angular #advanced

Best practises of using Angular SSR from v18

https://www.angulararchitects.io/blog/complete-guide-for-server-side-rendering-ssr-in-angular/

#advanced #universal #angular #ssr #pwa #v18

Madge is a developer tool for generating a visual graph of your module dependencies, finding circular dependencies, and giving you other useful info

— madge npm docs

One of my favorite and honestly one of the best tools when determining the health of the Angular codebase is called madge which allows us to visualize dependency graph of the project with a single command!

npx madge src/main.ts --ts-config tsconfig.json --image ./deps.webp

(* make sure to adjust paths based on your exact workspace structure)

It will crawl through all files .ts files (and the files they import, …) and produce an easy to understand chart with which are very easy to read

✅ does it look organized, left to right
🔥 does it look like it was made by a bunch of drunk spiders

and we can use them to

determine codebase health
find areas to improve
communicate with non-technical colleagues
The last point can come extremely handy when justifying often much needed refactoring / technical dept clearing efforts which can benefit the organization by increasing overall shipping velocity, but are often hard to justify and communicate properly!

Ref: https://angularexperts.io/blog/top-10-angular-architecture-mistakes?utm_source=linkedin&UTM_MEDIUM=SELF&UTM_CONTENT=POST&UTM_CONTENT_TYPE=BLOG&UTM_CAMPAIGN=TOP-10-ARCH-MISTAKES

UX is part of FE
Must know features you should know working with tables
https://www.pencilandpaper.io/articles/ux-pattern-analysis-enterprise-data-tables
&
https://medium.com/design-bridges/complex-tables-356826d11861

#ux #design

😱 You will not believe what are those myths!

https://youtu.be/JGQmn3c5UeE?si=Uf3U2vDMzCi5clPE

#angular #advanced

Some latest updates regarding use of SSR in angular

#angular #ssr #universal #v18 #advanced
https://www.angulararchitects.io/blog/complete-guide-for-server-side-rendering-ssr-in-angular/