![Code With Gio](/img/default-banner.jpg)
- 34
- 137 830
Code With Gio
Georgia
Приєднався 25 чер 2019
Google Interview Question (#1)
In this video we discuss Google interview question from binarysearch.com (Communication Towers)
Problem:
bit.ly/3J6zCOU
My Solution:
bit.ly/3utjeUv
00:00 - Intro
00:42 - Problem
02:27 - Solution
05:47 - Implementation
10:54 - Complexity
Problem:
bit.ly/3J6zCOU
My Solution:
bit.ly/3utjeUv
00:00 - Intro
00:42 - Problem
02:27 - Solution
05:47 - Implementation
10:54 - Complexity
Переглядів: 199
Відео
Top 5 Reasons I'm using Angular | Angular Tips and Tricks
Переглядів 1,5 тис.2 роки тому
In this video I talk about my personal top 5 reasons for using Angular. 00:00 - Intro 02:13 - Top 5 Reasons 09:37 - Final thoughts
Build Reactive Table (Real world RxJS) | RxJS Tutorials
Переглядів 1,5 тис.2 роки тому
This is the final video in a series. We apply the concepts covered so far in a relatively realistic scenario. 00:00 - Intro 01:15 - Display games 06:26 - Search string filter 13:00 - Dealing with unnecessary requests 17:54 - Checkbox filter 22:49 - Select filter 26:00 - Final thoughts
Subject vs BehaviorSubject vs ReplaySubject vs AsyncSubject | RxJS Tutorials
Переглядів 6 тис.3 роки тому
Subjects are another key building block of RxJS. There are different subjects with subtle differences between them. 00:00 - Intro 00:21 - Subject 04:19 - BehaviorSubject 06:30 - ReplaySubject 08:30 - AsyncSubject 11:21 - Summary
Share the work | RxJS Tutorials
Переглядів 1,7 тис.3 роки тому
Learn about the "share" operator to avoid performance hits when working with complex observables. 00:00 - Intro & Task 01:20 - Display total number of games 02:47 - Push list of options into select 06:40 - The problem 08:50 - Solution
Loading indicator done right | Angular Tips and Tricks
Переглядів 7 тис.3 роки тому
A little trick to handle loading indicators in Angular To understand how map operators work in RxJS, check this: ua-cam.com/video/5wV8YppGfd0/v-deo.html 00:00 - Intro 01:10 - Primitive Solution 03:14 - Basic Solution 06:50 - Better Solution 09:54 - Advanced Solution
mergeMap vs concatMap vs exhaustMap vs switchMap | RxJS Tutorials
Переглядів 13 тис.3 роки тому
In this video we discuss crucial map operators of RxJS: mergeMap, concatMap, exhaustMap and switchMap. In order to properly use RxJS and compose different observables it's essential to understand how they work and what's the difference. 00:00 - Intro 03:35 - mergeMap 13:01 - concatMap 17:31 - switchMap 22:27 - exhaustMap
Understanding operators | RxJS Tutorials
Переглядів 7853 роки тому
Finally we discuss operators, demystify how they work by creating custom operator and comparing it to standard ones that ship with RxJS. Before you watch, make sure you understand how Observables work in general, by watching previous videos bit.ly/3b0Rhsy
Create useful Observables | RxJS Tutorials
Переглядів 7123 роки тому
Time to learn some RxJS creation operators. Represent different things as observables: http requests, html element events, sequence of values, pomises, etc.
What is Observer? | RxJS Tutorials
Переглядів 7483 роки тому
In this video we expand our knowledge of RxJS and cover even more basics: how to handle errors, completion, emphasize again the importance of cleanup function, etc.
What is Observable? | RxJS Tutorials
Переглядів 1,2 тис.3 роки тому
This is the 2nd video in a series about RxJS. We cover the core data structure in the library: Observable. This video covers the basics to lay the foundation for further topics
What is RxJS? | RxJS Tutorials
Переглядів 1,5 тис.3 роки тому
This is the first video in a series about RxJS. We'll have a general overview, discuss some hypothetical problems to see how RxJS can be used on a high level and how can we benefit from using it
Handle server (5xx) errors in Angular like a pro | Angular Tips and Tricks
Переглядів 6 тис.3 роки тому
In this video we take a look at the very useful retryWhen operator from rxjs library. Because angular's HTTP client creates observables, we can use retryWhen for failing request. We'll implement custom operator based on that.
Impress interviewer with recursive FizzBuzz | Practice functional programming in javascript
Переглядів 2,1 тис.3 роки тому
Let's have some fun with recursion and FizzBuzz
Implement map function with recursion | Practice functional programming in javascript
Переглядів 4563 роки тому
Let's have some fun and implement map function with recursion
Auto refresh data with RxJS and reactive services | Angular Tips and Tricks
Переглядів 13 тис.3 роки тому
Auto refresh data with RxJS and reactive services | Angular Tips and Tricks
Using flatten function | Practice functional programming in javascript
Переглядів 1963 роки тому
Using flatten function | Practice functional programming in javascript
Implement pipe function | Practice functional programming in javascript
Переглядів 2,6 тис.3 роки тому
Implement pipe function | Practice functional programming in javascript
Cleaner code in two steps | Practice functional programming in javascript
Переглядів 3253 роки тому
Cleaner code in two steps | Practice functional programming in javascript
No More Promises | Difference between Promises and Observables #3 | Angular Tips and Tricks
Переглядів 6183 роки тому
No More Promises | Difference between Promises and Observables #3 | Angular Tips and Tricks
Difference between Promises and Observables #2 | Angular Tips and Tricks
Переглядів 1,1 тис.4 роки тому
Difference between Promises and Observables #2 | Angular Tips and Tricks
Difference between Promises and Observables #1 | Angular Tips and Tricks
Переглядів 1,2 тис.4 роки тому
Difference between Promises and Observables #1 | Angular Tips and Tricks
Make your components reactive | Angular Tips and Tricks
Переглядів 3 тис.4 роки тому
Make your components reactive | Angular Tips and Tricks
"Refresh" observables | Angular Tips and Tricks
Переглядів 40 тис.4 роки тому
"Refresh" observables | Angular Tips and Tricks
Clean way to manage Subscriptions | Angular Tips and Tricks
Переглядів 18 тис.4 роки тому
Clean way to manage Subscriptions | Angular Tips and Tricks
Creating custom async pipes | Angular Tips and Tricks
Переглядів 6 тис.4 роки тому
Creating custom async pipes | Angular Tips and Tricks
Fusion explained | functional programming in javascript (with Ramda.JS) (part 7)
Переглядів 3224 роки тому
Fusion explained | functional programming in javascript (with Ramda.JS) (part 7)
Reduce explained #2 | functional programming in javascript (with Ramda.JS) (part 6)
Переглядів 3454 роки тому
Reduce explained #2 | functional programming in javascript (with Ramda.JS) (part 6)
Reduce explained #1 | functional programming in javascript (with Ramda.JS) (part 5)
Переглядів 3404 роки тому
Reduce explained #1 | functional programming in javascript (with Ramda.JS) (part 5)
Cleaner code with curried functions | functional programming in javascript (with Ramda.JS) (part 4)
Переглядів 4704 роки тому
Cleaner code with curried functions | functional programming in javascript (with Ramda.JS) (part 4)
I love ramda but unfortunately most of people avoiding it for some reason and prefer to install heavy weight and ugly lodash :(
yeah, unfortunate reality is that most devs/projects don't care/need quality, so whatever is fancy and trendy, it wins
you're awesome, best explanation. Thank you.
if you are reading this can you tell me how to do this with a transducer and a tap function with compose?
Thanks for explaining the concept in very simplified way. So in many cases Observable and Promise are similar but the concept of observable was introduced to achieve the desired result which is not readily available with Promise.Does it mean Observable sits between the data source and observer.
If there are two different components and we are using the same methodology, both the components flicker, after hitting a button in the parent component. Can you please try to implement same methodology, with parent/child components?
Excellent explanation. Good work sir
I experienced a challenge grasping the promises and observables content here, hopefully, I catch up elsewhere. But the rest of the playlist has taught me a lot and I will walk all the way through it.
I have just learnt how to subscribe, I had to subscribe to the channel as well
I want to re-subscribe the same subscription that I have unsubscribed without refreshing the page or calling ngOninit(). I have special case in which I must unsubscribe and resubscribe it back without refershing. How I can achieve this?
Fantastic Content, Now I'm starting to love Rxjs. Thanks 👍✨❄️
Best explanation of mergeMap, concatMap, exhaustMap and switchMap, with super easy-to-understand drawings slides. Thank you for the effort you put into making this video!
🎉 gracias por tu opinión sobre este libro, que libro recomendarias para aprender programacion Funcional, saludos. Me suscribo +1
Hi Gio first I wanna thank you for this informative video your game relays on catId from route so when the route changes your game will be refreshed but in my situation i have a userlist when i click on user i go the user detail page so i used your way to observe the userid from route but here is the problem in my user detail page i can edit some of the fields of user after submitting the edit to database i want to refresh the user page in rxjs way the way i was doing it was similar to your way by introducing a refresh subject and calling the next method on that but that method can not work now because the route is not changing am i missing something???
ერთი 100 ვიდეოს ვუყურე და შენგან გავიგე, მადლობაა❤❤
love from Georgia ❤❤❤🇬🇪 🇬🇪 🇬🇪 🇬🇪 🇬🇪 🇬🇪
Sorry, i have question - what is this $ sign i see at the end of function names etc?
It is just addition to name, nothing special
Thank you so much for this tutorial. You are a great teacher
Great video
Awesome work there. Any change you know / might make a series of NgRx too? Subbed :)
Not sure yet
And thanks for the sub
brilliant explanation. Thanks a lot
წარმატებები გიო. კარგ საქმეს აკეთბ <3
very thanks i was looking for solution like this i was not sure :D
Hi Gio great video, do you perhaps have GIT repo with this tutorial?
Not yet
Thank you 👍
This is an amazing pattern!! I guess the @ngrx/component-store is following similar pattern. Now I know how it's working 😄
I love your style of teaching. It's one of the best I've seen on UA-cam. Please I'd love to see more complete project based angular videos from you. Thanks 🙏
Thanks a lot
You are one of the best, if not THE best Angular UA-camrs, thank you! A pity you don't make more videos right now, hope you will continue uploading when you have the time :)
Thanks for the great explanation. It's probably the best one I've seen so far (and I've seen many)! It's funny how after years of working with rxjs I still need a refresher regarding the mapping operators.
The only thing missing in this video is what happens if any one of the request get failed or never emitted anything. for instance Http failure.
I've covered that in other videos, once error happens entire execution is halted and subscribers receive notification via error handler
Thank you, very good explanation
H, thanks for this tutorial. While looking this video I saw a little bug in the "better solution" which hopefully no one uses because the advanced one is clearly the better way to do this. You should clear the timeout before setting the isLoading to false because otherwise (okay, thats a one in a million situation) it can happen that you set isLoading to false, then the second is over and the value is set to true before the timeout is cleared. Nevertheless I love this solution so much. RxJS is such an awesome feature and your solution at the end looks great. I am definitely going to use this in some of my projects! Cheers, Nils
Yeah this is one of the many, it depends on your project and needs. Most of the time loading handling is UX problem/decision
I think there's a cleaner approach. I would change the observable in the service into a subject or behaviorsubject. Then inside the addUser() function in the service you can call .next() to add a user to your user list. This way the component will automatically detect changes that are made in the service (which is the whole point of using observables in the first place). With this approach there won't be a need for a refresh observable, and there won't be a need for any manual subscriptions.
The example is arbitrary. The video is about "refreshing" the observables when you need it, If that need is the result of bad design that's completely different matter
@@CodeWithGio Yeah I guess that's true. I'm relatively new to observables and Angular, so I'm learning the fundamentals still. I don't yet have the insight in what is or isn't possible for each situation. But by watching your video, it makes me wonder, is it possible to have such amazingly clean rxjs design in a project that 'hacky' approaches (no offense) like a refresh-subject aren't necessary?
Yeah, absolutely, ideally you should have a design where refresh happens implicitly on the pages that need fresh data, how to do that? Well that's a topic of its own
Meilleur tuto RxJS du monde ! J'ai découvert share() et perfectionné le reste. Merci !!!
Great tutorial, I learned a lot. I've been using the first method since forever, so now I feel like a noob when I realize the more advanced methods. 😆 Also this video also showed something I never really thought of before... to import a class and instantiate it with the "new" keyword, INSTEAD of having a class be a service and injecting it. I guess your class could be a service instead which you inject, but there's no need for a service since the "loading" state is local to the component and doesn't need to be a singleton. Correct?
Yeah, that's exactly why you need new keyword, you can have many different instances of loading handler. I.e if you make many requests, so it makes sense to manually create them
nice implementation, thanks
thank you for this tutorial this is the best tutorial i found to explain the flatten operators
I like how you get all the important stuff included in the box... http, forms, validation, etc. You join a team and you already know they're using the built-in forms, validation, etc. With React and others each project could use different libraries, so it's hard to get on board fast. I really love Angular reactive forms, and it's the best framework if your app will be very form-heavy. It's so much nicer to work with than other framework's 3rd party solutions. What I don't like about Angular is the TON of boilerplate... it's so much code just for a bare bones component. While with React it's like a couple lines of basic code, so you don't need a CLI to help you! I have used Angular for work, but currently I'm using it for a personal web app project, and I'm currently using React for work.
It depends what you build, I'm comming from a background of building heavy dashboards with maybe 1000+ forms, tons of tables, charts, very complex user interaction, etc. At that scale having a standard set of tools is crucial, I personally like using frameworks, not only on FE, but in general. My phylosophy is this: I'd like to build the product, not the tools (unless tool is the product, but it's very rare). I don't want to "innovate" form handling or making requests in every new project.
Very helpful video, especially for a real world example of combineLatest. One thing to note, which I don't think was mentioned. For combineLatest to do anything, all the observables inside it must have a value. So if one observable never is emitted, then the combineLatest code won't run. (pls correct me if I'm wrong) I guess that's why you pipe on the "startWith" operator, so that you immediately have values for all the observables. I was working on a big React project last year that had a ton of filtering with textboxes, dropdowns, and checkboxes. My code got super complex and hard to debug. If only I would have thought of using combineLatest for this, it would have made the code way simpler!
Yeah you're right, combineLatest needs at least a single value from the observavles, otherwise it's not going to work. As for the multiple filters I agree, functional reactive programming is very useful when building complex UIs
It would be so awesome if you could create a video explaining how to implement the Country/State/Cities form with RxJs. I'm fairly comfortable with RxJs but would have absolutely no idea how to leverage it in that situation.
I think there is video in the end of this series, with relatively practical example
@@CodeWithGio Thanks so much. Subbed! 👍
I have never used exhaustMap in practice, but I have always stuggled to to understand it. (probably why I have never used it). Thank you, your explanation finally made me understand it. I can only think of one real world use case for exhaustMap. Maybe a submit button that get hammered with clicks. When the first click is getting processed by the API, all other clicks (in the observable stream) will get tossed out. But I guess we could also prevent multiple clicks by disabling the button on submit, lol.
You're right disabling the button is the easiest, I've personally rarely used exhaustMap, most of the time it's switchMap with http requests
What is done right here?
Couldn't you just have used ChangeDetectorRef instead?
ChangeDetectorRef works with Angular change detection i.e dom updates, it has nothing to do with observables
You are a genius - thank you!
thx bro <3
Thats why people hate angular, Have to write tons of lines to do a simple task. It can be done easily with real API and AJAX.
You are missing the point, observables and fp scale really well
You just don't know how to do it properly.
Thank you very much for this. I was wondering how to refresh the page and your video popped out. It was very helpful for me. Hopefully will help others too. 😊
I've watched a few, but only this one makes it clear! Thank you very much!👍
Amazing explanation! I have been rescued from the fog of numerous other videos and now have complete clarity. Thank you so much!
Awesome explanations! Thanks.