Expertise Specialist Industries
Insights
|
Ekta Bhadauriya Oodles

Ekta Bhadauriya (Frontend-Lead Frontend Development)

Experience:4+ yrs

Ekta stands out as a highly accomplished Frontend Developer, specializing in Angular technology. In addition to her mastery of Angular, she possesses a comprehensive understanding of various programming languages and tools, including HTML, CSS, JavaScript, AMP, and Git. Ekta has made significant and noteworthy contributions to several internal projects, such as the Oodles Dashboard, Careers Frontend, and Oodles.com. Her expertise and skills have played a pivotal role in the success of these projects.

Ekta Bhadauriya Oodles
Ekta Bhadauriya
(Lead Frontend Development)

Ekta stands out as a highly accomplished Frontend Developer, specializing in Angular technology. In addition to her mastery of Angular, she possesses a comprehensive understanding of various programming languages and tools, including HTML, CSS, JavaScript, AMP, and Git. Ekta has made significant and noteworthy contributions to several internal projects, such as the Oodles Dashboard, Careers Frontend, and Oodles.com. Her expertise and skills have played a pivotal role in the success of these projects.

LanguageLanguages

DotEnglish

Conversational

DotHindi

Fluent

Skills
Skills

DotHTML, CSS

100%

DotJavascript

80%

DotAngular/AngularJS

80%

DotFrontend

80%
ExpWork Experience / Trainings / Internship

Jun 2020-Present

Lead Frontend Development

Gurgaon

Oodles Technologies

Gurgaon

Jun 2020-Present

EducationEducation

2017-2020

Dot

DBRAU

Master of Science-Computer Science

Top Blog Posts
Everything You Need To Know About jQuery Traversing

We can use Query traversing to find or select HTML elements based on their relation to other elements by choosing one selection and move through that selection until you reach the elements you desire.

The image is given below shows a DOM tree with traversing, you can move up, down, and sideways in the tree, starting from the selected element. 

jQuery Traversing - Ancestors

The ancestor could be a parent, grandparent, great-grandparent and to find an ancestor you can use three jQuery methods for traversing up the DOM tree which are:

  1. parent()
  2. parents()
  3. parentsUntil()
     

jQuery parent() Method

Returns only direct parent element of the selected element since it traverses a single level up in the DOM tree.
In the following example the method returns  the direct parent element of each <span> elements:

$(document).ready(function(){
  $("span").parent();
});


jQuery parents() Method


jQuery parents() method returns all ancestor elements of the selected element up to the document's root element (<html>).

In the following example the method returns  all ancestors of all <span> elements:

$(document).ready(function(){
  $("span").parents();
});


You can use an optional parameter to search for ancestors.

In the following example the method returns  all ancestors of all <span> elements that are <ul> elements:

$(document).ready(function(){
  $("span").parents("ul");
});


jQuery parentsUntil() Method


jQuery parentsUntil() Method  returns all the ancestor elements between two given elements.

In the following example the method returns  all ancestor elements between a <span> and a <div> element:

$(document).ready(function(){
  $("span").parentsUntil("div");
});

jQuery Traversing - Descendants


You can use two jQuery methods for traversing down the DOM tree are:

  1. children()
  2. find()


jQuery children() Method


Returns all direct children of the selected element by moving to a single level down in the DOM tree. 

In the following example the method returns  all elements that are direct children of each <div> elements:

$(document).ready(function(){
  $("div").children();
});


You can use an optional parameter to find the search for children.

In the following example the method returns all <div> elements with the class name "box", that are direct children of <div>:


$(document).ready(function(){
  $("div").children("div.box");
});


jQuery find() Method


The find() method returns all the descendant elements of the selected element till the last descendant.

In the following example the method returns all <span> elements that are descendants of <div>:

$(document).ready(function(){
  $("div").find("span");
});


In the following example the method returns all descendants of <div>:

$(document).ready(function(){
  $("div").find("*");
});

 

 
user Ekta Bhadauriya
27 Apr 2021
Remote Debugging Android Devices

Testing and debugging websites on mobile devices can be challenging. Phones and tablets Browsers often don’t have built-in debuggers, and emulating phone is not so accurate. The desktop version of Chrome provides a solution with remote debugging to debug mobile websites on Android.

In this article, we will learn how to use remote debugging with Chrome from your computer. We can use any of the common desktop operating systems like Windows, macOS, or Linux.

 

 

Setting up

Before any remote debugging, we need to set up our computer to recognize our Android device. This means to allow Chrome’s debugger to recognize and connect to the phone. Start by setting some options on the phone.

