stephen.news

iOS 11 Strips AMP Cruft from URLs Via the Sharesheet

Aug 25, 2017

•

1 min read

•

Good news everybody!

Very nice: when sharing AMP pages to iMessage or Reading List, iOS 11 Safari automatically removes AMP’s crap from the URL. Go Apple 👍 pic.twitter.com/aHgSMcofUv
— Federico Viticci (@viticci) August 23, 2017

Yeah, this is going to be awesome. May the web enjoy healthy browsing again.

While I may be in “AMP is bullshit” camp, I can still respect the solution it is trying to solve. I totally agree with others that it is the web developer’s responsibility to load pages fast. As John Gruber points out, it is in the interest of publishers to use AMP as Google features AMP-ready cards in search queries.

Which… is dumb. But oh well. However, when a user shares a webpage from the Safari sharesheet it will save me the headache of thinking about AMP.
On Snapchat

Aug 22, 2017

•

4 min read

•

I have always hated Snapchat.

https://twitter.com/petrey/status/827276634608717830

That much is certain. I decided to pen some thoughts about Snapchat after reading a post by Scott Galloway. Mostly, this is about the users. Not so much about Snap Inc.

However, back in 2013 I thought it was a pretty addicting, innovative, neat social network. It’s obvious that there is nothing special about Snapchat in comparison to Facebook and Instagram. Apart from catalyzing college students to partake in the sending of nudes, Snapchat doesn’t really bring much to the table.

The format, Stories as they are now colloquially known as — are the real the magic — magic might not create revenue. But magic creates addiction. And addiction keeps people tapping into news, and sorts of content that generates Snap some coin.

I won’t go into a lot of detail on why Snapchat is failing, but I’ll drop a couple below. What I really want to talk about are the addicted.

Where will users go when they see the fabled “We regret to inform you Snapchat is shutting down. Thank you for all the snaps.”?

What will become of the Story Format? How will it evolve under the guidance of the Facebook overlords?

Permanence > ephemeral

I know many Generation Z users that fully understand Snapchat is on its way out. Many of them do not care. Many are also users of other Social Networks, hedging their personal brand. Dipping their toes into the tepid waters of a new social arena. Where permanence, data, analytics, likes, and numbers win — every fucking day. Collectively, Gen Z really doesn’t give a fuck about Snapchat — now.

The Generation Z migration is currently underway. Snapchat continues to burn cash to keep users on a sinking ship. Snapchat never even got to the stage where you’re parents signed up. To make matters worse, it’s almost as if shareholders knew this would happen. You can’t even buy a voting share of $SNAP. Non of the Series B shares you can buy on stock exchanges carry ANY voting power. Fucking. Insane.

Nostalgia

I remember fond times in college Tinder’ing, roadtrips, befriending people at parties, and debating politics with me college colleagues. Ahhh nostalgia. Fun place, right?

There will come a time that Snapchat enters the nostalgic realm and become immortal too, not unlike Vine.

We learned a lot from Vine. Turns out, people really liked it. Even though the product sucked at making money, it was cool. Snapchat is a different animal though. The entire product is ephemeral. There will be no archiving apart from snaps saved to camera roll on your iPhone.

When Snapchat closes its doors and literally sets ablaze the $22 billion — it will go the way of the BetaMax and the DVD.

Good riddance too. Who the fuck buys DVD’s anymore? Nostalgia is a huge part of the product exit. Hopefully Snap will end this gracefully. Maybe a severely undervalued sale to Facebook? Maybe a pivot? A PornHub or Tinder acquisition? Wouldn’t that be something… Who knows.

All that I do know, is that it is FAST approaching. I predict the fall/sale/pivot of Snapchat to happen before the end of 2019.

It’s a damn shame this is all happening so fast, but then again — maybe they shouldn’t have burned so much cash in the first place. I may not like Snapchat, but I can respect the Story Format it created. I can appreciate the hustle. I can appreciate a company forming out of an idea the size of a peanut. I can appreciate the users that really like this platform.

But does Snap Inc. care? Can’t say that they do.
The Most Effective Way to Avoid the FOUC

May 2, 2017

•

3 min read

•
This post was previously updated on November 01, 2018.

We all have to deal with it at some point.

