Research website code analytics

[chris-yoon90]

It seems that Sonar is already doing some of the things that we'd like our project to do. We can definitely take a look at their APIs and see if it is re-usable. Else, we can always start from scratch ourselves.

[chris-yoon90]

http://en.wikipedia.org/wiki/List_of_tools_for_static_code_analysis shows some already existing static code analysis tools out there.

[chris-yoon90]

And of course, there's Google with this project...... https://developers.google.com/closure/compiler/docs/gettingstarted_ui

I think this was kind of what we wanted?

[colinmleung]

There are lots of validators and optimizers for html, css, and javascript. Our project can add value by analyzing all three in tandem to create a more optimized front-end.

[chris-yoon90]

I was also doing some research on best practices for front-end developing, I'm guessing these are the things that we should deal with??

http://isobar-idev.github.io/code-standards/#_html5 http://www.catswhocode.com/blog/top-10-best-practices-for-front-end-web-developers

[colinmleung]

I've been looking at a few tools that deal with HTML, CSS, and Javascript. They have multiple levels of utility:

• validation (tells you if your code is wrong or unoptimized in some way) http://jigsaw.w3.org/css-validator/ (HTML validator)

-minification (compresses your code so the user doesn't have to load as much data) http://cssminifier.com/ (minifies CSS)

-simplistic analyzers https://addons.mozilla.org/En-us/firefox/addon/dust-me-selectors/ (points out which CSS selectors are unused) http://www.jslint.com/ (analyzes Javascript and points out bad practices)

-entire languages http://lesscss.org/ (LESS compiles to CSS, allows for mixins, variables, etc.) http://jade-lang.com/ (jade compiles to HTML, cleaner syntax) http://coffeescript.org/ (coffeescript compiles to javascript, cleaner syntax)

With these tools in mind, some possible avenues of investigation include: -class-based CSS "language" (inspired by http://smacss.com/, in some ways already supported by LESS) -HTML analyzer (coding best practices, depth complexity, SEO, accessibility [some aspects already have tools]) -redundancy checker and minifier across all three file types (ex. if you use an HTML id hook to access an element from javascript, and you delete the javascript code, delete the id as well) -automation helper (autogenerates id's and such for selenium testing) -best practices enforcer across all three file types (if a company wants to make it so that javascript only interfaces with element id's, give warnings when developers don't do that)

[chris-yoon90]

elaborate on "automation helper (autogenerates id's and such for selenium testing)" ? We talking about the html element id's?

[colinmleung]

Yes, pretty much. Selenium can also use other selectors, though (like classes).

[colinmleung]

Another idea: Intellisense across HTML, CSS, and Javascript

[RichardxLee]

Nice work guys. I did some research as well, and many of the features we want are already implemented, but not all put together. I like the idea of Intellisense across HTML, CSS, and Javascript. We can also obfuscate their source code, so when people click on view source, it will make it harder for them to decipher :)

[chris-yoon90]

I like all the ideas that were mentioned above. I think our first focus should be researching how to bring all three (html, css, Javascript) together. I've looked into the existing tools (JSLint, W3C Log Validator) and it seems we have access to all of their source codes. It probably will be easier for us to use these codes instead of starting from scratch. I'm not sure how we're going to integrate them together though.....

[colinmleung]

https://github.com/srackham/w3c-validator

Simple python script that calls the w3c validator APIs.

[RichardxLee]

Do you guys think we should arrange for a quick meeting during the weekend and talk about all of the ideas we had and how we want to approach this? What language to use, and what to make it into? Personally I like the notepad++ text editor while auto validating idea

[chris-yoon90]

Hmmmm I was thinking more of a lightweight application on the web rather than a desktop application. Like user submits their code after they are finished and our application corrects it. When you say "notepad++" do you mean an application that corrects users while they are coding? That sounds more like an IDE rather than a code analyzer

[RichardxLee]

I guess we could talk more about this in detail. But essentially it should be a standalone app, that is able to scan the code and do its own thing rather than a plug in, where it would have to depend on other apps. I do not mind an app on the web as well, it would run across any platform as well, as long as it is powerful enough to do the things we want. We could make a light weight online editor, that people can type code in and it analyzes them in real time.

[chris-yoon90]

This issue will continue in other sprint tasks: #3 , #4 , #5