Monday, June 11, 2012

Building HelloSun, Step 6: Speech Bubbles

HelloSun: A guide to creating a social networking empire, from scratch, for free, circa 2012.
⇐ Step 5 T.O.C.

I'm not very happy with this scrolling "chat" part of the web page, which so far looks like this:


I'd much prefer each person's comment to appear in a speech bubble, as I've sketched on this post-it note:


prototyping with newfangled css layout and rounded corners

Borrowing liberally from Pure CSS speech bubbles, I tweaked this local html file:

<html>
<head>
<style type="text/css">

.bubble-content {
  position:relative;
  padding:6px;
  margin:4px 0 0 0;
  color:#000;
  background:#f3961c; /* for browsers without gradient support */
  /* css3 */
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
  background:-moz-linear-gradient(#f9d835, #f3961c);
  background:-o-linear-gradient(#f9d835, #f3961c);
  background:linear-gradient(#f9d835, #f3961c);
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  -webkit-border-bottom-left-radius:0;
  -moz-border-bottom-left-radius:0;
  border-bottom-left-radius:0;
  font-family: Arial;
  font-size: 12px;
}

.bubble-citation {
  margin:0 0 8px 0;
}

.whom {
  margin: -8px 0 0 14px;
  color:#000;
  font-family: Arial;
  font-size: 12px;
}

.quote-tail {
  background:#f3961c;
  width:20px;
  height:16px;
  -webkit-border-radius:8px;
  -moz-border-radius:8px;
  border-radius:8px;
  margin:0;
  margin-top:-9px;
}

.quote-tail2 {
  background:#fff;
  width:14px;
  height:12px;
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:6px;
  margin:0;
  margin-top:-12px;
  margin-left:8px;
}
</style>

</head>
<body>
  <div class="bubble-content">
    This is some bubble content I could just go on and on and on
    and maybe I will because, really, you know, I have an awful
    lot to say because I'm just very verbose.
  </div>
  <div class="bubble-citation">
    <div class="quote-tail"></div>
    <div class="quote-tail2"></div>
    <div class="whom">Tommy</div>
  </div>

  <div class="bubble-content">
    This is some more bubble content.
  </div>
  <div class="bubble-citation">
    <div class="quote-tail"></div>
    <div class="quote-tail2"></div>
    <div class="whom">Sally</div>
  </div>
</body>
</html>

In a modern browser the HTML above produces this page


That looks enough like the bubble quotes I drew on the post-it note that I'll use it. (I may come to regret relying so much on the latest CSS, when I get around to testing in different browsers--but since the primary clients I'm considering will be the most popular smartphones, and they all support this level of CSS, I won't worry about this issue yet.)

change the chat insertion code to use these newfangled css bubble quotes

By adding the css classes from the local html prototype file into the "chatty.css" file, and changing the "appendMsg()" function in "chatty.js to this:

function appendMsg(msg) {
    $('#msgs').append(function() {
        var div, html;
        div = $('<div>');
        html = '<div class="bubble-content">' +
                    simple_html_escape(msg.message) +
                '</div>\r\n' +
                '<div class="quote-tail"></div>\r\n' +
                    '<div class="quote-tail2"></div>\r\n' +
                    '<div class="whom">' +
                        simple_html_escape(msg.username) +
                    '</div>\r\n' +
                '</div>\r\n';
        div.html(html);
        return div;
    });
    $('#msgs')[0].scrollTop = $('#msgs')[0].scrollHeight;
}

the server now displays the chats within speech bubbles.

let's look better on an iPhone

The primary client for HelloSun is expected to be mobile clients. A couple of small adjustments can be made to make this code look better on iphones. The primary change is adding a "meta" tag to the layout of all files in this line added to layout.jade:

  meta(name="viewport",content="width=device-width; initial-scale=1; maximum-scale=1")

check for blank inputs

The next little change for today's code is to prevent users from submitting if they haven't entered either a name or a message, because if those fields are blank it looks silly on the client displays. That's done with a simple function to remove space from the beginning and end of fields (the "trim()" method found at Javascript Trim LTrim and RTrim Functions), and a simple check in the "sendMsg()" function of chatty.js to verify that the fields are not blank.

always scroll for new messages

The final change for today's code is to automatically scroll to the bottom of the page when a new message comes. This ensures that users are always seeing the latest messages from other users. This line in "chatty.js" function "appendMsg()" replaces the old style to work with the new type of page. (It's not particularly elegant, but it works.)

  window.scrollTo(0, document.body.scrollHeight);

the new look

With all of today's changes, the chat program now looks something like this:


...and that's good enough for today.

Getting the code

Today's code is labeled v0001.0005 and is available in these formats:
HelloSun: A guide to creating a social networking empire, from scratch, for free, circa 2012.
⇐ Step 5 T.O.C.

No comments:

Post a Comment