Akilesh Rao
Akilesh Rao
  • 100
  • 175 135
Zod(crash course) in under 30 minutes. #zod #typescript #javascript
This crash course goes over Zod and its most commonly used features. Its primary use case is to define schemas in conjunction with Typescript types to provide a solid combination of compile-time and run-time validation.
Docs: zod.dev/
Github repo link: github.com/AkileshRao/zod-tutorial
zhlédnutí: 31

Video

I built a Chrome extension(in React) to be more productive. #reactjs #javascript #chrome
zhlédnutí 197Před 28 dny
In this video, I build a Chrome extension in React JS that tracks time spent on domains and blocks access to them after a specific time interval. - Github Repo Link: github.com/AkileshRao/productivity-chrome-extension - Chrome extensions API: developer.chrome.com/docs/extensions/reference/api - Difference between background scripts and extension service workers: developer.chrome.com/docs/extens...
Change in props do not cause a re-render??? #reactjs #javascript #props
zhlédnutí 74Před měsícem
⌚Timestamps 0:00 - Typical react state-prop behavior 1:00 - The problem 2:20 - Why it behaves the way it does 3:54 - Outro 🧑‍💻Other playlists: Tanstack query - czcams.com/play/PL62km_yqC3ZHn5Wh9RaFNaEH3B7mxrv0B.html Push Notifications using SW - czcams.com/play/PL62km_yqC3ZF5Dh9vFdjjRxvn1xQKqj4B.html Service worker in Javascript (2023) - czcams.com/play/PL62km_yqC3ZEs7VWDF1BdmKwFHiXTDZPk.html J...
Render prop pattern in ReactJS
zhlédnutí 102Před 2 měsíci
The Render Prop pattern in React is a powerful technique that allows you to share logic between components using a prop whose value is a function. This pattern enhances component reusability and flexibility by letting you inject dynamic behavior into components without modifying their structure. I've also created a video on a similar design pattern called Compound components. Link to the video:...
The Pub-Sub model(in Javascript)
zhlédnutí 63Před 2 měsíci
The Pub/Sub (Publisher/Subscriber) model in JavaScript is a design pattern that facilitates communication between different parts of an application. In this model, publishers emit events without knowing who will receive them, while subscribers listen for specific events and react accordingly. This decouples the components, making the system more modular and easier to maintain. It's widely used ...
Javascript Promise Method Polyfills (all, allSettled, race, any)
zhlédnutí 98Před 3 měsíci
In this video, we look at the polyfills for the promise methods from the last video. This video is part of a playlist where we look at different native API polyill implementations. Javascript pollyfills playlist: czcams.com/play/PL62km_yqC3ZGrdivumJIDX7WgJegw3R2S.html ⌚Timestamps: 0:00 - Promise.all polyfill 4:40 - Promise.allSettled polyfill 9:20 - Promise.race polyfill 11:00 - Promise.any 15:...
Javascript Promise Methods
zhlédnutí 184Před 3 měsíci
In this video, we look at the common Promise methods that let you run multiple promises together and get a consolidated output. In the next video, we'll go through the polyfills for each of these methods. PART 2 for this video - czcams.com/video/jlxvVdmevUw/video.html This video is part of a playlist where we look at different native API polyill implementations. Javascript pollyfills playlist: ...
Javascript bind method polyfill.
zhlédnutí 47Před 3 měsíci
In this video, we take a look at the bind method that's present on the function prototype, why it's used, and how we can create a custom polyfill implementation of it in the simplest way possible. This video is part of a playlist where we look at different native API polyill implementations. Javascript pollyfills playlist: czcams.com/play/PL62km_yqC3ZGrdivumJIDX7WgJegw3R2S.html ⌚Timestamps: 0:0...
Flattening an array in JS (array.flat() polyfill).
zhlédnutí 93Před 3 měsíci
In this video, we take a look at how to recreate the "array.flat" method in javascript. This polyfill is again a very common question that's asked in interviews. Array methods polyfill video: czcams.com/video/wzeWRyogN6c/video.html Javascript pollyfills playlist: czcams.com/play/PL62km_yqC3ZGrdivumJIDX7WgJegw3R2S.html ⌚Timestamps: 0:00 - Flat method overview 1:40 - Flat method polyfill 5:01 - E...
Map-Filter-Reduce: Polyfills.
zhlédnutí 95Před 3 měsíci
In this video, we'll be looking at the 3 array methods, map, filter, and reduce, and how to create our own polyfill for these methods. Javascript Polyfills Playlist: czcams.com/play/PL62km_yqC3ZGrdivumJIDX7WgJegw3R2S.html ⌚Timestamps: 0:00 - Introduction 0:30 - Map method polyfill. 2:56 - Map edge case 5:30 - Filter polyfill 7:29 - Reduce polyfill 12:46 - Outro 🧑‍💻Other playlists: Playwright cr...
Throttling in Javascript & its polyfill.
zhlédnutí 133Před 4 měsíci
In this video, we look at what throttling is and how it helps with increasing efficiency when it comes to making function calls. We also look at a couple of ways to create our own throttle polyfill which is also a common interview question. Debounce polyfill video: czcams.com/video/uvYnZbiKHX0/video.html ⌚Timestamps: 0:00 - Intro 2:41 - Project setup 3:09 - Using a closure 3:56 - Args edge case...
Why the debounce polyfill works: Part 2: Edge cases
zhlédnutí 72Před 4 měsíci
This is a follow-up to the previous video where we looked at the debounce polyfill and how it works. In this video, we take a look at the edge cases that you'll have to consider when building this polyfill. Link to part 1: czcams.com/video/uvYnZbiKHX0/video.html Timestamps: 0:00 - Intro 0:44 - Args edge case 2:24 - Method edge case 4:16 - Problem 1: Invalid “this” keyword 5:17 - Solving the pro...
Why the debounce polyfill works: Part 1
zhlédnutí 118Před 4 měsíci
Why the debounce polyfill works: Part 1
Part 6 - APIs - Playwright + React Crash Course (2024)
zhlédnutí 138Před 5 měsíci
Part 6 - APIs - Playwright React Crash Course (2024)
Part 5 - Continuous Integration(CI) with Github Actions - Playwright + React Crash Course (2024)
zhlédnutí 183Před 5 měsíci
Part 5 - Continuous Integration(CI) with Github Actions - Playwright React Crash Course (2024)
Part 4 - The test function - Playwright + React Crash Course (2024)
zhlédnutí 102Před 5 měsíci
Part 4 - The test function - Playwright React Crash Course (2024)
Part 3 - Auto generate tests - Playwright + React Crash Course (2024)
zhlédnutí 317Před 5 měsíci
Part 3 - Auto generate tests - Playwright React Crash Course (2024)
Part 2 - Your first test! - Playwright + React Crash Course (2024)
zhlédnutí 246Před 5 měsíci
Part 2 - Your first test! - Playwright React Crash Course (2024)
Part 1 - Introduction & initial setup - Playwright + React Crash Course (2024)
zhlédnutí 789Před 5 měsíci
Part 1 - Introduction & initial setup - Playwright React Crash Course (2024)
Why pnpm
zhlédnutí 116Před 6 měsíci
Why pnpm
Story time
zhlédnutí 116Před 6 měsíci
Story time
Compound components pattern in React
zhlédnutí 1,2KPřed 6 měsíci
Compound components pattern in React
Query/Mutation filters | React/Tanstack Query Series - Part 12
zhlédnutí 307Před 7 měsíci
Query/Mutation filters | React/Tanstack Query Series - Part 12
Optimistic updates | React/Tanstack Query Series - Part 11
zhlédnutí 1,1KPřed 7 měsíci
Optimistic updates | React/Tanstack Query Series - Part 11
Mutations | React/Tanstack Query Series - Part 10
zhlédnutí 645Před 7 měsíci
Mutations | React/Tanstack Query Series - Part 10
Infinite scrolling | React/Tanstack Query Series - Part 9
zhlédnutí 1KPřed 8 měsíci
Infinite scrolling | React/Tanstack Query Series - Part 9
Pagination | React/Tanstack Query Series - Part 8
zhlédnutí 533Před 8 měsíci
Pagination | React/Tanstack Query Series - Part 8
Retries | React/Tanstack Query Series - Part 7
zhlédnutí 328Před 8 měsíci
Retries | React/Tanstack Query Series - Part 7
Parallel vs Dependent data fetching | React/Tanstack Query Series - Part 6
zhlédnutí 450Před 8 měsíci
Parallel vs Dependent data fetching | React/Tanstack Query Series - Part 6
Query keys and functions | React/Tanstack Query Series - Part 5
zhlédnutí 523Před 8 měsíci
Query keys and functions | React/Tanstack Query Series - Part 5

