‘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. 

Apple Cons f.lux With Night Shift

Stephen Hackett on 512 Pixels:

In many ways, this f.lux/Night Shift thing is pretty similar to other examples of Apple moving into a space defined by a third-party utility: Reading List vs. Instapaper; Dashboard vs. Konfabulator; Sherlock vs. Watson.

The big difference is that f.lux can’t operate on iOS. Night Shift will be the way users can change their screens’ color temperature at night because it’s the only option.

Stephen went way too easy on Apple here. What they’re doing with this whole Night Shift thing is appalling. Not only did they steal—yea, that’s right, steal—an idea from one of their third-party developers, f.lux can’t even operate on iOS.

This is ridiculous. Apple needs to allow it on iOS. I don’t care if this stunt helps f.lux in the long run, it’s ethically wrong. This type of—what feels like a scheme of some sort—discourages developers from their platform.

Netflix’s Stand on Proxies and Unblockers

David Fallagar on The Netflix Blog:

We look forward to offering all of our content everywhere and to consumers being able to enjoy all of Netflix without using a proxy. That’s the goal we will keep pushing towards.

This says a lot. It says a lot about the type of company Netflix is. It says a lot about what they want to accomplish. They hate all of these stupid geographic licensing agreements, but until they’re done away with, the right thing to do is enforce them.

Link via The Loop.

‘Confidence and Overwhelm’

Rachel Andrew:

A lot of folk feel overwhelmed right now. Things seem to be changing so quickly. It doesn’t seem enough to be a good designer, or to know HTML and CSS well. Do we need to learn all of those frameworks? Are we “doing it wrong” if we don’t adopt that methodology and toolkit we were told is the way to do things by that big name speaker at the conference we attended?

I felt this last winter when I was looking for a job. Almost as if I didn’t qualify for my job anymore. That feeling is only amplified when you see everyone talking about the new thing, and how important it is you use it. If that’s not enough, your lack of adoption can feel like you’re “doing something wrong.”

If you’re identifying with these feelings, I recommend you read Rachel’s post. She’s been working on the web for a while, and following her advice on the topic will keep you sane and happy in this industry.