is there a XML or JSON resource I can parse in Javascript that tells me what HTML elements there are, what their attributes are and what CSS styles I can apply? I want to have a list of valid options without typing in everything by hand.
Please bear with me here, I'm new to this web stuff but have plenty experience in C (mostly game engines).
TIA!
(X)HTML before version 5 have DTDs that you can parse (you can get the URLs for them from the Doctype for the version of (X)HTML you are working with.
HTML 5 doesn't have an official machine readable spec. You might be able to extract something useful from the validator.nu source code though.
The CSS properties that can be applied to an element depend only on what other CSS properties have bee applied to it. Their only connection to HTML is that the browser's default stylesheet applies some properties automatically.
Sorry that this answer is almost six years too late for you. I was looking for the same thing and ended up writing my own tool for extracting some of the specs from the standard and exporting it as JSON
https://github.com/tawesoft/html5spec (self promotion disclaimer: I made this)
Hope that helps someone
Related
I'm creating an xml schema for a document that will eventually be translated into javascript. It would be really useful to allow the insertion of custom js scripts right within the document. This isn't hard to accomplish (a node can just contain text, that will be the javascript), but what is difficult is to get Visual Studio to give JS Intellisenseinside the tag instead of xml Intellisense.
If found this article that describes htmlequivalent annotation that says you can tell the xml editor to treat a tag as the equivalent HTML tag (in this case the script tag, and this is even the example given). But my attempts at using it have failed. Does anybody have any ideas on how to use this? There is very little documentation on msdn about this annotation and about the same on google/bing.
The MSDN article regarding the annotation: http://msdn.microsoft.com/en-us/library/aa713989(v=VS.71).aspx
Unfortunately there's no documentation available for newer XML Schema annotations - the one on MSDN is for VS2003. Your best bet is to check out the already available XML Schemas in the folder:
[VSInstallFolder]\Common7\Packages\schemas\html\
The HTML5 one should give you a good overview of the available features. There are even more features in XML Schemas in WebMatrix 3 beta, like supplemental Schemas, but they are still not available in VS.
However I'm not sure that the functionality you're trying to achieve is possible.
When editing JavaScript inside a script tag the syntax highlighting is much better than when editing myFile.js.
Is there a way to have the same syntax highlighting in a separate file as you have inside a script tag?
I already tested both the stock javascript.vim syntax file and this alternative one:
http://www.vim.org/scripts/script.php?script_id=1491!
edit: please check screen shot:
Left side is inside script tags and :setfiletype html.
Right side is plain javascript with :setfiletype javascript
I know it's been a couple of months, but I wonder if you've found a satisfactory answer yet?
I found the following via :help syntax within vim:
JavaScript and Visual Basic embedded inside HTML documents are highlighted as
'Special' with statements, comments, strings and so on colored as in standard
programming languages. Note that only JavaScript and Visual Basic are currently
supported, no other scripting language has been added yet.
This seems to explain why everything that is does not have its own coloring in javascript.vim is colored "Special" when embedded within HTML. This seems to include variable names, function and method names, and so forth. I like it, too, because it separates variables, etc, from punctuation, etc. Much easier to see that your code is correct.
My vim JavaScript highlighting is awesome, this is my setup:
syntax on
filetype plugin on
syntax enable
au BufRead,BufNewFile *.js set filetype=javascript
autocmd FileType javascript set omnifunc=javascriptcomplete#CompleteJS
with the following js-related bundles
jslint
and no specific syntax files
My colorscheme (molokai) takes care of the rest
Hope this helps you
Use vim-javascript. It works pretty well.
In my case installing jelera/vim-javascript-syntax did the trick since vim-javascript plugin by itself didn't apply a nice color syntax. If your language of choice is Javascript (as in my case) I recommend you to follow this great guide. Hope this helps!
I did find a very interesting tool for identify unused css definitions in a web project.
http://www.sitepoint.com/dustmeselectors/
Are there similar tools also for javascript projects?
P.S.
I know there is no program for deterministically finding unused code. But I am looking for a report to identify possible unused code. Then the last decision will always be your own.
Problem is there is no way to be really sure. Suppose the following:
The initial HTML site is practically empty. There is a lot of JS code though, which seems to be unused.
OnLoad, a function is called which launches an AJAX query to the server. The server returns a lot of HTML code, which is the body of the site. This body contains lots of JavaScript functions.
The initial body is replaced with the body received via AJAX. Suddenly, all code is used.
Static analysis utilities are therefore useless. I do not know whether there exists a browser extension that marks all JS usage from a running browser though.
You can try using tombstones to safely locate and remove dead code from your JavaScript.
https://blog.bugsnag.com/javascript-refactoring-with-bugsnag-and-tombstones/
In order to find the unused assets, to remove manually, you can use deadfile library:
https://m-izadmehr.github.io/deadfile/
It can simply find unused files, in any JS project.
Without any config, it supports ES6, JSX, and Vue files:
The one that comes to mind most quickly is Javascript LINT (http://www.javascriptlint.com/) and JSLint (http://www.jslint.com/).
Beware though: the latter hurts your feelings.
I'm trying to figure out a way to extract the information encoded in ttf files. namely: The char-to-glyph table and the individual glyph path data.
Does anyone have a good reference explaining the ttf file structure, or some other solution?
Keep in mind that I'm not interested in any libraries that can do it for me either (unless they are open source and I can see how they are doing it). The "master" goal is to implement it in Javascript.
Thanks!
Take a look at OpenType.js at http://opentype.js.org/
opentype.js provides you with raw access to the glyphs so you can modify them as you please.
One can inspect all the tables in an OpenType and TrueType font using Font Inspector, and enumerate all the glyphs using Glyph Inspector
This toolkit has an utility called ttf2svg, it is open source written in java.
http://xmlgraphics.apache.org/batik/
You can try to extract the ttf parsing logic and implement it as you want.
In a past situation I used this utility to generate a svg file and use it in a web page targeting ipad users (#fontface css feature).
OpenType.js is perfect in a javascript environment, browser or Node.js (I contributed to the lib). Fast & easy to use.
Just keep in mind that the implementation is not complete, if you need something that is not yet implemented you can open an issue and we will help you if we can!
For a more complete tool, fontTools will be more powerful in command line (& complete parsing/writing) https://github.com/behdad/fonttools/
If you do ttx myfont.ttf it will generate an xml file (myfont.ttx) with all infos, you can modify the infos and do ttx myfont.ttx and it will generate a font based on it!
By the way I did an awesome list for typography recently with a lot of resources concerning ttf / otf: https://github.com/Jolg42/awesome-typography
There are a lot of librairies in different languages from javascript to C 😉
I am creating a joomla plugin and want to load an array of images after the page has loaded. To do that, I'm currently using mootools.js to call myserver URL, obtain the JSON response and parse the response into javascript variables that represent each image url. It works great, but mootools.js is appropriately named since it is a real heffer in the size department.
Is there a lightweight script out there that will make the ajax call and parse the JSON object? The smaller the better.
I just found a JSON parser, json2.js, at json.org that minifies down to about 3k. You basically do a standard HTTPRequest via AJAX and then pass the response text to the JSON parser to create the JSON object.
Thanks for all the answers and I did track them all down. I couldn't get any of them small enough to compete with this approach, though.
There are quite a few javascript frameworks out there in addition to Mootools that can accomplish what you're looking for. I recommend taking a look at Jquery or Prototype. They're very similar to Mootools and the mini-fied versions may provide the lightweight solution you're looking for:
http://jquery.com/
http://www.prototypejs.org/
If it's lightweight you want, I can suggest Net.js.
http://xkr.us/code/javascript/Net/
However, it doesn't support parsing of JSON, but that is simply one row of code, getting the responseText and calling eval on it:
var json = eval('(' + xhr.responseText + ')');
Downsides:
Timeout is not configurable. However, easy to modify directly in the source.
No support for a request-group with common finish-handler. Each request is individual.
Two suggestions:
Find a library that breaks the functionality you need down into relatively small components. Then download only the components you need. YUI is nicely divided, but even those files can be somewhat larger than necessary. A smaller project that is based on YUI is Fork. Find this library at http://forkjavascript.org
Find the functionality you need in one of the open source libraries and refactor it into your own significantly smaller version.
I don't know what particular version of MooTools you're using, but it doesn't have to be large if you tailor it specifically to your needs. MooTools provides an advanced download page that will allow you to create a custom-built, minified version of the library in a single file. Try it out and see if it suits your needs. If it does, you won't have to go and learn prototype/jquery/etc.
Edit: I just tried downloading MooTools' Request.JSON package with all dependencies. With the YUI compression option, the file size came out to 33.8KB.