I can't find a more appropriate. I'm using PhpStorm to create web content (php, html, css, js..) and I'm facing the problem of long files (not even so long few hundred lines enough to be lost) where it gets hard to find things and remove unnecessary content.
I was wondering if there is a functionality, plugin or external file manager where it creates different files from one file on disk.
For example: when we have a .css file, for sure it's content is dealing with different features/parts of the html but they are all on the same html page. So it's a bad idea to create different .css file for each part, but it would be nice to have different virtual files for each part/feature where we can code and debug separately our code; but they are saved to same file.
Lets say:
common_header.css: deals with headers
common_menu.css: deals with menu (some menu we have on our page)
common_footer.css: deals with what ever to the end of page
... and so on
So now while coding we see different files (best as a subtree of the original file) some thing like that on file manager:
....other file // the dot here should be + since subtree hidden
common.css // the dot here should be - since subtree is shown
common_header.css
common_menu.css
common_footer.css
...
....other file
But when on disk they are all on the same file common.css that is loaded to our browser as one too.
If your target is to reduce the number of files being loaded from your server, after the application has been deployed, you might merge and compress your files as shown here.
In case you don't want to waste computing time to compress the files on each call, you could adjust your build process to generate them once during build (something like minify).
Related
I first met html-minifier today after running a small site I've created using Hugo through Google PageSpeed.
First thing I noticed is that although it does have recursion capabilities it stops working on unsupported files like images (my speakers started beeping and I freaked a little)
I've found this stack showing an apparently undocumented command-line option --file-ext
That worked perfectly but in the output directory, I noticed that the folders with the unmatching contents were gone.
From the directory root, I saw it was Hugo's folders for CSS, JS, images and Github Pages' CNAME file. Not only I can't tell for sure there's not even one piece of static file in any of the folders Hugo generated (you may know that Hugo is sometimes unpredictable) but also I would like to keep language specific XML Sitemaps I've created for some specific folders.
Long story short, is there a way to copy-over unmatching files "as is", keeping input directory ready for a commit/push?
After analyzing the whole directory structure I could be sure that within all the directory structure Hugo creates there are nothing more than HTML and XML files so then the Ockham's Razor took place.
Since both my Hugo's source code and output contents are in totally different directories, it was a simple matter of pointing the output directory to the same path of the input directory.
All HTML files are minified, overwriting those Hugo generated.
Let's say I have a URL http://example.com/path/to/document.html
That's the html document, the file, that has no external css or js.
If I open it in Google Chrome and save it with Ctrl+S locally, the content is changed. The content of that html file starts with <!-- saved from url= which is not I want at all. I need to get the exact html document, even spaces count.
The second option is to copy it with Ctrl+U (View Source), Select All and paste it into new document, save it and rename it. This is better, however spaces, tabs and end of file will be different depending on what operation system I'm using.
I need the exact copy of that html file - byte to byte.
How to make it?
This is a practical question as I need slightly modify that document.
I'm sorry there is no any source code in my question, but this question is about web developing.
Any ideas?
Thank you.
P.S. Of course that document could be generated by php or whatever, the part of the code can be even extracted from the db, but not in my case. I know that's a plain file.
I'd delete the comment after saving from Chrome, use wget in a linux environment, or open the page as an InputStream in Java. Do all three, run a diff, and if two arrived identical assume that's the file on the server.
Why do you need a byte-for-byte copy of the file on the server anyway, and why can't you ftp the file? There is always the chance that the server will serve different html files depending on your user-agent, but there are other tools which may be better than Chrome for getting your copy and many can spoof a user-agent as well.
Currently I have my HTML files marked as Content Resources.
I load them into my WebBrowser WPF control, this works fine.
This is, because I think it is not possible to hold them as resources in the executable (which I would like to do) because relative paths in the HTML file cannot be resolved (e.g. css or scripts).
Is this the only way or am I missing something?
I have the following ideas:
1) I save all the resource into a temporary folder and load them from there
2) I use a callback event (if there is one) when the control tries to load the referenced css/script files to load the file from the resources.
I would like to allow my users to upload HTML content to my AppEngine web app. However if I am using the Blobstore to upload all the files (HTML files, css files, images etc.) this causes a problem as all the links to other files (pages, resources) will not work.
I see two possibilities, but both of them are not very pretty and I would like to avoid using them:
Go over all the links in the html files and change them to the relevant blob key.
Save a mapping between a file and a blob key, catch all the redirections and serve the blobs (could cause problems with same name files).
How can I solve this elegantly without having to go over and change my user's files?
Because app engine is running your content on multiple servers, you are not able to write to the filesystem. What you could do is ask them to upload a zip file containing their html, css, js, images,... The zipfile module from python is available in appengine, so you can unzip these files, and store them individually. This way, you know the directory structure of the zip. This allows you to create a mapping of relative paths to the content in the blobstore. I don't have enough experience with zipfile to write a full example here, I hope someone more experienced can edit my answer, or create a new one with an example.
Saving a mapping is the best option here. You'll need to identify a group of files in some way, since multiple users may upload a file with the same name, then associate unique pathnames with each file in that group. You can use key names to make it a simple datastore get to find the blob associated with a given path. No redirects are required - just use the standard Blobstore serving approach of setting the blobstore header to have App Engine serve the blob to the user.
Another option is to upload a zip, as Frederik suggests. There's no need to unpack and store the files individually, though - you can serve them directly out of the zip in blobstore, as this demo app does.
I have a few HTML files that I'd like to include via tags in my webapp.
Within some of the files, I have pseudo-dynamic code - specially formatted bits of text that, at runtime, I'd like to be resolved to their respective bits of data in a MySQL table.
For instance, the HTML file might include a line that says:
Welcome, [username].
I want this resolved to (via a logged-in user's data):
Welcome, user#domain.com.
This would be simple to do in a JSP file, but requirements dictate that the files will be created by people who know basic HTML, but not JSP. Simple text-tags like this should be easy enough for me to explain to them, however.
I have the code set up to do resolutions like that for strings, but can anyone think of a way to do it across files? I don't actually need to modify the file on disk - just load the content, modify it, and output it w/in the containing JSP file.
I've been playing around with trying to load the files into strings via the apache readFileToString, but I can't figure out how to load files from a specific folder within the webapp's content directory without hardcoding it in and having to worry about it breaking if I deploy to a different system in the future.
but I can't figure out how to load files from a specific folder within the webapp's content directory without hardcoding it in and having to worry about it breaking if I deploy to a different system in the future.
If those files are located in the webcontent, use ServletContext#getRealPath() to convert a relative web path to an absolute disk file system path. This works if the WAR is exploded in the appserver (most does it by default, only Weblogic doesn't do that by default, but this is configureable IIRC). Inside servlets you can obtain the ServletContext by the inherited getServletContext() method.
String relativeWebappURL = "/html/file.html";
String absoluteFilePath = getServletContext().getRealPath(relativeWebappURL);
File file = new File(absoluteFilePath);
// ...
Alternatively, you can put it in the classpath of the webapplication and make use of ClassLoader#getResource():
String relativeClasspathURL = "/html/file.html";
URL absoluteClasspathURL = Thread.currentThread().getContextClassLoader().getResource(relativeClasspathURL);
File file = new File(absoluteClasspathURL.toURI());
// ...
As to the complete picture, I question if you have ever considered an existing templating framework like Freemarker or Velocity to ease all the job?