<div dir="ltr"><div>Hi Karsten, thanks for the feedback.<br><br></div>I've updated the copy on my webserver (<a href="http://tucker.wales/tor/exonerator/">http://tucker.wales/tor/exonerator/</a>) 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.<br><br><div><div><div class="gmail_extra"><div class="gmail_quote"><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<span class=""><br>
> Maybe we could also add some information about the expected IP and<br>
> date formats in the whitespace, too.<br>
<br>
</span>Let's talk about that. I'm also not sure if putting examples into the<br>
two input text boxes is such a good idea. I heard that it can confuse<br>
people by thinking there's already an IP address entered, so why would<br>
they have to put in another one, which is even more problematic on<br>
browsers with date selector. It also hides the fact that ExoneraTor<br>
supports searches by IPv6 addresses. Maybe we can put in different<br>
placeholders and add some good explanations below the form. I still<br>
think that less is more with respect to text length, but if we can<br>
come up with some smart text there, that might do it.<br></blockquote><div><br></div><div>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.<br></div><br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<br>
So, here's the diff with my questions:<br>
<br>
@@ -6,6 +6,7 @@<br>
<meta name="viewport" content="width=device-width, initial-scale=1"><br>
<title>ExoneraTor</title><br>
<link rel="stylesheet" href="css/bootstrap.min.css"><br>
+<link rel="stylesheet" href="css/styles.css"><br>
<link href="images/favicon.ico" type="image/x-icon" rel="icon"><br>
</head><br>
<body><br>
<br>
Is it good practice to use a custom .css file in combination with<br>
Bootstrap, or should we try to only use Bootstrap's classes,<br>
properties, etc. to come up with the approximate design that we want?<br>
Or, would it be possible to stick with Bootstrap-only styles for now<br>
until there's no other way than using our own style file to do the<br>
thing we want?<br></blockquote><div><br></div><div>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.<br></div><div> </div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<br>
<br>
@@ -17,10 +18,15 @@<br>
</div><!-- page-header --><br>
</div><!-- col --><br>
</div><!-- row --><br>
- -<br>
<div class="row"><br>
<div class="col-xs-12"><br>
<div class="text-center"><br>
+<div class="row vbottom15"><br>
+<div class="col-xs-12"><br>
+<h4>Enter the details of the relay that you would like to check<br>
below:</h4><br>
+</div><br>
+</div><br>
+<div class="row"></div><br>
<form class="form-inline"><br>
<div class="form-group"><br>
<label for="inputIp" class="control-label">IP address</label><br>
<br>
What's the purpose of that last row there that doesn't come with any<br>
columns?<br></blockquote><div><br></div><div>I've removed that in the new version, it wasn't meant to be there.<br></div><div> </div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<br>
<br>
@@ -35,6 +41,9 @@<br>
</div><!-- text-center --><br>
</div><!-- col --><br>
</div><!-- row --><br>
+</div><!-- container --><br>
+<footer><br>
+<div class="container"><br>
<div class="row"><br>
<div class="col-xs-6"><br>
<h3>About Tor</h3><br>
<br>
I guess the <footer> is what moves the footer to the bottom, together<br>
with our styles.css, right? Is that a common HTML thing, a<br>
Bootstrap-specific thing, a custom tag that only works with our<br>
styles.css, or how does this work? Is this the most Bootstrap-y way<br>
to do it? (As you notice, I'm trying to stick to the defaults as long<br>
as possible.)<br></blockquote><div><br></div><div>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.<br><br></div><div>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.<br></div><div> </div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<br>
<br>
@@ -54,7 +63,9 @@<br>
<p class="text-center small">"Tor" and the "Onion Logo" are <a<br>
href="<a href="https://www.torproject.org/docs/trademark-faq.html.en" rel="noreferrer" target="_blank">https://www.torproject.org/docs/trademark-faq.html.en</a>">registered<br>
trademarks</a><br>
of The Tor Project, Inc.</p><br>
</div><!-- col --><br>
</div><!-- row --><br>
- -</div><!-- container --><br>
+</div><br>
+</footer><br>
</body><br>
</html><br>
<br>
Makes sense. By the way, is it good practice to add these comments,<br>
or is that just something that old people do who first learned HTML in<br>
the late 90's and whose favorite HTML editor is vim?<br></blockquote><div><br></div><div>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).<br><br></div><div>Thanks,<br><br></div><div>Joshua Lee Tucker<br></div><div>@tuckerwales<br></div></div></div></div></div></div>