Phone settings

Open up the Settings app on our phone. We’ll need to enable Developer options if we haven’t already.  Go to the “About Phone” menu to enable, which is located inside the System menu on modern Android devices. Once we’re in there, scroll to the bottom then we have to tap on “Build Number” seven times. then go back to the previous screen or into the “System” menu in the Settings app. There, you’ll now get a new menu item named “Developer options” near the bottom.

Once we’re inside Developer options, enable them on our phone by clicking the toggle at the top of the page. When the toggle is “On”, scroll down a bit and enable “USB debugging” . This will allow us to debug our device via a USB cable connection.

 

To debug Chrome on Android, start with your Developer options window

 

Computer setup (using Android USB debugging)

Driver installation

If using Windows the first thing we’ll need to install the USB drivers for our device. The Android Studio website has a list to find the drivers along with some instructions on how to install the drivers on our computer. 

In case the computer runs macOS or Linux there is no need to install drivers. Mac users are in fact ready to go. If the machine runs on Linux, there are some more setup steps required. make sure the user account belongs to a certain group and we’ll need to install a package with “udev rules”. 

Install Android Debug Bridge (ADB)

Once got the drivers or udev rules installed, we also need ADB to provides an interface to talk to the mobile devices. ADB and other Android platform-tools come with Android Studio, but can also download separately.

After it’s downloaded, run it to install ADB. after installation we need to navigate to the folder where it was installed (C:\Program Files(x86)\Minimal ADB and Fastboot by default) and double-click cmd-here.exe. which then opens a command prompt window in that folder.

Using either of the techniques, in the shell window, type in ADB start-server to start the ADB server.

Note: If we restart our computer, the server will not be running automatically. It’s not recommended to run the server as a permanent background service.

The last thing to set up the computer is to enable remote debugging in the Chrome developer tools by opening Chrome on the computer and go to the DevTools settings at chrome://inspect/#devices to do this.

To debug websites in Android make sure “Discover USB devices” is checked. 

 

 

Making the connection

To debug websites in Android on our device, plug the phone into the computer via USB. If didn’t do this as part of the driver installation, we might see a notification on our taskbar letting us know our computer is setting up our new device. Make sure the phone is on and unlocked and the ADB server is running, then we see a popup titled “Allow USB debugging?”.

 

Debug Android by allowing USB Debugging Popup

 
user Ekta Bhadauriya
29 Mar 2021
Lifecycle hooks

Angular calls lifecycle hook methods on directives or components to create, change, and destroy the components or directive.

The lifecycle of a component starts when Angular initiates the component class and renders the component view along with its child views. The lifecycle continues with change detection, since Angular checks when data-bound properties changed, and updates the view and the component as needed. The lifecycle of a component ends when Angular destroys the component instance and removes its rendered template from the DOM. Directive has a similar lifecycle, as Angular create, update, and destroy instances in the course of execution.

Angular use these lifecycle methods for key events in the component/directive in order to initialize the new instance, initiate change detection whenever needed, respond to update during change detection and clean up before deletion of instance.

Lifecycle sequence

After creating a component or directive, Angular calls these methods in the following sequence at a specific moment:

 

Hook

Purpose and Timing

ngOnChanges()

 it respond when Angular (re)sets data-bound input properties. This method receives object of current and previous property values which called before ngOnInit() and whenever one or more data-bound input properties changed.

ngOnInit()

this method initialize the directives/components after Angular first displayed the data-bound properties and set the directives and component's input properties.

Called once, after the first ngOnChanges().

ngDoCheck()

Detect and act upon the change that Angular can't or won't detect on its own.

this method called during every change detection runs, immediately after ngOnChanges() and ngOnInit().

ngAfterContentInit()

Respond after Angular project external content into the component's view.

Called once after the first ngDoCheck().

A component-only hook.

ngAfterContentChecked()

Respond after Angular check the content projected into the component.

Called after the ngAfterContentInit() and every subsequent ngDoCheck().

A component-only hook.

ngAfterViewInit()

Respond after Angular initialize the component's views and child views.

Called once after the first ngAfterContentChecked().

A component-only hook.

ngAfterViewChecked()

Respond after Angular check the component's views , child views and the view that contains the directive.

Called after the ngAfterViewInit and every subsequent ngAfterContentChecked().

A component-only hook.

ngOnDestroy

Cleanup just before Angular destroys the directive/component. Unsubscribe Observable and detach event handlers in order to avoid memory leaks.

Called just before Angular destroys the directive/component.

 

 
user Ekta Bhadauriya
27 Feb 2021
How to access DOM element in Angular