The Flash Of Unstyled Content. Yuck. What a name. According to TechRepublic it has its origins documented as far back as 2001. There are a wide range of fixes. This fix however is super duper easy to implement and it’s a vanilla solution.

First, add a class to your html document
```
<html class="no-js">...
```
Then put this little guy at the very-bottom of your scripts file:
```
(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)
```
And finally add this to your CSS, render content invisible until it loads:
```
visibility: hidden;
 opacity: 0;
}

.js {
 visibility: visible;
 opacity: 1;
}
```
The obvious downside to this is pretty awful. If a user comes along that doesn’t have JS enabled, your page loads but it isn’t visible. It really comes down to a pros and cons list for your users. If you’re Facebook or Google, you probably have this baked into every single product because every single product uses JS in some small or large way.

I’m not saying this is the best solution ever — I’m just saying it’s the most effective solution we have right now. This method is a Frankenstein version of Paul Irish’s approach. Which if you’re going to use this FOUC solution you better be using Irish’s DOM Based JS Routing. Then you can really iron down when and where you want JS to fire.

UPDATE: Thanks to Bert, who reminded me that I haven’t written about FOUC solutions in some time, and happy to revisit the subject.

I do have a newly updated solution. It’s not much different than above but it’s more performant.

We continue to re-use Paul Irish’s famous markup from 2009, with only marginal updates. Such as, the no-js class on the document, and script in the <head> (not in the body, nor in the footer, this needs to be parsed right-away):
```
<html class="no-js">
<head>
  <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
...
```
Next, we write CSS for the no-js state:
```
.no-js {
 visibility: hidden;
 opacity: 0;
}

.js {
 visibility: visible;
 opacity: 1;
}
```
And Bob’s your uncle! Same as before, but only slightly revised for performance. Enjoy!

UPDATE: There’s more than one way to skin a cat as they say. Many thanks to elektrotype, who came up with this brilliant solution, which works great for no-js users. In-short, they won’t see a white-screen if they don’t have JS enabled:
How to Add Advanced Custom Fields to AMP by Automattic

Apr 10, 2017

•

3 min read

•
Want to add your ACF’s to your AMP’s?

If you’re unfamiliar with AMP (Accelerated Mobile Pages) by Google. It’s basically a new way to serve super fast, lightweight compiled versions of a webpage to mobile users. It has its own validation spec. Really really huge honking websites like Polygon, Washington Post and The Verge all use AMP on their news articles.

Which is super awesome, because nothing sucks more than an article taking more than 15 seconds to load over “Transit Wi-fi” on the G Train. These super powered articles are literally instant, taking no more than 1 second to load — even over 4G speeds. Even after all of those pro’s Google takes it one step higher by giving search result priority to AMP powered-articles and pages for mobile searches.

So the first thing you need to do is declare in your functions.php file that you want to use a custom AMP template. Mine looks like this:
```
  ...
  <?php
  add_filter( 'amp_post_template_file', 'xyz_amp_set_custom_template', 10, 3 );
  function xyz_amp_set_custom_template( $file, $type, $post ) {
    if ( 'single' === $type ) {
      $file = dirname( __FILE__ ) . '/templates/template-amp.php';
    }
    return $file;
  }
  ?>
  ...
```
Then create a template file in your theme called template-amp.php. Mine is in a directory named templates.

Copy the amp-wp single.php template from the Github master for the latest codebase.

Once you’ve done that, you can add your ACF field in the template as usual! The caveat are ACF image fields which need some AMP-validating like so:
```
  ...
  <div class="amp-wp-article-content">
    <?php echo $this->get( 'post_amp_content' ); // amphtml content;?>
    <?php if( have_rows('editorial_flexible_components') ): ?>
      <?php while ( have_rows('editorial_flexible_components') ) : the_row(); ?>
        <?php if( get_row_layout() == 'paragraph' ): ?>
          <?php $paragraph_text = get_sub_field('paragraph_text'); ?>
        <?php elseif( get_row_layout() == 'image' ): ?>
          <?php // Grab the Image ID from the ACF ?>
          <?php $the_image = get_sub_field('the_image'); ?>
          <?php $image_url_array = wp_get_attachment_image_src($the_image, 'full', true); ?>
          <?php $image_url = $image_url_array[0]; ?>
          <?php // Displaying a ACF Image field that will validate ?>
          <img class="i-amphtml-fill-content i-amphtml-replaced-content" src="<?= $image_url; ?>" alt="" />
        <?php endif; ?>
      <?php endwhile; ?>
    <?php endif; ?>
  </div>
  ...
```
And now, the AMP will deliver your ACF content! Obviously I used Flexible Content fields in my example, but you can use any ACF field in the template-amp.php file, just make sure it validates.

