Hello, friends!
As you can see, I'm a Ukrainian software engineer who tries to do volunteer fundraisers to support the Armed Forces of Ukraine. Sometimes it takes a lot of time and I am not able to maintain this channel for you. Please help me close these fundraisers because without the Ukrainian army there will be nothing Ukrainian. Thank you very much!
💵 FOR Ukraine:
https://send.monobank.ua/jar/AgppwxhwLX
5375 4114 1222 8582
🌎 FOR ALL DONATS:
💵 SWIFT code: UNJSUAUKXXX
💵 PayPal: luckystudydanit@gmail.com
My profile with reports after closing fundraiser :
https://www.facebook.com/volunt2erua/
also all reports in our🚀 channel:
https://t.me/toxicc_squad
As you can see, I'm a Ukrainian software engineer who tries to do volunteer fundraisers to support the Armed Forces of Ukraine. Sometimes it takes a lot of time and I am not able to maintain this channel for you. Please help me close these fundraisers because without the Ukrainian army there will be nothing Ukrainian. Thank you very much!
💵 FOR Ukraine:
https://send.monobank.ua/jar/AgppwxhwLX
5375 4114 1222 8582
🌎 FOR ALL DONATS:
💵 SWIFT code: UNJSUAUKXXX
💵 PayPal: luckystudydanit@gmail.com
My profile with reports after closing fundraiser :
https://www.facebook.com/volunt2erua/
also all reports in our
https://t.me/toxicc_squad
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
📄 Saga Pattern Guide in Microservices with Node.js
#nodejs #guide #pattern
There are 2 approaches to implementing the Saga pattern: Choreography-Based Saga and Orchestration-Based Saga.
Choreography-Based Saga approach and a real-world hotel room reservation scenario with 3 microservices: Booking Service, Payment Service, and Notification Service.
✅ Article link
#nodejs #guide #pattern
The Saga pattern addresses this by breaking a transaction into smaller, local transactions handled by different services.
There are 2 approaches to implementing the Saga pattern: Choreography-Based Saga and Orchestration-Based Saga.
— Orchestration-Based Saga: A single orchestrator (arranger) manages all the transactions and directs services to execute local transactions.
— Choreography-Based Saga: All the services that are part of the distributed transaction publish a new event after completing their local transaction.
Choreography-Based Saga approach and a real-world hotel room reservation scenario with 3 microservices: Booking Service, Payment Service, and Notification Service.
— Booking Service: Starts the process by reserving a room. This is the first local transaction. Once successful, it sends a message to the Payment Service to process the payment.Prerequisites
— Payment Service: Receives the message and processes the payment. If the payment is successful, it commits its local transaction and informs the Booking Service and Notification Service.
— Notification Service: On receiving confirmation of successful payment, it sends a booking confirmation email to the user.
— Handling Failures: If the Payment Service encounters an issue (e.g., payment decline), it returns a failure message to the Booking Service. The Booking Service then executes a compensating transaction to cancel the room reservation, ensuring the system returns to its original consistent state.
— Node.js project with necessary dependencies (express, amqplib, nodemailer, mongoose, dotenv) installed.
— RabbitMQ server running locally or remotely.
— Email server or service for the Notification Service (e.g., Nodemailer with SMTP or an email API service).
✅ Article link
👍2
❤3
📄 Declarative way of working with signal effects
#angular #signals #effect
✅ Article link
#angular #signals #effect
...This approach simplifies the reactive component state management in Angular applications, making the code more declarative and easier to maintain...
✅ Article link
👍2
📄 Permission/Role-based Security
#angular #guard #guide
No matter what client application you are working with, the following are the five ingredients that are needed to implement permission-based security:
1 — Client-side API Resource
2 — Client Side Session Service
3 — Fall-back Route
4 — Navigation Guards
5 — Fragment Guards
✅ Article link
#angular #guard #guide
No matter what client application you are working with, the following are the five ingredients that are needed to implement permission-based security:
1 — Client-side API Resource
2 — Client Side Session Service
3 — Fall-back Route
4 — Navigation Guards
5 — Fragment Guards
✅ Article link
📄 1/3 100+ FREE Resources Every Web Developer Must Try
#frontend #info
FREE Resources to Learn Web Development 🔥
Websites: freeCodeCamp, MDN Web Docs, W3Schools, Scrimba, Codecademy, TheOdinProject, Frontend Mentor, Javascript30, Coursera, Khan Academy
YouTube Channels: Traversy Media, The Net Ninja, Code with Harry (Hindi), Web Dev Simplified, Coder Coder, The Coding Train, FreeCodeCamp
FREE Hosting Platforms for Your Websites 🔥
— Netlify: Deploy your web projects with ease.
— Render: Host web applications and static sites effortlessly.
— GitHub Pages: Host your static websites directly from your GitHub repository.
— Firebase Hosting: Scale your web apps effortlessly with Firebase.
— Vercel: Deploy websites and applications with automatic deployments.
— Cyclic.sh: Host your static sites with zero configuration.
— Appwrite: Open-source backend server for web and mobile developers.
— Supabase: Build modern apps with a scalable backend.
— InfinityFree: Free and unlimited web hosting with PHP, MySQL, and more.
— Surge: Static web publishing for front-end developers.
FREE APIs for Your Projects 🔥
— OpenWeatherMap API: Access current weather data for any location.
— News API: Retrieve live news articles from various sources.
— REST Countries API: Get information about countries worldwide.
— Chuck Norris Jokes API: Lighten up your projects with Chuck Norris jokes.
— Open Food Facts API: Access food product information and ingredients.
— Reddit API: Fetch Reddit data, including posts and comments.
— OneDrive API: Manage files and folders on Microsoft OneDrive.
— Dogs API: Bring adorable dog images and information to your projects.
— GIPHY API: Integrate GIFs and stickers into your applications.
— OMDb API: Access a database of movies and TV shows.
— VirusTotal API: Analyze suspicious files and URLs for malware.
— PokeAPI: Retrieve Pokémon data for your gaming-related projects.
— NASA API: Access a wealth of NASA data, including imagery and information.
#frontend #info
FREE Resources to Learn Web Development 🔥
Websites: freeCodeCamp, MDN Web Docs, W3Schools, Scrimba, Codecademy, TheOdinProject, Frontend Mentor, Javascript30, Coursera, Khan Academy
YouTube Channels: Traversy Media, The Net Ninja, Code with Harry (Hindi), Web Dev Simplified, Coder Coder, The Coding Train, FreeCodeCamp
FREE Hosting Platforms for Your Websites 🔥
— Netlify: Deploy your web projects with ease.
— Render: Host web applications and static sites effortlessly.
— GitHub Pages: Host your static websites directly from your GitHub repository.
— Firebase Hosting: Scale your web apps effortlessly with Firebase.
— Vercel: Deploy websites and applications with automatic deployments.
— Cyclic.sh: Host your static sites with zero configuration.
— Appwrite: Open-source backend server for web and mobile developers.
— Supabase: Build modern apps with a scalable backend.
— InfinityFree: Free and unlimited web hosting with PHP, MySQL, and more.
— Surge: Static web publishing for front-end developers.
FREE APIs for Your Projects 🔥
— OpenWeatherMap API: Access current weather data for any location.
— News API: Retrieve live news articles from various sources.
— REST Countries API: Get information about countries worldwide.
— Chuck Norris Jokes API: Lighten up your projects with Chuck Norris jokes.
— Open Food Facts API: Access food product information and ingredients.
— Reddit API: Fetch Reddit data, including posts and comments.
— OneDrive API: Manage files and folders on Microsoft OneDrive.
— Dogs API: Bring adorable dog images and information to your projects.
— GIPHY API: Integrate GIFs and stickers into your applications.
— OMDb API: Access a database of movies and TV shows.
— VirusTotal API: Analyze suspicious files and URLs for malware.
— PokeAPI: Retrieve Pokémon data for your gaming-related projects.
— NASA API: Access a wealth of NASA data, including imagery and information.
👍5🔥1
📄 2/3 100+ FREE Resources Every Web Developer Must Try
#frontend #info
FREE Sites for Vectors, Images, and Illustrations 🔥
— Freepik: Discover free vectors, photos, PSDs, and icons.
— Vecteezy: Find high-quality vector art, graphics, and illustrations.
— Unsplash: Access over a million free high-resolution photos.
— Pixabay: Explore a vast library of free images and videos.
— Flaticon: Download free icons, SVG, PSD, PNG, EPS format, or as ICON FONT.
— Openclipart: Share and use free clipart and images.
— SVGRepo: Download SVGs for free.
— Vectorportal: Free vectors, clip art, and icons.
— SVGBackgrounds: Customizable SVG patterns and backgrounds.
— FreeDesignFile: High-quality graphic design resources.
— Pexels: Find free stock photos and videos shared by talented creators.
— Vectorian: Download royalty-free vector art, stock photos, and stock footage.
FREE Icons for Your Projects 🔥
FontAwesome, Flaticon, Iconfinder, Material Icons, Icons8, BoxIcons, Feather Icons, IcoFont, SVGHUB, Tabler Icons, Iconsmind, Iconmonstr, SVGRepo
FREE Fonts for Your Projects 🔥
Google Fonts,1001FreeFonts, Fontjoy, Fontsly, FontSpace, AbstractFonts, FontZone, DevFonts, DaFont, FontSquirrel, FontFabric
FREE Cheat Sheet Sites🔥
— HTML Cheat Sheet: Quick reference guide for HTML elements and attributes.
— CSS Cheat Sheet: Comprehensive guide to CSS properties and selectors.
— JavaScript Cheat Sheet: Handy reference for JavaScript syntax and concepts.
— Git Cheat Sheet: Essential commands and workflows for Git.
— Markdown Cheat Sheet: Markdown syntax guide for creating rich text formatting.
— React Cheat Sheet: Quick overview of React concepts and syntax.
— Learn x in y minutes: Concise tutorials to learn various programming languages and tools quickly.
— SQL Cheat Sheet: Comprehensive SQL commands and queries reference.
— OverAPI: Collection of cheat sheets for various programming languages and frameworks.
#frontend #info
FREE Sites for Vectors, Images, and Illustrations 🔥
— Freepik: Discover free vectors, photos, PSDs, and icons.
— Vecteezy: Find high-quality vector art, graphics, and illustrations.
— Unsplash: Access over a million free high-resolution photos.
— Pixabay: Explore a vast library of free images and videos.
— Flaticon: Download free icons, SVG, PSD, PNG, EPS format, or as ICON FONT.
— Openclipart: Share and use free clipart and images.
— SVGRepo: Download SVGs for free.
— Vectorportal: Free vectors, clip art, and icons.
— SVGBackgrounds: Customizable SVG patterns and backgrounds.
— FreeDesignFile: High-quality graphic design resources.
— Pexels: Find free stock photos and videos shared by talented creators.
— Vectorian: Download royalty-free vector art, stock photos, and stock footage.
FREE Icons for Your Projects 🔥
FontAwesome, Flaticon, Iconfinder, Material Icons, Icons8, BoxIcons, Feather Icons, IcoFont, SVGHUB, Tabler Icons, Iconsmind, Iconmonstr, SVGRepo
FREE Fonts for Your Projects 🔥
Google Fonts,1001FreeFonts, Fontjoy, Fontsly, FontSpace, AbstractFonts, FontZone, DevFonts, DaFont, FontSquirrel, FontFabric
FREE Cheat Sheet Sites🔥
— HTML Cheat Sheet: Quick reference guide for HTML elements and attributes.
— CSS Cheat Sheet: Comprehensive guide to CSS properties and selectors.
— JavaScript Cheat Sheet: Handy reference for JavaScript syntax and concepts.
— Git Cheat Sheet: Essential commands and workflows for Git.
— Markdown Cheat Sheet: Markdown syntax guide for creating rich text formatting.
— React Cheat Sheet: Quick overview of React concepts and syntax.
— Learn x in y minutes: Concise tutorials to learn various programming languages and tools quickly.
— SQL Cheat Sheet: Comprehensive SQL commands and queries reference.
— OverAPI: Collection of cheat sheets for various programming languages and frameworks.
👍2
📄 3/3 100+ FREE Resources Every Web Developer Must Try
#frontend #info
FREE Sites for HTML/CSS Templates 🔥
HTML5UP, HTMLRev, Free-CSS, Templated, FreeHTML5, Start, Bootstrap, Bootswatch, BootstrapTaste, Cruip, Tooplate, HTML5xCSS3
Learn CSS by Playing Games 🔥
CSS Diner: Practice CSS selectors with a fun game.
Flexbox Froggy: Learn CSS Flexbox by playing this game.
Grid Garden: Master CSS Grid layout by playing this game.
Flexbox Defense: A game to learn CSS Flexbox.
CSSBattle: Compete against others by writing CSS code.
Flexbox Zombies: Learn CSS Flexbox by playing this game.
FREE Code Editors 🔥
— Visual Studio Code (VS Code)
— Sublime Text
— Brackets
— Vim
JavaScript Animation Libraries 🔥
— Anime.js: Lightweight JavaScript animation library.
— ScrollReveal.js: Easily reveal elements as they enter the viewport.
— Popmotion: A functional, flexible JavaScript motion library.
— AniJS: Declarative handling library for CSS animations.
— Wow.js: Reveal CSS animation as you scroll down a page.
— Typed.js: A JavaScript library that types.
— Velocity.js: Accelerated JavaScript animation.
— GSAP: Professional-grade animation for the modern web.
#frontend #info
FREE Sites for HTML/CSS Templates 🔥
HTML5UP, HTMLRev, Free-CSS, Templated, FreeHTML5, Start, Bootstrap, Bootswatch, BootstrapTaste, Cruip, Tooplate, HTML5xCSS3
Learn CSS by Playing Games 🔥
CSS Diner: Practice CSS selectors with a fun game.
Flexbox Froggy: Learn CSS Flexbox by playing this game.
Grid Garden: Master CSS Grid layout by playing this game.
Flexbox Defense: A game to learn CSS Flexbox.
CSSBattle: Compete against others by writing CSS code.
Flexbox Zombies: Learn CSS Flexbox by playing this game.
FREE Code Editors 🔥
— Visual Studio Code (VS Code)
— Sublime Text
— Brackets
— Vim
JavaScript Animation Libraries 🔥
— Anime.js: Lightweight JavaScript animation library.
— ScrollReveal.js: Easily reveal elements as they enter the viewport.
— Popmotion: A functional, flexible JavaScript motion library.
— AniJS: Declarative handling library for CSS animations.
— Wow.js: Reveal CSS animation as you scroll down a page.
— Typed.js: A JavaScript library that types.
— Velocity.js: Accelerated JavaScript animation.
— GSAP: Professional-grade animation for the modern web.
👍4❤2🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
📄 Customizable Angular animations
#angular #animations #ui_element
✅ Article link
#angular #animations #ui_element
...A component with customizable animations might look like this...
// collapse.ts
const closedStyle = style({
height: 0
});
const openStyle = style({
height: '*'
});
const timings = '{{duration}}ms linear';
const defOptions: AnimationOptions = {
params: {
duration: 300
}
};
export const collapse = trigger('collapse', [
transition(
':enter',
animation([closedStyle, animate(animateTimings, openStyle)]),
defaultOptions
),
transition(
':leave',
animation([openStyle, animate(animateTimings, closedStyle)]),
defaultOptions
),
]);
// bonus.component.ts
@Component({
animations: [collapse],
host: {
'[@collapse]': 'animationOptions',
},
})
export class BonusComponent implements OnInit {
@Input() public duration = 300;
public options!: IAnimationOptions<string>
public ngOnInit(): void {
this.options = {
value: '_',
params: {
duration: this.duration
},
};
}
}
✅ Article link
👍3❤1🔥1