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>
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 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>
I create a web browser in python3 with pygobject (gtk3 and webkit2) and I want create a home page include google. I create a html file with a iframe but I see the error :
Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
How I can set X-Frame-Options ? All the solution in the web is a configuration in a local serveur but I don't have local serveur.
Here is my home page
<!DOCTYPE html>
<html>
<head>
<title>(Nouvelle page)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<iframe src="https://www.google.com/"></iframe>
</body>
</html>
This is not something you can fix locally, unfortunately.
There is a similar question here: https://stackoverflow.com/a/8700754/2773979
The problem isn't that your page is missing that header, it is that Google sets this header precisely to prevent people from embedding the site into an iframe. Browsers comply to this by refusing to load/display the content of the iframe.
Note that there are solutions, like proxying the google page, but those are probably against the terms of service.
I have built a small node server using express and I want to serve index.html which contains angular app. How ever the browser sends GET request for favicon.ico. I have installed serve-favicon, however still it looks for physical file. Is there a way to override it? or from where can I find such file
The recommended way is actually just to use a link tag in your index.html:
<link rel="icon" href="/img/favicon.png">
Just change the href to link to an img in your public folder and you're good to go.
http://www.w3.org/2005/10/howto-favicon
You can use this site to get free favicon.ico
Then add your favorite favicon.ico to your html .
<link rel="icon" type="image/png" href="../images/favicon.ico" />
I'm attempting to use LESS in a tab created via a Chrome extension (chrome.tabs.create), but I'm getting a cross domain error ("NETWORK_ERR: XMLHttpRequest Exception 101"), referring to the LESS JavaScript file. I'm not clear on how to set up the permissions. Adding the LESS JavaScript file to "web_accessible_resources" doesn't seem to help. All other files, such as css and js files load fine. It seems I only receive this error from within the less source. Any ideas?
To explain my setup a bit more, the LESS JavaScript file and .less file are loaded in an HTML file something like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet/less" href="static/css/main.less">
<script src="/static/js/jquery-1.8.2.min.js"></script>
</head>
<body>
Whatever...
</body>
</html>
This html file is loaded in background.js like this:
chrome.browserAction.onClicked.addListener(function() {
chrome.tabs.create({url: 'mypage.html'})
});
The manifest file has permissions for "tabs" and "all urls", and loads background.js.
I'm not sure where you include the client side less.js compiler. See also: http://lesscss.org/#client-side-usage. Less.js is a client-side javascript. It seems the less.js loads from an other URL (domain) than your main.less file. This can be fixed by enabeling CORS, see: http://enable-cors.org/. On the domain where home.less has been installed, the server should send an Access-Control-Allow-Origin: * header.
less.js loads the less files with a XMLHttpRequests which supports CORS for most modern browsers see http://caniuse.com/#search=cors. More details can be found at http://www.html5rocks.com/en/tutorials/cors/
For development use less.js from local folder.
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
for release use any less compiler like lessc.