STYLE SWITCHER

How To Fix Your Angular App When It’s Not Working in IE11

How To Fix Your Angular App When It’s Not Working in IE11

Using polyfills to support new features

While Internet Explorer 11 has been deprecated for a while now, Microsoft still provides security updates and technical support. However, IE11 does not support many new features which are already working in other browsers, like Google Chrome, or which will come out in the future. That’s why it’s necessary to use polyfills if you still want your application to work in IE11.

  • Add a new tsconfig-es5.app.json file.
  • Update angular.json configuration.
  • Run your application: ng serve --configuration es5. I recommend to add a run script in package.json for convenience.

polyfills.ts

Update the packages in polyfills.ts


/** IE10 and IE11 require the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.

/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';

/** IE10 and IE11 requires the following to support `@angular/animation`. ALL Firefox browsers require the following to support `@angular/animation`. **/
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

angular.json

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
      ...
  },
  "configurations": {
    "production": {
        ...
    },
    "es5": {
      "tsConfig": "./tsconfig-es5.app.json"
    }
  }
},
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
      ...
  },
  "configurations": {
    "production": {
     ...
    },
    "es5": {
      "browserTarget": "yourAppName:build:es5"
    }
  }
},

tsconfig-es5.app.json

{
 "extends": "./tsconfig.app.json",
 "compilerOptions": {
     "target": "es5" 
  }
}

Run your application with this ng serve --configuration es5

More
Zdog – Round, Flat, Designer-Friendly Pseudo-3D Engine

Zdog – Round, Flat, Designer-Friendly Pseudo-3D Engine

Zdog is a 3D JavaScript engine for <canvas> and SVG. With Zdog, you can design and render simple 3D models on the Web. Zdog is a pseudo-3D engine. Its geometries exist in 3D space, but are rendered as flat shapes. This makes Zdog special.
Features:
  • Zdog is small. 2,100 lines of code for the entire library. 28KB minified.
  • Zdog is round. All circular shapes are rendered as proper circles with rounded edges. No polygonal jaggies.
  • Zdog is friendly. Modeling is done with a straight-forward declarative API.

Zdog was designed to bring the simplicity of vector illustration into 3D. Drawing circles and squares is easy and fun. Zdog just adds another dimension.

Download

Link directly to Zdog JS on unpkg.

<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
Website
More
Contact Form 7 – reCaptcha v2

Contact Form 7 – reCaptcha v2

Contact Form 7 v5.1 dropped support for reCaptcha v2 along with the [recaptcha] tag December 2018. This plugin brings that functionality back from Contact Form 7 5.0.5 and re-adds the [recaptcha] tag.
Description

Contact Form 7 v5.1 dropped support for reCaptcha v2 along with the [recaptcha] tag December 2018. This plugin brings that functionality back from Contact Form 7 5.0.5 and re-adds the [recaptcha] tag.

If this plugin is installed before updating Contact Form 7 from v5.0.5 to v5.1.1 then it will carry over your old API keys. At that point you will just need to head to this plugins settings page to tell the website to use reCaptcha v2.

Once installed and configured it should be the same reCaptcha functionality you are used to in previous versions of Contact Form 7.

Plugin Website
More
Angular js 2 Owl Carousel Responsive options

Angular js 2 Owl Carousel Responsive options

<div class="col-md-10 offset-md-1 col-xs-12">
          <owl-carousel [options]="{responsive:{
    '320':{
        items:1

    },
    '600':{
        items:3

    },
     '980':{
        items:4,
       nav:true,
      dots: true

    }

  }}" [items]="viewCustomObjectList" [carouselClasses]="['owl-theme', 'row', 'sliding']">

Owl carousel Angular version, Click here

More
Maintain the aspect ratio of a div with CSS

Maintain the aspect ratio of a div with CSS

In order to maintain the aspect ratio of a div with CSS create flexible elements that keep their aspect ratio (4:3, 16:9, etc.) when resize the browser window.

What is aspect ratio?

The aspect ratio of an element describes the proportional relationship between its width and height. Two common video aspect ratios are 4:3 and 16:9.

To maintain the aspect ratio of the div add a percentage value for padding-top. Different aspect ratio have different percentage values. Some of them are shown below:

aspect ratio  | padding-top value
--------------|----------------------
    1:1       |       100%
    16:9      |       56.25%
    4:3       |       75%
    3:2       |       66.66%
    8:5       |       62.5%

Syntax

elemenet {
    padding-top: %value;
}
More