stephen.nyc

  • Web Design and The Z-Layout

    Web Design and The Z-Layout

    Introduction

    The state of Web Design continues to evolve every single day. It has always been in a constant state of flux — pretty much since the iPhone was released in 2007. The iPhone was a doozy, because it forced developers and designers to find workarounds with Flash. Steve and Apple were not intent on bringing flash to mobile users. However, the web really became an exciting place when Google Chrome overtook Internet Explorer sometime in between 2011-2012. It signaled a shift in usage, technology and design thinking — and that just about brings us to now.

    Layouts

    When designing a layout, it’s important to keep an objective in mind. For example, Stripe is a product for developers and web-stores so their main objective is to completely wow developers from all walks of life (Stripe.com has some insanely cool cutting edge Front-end CSS). Another example is Lyft, whose primary goal is to convert visitors into users. What it really comes down to, what is this layout supposed to do for us and for visitors?

    Even though we all know above-the-fold is kind of bullshit, it’s still important. Just so we’re all on the same page, we’ll call anything above-the-fold, The Hero. Designing a Hero component of a webpage can be really fun!

    First, we figure out an objective: e.g. convert visitors into customers, signup users for a newsletter, or maybe there is no objective at all. Second, we need to figure out a design strategy. This is where the Z-Layout comes in.

    Z-Layout Design Variations

    Let’s take a look at some classic examples. If you are the head of product for an app, or wish to drive visitors to a specific page elsewhere on the website — chances are you want to go with a Z-Layout optimized to move customers around. Let’s look at some variations on this theme.

    Slack – The E-mail replacement app has a lighthearted design, and aims to convert visitors into users.

    Lyft – No paragraphs of copy, just high contrast, a simple form to become a driver and that’s it. If half of your visitors just want to become a driver, or a customer — make it easy for them.

    Asana – Project management can be a hard sell, but communicating a simple product can be more effective than talking about bells-and-whistles.

    Southwest – This airline gets an honorable mention. It’s not very sexy, and booking a flight itself is not fun here. But it is important to note that a vast majority of visitors here probably go straight to the booking form — so at the risk of being annoying to repeat users, it seems Southwest values their reward program over actual ticket sales. In fairness, this Hero area above the form likely changes all the time for various promotions and deals.

    Coinbase, Caviar, Medium and Blue Bottle Coffee – more examples of Z-Layouts (yeah yeah some are stretching it) that promote engagement (e.g. interacting with a form or scrolling down). A single input on the form is key here. If there’s more than one, such as First Name and Last Name… forget about it. Medium is the exception because the product is reading. If you’re not into scrolling and reading, you’re probably not an ideal user for the platform.

    Various – Above are some examples of heroes that are designed to convert visitors into customers. Key takeaways here on these, high contrast, elements along a “Z” path for eyeball scanning, and a button. The button is very important to driving engagement. It is 100x easier to just click a button than fill out a form.

    Conclusion

    Before I get destroyed in the comments, a layout is not a blueprint. If you’re a product designer looking to spice up your homepage or wish to drive customers to a sale happening at your webstore — look to the examples above for inspiration. The basic rule of this layout is this: simply align elements along a Z-shaped path above-the-fold. The secondary objective is: keep it simple. The less copy, the better. High contrast helps a lot. Make sure to check your colors for accessibility’s sake. And lastly, add your objective last along the Z-path (e.g. a button, form, or link). I hope this helps anyone in need of inspiration or direction!

    —

    If you have any questions, feedback or comments drop me a line below 🙂

  • MVPs Are The Hair of the Dog

    MVPs Are The Hair of the Dog

    There’s been an article floating around the web lately, maybe you’ve seen it. It’s time to talk about MVPs.

    WP Engine dissects a lot of the problems with MVPs. I have to agree overall, too often do you see entrepreneurs rushing their products only to fail disastrously. However, MVPs don’t suck. Entrepreneurs are just becoming more and more reckless. I have a problem with creating a new-hip pneumatic called “SLC.” It isn’t going to rally everyone to arms about how to deliver a badass product.

    In the article they claim:

    MVPs are great for startups and product teams because they maximize validated learning about customers as quickly as possible. But it’s a selfish act.

    Well… learning about your users is not selfish. In fact, it’s the very opposite of selfish. It’s a huge reason why the Dot Com Bubble happened in the first place. Too many companies were cannibalizing each other’s features without considering the consequences of users. To make matters worst, VC’s and investors were moving too much money into bad ideas without sound research.

    In the old days, startups had little to lose with money moving that fast. Just build it, gather feedback, iterate and repeat.

    But things have changed haven’t they? MVPs are a symptom of a new problem post Dot Com Bust — user expectations have inflated.

    Products have become increasingly complex. Solving problems becomes more and more difficult and that tends to follow a quadratic curve. Naturally, competition does too. That should go without saying.

    Since users grow along that curve too, customers will have loftier and loftier expectations. You’ve’re up against the likes of Google and Apple. It ain’t easy being a startup.

    Users have grown drunk with their expectations, and while that sounds bad, it’s not. MVPs are the hair of the dog.

    It forces us to focus on delivering complete products out of the box. It forces engineers to deliver, designers can ideate further, sales teams can unify under one message and users can more efficiently share products via word of mouth.

    Everyone wins.

    There’s no reason to think that MVPs suck. Customers just want a complete experience. No one wants to go to a carnival with no rides.

    Stick to your wits and make a damn fine product. Focus on what you want. Focus on what users want. Make it fast, make it complete. Table your conquer the world ideas for later and simplify your product design before launch.

     

    While I have a lot of problems with WP Engine’s take on things in the valley, I do agree that delivering a complete product from the beginning should be your highest priority.

     

    But there’s no reason to create a new pneumonic device for product development. Just maintain focus and never lose sight of satisfying the experience of the users.

  • iOS 11 Strips AMP Cruft from URLs Via the Sharesheet

    iOS 11 Strips AMP Cruft from URLs Via the Sharesheet

    Good news everybody!

    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

    On Snapchat

    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

    The Most Effective Way to Avoid the FOUC

    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

    How to Add Advanced Custom Fields to AMP by Automattic

    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

    Apple’s Strategy to Remove the Keyboard

    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

    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

    WordPress Local Development on OS X with Trellis and Bedrock

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

    

    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:
    

    screen-shot-2016-10-09-at-2-21-12-pm
    

    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
    


    Don’t Pigeonhole Yourself
    


    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
    


    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. 

    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. 

    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. 

    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. 

    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. 

    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. 

    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. 

    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. 

    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. 

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

    

     
    

    [poll id=”2″]
    

    


    


  • 


    


    The Best, Worst Mistake I Ever Made
    


    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.
    

    


    


  • 


    A Familiar Face Returns to Twitter
    


    A Familiar Face Returns to Twitter
    


    When Standard Oil began vertically and horizontally integrating sections of industry into its’ grasp, people got pretty upset. Ultimately, it led to The Department of Justice suing the company in 1911 under federal law and allegations of anti-trust. The Rockefeller’s vision for the planet, was bleak and self-serving. Apparently, vertically and horizontally integrating businesses can get you into a big heap of trouble. Is there an exception? What about Google and Apple’s integrations into production and telecoms?
    

    If Twitter integrates micro-payments via a new Square API, is that integration or is it really just a small innovation? Is it incestuous if Dorsey decides the next big feature at Twitter is one that hinges on his other company, Square? Sending payments with a Tweet doesn’t sound all that bad. Maybe this is less about self-serving his two companies, and more about making things work together. I think we’ve graduated into a new era. Silicon Valley moves fast—like really fast. In comparison to the early 1900’s, it’s unbelievably fast. Business decisions happen at light speed now. Mistakes can be mended and resolved with an email. Customer services and user documentation are moving to public sectors like Twitter and Facebook. Look at how Elon Musk, manages Tesla and SpaceX while simultaneously serving on the board at SolarCity; he’s also the a former co-founder of PayPal.
    

    All of his companies have come into founding in the last 15 years, with his leadership help and direction at some point. Absolutely incredible, and insanely fast. Elon wants a more effective, smarter planet. Howard Schultz transformed Starbucks when he returned in 2008. He slashed budgets, and projects and closed a ton of stores. Moved cash to projects that mattered, and reinvigorated culture, invested in coffee plantations, and breathed new life into new products and fresher foods. Schultz has a vision of variety, culture and coffee for a greater, smarter world. I think Dorsey is a fine leader at Square, and it will be good to see him back at the helm at Twitter. He said he is focusing on three things at Twitter: simplifying the product, discipline, and communicating value to the current user base. If Musk can tango with two companies, and Schultz fixed Starbucks—I have an inclination Dorsey can transform Twitter into what it needs.
    

    


    


  • 


    Intro to Modern WordPress with Trellis, Sage and Bedrock
    


    Intro to Modern WordPress with Trellis, Sage and Bedrock
    


    

    UPDATE: I updated this post here ????
    




    WordPress is a beast. Setting up your local machine, mysql, keeping track of users, managing dependancies and plugins, setting up your vhosts—jeez, all of that can be a daunting task. Let’s automate some things.
    




    I’m making a few assumptions here. Such as you probably have Node, npm and Bower installed on your Mac. We’ll begin with Homebrew. Full disclosure, I forked Dave Kiss’ take on his champion WordPress workflow with some of my own tweaks. Feel free to check out his setup too, it’s really great.
    




    The whole walkthrough should take about 15-20 minutes of your time on a modern machine. Let’s get started.
    




    Homebrew
    




    Curl Homebrew:
    




    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    
    Make sure to run brew doctor afterward to make sure you have everything installed all nice and neat.
    




    Git, Ansible and Composer
    




    Now that we have Homebrew installed, let’s go ahead and install some goodies for our workflow and get started. Composer will manage our plugins. It’s awesome.
    




    brew install git ansible composer
    




    Install VirtualBox
    




    Go ahead and install your VirtualBox software and follow the prompts.
    




    Install Vagrant
    




    Next, download and install Vagrant. Pretty painless.
    




    Beginning a Project with Trellis
    




    Next, mkdir -p ~/Sites/example.com where example.com is the name of the project.
    




    Then, go ahead and cd ~/Sites/example.comWe should be inside the example.com directory. Now we’re going to clone Trellis into a new directory called ansible with this command:
    




    git clone git@github.com:roots/trellis.git ansible
    




    Provision the Ansible roles and packages.
    




    cd ~/Sites/example.com/ansible && ansible-galaxy install -r requirements.yml
    

    




    Bedrock
    




    Finally onto Bedrock. A simple WordPress boilerplate and configuration and improved folder structure for your project. Clone it into a new folder called site
    




    cd ~/Sites/example.com && git clone git@github.com:roots/bedrock.git site
    




    Installing the WordPress Core and any Other Composer Dependancies
    




    cd into the new folder called site and let’s get this party started.
    




    cd ~/Sites/example.com/site && composer install
    




    More Ansible Stuff
    




    If you’re like me, you probably have Sublime Text aliased. But click here if you haven’t aliased Sublime. Or if you’re into Vim and all that, that’s cool too.
    




    subl
     ~/Sites/example.com/ansible/group_vars/development/wordpress_sites.yml
     
    




    Go ahead and configure your db_namedb_user and db_password and everything else to your liking.
    




    Now the real fun stuff begins. We’re going to cd to the ansible sub-directory we previously created and start up vagrant and the virtual machine voodoo. It will prompt you for your system password because it’s going to add example.com to your /etc/hosts file. No biggie, but you should know.
    




    Also, this will take a while. Probably 10+ minutes or so.
    




    cd ~/Sites/example.com/ansible && vagrant up
    




    If you got any errors, don’t worry. Vagrant might ask you to install a few additional pieces of software for Vagrant. Go ahead and heed Vagrant’s advice. If it appears that your install falls into a timeout loop, run vagrant reload and hopefully that should resolve any timeout errors in the setup.
    




    You should be able to navigate to http://example.dev in your browser and see the fruits of your labor!
    




    Sage
    




    Now that we have WordPress installed, let’s get a starter theme going with Sage. Let’s cd to the theme-root and clone the Sage repo over:
    




    cd ~/Sites/example.com/site/web/app/themes && git clone https://github.com/roots/sage.git
    




    Now let’s rename the Sage directory to our new-theme-name:
    




    mv sage new-theme-namecd to the new-theme-name and npm install && bower installNow you can run gulp in that directory and build your theme! http://example.dev should now have some styles. Sage comes with Bootstrap by default, but you can swap it out for whatever framework you want. Or no framework at all! Whew—that was a lot of steps but way less painful than it could’ve been! More about Sage here.