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
Просмотров: 31

Видео

I built a Chrome extension(in React) to be more productive. #reactjs #javascript #chrome
Просмотров 19728 дней назад
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
Просмотров 74Месяц назад
⌚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 - ruclips.net/p/PL62km_yqC3ZHn5Wh9RaFNaEH3B7mxrv0B Push Notifications using SW - ruclips.net/p/PL62km_yqC3ZF5Dh9vFdjjRxvn1xQKqj4B Service worker in Javascript (2023) - ruclips.net/p/PL62km_yqC3ZEs7VWDF1BdmKwFHiXTDZPk Javascript observers(2...
Render prop pattern in ReactJS
Просмотров 1022 месяца назад
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)
Просмотров 632 месяца назад
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)
Просмотров 983 месяца назад
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: ruclips.net/p/PL62km_yqC3ZGrdivumJIDX7WgJegw3R2S ⌚Timestamps: 0:00 - Promise.all polyfill 4:40 - Promise.allSettled polyfill 9:20 - Promise.race polyfill 11:00 - Promise.any 15:17 - Ou...
Javascript Promise Methods
Просмотров 1843 месяца назад
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 - ruclips.net/video/jlxvVdmevUw/видео.html This video is part of a playlist where we look at different native API polyill implementations. Javascript pollyfills playlist:...
Javascript bind method polyfill.
Просмотров 473 месяца назад
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: ruclips.net/p/PL62km_yqC3ZGrdivumJIDX7WgJegw3R2S ⌚Timestamps: 0:00 - Wha...
Flattening an array in JS (array.flat() polyfill).
Просмотров 933 месяца назад
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: ruclips.net/video/wzeWRyogN6c/видео.html Javascript pollyfills playlist: ruclips.net/p/PL62km_yqC3ZGrdivumJIDX7WgJegw3R2S ⌚Timestamps: 0:00 - Flat method overview 1:40 - Flat method polyfill 5:01 - Example...
Map-Filter-Reduce: Polyfills.
Просмотров 953 месяца назад
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: ruclips.net/p/PL62km_yqC3ZGrdivumJIDX7WgJegw3R2S ⌚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 crash cou...
Throttling in Javascript & its polyfill.
Просмотров 1334 месяца назад
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: ruclips.net/video/uvYnZbiKHX0/видео.html ⌚Timestamps: 0:00 - Intro 2:41 - Project setup 3:09 - Using a closure 3:56 - Args edge cas...
Why the debounce polyfill works: Part 2: Edge cases
Просмотров 724 месяца назад
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: ruclips.net/video/uvYnZbiKHX0/видео.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 pr...
Why the debounce polyfill works: Part 1
Просмотров 1184 месяца назад
Why the debounce polyfill works: Part 1
Part 6 - APIs - Playwright + React Crash Course (2024)
Просмотров 1385 месяцев назад
Part 6 - APIs - Playwright React Crash Course (2024)
Part 5 - Continuous Integration(CI) with Github Actions - Playwright + React Crash Course (2024)
Просмотров 1835 месяцев назад
Part 5 - Continuous Integration(CI) with Github Actions - Playwright React Crash Course (2024)
Part 4 - The test function - Playwright + React Crash Course (2024)
Просмотров 1025 месяцев назад
Part 4 - The test function - Playwright React Crash Course (2024)
Part 3 - Auto generate tests - Playwright + React Crash Course (2024)
Просмотров 3175 месяцев назад
Part 3 - Auto generate tests - Playwright React Crash Course (2024)
Part 2 - Your first test! - Playwright + React Crash Course (2024)
Просмотров 2465 месяцев назад
Part 2 - Your first test! - Playwright React Crash Course (2024)
Part 1 - Introduction & initial setup - Playwright + React Crash Course (2024)
Просмотров 7895 месяцев назад
Part 1 - Introduction & initial setup - Playwright React Crash Course (2024)
Why pnpm
Просмотров 1166 месяцев назад
Why pnpm
Story time
Просмотров 1166 месяцев назад
Story time
Compound components pattern in React
Просмотров 1,2 тыс.6 месяцев назад
Compound components pattern in React
Query/Mutation filters | React/Tanstack Query Series - Part 12
Просмотров 3077 месяцев назад
Query/Mutation filters | React/Tanstack Query Series - Part 12
Optimistic updates | React/Tanstack Query Series - Part 11
Просмотров 1,1 тыс.7 месяцев назад
Optimistic updates | React/Tanstack Query Series - Part 11
Mutations | React/Tanstack Query Series - Part 10
Просмотров 6457 месяцев назад
Mutations | React/Tanstack Query Series - Part 10
Infinite scrolling | React/Tanstack Query Series - Part 9
Просмотров 1 тыс.8 месяцев назад
Infinite scrolling | React/Tanstack Query Series - Part 9
Pagination | React/Tanstack Query Series - Part 8
Просмотров 5338 месяцев назад
Pagination | React/Tanstack Query Series - Part 8
Retries | React/Tanstack Query Series - Part 7
Просмотров 3288 месяцев назад
Retries | React/Tanstack Query Series - Part 7
Parallel vs Dependent data fetching | React/Tanstack Query Series - Part 6
Просмотров 4508 месяцев назад
Parallel vs Dependent data fetching | React/Tanstack Query Series - Part 6
Query keys and functions | React/Tanstack Query Series - Part 5
Просмотров 5238 месяцев назад
Query keys and functions | React/Tanstack Query Series - Part 5

