I am wondering how to get my code to output cleanly? Almost all the time when I visit a site I will view page source to see whats under the hood. Often, but not all the time, the source will look nice and clean with good indents. If I just code a plain html page and view it, it will keep the indents and look good. However, when I start inserting php tags and view the source, indents get all messed up.
I’d like to know what others are doing in respect to making the code look good when its source is viewed from the browser and is it even possible.
My editor is Sublime Text and I use the Beautify HTML package.
If it’s important to you, you need to put all PHP tags at the start of the line. If you indent PHP code outside of the PHP tags, that indentation will be kept in the output.
I for myself have stopped caring about this. More important is to have clean source code in your PHP files. How the resulting HTML looks isn’t really important (web inspector DOM views have a cleaner layout anyway).
Thank you!! I’m going with your advice. The source code should be clean while the resulting html isn’t as important! I was driving myself crazy with this.
@lukasbestle’s advice is sound. Indentation in HTML carries no information and, unless it’s an element with white-space: pre;, it won’t get rendered. For most HTML elements the only difference is between no whitespace at all between tags (…</li><li>…) and at least one whitespace character (…</li> <li>…). That whitespace can be rendered as one single space character in some situations (if the elements are display: inline or display:inline-block, mostly).
You should use indentation that makes your source code readable. I tend to go back to zero indentation for every source file, so for instance I can have a main template like this:
<header>
Content A …
<?php if ($someCondition): ?>
Content B …
<?php endif ?>
</header>
I don’t try to make the header appear with two levels of indentation in the end result (the final HTML page) or to make Content B appear with the same indentation as Content A just because they are siblings in the DOM. It would be a lot of effort for no gain, and at the cost of the clarity of the actual source files.
But with a lot of includes, logic and loops you can end up with an awful lot of useless white space (like series of empty lines, dozens of indents in a row, etc.). It’s not too bad with Kirby, but with some other CMSes (and devs ) I’ve worked with, it can produce awful results and waste many bytes.
That’s why at some point I tried writing an efficient PHP function that removes whitespace at the start of lines and inside lines: https://github.com/fvsch/php-trim-whitespace
I haven’t used it much yet, but it was fun to write.
+1 for the “reset indentation for every snippet” approach. I have been indenting everything relative to each other at the beginning and it’s a mess.
Regarding minifiers/whitespace removal: Those operations take some time themselves. It doesn’t matter if you use caching and probably also not if you don’t, but it should be tested in each situation if minification improves the performance or not.
Yup, and if you use gzip compression of HTML responses (with mod_deflate or similar), which you probably should, the difference between the trimmed and untrimmed HTML becomes quite small.
If your site is served by Apache, you should probably have something like that in your .htaccess:
Note: adding the gzip compression step to HTTP responses has a CPU cost but it’s really small and on virtually any server or website it should be perfectly okay.
And + another one for that. I also treat each file separately when it comes to indentation. Everything else just does not make sense. Also, if you reuse code, you never now where it starts in relation to the rest of the code.
I don’t care at all what the rendered HTML looks like, the important goal should be to make the source code readable.
) I’ve worked with, it can produce awful results and waste many bytes.