[tor-relays] Simplifying ExoneraTor

Fri Jul 17 16:17:48 UTC 2015

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

On 17/07/15 18:13, Karsten Loesing wrote:
> 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.

Actually, and this idea crossed my mind one minute after hitting send,
is it a good idea to put in a fixed number of pixels here?  What if a
translated version of ExoneraTor uses more or less space?  Is there a
way to get rid of the 200px?

Thanks again!

All the best,
Karsten

P.S.: Sorry, list, for discussing (web) development things here.  If
we should move elsewhere (tor-dev@?), please somebody say so.

> 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

iQEcBAEBAgAGBQJVqSqrAAoJEJD5dJfVqbCrm70H/1OiDNJtHuKqVkqTkIdoyfE/
/Iu8oOsHhKaNDBMXrxnvGqbiJ9O0Fsx9cfwdHiIzANW0YQN9J0Y1MGdhub9WIH/6
WxKBwMdHZN934CH6PRZEjZl+Ltp9gXWEGzZh8gb6O/kPv99f6I0QaMYoEAFMcNzN
/IchE+mPdPZ3JRNxjSdLrC9wrR2MCa58kxyeugo9uAIeT8gUHs6j53d3ZXk4L5Zr
FH4pjsWPYZUGvDsvDGP8iJPxvH0ZFLSW1lZIuox8lIVFs59XrVe3w8K0nQZclzdc
i9PRmj474z+nL/TBQ7+W41dEYkCyN3GvdebHjdEvjZWP8XfAOwD6hi74zk3Sgh8=
=Ay75
-----END PGP SIGNATURE-----