- 228
- 206 599
Anuj Singla
India
เข้าร่วมเมื่อ 4 ก.พ. 2012
Thank you for checking out Anuj Singla on TH-cam!
Hi, I'm Anuj Singla and working as a Principal Software Engineer at Redhat. At Redhat, I spend most of my days in writing code. I am working on technologies like React, Angular, JavaScript, and NodeJs. I am also handling meetup events for Remix India Online - www.meetup.com/remix-india-online/
Inspired by Kent C. Dodds ( kentcdodds)
Mentor by: Deepak Koul ( koultronix)
Optimize for your learning, not your salary.
Optimize for progress, not for stability.
Optimize for facing fears, not for comfort.
- From Ankur Warikoo ( warikoo)
“Give a man a fish, and you feed him for a day. Teach a man to fish, and you feed him for a lifetime.”
The purpose of life is to seek knowledge and impart to others who can take it forward.
Hi, I'm Anuj Singla and working as a Principal Software Engineer at Redhat. At Redhat, I spend most of my days in writing code. I am working on technologies like React, Angular, JavaScript, and NodeJs. I am also handling meetup events for Remix India Online - www.meetup.com/remix-india-online/
Inspired by Kent C. Dodds ( kentcdodds)
Mentor by: Deepak Koul ( koultronix)
Optimize for your learning, not your salary.
Optimize for progress, not for stability.
Optimize for facing fears, not for comfort.
- From Ankur Warikoo ( warikoo)
“Give a man a fish, and you feed him for a day. Teach a man to fish, and you feed him for a lifetime.”
The purpose of life is to seek knowledge and impart to others who can take it forward.
Make a Project with Patternfly Elements (Part -3) | Web Components 2023 tutorial | Anuj Singla #11
How to make Project with Patternfly Elements with HTML CSS JavaScript (Part -3) - Anuj Singla #11
Website Code - github.com/anujsingla/website-webcomponent
Patternfly Elements Library: github.com/patternfly/patternfly-elements
Github Project: github.com/anujsingla/webcomponent-youtube
In this video, I will show you how to make a project with Patternfly Elements in HTML, CSS, and JavaScript. I'll describe the project and then show you how to create the HTML, CSS, and JavaScript code.
If you want to learn how to make a project with Patternfly Elements, this video is for you! I'll show you everything you need to know to create a project with Patternfly Elements from start to finish. Whether a beginner or an experienced developer, this video is a great way to learn how to make a project with Patternfly Elements!
Resources:
github.com/web-padawan/awesome-web-components
ultimatecourses.com/blog/the-ultimate-guide-to-web-components
bennypowers.dev/
lit.dev/
github.com/lit/lit-element-starter-ts
Support my channel:
www.buymeacoffee.com/anujsingla
(Free Courses)
React course :- bit.ly/3qXnSYU
Javascript course :- bit.ly/3qYCG9u
Typescript course :- bit.ly/3qY9Fe6
Frontend Interview Questions and Answer - th-cam.com/play/PLEtjGa9VEukMRyitRx0nitoCD8u2XEYiz.html
HTML Tutorial for Beginners to advance - th-cam.com/play/PLEtjGa9VEukMJvP4Z8O01LvkCB7-1myXu.html
NPM - th-cam.com/play/PLEtjGa9VEukO4Ud2SGoHhuFYCPfDAzFjd.html
Remix run React framework Tutorial in Hindi - th-cam.com/play/PLEtjGa9VEukMKVhD0GKHthRmwVMFWjaeW.html
(Social Media Links)
Twitter : singla387
Facebook page : bit.ly/3nZlyyx
Telegram : bit.ly/3nX2v8f
LinkedIn : bit.ly/3rIMt2A
About Me:-
I am Anuj Singla, and working as a Principal Software Engineer at Redhat. At Redhat, I spend most of my days writing code. I am working on different technologies like React, Angular, JavaScript, NodeJs, and Typescript. I want to teach web development to everybody. I am also handling meetup events for Remix India Online - www.meetup.com/remix-india-online/
Tags :-
#webcomponents #opensource #contribute #customelements #framework #react #anujsingla #typescript #hindi #html #css
Website Code - github.com/anujsingla/website-webcomponent
Patternfly Elements Library: github.com/patternfly/patternfly-elements
Github Project: github.com/anujsingla/webcomponent-youtube
In this video, I will show you how to make a project with Patternfly Elements in HTML, CSS, and JavaScript. I'll describe the project and then show you how to create the HTML, CSS, and JavaScript code.
If you want to learn how to make a project with Patternfly Elements, this video is for you! I'll show you everything you need to know to create a project with Patternfly Elements from start to finish. Whether a beginner or an experienced developer, this video is a great way to learn how to make a project with Patternfly Elements!
Resources:
github.com/web-padawan/awesome-web-components
ultimatecourses.com/blog/the-ultimate-guide-to-web-components
bennypowers.dev/
lit.dev/
github.com/lit/lit-element-starter-ts
Support my channel:
www.buymeacoffee.com/anujsingla
(Free Courses)
React course :- bit.ly/3qXnSYU
Javascript course :- bit.ly/3qYCG9u
Typescript course :- bit.ly/3qY9Fe6
Frontend Interview Questions and Answer - th-cam.com/play/PLEtjGa9VEukMRyitRx0nitoCD8u2XEYiz.html
HTML Tutorial for Beginners to advance - th-cam.com/play/PLEtjGa9VEukMJvP4Z8O01LvkCB7-1myXu.html
NPM - th-cam.com/play/PLEtjGa9VEukO4Ud2SGoHhuFYCPfDAzFjd.html
Remix run React framework Tutorial in Hindi - th-cam.com/play/PLEtjGa9VEukMKVhD0GKHthRmwVMFWjaeW.html
(Social Media Links)
Twitter : singla387
Facebook page : bit.ly/3nZlyyx
Telegram : bit.ly/3nX2v8f
LinkedIn : bit.ly/3rIMt2A
About Me:-
I am Anuj Singla, and working as a Principal Software Engineer at Redhat. At Redhat, I spend most of my days writing code. I am working on different technologies like React, Angular, JavaScript, NodeJs, and Typescript. I want to teach web development to everybody. I am also handling meetup events for Remix India Online - www.meetup.com/remix-india-online/
Tags :-
#webcomponents #opensource #contribute #customelements #framework #react #anujsingla #typescript #hindi #html #css
มุมมอง: 280
วีดีโอ
How to make Project with Patternfly Elements HTML CSS JavaScript (Part -2) - Anuj Singla Hindi #10
มุมมอง 208ปีที่แล้ว
How to make Project with Patternfly Elements HTML CSS and JavaScript (Part - 2) - Anuj Singla Hindi #10 Website Code - github.com/anujsingla/website-webcomponent Patternfly Elements Library: github.com/patternfly/patternfly-elements Github Project: github.com/anujsingla/webcomponent-youtube In this video, I will show you how to make a project with Patternfly Elements in HTML, CSS, and JavaScrip...
Project with Patternfly Elements (HTML, CSS, JS) | Web Tutorials Hindi (Part-1) | Anuj Singla #9
มุมมอง 316ปีที่แล้ว
How to make Project with Patternfly Elements HTML CSS and JavaScript (Part -1) - Anuj Singla Hindi #9 Website Code - github.com/anujsingla/website-webcomponent Patternfly Elements Library: github.com/patternfly/patternfly-elements Github Project: github.com/anujsingla/webcomponent-youtube In this video, I will show you how to make a project with Patternfly Elements in HTML, CSS, and JavaScript....
How to Contribute in Open Source Patternfly Elements Web Component library - Anuj Singla Hindi #8
มุมมอง 116ปีที่แล้ว
How to Contribute in Open Source Patternfly Elements Web Component library - Anuj Singla Hindi #8 Patternfly Elements Library: github.com/patternfly/patternfly-elements In this video, I'll show you how to contribute to the Patternfly Elements Web Component library in Hindi. If you're interested in contributing to the Patternfly Elements Web Component library, this is the video for you! In this ...
What is Lit library | How to make Web Components with Lit library - Anuj Singla Hindi #7
มุมมอง 420ปีที่แล้ว
What is HTML template element with Example | Web Components - Anuj Singla Hindi #3 In this video, Anuj Singla will show you how to make Web Components with the Lit library. Web Components are crucial for building user interfaces in modern web applications, and Lit provides a fast, scalable, and easy way to create them. If you want to learn more about Lit library or build some Web Components, th...
Learn How to Make a Todo List with Web Components! - #6 Anuj Singla Hindi
มุมมอง 242ปีที่แล้ว
What is HTML template element with Example | Web Components - Anuj Singla Hindi #3 This video will teach you how to make a to-do list with web components! Todo lists are a great way to keep track of your tasks, and this tutorial will show you how to create your own to-do list in just a few minutes. This is the sixth video in our series on web development. In this video, we'll be teaching you ho...
What is Slot element in web components | Understand with an example - Anuj Singla Hindi #5
มุมมอง 440ปีที่แล้ว
What is Slot element in web components | Understand with an example - Anuj Singla Hindi #5 In this video, we'll discuss a Slot element in web components and how you can use it to create custom components. We'll also look at an example to help explain what it does. If you're new to web components or just want to understand them better, this video is for you! By the end of this video, you'll bett...
What is Shadow DOM | Web Components - Anuj Singla Hindi #4
มุมมอง 1.1Kปีที่แล้ว
What is Shadow DOM | Web Components - Anuj Singla Hindi #4 Shadow DOM is a new component type that allows you to create encapsulated pieces of the DOM. This video tutorial will introduce you to Shadow DOM and show you how to use it in web components. In this fourth video in the Shadow DOM series, Anuj Singla covers some of the more advanced features of Shadow DOM. He covers elements, attributes...
What is HTML template element with Example | Web Components - Anuj Singla Hindi #3
มุมมอง 406ปีที่แล้ว
What is HTML template element with Example | Web Components - Anuj Singla Hindi #3 In this video, we'll explore the HTML template element and how it works with web components. We'll create a simple example to show you how it works. If you're new to web components or looking for a refresher, this video is for you! We'll explore the HTML template element and show you how it works with web compone...
Web Component Lifecycle Methods with Example | Web Components 2023 | Anuj Singla Hindi #2
มุมมอง 741ปีที่แล้ว
Understand Web Component Lifecycle Methods with Example | Web Components 2023 | Anuj Singla Hindi #2 In this video, I will discuss the lifecycle methods of web components with an example. If you're new to web components or want to brush up on your knowledge, this video is for you! I'll be discussing the different lifecycle methods of web components and how to use them with an example. This vide...
What are Web Components | Create Your Own in Minutes | web components tutorial 2023 | Anuj Singla #1
มุมมอง 1.7Kปีที่แล้ว
What are Web Components | Create Your Own in Minutes | web components tutorial 2023 | Anuj Singla #1
A Pro’s Guide: Accessible React Modal Testing with React Testing Library - #12 by Anuj Singla
มุมมอง 636ปีที่แล้ว
A Pro’s Guide: Accessible React Modal Testing with React Testing Library - #12 by Anuj Singla
How to Explain ChatGPT to a 5 Year Old?! | ChatGPT big and Smart brother | Anuj Singla Hindi
มุมมอง 72ปีที่แล้ว
How to Explain ChatGPT to a 5 Year Old?! | ChatGPT big and Smart brother | Anuj Singla Hindi
Build an Accessible Modal with React | React Modal - #11 | Anuj Singla Hindi
มุมมอง 671ปีที่แล้ว
Build an Accessible Modal with React | React Modal - #11 | Anuj Singla Hindi
Web Accessibility Auditing Library and Tools for Fixing the Accessibility Issues - #10 | Anuj Singla
มุมมอง 616ปีที่แล้ว
Web Accessibility Auditing Library and Tools for Fixing the Accessibility Issues - #10 | Anuj Singla
How to Add a "Skip to Main Content" Link on Your Website for Easier Navigation? - #9 | Anuj Singla
มุมมอง 854ปีที่แล้ว
How to Add a "Skip to Main Content" Link on Your Website for Easier Navigation? - #9 | Anuj Singla
What is Distinguishable content for Web Accessibility | Anuj Singla #shorts
มุมมอง 58ปีที่แล้ว
What is Distinguishable content for Web Accessibility | Anuj Singla #shorts
How to Make Accessible Forms - Tips and examples for everyone - #8 | Anuj Singla Hindi
มุมมอง 844ปีที่แล้ว
How to Make Accessible Forms - Tips and examples for everyone - #8 | Anuj Singla Hindi
What is Accessibility Tree? | How can I view it in Chrome DevTools? | Anuj Singla Hindi
มุมมอง 917ปีที่แล้ว
What is Accessibility Tree? | How can I view it in Chrome DevTools? | Anuj Singla Hindi
What is ARIA Live Attribute? | How to use it with Example #6 | Anuj Singla Hindi
มุมมอง 1.6Kปีที่แล้ว
What is ARIA Live Attribute? | How to use it with Example #6 | Anuj Singla Hindi
What Are ARIA Attributes? | What They Are, Why They're Important & How to Use Them #5 | Anuj Singla
มุมมอง 3.7Kปีที่แล้ว
What Are ARIA Attributes? | What They Are, Why They're Important & How to Use Them #5 | Anuj Singla
What Are Accessibility Principles? - Anuj Singla breaks down Understandable, Robust Principle! | #4
มุมมอง 1.4Kปีที่แล้ว
What Are Accessibility Principles? - Anuj Singla breaks down Understandable, Robust Principle! | #4
What Are Accessibility Principles? - Anuj Singla breaks down Operable Principle 2 in detail! | #3
มุมมอง 1.9Kปีที่แล้ว
What Are Accessibility Principles? - Anuj Singla breaks down Operable Principle 2 in detail! | #3
What Are Accessibility Principles? - Anuj Singla breaks down Perceivable Principle 1 in detail! | #2
มุมมอง 3.2Kปีที่แล้ว
What Are Accessibility Principles? - Anuj Singla breaks down Perceivable Principle 1 in detail! | #2
What is Web Accessibility | Learn Web Accessibility: Beginner to Advance | #1 | Anuj Singla Hindi
มุมมอง 12Kปีที่แล้ว
What is Web Accessibility | Learn Web Accessibility: Beginner to Advance | #1 | Anuj Singla Hindi
LAYOFFS TRACKER with React JS, Patternfly UI and React Query - Top Cards and Make Layoffs Table #3
มุมมอง 108ปีที่แล้ว
LAYOFFS TRACKER with React JS, Patternfly UI and React Query - Top Cards and Make Layoffs Table #3
LAYOFFS TRACKER with React JS, Patternfly UI and React Query - Mock Data and React Query setup #2
มุมมอง 93ปีที่แล้ว
LAYOFFS TRACKER with React JS, Patternfly UI and React Query - Mock Data and React Query setup #2
LAYOFFS TRACKER with React JS, Patternfly UI and React Query - Project Setup and App Layout #1
มุมมอง 282ปีที่แล้ว
LAYOFFS TRACKER with React JS, Patternfly UI and React Query - Project Setup and App Layout #1
Atri Framework: How to deploy to GitHub Pages | Full-stack web development | Anuj Singla Hindi #5
มุมมอง 819ปีที่แล้ว
Atri Framework: How to deploy to GitHub Pages | Full-stack web development | Anuj Singla Hindi #5
Atri Framework: CFP Form | #4 | Full-stack web development | Anuj Singla Hindi
มุมมอง 349ปีที่แล้ว
Atri Framework: CFP Form | #4 | Full-stack web development | Anuj Singla Hindi
We need lessons on RTL
Hi sir, i request you, can you make video series "CRUD system using Mobx state tree in react typescript & Laravel API"?
When I am trying to close the calendar by pressing the escape key, it is getting closed when I press it for two times when nvda is opened.. how can I resolve the issue
I dont know whether u will respond or not.. still asking can you make video what topic should an accessibility developer must know in js and react
I don't understand this. Why do you post in English but talk not English ?
Pls make videos on wcag guidelines of accessibility
plz make a tutorial on firebase using mobex in react
If we have useTransition hook already, then why the devs have created useDefferedValue hook then? As both are doing same task
Hello sir,Do unit test cases also written for web accesiblity
Thmx for the session
thanks
If I have some content within my slot tags, how can get the value. e.g. <slot name='filename-1'> 'xyzabc' </slot>. How do I get the value xyzabc back?. Whenever i try the fetch,I get null string not sure why
Great Info!!
Glad it was helpful!
thank you for this video sir 🙏
Welcome!
anuj sir very good
thanks
Thanks for this video
Sir u deserve Million views n likes Best part u encourage n jo asp bolte ho in most videos( i am learning) Bahut humble 👍👍👍
Thank you so much 😀
@@anujsingla anujsir I emailed you lot of times can u share your current email Id I will appreciate. Thanks for tge reply
Anuj sir please reply kardo Aapko email bhi kya
Which language is this video? I understand nothing...
Thank you.
Anujsir please reply Do u guve training
Do you give training sir
ERROR in src/hooks/ResourcesQuery.ts:7:67 TS2345: Argument of type '{ enabled?: boolean | undefined; staleTime?: number | undefined; refetchInterval?: number | false | ((data: IResource[] | undefined, query: Query<IResource[], Error, IResource[], QueryKey>) => number | false) | undefined; ... 31 more ...; meta?: QueryMeta | undefined; }' is not assignable to parameter of type 'Omit<UseQueryOptions<IResource[], Error, IResource[], ReactQueryConstant[]>, "queryKey" | "queryFn">'. Types of property 'useErrorBoundary' are incompatible. Type 'boolean | ((error: Error, query: Query<IResource[], Error, IResource[], QueryKey>) => boolean) | undefined' is not assignable to type 'boolean | ((error: Error, query: Query<IResource[], Error, IResource[], ReactQueryConstant[]>) => boolean) | undefined'. Type '(error: Error, query: Query<IResource[], Error, IResource[], QueryKey>) => boolean' is not assignable to type 'boolean | ((error: Error, query: Query<IResource[], Error, IResource[], ReactQueryConstant[]>) => boolean) | undefined'. Type '(error: Error, query: Query<IResource[], Error, IResource[], QueryKey>) => boolean' is not assignable to type '(error: Error, query: Query<IResource[], Error, IResource[], ReactQueryConstant[]>) => boolean'. Types of parameters 'query' and 'query' are incompatible. Type 'Query<IResource[], Error, IResource[], ReactQueryConstant[]>' is not assignable to type 'Query<IResource[], Error, IResource[], QueryKey>'. The types of 'options.queryFn' are incompatible between these types. Type 'QueryFunction<IResource[], ReactQueryConstant[]> | undefined' is not assignable to type 'QueryFunction<IResource[], QueryKey> | undefined'. Type 'QueryFunction<IResource[], ReactQueryConstant[]>' is not assignable to type 'QueryFunction<IResource[], QueryKey>'. Type 'QueryKey' is not assignable to type 'ReactQueryConstant[]'. Type 'string' is not assignable to type 'ReactQueryConstant[]'. 5 | 6 | export function useGetResource(options?: UseQueryOptions<IResource[], Error>) { > 7 | return useQuery([ReactQueryConstant.RESOURCES], fetchResources, { | ^ > 8 | ...options, | ^^^^^^^^^^^^^^^ > 9 | }); | ^^^^ 10 | }
Very informative 👏
ty so much for this useful content
Can you create a video to how can i insert data in mysql
In the last test, that console.log is not a warning. You have a console.log in your Accessible modal when you had added an eventlistener to listen to keydown events.
Thank you for this very informative video.
best techer
nice sir
thks a lot
It was very helpful. Thank you so much for your time that you have put into these videos. 🙏
Thank you, dear, for this series.
Thank you for explaining clearly...
Sir, is it available in English?
Hello brother. Thank you for posting such useful video. It was very needed for me at this point of time. Our company managers have allocated the task of creating new elements for our internal library. We have to develop with lit only. PLease explain all concepts thoroughly and make the library developers to stay in JOB. thank you brother.
Really Helpful Thanks man!
any plugins for angular14
Very cute baby ❤❤
very helpfull . Thank you sir I love you
bhai tumhe knowledge tho h but TH-cam pr knowledge k sath sath bolna phi padta h video eese silently hoke bana rate ho jesi ki hame pada nahi rate ho bs hud work kar rahe ho
what is the name of extension?
{new Error("user error")} ye line likhney pe Error me problem ari hai hover krney pe jo error show horaha hai wo ap k sath share krdia ab isey kesey thik karo? Type 'Error' is not assignable to type 'ReactNode'.ts(2322) index.d.ts(1421, 9): The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>' var Error: ErrorConstructor new (message?: string | undefined, options?: ErrorOptions | undefined) => Error (+1 overload)
amazing playlist sir. good effort
Thank
Thank You very much. Great content.
Thank
Thank you so much sir for made journey of react simple
Thank
Mui react me server side pagination nhi work ksr rhi
🎉 good work 👏
Thank You sir. Simple straight. Can you explain when we use below approach <rootStoreContext.Provider value={{ rootStore: rootStoreInstance }}> {/* Your app components */} </rootStoreContext.Provider>
Remix js me Rest api video create Karo na bhai ji
For example, I'm doing client side filtering and I have 2 components so how can I manage my usestate variable of listing records with mobx to update everytime?