Looking to create HTML elements as part of a Dart client side application.
There are multiple approaches to doing this.
Ideally the HTML template to create new elements would live with the rest of the HTML and not inline with Dart code.
Are there any options for separating HTML templates and Dart code?
Background
Common approaches to creating HTML content on the fly:
Create in Code, as explained here: How to create an HTML link in Dart?
Input as a String from Code, also explained in the above link.
Use Polymer, which does solve this, although appears to require boilerplate.
Polymer would appear to be overkill for use cases which don't require custom elements, data binding and other features.
There was at one point the DART HTML Template Library, work now stopped:
http://blog.sethladd.com/2012/03/first-look-at-darts-html-template.html
There is also the HTML5 'template' element. The HTML5 'template' tag has limited (50%) support at caniuse.com which currently limits it's applicability.
You can use the template_binding package which is what Polymer uses for its templates. You might also want to use the polymer_expressions package for a more powerful expression syntax.
The important bit is that you don't need all of Polymer to use those. Check out the polymer_expressions tests for examples of using template_binding without the rest of Polymer.
Related
Hi am started to looking into the Polymer3 and came to know about the lit-html and i couldn't understand what are the major differences between lit-html and web components? expect the lit-html's html tag. could some one explain more in detail. Thanks in advance.
Those two are not really comparable technologies. Anyway if you want to learn more about them I suggest looking for those pages.
lit-html lets you write HTML templates in JavaScript using template literals with embedded JavaScript expressions. lit-html identifies the static and dynamic parts of your templates so it can efficiently update just the changed portions. Docs
Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps. Docs
When working on front-end projects I always like to work with linting tools. They prevent from dumb mistakes to serious smelly code pieces. Linting tools also suggest improvements and optimisations.
Validating and linting HTML means using the W3C Validator. When working with vanilla JavaScript projects I use the grunt-html Grunt NPM module. And when working with Angular 1.x I use the grunt-html-angular-validate module, which is the same validator but adapted to Angular requirements (non standard attributes or incomplete HTML documents will not fire errors or warnings). However I have tried to find some similar tool for React JSX documents either for Grunt or Gulp but with not luck.
Does it exist W3C HTML validators for React JSX files? In case it does not, any reason for it?
NOTE: I am not interested on checking the JavaScript part of the JSX with tools like JSXHint but just the HTML part and its compliance with W3C specifications.
Does it exist W3C HTML validators for React JSX files?
No.
In case it does not, any reason for it?
Because they aren't HTML.
The closest you could come would be to execute the JavaScript to generate a DOM, then serialize that DOM to HTML (e.g. with .innerHTML), and then add a DOCTYPE declaration and validate the result.
This, of course, only gives you a snapshot of the output for a given state of the application.
Server-side rendering tools (such as Next.js) are probably helpful here.
There are no W3C HTML validators for JSX.
JSX is JS, not HTML. So you can use eslint plugins for linting jsx to avoid common problems:
https://github.com/yannickcr/eslint-plugin-react
https://github.com/evcohen/eslint-plugin-jsx-a11y
There was a plugin I used with loading contents of a JSON object into HTML. One of them was called jquery.loadJSON(jsondata) written by Jovan Popovic. The last version is 2011.
It has worked well but I've noticed that it does not populate the select drop downs.
If not this plugin can anyone recommend a similar plugin that loads and binds the json to the html objects?
One I studied is called JSON2HTML but this is a dynamic content loader which I do not want.
Another one was called JQuery templating but it looks like the project was abandoned?
thanks,
The most popular solutions for templating are Handlebars.js and Mustache.js (the former being an extension of the latter). Swig is also pretty popular. For a somewhat different templating style, you can go for the ERB-style underscore templates.
Note: as of now, templating libraries rather work with placeholder tags, eg. {{data}}, than by associating content with id, class, name. The templating libraries I mentioned also allow you to put loops and conditionals among others, in your HTML.
For a full list on the better Javascript templating engines, check out JSDB.io.
Theres a web page I'm making which content is very dynamic and so I'm building it from inside the backing bean.
I would like to add a Java applet to the web page but I could not find the JSF component type to correspond to the <applet> tag.
So My questions are -
What is the JSF component type for an applet?
How did you find it? (For similar future searches)
Thanks!
P.S - Just to be clear. An example: <h:PanelGroup> would be HtmlPanelGroup as a java object.
Couple of things to start with; The <applet> tag is deprecated in favour of <object>, and JSF doesn't really provide a tag to render <object>. That said you can use f:verbatim if you're at tag level, which I believe corresponds to UIOutput.
JSF doesn't guarantee a Java object representation of all client side tags (nor should it). What you're trying to do is move all markup knowledge into the backing bean, and truthfully, that way lies madness.
I'd suggest that you take a look at Facelets, a compositing technology that sites on top of JSF. It lends itself very well to flexible page production and keeps markup and page composition out of your backing beans and in X/HTML files. Facelet's has also been embraced for JSF 2.0.
There appears to be a ready-to-use component for that.
Alternatively, you can write your custom component that will output the <object> tag. It's relatively easy.
Does Django have any template tags to generate common HTML markup? For example, I know that I can get a url using
{% url mapper.views.foo %}
But that only gives me the URL and not the HTML code to create the link. Does Django have anything similar to Rails' link_to helper? I found django-helpers but since this is a common thing I thought Django would have something built-in.
No it doesn't.
James Bennett answered a similar question a while back, regarding Rails' built-in JavaScript helpers.
It's really unlikely that Django will ever have 'helper' functionality built-in. The reason, if I understand correctly, has to do with Django's core philosophy of keeping things loosely coupled. Having that kind of helper functionality built-in leads to coupling Django with a specific JavaScript library or (in your case) html document type.
EG. What happens if/when HTML 5 is finally implemented and Django is generating HTML 4 or XHTML markup?
Having said that, Django's template framework is really flexible, and it wouldn't be terribly difficult to write your own tags/filters that did what you wanted. I'm mostly a designer myself, and I've been able to put together a couple custom tags that worked like a charm.
The purpose of helpers is not, as others here imply, to help developers who don't know how to write HTML. The purpose is to encapsulate common functionality -- so you don't need to write the same thing a thousand times -- and to provide a single place to edit common HTML used throughout your app.
It's the same reason templates and SSI are useful -- not because people don't know how to write the HTML in their headers and footers, but sometimes you want to write it just once.
EG. What happens if/when HTML 5 is
finally implemented and Django is
generating HTML 4 or XHTML markup?
Same thing that happens when HTML 5 is implemented and all your templates are written in repetitive HTML, except a lot easier.
The other posts have already answered the question, linking to the docs on custom template tags; you can use tags and filters to build your own, but no, there aren't any built in.
it doesnt look like they're built in but here's a couple snippets. it looks like it'd be pretty easy to create these helpers:
http://www.djangosnippets.org/snippets/441/
Here is a list of all template tags and filters built into Django. Django core doesn't have as much HTML helpers as Rails, because Django contributors assumed that web developer knows HTML very well. As stated by saturdaypalace, it's very unlikely for AJAX helpers to be added to Django, because it would lead to coupling Django with a specific JavaScript library.
It's very easy to write your own template tags in Django (often you need just to define one function, similiar to Rails). You could reimplement most of Rails helpers in Django during a day or two.
I bet if there would be any consent of what is common html, there would be helpers module too, just for completeness (or because others have it). ;)
Other than that, Django template system is made mostly for HTML people, who already know how to write p, img and a tags and do not need any helpers for that. On the other side there are Python developers, who write code and do not care if the variable they put in context is enclosed by div or by span (perfect example of separation of concerns paradigm). If you need to have these two worlds to be joined, you have do to it by yourself (or look for other's code).
This won't answer directly to the question, but why not using foo in template then?