I was following the section "How do I use a web component?" from
What are web components?
end very soon I realized that node and npm it's a must. On top of that you have to run node to serve it.
Code
<html>
<head>
<script type="module" src="node_modules/#polymer/paper-button/paper-button.js"></script>
</head>
<body>
<paper-button raised class="indigo">raised</paper-button>
</body>
</html>
What is the simplest - no node - way to run this simple web component?
Disregard everything "Polymer",
better yet... burn it down, throw your coffee over every monitor you see that title.
It was based on the V0 implementation of Web Components;
which basically was Google's lets-throw-something-at-the-wall-and-see-if-other-vendors-adopt-it attempt at forcing Web Components on us.
That whole V0 era is what gave "Web Components" a bad reputation, and catchy blog titles like
"The Broken Promise of Web Components"
(but everyone involved learned what not to do)
Since years, all Browsers vendors work together on V1
Web Components run in all modern Browsers.. period.. so all you need is a Browser..
no built steps.. no bundlers.. no parcel.. no Svelte-compiler... no Rome... no fuss
Use any online editor like JSFiddle or CodePen, or your own IDE, or use your F12 Sources panel
and with a few lines of code you are started
<my-component name="Alex"></my-component>
<script>
customElements.define("my-component", class extends HTMLElement {
connectedCallback() {
this.innerHTML = `<h2>${this.getAttribute("name")} his very first Custom Element!</h2>`;
}
});
</script>
The 3 distinct (each can be used without the other) technologies making up "Web Components" help you built more complex Components
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
Soon you will read about Lit and Hybrids and Stencil and uCe, and all types of tools that make developing Web Components "easier"...
They are just that... tools; You pick one or two once you fully understand the technology
The simplest way would probably be to just include the script via a CDN like UNPKG https://unpkg.com/.
<html>
<head>
<script
type="module"
src="https://unpkg.com/#polymer/paper-button#3.0.1/paper-button.js?module"></script>
</head>
<body>
<paper-button raised class="indigo">raised</paper-button>
</body>
</html>
Related
my website loading time is too much for zendesk chat, when i remove zendesk chat the website loading time under 2 seconds
here is my zendesk code
<script>
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s= d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set._.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");$.src="//v2.zopim.com/?14mOH4BM2323DFADFSAS";z.t=+new Date;$.type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
</script>
To combat this, a common practice is putting your scripts at the bottom of your body, so that the visual aspects of the website load first before the scripts.
For example:
<html>
<body>
<h1>My Website Contents</h1>
<script>console.log('My scripts go down here');</script>
</body>
</html>
I have recently made a chat bot and am seeking to further edit the components of the interface by adding a minimizing button and an anchor so that the Chatbot is statically secured to the bottom right of the page (which is the most common area). This is made with the Azure QnA framework, so I'm not sure how much I can really edit..
Is there any way that I can access the code so that I can minimize the chat bot or add a button?
I will show a photo to make things more clear: minimizing image
The webchat interface that you are using is coming from Microsoft GitHub's project named BotFramework-WebChat available here.
If you look at the documentation provided on GitHub's main page, you will see that you have several ways of implementing your webchat on your website, from the easiest iframe inclusion to more detailed solutions.
If you want to customize your interface, I would suggest an implementation like the following in your hosting page code:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
</head>
<body>
<div id="bot"/>
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
<script>
BotChat.App({
directLine: { secret: direct_line_secret },
user: { id: 'userid' },
bot: { id: 'botid' },
resize: 'detect'
}, document.getElementById("bot"));
</script>
</body>
</html>
Here you are declaring the chat and using js and css files from the CDN.
All the code for the webchat component is in the js, so you should get it, make your customization and host it on your side to have what you want.
From the CDN it is minified, but you can rebuild the file using the process described here: https://github.com/Microsoft/BotFramework-WebChat#building-web-chat
For example an interface that we made from those sources:
For this example, we have customized the header in js to :
add 1 button to maximize
add 1 button to close
Then the image of the buttons is made with CSS
So, I have a html file
<html>
<head>
..headstuff..
</head>
<body>
..bodystuff..
</body>
</html>
This file is included in the package, which I then deploy to my CRM. (rightclick -> deploy)
When I check my deployment, the file is present, and all looks visualy ok.
But when I check the code it now looks like this:
<html>
<head></head>
<body>
..headstuff..
..bodystuff..
</body>
</html>
How is this possible?
I've tried changing stuff in CRM and publishing, and it remains the same. I've also tried it with XrmToolbox with only the desired effect. So I'm suspecting the VS-CRM plugin to have something to do with this.
I've also tried different html's, they all get the same treatment.
I've seen issues with the WYSIWYG editor for web resource reformatting HTML incorrectly. If you're opening the web resource file in the web UI after deploying from VS and allowing the WYSIWYG editor render the content this maybe the issue.
I've started learning Meteor.js and it seems fabulous for single page app. But I only know how to create one page for the entire site.
How can I add a static page to http://domain.com and have my Meteor app run at http://domain.com/app? For your solution, will your page actually change when you go to domain.com/app from domain.com?
Check out meteor-router. It lets you assign routes to templates.
If you dont mind calling a html file you can have static pages in /public. This probably wont work for you, because your page probably isnt actually a "static" page. This would be accessed at http://mydomain.com/index.html .
eg,
/public/index.html :
<html>
<head>
<link href="/public/index.css rel="stylesheet">
</head>
<body>
<h1 class="something"> I am a web page </h1>
</body>
</html>
I have a page where I display some audio .ogg/.mp3-files for listening in the browser (it is purchased products that are being displayed on a "receipt"-page).
The files are super in Chrome, Opera, Safari and Firefox and I can play them, pause, restart and everything.
Today I use a quick fix and forces the browser if IE to simulate IE7 version and then it works, but is of course prtty ugly-looking. I can also skip the <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> and use compatibility view and get same result.
In IE10 Win7 (got latest version) this is displayed and I cannot even press the play-button: http://snag.gy/kANRy.jpg
You can have a look for yourself at: http://energyshop.se/testry.php/
Also, myclient uses an older version of IE and its the same for her.
I can also add that if Ihit f12 and switch to compatibility view of IE10 the audio WILL be working and im able to listen to them - but not as soon as I unclick compatibility view.
This is the code used for the audio (TEST code) (and heres: http://pastebin.com/ENrPj8cx a full code version of my pdt.php):
<!DOCTYPE html>
<html>
<head>
<title>Tack för Ert köp!</title>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<link rel="stylesheet" type="text/css" href='/phpstyles.css' />
</head>
<body>
<?php
echo("<audio id='testry' controls preload='auto'>");
echo("<source src='/1.mp3' />");
echo("<source src='1.mp3' />");
echo("<source src='1.mp3' />");
echo("<source src='/1.mp3' type='audio/mpeg' />");
echo("<source src='1.mp3' type='audio/mpeg' />");
echo("<source src='/1.mp3' type='audio/mp3' />");
echo("<source src='1.mp3' type='audio/mp3' />");
echo("Your browser does not support the audio tag.");
echo("</audio>");
?>
</body>
</html>
and here is my .htaccess: http://pastebin.com/2mz8QwEV
Also, here is my head, meta and doctype for the page (its a pdt.php)
<!DOCTYPE html>
<html>
<head>
<title>Tack för Ert köp!</title>
<link rel="stylesheet" type="text/css" href='/phpstyles.css' />
<script src="http://api.html5media.info/1.1.5/html5media.min.js"></script>
</head>
I know IE9+ supports .mp3 and I have it updated so whats up? Anyone?
ive seen a very similar issue to this one before. specifically dealing with .ogg and .mp3 file types in IE9 + html5 audio.
problem was resolved by tweaking the MIME type declarations in .htaccess file while the filetypes worked in other browsers just fine - IE9 alone was very picky about what it could work with...
going to investigate further - more info soon.
I am curious what is your hosting situation? (win / linux - self hosted / shared?) i initially assumed shared linux because of the php files as this was the most common scenario.
EDIT:
depending on the hosting situation - (you own the hardware / VPS / or are using shared hosting) some people have found their windows based hosting providers web.config files are in fact overwriting their mime type declarations but i was unable to verfiy as my hosting situation is linux based
after a bit of searching i found a few other documented cases of this issue and some other solutions involved:
for shared / hosted sites, this developer converted his mp3 files to .m4a which had working mime types within IE9
additionally if you are interested this Microsoft Developer Network article - details a bit of the reason why IE9 behaves this way
this stack question is similar to your issue on an Apache Tomcat server
Please check which of this formats are supported on IE: http://textopia.org/androidsoundformats.html. You could be able to inspect with the built-in developer tools and see how it's achieved.
Here, Microsoft Offers a Guide to Using HTML5 Audio.
And here about Unlocking the power of HTML5 .
just to add for completeness, add to your audio element the attribute, type and set this as 'mp3' or 'audio/mpeg' not sure which, but at least then you know for sure the page is clearly informing the borwser the type of the resource you are linking to.
If that doesn't work there aren't other options in HTML to define such resources and I would then be looking at support from IE10 as the issue?
I think this is due to your server not sending back the correct content type for the URLs you provide.
http://energyshop.se/testry.php/1.mp3 gives content type:
Content-Type: text/html; charset=UTF-8
http://energyshop.se/1.mp3 gives content type:
Content-Type: application/octet-stream
I see that you posted your .htaccess file at Why doesn't the audio tag work in IE?
You likely have the octet-stream type set to prompt downloads. Try setting it to "audio/mpeg" instead, and only set "/1.mp3" as the source on the audio tag.