Beautifying HTML with JSP mixed in - html

Does anyone know of an HTML beautifier that can deal with (or at least ignore) JSP? I've searched high and low... I'm not looking for an HTML validator, just something that can format the file decently (i.e. indentation).

Most good IDE's will let you say which code template to use as default within another file extension.
So i use PHPstorm in which i can say, for example that a *.jsp will use html first and then jsp. This way the page will display and reformat my code with the correct spacings and what not.
Worth looking into which IDE you are using, assuming you're using one :)

Related

In HTML, is there a way to find out if a particular string is variable?

Let's say I'm looking at a webpage that has a title including the year, such as "StackOverflow 2016". Is there a way, by inspecting the page source, to find out is this string is variable (function automatically updates it every year), or if it is a hardcoded string?
HTML is for navigator and is the result of a php (or python, etc.) script, so no you can't. (But you can if it is powered by javascript)
There is no way, unless the web site has been specifically coded to make that possible.
I know of one website that does enable marking the variables in its output, but even then, this functionality is turned off for most page requests – it doesn't work unless you explicitly turn it on for that request.
Certainly, there is no standard way in html to notice this.
If it is a string variable it is inserted when the page gets created, so to tell if it's hard coded or not you would have to have access to the file which constructs the page - usually a template or a PHP file, etc.. So no, you can't tell if it was a variable or a plain text just from inspecting the source on the client's side.
With one word: No, you can't...
Different scenarios:
By looking at the HTML alone... no, there is no way. Unless, in your specific case, you refresh the page at NYE or something like that... which is silly.
In the HTML is processed on the server.. there is still no way you can know if it is a hardcoded string or a variable.
There might be a chance to see that by looking at front-end source code if the HTML is processed in the client-side of the app...
You have to undestand that the web page you see is often generated by code that resides on a server, potentially miles away from you. When you ask for a web page you get simply an HTML page, no more.
So, generally, all the methods that generates the data you see on the page cannot be seen client side. Try to imagine what could happen if, let's say, StackOverflow would give you the "power" to see the logic the exists behind web pages of the entire app. You could use these information to do a lot of damage or to steal informations or complex algoritms.
I've said generally because data on web page could be generated by javascript, a client side language that can be used to modify the DOM.
In this case you could see if your string is update by a function.
As far as I'm aware there would be no way to know this as the source you can see will be what is rendered. So there will be no way to know if this was added with php or js etc.

Convert a HTML site into a Wiki

I have a basic HTML site (No JavaScript, PHP or CSS) that I would like to turn into a Wiki. The site has over 1000 pages. I would like the converter to take the contents of each page, and place the content into a its own newly created wiki page. I also need all the links to be converted as well. I would prefer to use MediaWiki, but any wiki software would do.
Does anyone know of a way to do this?
IIRC Reimar Bauer has written some tool to recover MoinMoin 1.9.x contents from html content on archive.org. Maybe you can slightly modify that for your purpose.
But be aware that that was made to convert html that was MADE by moin, maybe rather not arbitrary html. But if you html is simple, it might be worth trying.
Another idea (maybe needing a bit more research and coding) is to use the post url that is used by the gui editor of moin. It expects xhtml there and will try to convert that to moin wiki markup. You can also do a first try interactively by just copy&pasting your html to the gui editor of moin. But be aware that browsers do a sanitizing step (convert html to valid xhtml) that is not present if you just post (not well-formed) html to the post url.

How to locate an HTML file on localhost using Google Developer Tools?

