‘Follow the Links’

Mandy Brown on what happens when an app tries to keep you within that app:

Because what Twitter (or Facebook, or Apple, or whomever) is also doing when they bring the web to users’ feeds, rather than letting those feeds serve as maps to elsewhere, is diminish the hyperlink. You remember the hyperlink, right? It’s supposed to take you somewhere, to move you from one place to another.

Mandy writes about the tectonic-like shift that the increase in characters on Twitter could turn out to be. Its fascinating. I’d not put the pieces together yet. It could be yet another step in diminishing the very nature of the web.

Obviously, this makes sense monetarily for Twitter. Keeping people on the platform gives them more opportunities for ads. Interestingly, there could actually be some benefits for the user here too. But her ending is dead on:

At some point, a feed that you never leave is going to feel like a prison.

Microsoft Surface Tablets Crash on New England Patriots Sideline

Timothy Burke on Screengrabber:

Microsoft has been on a season-long campaign to make sure you know the tablet computers on NFL sidelines are their Surface models, not iPads. Like most Microsoft products, the Surface tablets are crashing—at least those on the New England sideline.

Hahahahaha! But wait! It gets better!

Update (5:55 p.m): Microsoft has issued a statement denying responsibility for the tablets’ failures.

Real shocker.

The Interview from Hell

Steve Shogren:

This story fills me with an overwhelming desire to never continue the cycle of abuse. I strive every interview to try to respectfully work with the candidate, and never humiliate them. I want every person I interview to leave feeling loved as a human and respected, even if they are completely incapable to perform the duties of the job.

If you are interviewing others, take a serious look at your practices. Would a failed candidate feel humiliated and disrespected? What will they tell their coworkers and friends at meetups about your company? Will they talk about feeling respected, and how they hope to get the chance to work with you one day? Or will they talk of a group of self-righteous jerks who abuse their power to make others feel small?

I don’t remember how I came across this link, but I’m glad I did. I came away feeling so grateful I haven’t had a horrendous experience like this, and resolved to never be the horrendous experience for someone else.

‘Permission Slips’

Emily Mall:

I was too fearful of doing something wrong or messing something up. I needed someone to be willing to take the heat if something went wrong, like trusted friends and professionals. People willing to take the blame. Fearful thoughts get trapped in the spin cycle of: “I’m not supposed to do _____ . I can’t do _____. I don’t even think I’m allowed to _____.” “I couldn’t _____.” Or, “What will people think if I _____.”

Emily tackles the interesting topic of adult permission slips. I’d never thought of this in this way, but boy does it make sense. You grow up dreaming of all the things you’ll do when you become an adult; when you have the freedom to choose for yourself. Then, years later, you realize that you yourself are the biggest obstacle. You don’t give yourself permission.

After reading, I’m vowing to give myself permission for more things.

‘Hamburger, Hamburger, Hamburger’

Jeremy Keith gives the definitive answer on whether the hamburger icon is good or bad:

The answer to the question “Is the hamburger icon good or bad?” is a resounding and clear “It depends.”

Haha! That’s the beauty of design isn’t it? So many things depend on the context. But, knowing how to evaluate whether its the right decision is where Jeremy’s dogma-free post comes in. After reading it, the definitive answer for me is, “Don’t be lazy.”

‘Influencing Web Layouts with Print Layouts’

Chris Coyier on CSS-Tricks:

Print design, despite so often being dubbed “dead” or in massive decline by those of us in web design, still excels in quality and variety of layout.

Certainly we can learn from print design on the web, yeah?

Yes we can. Chris writes a great post on the cool tools we have for layout on the web, and some we might have in the future.

P.S. Watch that Jen Simmons talk he links to. One word: eye-opening.

Using an Ad Blocker is Not ‘Puppy Genocide’

Timothy Geigner on Techdirt:

Lots of sites have recently made ad blocking software a target of their ire, complaining that such software ruins everything and is a form of puppy genocide or whatever.

Boy do they play the victim. His explanation of why people use ad blockers is on point:

There’s a reason why users use ad blockers after all: many online ads suck harder than a vacuum cleaner looking for love. But they don’t have to.

That’s what these idiotic, pushing-their-own-selves-into-irrelevance companies don’t seem to understand. We get that ads support their business, but we don’t want to be tracked, and the ad shouldn’t take over the freaking page. Serve me an ad, don’t track me, load the page fast, and I’ll gladly turn off my ad blocker for you.

