Challenge: Create a webpage that can dynamically compare two computer language's syntax
After having been a VB.NET developer for sometime, I was looking to get back into C++ and C# for some projects. That was when I stumbled over this webpage created by a Professor at Harding University. Since most computer languages follow the same basic logic and merely differ in syntax, this page allows someone to quickly compare the use of a language they know to one they are unfamiliar with. Showing actual code examples of the two languages side by side, I can quickly grab the context of how the language is used at a glance.
In this case it compares VB.NET and C# languages; but there is another page comparing C# and Java, and even one for Java script and VB script. But later on when I was interested in Java, comparing it to VB.NET would require first having to look up the syntax on the VB to C# page, and then again on the C# to Java page. Which defeats the purpose of doing a comparison as opposed to simply looking the syntax up.
So I got to thinking, what if I could build a page where you could choose which two languages to compare side by side? If built the right way, it could even allow the addition of more languages in the future. The project seems simple in scope, but will still require a good amount of design. It will also give me the chance to build a web site using HTML, XML, PHP, and some scripting; while getting my hands in a bunch of coding languages as well.
Plan of attack
The current page is a static HTML with the text manually formatted to match on both sides, so in order to dynamically load two user selected languages (drop down boxes) I'm going to have to change a number of things. My general plan of attack is:
- Create an XML Scheme that contains similar sections as the website (Program structure, comments, data types, ect). Note: Not all languages necessarily contain all sections. The schema should provide all though.
- Make sure that the data in those XML is always formatted in a specific order (So string is always next to string, int next to int, ect)... OR
- Alternatively make a form which can generate the XML for a language that prompts the user to put the data in a specific order. That way instead of making new xml's from scratch, I can concentrate on entering the data in the prompted format, and then generating the xml from that form.
- Create a few XML's for those languages, using the code examples from the inspiring website as a start.
- Create a web page with two drop down boxes dynamically generated with the possible Language XML's it can load
- Have the web page able to dynamically generate two columns with the data (PHP?).
- It should be able to format the page as it parses the xmls. This includes making header text, setting background/font colors correctly, formatting columns and rows properly
- Related rows should ALWAYS be adjacent to each other in the compared languages.
- If side A takes up more lines then side B, Side B should allow white space to make sure all adjacent rows are the same height. (either through line returns or cell height)
- If one language contains certain properties that another doesn't (ex: Java does not have structs) be able to omit it from generating (I might have to rethink this...).
- Test it to make sure it works for different combinations of languages
While I'm sure using the dynamic xml to generate quality html formatting is going to be daunting for me (at least to make sure it always looks readable), my biggest quality of life issue on this project will be getting the XML scheme right. I'll have to make sure I design that very carefully if I want to make the rest of the work easier on myself.
Will the XML sections contain plain text, or HTML formatted text to ensure the code examples are formatted in the cells properly? How do I handle empty nodes for languages that don't contain properties or as many examples as another? How do I ensure that the table formatting in the HTML doesn't get malformed, and always remains readable? What kind of sections should I include in my XML schema, and how do I make sure that needing to add new sections in the future doesn't break existing xmls?
The closest comprehensive comparison page I've found for several languages was here. While it compares several more languages at once, it doesn't do it in nearly as slick of a way as the Harding University page.