Develop Reference

Firebase signInWithPopup() giving typeError while signInWithRedirect() is working

i am using the following simple code, which worked for some days and is now not working -
function signIn() {
// Sign into Firebase using popup auth & Google as the identity provider.
var provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider);
}
document.getElementById("signin").onclick = signIn;
it is giving error -
Uncaught TypeError: e.open is not a function
at Mt (firebase-auth.js:sourcemap:1)
at ii (firebase-auth.js:sourcemap:1)
at zh.t.Xc (firebase-auth.js:sourcemap:1)
at zh.i [as signInWithPopup] (firebase-auth.js:sourcemap:1)
at HTMLButtonElement.signIn (sign-in.js:4)
also when i change the signInWithPopup with signInWithRedirect, it is working. I don't know where the problem is?
I am using following links in head of index.html -
<script src="https://apis.google.com/js/api:client.js"></script>
<!-- update the version number as needed -->
<script defer src="/__/firebase/8.6.2/firebase-app.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/8.6.2/firebase-auth.js"></script>
<script defer src="/__/firebase/8.6.2/firebase-database.js"></script>
<script defer src="/__/firebase/8.6.2/firebase-firestore.js"></script>
<script defer src="/__/firebase/8.6.2/firebase-functions.js"></script>
<script defer src="/__/firebase/8.6.2/firebase-messaging.js"></script>
<script defer src="/__/firebase/8.6.2/firebase-storage.js"></script>
<script defer src="/__/firebase/8.6.2/firebase-analytics.js"></script>
<script defer src="/__/firebase/8.6.2/firebase-remote-config.js"></script>
<script defer src="/__/firebase/8.6.2/firebase-performance.js"></script>
<!--
initialize the SDK after all desired features are loaded, set useEmulator to false
to avoid connecting the SDK to running emulators.
-->
<script defer src="/__/firebase/init.js?useEmulator=true"></script>

Load standalone js library using webpack

I'm trying to add this library to my project: https://github.com/DragonBones/DragonBonesJS/tree/master/Phaser/Demos
I use webpack for merging all libraries, it produces such output in index.html:
<script type="text/javascript" src="./dist/vendor.bundle.js"></script>
<script type="text/javascript" src="./dist/bundle.js"></script>
I'd like to inject required files between vendor.bundle.js - which, as I suspect contains all remaining libraries merged into one file - and bundle.js - which contains my game. I could also inject them at the end of vector.bundle.js, it doesn't matter for me. Unfortunately I don't know how to do that.
Let's say that's the list of files I need to load:
<script src="./libs/dragonBones/dragonBones.js"></script>
<script src="./out/DragHelper.js"></script>
<script src="./out/BaseDemo.js"></script>
<script src="./out/HelloDragonBones.js"></script>
<script src="./out/AnimationBase.js"></script>
<script src="./out/DragonBonesEvent.js"></script>
<script src="./out/AnimationLayer.js"></script>
<script src="./out/BoneOffset.js"></script>
<script src="./out/InverseKinematics.js"></script>
<script src="./out/BoundingBox.js"></script>
<script src="./out/ReplaceSlotDisplay.js"></script>
<script src="./out/ReplaceAnimation.js"></script>
<script src="./out/CoreElement.js"></script>
<script src="./out/PerformanceTest.js"></script>
Is there a way to modify index.html template to include them between these two files mentioned earlier? Or maybe there is better way of doing that?

AngularJS & Bower MathJax AsciiMath Rendering

This should be a pretty easy one, but I haven't been able to find any solutions.
I need to include the following in my source code:
<script type="text/javascript" src="bower_components/MathJax/MathJax.js?config=AM_HTMLorMML-full"></script>
The ./config/am_htmlormml.js file is loaded by MathJax to render formulas written in ascii. The code runs and works fine, but I would prefer to use Bower. When I install MathJax via bower, I get:
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
...
<script src="bower_components/MathJax/MathJax.js"></script>
...
<!-- endbower -->
<!-- endbuild -->
But I am unsure of how best to add ?config=AM_HTMLorMML-full1, or make sure the ./config/am_htmlormml.js file is loaded.

You can specify it in the config key when you configure MathJax. Note that my example uses a different config than yours (b/c this config worked with my example MathML).
<!doctype html>
<title>MathJax Bower Example</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
config: ["TeX-MML-AM_CHTML.js"],
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']]
},
});
</script>
<script async src="bower_components/MathJax/unpacked/MathJax.js"></script>
When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

how to create multiple js files from index.html using grunt usemin

