How to include and use jQuery in Angular CLI project

Tested in angular version 7:

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

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

    Example code to check for functionality:
    component html:

    <button (click)="testJQuery()">Test jquery</button>
    component.ts:
    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

Open Source JavaScript Test Runner | Cypress.io

For end to end testing of websites, should be really simple to use and easier to setup than Selenium. Write javascript to execute tests.

Until now, end-to-end testing wasn’t easy. It was the part developers hated.
Not anymore. Cypress makes setting up, writing, running and debugging tests easy.

En example:

describe('My First Test', function() {
  it('finds the content "type"', function() {
    cy.visit('https://example.cypress.io')

    cy.contains('hello world')
  })
})

This will visit the Cypress example site, look for an element with the text “hello world” and fail the test if it doesn’t exist.

Source: Open Source JavaScript Test Runner | Cypress.io

Software Engineering at Google pdf

”There are many reasons for Google’s success, including enlightened leadership, great people, a high hiring bar, and the financial strength that comes from successfully taking advantage of an early lead in a very rapidly growing market. But one of these reasons is that ​Google has developed excellent software engineering practices​, which have helped it to succeed. These practices have evolved over time based on the accumulated and distilled wisdom of many of the most talented software engineers on the planet. We would like to share knowledge of our practices with the world, and to share some of the lessons that we have learned from our mistakes along the way. The aim of this paper is to catalogue and briefly describe Google’s key software engineering practices. Other organizations and individuals can then compare and contrast these with their own software engineering practices, and consider whether to apply some of these practices themselves.”
arxiv.org/pdf/1702.01715.pdf

pdf icon 1702.01715.pdf

Css Animations tips |  Web Fundamentals  |  Google Developers

Animations are a huge part of making compelling web applications and sites. Users have come to expect highly responsive and interactive user interfaces. Animating your interface, however, is not necessarily straightforward. What should be animated, when, and what kind of feel should the animation have?
developers.google.com/web/fundamentals/design-and-ux/animations/

The C4 Model for Software Architecture

Software architecture diagrams are a fantastic way to communicate how you are planning to build a software system (up-front design) or how an existing software system works (retrospective documentation, knowledge sharing, and learning).
However, it’s very likely that the majority of the software architecture diagrams you’ve seen are a confused mess of boxes and lines.
www.infoq.com/articles/C4-architecture-model

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