Awwfrontend
Awwfrontend
  • 21
  • 22 609
Demystifying Web Components: Custom HTML Tags and Shadow DOM
In this tutorial, you'll learn how to create custom HTML tags and elements using web components. We'll cover everything from the basics of custom elements and shadow DOM to advanced topics like HTML methods and life cycle methods. By the end of this tutorial, you'll have the skills you need to build better web applications with reusable, modular components. #webcomponents #customhtmltags #frontenddevelopment
มุมมอง: 509

วีดีโอ

Building a Chrome Extension from Scratch for Checking Website Accessibility | AwwFrontend
มุมมอง 603ปีที่แล้ว
Are you interested in building your own Chrome extension for website accessibility testing? In this step-by-step tutorial, we will guide you through the process of creating a Chrome extension from scratch. Starting with setting up the directory, we will cover each file in detail, beginning with the crucial manifest.json file. This file specifies important information about the extension, such a...
How to Create Dynamic UIs with Two-Way Data Binding in JavaScript | 2 way data binding | Awwfrontend
มุมมอง 415ปีที่แล้ว
Are you looking for a way to create dynamic user interfaces in your JavaScript applications? Look no further than two-way data binding! In this video, we'll explore the power of two-way data binding and how it can help you keep your data and UI in sync. We'll start by looking at how popular frameworks like Angular implement two-way data binding, and then we'll dive into a simple and elegant app...
Symbol.iterator Explained: Become a JavaScript Iteration Pro with Symbol.iterator | AwwFrontend
มุมมอง 1.2Kปีที่แล้ว
In this video, we'll be talking about Symbol.iterator in JavaScript, a built-in symbol that represents the default iterator for an object. You might have stumbled upon this during your debugging sessions and wondered what it is and how it works. We'll cover all of that in this video, and explain how iterators can be useful for looping through collections like arrays, sets, and maps. We'll also ...
Beyond Simple Interpolation: Exploring Tagged Templates in JavaScript
มุมมอง 241ปีที่แล้ว
In this video, we'll be exploring the advanced usages of tagged templates in JavaScript, and how they can help us take complete control over how our template literals are passed. We'll begin by discussing the limitations of simple string interpolation with template literals, and then dive into the world of tag functions. With tag functions, we can manipulate the values and structure of template...
Synthetic Performance Monitoring for web application: A Tech Guide by Vikas Pancholi | Awwfrontend
มุมมอง 233ปีที่แล้ว
In today's digital world, a business web application is the cornerstone of any successful company. But how do you ensure your web app is performing at its best? That's where synthetic performance monitoring comes in. In this video, we'll take a deep dive into the world of synthetic performance monitoring and how it can help you unlock the full potential of your business web app. We'll start by ...
Internationalising Web Applications: The Tech Talk on Scalable Infrastructure
มุมมอง 242ปีที่แล้ว
Join us as we delve into the world of internationalizing web applications, exploring the various aspects that are critical to success. From seamless integration to performance optimization, this tech talk will provide you with a comprehensive understanding of how to build scalable infrastructure that can support your global ambitions. We'll also delve into the importance of a smooth developer e...
Effortlessly Migrate Your Codebase with jscodeshift: A Beginner's Guide with Examples | codemods
มุมมอง 1.5Kปีที่แล้ว
Are you tired of manually migrating your codebase? Look no further, jscodeshift is here to save the day! In this video, we'll be discussing the basics of jscodeshift and how it can be used to efficiently upgrade your codebase. From updating your code to use new language features, to refactoring your code to follow a new coding style, jscodeshift makes it easy. We'll be walking through real-worl...
Javascript Modules Formats Demystified: ESM, CJS, UMD, and AMD Explained | Javascript Modules system
มุมมอง 8Kปีที่แล้ว
Are you confused by the different module formats in JavaScript? ESM, CJS, UMD, and AMD can all be used to organize and reuse code in your projects, but it can be tough to understand the differences between them. In this video, we'll break down each module format and explain how they work. We'll also discuss the pros and cons of each approach and when you might want to use one over the others. B...
A Step-by-Step guide to Implementing a Promise Polyfill | Javascript | AwwFrontend
มุมมอง 1.4K2 ปีที่แล้ว
Are you familiar with the power of Promises in JavaScript, but need to support older browsers that don't have native Promise support? In this video, we'll show you how to build your own Promise polyfill using vanilla JavaScript. We'll start by discussing the basics of Promises and how they work, and then we'll dive into the process of implementing our own polyfill. We'll cover all the necessary...
The JavaScript Proxy Object: Unlocking Advanced Functionality | JavaScript Proxy Object
มุมมอง 2862 ปีที่แล้ว
Are you ready to take your JavaScript skills to the next level? In this video, we'll introduce you to the powerful and flexible JavaScript Proxy object. We'll start by explaining what proxies are and how they work, and then we'll show you how to use the Proxy constructor to create your own proxies. We'll demonstrate how to use proxies to intercept and modify object behavior, and we'll explore s...
Write Your Way to Increased Efficiency: Creating Custom Visual Studio Code Extensions | Awwfrontend
มุมมอง 1552 ปีที่แล้ว
Are you looking for ways to increase your productivity as a developer? In this video, we'll show you how to write your own custom Visual Studio Code extension to streamline your workflow and boost your efficiency. We'll start by discussing the basics of Visual Studio Code extension development and how to get set up with the necessary tools. Then, we'll walk you through the process of creating a...
The Power of Custom ESLint: Boost Your Code Quality | Custom Eslint rule | Web dev | Javascript
มุมมอง 4.3K2 ปีที่แล้ว
Are you looking to improve the quality and consistency of your code? In this video, we'll show you how to write a custom ESLint configuration to enforce your own coding standards and best practices. We'll start by discussing the basics of ESLint and how it can help you catch errors and enforce coding conventions in your projects. Then, we'll walk you through the process of writing a custom ESLi...
setTimeout Polyfilling 101: Understanding and Implementing setTimeout in JavaScript | AwwFrontend
มุมมอง 7612 ปีที่แล้ว
Are you looking to use the setTimeout function in your code, but need to support older browsers that don't have native setTimeout support? In this video, we'll show you how to build your own setTimeout polyfill using vanilla JavaScript. We'll start by discussing the basics of setTimeout and how it works, and then we'll dive into the process of implementing our own polyfill. We'll cover all the ...
Implementing Promise.any polyfill | Javascript | AwwFrontend
มุมมอง 2152 ปีที่แล้ว
This video explains the working of Promise.any and how to implement its polyfill. This video is part of video series on Promises. Implementing promise.any polyfill is one of the frequently asked interview questions Follow me on Instagram: awwfrontend Twitter: FrontendAww Medium: medium.com/@awwfrontend
Implementing Promise.allSettled polyfill | Javascript | AwwFrontend
มุมมอง 2722 ปีที่แล้ว
Implementing Promise.allSettled polyfill | Javascript | AwwFrontend
Implementing Promise.all polyfill | Javascript | AwwFrontend
มุมมอง 6282 ปีที่แล้ว
Implementing Promise.all polyfill | Javascript | AwwFrontend
Latest data fetcher | Promises | Javascript Tip & Tricks
มุมมอง 1882 ปีที่แล้ว
Latest data fetcher | Promises | Javascript Tip & Tricks
Promise With Cancel method | Cancellable promise | AwwFrontend
มุมมอง 1.1K2 ปีที่แล้ว
Promise With Cancel method | Cancellable promise | AwwFrontend
Implementing Promise.race polyfill | Javascript | AwwFrontend
มุมมอง 7392 ปีที่แล้ว
Implementing Promise.race polyfill | Javascript | AwwFrontend

