- Видео 100
- Просмотров 175 135
Akilesh Rao
Добавлен 28 янв 2018
All web everything.
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
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)
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
I was searching how to build extension with React and this helps me!!.. Great video
Thanks
Obrigado por compartilhar esse rico conhecimento. Me ajudou muito no entendimento de como o SW funciona.
i love you
Wow, thanks I guess.
Well explained sir
thanks man, it really help me to understand service workers.
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
make a series on tanstack table as well.
Man, why are you so underrated?
Awesome bro. That’s very helpful
Has this series ended?
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… 👌🏻👍
man hands the best tutorial on earth .. u explained so well tysm subbed!!
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 ?
i was here for the topic (Which he is teaching sooo well btw). Now, I'm here for the memes 🤣
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.
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
@@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.
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?
How to we creat toast message using service worker ?
Really good content bro!!
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.
I like it !!! Tks
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.
Hi you are a amazing teacher,I learnt a lot from your playlists
Web Notification API doesn't have support for mobile browsers, is it true?
Sir, explanation this time was not clear.
Amazing tutorial on this topic 😱
Thanks Man i have been in this for so long i really appreciate you bro
Great job brother
You save the day... All the documentation from Mozilla and Google couldn't explain clearly like you
Liked and subscribed thanks ❤🎉
this is exactly what I needed. Thanks
Nodejs king
well done on this one, really clearly explianed
Not all heroes wear capes
ruclips.net/video/PPOKvugfi98/видео.html Did you just fart there? 🤣
My computer did 🙃
i heard it too lol
Polyfills are scary so please sir create a detailed video explaining each step 👍
Will be covering it in the next video.
Man after months and months of struggling with authentication you seriously helped me figure it out for good!!! Thank you so much!
thanks for the series man learned a lot. Please create a major project using it also.
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?
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.
@@akileshrao ok thanks
Please god , bless this channel with millions of subscriber, most under ratted and best channel
Thanks man!
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 ?
Explanation on this keyword was the best 👍🏻
Glad it was helpful!
Bow💯💯💯🔥🔥🔥
Excellent video. Needs to be shared more since I never learned this in school.
Glad it was helpful!
Is there anyway you can protect the system from abusing? For instance, creating 1 million accounts using a macro.
couldnt be better than this!! =
very good , i want when i click on notification i will go to url how can i do that
Thanks for the tutorials coming in
Sir, can you please come up with more interview questions? This really helps people like us. Thank You!
Have a few in the pipeline✌️
@@akileshrao👍🏻