[tor-relays] Simplifying ExoneraTor

Fri Jul 17 16:13:02 UTC 2015

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

On 17/07/15 14:58, Joshua Lee Tucker wrote:
> Hi Karsten, thanks for the feedback.

Hi Joshua,

> 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.

Great, I just pushed two commits based on your suggestions.  I made
some minor edits like changing those 180px to 200px because that
apparently fixed a problem in Firefox that always displayed a
scrollbar before.  I also chose two spaces as indentation rather than
tabs.  Minor stuff.

New version with your tweaks deployed here:

https://exonerator.torproject.org/

>>> 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.

Great, let me know what you come up with!

>> So, here's the diff with my questions:

Your answers below all make sense to me.  Thanks for explaining things
in detail!

Thanks a lot!

All the best,
Karsten

>> @@ -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
> 
> 
> 
> _______________________________________________ tor-relays mailing
> list tor-relays at lists.torproject.org 
> https://lists.torproject.org/cgi-bin/mailman/listinfo/tor-relays
> 

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1
Comment: GPGTools - http://gpgtools.org

iQEcBAEBAgAGBQJVqSmOAAoJEJD5dJfVqbCrubAH/RlnLXSlMxmvcO/VZJ/6jzn3
1V9SBS5N3VTW/JQ9JoBiEhoEEvWvPSQKxNRl7QYnhNeyP3oe+EoSizNr9NN6VOc5
WszxTg3ckEB4eRBhXk2jvOJ2mu6oKj+ucFWJDbfw+owtzvZnLPFJPXpUMc6vL2LA
ieTyYIaJXQYNoSPkH7ezSYH1WDGNRyyEhDyZt2aUdTEq2VdGZP3EwS7PDOWaEE1Z
K4g+3P7gK7byUdwaZ9zpO3e393ZvGnFP58/lcTDFj3mpa+RU8XvsCB6W3nEwMTT+
wz1zbzVT7FvC9CxcHkum21E6GWXOogxx1tyvJ2TjE+8MAKJOlVSpD3UpwtBIobw=
=F28f
-----END PGP SIGNATURE-----