[tor-relays] Simplifying ExoneraTor

Mon Jul 20 08:19:47 UTC 2015

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

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

And there's another problem: we broke the print output, which is quite
important here.  I just reverted this change to make the print output
usable again.  If you can come up with a fix to that, I'll put it back
in.  Thanks!

All the best,
Karsten

> 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

iQEcBAEBAgAGBQJVrK8jAAoJEJD5dJfVqbCr2E8H/i+VanHvFbRUTgXMjvFsTMl0
eTjINEH5RDLlEor2iwtwfHrFzhrncx7wK9oXRHGoY1HXXFfmusNI9RGBRWLiKURB
M4bgKGxeb7RIe1wbOLHUHDjlVgoqG9Wf172wIS7X2THsVLViTkcxeiKKIRaeEtsg
PgoaGFt5CoCz9Ux+jsKvpBW+eHA4jIBqxs1RaNb9PmnZUyMOGlFqeZx/kzi6WgzU
F5g8wzrDEE35vkLbWvYXEi8L47A6KVJszNzojj8yqP3eKAnyO52nJrfVB76oQOza
TWobLr8ypVlo+I/dO6RgS81et+zVK4HI/9lWmVW5cA+lgjbT3bS+HmNq9fHqnlg=
=GTeZ
-----END PGP SIGNATURE-----