HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Tritium website

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
websitetritiumstackoverflow

Problem

I am working on my Tritium website (hosted on Github: feel free to fork and send pull requests), and now am looking for a review of it. If you are looking to critique the design of the website, please visit the sister question over on Graphic Design.

Here is what I would like reviewed:

  • Organization - Can you find where something should be easily?



  • Stale code - Is there code that isn't in use?



  • Modern conventions - Am I using the latest and greatest with HTML5 and CSS3?



  • Readability - Is the code formatted in a way that is compliant with today's standards?



  • Performance - Can I speed up any aspect of my code?



  • Portability - Websites can be hard to support for mobile devices. Is there anything I can improve so that these devices can have just as good of an experience? Also, I noticed that the animation of my atom is a bit laggy on those types of platforms; how can I fix that?



  • User Experience - What do you find annoying and how would you fix it?



Those are just some suggestions though. Please feel free to comment on any aspect of the code. No matter how small that aspect may be, I consider it important.

index.html:

```






Tritium

















Tritium










About


Contact














Tritium

A free, premium quality speech synthesis engine written

Solution

The HTML

The HTML has some problems.
Run the w3c validator on it:
http://validator.w3.org/check

The ` jumps in the eye,
and it seems there are many
tags stuck in the middle of of start tags, as if you forgot the closing >:



HTML validation problems are not as insignificant as you might think.
Many times I've seen inexplicably strange JavaScript errors,
that were strangely caused by invalid HTML.
So to prevent wild goose chases,
I make sure to keep my HTML valid.

The JavaScript

As of jQuery 1.7,
.on() is the preferred method to bind events,
instead of
.bind().
See the docs.
There are also shortcuts like
.click().
I prefer
.click(),
because an intelligent editor can warn you if you mistype it,
while it might not warn for
.on('clck', ...).

Instead of:

$('body').append('');


This is shorter:

$('body').append('');


From the jQuery docs:


When the parameter has a single tag (with optional closing tag or quick-closing) —
$( "" ) or $( "" ), $( "" ) or $( "" ) — jQuery creates the element using the native JavaScript createElement()` function.

Code Snippets

<a href="https://twitter.com/syb0rg" <i class="fa fa-twitter fa-4x"></i></a>
$('body').append('<div id="mask"></div>');
$('body').append('<div id="mask">');

Context

StackExchange Code Review Q#60240, answer score: 4

Revisions (0)

No revisions yet.