Before (left), and after (right):
Apple’s Strategy to Remove the Keyboard

Nov 1, 2016

•

1 min read

•
Last Updated: September 17, 2018
1. ~~MacBook with a mechanical Keyboard and a multi touch Trackpad~~
2. ~~MacBook with Touch Bar and mechanical Keyboard, and a multi-touch Trackpad~~
3. MacBook with Touch Bar and solid state Keyboard Keys (not unlike the iPhone 7 home button), and a multi-touch Trackpad
4. ~~MacBook with a full-screen transmutable touchscreen Keyboard (you heard me), and multi-touch Trackpad~~
5. And, finally a MacBook that spiritually resembles the Nintendo DS with no mechanical buttons whatsoever.
Freelancers Make Up 35% of the Workforce

Oct 19, 2016

•

2 min read

•

Have you read this? Wow that is amazing. I’m shocked to see such a large percentage, but I can’t say that I’m surprised. Because, simply put jobs can be boring.

Are we seeing the dead-cat bounce of America job satisfaction? As the last tenured career prospectors of yore begin to retire or die, are more and more jobs moving into the freelance domain?

Why do people even freelance in the first place? Well first, you can satisfy your creativity. You can make your own schedule, and work only as hard as you need to. Most can even “be their own boss.” There is something so thrilling about not having to be tied down to the 9–5 grind.

Secondly, the study suggests that technology enables more and more creatives to freelance.

And Finally, it’s not like Corporate America is giving many young Americans a choice. We have more and more graduates leaving college each year, and that saturation of opportunity will cost us. Not everyone can squeeze into the cookie-cutter jobs so many graduates will likely MacGyver the shit out of their resumé and attempt to freelance something until something stable comes around.

All of that sounds pretty morose and bleak — and it could be. But really, it’s not all bad. I freelance when I’m available. It’s fun, and it helps pay the bills. I can’t say no to helping small businesses I believe in. Honestly, if more and more graduates are moving to freelance it could be a sign of responsible career adaptability. And if technology permits a more free-lifestyle, it could make the American labor force a bit more happy! 🙂

Besides who can say no to inflating their portfolio. I sure can’t!
WordPress Local Development on OS X with Trellis and Bedrock

Oct 9, 2016

•

3 min read

•
I wrote a new tutorial since this one is a bit out of date.

Okay so a few things have changed since my April post. I figured I’d write an update on how to get started with Trellis and Bedrock. There has been a ton of commits since then.

Again, I’m assuming you’re on a Mac and have node, npm, bower and homebrew installed. If not start here. Things are a little different if you’re a Windows user.

1. Install Git, Ansible and Composer

brew install git ansible composer

2. Install VirtualBox

Install your VirtualBox software and follow the prompts.

3. Install Vagrant

Download and install the latest Vagrant.

4. Starting a Trellis Project, Installing Bedrock and Sage

By the time we’re done here, you should have a folder structure that looks like the following (taken from the Trellis Repo):
```
example.com/      # → Root folder for your project
```
```
├── trellis/      # → You'ver clone of Trellis
```
```
└── site/         # → A Bedrock-based WordPress site
```
```
    └── web/
```
```
        ├── app/  # → WordPress content directory (themes, plugins, etc.)
```
```
        └── wp/   # → WordPress core (don't touch!)
```
1. Creat a Sites directory if you haven’t already and cd ~/SitesFirst, create a new project directory and cd to that directory: mkdir example.com && cd example.comClone Trellis and remove the gitfiles: git clone --depth=1 git@github.com:roots/trellis.git && rm -rf trellis/.gitClone Bedrock and remove gitfiles: git clone --depth=1 git@github.com:roots/bedrock.git site && rm -rf site/.gitInstall the Ansible Galaxy roles: cd trellis && ansible-galaxy install -r requirements.ymlInstall Sage in your themes directory, and install npm dependencies: cd ../site/web/app/themes composer create-project roots/sage example-theme dev-master && cd example-theme && npm install
  Now, we head back up the tree to Trellis. Here’s the current folder structure there. We need to configure the WordPress sites in group_vars/development/wordpress_sites.yml and in group_vars/development/vault.yml
