I use "pieces" to avoid confusion with the built-in "snippets" functionality.
The scenario is that I am rendering pages server-side in Nodejs, and as part of that I want to code portions of html in files that can be used to assemble an entire page. These are project-specific so the snippets functionality is really not useful here. Problem is if I write an html file that for example only has a section, VSCode tells me there is an error since that file does not start with <DOCTYPE>, etc.
The goal here is reusable pieces instead of duplicating for each page. E.g. define a header.html file that only defines the <header> section, and can then be inserted into each rendered page.
Has anyone done similar? How to tell VSCode to treat as HTML but without demanding a complete document and indicating an error?
Related
I was going over my company's code base, and I saw some file format I have never seen before. They are all ended with .thtml .
What exactly is the .thtml? I was told it is for template files, and every time I view it in vscode I need to choose a language at bottom right corner of the IDE (default was plain text). What is the use of template file in web development? Are they the substitutes of .html files?
HTML templates are HTML files enriched with variables, macros or other logic. They need to be preprocessed to ordinary HTML files before they can be viewed in a broswer. HTML templates are very useful when you want to create a lot of static HTML files sharing the same structure but with different contents.
There are several HTML templating engines out there, of which one happens to be named exactly thtml. (Of course this does not guarantee that it is the one your company uses.)
If the CSS files for your site are referenced in the parent page, obviously you can use those CSS rules and classes in the sub-page or "included" page (like a jsp include or a php include). That will run as expected in the browser. BUT, if you are using an IDE or smart text editor of some kind (I'm using Netbeans), you will get warnings about the CSS elements in the sub-page (a .jspf for example) unless that file has a redundant reference to the css files. Is there a work-around for this? I don't want to have to reference the CSS files in both my jsp and my jspf (jsp include).
One technique I've used is to abandon jspf files in favour of a templating system where if you want to include something from a template, the template is actually a full page of which part is marked to be included. I actually use a home-grown template system for this, but my understanding is that thymeleaf (http://www.thymeleaf.org/) offers the same feature.
Paul Irish gave some amazing insight on web tooling this time during googleio 2013. So he was presenting some slides that had been parsed into html from a markdown source i.e a .md file.
However one thing that surprised me was when he edited the source markdown for the slides in the chrome dev tools sources panel and then hit refresh, the .md automatically compiled again into the html to be output on the browser. Now I understand that the changes he made to the markdown file in the chrome dev tools were made also on his local file saved on the computer, but how did the markdown file automatically get converted into the html file upon save and refreshing the browser?
I am a complete beginner with markdown and I would really like to have this functionality. Any help is deeply appreciated
The whole purpose of markdown is that it is both human readable and machine readable. It is designed to be converted to HTML.
Depending on the language you are using, there are markdown parsers that create HTML for you.
For example, for PHP.
So, as an example, to have your server show the contents of say, homepage.md, your index.php file could have something like this:
$filename = $_GET['file'];
$content = markdown( file_get_contents( "path_to_markdown/{$filename}.md" ) );
print $content;
And, to see it in your browser you would go to example.com/?file=homepage
I will do my best to answer this.
HTML Mark down is a shorthand syntax that can be interpreted by a web browser to format or render the page in html.
this is taken from Stack Overflow.
eg
The syntax is based on the way email programs
usually do quotations. You don't need to hard-wrap
the paragraphs in your blockquotes, but it looks much nicer if you do. Depends how lazy you feel.
So, like converting from a file in notepad ++ from text to html. The file will be formatted using the basic rules of that particular syntax.
It also must be remembered, that programs are not mind readers. If the mark down code is not valid, neither will the corresponding html code. Just as saving a text file that is "supposed" to be formatted in html. It won't save as a working html file if the syntax is incorrect.
Also, markdown is not a total replacement for real code. It cannot cover the breadth and depth of the true coding language. I could liken it to pseudocode, but that is more of a lateral example.
In answer to your latest comment, If a second file is created from a first file (and the format is altered) -( in this case from mark down to html) - If the first file is then edited, without overwriting the changes into the second file, it cannot expect to be altered.
This is a good link a fellow SO gave me:
https://stackoverflow.com/editing-help
Please feel free to edit, if I have made an error.
I haven't tried this extension for Chrome but it seems to automatically render markdown (.md) files in Chrome.
https://chrome.google.com/webstore/detail/markdown-preview/jmchmkecamhbiokiopfpnfgbidieafmd?hl=en
In Firefox, I use the following extension for the same functionality.
https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer/
No need for a separate .html file, just save the text file with .md extension and open it in the browser.
Hope that helps.
I'm new to html and was wondering if there is a way to apply the same content to many html files at once.
For example, if I have many pages, but all those pages have an identical navigation side panel that contains links to all the other pages. Is there any way to change the contents of this side panel without changing it for each individual page?
i.e. is there a feature that allows me to make this navigation panel in a separate file, then tell all my pages to include this navigation file?
I know a css file can control the format of many html pages - is there an analogy to this that can control the content of many html pages?
You can use PHP to do that. Write the HTML code in PHP file, then add include statement in your HTML. This saves you from having to write same code again and again specially for navigation, etc.
PHP manual explains it.
Hope it helps.
You can write the common content in javascript file and include it in your html pages using script tag:
<script src="YOUR_FILE.js"></script>
You can use an online HTML to Javascript converter like this one to generate you javascript code.
Server-side includes or server-side programming languages (like PHP, for example), are often used to do that. All pages just include a shared common file, which contains the common content.
<?php
include(file with extension);
?>
You'd have to change your file extension that runs this code to DOT php
I am relatively new to Web Development, and I am messing with a Joomla template installation.
I managed to get firebug to make changes and Firediff to save them as a new CSS, and replaced the CSS file on the server.
What I would now like to do is edit the template elements, (mostly deleting unused template elements), on screen using firebug, and then save the changes to a new HTML document.
My trouble is that I cannot work out where the correct html is to replace on the server.
Only by using Dreamweaver I can ascertain that the file name is index.html, but there are many files called this on the server.
With the CSS file I was able to identify the server path and filename from the blue text in the right panel of firebug, in order to replace the CSS changes with the output from firediff.
Can I identify the location, (and ideally filename), of hte HTML document in the same sort of way from firebug?
You might want to read the template tutorials before removing anything from the template index.php. In general, you want the template to have provisions for every possibility that you might want. A well designed template will have the ability to display multiple columns in multiple positions as well as other positions to place banners, login boxes, weather widgets, or anything else you can think of. Then you simply code the template so that any position that is not being used does not get added to the final code of the page being displayed.
Official documentation - http://docs.joomla.org/Joomla!_1.5_Template_Tutorial
Once you have a good handle on how the template is supposed to work, the file you will be editing is in JOOMLA/templates/YOUR TEMPLATE/index.php
Be sure you get the whole module positions and collapsible module position thing before stripping anything out. A well thought out template will very rarely need any code editing, virtually everything should be done in the admin and with CSS page class and module class suffixes.