[tor-relays] Simplifying ExoneraTor

Fri Jul 17 12:58:29 UTC 2015

Hi Karsten, thanks for the feedback.

I've updated the copy on my webserver (http://tucker.wales/tor/exonerator/)
to clean up the markup a little (I rushed the previous version out at 3AM).
I've also improved readibility by using indentation, as is now generally
accepted in web development.

> > Maybe we could also add some information about the expected IP and
> > date formats in the whitespace, too.
>
> Let's talk about that.  I'm also not sure if putting examples into the
> two input text boxes is such a good idea.  I heard that it can confuse
> people by thinking there's already an IP address entered, so why would
> they have to put in another one, which is even more problematic on
> browsers with date selector.  It also hides the fact that ExoneraTor
> supports searches by IPv6 addresses.  Maybe we can put in different
> placeholders and add some good explanations below the form.  I still
> think that less is more with respect to text length, but if we can
> come up with some smart text there, that might do it.
>

I think we could accomplish a good way of providing that information - let
me have a little play around over the next few days/week and I'll try to
propose a good solution.

> So, here's the diff with my questions:
>
> @@ -6,6 +6,7 @@
>  <meta name="viewport" content="width=device-width, initial-scale=1">
>  <title>ExoneraTor</title>
>  <link rel="stylesheet" href="css/bootstrap.min.css">
> +<link rel="stylesheet" href="css/styles.css">
>  <link href="images/favicon.ico" type="image/x-icon" rel="icon">
>  </head>
>  <body>
>
> Is it good practice to use a custom .css file in combination with
> Bootstrap, or should we try to only use Bootstrap's classes,
> properties, etc. to come up with the approximate design that we want?
>  Or, would it be possible to stick with Bootstrap-only styles for now
> until there's no other way than using our own style file to do the
> thing we want?
>

It's completely good practice to use custom css styles/files alongside
Bootstrap. It's the only real way to add custom styling to the page and
this method of creating a "sticky footer" is actually suggested in the
Bootstrap examples.

>
>
> @@ -17,10 +18,15 @@
>  </div><!-- page-header -->
>  </div><!-- col -->
>  </div><!-- row -->
> - -
>  <div class="row">
>  <div class="col-xs-12">
>  <div class="text-center">
> +<div class="row vbottom15">
> +<div class="col-xs-12">
> +<h4>Enter the details of the relay that you would like to check
> below:</h4>
> +</div>
> +</div>
> +<div class="row"></div>
>  <form class="form-inline">
>  <div class="form-group">
>  <label for="inputIp" class="control-label">IP address</label>
>
> What's the purpose of that last row there that doesn't come with any
> columns?
>

I've removed that in the new version, it wasn't meant to be there.

>
>
> @@ -35,6 +41,9 @@
>  </div><!-- text-center -->
>  </div><!-- col -->
>  </div><!-- row -->
> +</div><!-- container -->
> +<footer>
> +<div class="container">
>  <div class="row">
>  <div class="col-xs-6">
>  <h3>About Tor</h3>
>
> I guess the <footer> is what moves the footer to the bottom, together
> with our styles.css, right?  Is that a common HTML thing, a
> Bootstrap-specific thing, a custom tag that only works with our
> styles.css, or how does this work?  Is this the most Bootstrap-y way
> to do it?  (As you notice, I'm trying to stick to the defaults as long
> as possible.)
>

Correct - the margin added to the bottom of the body, along with the
position and height CSS attributes of <footer>, is what moves the footer to
the bottom of the page.

The <footer> tag is HTML5, so it won't work on older browsers - because of
this, I've changed the markup to use div.footer in the updated version
instead of a <footer> tag. This ensures compatibility with older, non-HTML5
browsers.

>
>
> @@ -54,7 +63,9 @@
>  <p class="text-center small">"Tor" and the "Onion Logo" are <a
> href="https://www.torproject.org/docs/trademark-faq.html.en">registered
> trademarks</a>
> of The Tor Project, Inc.</p>
>  </div><!-- col -->
>  </div><!-- row -->
> - -</div><!-- container -->
> +</div>
> +</footer>
>  </body>
>  </html>
>
> Makes sense.  By the way, is it good practice to add these comments,
> or is that just something that old people do who first learned HTML in
> the late 90's and whose favorite HTML editor is vim?
>

It's up to the author, to be honest - it can't hurt to keep them there, I
would agree that it helps greatly to improve readibility (especially when
using a lot of divs).

Thanks,

Joshua Lee Tucker
@tuckerwales
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.torproject.org/pipermail/tor-relays/attachments/20150717/eb82aa2f/attachment.html>