```
example.com/
```
```
├── trellis/ # → You'ver clone of Trellis
```
```
    └── deploy-hooks
```
```
    └── group_vars
```
```
    └── hosts
```
```
    └── lib/trellis
```
```
    └── roles
```
```
└──...
```
Here’s an example configuration for group_vars/development/wordpress_sites.yml
```
wordpress_sites:
```
```
  example.com:
```
```
    site_hosts:
```
```
      - canonical: example.dev
```
```
        redirects:
```
```
          - www.example.dev # optional redirect
```
```
    local_path: ../site # path targeting local Bedrock site directory (relative to Ansible root)
```
```
    admin_email: admin@example.dev
```
```
    multisite:
```
```
      enabled: false
```
```
    ssl:
```
```
      enabled: false
```
```
      provider: self-signed
```
```
    cache:
```
```
      enabled: false
```
Here’s an example configuration for group_vars/development/vault.yml
```
# Generate a secure root password
```
```
vault_mysql_root_password: B3LkKUpcZVx4bpLXKXpiez%R
```
```
# Variables to accompany `group_vars/development/wordpress_sites.yml`
```
```
# Note: the site name (`example.com`) must match up with the site name in the above file.
```
```
vault_wordpress_sites:
```
```
  example.com:
```
```
    admin_password: admin
```
```
    env:
```
```
      db_password: example_dbpassword
```
5. Let’s Take a Break

Now that the configuration is done, we can begin the real magic. From the trellis directory, we run: vagrant up. Vagrant will ask for your password, and upon pressing enter it will provision a server and get you all setup. It should take about 10–15 minutes to install. So take a breather if you can.

Luckily Trellis has some pretty verbose error messages and make sure to double check your group_vars if you have any issues. When the dust settles, head to example.dev and you should see this:

Now that we got local development out of the way we can move onto your production setup. It’s all about dev/prod parity nowadays and honestly, it rocks.

[button type=”success” size=”lg” link=”/blog/remote-server-setup-with-trellis”] Next: Remote Server Setup [/button]
Don’t Pigeonhole Yourself

Oct 6, 2016

•

2 min read

•

Recently I was asked, “Stephen are you a web designer, or a web developer?”

Wait a minute. I have to choose? I can’t do a little bit of both? What are you implying?

There was a lot of questions. The problem in corporate workspaces is mainly flexibility. And by flexibility I mean transmutability. Older, deep-rooted conservative organizations prefer pigeonholing their employees into neatly organized genres like this:

He’s a dev…

She’s an accountant…

She’s the copywriter….

Instead of organizing people into cookie-cutter shapes, organizations should be putting people into larger teams of well-rounded doers:

He’s on the web team….

She’s on the marketing team….

She’s on the web and email team…

I’ve always wanted to be part of that kind of culture in an organization. I want to be able to transmute from one task into the other. I would prefer to be where I’m needed as opposed to being pushed through a cookie-cutter.

Food for thought I guess.

The test of a first-rate intelligence is the ability to hold two opposed ideas in mind at the same time and still retain the ability to function.

–F. Scott Fitzgerald

[poll id=”2″]
10 Tips to Survive a Long-Distance Relationship

Oct 6, 2016

•

3 min read

