Configuring YUI on YAP - yui

I am working on a Yahoo! App and want to utilize YUI Features available, however, I haven't figured out a way to include the YUI Libraries in my App as yet. I was of the opinion that the Libraries will be a part of the App by default but seems its not true in my case.
I have tried including the Libraries in my Code but it fails with an error that external files are not allowed, which makes perfect sense as inclusion of external Javascript and CSS isn't allowed.
I have also tried to include the Javascript in the Gadget XML but I am not sure where to put exactly. I am not sure if I have done it correctly and at the correct place, following is a snippet for reference:
<Content type="html" view="YahooSmallView, default">
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.1/build/yahoo/yahoo.js&2.8.1/build/dom/dom.js&2.8.1/build/event/event.js"></script>
</Content>
<Content type="html" view="YahooFullView, canvas" href="http://www.myapp.com">
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.1/build/yahoo/yahoo.js&2.8.1/build/dom/dom.js&2.8.1/build/event/event.js"></script>
</Content>
A Firebug Screenshot is below
I have a feeling that this might be available as a feature and I might have to do something similar but I am not sure:
<Require feature="yui-2.8" />
Can anyone in the community please provide some help with this issue?

Issue resolved. Included the following files in the code as External Javascript and it worked.
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0/build/element/element-min.js"></script>
Thanks

Had the same issue. it appears that you can only use version 2.8.0 for now. If you look in the scripts above, it has 2.8.1 as the version. So for anyone else reading this, try doing 2.8.0 as the version.

Related

For Chrome extension publishing purposes, does using a Bootstrap CDN count as remote code?

I am trying to publish a Google Chrome Extension. Before doing it, there is a form to fill:
I am unsure about how to answer. The extension does use a bootstrap CDN via:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
On the side it says:
Remote code is any JS, Wasm, or CSS that is not included in the extension's package. This includes references to external files in tags, modules pointing to external files, and strings evaluated through eval()
Is this CDN use considered as remote code? Is it considered a module pointing to an external file?
Yes, remote code would include CSS files served by a CDN. There are various areas in the Chrome Extensions documentation that specifically define remote code as any code not bundled in your extension. They even include "Any library hosted on a CDN". In fact, they actually specifically reference Bootstrap on the Remotely hosted code restrictions page.
Although CSS is not something blocked by the new Manifest V3 restrictions on remote code, including remote code can make the review process take longer. Instead, it's better to include the library bundled with the extension (assuming the library's license allows it).

BuildFire: buildfire is not defined

I have created a plugin for an app, that is working perfectly fine in local machine and on app.buildfire. But when I have published my changes and tried testing on device I am getting below error.
04-27 10:32:33.741 6512-6512/? I/chromium: [INFO:CONSOLE(173)] "Uncaught ReferenceError: buildfire is not defined", source: file:///data/user/0/com.bf.app698324/files/files/pluginTemplate/plugins/84dad72d-0641-4ebd-8349-ff9bd3d7c2b6/widget/index.html?fid=pluginFrame0.3707975031273656&v=1556341353636 (173)
Below is the path for buildfire.min.js setup in my index.html file in widget folder.
<script src="../../../../scripts/buildfire.min.js"></script>
I don't know why buildfire is not defined, my guess was if it is working perfectly on app.buildfire.com then it should work on device too.
I need your help guys, if there is some other path for this for release purpose.
I have managed to find out an answer for this.
When we are publishing our plugin, buildfire resources are available at one level down as compared to it's SDK hierarchy. So instead of below line :
<script src="../../../../scripts/buildfire.min.js"></script>
We have to include below line in order to make our plugin work :
<script src="../../../scripts/buildfire.min.js"></script>
This issue is happening with SDK 1.19.3

JetBrains PhpStorm 2018.2: Error while fetching external resource (xmlns, schemaLocation, xsd)