@ViewChild  and  @ViewChildren

 

To access and manipulate DOM elements, directives, and components in Angular, we have the @ViewChild and the @ViewChildren decorators.

 

ViewChild is used to query one element from the DOM whereas for multiple elements we use ViewChildren.


The property decorator configures a view query while to look for the element or directive which matches first in the selector in the view DOM, we have the Change Detector. The property gets updated when the view DOM changes and the new child matches the selector.
 

Also Read: Overview Of Angular version 10

 

The decorator takes the following information:

selector - The selector of the element to query can be a directive type or a name.
read - Read a different token from queried elements.
static - To indicate whether or not to resolve query results before change detection runs., we have static. It is a new thing in Angular 8.

 


ViewChild can take the following selectors:

Classes with @Component or @Directive decorators that is components and directives,
Template reference variables,
Providers,
TemplateRef

For eg, AppComponent needs a reference of the <app-color-sample> component which AppComponent uses inside its template, in order to call a method directly on it.

<app-color-sample [color]="primary" #primaryColorSample></app-color-sample>


First, we imported ViewChild and AfterViewInit from the @angular/corepackage:

import { Component, ViewChild, AfterViewInit } from '@angular/core';


then, create a query called primarySampleComponent that takes ColorSampleComponent as the selector and has static equals to false:

@ViewChild(ColorSampleComponent, {static: false}) primarySampleComponent: ColorSampleComponent;


The value of the injected member variable is not immediately available at component construction time!

Angular will fill in this property after the view initialization is completed automatically.

 

Also Read: Angular Components And Their Working Methodologies

 

The AfterViewInit Lifecycle Hook


If there is a need to write initialization code of the component which uses the references injected by @ViewChild, do it inside the AfterViewInit lifecycle hook.

@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
.....

@ViewChild(ColorSampleComponent) primarySampleComponent: ColorSampleComponent;


ngAfterViewInit() {
console.log("primaryColorSample:", this.primarySampleComponent);
}

......
}

 

Turn To Our SaaS App Development Services

 

We are a 360-degree software development company that provides cross-platform SaaS app development services to address varied software project requirements. We have an experienced team of Java, PHP, and Python developers who use advanced frameworks, tools, and SDKs to build scalable web and mobile applications with custom features. For more detail, reach us out at [email protected].
user Ekta Bhadauriya
30 Nov 2020
Pipes in Angular

A pipe is a useful feature in Angular and a simple way to transform values in a template. There are some built-in pipes, but you can also create your own pipes. A pipe accepts an input value and returns a transformed value. Through pipe, you can transform strings, currency amounts, dates, and other data for display. The fact that you can use pipes throughout your application while declaring each pipe once, makes them very useful.  

 

Angular provides some built-in pipes for data transformations, including transformations, which use locale information to format data. The following are some commonly used built-in pipes for data formatting:


DatePipe: To formats a date value according to locale rules.
UpperCasePipe: To transforms text to all upper case.
LowerCasePipe: To transforms text to all lower case.
CurrencyPipe: To transforms a number into a currency string, formatted according to locale rules.
DecimalPipe: To transforms a number into a string with a decimal point, formatted according to locale rules.
PercentPipe: To transforms a number into a percentage string, formatted according to locale rules.

 

In addition to the above types, you can create and use custom pipes in template expressions.

 

Also Read: Building a Redux Application Using Angular


Using a pipe in a template

 

To use a pipe, use the pipe operator (|)  in the template expression as shown in the following example with the name of the pipe, which is date for the built-in DatePipe. The example show the following:

 

<p>Birthday is {{ birthday | date }}</p>
<p>Birthday is {{ birthday | date:"MM/dd/yy" }} </p>

 

Applying two formats by chaining pipes

 

To apply two formats we can chain pipes so that the output of one pipe becomes the input to the next

 

Birthday is {{ birthday | date | uppercase}}

 

Also Read: Overview Of Angular version 10

 

Creating pipes for custom data transformations


If there are transformations void of built-in pipes, we can create custom pipes for transformations. As we use built-in pipes to transform input values to output values for display, the same way we can use custom pipes in template expressions. Here's the syntax to define a custom pipe:

 

import { Pipe, PipeTransform } from '@angular/core';  
@Pipe({name: 'Pipename'}) 

export class Pipeclass implements PipeTransform { 
   transform(parameters): returntype { } 
}

 

