I was developing AMP Ad as advertiser. I tested the sample amp4ads provided by ampByExample.com (official starter codes)
https://ampbyexample.com/amp-ads/introduction/hello_world/
I found amp4ads is not VALIDATED by official validator (link below)
https://validator.ampproject.org/
here is the sample snippet you can test it on validator
<html ⚡4ads>
<head>
<meta charset="utf-8">
<title> Hello World</title>
<script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp4ads-boilerplate>body{visibility:hidden}</style>
<style amp-custom>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
It throws a lot of errors. Can anyone help me fix this issue, I couldn't find anything related.
Thanks
Unfortunately, validator.ampproject.org does not support AMP Ads. If you open the page in the AMP Playground you'll see that it's valid: https://ampbyexample.com/playground/#url=https%3A%2F%2Fampbyexample.com%2Famp-ads%2Fintroduction%2Fhello_world%2Fsource%2F&runtime=amp4ads.
Related
I have a spring boot app that generates a pdf with itext,
I'm trying to add a map when generating it.
I didn't find any way to add the leaflet.
my example:
<!DOCTYPE html>
<html xmlns:th="http://www.springframework.org/schema/mvc">
<head>
<title>Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="mapid" style="width: 100%; height: 750px;"></div>
<script th:inline="javascript">
var mymap = L.map('mapid').setView([0, 0], 4);
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Corona Virus'
}).addTo(mymap);
</script>
</body>
</html>
any suggestion?
as far as I know, it is not possible to save as pdf the result of the javascript code. I suggest that you look how to get the map as an image and then you can pass the url of that image (or base64 encoding) to your template and convert to pdf.
Check example usages: http://sampleserver1.arcgisonline.com/arcgis/sdk/rest/export.html
Could someone share some examples on how to implement API Documentation using ReDoc along with SpringBoot framework. It would be great help if someone knows some good examples with ReDoc + Springboot.
You can create a spring boot application enabling springdoc-openapi-ui [1] and then add a static html [2] as shown in here! by changing spec-url as http://localhost:8080/v3/api-docs [3]
[1] : https://www.baeldung.com/spring-rest-openapi-documentation
[2] : https://stackoverflow.com/a/42393332/878710
[3] :
<!DOCTYPE html>
<html>
<head>
<title>Redoc</title>
<!-- needed for adaptive design -->
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">
<!--
Redoc doesn't change outer page styles
-->
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<redoc spec-url='http://localhost:8080/v3/api-docs'></redoc>
<script src="https://cdn.jsdelivr.net/npm/redoc#latest/bundles/redoc.standalone.js"> </script>
</body>
</html>
I'm trying to get a very basic d3 visualization working, but all I get is a blank browser window.
Here's my index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="code.js"></script>
<title>My Title</title>
</head>
<body>
<div class="container"></div>
</body>
</html>
Here's my code.js:
console.log("test");
d3.select("body").append("h1").html("Here are some words")
My console prints test. But nothing appears in the browser window. When I inspect element, nothing has been added.
I've tried loading the localhost page via python -m SimpleHTTPServer and via npm install -g http-server plus http-server &.
What's going wrong?
you need to change your HTML code for the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<title>My Title</title>
</head>
<body>
<div class="container"></div>
<script type="text/javascript" src="code.js"></script>
</body>
</html>
I just put the line which reference the "code.js" inside the body tags
I'm seeing an issue where I can see the bound 'test' value appear on the demo page on Chrome but not in Firefox. I'm already including the polyfills (webcomponents-lite.js) so I'm really not sure what's missing. Any ideas?? Thank you in advance.
ticket-item demo page
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>ticket-item demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../iron-ajax/iron-ajax.html">
<link rel="import" href="../ticket-item.html">
<script>
window.addEventListener('WebComponentsReady', function() {
let element = document.getElementById('ticket-item');
element.test = 'test';
});
</script>
</head>
<body>
<div class="vertical-section-container centered">
<h3>Basic ticket-item demo</h3>
<demo-snippet>
<template>
<ticket-item id="ticket-item"></ticket-item>
</template>
</demo-snippet>
</div>
</body>
</html>
ticket-item element
<dom-module id="ticket-item">
<template>
<style include="my-theme">
:host {
display: block;
}
</style>
<div>test: [[test]]</div>
</template>
<script>
class TicketItem extends Polymer.Element {
static get is() { return 'TicketItem'; }
static get properties() {
return {
test: String
};
}
}
window.customElements.define(TicketItem.is, TicketItem);
</script>
</dom-module>
The first thing:
Custom element names. By specification, the custom element's name must start with a lower-case ASCII letter and must contain a dash (-). There's also a short list of prohibited element names that match existing names. For details, see the Custom elements core concepts section in the HTML specification.
So, you must change the name of "item" element.
Instead of loading the webcomponents-lite.js directly, load webcomponents-loader.js (a client-side loader that dynamically loads the minimum polyfill bundle, using feature detection), that will do the rest.
Plnkr link: works both in Firefox and Chrome.
The problem was that I named my component 'ticket-item' and the id was set to 'ticket-item'. It apparently needs to be something different from 'ticket-item'. I change the id to 'item' and now I'm seeing the binding.
Below is the code . This is working fine on IE8 and Chrome , But on Firefox upto version 8 I am having a problem .
Issue :- On Firefox it just displays some advertisements instead of the actual content .
Could some one help me on this ? Thanks for your help.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#container{
overflow:hidden;
}
#container iframe {
width:1000px;
height:930x;
margin-left:-680px;
margin-top:-230px;
border:0;
}
-->
</style>
</head>
<body >
<div id="container">
<iframe src="http://www.tsn.ca/" scrolling="no" height="930"></iframe>
</div>
</body>
</html>
Try using the same charset used by iframe, which is utf-8