I have made a web site using Polymer.js and using templates extensively.
The URL endpoint pages have very little on them and import a template that acts as a Master Page, and on each of these i import other element templates for headers, footers, etc.
This allows very quick page construction, and i love how it works.
Its kind of like a client side CMS
But i cant seem to get rid of FOUC !! The page flashes badly.
Body unresolved is meant to work, but its failing miserable.
Can someone have a look and make a suggestion please.
Here is the root on git hub.
https://github.com/bmadmin/bm-www/tree/master/public/project/hempbuild
Polymer's FOUC prevention uses the unresolved attribute, not a class name:
http://www.polymer-project.org/docs/polymer/styling.html#fouc-prevention
Have you tried this?:
<body unresolved>
<polymer-home></polymer-home>
</body>
The other issue I see is that you're using <body> inside polymer-home. However, <body> can only be a child of <html> according to the spec. The browser will discard that <body class="unresolved"> from your element.
Related
I'm developing my app from the backend side. My page is supposed load the css locally. I'm using nodejs, express.js, and ejs(for my pages) - The MEN/MEAN stack.
<link href="../public/stylesheets/style.css" rel="stylesheet" type="text/css">
I'm 100% sure the link is correct since VS Code allows you the check, but I've gotten an error when loading the page up. The error: "The resource from “http://localhost:3000/public/stylesheets/style.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)"
The CSS works fine when I use the style tag instead. What's going on here?
Okay so I solved it. The issue is with Express, it changes the "text/css" part to "text/html". A quick easy workaround would be to remove the "rel=stylesheet" but that can produce mixed results. The best thing is to use app.use(express.static("public")) - this will let express know that the public folder is for styles and scripts.
The link now should look like <link href="stylesheets/style.css" rel="stylesheet" type="text/css"> and it will work.
You should tell express that you have a static assets that you parked all on public folder.
app.use(express.static("public"))
To know more express magic, follow this github repo.
https://github.com/sagormax/node-admin/
Background
I want to stop using Latex for creating documentation and automatic reports for my applications and I would prefer to use html+css that I may later convert to pdf using wkhtml2pdf that allow for adding cover page, table of content, headers, footers, all in A4 separated pages.
wkhtml2pdf is light exe and supports for scripts/css for advanced document pre-processing / formatting. So, so far, so good, it all seems html+css is my best option to replace Latex ...
Issue
In order to ease maintenance and not to put all documentation content in a single file, I had initially thought to organize my local files like this:
doc/index.html
docs/includes/introduction.html
docs/includes/part1.html
docs/includes/part2.html
docs/resources/mystyle.css
docs/resources/jquery-3.1.1.min.js
And write main documentation index.html as follow:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="./resources/jquery-3.1.1.min.js"></script>
<script>
// When document is ready, feed divs with real content
$(document).ready(function()
{
$('#Introduction').load('./resources/introduction.html');
$('#Part1').load('./resources/part1.html');
$('#Part2').load('./resources/part2.html');
});
</script>
</head>
<body>
<div id="Introduction"></div>
<div id="Part1"></div>
<div id="Part2"></div>
</body>
</html>
Unfortunately doing this way, I receive a XMLHttpRequest error basically telling that it cannot load files because cross-origin is only supported for http, data, chrome, https etc... protocols (?? even though all my files are local and main.html was also launched from local file system --so all same origin-- ??).
I tried many workarounds (link rel=import, w3IncludeHTML, use iframe and try to read content) they all fall in cross-origin issue.
Question
Is there an easy/light solution to merge all local html fragments in local main.html file (i.e no external grep or extra tools, just basic html+javascript) ?
NB1: I know I can change flags in chrome browser to allow cross-origin but would like to avoid this. First, for security reason. Second, because I can't do the same when sending files to wkhtml2pdf converter. Third because is not easy to provide documentation as is and say "just click index.html to open documentation in web-browser".
NB2: Documentation fragments is very likely to be just <section>, <p>, <img>, <table> elements all merged in body of main.html managing for css-formatting and other stuff in a single place.
You can get local files in Firefox, using XMLHttpRequest.
It used to work with Chrome, but a "security" restriction has been introduced since 2010 for local files.
Maybe you can suggest to use Firefox to all your customers...
A workaround (for Chrome) could be to load ressources as <script>, and get the content in multiline strings.
In index.html:
<script src="ressource1.js"></script>
...
In ressource1.js:
var fragment1 = `
<section>
HTML content for part 1
</section>`
document.querySelector( '#target1' ).innerHTML = fragment1
Ressources are kept in separate files (in form of JavaScript) and injected in the main HTML document.
Maybe it would be worth to provide an Electron application along with your documentation files to browse it without web server.
Actually it's a node.js web server packed with a chromuim browser. It targets most platfoms and you just need your HTML/JS/CSS skills. By the way you could also integrate a PDF library inside.
I'm new to web front-end programming and am teaching myself AngularJS.
I have created a very simple webapp that just lets users login and logout. I am running it locally on my Mac OSX.
Below is my index.html file. Although it works, I'm not sure if I'm doing it right. I need to know how and where to import the angular.js files and the bootstrap.js files.
My questions are as follows. I haven't been able to figure this stuff out by googling. I need someone to explain this stuff to me please.
I'm currently importing the angular.js file from https://ajax.googleapis.com. Is that correct? Or should I download it and store that file in the same directory as index.html? Why? When should I use the non-minified file? What is the benefit of using non-minified?
I'm currently not importing any bootstrap file(s). Which file(s) should I import? Should I import it/them as a URL or as a file from the same directory as index.html
For both Bootstrap and AngularJS, please tell me which line numbers I should put the script src lines in my HTML.
Should I check the Angular and Bootstrap files into my Github repository?
index.html:
<html ng-app="app">
<head>
</head>
<body ng-controller="Main as main">
<input type="text" ng-model="main.username" placeholder="username">
<br>
<input type="password" ng-model="main.password" placeholder="password">
<br>
<br>
<button ng-click="main.login()" ng-hide="main.isAuthed()">Login</button>
<button ng-click="main.logout()" ng-show="main.isAuthed()">Logout</button>
<br/> {{main.message}}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Normally, you add CSS stylesheets and JS scripts in the <head>(between lines 2 and 3) area of your html. You can either link files with URLs like the example below or just download the whole Angular.js or Bootstrap.css file (both of them aren't that big) and put them in the same folder as your index.html file.
URL/CDN example:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</head>
Local folder example:
<head>
<link rel="stylesheet" href="bootstrap.min.css">
<script type="text/javascript" src="angular.min.js"></script>
</head>
Minified files (angular.js vs angular.min.js) will both run the same way. The only difference is the .min. file has the code all squished without any spaces, tabs, and new lines. This makes it load faster for computers, but if you're going to customize your angular or bootstrap in the future, you will find the squished format impossible to read.
You don't need to be too concerned with doing everything 'the perfect way' if you're just starting out. I used to include the angular.js and bootstrap.css files along with my index.html in my project when I pushed it to Github. After a while though you might find it cleaner to leave them out and just use the URL-format.
Some people will say you should put all your JS files and links at the bottom of your webpage (just before the </body> tag), but again this is just another optimization towards 'perfect' that you shouldn't worry too much about.
This is advise for beginners, if you are an expert this may not apply to you:
I would advice you to have the files locally while you are developing, then your website will work w/o internet, and it will respond faster if you disable cashing (which you should when you are developing)!
You should disable cashing in your browser when you are developing, otherwise when you change your css and js files it will take minus before the browser detects the files have changed
the minimized versions are smaller but unreadable, I would use the none minimized versions while developing so I can understand error messages, and then switch to the minimized version either a) never or b) when speed becomes important
see 1
as a beginner you should but it in the head tag ie between line 2 and 3. sometimes people put it after the body tag to first load the webpage and then the scripts, this is fine also, but as a beginner I think it is advantageous for your webpage to fully work as soon as you can see it.
good question, I would do it out of laziness, alternative you could have a script called get_dependencies.sh where you have lines as "wget stuff"
The usual convention is to put the CSS files in link tags inside your <head> tag (2-3), so that they are rendered before the html and the styles will apply when the content is loaded, so that the user will begin to see the page building up even before it is fully loaded, instead of seeing some not styled elements beforehand.
more on that:What's the difference if I put css file inside <head> or <body>?
now, the scripts should be loaded at the end of the body(where they are now), for the following reasons:
if they will be rendered before most the html, they will delay the page from rendering until the whole script is loaded, and that's a UX hit.
most scripts are supposed to run anyway when the document is fully loaded, sometimes developers will use something like DOMContentLoaded to ensure that, but sometimes they don't and then a script will run without the corresponding html loaded.
more on that :Where should I put <script> tags in HTML markup?
you asked about minification:
minification is supposed to make your files downloaded faster since they are compressed and have less weight. it is ideal for production, but bad for development since you can't debug them well. that's why you should enable minification only on production. (and because you use angular, also use $compileProvider.debugInfoEnabled(false), look for it.)
as for using files in your project (download them) or from cdn (https://ajax.googleapis.com):
a good convention for development is to use files on your project, so that you can develop without caring about your internet connection, and the distance the content need to go between their servers and your machine.
however, on production, a good convention would be using the cdn in your page,
since many other web pages may include the libraries you want to fetch(angular and bootstrap are quite common) so the file has a good chance to be already stored in your browser cache, and not need to be loaded again.
and yet, you should define a fallback in your page such that if the cdn's are some why unavailable, the user will get the files from your project server.
here's an example
for the last question: you can put them in some "Libraryscripts" directory, so that's it's clear they are just dependancies
I've been playing with Polymer recently and finally I think I have my head around the shadow boundary, at least to the extent that I know where I need to include link tags to make my CSS work.
This is fine and dandy but I can't use Google fonts. If I use an #import inside my stylesheet, then as soon as that stylesheet is included in a Polymer custom element I get CORS issues:
XMLHttpRequest cannot load http://fonts.googleapis.com/css?family=Maven+Pro:400,700. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:64000' is therefore not allowed access
There's an XMLHttpRequest involved here, probably because of how Polymer fetches resources and custom elements in the first place, which I suppose is axing the header mentioned in the error message.
However, if I only use the link method
<link href='http://fonts.googleapis.com/css?family=Maven+Pro:400,700' rel='stylesheet' type='text/css'>
This doesn't cross the shadow boundary, and I still don't get my fonts.
Am I missing something obvious? How do I get Google fonts inside the shadow DOM? I tried downloading the zip file from Google Fonts itself but I only got TTF files.
What we typically do with fonts on the Polymer team is to create an HTML import that loads the font(s), and include that import as a dependency in your element's import. This puts the font definitions in the main document (so they can be used by any components) but also guarantees that the fonts will be available in your element's shadow dom.
Here's a quick example: http://jsbin.com/cefawali/1/edit
We do this with the RobotoDraft font. Here's the import: https://github.com/Polymer/font-roboto/blob/master/roboto.html
The other approach is to use no-shim and use #import:
<polymer-element>
<template>
<style no-shim>
#import url('http://fonts.googleapis.com/css?family=Maven+Pro:400,700');
</style>
...
Note There's currently a bug preventing this latter approach from working.
I am learning Symfony2, and I am making small tests.
Well I have made a small html for to test the twig templates.
<html>
<head>
<title>test00</title>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<div id="test">
<img src="test.png" /><br />
test
</div>
</body>
And the files are in the same directory of html.
Then copy all files (html, css and the images) to my test:
/var/www/Symfony/src/Test/TestBundle/Resources/views/Default
And rename the html to html.twig.
But fail when use this html as twig template, because the Symphony try to use "http://localhost/Symfony/web/test.png" as link the image.
And yes, I have read the documentation and know the "asset" and I can change the path to the files with some example
test.png')" /> and also copy all files to the web directory in the budle.
But I wonder "Is there any tool to convert html to twig?" because for example I can't say to my boss:
"The Symfony2 is great. But your designer must to learn Twig and when she finish the html with dreamweaver, she must change all of links to css and images for to make a template...and yes she can't see anything only can send to me to put in the web server to check if it is correct."
What do you hope that my boss will think about Symfony2? He will think this is crazy, this is twice of work.
I think the best it is a automatic tool to translate a html with relative paths to twig and something like that a package files to put in web dir. And the designer does'nt need to know anything only make pretty htmls with few weird things as put {{page_name}} instead the "Page name".
Regards.
From an html coders perspective, Twig is HTML. As long as templating language support is setup on your server, there is no difference between writing twig or HTML. The only difference would be the <h1>{{variables}}<\h1>. Your HTML coders should be aware of what variables they have access to. That being said, from a developers perspective, twig is a lot more so I'm not simplifying twig. But if someone knows HTML, they'll know what to do with twig.
Then copy all files (html, css and the images) to my test:
/var/www/Symfony/src/Test/TestBundle/Resources/views/Default And rename the html to html.twig.
Nope. Your html.twig files need to end up somewhere under views so the template processor can get to them. However, your css and images need to be copied to your root web directory. Same place where app.php lives.
But fail when use this html as twig template, because the Symphony try to use
"http://localhost/Symfony/web/test.png" as link the image.
It's is not symfony generating this link but your web browser. Use Control-U to examine the generated html source from within your browser. You will find that your links such as href="test.css" have not been changed. Twig will not change anything unless it has has some curly brackets around it.
So your designer can continue to use her current workflow and deliver a set of files. You just need to deploy the files to the correct locations.
Of course symfony/twig can do a lot more that simple variable replacements so eventually you might want to change things. But you can get started just fine.