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
Related
Is there any way to check if html is valid and to have some intellisense? I mean I need something like typescript, but for html. For example I would like to get compilation errors when I use directives which are not exists. Or properties of scope what are not declared (in case of TS).
update:
I basically need kinda tsx for angular. And it's already addressed here https://github.com/Microsoft/TypeScript/issues/6508
I would strongly suggest you to use WebStorm which is a smart coding assistance for JavaScript and compiled-to-JavaScript languages, Node.js, HTML and CSS.
One of the best for Angular.
It has free 30-day trial and you can download it from the link below:
https://www.jetbrains.com/webstorm/
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
I just started looking into sass and compass because I see a lot of code on codepen that uses it. I noticed in the documentation that you had to have something like a sass folder and it watches for changes in that folder and when a save event occurs it updates the stylesheet folder with the regular css. I'm used to writing my css, especially when I go through short tutorials or for practice in the style tag in the html file. Is it possible to write my sass in the HTML file? Do I have to now write my css in a different file? if not how would I do it?
No, you cannot to my knowledge. See Using SASS/SCSS syntax inside <style> tag.
The real question, though, is why would you want to use SASS at all? Some say it promotes and encourages poor CSS programming practice. The "features" it offers are in general of marginal usefulness. It adds another step to your workflow, and before you know it you will be fighting with gruntfiles and SASS versions and having Ruby installed properly. Personally I would also strongly advise against deciding to start using some CSS framework if it brings along the SASS/SCSS/LESS baggage.
Some preprocessors that we use in JS/HTML/CSS do have versions which can run in the browser, for development purposes. For example, you can run babel in the browser to convert ES6 to ES5. That is possibly because babel is written in JS, and it's not that hard to create a version which runs in the browser and does the transpiling on the fly. Or, to take one other example, you can arrange for Ember to compile templates from within the HTML. SASS, on the other hand, is not written in JS and there is no reasonable way to call it from the browser.
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.
I'm looking for a tool that could help me fix malformed HTML. For example:
<div id="foo">
<div id="bar">
<span>Test</span>
</div>
The tool would detect a missing and inform me the the div with id 'bar' on line 2 is not closed. I know about the w3c validator (using it with the Web Developer Toolbar). But I find the validator tool slow to use. Additionally, once a tag is not closed, the rest of the page generates lots of errors.
This tool can either be a standalone application or a browser plugin.
I'm using Eclipse, JSP, JSTL and jQuery to generate HTML. Even if Eclipse give me some indication on malformed HTML, I have mostly generated code. Therefore, it would be best if the tool analyze the resulting page.
This sounds like a job for HTML Tidy.
HTMLTidy will fix your errors
xmllint will find your errors
Even the W3C Validator will find your malformed/unclosed HTML.
I would, as a rule, always be sure to pass my HTML and CSS through their validators, though HTML Tidy is a nice little app to have around too.
https://addons.mozilla.org/en-US/firefox/addon/249 This firefox extension has done me good as well...
If you want a command line interface, you can use: https://github.com/yaniswang/HTMLHint
It has also its grunt plugin: https://github.com/yaniswang/grunt-htmlhint