‘Star Wars: Episode VIII to Open December 15, 2017’

From StarWars.com:

Today, Disney and Lucasfilm announced that Star Wars: Episode VIII, originally scheduled for release in summer 2017, will now debut on December 15, 2017.

This really bums me out, but I can’t say I blame them. The release of Episode VII I think shocked them. The timing was right, and the competition with other summer blockbusters was non-existent. This will give more time to make a quality film, and I can’t believe that business and creative interests will actually align.

Yep, we’ll have to wait seven more months, but the wait will be worth it.

‘An Invitation to Bring Back Your Personal Site’

Rian van der Merwe:

The point is that publishing on Medium and Twitter and Facebook gives you an immediate shortcut to a huge audience, but of course those companies’ interests are in themselves, not in building your audience, so it’s very easy for them to change things around in a way that totally screws you over

I agree with the whole post, but especially this quote. A lot of the people I follow online use Medium these days. They cross-post their articles for the instant audience they’re being promised.

I don’t trust these companies with my content. You could argue that some audience is better than no audience, but I believe that it comes down to respecting your writing. Your writing has to mean something. In my case it means too much to give to a company where I’m only a column in a database.

Sure, the interests align right now, but look at Twitter. It’s a mess over there, and some of the same people are now at the helm of Medium. Once money becomes an issue, users of their platform are screwed. If you happen to be one of them, I second Rian’s motion. Bring back your personal blog.

Building a Newsletter Form Using Flexbox and Javascript

After creating a form to subscribe to The Bold Report newsletter, I wanted to show you how I did it.

It’s easy to take the little things you do everyday for granted. I do a lot of small dev tasks every week, that I feel like everyone knows how to do. In fact, they probably do it better.

But when I started to think about something I could write about this week, working on this form came to mind. It turned out to be a great mix of things that someone might want to learn. We’ll modify some markup, style it with SCSS and flexbox, and submit the form with javascript.

Marking Up the Form

I use Campaign Monitor for all my newsletter needs. They have a great product, and have always been incredibly nice to me. So let’s start with the markup they give you for your list.

<form action="http://anythingoes.createsend.com/t/t/s/bhrjhl/" method="post" id="subForm">
  <p>
    <label for="fieldName">Name</label><br />
    <input id="fieldName" name="cm-name" type="text" />
  </p>
  <p>
    <label for="fieldEmail">Email</label><br />
    <input id="fieldEmail" name="cm-bhrjhl-bhrjhl" type="email" required />
  </p>
  <p>
    <button type="submit">Subscribe</button>
  </p>
</form>

I don’t really like this markup. I’m going to change it up to be more semantic and nicer looking. First off, we’ll wrap our whole form within a div with the class of .newsletter. Then, instead of using paragraphs to group our inputs, we’ll use a div with the class of .form-group. This allows us to write shared styles so we don’t repeat ourselves unnecessarily.

You’ll notice that each input has a label with a for attribute. This tells the browser that the label and input go together, so people who use screen readers understand our form. I’ve also added attributes like autocomplete="off" autocorrect="off" autocapitalize="off", so filling them in on a mobile device isn’t a hassle for those who have names or email addresses that aren’t recognized.

Lastly, I’ve added an empty div with a class of .newsletter__thankyou where we’ll put a message once someone submits the form.

<!-- index.html --> 
<div class="newsletter">
  <form action="http://anythingoes.createsend.com/t/t/s/bhrjhl/" method="post" id="subForm">
    <div class="form-group">
      <label for="fieldName">Name</label>
      <input id="fieldName" name="cm-name" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" required />
    </div>
    
    <div class="form-group">
      <label for="fieldEmail">Email</label>
      <input id="fieldEmail" name="cm-bhrjhl-bhrjhl" type="email" autocomplete="off" autocorrect="off" autocapitalize="off" required />
    </div>
    
    <div class="button-group">
      <button type="submit" class="button button--primary">Subscribe</button>
    </div>
  </form>
  <div class="newsletter__thankyou"></div>
</div>

Styling the Inputs

With the markup done, we want the form to look good. For this particular form, I wanted the inputs to be inline. Flexbox makes doing this easy.

First, we’ll add flexbox to the form. We want to build mobile first, so we set the flex-direction to column. This puts our items on top of each other. As the browser gets bigger, we change it to row which will put the items inline.