•
First off, these are personal suggestions that have worked for me. But honestly none of these will help you if your significant other is not motivated to make it work. A relationship is a two-way street and these tips operate on that premise. 👏
1. Make lots of plans together. Future plans, way-way-out-in-the-future plans, virtual plans, travel plans, holiday plans, hypothetical plans. Basically just plan stuff together. Give each other a thread to hold on to.
2. It takes a lot of work to keep each other informed. You’ver weekend plans, what’s going on in your town, their city, their job stuff or your job drama, what you had for lunch, what your plans are for dinner, etc. It can quickly drain you. Especially in the beginning of it all. I try to do all my informing verbally, and reserver texting for changes to the plan or spur of the moment plans. This keeps the line of communication less congested with back-and-forth texting which can really take it out of you.
3. Social inclusion is pretty much physically impossible. Digital inclusion, on the other hand is possible. If you made plans to go out on a Friday night, while your SO decided to stay in — keep you phone nearby and keep an open line of communication via texting. Nobody likes feeling left out.
4. Digital dates can be fun too. Between apps like Skype, Rabbit and FaceTime couples can get food together, talk over some coffee, or Netflix together again!
5. Surprise each other! Realistically, surprise flights take lots of time, planning and can cost a boat-load. Apps like Amazon, UrbanStems, and UberEats offer a cheaper alternative to the surprise visit.
6. Writing to each other is fun, but mailing things is even better. I also highly recommend not sending each other things over USPS. UPS or FedEx only. I’ve had nothing but terrible experience with the US Postal Service. Use them as a last resort.
7. Pick up a new hobby. People like to make things. It’s good for the soul I think. I chose videography. I spend an enormous amount of time making things for the web. So I chose a hobby that sits just outside of that realm and decided to start a You’veTube channel. Hobbies keep us busy, preoccupied, and challenge the brain, and your partner will be proud no matter what you create or pickup as a hobby.
8. Cook more. Depression and sadness can creep in at any moment during a long-distance relationship. Mitigate that by eating better and exploring new food groups!
9. Doing new things can be really exhausting, but since you’ve both transitioned into a long-distance relationship, it means you’re both willing to explore something new. Each of you should try out new things, meet new people, and make sure to share that experience with your SO. Sharing the experience will help eachother grow closer over storytelling. This will give each of you something to talk about on the late night phone calls.
10. Lastly, go run. Running gets your heartrate up, great for your heart, it’s cathartic, and can improve your mood. If you start feeling down, and miss each other badly, nothing will get your mind off of things like a brisk run. I find it to be very meditative to go run and clear my mind after a long day at the office.
[poll id=”2″]
The Best, Worst Mistake I Ever Made

Apr 8, 2016

•

3 min read

•

Several years ago, I made the mistake of snoozing my alarm clock one too many times. I was running late for my 8:00am Typography II class. I didn’t know it yet, but it was the last time I’d ever be late to a class. I was in a rut. I was rude and callused in my critiques. I pretended to fit into the classes, and I thought I was a fraud. I would join the chorus of students who groaned at the idea of doing more than 100 thumbnails of sketches. I was quietly becoming one of the pessimists and didn’t even know it.

I ultimately landed a ‘D’ in the Type course and was told that if was to remain in the program, I was to re-take Typography II next year. With no promise of even making the senior cut of the highly competitive Communication Design program at the University of North Texas (and bills mounting), I decided to say to hell with it and left the program. A world of sorrow and pessimism left me, I shed my sophist skin and bootstrapped my life back together.

I began pursuing my other interests in life. I began reading more about science and film, and began entrepreneurial pursuits and even began freelancing design and illustration work in my free-time. While doing all this, I also reviewed a lot of sites and here are some of the Top Ten reviews site. All in all it was a great change. I decided to finish college in a less-rigid program in the visual arts, and began to focus on computer sciences. Ultimately, I got extremely interested in web development and built a few websites.

Looking back, I’m a happier person and better for choosing my own adventure. I tend to recall that year of my life as the best, worst thing that ever happened to me. I owe so much to my friends, mentors and co-workers who believed in my ideas, work and words. Even in the face of such an embarrassing failure, all was well. I don’t have to tell you twice about how much failures suck. But they happen. The next time you mess up, consider finding the silver-lining before you tear yourself apart.

I was inspired to share my story after I read Linda Eliasen’s post on why she quit her job at Dropbox. Our time is limited. Don’t waste it living someone else’s life.

Permanence > ephemeral

Nostalgia

UPDATE: Thanks to Bert, who reminded me that I haven’t written about FOUC solutions in some time, and happy to revisit the subject.

I wrote a new tutorial since this one is a bit out of date.

1. Install Git, Ansible and Composer

2. Install VirtualBox

3. Install Vagrant

4. Starting a Trellis Project, Installing Bedrock and Sage

5. Let’s Take a Break