stephen.news

hypertext, words and more

  • 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):

  • 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.
  • 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!

  • 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:

    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]

  • 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″]

  • 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 AmazonUrbanStems, 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″]

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

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

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