Member Avatar for emaltimuri

Hi All

I have a google code project running at the moment to develop a simple-standards web-based slides show system (code.google.com/p/easyslides)

At the moment there are several .css and .js files as well as images in one folder and a seperate HTML file. I want to be able to provide a single-file solution (maybe through a script) for users and therefore need to somehow combine all these css, javascript and images into the HTML file.

I have looked at around but mostly have found page-optimization solutions - although some of them are really useful its not quite what I am looking for.

Would be great if someone could provide any tips or possible scripts that would help me to solve this problem.

Your help will be very much appreciated.

  • 2 Contributors
  • 3 Replies
  • 2K Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by Drew

Dani AI

Generated

Neat project, . If you truly want a single downloadable file (no zip), you can also fold images into the HTML itself. Use the data: URL scheme, which embeds the bytes of an image (or font, or small file) right in the document. Example use cases: <img src="data:image/png;base64,..."> in markup, or background-image:url(data:image/svg+xml;utf8,...) in CSS. Modern browsers handle this well; the main caveat is legacy IE6/7, which did not support data URLs, so only rely on this if you do not need those browsers. See the basics here: MDN: data URLs and the original spec: RFC 2397. For historical compatibility info, check Can I use: Data URIs.

A lightweight workflow that has worked for slide decks:

  • Concatenate and minify your CSS/JS.
  • Convert small assets (icons, logos) to data URLs and replace their usages in HTML/CSS. Keep very large photos external, or expect ~33% size overhead from base64.
  • Paste the minified CSS/JS into your HTML template and ship a single .html.

Tiny helper to turn a file into a data URL (run: python make_data_url.py path/to/file.png):

# make_data_url.py
import base64, mimetypes, sys
p = sys.argv[1]
mime = mimetypes.guess_type(p)[0] or 'application/octet-stream'
b64 = base64.b64encode(open(p, 'rb').read()).decode('ascii')
print(f'data:{mime};base64,{b64}')

That should get you to a one-file slideshow without any build heavy lifting. If you post a sample HTML/CSS, folks here can help spot places to swap in data URLs cleanly.

Recommended Answers

All 3 Replies

Member Avatar for Drew

Are you wanting a "single file solution" for download, or upload?

You could just zip them up so someone can download a "single file solution".

You can easly add the CSS/Javascript into the HTML file, but there is no way to save the images inside of the html file.

Member Avatar for emaltimuri

Are you wanting a "single file solution" for download, or upload?

You could just zip them up so someone can download a "single file solution".

You can easly add the CSS/Javascript into the HTML file, but there is no way to save the images inside of the html file.

I want a single-file solution for download - at the moment users need to zip all the files - so that all, at least, JS and CSS files are into a single HTML file.

How can I add CSS/JS into a single HTML file? I am quite new to all this

Member Avatar for Drew

CSS goes in style tags and Javascript goes in script tags.

<style type="text/css">
//CSS goes here
</style>

<script type="text/javascript">
//Javascript goes here
</script>

The tags should go in between the HTML "head" tags.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.