Code With Gio
Code With Gio
  • 34
  • 137 830
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
Переглядів: 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)

КОМЕНТАРІ

  • @vmave94
    @vmave94 13 днів тому

    I love ramda but unfortunately most of people avoiding it for some reason and prefer to install heavy weight and ugly lodash :(

    • @CodeWithGio
      @CodeWithGio 13 днів тому

      yeah, unfortunate reality is that most devs/projects don't care/need quality, so whatever is fancy and trendy, it wins

  • @balunandam8006
    @balunandam8006 Місяць тому

    you're awesome, best explanation. Thank you.

  • @GameGeek-yi9mb
    @GameGeek-yi9mb 2 місяці тому

    if you are reading this can you tell me how to do this with a transducer and a tap function with compose?

  • @RAVINDERSINGH-ht6pl
    @RAVINDERSINGH-ht6pl 4 місяці тому

    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.

  • @kunningdreamz
    @kunningdreamz 5 місяців тому

    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?

  • @jameswachira5713
    @jameswachira5713 7 місяців тому

    Excellent explanation. Good work sir

  • @okechirichard7259
    @okechirichard7259 9 місяців тому

    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.

  • @okechirichard7259
    @okechirichard7259 9 місяців тому

    I have just learnt how to subscribe, I had to subscribe to the channel as well

  • @abhisheksutar1747
    @abhisheksutar1747 Рік тому

    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?

  • @hiteshsuthar1097
    @hiteshsuthar1097 Рік тому

    Fantastic Content, Now I'm starting to love Rxjs. Thanks 👍✨❄️

  • @alinapostol2230
    @alinapostol2230 Рік тому

    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!

  • @Jesus-hi6qy
    @Jesus-hi6qy Рік тому

    🎉 gracias por tu opinión sobre este libro, que libro recomendarias para aprender programacion Funcional, saludos. Me suscribo +1

  • @afshin7104
    @afshin7104 Рік тому

    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???

  • @mikheilmusaelyan
    @mikheilmusaelyan Рік тому

    ერთი 100 ვიდეოს ვუყურე და შენგან გავიგე, მადლობაა❤❤

  • @levanloladze4382
    @levanloladze4382 Рік тому

    love from Georgia ❤❤❤🇬🇪 🇬🇪 🇬🇪 🇬🇪 🇬🇪 🇬🇪

  • @IR-vx9ee
    @IR-vx9ee Рік тому

    Sorry, i have question - what is this $ sign i see at the end of function names etc?

    • @CodeWithGio
      @CodeWithGio Рік тому

      It is just addition to name, nothing special

  • @joecok
    @joecok Рік тому

    Thank you so much for this tutorial. You are a great teacher

  • @joecok
    @joecok Рік тому

    Great video

  • @dmg4011
    @dmg4011 Рік тому

    Awesome work there. Any change you know / might make a series of NgRx too? Subbed :)

  • @ayushbhatnagar3889
    @ayushbhatnagar3889 Рік тому

    brilliant explanation. Thanks a lot

  • @Johnnyh1Q
    @Johnnyh1Q Рік тому

    წარმატებები გიო. კარგ საქმეს აკეთბ <3

  • @piotrjarzabek-up9jc
    @piotrjarzabek-up9jc Рік тому

    very thanks i was looking for solution like this i was not sure :D

  • @TravisSomaroo
    @TravisSomaroo Рік тому

    Hi Gio great video, do you perhaps have GIT repo with this tutorial?

  • @dinesh.m7341
    @dinesh.m7341 Рік тому

    Thank you 👍

  • @sandeshwar
    @sandeshwar Рік тому

    This is an amazing pattern!! I guess the @ngrx/component-store is following similar pattern. Now I know how it's working 😄

  • @donatusbrainokwe4350
    @donatusbrainokwe4350 Рік тому

    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 🙏

  • @altamashsabri8142
    @altamashsabri8142 Рік тому

    Thanks a lot

  • @mikhailratner4649
    @mikhailratner4649 Рік тому

    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 :)

  • @oletrn
    @oletrn Рік тому

    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.

  • @rafiquemohammed3029
    @rafiquemohammed3029 Рік тому

    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.

    • @CodeWithGio
      @CodeWithGio Рік тому

      I've covered that in other videos, once error happens entire execution is halted and subscribers receive notification via error handler

  • @puyabahrani2250
    @puyabahrani2250 Рік тому

    Thank you, very good explanation

  • @sportstudent13
    @sportstudent13 Рік тому

    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

    • @CodeWithGio
      @CodeWithGio Рік тому

      Yeah this is one of the many, it depends on your project and needs. Most of the time loading handling is UX problem/decision

  • @colinstringer561
    @colinstringer561 Рік тому

    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.

    • @CodeWithGio
      @CodeWithGio Рік тому

      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

    • @colinstringer561
      @colinstringer561 Рік тому

      ​@@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?

    • @CodeWithGio
      @CodeWithGio Рік тому

      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

  • @cybergr3g
    @cybergr3g Рік тому

    Meilleur tuto RxJS du monde ! J'ai découvert share() et perfectionné le reste. Merci !!!

  • @JBuchmann
    @JBuchmann Рік тому

    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?

    • @CodeWithGio
      @CodeWithGio Рік тому

      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

  • @luismaini
    @luismaini Рік тому

    nice implementation, thanks

  • @meysam8357
    @meysam8357 Рік тому

    thank you for this tutorial this is the best tutorial i found to explain the flatten operators

  • @JBuchmann
    @JBuchmann Рік тому

    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.

    • @CodeWithGio
      @CodeWithGio Рік тому

      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.

  • @JBuchmann
    @JBuchmann Рік тому

    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!

    • @CodeWithGio
      @CodeWithGio Рік тому

      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

  • @JBuchmann
    @JBuchmann Рік тому

    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.

    • @CodeWithGio
      @CodeWithGio Рік тому

      I think there is video in the end of this series, with relatively practical example

    • @JBuchmann
      @JBuchmann Рік тому

      @@CodeWithGio Thanks so much. Subbed! 👍

  • @JBuchmann
    @JBuchmann Рік тому

    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.

    • @CodeWithGio
      @CodeWithGio Рік тому

      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

  • @lukaszpiotrluczak
    @lukaszpiotrluczak Рік тому

    What is done right here?

  • @SrckyBoi
    @SrckyBoi 2 роки тому

    Couldn't you just have used ChangeDetectorRef instead?

    • @CodeWithGio
      @CodeWithGio 2 роки тому

      ChangeDetectorRef works with Angular change detection i.e dom updates, it has nothing to do with observables

  • @kristinbradham3593
    @kristinbradham3593 2 роки тому

    You are a genius - thank you!

  • @sanaa4092
    @sanaa4092 2 роки тому

    thx bro <3

  • @baljeetsangrur
    @baljeetsangrur 2 роки тому

    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.

    • @CodeWithGio
      @CodeWithGio 2 роки тому

      You are missing the point, observables and fp scale really well

    • @skaffen
      @skaffen Рік тому

      You just don't know how to do it properly.

  • @unikgamingyt299
    @unikgamingyt299 2 роки тому

    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. 😊

  • @liedebunker1253
    @liedebunker1253 2 роки тому

    I've watched a few, but only this one makes it clear! Thank you very much!👍

  • @ianfoster232
    @ianfoster232 2 роки тому

    Amazing explanation! I have been rescued from the fog of numerous other videos and now have complete clarity. Thank you so much!

  • @martytaylor2322
    @martytaylor2322 2 роки тому

    Awesome explanations! Thanks.