/* site.scss ---------------------- */
.newsletter {
  form {
    display: flex;
    flex-direction: column;
    @media #{$medium-up} {
      flex-direction: row;
    }
  }
 }

Before we go any further, we want to declare our variables. Variables allow us to reuse values in multiple places without having to remember what they are. It also makes changing these values a breeze, if we ever need to.

/* site.scss ---------------------- */
$border-color: #eaecef;
$globalRadius: 3px;
$link-color: #429cd4;

Next, we’ll style the label and input. Since we’re styling under the .newsletter class, we’re styling both inputs at the same time.1

/* site.scss ---------------------- */
.newsletter {
  label {
    display: block;
    font-weight: 600;
  }
  input {
    border: 1px solid $border-color;
    border-radius: $globalRadius;
    color: $dark-color;
    font-size: .95rem;
    padding: rem-calc(5px);
    width: 100%;
    transition: .2s ease-in-out;
    &:focus {
      border-color: $link-color;
    }
  }
}

Now that we’ve got that styled, we want to establish the size for the .form-group. Again, since we’re building mobile first, the default styling will be to give space on the bottom for each .form-group. As the browser get’s bigger, and the inputs are on the same line, we now give some space to the right. Then, we want to tell each .form-group to grow and shrink the same amount to fill the container. We do that with the flex shorthand.

/* site.scss ---------------------- */
.form-group {
  margin: 0 0 rem-calc(15px);
  @media #{$medium-up} {
    // flex-grow: 1;
    // flex-shrink: 1;
    // flex-basis: auto;
    // The above translates into the shorthand below.
    flex: 1 1 auto;
    margin: 0 rem-calc(20px) 0 0;
  }
}

Styling the Button

Everything is looking good except for that button. Let’s fix that. These are all pretty standard things. But you’ll notice that the button is aligned to the top. That’s what that last bit at the end is for. We enable flexbox within the .button-group, then align elements within it to the flex-end. Better!

/* site.scss ---------------------- */
.button {
  background: #ddd;
  border: 0;
  border-radius: 3px;
  font-weight: 600;
  padding: rem-calc(5px) rem-calc(10px);
  &--primary {
    background: $link-color;
    color: white;
    transition: background 300ms ease;
    &:hover, &:focus {
      background: darken($link-color, 8%);
    }
    &:active {
      box-shadow: inset 0 0 3px rgba(black, .1);
    }
  }
}

// This last bit aligns the button to the bottom.
.button-group {
  display: flex;
  align-items: flex-end;
}

Submitting the Form with Javascript

I like submitting the form with Javascript so the person doesn’t have to leave the page. I think it’s a nicer experience. We can do that easily with some code I got from here. You’ll need jQuery for this to work.

Basically, it takes the form and submits it. If there’s a problem, we display a browser alert. If all goes well, we add the class .js-submitted to the empty .newsletter__thankyou. It also injects a little bit of text to say thank you and explain the next steps.

// newsletter.js
$(function () {
  $('#subForm').submit(function (e) {
    e.preventDefault();
    $.getJSON(
    this.action + "?callback=?",
    $(this).serialize(),
    function (data) {
      if (data.Status === 400) { // Things didn't go well.
        alert("Error: " + data.Message);
      }
      else { // All is good in the neighborhood.
        $("form").remove("#subForm");
        $(".newsletter__thankyou").addClass("js-submitted");
        $(".newsletter__thankyou").append("<p>Thanks for subscribing. You’ll be receiving a confirmation email shortly.</p>");
      }
    });
  });
});

Styling the Thank You Message

Everything is looking good, and our form is submitting. But that thank you message needs some love.

/* site.scss ---------------------- */
.newsletter__thankyou {
  &.js-submitted {
    background: lighten($link-color, 40%);
    border: 1px solid lighten($link-color, 20%);
    border-radius: $globalRadius;
    padding: rem-calc(15px) rem-calc(8px);;
    @extend %sans;
    p {
      font-size: 1rem;
    }
  }
}

That’s it! In just a few steps we modified the form markup, styled the form and button, submitted it with javascript, and have a nice looking thank you message for our potential readers. If you’d like to see this form in action, take a look at the subscribe page.

If you have any questions, feel free to find me on Twitter.

  1. You might notice that I use rem-calc. This is a function that I borrow from the Foundation Framework. I use this everywhere.