Komentáře

  • @LovepreetSingh-mf1el
    @LovepreetSingh-mf1el Před 8 hodinami

    I was searching how to build extension with React and this helps me!!.. Great video

  • @punittripathi8984
    @punittripathi8984 Před 4 dny

    Thanks

  • @edwilsondasilva9946

    Obrigado por compartilhar esse rico conhecimento. Me ajudou muito no entendimento de como o SW funciona.

  • @dest5237
    @dest5237 Před 8 dny

    i love you

  • @Uttam-kb6fr
    @Uttam-kb6fr Před 18 dny

    Well explained sir

  • @gtpolpo9445
    @gtpolpo9445 Před 19 dny

    thanks man, it really help me to understand service workers.

  • @faisal_dev951
    @faisal_dev951 Před 25 dny

    tysm well explained 😇 I feel like I might be overusing it in some of my components. Could you guide me on the best use cases for this pattern? I'd appreciate any advice to help me use it more effectively

  • @AvikNayak_
    @AvikNayak_ Před 25 dny

    make a series on tanstack table as well.

  • @AvikNayak_
    @AvikNayak_ Před 25 dny

    Man, why are you so underrated?

  • @tyly8636
    @tyly8636 Před 25 dny

    Awesome bro. That’s very helpful

  • @AvikNayak_
    @AvikNayak_ Před 28 dny

    Has this series ended?

  • @MaheshGitte-sp2zi
    @MaheshGitte-sp2zi Před měsícem

    Nice explanation I understand in one go👍, i have one question if i closed browser & heat api from postman then notification shows ? How to send notifications to particular users some users in my application ? Any idea or reference code in node.js & react, Thanks ones again really good explanation… 👌🏻👍

  • @faisal_dev951
    @faisal_dev951 Před měsícem

    man hands the best tutorial on earth .. u explained so well tysm subbed!!

  • @ivanchu8528
    @ivanchu8528 Před měsícem

    That is a great video, thank you very much, And I want to know that, if user use google chrome in their mobile phone, if user close the web page, can I send the Push notifications to the user mobile phone ?

  • @celestinenwachukwu919
    @celestinenwachukwu919 Před měsícem

    i was here for the topic (Which he is teaching sooo well btw). Now, I'm here for the memes 🤣

  • @user-tv5vg5yb4g
    @user-tv5vg5yb4g Před měsícem

    I need help self.addEventListener("push", e => { console.log('called',e.data.text()) self.registration.showNotification("Wohoo!!", { body: e.data.text() }) }) in the above code, I receive the message from the server, that is hello world. I verify this with console.log() each time I send a push notification from server but I don't get a popup notification? even though my Notification.permission return 'granted' can someone help please.

  • @sandyGamer97
    @sandyGamer97 Před měsícem

    Hi Akilesh, i am having one doubt. In my previous project, they have used react query. Also we created axios api instance in seperate class based js file. Inside axios class wrapper , we have used both in memory cache with js object and browser cache using caches api provided by browser. Even though we are using this instance which has capable of handling both in memory and browser cache. Our Senior devs also used react query for api calls like usequery and useMutation. My doubt is , react query also does the same caching right just like caches api in the browser level using service worker cache storage? Is it any different? Please answer

    • @akileshrao
      @akileshrao Před měsícem

      @@sandyGamer97 React query has it's own in memory cache. On reload, the cache is deleted unlike service worker + browser cache APIs, which are persistent. The features highlighted in the series come out of the box with react query and it's also optimised for server side cache management. The browser cache along with service workers cater to offline first applications and while you can achieve what react query does using these APIs, it may not be as efficient and developer friendly.

  • @CoonJS
    @CoonJS Před měsícem

    Hello! Thanks for the video! How can I send notification only for special users (if they triggered some events: register, success subscription e,t,c). How to link userId and subscription object?

  • @arunv1581
    @arunv1581 Před měsícem

    How to we creat toast message using service worker ?

  • @viniciussilvasantos6307
    @viniciussilvasantos6307 Před měsícem

    Really good content bro!!

  • @bholaramseervi1985
    @bholaramseervi1985 Před měsícem

    Great series for this push notification. I am not able to see the notification in chrome, though I am seeing the message (sent from the server ) is getting logged to console in push event oof the service worker. but its not showing on UI.

  • @cuiwenyu570
    @cuiwenyu570 Před měsícem

    I like it !!! Tks

  • @samarthchouksey4460
    @samarthchouksey4460 Před měsícem

    Thanks for making this! I was switching from one video to another until I found yours. You have covered all the basics in the best way possible. So many moving parts in this. Thanks for explaining each and every step! I am grateful to you for sharing your knowledge without any filter.

  • @surajbhushanpandey2882
    @surajbhushanpandey2882 Před 2 měsíci

    Hi you are a amazing teacher,I learnt a lot from your playlists

  • @Gaurav-zj4pu
    @Gaurav-zj4pu Před 2 měsíci

    Web Notification API doesn't have support for mobile browsers, is it true?

  • @anonymous_dev9472
    @anonymous_dev9472 Před 2 měsíci

    Sir, explanation this time was not clear.

  • @johnsonchen8395
    @johnsonchen8395 Před 2 měsíci

    Amazing tutorial on this topic 😱

  • @frankemmanuel2417
    @frankemmanuel2417 Před 2 měsíci

    Thanks Man i have been in this for so long i really appreciate you bro

  • @aabhishakemishra
    @aabhishakemishra Před 2 měsíci

    Great job brother

  • @myokyawhtun
    @myokyawhtun Před 2 měsíci

    You save the day... All the documentation from Mozilla and Google couldn't explain clearly like you

  • @rezhabahari
    @rezhabahari Před 2 měsíci

    Liked and subscribed thanks ❤🎉

  • @tonyeneh8194
    @tonyeneh8194 Před 2 měsíci

    this is exactly what I needed. Thanks

  • @somyaranjandas4599
    @somyaranjandas4599 Před 2 měsíci

    Nodejs king

  • @johndowling1861
    @johndowling1861 Před 2 měsíci

    well done on this one, really clearly explianed

  • @aryankalra5640
    @aryankalra5640 Před 2 měsíci

    Not all heroes wear capes

  • @AdrianVideParis
    @AdrianVideParis Před 2 měsíci

    czcams.com/video/PPOKvugfi98/video.html Did you just fart there? 🤣

  • @anonymous_dev9472
    @anonymous_dev9472 Před 3 měsíci

    Polyfills are scary so please sir create a detailed video explaining each step 👍

    • @akileshrao
      @akileshrao Před 3 měsíci

      Will be covering it in the next video.

  • @AQStick
    @AQStick Před 3 měsíci

    Man after months and months of struggling with authentication you seriously helped me figure it out for good!!! Thank you so much!

  • @singhbaaz4351
    @singhbaaz4351 Před 3 měsíci

    thanks for the series man learned a lot. Please create a major project using it also.

  • @singhbaaz4351
    @singhbaaz4351 Před 3 měsíci

    cant we use usequery with post function to modify data on server instead of mutation. If yes then what 's extra that mutation can do?

    • @akileshrao
      @akileshrao Před 3 měsíci

      Technically, you can sort of hack together data mutation using useQuery with a POST request, but it's strongly discouraged because primarily useQuery caches fetched data. A POST request wouldn't update the cache by default. You'd need to manually invalidate or refetch the query to reflect the changes, leading to potentially stale data being displayed. Also, mutations allow optimistic updates which wouldn't be available with useQuery out of the box. Mutations also provide error handling mechanisms for failed modifications which you'd have to cobble together yourself with useQuery. The potential issues outweigh any benefits. It's generally recommended to use the proper tool for the job which in this case, would be the useMutation hook designed for data mutation.

    • @singhbaaz4351
      @singhbaaz4351 Před 3 měsíci

      @@akileshrao ok thanks

  • @somyaranjandas4599
    @somyaranjandas4599 Před 3 měsíci

    Please god , bless this channel with millions of subscriber, most under ratted and best channel

  • @kedarsatwik6938
    @kedarsatwik6938 Před 3 měsíci

    I have created a web app using react js, in app i made users to add the todo element and select time. Now i want to send notification to them at that time as a reminder. Can i do that using this ?

  • @anonymous_dev9472
    @anonymous_dev9472 Před 3 měsíci

    Explanation on this keyword was the best 👍🏻

  • @Odidi_Bee6ix
    @Odidi_Bee6ix Před 3 měsíci

    Bow💯💯💯🔥🔥🔥

  • @Vietnamkid1993
    @Vietnamkid1993 Před 3 měsíci

    Excellent video. Needs to be shared more since I never learned this in school.

  • @jk-gn2fu
    @jk-gn2fu Před 3 měsíci

    Is there anyway you can protect the system from abusing? For instance, creating 1 million accounts using a macro.

  • @gauravmithas2362
    @gauravmithas2362 Před 3 měsíci

    couldnt be better than this!! =

  • @moathahmed2360
    @moathahmed2360 Před 3 měsíci

    very good , i want when i click on notification i will go to url how can i do that

  • @anonymous_dev9472
    @anonymous_dev9472 Před 3 měsíci

    Thanks for the tutorials coming in

  • @anonymous_dev9472
    @anonymous_dev9472 Před 3 měsíci

    Sir, can you please come up with more interview questions? This really helps people like us. Thank You!