Posts

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.
A Familiar Face Returns to Twitter

Apr 8, 2016

•

2 min read

•

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

Apr 8, 2016

•

4 min read

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

Posts

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

Homebrew

Git, Ansible and Composer

Install VirtualBox

Install Vagrant

Beginning a Project with Trellis

Bedrock

Installing the WordPress Core and any Other Composer Dependancies

More Ansible Stuff

Sage