We are a 360-degree software development company that provides complete web and mobile app development solutions for varied project requirements. Our end-to-end SaaS app development services address your mission-critical project requirements through scalable, responsive, and feature-rich software applications that are easy to scale. We carefully analyze your project requirements and formulate effective strategies to build enterprise-grade web and mobile applications for multiple platforms. For more info, contact us at [email protected]. 
user Ekta Bhadauriya
30 Oct 2020
Understanding The Concept Of AMP Pages

An Accelerated Mobile Page or AMP refers to Google's and Twitter's project intended to make really fast mobile pages. It's an HTML page designed to be lightweight and designs really fast loading. This is designed to be the open response and Maintain flexibility and control and reduce complexity in your code.

 

What makes AMP fast?

 

It's like a diet HTML so certain tags of HTML you just can't use like forms. You can use most of CSS, but some parts are not allowed to be used. Then JavaScript is basically not allowed at all. You have to use a JavaScript library that they provide you with, and that provides things like lazy loading.

 

So the idea is that the whole platform is designed just for readability, speed. The reason, AMP pages load instantly is because AMP restricts HTML/CSS and JavaScript and allow faster rendering of mobile web pages. Unlike regular pages, AMP pages are automatically cached by Google AMP Cache for faster load times on Google search.

 

AMP pages allow third-party JavaScript by restricting them to iframes so they can’t block the execution of the main page. Even if they trigger multiple style re-calculations, their tiny iframes have very little DOM, the time it takes to do style-recalculations and layouts are restricted by DOM size, so the recalculations of the iframe are very fast compared to styles recalculation for the page.

 

Only inline styles are allowed. This removes one or more HTTP requests from the critical rendering path compared to most web pages. Also, the inline style sheet has a maximum size of 50 KB. The AMP declares 0 HTTP requests until fonts start downloading. This is only because all javascript has the async attribute and only inline style sheets are allowed so there are no HTTP requests blocking the browser from downloading fonts.

 

Also Read: How To Maintain Threads In iOS Applications

 

How does this work?

 

For starters, you will need at least two versions of any article page: The original version of your article page, and the AMP version of that page. In the source code, in order for Technologies that support the AMP to detect the AMP version of your article, you will need to modify the original version of the article page by including the following canonical tag for AMP pages.

 

<link rel="amphtml" href="http://www.example.com/blog-post/amp/">

 

You have to rewrite your site template to accommodate the restrictions. It prioritizes resource loading, loading only what’s needed, and prefetches lazy-loaded resources and optimizes downloads so that the current most important resources are downloaded first. Images or ads are only downloaded if they are likely to be seen by the user, above the fold, or if the user is likely to scroll to them.

 

You likely will not be able to have lead forms, on-page comments and some other elements you may be used to having on your page handled specially.  For example, for images, <img> tags are replaced with an equivalent or slightly enhanced custom AMP HTML tags and must include an explicit width and height.

 

<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>

 

There is also support for things such as slideshows via amp-carousel and image lightboxes via amp-image-lightbox, as well social media embeds for Twitter, Instagram, Facebook, Pinterest via their own extended components which aren’t difficult to use.

 

Also Read: Developing Two Horizontal Scrollview in Flutter

 

Performance and speed are very important factors in terms of retaining and converting visitors, no doubt, but in order to drive traffic to the website you need to rank in search engines and optimizing it with the use of the very framework backed by Google, means your company has a better chance of ranking higher in results pages. Using the AMP framework will not only help your business to stay on top of trends but boost your website traffic and stay ahead of the competition.

 

We are a 360-degree SaaS app development company that specializes in building cross-platform mobile apps for Android and iOS platforms. Our developers critically analyze your project requirements and formulate effective strategies to build a performance-driven mobile app that is easy to scale. We work on the latest tools and next-gen technologies to build a feature-rich mobile app with custom technology integrations. Our end-to-end mobile app development services include UI/UX design, development, testing, deployment, scaling, and technical maintenance.
user Ekta Bhadauriya
24 Sep 2020
Banner

Don't just hire talent,
But build your dream team

Our experience in providing the best talents in accordance with diverse industry demands sets us apart from the rest. Hire a dedicated team of experts to build & scale your project, achieve delivery excellence, and maximize your returns. Rest assured, we will help you start and launch your project, your way – with full trust and transparency!

Post a job
and hire a pro

Browse experts profile

Browse through
our projects

Browse projects

Let us help you find
the real talent

Browse experts profile

INFO

Contact Us Careers

LEGAL

Privacy Policy Terms & Conditions Cookie Policy

VALUED SERVICES

Digital MarketingBlockchainArtificial IntelligenceERP SolutionImmersive Media and GamingOodles Studio

V    ●   Copyright @ Oodles Technologies