Which editor to use for coding dynamic web pages - javascript

I am new to web development and I see it is very common to print HTML syntax from some server side script which is typically written in python, php, perl etc.
Now, normally all editors have some features which can help with syntax checking of the HTML as the programmer is writing them.
However, if the HTML code is emitted from a print statement, how can HTML syntax checking be done.
For example
the server side python script generating an HTML form can be like
print("<td><input type="file" name="upload_file" />")
Here the ending tag
</td> is missing. Is there an editor which can warn about this. Otherwise, how do the programmers deal with it.

You can't display this code using python. If you want to create a server, you will need to look for the development of the server side (these are the three most used):
Flask
Django
Tornado
Also, you can check more web frameworks here: https://wiki.python.org/moin/WebFrameworks

use sublime, its light weight and have lots of features.

For any non-trivial work it's best not to embed HTML (or any other language) in your Python code. Use a templating engine such as jinja2 or one of the others available. Most Python web frameworks support integration with at least one templating engine.
Separating your code and markup by using a templating engine makes your code easier to maintain. In particular, files for templating engine code are essentially HTML with some additional markup to allow for variable substitution, looping etc and so your editor's HTML syntax highlighting will work on them.

Related

Javascript frameworks just "markup" for javascript?

I am a little curious about how javascript frameworks work. Web development isn't really my area of expertise (I'm more of a c/c++ guy), but do javascript frameworks get translated into vanilla javascript?
Upon inspection of website source, it seems like it is mostly just standard javascript. Do these javascript engines just translate code into javascript on the server side?
Yes, most of JavaScript Frameworks translates the code you write to vanilla JavaScript, however, this does not happen on the Server Side, that would be really slow (Server side code is used to check databases, serve files, authenticate, etc.). This process of translation is done in compilation time (Although it is translation). (Just like when you compile c++ code into binary).
When it's source code to source code like JavaScript and React (JSX) to Vanilla JavaScript (JS), it's translation. When it's source code to binary like C++ source code to an executable (.exe) is compilation.
After you're done writting your JavaScript code with frameworks, you most translate it to Vanilla JavaScript (if you also used other uncommon languages to write styles, you must translate them too, like SASS instead of CSS). It is also common to minify it, so it can load faster.
All this is mainly done by tools like webpack.
When your site is up and running, we can say that is run time.
Looking at the fact that they were written in js they would be resolved to js before running and as Robin said they are executed on client side except Node which is a runtime environment and not a framework

Include html files in an html file on a local file system?

I have a help system that is completely offline, no server, using file://.
I have one main page, with hundreds of line of html that represent many sections of the help system. I would like to stick each section in a html file and just include it. Unfortunately it seems like this is only possible with some nifty server side include techniques, with HTML5 (which I do not want to assume my users have), or with a nasty javascript hack where you copy your html file into js files with document.write calls for every line as written about here: Ways to include html in html.
What about something like handlebars.js or mustache.js? Can I use templating?
Since you don't want to use server-side includes, I would suggest using a static site generator (SSG).
If you are not familiar with SSG's, they allow you generate HTML pages from templates & includes (often Handlebars templates) and HTML, Markdown, JSON, or YAML, content using a CLI.
If you want to get started with an SSG, there are plenty of options, from Ruby based Jekyll, or Node.js based Assemble. In my opinion, Assemble is the best option and I would highly recommend it.

how write text/template in a file and include it to project

I use script type="text/template" for my project and I use a lot of templates, I want write my template in foreign file and include it to my html
If its possible , what type of file must i use and how must write it ?
In a pure JavaScript/HTML environment, you can't easily.
Your choices are:
Use some kind of JavaScript template library
I'm only familiar with Durandal that uses the Knockout engine.
AngularJS seems to be another popular choice.
Most of these packages include far more than just templates and may be overkill.
Use a server-side template package
PHP is a popular server-side tool.
Some HTTP Servers support Server Side Includes, but these are so limited I couldn't actually recommend them.

Pure HTML + JavaScript client side templating

