Author: Andreas Plahn

How to show Allowed types on Content Area – Grzegorz Wiecheć

Nice solution for EPiServer editors to be able to see which kind of content types that can be added to a content area in EPiServer. This solution is for older Episerver versions e.g. around 2015.

In EPiServer 11+ the js is minifed and inside a zip file at this location:
[EPiServer root folder]\modules\_protected\CMS\CMS.zip\11.4.6\ClientResources\epi-cms\contentediting\editors
I wont touch that for now but if someone does, please let us all know.

Content References list with allowed types

Read more here: How to show Allowed types on Content Area – Grzegorz Wiecheć

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/