A unique take on the Twitch.tv app

esidebill · 2017-08-13 02:31:53 UTC

Hey guys,

First project that I felt had a good design and interesting interaction, so I’d like a little feedback if possible. I’ve been adding to it here and there as I feel needed

EDIT2: On recommendation, I’ve added a few features:

-Enter will now work with the search bar
-An alert pops up if you try to add an existing streamer
-There is an animation for adding or removing a streamer, which is now very smooth thanks to rmdawson71!
-If a streamer does not exist you get an alert

Thanks,

Bill

randelldawson · 2017-08-13 02:54:15 UTC

Hi Bill,

I do like the direction you have taken with the Twitch.tv app. I would like to make two suggestions which would improve the user experience.

It would be great if the search worked when pressing the Enter key as well as clicking the Go button
If I enter a name that does not exist, I think it would be better to have a message appear letting the visitor know there is no such streamer. You do that currently, but it creates an entry that the user must click to remove the streamer. I think a message dialogue that has a simple “Close” or “X” on it is. To me, only valid streamers should show up after a search is performed.

EDIT: I have one more suggestion.

Since you have a Sort dropdown, why not sort by streamer name within each category. If someone selects All, then you could either sort by category first and then my streamer name or just overall by streamer name. Just my 2 cents worth.

esidebill · 2017-08-13 04:32:00 UTC

Thanks for the feedback. I instinctively hit enter myself and hadn’t gotten around to making that happen, haha.

The message with an X would be much better I agree. I’ll implement that.

And I’ll optimize the sort menu as well.

randelldawson · 2017-08-13 23:08:26 UTC

I would strongly suggest only using alert() for debugging purposes only. My suggestion is to create a div (hidden by default) with a place holder for the error message you want to display. When you want to display the error, you can change out the html inside of this div with the applicable error message. This div will have a z-index of 1 so it will sit on top of your app until you click “close” or some other button. Then you will add an onclick handler for the “close” button which will change the css of the div back to display:none;.

esidebill · 2017-08-13 23:10:18 UTC

Will do, thanks again.

randelldawson · 2017-08-13 23:57:32 UTC

To get the effect you are looking for when removing a streamer, replace the following:

          $(".remove").click(function() {
            $(this).slideUp("slow", function() {
              $(this).parent().parent().parent().remove();
            });
          });

with:

          $(".remove").click(function() {
            $(this).parent().parent().parent().slideUp("slow", function() {
              this.remove();
            });

UPDATE: Below is another option for the remove if you were to add a data-user attribute which was the same as user-id variable to the button like below:

<button data-user='" + user_id + "' class='btn btn-secondary btn-sm remove'>Remove streamer</button>

then your $(".remove").click(function() would look like:

          $(".remove").click(function() {
            $("#" + $(this).attr("data-user")).slideUp("slow", function() {
              this.remove();
            });
          });

esidebill · 2017-08-14 00:45:26 UTC

Added your last option and it looks beautiful now. Thanks for all your help.

randelldawson · 2017-08-14 01:32:14 UTC

How about adding a stand alone function to handle displaying the error message instead of duplicating all that code:

function showError(user_id,message) {
    $("#alert_box").html(
    "<button type='button' id='close_button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button><strong>Whoops!</strong> " + message);
        $("#alert_box").css("display", "block");
        $("#close_button").on("click", function() {
          $("#alert_box").css("display", "none");
          $("#alert_box").html("");
        });
    //    $("#user_input").val("");  if you clear the input, someone can not just fix a typo
  }

Then you can call the function with:

showError(user_id, "That streamer's already been added");

OR

showError(user_id, "No such streamer");

esidebill · 2017-08-14 02:28:19 UTC

Yes, one thing I learned was that if you need to use a bit of code more than once, you should probably use a function

It works good.

jenovs · 2017-08-15 04:37:15 UTC

HTML validator shows following errors:

Attribute “;” not allowed on element “div” at this point.

<div class="btn-group";>

The element “button” must not appear as a descendant of the “a” element.

<a href="https://..." target="_blank"><button class="btn ...

The “aria-labelledby” attribute must point to an element in the same document.

<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu2">

It’s not recommended to use ids in CSS - they have a high specificity. Reserve them for JS and use classes for styling.

You should cache your jQuery selectors. Here

$('#alert_box').css('display', 'block');
    $('#close_button').on('click', function() {
      $('#alert_box').css('display', 'none');
      $('#alert_box').html('');

jQuery each time searches the DOM for #alert_box. Save it to variable and use it (const alertBox = $('#alert_box') and then use it like alertBox.css(do stuff))

Also if you wrap input element in a form, you don’t have to do if (e.keyCode == 13), you’ll get submit on enter for free

esidebill · 2017-08-15 04:44:02 UTC

Thanks for the pointers. I’ve been optimizing it a bunch, so some stuff might have stuck around when I didn’t mean for it to be there.

Overall, this has improved quite a bit in the past couple of day’s so I’m quite happy with all the feedback so far.

Added your suggestions, I appreciate learning ways to simplify my code (such as saving an annoying to type jQuery request as an easy variable).

jenovs · 2017-08-15 04:58:04 UTC

You can also chain in jQuery.

alertBox.css("display", "none");
alertBox.html("");

is the same as

alertBox.css("display", "none").html("");

esidebill · 2017-08-15 05:00:15 UTC

Good point. I’ve been using the dot chains a lot lately all over the place so I’ll keep them in mind.

jenovs · 2017-08-15 05:25:32 UTC

In JS variables usually use camelCase: var twitchApiUser instead of var twitch_api_user.

HTML has select element for dropdown lists. It has onchange event.

You can use it like this:
HTML:

      <select name="Sort" id="dropdown">
        <option class="dropdown-item" id="all" value="all">Show all</option>
        <option class="dropdown-item" id="online" value="online">Online</option>
        <option class="dropdown-item" id="offline" value="offline">Offline</option>
      </select>

JS (without jQuery):

  document.getElementById('dropdown').addEventListener('change', handleFilter);

  function handleFilter(e) {
    console.log(e.target.value); // here you'll have selected value
  }

Then if you save your list of users in an array, you can iterate over it and filter out results to show on the page.

Also as a challenge you could re-write your app without using jQuery and Bootstrap

esidebill · 2017-08-15 15:44:05 UTC

Thanks. It’s been a habit naming things a certain way from Python so I’m still getting the etiquette down lol. I definitely want to be good at vanilla JS so that’s a solid idea.