the first time I run gulp it will change lets say cb=123 to cb=1607263938392 (this is the new Date().getTime()) but afterwards even I run it hundred times by hand running gulp, it will not change. If I delete a couple of digits it will replace the string again. I noticed that when the digits are exactly 13 it doesn't replace them. I run it by hand without a watch.
const { src, series, parallel, dest, watch } = require('gulp');
const replace = require('gulp-replace');
function replaceHtml() {
var cbString = 'cb='+new Date().getTime();
return src(["index.html"])
.pipe(replace(/cb=\d+/g, function() {
return cbString;
}))
.pipe(dest("."));
}
exports.default = replaceHtml;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css?cb=1607263938392">
</head>
<body>
</body>
</html>
ok, i finally found out that the problem was that vscode did not update the file. it updated only if the characters were less or more than already in the file.
btw I am using vscode 1.51.1 (debian version) on linux.
I did a cat index.html and I show that the file was changing.
it was really driving me nuts!!!
thanks a lot Mark for your reply
Related
I have a simple elmish react project directly from the template and when I run it it loads the public index.html page but nothing else and stucks eternely loading (I presume) the bundle.js from the webpack
I picked the Fable template added the Fable.Elmish.React(nuget), react(npm) and react-dom(npm) packages
App.fs
module App
open Fable.React
open Fable.React.Props
open Elmish
open Elmish.React
open Elmish.ReactNative
type Model = Empty
type Msg = NOP
let init () = Empty, Cmd.ofMsg NOP
let update msg model =
match msg with
NOP -> model, Cmd.ofMsg NOP
let view model dispatch =
div [] [
h1 [] [str "Hello, world!"]
]
Program.mkProgram init update view
|> Program.withReactBatched "container"
|> Program.run
Index.html
<!doctype html>
<html>
<head>
<title>TGG</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script defer src="bundle.js"></script>
</head>
<body>
<div class="container">
</body>
</html>
I ended up finding the answer myself
The problem was on the init function
let init () = Empty, Cmd.ofMsg NOP
There were two problems, the first being that the Empty was refering to a HTML element instead of the mock model i was using to set everything up, the other that is a lesser problem was the part Cmd.ofMsg NOP I should be using Cmd.none instead
I trained a custom object detection model using Google Cloud AutoML and exported the model as a TensorflowJS package.
However, when I try running the model using the HTML deployment example they have here https://cloud.google.com/vision/automl/object-detection/docs/tensorflow-js-tutorial?hl=en_US, it does not seem to work.
My tensorflowjs package from the export (model.json, dict.txt, group1-shard1of3,group1-shard2of3, group1-shard3of3)
are in the same directory as the index.html. I also have an index2.html. In index.html I use the same
imports for tfjs and tfjs-automl as the example here. In the index2.html I use CDN sources for tfjs and tfjs-automl.
The create web app example I followed is : https://github.com/tensorflow/tfjs/blob/master/tfjs-automl/code_snippets/object_detection.html
My repo with my custom object detection model is: https://github.com/mmmwembe/automl-tensorflowjs.git including the tensorflowjs model package and the test-images.
My Index.html file is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cards AutoML Model - TensorflowJS</title>
</head>
<body>
<script src="https://unpkg.com/#tensorflow/tfjs"></script>
<script src="https://unpkg.com/#tensorflow/tfjs-automl"></script>
<img id="test-image" src="test-images/test-image-01.jpg">
<script>
async function run() {
const model = await tf.automl.loadObjectDetection('model.json');
const img = document.getElementById('test-image');
const options = {score: 0.5, iou: 0.5, topk: 20};
const predictions = await model.detect(img, options);
// [END load_and_run_model]
console.log(predictions);
// Show the resulting object on the page.
const pre = document.createElement('pre');
pre.textContent = JSON.stringify(predictions, null, 2);
document.body.append(pre);
}
run();
</script>
</body>
</html>
What am I missing here?...I've run this with Chrome browser using Live Server in vscode editor as well as with nodejs using http-server -p 8000
I have a single page app written using Aurelia. It works great.
However, when I roll out an update, it is sometimes difficult to get the browser to refresh the cached pages, and so it shows an older version.
Have tried, Refreshing the Browser, Control F5.
Have also put this in the heads of index.html
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
But I don't think when system.js fetches individual components that the above would have any effect.
After some more searching, I found this that explains how to cache-bust with SystemJs.
var systemLocate = System.locate;
System.locate = function(load) {
var System = this;
return Promise.resolve(systemLocate.call(this, load)).then(function(address) {
if(address.lastIndexOf("html.js") > -1) return address;
if(address.lastIndexOf("css.js") > -1) return address;
return address + System.cacheBust;
});
};
System.cacheBust = '?bust=' + Date.now();
System.import('aurelia-bootstrapper');
Hello i just started to learn some dart and im new in this forum aswell,
i've created the ubersimple webapp, with webstorm and written a really simple dart script and a html document.
the head of my html doc:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="scaffolded-by" content="https://github.com/google/stagehand">
<title>Das bist du!</title>
<script defer src="http://das-bist-du.com/main.dart" type="application/dart"></script>
<script defer src="http://das-bist-du.com/packages/browser/dart.js"> </script>
</head>
<body>
</body>
</html>
the dart code:
import 'dart:html';
import 'dart:math';
ButtonElement rndButton;
ImageElement rndImage;
var images;
var rng;
void main() {
rndButton = querySelector('#rndButton');
rndImage = querySelector('#imgScreen');
images = ['http://das-bist-du.com/onewebmedia/anN0MBo_700b.jpg', 'http://das-bist-du.com/onewebmedia/du1.jpg', 'http://das-bist-du.com/onewebmedia/du2.jpg', 'http://das-bist-du.com/onewebmedia/du3.jpg', 'http://das-bist-du.com/onewebmedia/du3.jpg', 'http://das-bist-du.com/onewebmedia/du4.jpg', 'http://das-bist-du.com/onewebmedia/du5.jpg', 'http://das-bist-du.com/onewebmedia/du6.jpg'];
rndButton.onClick.listen(pickYou);
}
void pickYou (Event e) {
rng = new Random();
setYou(rng.nextInt((images.length)));
}
void setYou (var rnd) {
print(images[rnd].toString());
rndImage.src = (images[rnd].toString());
}
I know the code is not pretty and all, i was just testing things out. :)
Now i want to use both on a website, i uploaded the html page the code and the dart.js to the website and put the src in the html script tag.
When testing in Webstorm with Chromium it works.
But the script dont run on the website. How can i use dart online on a website?
Thanks in advance
Dart doesn't run in any browser directly except Dartium (the Chomium based Dart development browser that includes the Dart VM).
When you run pub build in your project directory (where the pubspec.yaml is) then you get an output in the build sub-directory that can be uploaded to web servers for public use.
There is also a transformer available that optimizes the script tags when pub build is run. https://pub.dartlang.org/packages/dart_to_js_script_rewriter
I am contemplating moving from Dart to ES6 but Chrome doesn't seem to support the new import statement which is critical to me.
I used the (named export) code from this site: http://www.2ality.com/2014/09/es6-modules-final.html
I tried it even with
<module import="main"><module>
I get the error: "Unexpected token import"
Any information if they will support it before the final release ?
code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>ES6</title>
</head>
<body bgcolor="blue">
<script type="module" src="main.js"></script>
</body>
</html>
main.js
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
lib.js:
export const sqrt = Math.sqrt;
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
It works now, finally in Chrome 60 with the Experimental Web Platform features enabled.
Here is a test:
https://github.com/paulirish/es-modules-todomvc
See here for status news:
https://www.chromestatus.com/features/5365692190687232
Safari Tech Review 19, via WebKit, now supports modules.
https://twitter.com/Constellation/status/806660783312543744
https://webkit.org/status/