I want to have achieve something similar to Java Tiles framework using only client side technologies (no server side includes).
I would like to have one page, eg layout.html which will contain layout definition. Content placeholder in that page would be empty #content div tag.
I would like to have different content injected on that page based on url. Something like layout.html?content=main or layout.html?content=edit will display page with content replaced with main.html or edit.html.
The goal is to avoid duplicating code, even for layout, and to compose pages without server-side templating.
What approach would you suggest?
EDIT: I don't need a full templating library, just a way to compose a pages, similar for what tiles do.
JavaScriptMVC has a view templating system that supports different engines, including a pure JavaScript based one called EJS.
You might also want to look into Mustache especially Mustache for JavaScript.
If you would like to use jQuery, there is a decent templating engine in development as well:
http://github.com/jquery/jquery-tmpl
http://api.jquery.com/jquery.tmpl/
Check this out:
http://layout.jquery-dev.net/
I thinks it's close to what you want.
I am looking at javascriptMVC at the same time.
In the forum they are talking about using jquery layout with it.
I don't know if it fit exactly to what you want to do, but using the GWT seems to be a good approach for rich client-side applications :
You write all your application in Java with the framework, and you compile for obtain HTML and JS files working stand-alone.

best practice for dealing with common "structural" elements of pages?

Very basic question: I am coding a web app that has a handful of pages. These pages have the usual shared elements: eg, the site's header/masthead and a side-bar are present on all pages. The HTML is static (not dynamically generated, its "ajaxy-ness" is done client-side).
What is the best way of importing/"including" those common elements into my pages? The solution I am using is to have the HTML files contain empty place-holders
<div id="header"></div>
<div id="leftSideBar"></div>
(...)
and then do in jquery's $(document).ready():
$.get("header.html", function(html) { $("#header").html(html); });
// ....
Is this the best way to do this? I'm new to web development. : )
I guess I could also dig up a "macro-like" code-generation tool that I would run on the HTML files to replace, eg, "#header" with the contents of header.html. That way loading a page would require a single request for a single HTML file, which sounds better.
What is the smart way to achieve this? I am sure this problem has been solved a thousand times.
EDIT: The server-side is coded in Python+cherrypy. (I am assuming it is reasonable to try to keep away from dynamically generating HTML when doing "web 2.0-ish" web apps. Please correct me if I am wrong. As I said, I am very new to this environment.)
Thank you for your insights,
lara
If you want to include files, please consider using some backend language such as PHP or ASP. Javascript is not really meant to do this even if this would work.
<?php include 'other_file.php'; ?>
Using javascript to do this will lead, I think, to a poor SEO and the loading of the page might look weird for the end user. If you really don't want to use a backend language, some IDE have a way to handle templates, you could look into that.
Concerning frameworks, most of them have a way to handle templates. ASP.NET has the master page system, Ruby on Rails has layouts.
Here's an example using Rails :
<html>
...
<div id="content"> <%= yield %> </div>
...
</html>
Here all the content of a subpage will go into the "yield". Here's a link to learn more about that.
Some frameworks can handle multiple place holders.
To some extent, it depends on what you're using on the server side to render the pages. If your using server side scripts to generate the page you should be able to use a web framework (eg. Django or RubyOnRails) or even just a basic templating engine such as Genshi. Basic include functionality may even be built into the language you're using (ie. PHP)
If it's just static HTML you may want to look into setting up some form of server side includes such as Apache SSI or NGINX SSI. You'll need to pick the one that works with whichever server you're using, and you'll need enough access to install and configure the plugin or module.
Alternatively, you might want to look at using a script to generate your pages (edit, generate and deploy). A simple approach using cat / sed / awk / make (additional useful reference - Sed & Awk) may be all you need, or you might want to use a templating engine and a language such as Python or Perl.
I'd have the includes handled server-side, and this will mean fewer requests from the client, and may also have other benefits (easier to debug js, etc).
Having the server process includes really isn't going to put a major strain on it.

Categories