I'm building a website using Wordpress on Localhost. I'm learning the structure of the webpage by editing the HTML and CSS using Google Developer Tools. I want to know which file I'm editing and where on the hard drive it is located.
I have edited the height and width of an element inside the circle marked but when I try to save the file, it asks me for a location to save which I'm unaware of. One the left is the HTML code, how can I locate the file with that HTML code?
how can I locate the file with that HTML code?
You can’t – not really, not from within your browser, because your browser doesn’t see individual “files”, it only sees the complete HTML source code of the one resource it requested, that might have been composed of lots of different files, plus functions that generate HTML code dynamically – so that actual piece of HTML code might not even be written as such within a file.
You might be able to identify different sections of the HTML document though – and with a little knowledge of the template structure and output logic of WordPress, you should be able to find out what the relevant file to look in might most likely be.
Another thing I’d suggest, is that you get yourself an IDE that allows you to search across all files in the whole project folder – and than look for certain class names, IDs etc. on the HTML element in question or near/above it. If you search for those, you might get lucky as well. (Although a lot of times those classes/IDs might be output dynamically as well, so you won’t find them inside of a template file as such.)
Especially with little knowledge of WP template structures, it might take some trial and error to find the piece of code and file you are actually looking for.
The Google Developer Tools is not a code editor, so whilst you can try out different options I'm not aware that you can save it, and if you can, I wouldn't say it's a good idea.
Wordpress uses PHP, a language which HTML code is embedded with PHP code. For example the code <a href='<?php echo(link1);?>'>Home</a> has had the href attribute embedded with a PHP variable. If you want to find the HTML code, look at the PHP files in your Wordpress directory, index.php is the landing page code.
One thing to bear in mind is that not all the HTML code will be included in one PHP file, it is usually included from several files, and much of the content will be in the wp-content directory, keep an eye out for the PHP include or require commands.
Google developer tool is just to check, once you are done with the editing, You have to copy your css code- and paste in your css file.
To get the css file look at the below image.
Hope your question got clarified!!

Parse an in-memory DOM?

I have done HTML parsing. I get a URL, and using Nokogiri I can extract components from the HTML. That is fine.
Now, I am wondering if the following it is possible or it just does not make sense at all:
When we look at a browser, there is a render engine that parses the HTML/CSS/JS and creates a visual representation of it. I am wondering if it is possible to access that in-memory DOM interpretation. So, for example, when parsing an HTML I can find a that is pretty far from the root element, but when rendered it can appear on top of the page (because the CSS says it is absolutely positioned). I would like to be able to get that image as it appears on the browser.
Is there any open source API that would let me access this interpretation of an HTML file or what I am saying does not make sense at all, because what we see it is just that visual objects that can not be treated?
It sounds like you're asking for a headless browser – a rendering engine that works for your code instead of a user.
Look at PhantomJS.

WYSIWYG HTML editor for grails gsp files

Does anyone know about a good HTML editor which can be configured in such a way that it is gsp aware?
What I mean is that at least tags such as <g:link> and <g:input> should be displayed as their html equivalent.
Yes I know: a perfect editor is hard to write and it is easier to edit the HTML sources (that's what I do), but there are people who prefer an HTML editor...
Update: yes, I am looking for a WYSIWYG HTML editor with which I can drag'n'drop some html elements to a page without changing the <g:...> tags which might already be contained in the page. In addition, this editor should have some gsp awareness, so that <g:...> tags are displayed in an appropriate way.
Update: still looking for something, so I started a bounty. What I need is something like this plugin: http://code.google.com/p/grails-form-builder-plugin/ but more evolved...
Bounty: not easy to select the right answer for the bounty. None of the answers is a solution to my problem, but I have decided that rschlachter points me in the right direction: a wysiwyg form editor is not the right solution for a developer...
I think there may be a flaw in the process here. You could build the page first in HTML and make any changes there before putting in any gsp elements. While the page is in HTML format people can continue to use WYSIWYG editors and then developers can add in the grails functionality.
It just seems like if you need/want to use a WYSIWYG editor, you shouldn't be modifying a gsp.
The iterations I prefer to use after I have gathered requirements are:
wireframe
mockup
html
gsp
If the gsps are already there (ie you inherited the project or something) you could go back a step and create an html only version of the page by pulling the gsp elements out and putting in images of them or replacing them with their html equivalents.
the IBM Maqetta Project seems to be going in the right direction:
http://maqetta.org/
Mercury editor might be worth looking at too.
http://jejacks0n.github.com/mercury/
There is one more editor that you might want to look at:
Aloha Editor - http://www.aloha-editor.org/
Orbeon can be an option
http://www.orbeon.com/orbeon/home/
Might be able to do this with TinyMCE by configuring the valid_elements or the extended_valid_elements (docs). For example, if you want to replace <g:link> and <g:input> you would do something like:
tinyMCE.init({
valid_elements : "a/g:link,input/g:input"
});
OR If you want to simply enable the additional elements, then you could do something like:
tinyMCE.init({
extended_valid_elements : "g:link,g:input"
});