JavaScript – Andreas Plahn Developer Blog

Paste and run one of the code blocks below in chrome console to get eventlisteners count.

//eventlisteners counter - grouped summary

Array.from(document.querySelectorAll('*')) .reduce(function(pre, dom){

var evtObj = getEventListeners(dom)

Object.keys(evtObj).forEach(function (evt) {

if (typeof pre[evt] === 'undefined') {

pre[evt] = 0

}

pre[evt] += evtObj[evt].length

})

return pre

}, {})

//_-------------------------------------------

// //eventlisteners - totalcount

var totalCount = 0;

Array.from(document.querySelectorAll('*')).reduce(function(pre, dom){

var evtObj = getEventListeners(dom)

Object.keys(evtObj).forEach(function (evt) {

if (typeof pre[evt] === 'undefined') {

pre[evt] = 0

}

// pre[evt] += evtObj[evt].length

totalCount += evtObj[evt].length;

})

return totalCount;

}, {})

//---------------------------------------

March 15, 2019March 15, 2019

jasmine parameterized unit test – Stack Overflow

Based on piotrek’s answer and the article Parameterized testing in Javascript, you could also use the following approach which uses ES6 syntax:

JavaScript

1
2
3
4
5
6
7
8
9
10

[
['abc', 3],
['ab', 2],
['', 0],
].forEach(([string, expectedLength]) => {
it(`should return length ${expectedLength} for string "${string}"`,
() => { expect(string.length).toBe(expectedLength); });
});

I have tested it with the Jest test framework, but it should work with Jasmine as well.

Source: jasmine parameterized unit test – Stack Overflow

March 8, 2019

How to use underscore lib from DefinitelyTyped with typescript? – Stack Overflow

Step 1. install type definitions (e.g. vs code intellisense) to project:
npm install –save @types/underscore

(https://www.npmjs.com/package/@types/underscore)

Step 2. import to ts file:

import * as _ from “underscore”;

Source: How to use underscore lib from DefinitelyTyped with typescript? – Stack Overflow

February 27, 2019

TypeScript vs. C#: LINQ

TypeScript counterparts for C# LINQ.

Source: TypeScript vs. C#: LINQ

January 8, 2019January 8, 2019

How to include and use jQuery in Angular CLI project

Tested in angular version 7:

install jquery:
npm install jquery
install jquery typescript intellisense:
npm install @types/jquery
edit the angular.json file in root folder:
in the architect / build / scripts location, add this:

1
2
3

"scripts": [ "./node_modules/jquery/dist/jquery.min.js" ]
To use jquery inside a component.ts add this import at the top:

import $ from ‘jquery’;

Example code to check for functionality:
component html:

XHTML

1
2
3

<button (click)="testJQuery()">Test jquery</button>

component.ts:

1
2
3
4
5
6

testJQuery() {
$('html').fadeOut();
$('html').fadeIn();
}

Click on the button should fade out and fade in the entire page.

Source: How to include and use jQuery in Angular CLI project

December 31, 2018

json2typescript – npm

NPM Package for converting from JSON to TypeScript object.

json2typescript In Angular 2 applications, everyone consumes JSON API’s from an external source. Type checking and object mapping is only possible in TypeScript, but not in the JavaScript runtime. As the API may change at any point, it is important for larger projects to verify the consumed data. json2typescript is a small package containing a helper class that maps JSON objects to an instance of a TypeScript class. After compiling to JavaScript, the result will still be an instance of this class. One big advantage of this approach is, that you can also use methods of this class.

Source: json2typescript – npm

December 31, 2018

cors-proxy-server – npm

I wanted to try out some Angular code against a demo odata service, but when requesting data from another domain in a web browser (the angular context) you might get:

Access to XMLHttpRequest at ‘http://services.odata.org/V4/OData/OData.svc/Products?$format=json’ from origin ‘http://localhost:4200’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: Redirect is not allowed for a preflight request.

To get around this problem you could use a node proxy like this one:

Source: cors-proxy-server – npm

Install and start it up. Now we can call the odata service by prepending the proxy url before the actual api endpoint like this:
http://localhost:9090/http://services.odata.org/V4/OData/OData.svc/Products

Notice the double http://

The entire CORS problem can be summarized like this:

The web browser will prevent javascript to get a response from the service at domain x if that server does not explicitly say its ok to respond the remote caller. In our case our source domain is ‘localhost’ and the services.odata.org haven’t added that as a valid domain to respond to according to the web browser.

More info regarding CORS here: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

December 10, 2018

npm vs Yarn – Which Package Manager Should You Use? – KeyCDN

npm and Yarn are two well-known JavaScript package managers. If you’re not familiar with what a package manager does, it essentially is a way automate the process of installing, updating, configuring, and removing pieces of software (AKA packages) retrieved from a global registry. In this post, we’ll be going over what differences exist between two of the most popular JavaScript package managers – npm and Yarn.

Source: npm vs Yarn – Which Package Manager Should You Use? – KeyCDN

November 29, 2018