I work on a very large enterprise web application - and I created a prototype HTML page that is very simple - it is just a list of CSS and JS includes with very little markup. However, it contains a total of 57 CSS includes and 271 javascript includes (crazy right??)
In production these CSS/JS files will be minified and combined in various ways, but for dev purposes I am not going to bother.
The HTML is being served by a simple apache HTTP server and I am hitting it with a URL like this: http://localhost/demo.html and I share this link to others but you must be behind the firewall to access it.
I would like to package up this one HTML file with all referenced JS and CSS files into a ZIP file and share this with others so that all one would need to do is unzip and directly open the HTML file.
I have 2 problems:
The CSS files reference images using URLs like this url(/path/to/image.png) which are not relative, so if you unzip and view the HTML these links will be broken
There are literally thousands of other JS/CSS files/images that are also in these same folders that the demo doesn't use, so just zipping up the entire folder will result in a very bloated zip file
Anyway -
I create these types of demos on a regular basis, is there some easy way to create a ZIP that will:
Have updated CSS files that use relative URLs instead
Only include the JS/CSS that this html references, plus only those images which the specific CSS files reference as well
If I could do this without a bunch of manual work, if it could be automatic somehow, that would be so awesome!
As an example, one CSS file might have the following path and file name.
/ui/demoapp/css/theme.css
In this CSS file you'll find many image references like this one:
url(/ui/common/img/background.png)
I believe for this to work the relative image path should look like this:
url(../../common/img/background.png)
I am going to answer my own question because I have solved the problem for my own purposes. There are 2 options that I have found useful:
Modern browsers have a "Save Page As..." option under the File menu, or in Chrome on the one menu. This, however does not always work properly when the page is generated by javascript
I created my own custom application that can parse out all of the CSS/Javascript resources and transform the CSS references to relative URLs; however, this is not really a good answer for others.
If anyone else is aware of a commonly available utility or something like that which is better than using the browser built in "Save page as..." option - feel free to post another answer.
Related
I want to use a SVG logo in my woocommerce storefront theme. I can't use the Customizer b/c it won't allow SVG uploads. Is there a way around that restriction?
If not, how would I edit the hook/action to use the SVG?
I see the storefront_site_branding template function in the storefront/inc folder and I tried creating an inc folder in the child theme but apparently the override does not work on files within the inc folder.
If you are using a child-theme you can add this to your functions.php, if you update you themes functions.php it may override during your next patch/update.
I sourced this code from:
https://themeisle.com/blog/add-svg-to-wordpress/
Method 1: Use the SVG Support plugin
If you’re looking for the fastest way to add SVG to WordPress, this is it. We’re going to use the SVG Support plugin, which enables this particular image format and adds support for it to your media library:
The process is simple. You just need to install and activate the plugin as usual, and then you’ll be able to add SVGs to your WordPress site.
WordPress now requires us to have the tag in our SVG files before uploading. Please open your SVG file in any code editor (such as sublime text) and add the following to the very first line of your SVG file and save, so that you don’t encounter security errors:
<?xml version="1.0" encoding="utf-8"?>
However, there are two more settings you might want to change depending on your needs. First off, let’s go to the Settings → SVG Support tab:
How to add SVG to WordPress using SVG Support plugin
Inside, you’ll find two options. The first turns on the plugin’s Advanced Mode, which lets you target your SVGs with CSS. If you don’t want to animate your SVGs, then you can skip this option.
Second, you can also restrict the ability to upload SVGs to administrators only by enabling the Restrict to Administrators? feature. That one’s up to you!
Method 2: Modify your site’s functions.php file
Every WordPress website has its own functions.php file. This essential component includes important functions, classes, and filters. It’s also your ticket to adding SVG support to WordPress through a few lines of code.
To reach this file, you’ll need to access your website via FTP. If you don’t have a client, we recommend using FileZilla. Once you’ve found your FTP credentials and accessed your site, you’ll want to head to your root folder, which is usually either called public_html or named after your site:
The WordPress root folder.
Now, enter the wp-includes folder and look for the functions.php file within. It’s important to note that this is the parent file, while there are also individual functions.php files for each of your themes:
The wp-includes folder.
For this example, we’ll add the code to the parent file. However, you may find the changes are lost when WordPress is updated, so feel free to alternatively add it to your theme-specific functions.php file depending on the approach you’re more comfortable with.
(Editor’s note: Doing this in your theme’s functions file is actually the recommended approach.)
Access the functions.php file now by right-clicking on it and choosing the View/Edit option. This will open it using your default text editor. Now, scroll to the bottom and paste this code snippet there:
function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');
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.
Just wondering how/why this works, when I'm making a simple html file and linking in some css, then dragging my html file into the browser, no static web server is needed for me to view the file.
Why is that so..
I'm looking at my browser's network tab, and no request is made for the css file, and my browser still displays it perfectly..
Is there a way to do without a static file server on the web for html, css, js files, like when dragging and dropping a file into a browser?
Just going back and requestionning basics here..
Thanks in advance!
Because the link to your CSS file is relative, and your CSS file is accessible locally. Browsers can be used to access local files, not just files on the Internet.
When working with links, you may see just the name of the file referenced, as such:
Link
This is known as a relative link. file.html is relative to wherever the document is that is linking to it. In this case, the two files would be in the same folder.
There's a second type of link, known as an absolute URL, where the full path is specified.
Consider a typical absolute website link:
Link
With a local file, this would essentially be:
Link
The file protocol can be used to access local files.
Considering both the homepage (presumably index.html) and file.html would live in the same folder on both a web server and your local machine, Link would work for either scenario. In fact, with a relative link, the location of the second file is automatically determined based on the location of the first file. In my example, index.html would live at file://[YOUR WEBSITE]/index.html, so your browser is smart enough to known to look in file://[YOUR WEBSITE]/ when searching for any relative URLs.
Note that the same scenario applies to any other file! <link> and <script> tags will look for files in the exact same way -- that includes your stylesheet :)
Hope this helps!
Sounds like you are new to HTML and web development.
It all has to do with relative versus absolute file paths.
Check out these articles and have fun coding! Always remember that Google is your friend, improve your search-foo and you will not have to ask questions like this.
God speed.
http://www.geeksengine.com/article/absolute-relative-path.html
http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
How to properly reference local resources in HTML?
I am trying to include some images in a Genshi template for my Trac plugin, but it always shows only the alternative text because it cannot find the images.
I have the following (X)HTML code:
<div>
<img src="file://c:/path/to/image.png" alt="asdf" />
</div>
When I use this code with a simple html file and open it in the browser, the image is displayed correctly, which means that both the path and syntax are correct.
But when I insert the code snippet into a Genshi template and use it within Trac, the image cannot be found. However, when I look at the HTML source code in the web browser and copy the URLs into a new browser tab, it is again displayed correctly. This means that only the server cannot find the image.
The images are in a directory inside the python-egg file, and the path points directly to the directory created by Trac, which also contains my CSS and HTML files, both of which are loaded correctly. The images are correctly referenced in the setup script which creates the egg.
How do I have to reference images in (X)HTML documents when using them with a server?
Is there a special way to include images in Genshi documents? (I haven't found one.)
Thanks to the comment of RjOllos and this site I was able to fix it by trying all of the URL types. Although it says for a plugin to be /chrome/<pluginname>, it was actually just /chrome that worked. See the edit below! So the full URL is then <ip>:<port>/chrome/path/to/image.png.
EDIT: I discovered I actually used the /chrome/pluginname version, just that I did not use the name of my plugin as "pluginname". See my comment below. It seems like /chrome/pluginname should actually be /chrome/htdocsnameor something like that, in case you use a different name rather than the plugin name when implementing the ITemplateProvider. In my case I called it images, which was the same name as the folder. END OF EDIT
Another mistake I made was forgetting the initial slash (chrome/path/to/image.png), which caused Trac to assemble the URL to <ip>:<port>/<current page>/chrome/path/to/image.png.
I have a question about file permissions of html - css files served by httpd (on CentOS).
I have a website with several html - php - css files. When a user enters the URL of my website, index.html is displayed as it should. I tried to browse one of my css files (just for fun), and I realized that css source code is displayed in the browser. I do not publish the css files and their exact names of course, but some names (e.g style.css , bootstrap.css etc) are trivial, and one can try and get the styling of my webpage easily.
What is the solution to that? I cannot take off the read permissions of these files, because apache would not style the html files (since it will not be able to read the css).
There's no solution to that, css files must be readable and downloadable. You can minify them if you want them to be less readable (and smaller which is its real use).
Edit: Relevant Answer