ความคิดเห็น

  • @zurnu74
    @zurnu74 หลายเดือนก่อน

    Thanks for your tutorial. Finally someone offering something beyond a PowerPoint demo on this topic. I have a question: I assume that CommonJS and Node operate on the backend, but I believe that at some point a CJS module will make its contribution on the frontend, so how could I invoke the work of a module in the html?

  • @northernlights2222
    @northernlights2222 4 หลายเดือนก่อน

    very nice tutorial. well done

  • @gabrielbianchi2246
    @gabrielbianchi2246 6 หลายเดือนก่อน

    This helped me a lot at work today. Thanks

  • @perpintaric6775
    @perpintaric6775 9 หลายเดือนก่อน

    the best video ever thank you so much!

  • @nayanlakhwani2088
    @nayanlakhwani2088 9 หลายเดือนก่อน

    This will not actually cancel it. It will still go inside .then. Cancellable promises do not exist. You can use bluebird-promise for cancel function for that but they will also break if you are using a library using native promises

  • @diggerdog001
    @diggerdog001 10 หลายเดือนก่อน

    Thank you

  • @rounakagarwal1294
    @rounakagarwal1294 10 หลายเดือนก่อน

    This is helpful, it was easy to understand.Thanks!

  • @harshvardhansingh7863
    @harshvardhansingh7863 10 หลายเดือนก่อน

    Thank youu

  • @harshvardhansingh7863
    @harshvardhansingh7863 10 หลายเดือนก่อน

    Thanks Lavkush; Please make some more videos.

  • @HarshVardhanSingh-h2k
    @HarshVardhanSingh-h2k 10 หลายเดือนก่อน

    Woww Thanks !!

  • @skyzane2735
    @skyzane2735 11 หลายเดือนก่อน

    how to add it on “recommended”?

  • @connect2ramprakash
    @connect2ramprakash ปีที่แล้ว

    Excellent information. Really appreciate your effort. But please do improve your microphone quality, audio was way too low.

  • @BindomCongat2
    @BindomCongat2 ปีที่แล้ว

    your voice so small, im about can't hear much

  • @caiokf
    @caiokf ปีที่แล้ว

    good video. thanks mate

  • @polinashakirova8452
    @polinashakirova8452 ปีที่แล้ว

    Thank you for the video! Very clear

  • @Qntix1
    @Qntix1 ปีที่แล้ว

    I love that you explain a lot of concepts which are usually overlooked. Keep up the good work!

  • @roobs456
    @roobs456 ปีที่แล้ว

    Thanks for the help! I didn't realise it was so easy to use.

  • @atticus2581
    @atticus2581 ปีที่แล้ว

    Did you actually listen to the audio on this before you uploaded it?

    • @awwfrontend
      @awwfrontend ปีที่แล้ว

      Nope. do you have some feedback for me?

    • @tomerhorowitz4779
      @tomerhorowitz4779 ปีที่แล้ว

      @@awwfrontend Don't use a potato mic?

  • @piyushkant6550
    @piyushkant6550 ปีที่แล้ว

    Can you please provide Github link for this

  • @raviwebdeveloper8517
    @raviwebdeveloper8517 ปีที่แล้ว

    thank you very much for detailed explanation <3

  • @tejasshinde2011
    @tejasshinde2011 ปีที่แล้ว

    exellent thanks!!

  • @lakshbhutani6793
    @lakshbhutani6793 ปีที่แล้ว

    Hi Vikas, this looks great 🙌 I had few questions: 1) What framework are you using to launch browser instance? 2) Where do you store the auth state and how do you share that between different docker images? 3) If you are taking median of five reports to generate core web-vitals, then how do you decide out of those 5 HTML reports which one to publish at s3? Thanks !

    • @awwfrontend
      @awwfrontend ปีที่แล้ว

      1. Using puppeteer to launch browser and login, before auditing the given url, documentation here - github.com/GoogleChrome/lighthouse/blob/main/docs/puppeteer.md 2. In the config file, each URL has its own credentials so lighthouse can audit given URL independently. But we do we pick which URL to be audited in which docker? Lets assume we have 10 URLs in the config, and we want to audit 5 URLs parallel then we also pass the index value to docker while running it(docker run lighthouse-ci --shard=1/5) so now index=1 will pick first 2 URLs and so on. 3. Nice Question, so we don't pick each web-vital based on the median value instead we pick the compete JSON/HTML report based on the median value of the `interactive` web-vital.

  • @martDKNY
    @martDKNY ปีที่แล้ว

    I'd say it's pretty good video, but kind of complicated implementation. I believe it can be written more easily. es6 is optional, but it also put methods in prototype.

  • @awwfrontend
    @awwfrontend ปีที่แล้ว

    Correction: instead of if(index === promiseArray.length - 1) , we should maintain a count counter, and keep +1 to it as we receive the response. Then we should check if count === promiseArray.length

    • @shagunpreetsingh7105
      @shagunpreetsingh7105 7 หลายเดือนก่อน

      Please also corret this in you r medium article

  • @ubobcat
    @ubobcat ปีที่แล้ว

    Great explanation!

    • @awwfrontend
      @awwfrontend ปีที่แล้ว

      Please like and subscribe for more videos

    • @ubobcat
      @ubobcat ปีที่แล้ว

      @@awwfrontend Already subscribed!

  • @divyanshindore
    @divyanshindore 2 ปีที่แล้ว

    What’s the difference between race and any? 🤔

    • @awwfrontend
      @awwfrontend 2 ปีที่แล้ว

      The key difference between race and any is -Promise.race is settled as soon as any of the promises you feed it settle whereas Promise.any is settled as soon as any of the promises you feed it is fulfilled or they are all rejected

  • @divyanshindore
    @divyanshindore 2 ปีที่แล้ว

    Thanks for the video. ❤