Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
How do I hide some html block from anonymous users who visit my application. I don't use any templating engine. My back end is in node.js .
What would be the best way to implement this?
if (loggedin)
<div id="logged-in">
Some menus for Loggedin User
</div>
else
<div id="anonymous">
Some menus for Anonymous user
</div>
You should use a templating engine.
Should you not want to do that, you can build a function that reads whether or not the user is in a session, then either prints/includes a dynamic version of the HTML (header, body, div or whatever you need) with the user specific data for logged in users, or prints/includes a generic version of the HTML (header, body, div or whatever you need) for logged out users
As others note, a templating engine is most likely the best choice. This is exactly the kind of problem they were designed to solve. Furthermore, introducing one now while the logic is simple will be less painful than introducing one later when an ad hoc solution becomes too cumbersome. (An ad hoc solution is probably going to be cumbersome to begin with, actually.)
However, one other potential solution would be to use 2 different HTML files and let your function choose which one to send the user based on whether they are logged in. This is only really feasible if the pages are completely different depending on the log in status. Even then, a templating engine allows for a more robust solution by including component files in the page, allowing you to share headers, footers, or any other common elements between the different pages.
If you are still against a templating engine and do not want to use different HTML files, you could basically do your own ad hoc templating. Put some kind of string to be replaced into the HTML, load the text into a string from the file, and use string.replace or something similar. A good example of string.replace is described here. If you choose to do this, be very careful that your "string to replace" does not conflict with HTML or any other languages used in the page itself.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
I want to create a really simple blog and so far I learned HTML and CSS.
So if I want to add a new node or article, do I need to modify my HTML document and then upload it again or is there any other way?
If you're only using simple HTML
Then the css should be made in a way that would make it reusable, so that when you just add another article shouldn't affect anyhing else. The HTML however must be changed, as you'll need to add your content somehow
The thing is, no one uses plain HTML anymore. If you want everything to happen dynamically then you should use DOM manipulation frameworks. The most basic one of which is JQuery, while the most powerful ones as of now are React, Angular, and Vue
Well, of course you have to modify something and upload it again, but not necessarily the HTML code.
You could youse AJAX (Asynchronous JavaScript and XML) - which, by the way, you can also use with JSON instead of XML - then create a standard article model, get the latest article from your file with
fetch("your-file.xml-or-json-or-whatever").then(
function(response) { /* Do something with the response, see the link below for an example */ }
);
and finally turn it into a DOM element with JS.
This method is pretty inefficient, though, if you don't have a way to cut the output from your list of articles. In fact, if, say, you have one thousand articles, it's inconvenient (inconvenient to say the least) to serve them all and the just use the first ten. If you have a static server, you might want to split the content into multiple files. If, instead, you have access to PHP (or other HTML preprocessors), then you should consider cutting it dynamically. Below are some links to help you.
AJAX tutorial on W3Schools
Fetch documentation on Mozilla Developer
You could also think of using frameworks like Angular (or AngularJS) to make your website even more dynamic. However, those are better for web apps than websites, as I've heard that it's a bit harder for Google to register an Angular app.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed last year.
Improve this question
It seems like I'm a bit outdated on website creation.
Some years ago I learned to create simple websites with frames.
Yet this solution is discouraged by w3school.com and frames are no longer supported in future HTML versions.
So what are the simple replacements?
iFrames also seem to be discouraged by most developers
PHP seems to provide a solution? what is a simple way in php to replace frames?
if I'm not using php (actually I need to use JavaEE in one project), how can I create frame-like websites?
Short: How to create a good-looking (frame-like) website nowadays?
Generally speaking:
Visually
CSS. There are numerous techniques for laying content out (depending on the precise effect you want, Holy Grail is a common desire).
The overflow properties handle scrolling sub-sections of pages, although designers who think that having a menu using up screen space all the time is a good idea are usually wrong.
Avoiding duplication of metacontent
(i.e. putting things like basic structure, navigation menus, etc on every page without copy/pasting them)
A template system (or an include system) that either runs server side (most common) or at build time (which can support HTTP servers which only allow static files).
The language this is implemented in is irrelevant, PHP is as common as muck, Java is an option, I tend towards Perl (and more specifically: Template Toolkit), there are many others. JavaScript is becoming increasingly popular for this type of job, with tools such as assemble becoming available. You can go all the way with a static site generator.
Use a search engine to find popular template languages or include systems for your programming language of choice.
Loading new content without leaving the page
JavaScript, usually with the XMLHttpRequest object (the technique being known as Ajax), and (if you are doing serious content changes) used in combination with the History API (so bookmarking and linking still works). Github are a good example of this. There are various frameworks such as React and Angular which try to make things easier. Note limited browser support and all the other things that can cause JS to file makes using good design principles essential. One approach to making these things robust is to write Isomorphic JS.
Frames are not replaced by a new "technology". The state of the art is to put all content into the same document and style it via CSS. Of course server side includes can help you to do this.
Use CSS positioning to create a frame-like interface and AJAX to change the content of a container. You can use JavaScript frameworks like jQuery, Prototype or MooTools to handle AJAX requests.
However, if you want to include content from another domain you have to use an <iframe>, since AJAX follows a same origin policy.
If you want to write DRY (don't repeat yourself) you could use some kind of template system (PHP, Ruby, Pearl, Python - and of course a framework for this languages).
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed last year.
Improve this question
It seems like I'm a bit outdated on website creation.
Some years ago I learned to create simple websites with frames.
Yet this solution is discouraged by w3school.com and frames are no longer supported in future HTML versions.
So what are the simple replacements?
iFrames also seem to be discouraged by most developers
PHP seems to provide a solution? what is a simple way in php to replace frames?
if I'm not using php (actually I need to use JavaEE in one project), how can I create frame-like websites?
Short: How to create a good-looking (frame-like) website nowadays?
Generally speaking:
Visually
CSS. There are numerous techniques for laying content out (depending on the precise effect you want, Holy Grail is a common desire).
The overflow properties handle scrolling sub-sections of pages, although designers who think that having a menu using up screen space all the time is a good idea are usually wrong.
Avoiding duplication of metacontent
(i.e. putting things like basic structure, navigation menus, etc on every page without copy/pasting them)
A template system (or an include system) that either runs server side (most common) or at build time (which can support HTTP servers which only allow static files).
The language this is implemented in is irrelevant, PHP is as common as muck, Java is an option, I tend towards Perl (and more specifically: Template Toolkit), there are many others. JavaScript is becoming increasingly popular for this type of job, with tools such as assemble becoming available. You can go all the way with a static site generator.
Use a search engine to find popular template languages or include systems for your programming language of choice.
Loading new content without leaving the page
JavaScript, usually with the XMLHttpRequest object (the technique being known as Ajax), and (if you are doing serious content changes) used in combination with the History API (so bookmarking and linking still works). Github are a good example of this. There are various frameworks such as React and Angular which try to make things easier. Note limited browser support and all the other things that can cause JS to file makes using good design principles essential. One approach to making these things robust is to write Isomorphic JS.
Frames are not replaced by a new "technology". The state of the art is to put all content into the same document and style it via CSS. Of course server side includes can help you to do this.
Use CSS positioning to create a frame-like interface and AJAX to change the content of a container. You can use JavaScript frameworks like jQuery, Prototype or MooTools to handle AJAX requests.
However, if you want to include content from another domain you have to use an <iframe>, since AJAX follows a same origin policy.
If you want to write DRY (don't repeat yourself) you could use some kind of template system (PHP, Ruby, Pearl, Python - and of course a framework for this languages).
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed last year.
Improve this question
It seems like I'm a bit outdated on website creation.
Some years ago I learned to create simple websites with frames.
Yet this solution is discouraged by w3school.com and frames are no longer supported in future HTML versions.
So what are the simple replacements?
iFrames also seem to be discouraged by most developers
PHP seems to provide a solution? what is a simple way in php to replace frames?
if I'm not using php (actually I need to use JavaEE in one project), how can I create frame-like websites?
Short: How to create a good-looking (frame-like) website nowadays?
Generally speaking:
Visually
CSS. There are numerous techniques for laying content out (depending on the precise effect you want, Holy Grail is a common desire).
The overflow properties handle scrolling sub-sections of pages, although designers who think that having a menu using up screen space all the time is a good idea are usually wrong.
Avoiding duplication of metacontent
(i.e. putting things like basic structure, navigation menus, etc on every page without copy/pasting them)
A template system (or an include system) that either runs server side (most common) or at build time (which can support HTTP servers which only allow static files).
The language this is implemented in is irrelevant, PHP is as common as muck, Java is an option, I tend towards Perl (and more specifically: Template Toolkit), there are many others. JavaScript is becoming increasingly popular for this type of job, with tools such as assemble becoming available. You can go all the way with a static site generator.
Use a search engine to find popular template languages or include systems for your programming language of choice.
Loading new content without leaving the page
JavaScript, usually with the XMLHttpRequest object (the technique being known as Ajax), and (if you are doing serious content changes) used in combination with the History API (so bookmarking and linking still works). Github are a good example of this. There are various frameworks such as React and Angular which try to make things easier. Note limited browser support and all the other things that can cause JS to file makes using good design principles essential. One approach to making these things robust is to write Isomorphic JS.
Frames are not replaced by a new "technology". The state of the art is to put all content into the same document and style it via CSS. Of course server side includes can help you to do this.
Use CSS positioning to create a frame-like interface and AJAX to change the content of a container. You can use JavaScript frameworks like jQuery, Prototype or MooTools to handle AJAX requests.
However, if you want to include content from another domain you have to use an <iframe>, since AJAX follows a same origin policy.
If you want to write DRY (don't repeat yourself) you could use some kind of template system (PHP, Ruby, Pearl, Python - and of course a framework for this languages).
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
I'm starting to migrate some html generation tasks from a server-side framework to the client. I'm using jQuery on the client. My goal is to get JSON data via a REST api and use this data to populate HTML into the page.
Right now, when a user on my site clicks a link to My Projects, the server generates HTML like this:
<dl>
<dt>Clean Toilet</dt>
<dd>Get off your butt and clean this filth!</dd>
<dt>Clean Car</dt>
<dd>I think there's something growing in there...</dd>
<dt>Replace Puked on Baby Sheets</dt>
</dl>
I'm changing this so that clicking My Projects will now do a GET request that returns something like this:
[
{
"name":"Clean Car",
"description":"I think there's something growing in there..."
},
{
"name":"Clean Toilets",
"description":"Get off your butt and clean this filth!"
},
{
"name":"Replace Puked on Baby Sheets"
}
]
I can certainly write custom jQuery code to take that JSON and generate the HTML from it. This is not my question, and I don't need advice on how to do that.
What I'd like to do is completely separate the presentation and layout from the logic (jquery code). I don't want to be creating DL, DT, and DD elements via jQuery code. I'd rather use some sort of HTML templates that I can fill the data in to. These templates could simply be HTML snippets that are hidden in the page that the application was loaded from. Or they could be dynamically loaded from the server (to support user specific layouts, i18n, etc.). They could be displayed a single time, as well as allow looping and repeating. Perhaps it should support sub-templates, if/then/else, and so forth.
I have LOTS of lists and content on my site that are presented in many different ways. I'm looking to create a simple and consistent way to generate and display content without creating custom jQuery code for every different feature on my site. To me, this means I need to find or build a small framework on top of jQuery (probably as a plugin) that meets these requirements.
The only sort of framework that I've found that is anything like this is jTemplates. I don't know how good it is, as I haven't used it yet. At first glance, I'm not thrilled by it's template syntax.
Anyone know of other frameworks or plugins that I should look into? Any blog posts or other resources out there that discuss doing this sort of thing? I just want to make sure that I've surveyed everything out there before building it myself.
Thanks!
Since posting this question, I have found many other templating options. I've listed many of them below. However, there was recently a jQuery templates proposal that may be the most promising solution yet. There is also a discussion about it on the jquery site. Here is the project location:
https://github.com/nje/jquery/wiki/jquery-templates-proposal
Other solutions I've come across include (in no particular order):
http://www.west-wind.com/weblog/posts/509108.aspx
http://ejohn.org/blog/javascript-micro-templating/
http://beebole.com/pure/
http://archive.plugins.jquery.com/project/jTemplates
http://archive.plugins.jquery.com/project/advancedmerge
http://archive.plugins.jquery.com/project/tempest
http://archive.plugins.jquery.com/project/jBind
http://archive.plugins.jquery.com/project/cliche
http://archive.plugins.jquery.com/project/appendDom
http://archive.plugins.jquery.com/project/openSocial-jquery-templates
http://archive.plugins.jquery.com/project/Orange-J
http://archive.plugins.jquery.com/project/fromTemplate-microtemplate
http://archive.plugins.jquery.com/project/resiglet
http://archive.plugins.jquery.com/project/databind
http://archive.plugins.jquery.com/project/jsont
http://archive.plugins.jquery.com/project/domplate
http://archive.plugins.jquery.com/project/noTemplate
http://archive.plugins.jquery.com/project/jQueryHtmlTemplates
http://github.com/trix/nano
http://aefxx.com/jquery-plugins/jqote/
http://ajaxian.com/archives/chainjs-jquery-data-binding-service
http://ajaxpatterns.org/Browser-Side_Templating
http://beebole.com/pure/
http://code.google.com/p/google-jstemplate/
http://code.google.com/p/trimpath/wiki/JavaScriptTemplates
http://embeddedjs.com/
Javascript template system - PURE, EJS, jquery plugin?
jQuery templating engines
http://goessner.net/articles/jsont/
Sounds like you want sammy.js
http://code.quirkey.com/sammy/
The tutorials there demo use of the template engine
I've used jTemplates quite a few times and from my experience it serves its intended purpose.
If we're limiting the discussion to client side then this is my final comment on the matter as it does the job and despite some funky syntax does it well, however on the server side of things I would definitely prefer the scenario where you POST some JSON which is deserialized to an in-memory object and then validated and passed to a server-side template (such as an ASCX in ASP.NET) where you have the full power of that language.
In my opinion, if the client supports JavaScript well enough for you to be considering jTemplates then I would recommend setting yourself up a JavaScript utility method which allows you to send JSON and receive HTML, thereby cutting out the potentially troublesome middle man. Most languages have JSON-parsing ability and jQuery can auto-parse a server response into JSON by specifying the return type as "json".
Even if you don't receive the JSON from the JavaScript, you can still take the JSON that you would have sent back to the browser and just send it through your server-side template instead. In ASP.NET (with MVC for example) you can have strongly-typed template files that do not need to be compiled, making changes a lot easier to implement. Therefore you would still be sending back markup, but it would have been run through a proper template with the full strength of a programming language behind it.