Комментарии

  • @LovepreetSingh-mf1el
    @LovepreetSingh-mf1el 7 часов назад

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

  • @punittripathi8984
    @punittripathi8984 4 дня назад

    Thanks

  • @edwilsondasilva9946
    @edwilsondasilva9946 6 дней назад

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

  • @dest5237
    @dest5237 8 дней назад

    i love you

  • @Uttam-kb6fr
    @Uttam-kb6fr 18 дней назад

    Well explained sir

  • @gtpolpo9445
    @gtpolpo9445 19 дней назад

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

  • @faisal_dev951
    @faisal_dev951 25 дней назад

    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_ 25 дней назад

    make a series on tanstack table as well.

  • @AvikNayak_
    @AvikNayak_ 25 дней назад

    Man, why are you so underrated?

  • @tyly8636
    @tyly8636 25 дней назад

    Awesome bro. That’s very helpful

  • @AvikNayak_
    @AvikNayak_ 28 дней назад

    Has this series ended?

  • @MaheshGitte-sp2zi
    @MaheshGitte-sp2zi Месяц назад

    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 Месяц назад

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

  • @ivanchu8528
    @ivanchu8528 Месяц назад

    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 Месяц назад

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

  • @user-tv5vg5yb4g
    @user-tv5vg5yb4g Месяц назад

    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 Месяц назад

    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 Месяц назад

      @@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 Месяц назад

    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 Месяц назад

    How to we creat toast message using service worker ?

  • @viniciussilvasantos6307
    @viniciussilvasantos6307 Месяц назад

    Really good content bro!!

  • @bholaramseervi1985
    @bholaramseervi1985 Месяц назад

    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 Месяц назад

    I like it !!! Tks

  • @samarthchouksey4460
    @samarthchouksey4460 Месяц назад

    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 2 месяца назад

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

  • @Gaurav-zj4pu
    @Gaurav-zj4pu 2 месяца назад

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

  • @anonymous_dev9472
    @anonymous_dev9472 2 месяца назад

    Sir, explanation this time was not clear.

  • @johnsonchen8395
    @johnsonchen8395 2 месяца назад

    Amazing tutorial on this topic 😱

  • @frankemmanuel2417
    @frankemmanuel2417 2 месяца назад

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

  • @aabhishakemishra
    @aabhishakemishra 2 месяца назад

    Great job brother

  • @myokyawhtun
    @myokyawhtun 2 месяца назад

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

  • @rezhabahari
    @rezhabahari 2 месяца назад

    Liked and subscribed thanks ❤🎉

  • @tonyeneh8194
    @tonyeneh8194 2 месяца назад

    this is exactly what I needed. Thanks

  • @somyaranjandas4599
    @somyaranjandas4599 2 месяца назад

    Nodejs king

  • @johndowling1861
    @johndowling1861 2 месяца назад

    well done on this one, really clearly explianed

  • @aryankalra5640
    @aryankalra5640 2 месяца назад

    Not all heroes wear capes

  • @AdrianVideParis
    @AdrianVideParis 2 месяца назад

    ruclips.net/video/PPOKvugfi98/видео.html Did you just fart there? 🤣

  • @anonymous_dev9472
    @anonymous_dev9472 3 месяца назад

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

    • @akileshrao
      @akileshrao 3 месяца назад

      Will be covering it in the next video.

  • @AQStick
    @AQStick 3 месяца назад

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

  • @singhbaaz4351
    @singhbaaz4351 3 месяца назад

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

  • @singhbaaz4351
    @singhbaaz4351 3 месяца назад

    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 3 месяца назад

      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 3 месяца назад

      @@akileshrao ok thanks

  • @somyaranjandas4599
    @somyaranjandas4599 3 месяца назад

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

  • @kedarsatwik6938
    @kedarsatwik6938 3 месяца назад

    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 3 месяца назад

    Explanation on this keyword was the best 👍🏻

    • @akileshrao
      @akileshrao 3 месяца назад

      Glad it was helpful!

  • @Odidi_Bee6ix
    @Odidi_Bee6ix 3 месяца назад

    Bow💯💯💯🔥🔥🔥

  • @Vietnamkid1993
    @Vietnamkid1993 3 месяца назад

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

    • @akileshrao
      @akileshrao 3 месяца назад

      Glad it was helpful!

  • @jk-gn2fu
    @jk-gn2fu 3 месяца назад

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

  • @gauravmithas2362
    @gauravmithas2362 3 месяца назад

    couldnt be better than this!! =

  • @moathahmed2360
    @moathahmed2360 3 месяца назад

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

  • @anonymous_dev9472
    @anonymous_dev9472 3 месяца назад

    Thanks for the tutorials coming in

  • @anonymous_dev9472
    @anonymous_dev9472 3 месяца назад

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