I noticed something by accident. When I create a simple AngularDart application, it runs just fine in Chrome and Firefox (not just Dartium). I understood that this would take an extra step to compile but LO! it runs, as is, in Firefox and Chrome. What gives?
main.dart
import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';
void main() {
applicationFactory().run();
}
index.html
<!DOCTYPE html>
<html ng-app>
<head>
<title>Hello, World!</title>
</head>
<body>
<h3>Hello {{name}}!</h3>
Name: <input type="text" ng-model="name">
<script type="application/dart" src="main.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>
DartEditor runs pub serve in the background which serves files to the browser.
When a browser can't process Dart a JavaScript routine is executed which requests the JavaScript source and pub serve transpiles (compiles) on the fly to JavaScript and serves this generated JavaScript to the browser.
So, yes, you need to compile to browsers which don't have native Dart support.
pub build (when run from the CLI runs in release mode by default) in addition to generating JavaScript from Dart also does tree-shaking to remove unused code and minification to make the result JavaScript smaller.
pub serve doesn't do this.
Related
Based on https://forge.autodesk.com/blog/iphone-panorama-forge-viewer example, I am able to use panorama on my iphone. However, when I tried to implement this extension using Forge Viewer v6, it does not work.
How do I implement this feature in v6?
Due to some changes between the versions, the process of overriding the Gamepad behavior is now a little different:
In your HTML, include a <script> tag with the FirstPerson extension, and follow it by another <script> tag with the deviceOrientationExt extension:
<head>
...
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/viewer3D.min.js?v=v6.0"></script>
...
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/extensions/FirstPerson/FirstPerson.js?v=v6.0"></script>
<script src="https://raw.githubusercontent.com/wallabyway/deviceOrientationExt/master/docs/deviceOrientationExt.js"></script>
</head>
And in your JavaScript code, activate the first person tool after loading the FirstPerson extension:
viewer.loadExtension('Autodesk.FirstPerson').then(function() {
viewer.toolController.activateTool('firstperson');
});
I am trying to import the contents (import the reference of the CSS and JavaScript files) of a particular html page, named "helper.html" to another html page,named "navigation.html". It works on the emulator (the reference of the CSS and JavaScript files of the "helper.html" can be imported) but NOT on the device (the device I am using is Android tablet).
My project directory looks like this:
www
-templates
navigation.html (inside templates folder)
-helper.html (inside www)
In my "navigation.html", I have the following code snippet:
<!DOCTYPE html>
<html>
<head>
<link rel="import" href="helper.html">
</head>
<body>
<ion-view view-title="Navigation">
<ion-content>
// SOME CODES
</ion-content>
</ion-view>
</body>
</html>
In my "helper.html", I have the following code snippet:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/pathFindingstyle.css" />
<!-- Some JS files to be loaded, but I am not posting them here-->
</head>
<body >
<div id="draw_area"></div>
<div id="stats"></div>
</body>
</html>
Can someone tell me a way how I could make this work on the android device? Thanks!
Old versions of Cordova for Android (<= 4.4.4) don't use Blink, the Chromium / Chrome web engine, or use an old version of Blink (< 36) that doesn't implement Web Components -including HTML Imports- for HTML rendering.
Therefore you'll need to upgrade Android to version 5+, or to use a more recent device to get a native implementation.
As a workaround, you can try to use the webcomponentsjs polyfill, with the HTMLImports.js file which emulates HTML Imports (though I don't know if it will work on your Android version).
According to http://blog.teamtreehouse.com/introduction-html-imports
To enable HTML imports in Chrome, go to chrome://flags and enable the Enable HTML Imports flag. Once you’re done, click the Relaunch Now button at the bottom of the screen to restart Chrome with support for HTML imports.
But I can't find it in latest version of Google Chrome flags
HTML Imports are implemented natively in Chrome, Opera and Android.
It is still a W3C Working Draft.
For other browsers, you can use:
the webcomponentsjs polyfill,
or directly the file html-imports.min.js from HTML Imports.
Update 2019
HTML Imports won't be supported natively after Chrome 73. You should then use another solutions:
the polyfill,
an alternate module loader,
JS import combined with template literals,
a direct download with fetch().
Update 2020
HTML Imports were definitvely removed.
I found an alternate way to do the same. I put the whole file to be imported,in a string,
then call document.write(theString) .for example
//head.js
var s=
`<meta charset='UTF-8'>
<link rel="stylesheet" href="/Program/assets/css/main.css">
<script src="/Program/assets/js/my.js"></script>
<script src="/Program/libs/highlight/highlight.pack.js"></script>
<link rel='stylesheet' href='/Program/libs/highlight/androidstudio2.css'>
<script src='/Program/assets/js/jquery.3.4.1.js' ></script>
<script>
$('code').each(function() {
var that = $(this);
var html = that.html().trim();
that.empty();
that.text(html);
});
hljs.initHighlightingOnLoad();
</script>
`;
document.write(s);
then I call this newly created script file instead of the main file:
<script src="/Program/head.js"></script>
I am working on a project for school and wanted to use the less library. I tried something like
<link rel="stylesheet/less" type="text/css" href="style.less">
but this didn't work, I got the error
XMLHttpRequest cannot load file:/// [..] /style.less. Cross origin requests are only supported for HTTP.
Meaning I basically need to run a server for this implementation. However, since this is supposed to be a stand-alone project for a non-technical class, running a server is out of the question. So, my question is:
How do I use less at document level, the same way one would write the css equivalent
<style>div{color:#F00}</style>?
Searching the google for "document level less" returned no related results.
You can't use LESS at document level. Less is a pre compiler for CSS, so you should use the end product in your site (css). You don't need a webserver to show html + css local in a webbrowser. You can compile your LESS to CSS client side (by including less.js) or server side, the source code bundles a compiler.
Also read: Is there a way to bypass Javascript / jQuery's same origin policy for local access?
for example the file like below works also when i load it from my local files in a webbrowser:
<html>
<head>
<link rel="stylesheet" media="(max-width: 767px)" href="green.less" />
<link rel="stylesheet" media="(min-width: 768px)" href="red.less" />
<script type="text/javascript">less = { env: 'development' };</script>
<script src="less.js" type="text/javascript"></script>
</head>
<body>
<p>color this text</p>
</body>
</html>
update
When you are sure javascript works and less.js loads and you don't see your styles still, their probably will be an error or typo in your LESS files. If there is an error, your LESS file won't compile, so their will be any CSS and you won't see any styling.
By default less.js don't show errors in the browser. Add <script type="text/javascript">less = { env: 'development' };</script> to your source to allow LESS errors shown in your browser (from: https://stackoverflow.com/a/11289000/1596547).
Example:
I have a layout which loads all my common resources used throughout my app but when I load a page via ajax the gsp itself renders and I can see that the ajax call downloads the js file (via firebug) but the actual code does not get executed.
I have tried the following ways to download and execute the js file from the ajax loaded page with no success. Any help will be appreciated.
Approach used
<r:require modules="announcements" />
<r:layoutResources/>
Result: js file downloaded but not executed
Approach used
<g:javascript library="announcements"/>
with and without
<r:layoutResources/>
Result: File not downloaded
Approach:
<script type="text/javascript" src="js/announcements.js"></script>
Result: http code 302 temporary move and attempt to download of js/static/announcements.js
which gives a http code 200 but firebug shows that it is still waiting for the file and thus it's not executed.
layout.gsp:
<html>
<head>
...
<g:if test="${session.isLoggedIn}">
<r:require modules="ui, jqueryDateFormat, loggedin" />
</g:if>
<g:else>
<r:require modules="ui" />
</g:else>
<r:layoutResources/>
<g:layoutHead />
</head>
...
</html>
ajax loaded page
<html>
<head>
<all methods mentioned above>
...
</head>
<body>
...
</body>
</html>
UPDATE: I resolved the issue. Turns out there was a syntax error in my JS file. Firebug did not identify error, it just stopped because the JS crashed. Had to move the library call to my layout to find the error. Fixed the JS and moved added the line back to the gsp and all worked again.
This is the most correct method.
<script type="text/javascript" src="js/announcements.js"></script>
You should check your webserver configuration if 302 produce 200 but file isn't downloaded