Is there some way to change mod_autoindex so that whenever a file of image types (jpg, png, etc.) or audio (mp3, ogg) it either opens one of those little embedded windows and shows the image or uses a flash or HTML5 based audio player to play the file. I know this module has many options for customization, but I can't figure out what code it uses to generate the file list.
Short Answer
Yes, there are several ways how to do this. Which one is right for you depends on your personal needs and skill-set. Your options are to either edit the C source code and create your own Apache Module, or to add extra functionality by declaring either a Client Side or Server Side script to be used as (or included from) the header of the index file.
Long Answer
Edit the Source Code
The only way to actually change the list, which is also the hardest option, would be to edit the source code and compile your own Apache Module. The HTML code for each file is put together on line 1852 in the mod_autoindex.c file. If you don't know C or if the code looks too daunting for you, there is no way to change the list directly.
You can, however, change the list indirectly by adding (either server side or client side) functionality to the index header or footer file.
Which brings us to easier options.
Add Server Side Functionality
Although you can't alter the list, you can make additions by having a server-side script that scans the directory you are browsing and adding thumbnails/previews for certain files. You could even hide the original list entirely with CSS and have the server side script build your own custom list.
Of course, you would have to be able to program Python/Perl/Ruby/PHP/etc. to do this.
I took a stab at this in PHP a while ago (mostly as an exercise) in my Apache Directory List Theming project. It doesn't do anything other than show a list of thumbnails for all of the images and PDF files in a given directory. (It's also not very sophisticated).
If you would also like to add previews for audio and/or video files, and you would like these previews to be present in the list generated by Apache, you're probably better of with a client side solution.
Add Client Side Functionality
By adding Javascript functionality, you could parse the list and for each file that is of interest to you insert a preview into the list. The prettyAutoIndex project does this. I haven't personally used it but it looks, well, pretty :-) It doesn't seem to be actively developed, but if it works it doesn't really have to be.
If its not what you want and you can code in Javascript, it shouldn't be too difficult to create something by yourself.
Wrapping up
If you decide to create a server or client side solution, it shouldn't be much more complicated than creating a file with some functionality and calling it from your Apache Config with headername:
<IfModule mod_autoindex.c>
HeaderName /path/to/header.file
</IfModule>
Unfortunately there are some gotchas, so I would suggest taking the time to read the relevant parts of the mod_autoindex manual.
Related
right now in my footer I have 2 .js files ( jquery.min.js - myjs.js ).
So, by considering that myjs.js is a very small file 5kb can I copy this code into the jquery.min.js file to reduce 1 request?
What is better bewtween: Leave 2 files, inline myjs.js or merge this 2 files?
Thank you
As said, you can add your code to the jQuery file, however I would not recommend doing so.
Having two separate files allows you to more easily expand, debug, and modify your own code. It would also help others looking at your site (as well as you future self) understand what's going on; alljs.js is opaque compared to appjs.js and jQuery.js. Additionally, updating jQuery in future, should you want to, is much easier if jQuery isn't mixed in with your own code. And having two separate files allows the browser to cache them independently.
If you would like to only have one JS file, including your small Javascript inline is a better option. However, I would much sooner recommend other optimizations, like setting up a build process to minimize your JS and deploy it to a dedicated production server.
Yes, provided that you host the file you can modify it however you want to - after all it's basically a text file with a file .js extension. Simply open it with a text editor (or your IDE), and add your JavaScript to the bottom. Don't delete their licensing or comments though out of respect for property rights.
Better to serve 1 file for performance purposes. The establishment of the TCP link (the pipe) to fetch the second file is not insignificant. Another option is to put that other javascript in the HTML file, in a <script> tag just before the close of your <body> tag.
I need to regularly send html pages to a client as standalone .html files with no external dependencies. The original pages are done with node.js and express and they contains several librairies such as High Charts.
I have done the preparation manually until now, this includes:
Transform all images into blobs
Copy all external .js and .cs inside the page
Minimize where possible (standards librairies such as jQuery or Bootstrap...)
The result is a single .html file that can be opened without an internet connection and looks just like the original.
Is there any tool to do this automatically? If not, maybe I'll code it myself in Python. Do you have any recommendation around that?
Thanks
Monolith is a CLI tool for saving complete web pages as a single HTML file
See https://github.com/Y2Z/monolith
With apologies to OP, as this answer is probably far too late for him, but I'm posting it to help anyone with a similar problem:
HTTrack is an open-source project that does almost exactly what you described, though it doesn't work perfectly on some of the more peculiar JS.
It saves the page with most of the JS, the major images, and everything that the page needs to appear complete. It can be configured to include or exclude the entire or partial JS, images, and CSS.
This does not import all of the JS and other content into the HTML file, but neatly organizes all of the content into one folder and corrects all of the paths to make the folder portable.
It also seems to have trouble grabbing some external sources that are protected, but if it is your local site and simply uses common scripts like JQuery, you should be fine. When I tested it, it correctly downloaded all of my local CSS and any valid external CSS library that I incorporated, the JQuery and derivative scripts that I was using, and the embedded images.
Just to save everyone a question, the program by default saves the downloaded websites to C:\My Web Sites.
I am transferring a PHP framework to JavaScript. In PHP, I have one file per class and so when transferring it over, I am also creating one file per JavaScript class.
However, unlike with PHP, with so many JavaScript files, this will reduce the loading time of my page (I plan to have 30+ classes).
I like to have one class per page simply because when developing it is easier to navigate around my framework.
What is the best approach to keep this ease of development yet not have so many javascript files that the HTML page has to load?
There are server-side tools that allow you to automatically combine JavaScript/CSS files into one HTTP request.
e.g.
minify
You could also do this manually when bringing code into production. However I assume that's not something that you would want to do with 30+ files (however for people with only a few, this is a relatively simple solution).
You should make sure all of your JS files are packed/minified to make their file size as small as possible. And also make sure your server is gzip'ing everything so the data it's sending is compressed.
Finally, you should make sure these types of files are cached properly by the browser. You can easily accomplish this by adding a version number to the end of these files and changing the expires header to be far into hte future.
I'm stuck in a bit of dilemma on how to get around this and was hoping someone would point me in the right direction.
I am trying to cut down on the size of css and javascript files to improve our website's performance. But the problem is, on deployment, we simply upload our current svn repository's latest development version onto the server.
I am finding it hard to add that extra step for every developer to minify files before every change, as it adds a risk for negligence and human error.
I was thinking about having the readable version of files on the server anyway, but having some kind of file monitor that will execute a minifier when a file is changed, and update the file used by the website. Has anyone implemented this before?
EDIT
We're currently running on ASP.Net 2.0, Windows Server 2003
If you are using .net on the server, you could also try RequestReduce available on Nuget. It minies and bundles your css and js and also sprites css background images. It does it on the fly so your devs don't have to do this as an extra step. As long as you have some kind of versioning in place that changes the css/js url when it is changed, RequestReduce will automatically detect the change and process the file. It does all of this in the background and there fore does not affect the response time. If the files are not versioned via the url, RequestProduce provides a dashboard where you can flush its cache. RequestReduce can be deployed with absolutely no code changes and hardly any config in most use cases.
If you are using ASP.NET, try MBCompression library - it minify files automatically and you don't need do it manually:
I have had some thoughts recently on how to handle shared javascript and css files across a web application.
In a current web application that I am working on, I got quite a large number of different javascripts and css files that are placed in an folder on the server. Some of the files are reused, while others are not.
In a production site, it's quite stupid to have a high number of HTTP requests and many kilobytes of unnecessary javascript and redundant css being loaded. The solution to that is of course to create one big bundled file per page that only contains the necessary information, which then is minimized and sent compressed (GZIP) to the client.
There's no worries to create a bundle of javascript files and minimize them manually if you were going to do it once, but since the app is continuously maintained and things do change and develop, it quite soon becomes a headache to do this manually while pushing out new updates that features changes to javascripts and/or css files to production.
What's a good approach to handle this? How do you handle this in your application?
I built a library, Combres, that does exactly that, i.e. minify, combine etc. It also automatically detects changes to both local and remote JS/CSS files and push the latest to the browser. It's free & open-source. Check this article out for an introduction to Combres.
I am dealing with the exact same issue on a site I am launching.
I recently found out about a project named SquishIt (see on GitHub). It is built for the Asp.net framework. If you aren't using asp.net, you can still learn about the principles behind what he's doing here.
SquishIt allows you to create named "bundles" of files and then to render those combined and minified file bundles throughout the site.
CSS files can be categorized and partitioned to logical parts (like common, print, vs.) and then you can use CSS's import feature to successfully load the CSS files. Reusing of these small files also makes it possible to use client side caching.
When it comes to Javascript, i think you can solve this problem at server side, multiple script files added to the page, you can also dynamically generate the script file server side but for client side caching to work, these parts should have different and static addresses.
I wrote an ASP.NET handler some time ago that combines, compresses/minifies, gzips, and caches the raw CSS and Javascript source code files on demand. To bring in three CSS files, for example, it would look like this in the markup...
<link rel="stylesheet" type="text/css"
href="/getcss.axd?files=main;theme2;contact" />
The getcss.axd handler reads in the query string and determines which files it needs to read in and minify (in this case, it would look for files called main.css, theme2.css, and contact.css). When it's done reading in the file and compressing it, it stores the big minified string in server-side cache (RAM) for a few hours. It always looks in cache first so that on subsequent requests it does not have to re-compress.
I love this solution because...
It reduces the number of requests as much as possible
No additional steps are required for deployment
It is very easy to maintain
Only down-side is that all the style/script code will eventually be stored within server memory. But RAM is so cheap nowadays that it is not as big of a deal as it used to be.
Also, one thing worth mentioning, make sure that the query string is not succeptible to any harmful path manipulation (only allow A-Z and 0-9).
What you are talking about is called minification.
There are many libraries and helpers for different platforms and languages to help with this. As you did not post what you are using, I can't really point you towards something more relevant to yourself.
Here is one project on google code - minify.
Here is an example of a .NET Http handler that does all of this on the fly.