I want to use autocompletion at my typo3 fluid templates for some viewhelpers i.e. vhs, but PhpStorm could not fetch the external resource. It only works, if I download the xsd schema file and "manually setup external resource". It would be very nice, If the program could do this.
<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
v:schemaLocation="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers https://fluidtypo3.org/schemas/vhs-master.xsd">
<!-- my code -->
</div>
Not sure why your schemaLocation doesn't work, but try replacing the XSD URL with one you get from https://viewhelpers.fluidtypo3.org/ and re-download the schema from there. You'll have to pick a specific version, though.
The schemas there are generated fresh with a couple of fixes to the XML source they contain. Nothing that I expect would affect the download.
One thing though - both those URLs are served with a multi-hostname SSL certificate which means the version of openSSL you use must be at least I think it was 0.94.4 in order to be compatible. If your OS is very old it might help to update the openSSL library or do an OS update. But in all cases it should work if you use a browser to download since all current browsers understand SNI.

Angular 2 required libraries

I would like to start working with the Angular2 Beta, but I am facing a few problems regarding the required libraries.
I am using Eclipse and it's TypeScript Plugin.
Also, I am using SystemJSas module loader.
My problem is that if I install Angular2 using npm install angular2 it loads the whole Angular-Project, including the CommonJS-Version, ES6-Version and the TypeScript-Version. This results in a over 30 MB big folder with almost 2000 files, though I only need the TypeScript-Version (still a few 100 files), without examples.
Also, importing the /ts-folder in Eclipse gives me errors, that the modules from "rxjs" do not exist ("rxjs/Subject"...). So i guess i have to download that project too.
Using the package.json used in the 5 Min Quickstart, npm install downloads over 80MB (almost 10000 files), and I am sure, I don't need all those files.
So i would like to know, which files are really needed by Angular2 and how can i download them?
Should i create my own package.json-File? Or is there a even simpler way?
EDIT:
Taking a look at our (working) Angular 1.X Project, i can see a single angular.js file, as well as files for the different modules (like restangular.js, angular-route.js etc.), in total about 10 files.
What i am now looking for is an angular2 counterpart of those files.
Do those counterparts exist? Where can i find them?
"What i am now looking for is an angular2 counterpart of those files":
<!-- 1. Load libraries -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
You need those 4 .js (not .ts) files.
"Where can i find them?"
They got downloaded with npm. You can keep those 4 and delete everything else. You can also get them from a CDN, or download them manually.
<!-- 1. Load libraries -->
<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>
HOWEVER. These are already compiled javascript files, and they'll work for you if you write your app using JS, but right now 90% of the scarse documentation you will find about Angular 2 is on typescript and in order to work with typescript you'll need the source files of Angular 2 which is the whole package you are getting.
My suggestion if you are doing it in typescript: Don't worry about all those files getting downloaded, they are meant for development, not neccesarily part of your build. You can only include the ones I told you in your build and that will keep you real app small. Also you are not suppose to add all those files into the git repo or w/e repo you are using, the idea is that you have git ignore the whole "node_modules" folder and you only commit the package.json file, which will work for other developers so they run npm install and they get all the dependencies themselves. So all those files are only meant to be in dev machines, you don't have to worry about them making you app too big cause they won't be part of your app.
The package.json file in Angular 2 Quickstart guides contains development dependencies like concurrently,lite-server, typescript etc along with es6-shim etc for older browser compatibility.
Basic dependencies for angular 2 are
angular2
typescript
systemjs
rxjs
You can look into this Angular2 Tutorial Plunker to start a simple application. It also contains routing library.

How can I reference different <script> tags on my html page in Visual Studio in a local dev vs. deployed sense?

I would like to know how can I reference different javascript files on my html page in Visual Studio which reflect the appropriate environment - local dev vs. deployed (on Azure)
For example, when I am developing locally, I have something like this at the bottom of my <body> tag (abbreviated dummy names used)
<script src="js/local-1.js"></script>
<script src="js/local-2.js"></script>
<script src="js/local-3.js"></script>
When I am ready for deployment, I leverage grunt to concat and minify these files. The script I reference will now look as such
<script src="js/concat-and-minified.min.js"></script>
This works fine, but I am left with the manual process of ensuring I deploy the correct html page with the deployed script reference, then when interested in local development, I change it back
Surely you can see this is tedious and I think qualifies as an unnecessary step, but I am unable to find a way to achieve this.
So, is there a way to select which <script> tags exist on my html page depending on the environment of the site? Furthermore, is this primarily even an IDE consideration, or am I missing some other factor?
Additional details
Though this is in Visual Studio, the front end project is strictly Angular with a single page html file, so any sort of MVC bundling or .cshtml if/else logic is not applicable

Resources