My index.html has split js files as follows:
<head>
....
<!-- build:js js/app1.min.js -->
<!-- js from lib -->
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<!-- js of this app -->
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<!-- external js -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<!-- endbuild -->
....
</head>
.....
<body>
...
<!-- build:js js/app2.min.js -->
<!-- js from lib -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- angular-animate provides search functionality -->
<!-- js of this app -->
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<!-- endbuild -->
....
</body>
As you can see, I tried to use two sets of js files. The reason to split is performance. How to use usemin in this case. I tried with following:
'useminPrepare': {
'html': 'app/index.html'
},
'usemin': {
'html': ['dist/index.html']
},
However, there is no folder/file created. But in index.html, those two sections are replaced appropriately by app1.min.js and app2.min.js
Moreover, I do not understand one thing that all examples are using concat and uglify in combination of usemin. The files in index.html which are already *.min.js eg. files included in bower_components folder, what happens to them?

Unless you're heavily invested in grunt already, give gulp a look.
Below is a snippet from gulpfile.js. The gulp.src() functions take a list of files, then pipe them through transformations, ending with a list of files, which get's written to disk with gulp.dest().
This let's the first two blocks of code src, transform (minify,concat,etc), and write the js and css.
The last block of code src()'s the index.html, injects the filenames from the first two blocks, and writes the index.html to a build folder. I do consulting on gulp builds.
Here's how you'd do it in gulp:
// Vendor files are pre-minified. Get right versions.
// JS. Concat, and add revision if necessary
var srcJs = config.minify ? config.dashboard.vendorJsMin : config.dashboard.vendorJs;
var destJs = 'vendor' + (config.minify?'.min':'') + '.js';
var vendorJs = gulp.src(srcJs)
.pipe(plugins.if(config.concat, plugins.concat(destJs)))
.pipe(plugins.if(config.hash, plugins.hash()))
.pipe(gulp.dest(config.dashboard.dest + '/js'))
// Vendor files are pre-minified. Get right versions.
// CSS. Concat, and add revision if necessary
var srcCss = config.minify ? config.dashboard.vendorCssMin : config.dashboard.vendorCss;
var destCss = 'vendor' + (config.minify?'.min':'') + '.css';
var vendorCss = gulp.src(srcCss)
.pipe(plugins.if(config.concat, plugins.concat(destCss)))
.pipe(plugins.if(config.hash, plugins.hash()))
.pipe(gulp.dest(config.dashboard.dest + '/css'))
// Inject all these files into index.html
return gulp.src(config.dashboard.index)
.pipe(plugins.plumber())
.pipe(plugins.inject(vendorJs, _.merge({name: 'vendor'}, config.dashboard.injectOptions)))
.pipe(plugins.inject(vendorCss, _.merge({name: 'vendor'}, config.dashboard.injectOptions)))
.pipe(plugins.inject(appJs, _.merge({name: 'app'}, config.dashboard.injectOptions)))
.pipe(plugins.inject(appCss, _.merge({name: 'app'}, config.dashboard.injectOptions)))
.pipe(plugins.inject(templates, _.merge({name: 'templates'}, config.dashboard.injectOptions)))
.pipe(plugins.replace('REPLACE_NODE_ENV', config.NODE_ENV))
.pipe(gulp.dest(config.dashboard.dest))
This is a much more 'dev' like build system than grunt. Grunt is much more 'ops' like. Whatever works best is the one to use!

Ember.js tutorial and guide - DS not defined, Ember.State moved to plugin

I'm trying to learn Ember, but I'm quickly figuring out that the guide sucks. It leaves out very key components.
I keep getting one of two errors:
Uncaught Error: Ember.State has been moved into a plugin: https://github.com/emberjs/ember-states
and,
Uncaught ReferenceError: DS is not defined
Here is how I have my scripts laid out:
<script src="js/libs/jquery-1.10.2.js"></script>
<script src="js/libs/handlebars-1.1.2.js"></script>
<script src="js/libs/ember-1.3.0.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/libs/ember-states.js"></script>
<script src="js/app.js"></script>
The error I get depends if I comment out ember-data.js or ember-states.js.
In the end, it always errors. Why?

I know where you're coming from - similar problems over here, it's a bit bumpy in the beginning.
Finally I used yeoman in the end and did the setup using the yeoman ember-generator for doing the project setup and creating models/controller/... have the feeling, it makes things much easier.
The given setup loads the following javascript order (added version numbers manually).
<script src="jquery/jquery.js"></script> <!-- v.20.03 -->
<script src="handlebars/handlebars.runtime.js"></script> <!-- v 1.3.0 -->
<script src="ember/ember.js"></script> <!-- v. 1.2.0 -->
<script src="ember-data-shim/ember-data.js"></script> <!-- v. 1.0.0-beta.4 -->
Hopefully it helps...

Have you defined your application adapter e.g App.ApplicationAdapter = DS.FixtureAdapter.extend();?
Also when i changed the directions of scripts.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://builds.emberjs.com/canary/ember-data.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"> </script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/tags/v1.0.0/ember.js"></script>
I also got ds.not defined, when i moved ember-data to the last item on list it got fixed