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.
Related
How do I convert an HTML file with content folder to a self-contained HTML file which can be viewed from anywhere with its images etc.
How can it be done so that it's also editable and stays self-contained, post-edit?
I basically need to make HTML file based documentation which can be viewed from anywhere. Unfortunately it HAS to be HTML, otherwise I would have made PDFs
You can use pandoc, it has an option to create self-contained html files https://pandoc.org/MANUAL.html#option--self-contained.
If you start with html, this is the command.
pandoc in.html --self-contained -o out.html
This tool can do a lot more things, for example, you can also generate html from markdown files or generate pdfs instead.
The most direct way is to convert all asset urls to data: urls. (There are online coverters available that will take a provided asset and produce a data: url from it.)
A possibly simpler way is to convert image and font urls to data: urls while instead inlining scripts and css.
Edit: Possibly of interest: inliner, a Node utility for doing this kind of thing. "Turns your web page to a single HTML file with everything inlined". Also performs a number of minifying optimizations.
I don't know exactly what you're envisioning, but HTML was never meant to be fully self-contained. There may be some loopholes that allow it in the end, but to my knowledge there are no premade tools that do this 'conversion'.
It would require the following things:
Converting all linked style sheets and scripts to inline style sheets and scripts. This means that whenever there's a <script src="http://url.to/foo.js"></script> you'll have to download foo.js and include it as such: <script type="text/javascript"> [this is the content of foo.js] </script>. Something similar applies to CSS and other linked source files.
Downloading all linked media (images mostly, I presume) and converting them to blobs (a service that provides you with a base64 blob you can use within a HTML file is https://www.base64-image.de/). This means replacing <img src="http://url.to/image.jpg" /> with <img src="data:image/png;base64,[converted image data goes here] />.
So there's gonna be some manual labour involved there, but it probably can be done (almost) fully.
Possibly there's a way to accomplish what you're wanting to do another way though, what exactly is your reason for wanting this?
Here's another option: write your documentation in markup, then use a tool such as "Marked 2" (http://marked2app.com) to convert to self-contained html. Works slick. Plus you can go back and edit the markup any time you need to update your documentation, then simply re-export your html file.
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 am a beginner with node.js and am using express with the ejs layout, and I want to know how to get rid of the .html extension when putting up a page. For example if I go to my localhost:3000/about.html - that works but I want it to show up as just /about. Also, having trouble figuring out how to change the favicon if anyone knows how to quickly change that from the express default.
Any help would be great thanks.
(I realise this question is old, but it appears high in Google search results, and the accepted answer isn't the best solution.)
The best solution for serving up static content in express.js is express.static. To avoid having to specify file extensions in URLs you can configure it with a list of default file extensions that it will use when searching for static files:
app.use(express.static(pathToBaseFolderOfStaticContent, {
extensions: ['html', 'htm'],
... // Other options here
}));
This will serve up pathToBaseFolderOfStaticContent/somePage.html or pathToBaseFolderOfStaticContent/somePage.htm in response to a GET request to http://www.example.com/somePage, which is what you want. For example, if you visit https://arcade.ly/star-castle, the file it serves up is just a static file called star-castle.html. I haven't had to add any special routing for this, or any other static file - it's all just handled by express.static.
I only need to add specific routes for content that requires active work on the server to return. A big advantage here is that I can use a CDN to cache more of my content (or nginx if I were running an internal line of business app), thus reducing load on my server.
You can obviously configure as many default file extensions as you like, although I'd tend to keep the list short. I only use it for resources where the URL is likely to appear in the address bar, which generally means HTML files, although not always.
Have a look at the following documentation on serving static content with express.js:
http://expressjs.com/en/starter/static-files.html
http://expressjs.com/en/4x/api.html (the express.static documentation is at the top)
This is also answered at In express what is the common way to associate a default file extension with static content requests?.
The favicon.ico issue can be solved by dropping your favicon into the root folder from which you serve static content, as well as implementing +Costa's solution where you reference it using a <link> in the <head> of your documents.
In theory you shouldn't need to do put the favicon in the root folder but, in practice, some browsers will still ask for it from the site root even though it's referenced in the <head> of your document. This leads to a spurious 404 error that you'll be able to see in client side debugging tools (e.g., Chrome dev tools).
The Favicon issue is usually a caching problem. As long as you have this code in your base html layout:
<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico">
Then just navigate to wherever that image is with your browser, and that should force your cache to update.
I figured it out. I looked at this post Render basic HTML view? which solved the problem I was having.
app.engine('html', require('ejs').renderFile);
app.get('/', function(req, res){
res.render("index.html");
});
And this all goes in the app.js or whatever file you are running.
Any idea why when putting the example html files included on meteor's site in to an HTML 5 template with top level tags fails?
<!DOCTYPE html>
<html lang="en">
I see that they search for body/template tags etc and concatenate but not sure how to add the other tags then.
The '.html' file you're editing as part of your Meteor application isn't an HTML file at all, but a DSL (domain specific language) that is parsed by Meteor as HTML.
As soon as you run meteor to launch a server or deploy it, it will be parsed and interpreted, and all documents will be output as HTML5 (using the ).
You can see that on any deployed meteor app, that is the first line, even though entering it in to your '.html' file in the project will cause the compiler to crash.
I was confused by this at first as well, apparently the '.html' example files they include are intended to consist of html fragments rather than serving as html documents in and of themselves. According to the docs:
HTML files in a Meteor application are treated quite a bit differently
from a server-side framework. Meteor scans all the HTML files in your
directory for three top-level elements: <head>, <body>, and
<template>. The head and body sections are seperately concatenated
into a single head and body, which are transmitted to the client on
initial page load.
As far as I can tell, any html that is included that isn't contained within any of those three tags -- including <!doctype html> declarations, <html> tags or even <!--html comments--> -- causes the app to crash. Hopefully that's something that they'll fix eventually.
When the server is started and you access the page it automatically adds the DOCTYPE in.
I'm trying to include an html file within another html file. the include acts as a menu and footer. i'm using the current include syntax but my html data is not displaying on the page. my include files sit at the root. i've tried:
<!--#include virtual="header.html" -->
<!--#include file="navigation.html"-->
<html>
<head>
<title>test</title>
</head>
<body>
<!--#include virtual="header.html" -->
<!--#include virtual="navigation.html"-->
<p>test<p>
<!--#include virtual="footer.html"-->
</body>
</html>
Check if your server has server-side includes (SSIs) enabled.
edit: Also, you should remove the first set of includes that come before the html tag - that's invalid.
Apache webserver? Do you have "mod_include" enabled? Do you have either in .htaccess or httpd.conf the setting "Options +Includes" set?
Includes are server side, you'll need to save the main file as an .asp file and work with it on a server (assuming your server is ASP enabled, your syntax certainly makes that look as if it's the case).
a lot of info lays here: http://www.boutell.com/newfaq/creating/include.html, if it runs in the server i would go for <?php include("filename.html"); ?> since most of the servers also have php, if not you can always use .js
P.S. i won't mentions html possible problems since other answers i think mentioned all i know...
The Netscape Navigator frames extension (cf. Wikipedia's Framing article) and its successors allow you to write HTML pages that reference other pages for inclusion. The browser then assembles the viewed page by making multiple HTTP requests. Note:
It's a horrible way to serve up webpages: there's no well-behaved document model for it. But it is fairly well supported by browsers. So this answer is for information's sake, not a recommendation; and
It creates viewed pages by juxtaposition, not inclusion, so it's not really what you were after, semantically speaking. But you can use it to solve your problem: the menu and footer bars are mini HTML pages that sit next to the page containing the main content.