scroll Indicator
https://www.w3schools.com/howto/howto_js_scroll_indicator.asp
a “progress bar” on top of the page to show how far a page has been scrolled.Updates from September, 2019 Toggle Comment Threads | Keyboard Shortcuts
-
shashankgee
-
shashankgee
Difference between event.stopPropagation and event.stopImmediatePropagation()
event.stopPropagationwill prevent handlers on parent elements from running.
Callingevent.stopImmediatePropagationwill also prevent other handlers on the same element from running.pls refer the below link.
Say, if you have a
<table>, with<tr>, and then<td>. Now, let’s say you set 3 event handlers for the<td>element, then if you doevent.stopPropagation()in the first event handler you set for<td>, then all event handlers for<td>will still run, but the event just won’t propagate to<tr>or<table>(and won’t go up and up to<body>,<html>,document, andwindow).Now, however, if you use
event.stopImmediatePropagation()in your first event handler, then, the other two event handlers for<td>WILL NOT run, and won’t propagate up to<tr>,<table>(and won’t go up and up to<body>,<html>,document, andwindow). -
shashankgee
How to uninstall Angular CLI?
This post is to describe how to uninstall angular cli and install latest version of angular/cli
$ npm uninstall -g @angular/cli $ npm cache clean $ npm install -g @angular/cli
Notes :
- On Windows run this using administrator
- On Mac use sudo (
$ sudo <command>) - If you are using
npm>5you may need to use cache verify instead. ($ npm cache verify)
-
shashankgee
CSRF, XSS (type of web attacks)
please refer the site to know about CSRF and XSS
-
shashankgee
Event Bubbling or Event Capturing?
Event propagation:
There are two ways of event propagation in the HTML DOM, bubbling and capturing.
Event propagation is a way of defining the element order when an event occurs. If you have a <p> element inside a <div> element, and the user clicks on the <p> element, which element’s “click” event should be handled first?
In bubbling the inner most element’s event is handled first and then the outer: the <p> element’s click event is handled first, then the <div> element’s click event.
In capturing the outer most element’s event is handled first and then the inner: the <div> element’s click event will be handled first, then the <p> element’s click event.
With the addEventListener() method you can specify the propagation type by using the “useCapture” parameter:addEventListener(event, function, useCapture);
for Reference:
https://www.w3schools.com/js/js_htmldom_eventlistener.asp
===========================================================
*****************************************************************
Event Capture and Bubbling: In HTML DOM API there are two ways of event propagation and determines the order in which event will be received. The two ways are Event Bubbling and Event Capturing. The first method event bubbling directs the event to its intended target, and the second is called event capture in which the event goes down to the element.
Event Capture
The capture procedure is rarely used but when it’s used it proves to be very helpful. This process is also called ‘trickling’. In this process, the event is captured first by the outermost element and then propagated to the innermost element. For example:
<div> <ul> <li></li> </ul> </div>
From the above example, suppose the click event did occur in the ‘li’ element, in that case capturing event it will be first handled ‘div’, then ‘ul’ and at last the target element will be hit that is ‘li’
Event Bubbling
Bubbling just works like the bubbles, the event gets handled by the innermost element and then propagated to the outer element.
<div> <ul> <li></li> </ul> </div>
From the above example, suppose the click event did occur in the ‘li’ element in bubbling model the event will be handled first by ‘li’ then by ‘ul’ and at last by ‘div’ element.
-
shashankgee
Tools in Front End
Karma
==========
Google’s Java script Test Runner and natural Choice for testing Angular js. In addition to
allowing you to run your tests on real browers (including phone and Tablet browers) it is
also a test framework agnostic. which means that you can use it in conjunction with any
test framework like Jasmine,Qunit,Mocha among othersJasmine
==========
Test framework in which we write our tests.Yeoman
==========
Yeoman is a tool set containing a 3 components (Grunt,bower,and scaffolding tool YO).
YO generates boilerplate code with the help of generators(which are just scaffolding templates)
and automatically configure Grunt,bower for your project. you can find generators for almost
any JavaScript framework (Angular , ember, backbone).
Grunt
==========
Grunt is a task runner which automates several repetitive tasks such as minification,compilation
build,testing,and setting up a preview of your angularjs application.Gulp
==========
Gulp is also a test runner. like grunt.WebPack
==========webpack is an open-source JavaScript module bundler. It is a module bundler primarily for JavaScript, but it can transform front-end assets like HTML, CSS, and images if the corresponding loaders are included. webpack takes modules with dependencies and generates static assets representing those modules.
Bower
==========
is a package manager that helps you find and install your application dependencies. such as
css frameworks and javascript libraries, and so on. it runs over git and avoid manually downolad
and the updates dependencies.Protractor
==========End-to-End Testing e2e testing framework.
-
shashankgee
Security in Angular js
If you talk to the server via https, you don’t have a problem with replay attacks.
My suggestion would be to leverage your server’s security technology. For example, JavaEE has an out-of-the-box login mechanism, declarative role-based protection of resources (your REST endpoints) etc. These are all managed with a set of cookies and you don’t have to care about storage and expiration. Check out what your server/framework already gives you.
If you plan to expose your API to a broader audience (not specifically to the browser-based UI that you serve) or other types of clients (e.g. mobile app), consider adopting OAuth.
Off the top of my head, Angular has the following security features (will add more as they pop-out):
CSRF/XSRF attacks
Angular supports an out of the box mechanism for CSRF protection. Check out
$httpdocs. Server-side support is needed.Content Security Policy
Angular has a mode of expression evaluation that is compatible with more strict JavaScript runtimes that are enforced when CSP is enabled. Check out
ng-cspdocs.Strict Contextual Escaping
Use Angular’s new
$scefeature (1.2+) to harden you UI against XSS attacks etc. It’s a bit less convenient but more secure. Check out the docs here. -
shashankgee
animate.css
Here you can have Animation classes you can use once import the animate.css file into your application
-
shashankgee
-
shashankgee
How To Handle XSS or CSRF Attacks in Angular 4 ?
https://www.code-sample.com/2017/09/angular-4-handle-xss-csrf-attacks.html
Tutorials in Easy Way 
Reply