Develop Reference

How to get Typed.JS to work properly? Using a variable instead of a pure string;

This is my first question on StackOverflow, so I hope I'm including all the necessary. If not, please let me know and I will amend accordingly.
I'm trying to get Typed.JS to work on this Roman numeral converter page. I would like the converted number to render with the "typing" effect, but I can't get it to work.
The number does render and I don't see any errors in the console, but the typing effect is missing.
In my script.js file, I have imported Typed and also included it in the HTML (I couldn't understand if only one of them was necessary. The docs don't say much)
import Typed from typed.js;
<script src="https://cdn.jsdelivr.net/npm/typed.js#2.0.12"></script>
and the function that includes it is as per below. It takes the user input as argument/parameter and displays it on the page.
This is the repo link: https://github.com/Antonio-Riccelli/js-roman-numeral-converter
function outputRomanNumeral(roman) {
let options = {
strings: [`${roman}`],
typeSpeed:90,
};
let par = document.getElementById("output");
par.classList.remove("bg-danger", "text-white", "error-message")
let typed = new Typed('#spanOutput', options);
par.classList.add("border-bottom", "border-dark", "border-2");
}
Appreciate any feedback you can provide. Thanks.

Firstly, the way you are importing typed.js is incorrect. You need quotes around it, although that wouldn't actually work either. You are trying to import it when you have the typed.js NPM package installed, but that only works if you have a module bundler such as Webpack.
In your case, there are a couple of things that might work.
Import from CDN. import Typed from "https://cdn.jsdelivr.net/npm/typed.js#2.0.12";
Use the script tag, the library might use globals.

How to fix JavaScript library problem on winform webbrowser

I have a library file which named core.js . And also a script.js (runner\script.js). I have designed an UI with WinForms.This project is a simple JS based "programming language". In core.js , I have functions and objects . script.js saves text by the IDE and i have linked it and core.js in index.html (runner\index.html).When i run html file (runner\index.html) it works normally in chrome.But when i run it on WinForm (EasyCode IDE.exe) it does not work correctly. I have solved CSS problem. But can not solve JS.
GitHub link of project:
Click here

If you are eager that this works in old IE webviev control, you should remove default params from all functions in js, etc:
function getDate(format="dmy",seperator="/"){
should be
function getDate(format,seperator){
format = format || 'dmy';
seperator = seperator || "/";
same for all lambda functions, etc:
setBackImg:(imgurl,size = "cover")=>{
should be:
setBackImg: function (imgurl,size) {
size = size || "cover";
and ** does not exists in IE:
power:(int1,int2)=>{
return int1**int2;
},
must be:
power: function (int1,int2) {
return Math.pow(int1,int2);
},
You could also try to find IE pollyfils for ES5 and ES6.

Dynamically changing a style in Polymer 2.0

I'm writing a proof of concept Polymer 2.0 web component where I want to change the colour of a piece of text depending on the user input.
I've tried using Polymer 2.0's this.updateStyles({...}) and Polymer.updateStyles({...}) but neither is updating the text which is output.
e.g.
Polymer.updateStyles({'--tool-colour': 'green'});
I've written a plunker which demonstrates the problem here.
I'm probably missing something simple, can someone help me out?

I do it like this myself:
<template>
<style>
.green-icon {
color: var(--green-color);
}
.red-icon {
color: var(--red-color);
}
</style>
<my-element class$="[[computeIconColor(boolProp)]]"></my-element>
</template>
then in the script:
computeIconColor(boolProp) {
if (!!boolProp) return 'green-icon';
return 'red-icon';
}

The "problem" is as Jordan Running stated that your webcomponentsjs is not loading.
The real thing is that you can't use updateStyles without webcomponentsjs which is rather unfortunate as there are situations where you probably won't need it at all.
In this case you could do
this.setAttribute('style', '--tool-colour: red');
but then again this won't work in browsers needing webcomponentsjs.
what I ended up doing create an behavior that either uses setAttributes (with merging for styles) or updateStyles depending on what is available. It code looks like this.
if (!window.ShadyCSS || (window.ShadyCSS && window.ShadyCSS.nativeCss === true)) {
var newStyleString = '';
for (var key in newStyle) {
if (newStyle.hasOwnProperty(key)) {
newStyleString += key + ': ' + newStyle[key] + ';';
}
}
this.setAttribute('style', newStyleString);
} else {
ShadyCSS.styleSubtree(this, newStyle);
}
So for usage I just write this.updateStyles({'--tool-colour': 'green'}); as my behavior overwrites updateStyles.
The full code you can find here
https://github.com/daKmoR/grain-update-inline-style-behavior.
It's a little more as it also adds support for inline styles on IE11.

As Jordan Running commented, the problem was due to missing dependencies. I'd written code in an online editor (Plunker) assuming that all I needed to get polymer working was a reference to 'webcomponents-loader.js' and links to the other web components my bespoke component was using (doh!).
To get my Polymer element working I used the Polymer CLI facility provided by the Polymer team (specifically I used this for creating a Polymer element template project).
When I then used:
polymer serve
To run a local webserver to "serve" the app which was using my Polymer element, the dependencies then got resolved properly and the element worked.

Vaadin 8 Html Imports Javascript

I am trying to use Vaadin 8 's "Html Import" feature
i followed instructions here : What's New In Vaadin 8
you can check it at 10th feature.
i am also sure that i installed both polymer-cli and bower.As GameCard creator mantioned at his own github.
But when run the application "the cards" are loading but not the way as it should.Mines have no flipping animation and kind a looks bad.
Screenshot :
Update After Gerald's Solution.
Finally Works with the Right Version of Polymer.

Seems to be a problem with the game-card element and the latest version of Polymer. I opened an issue on GitHub. Try with the version I used when I developed the demo. Find it here. Just replace your bower_components directory with the one in my demo.

initialize rank and symbol in different order (set rank first):
GameCard = function () {
var element = this.getElement();
this.setCard = function (symbol, rank) {
element.set("rank", rank);
element.set("symbol", symbol);
};
};

How to get Webstorm 11 to recognize ES2015 javascript in HTML script tags

I've been having trouble getting WebStorm 11 to recognize/highlight/parse ES6/ES2015 javascript when it's inside script tags in regular HTML. Can't find a setting that seems to apply to this. Thanks in advance for your time.
For example, the following js is inside a script tag. You'll notice that WebStorm thinks that a whole bunch of things are broken with it, but it executes just fine.

Using
<script type="text/ecmascript-6"> rather than <script type="text/javascript"> should help you.
Issue on JetBrans YouTrack on the topic.
UPD:
It looks like a WebStorm bug (tested on the latest release):
var a = (d) => {}; //OK
a.v('c', (d) => {}); // OK
class Test {
doSmth(){
a.sh('ff', (d) => {});
// ^^^^^^ , or ) expected when in <script>
// 100% OK when in a js file
}
}
I think you could contact JetBrains support, probably they will fix it.
But anyways, I do not think it's a good practice to have JS in your HTML and, moreover, ES6 which is not yet commonly supported.
UPD 2:
As posted in comments by, zigomir, you might want to use type="text/babel" instead of type="text/ecmascript-6" in .vue files or otherwise linting wouldn't work.