Joshua P. Larson http://jplhomer.org Just another WordPress site Sun, 16 Nov 2014 00:58:32 +0000 en-US hourly 1 How My DigitalOcean Droplet Handles Heavy Traffic http://jplhomer.org/2014/11/put-load-right/ http://jplhomer.org/2014/11/put-load-right/#comments Sat, 15 Nov 2014 21:55:16 +0000 http://jplhomer.org/?p=1742 How much traffic is a lot of traffic for a DigitalOcean droplet? I test out a couple different heavy traffic scenarios with CloudFlare and WordPress.

The post How My DigitalOcean Droplet Handles Heavy Traffic appeared first on Joshua P. Larson.

]]>
I recently had a client ask about website hosting that would be able to sustain a lot of hypothetical traffic. The details were unclear, so I didn’t have much to work with – but it got me thinking:

How much traffic could my hosting setup sustain?

Personally, I’ve always pondered the answer to that question. While I don’t consider myself that strong of a dev-ops person, I still have to deal with questions like these. So I set out to find a possible answer.

 

My Current Setup

Let’s talk about my current site (jplhomer.org). I’m using Digital Ocean for hosting (they’re fantastic, by the way). I’m running their smallest-sized droplet:

  • 512MB RAM
  • 1 CPU
  • 20GB SSD storage
  • Ubuntu 14.04

It works just fine for my needs – I don’t get much traffic on my blog currently. I’m also running two other sites on this droplet, and they don’t have any problems performing.

While the specs on this droplet are fine for at least a few sites, what would happen if one of these sites were to get hit with a bunch of traffic?

Testing Digital Ocean’s Waters: 512MB Droplet

I stumbled upon this cool service called Loader.io. They offer load testing for websites and applications by sending a large number of requests to a site over a given period of time.

First, I signed up for Loader.io and entered this domain (jplhomer.org). Note: This was kind of risky, as a failure would mean my site would be inaccessible. Low stakes, though.

Setting a Host Name on Loader.io

Setting a Host Name on Loader.io

The first thing it will ask you to do is verify that own the domain (so you don’t go around trying to crash other peoples’ servers). I chose to verify using the DNS method since I use CloudFlare for my DNS, and they have near-instantaneous TTL (more on CloudFlare in a bit).

Loader.io Verification screen

Loader.io Verification screen

This was easy enough to add to CloudFlare using their DNS Settings area:

Adding the Loader.io TXT record to my CloudFlare account

Adding the Loader.io TXT record to my CloudFlare account

Once I added the TXT record to CloudFlare, I waited a couple seconds and then hit “Verify” back on Loader.io.

Loader.io's Verification Success

Now, it was time to run my first test. Loader.io lets you run up to 10,000 maximum connections (on the free plan). I set them to hit my site over the course of one minute.

My First Loader.io Test

My First Loader.io Test

Abort! Abort!

How did it go? Not well.

Loader.io Test #1 Results

As shown in the screenshot above, the test lasted a mere eight seconds before halting due to errors. After about six seconds, Loader.io had sent 82 clients to my site successfully before it started failing (for another 230 clients).

Granted, that is a lot of traffic – especially for my blog – but DigitalOcean’s smallest droplet is definitely not cut out for this kind of traffic.

Let Me Upgrade You: 4GB Droplet

At work, we’re hosting quite a few clients on another one of Digital Ocean’s droplets. I would call it “medium-sized”:

  • 4GB RAM
  • 2 CPUs
  • 60GB SSD storage
  • Ubuntu 14.04

Clearly some system upgrades in the RAM department here. As to not take accidentally down my company’s production server, I decided to spin up my own version of that size of droplet.

DigitalOcean Droplet

Side note: How awesome is it that I can spin up a decent-sized virtual server to play around with for an hour and only pay 6 cents?

I decided to boot this droplet with a version of WordPress pre-installed.

DigitalOcean Droplet setup

And off I went! Within a minute, I was able to SSH into the droplet, complete the WordPress installation, and set up a hostname for the droplet at load.jplhomer.org.

I decided to not install any third-party caching plugins at this point, because I was truly curious what 10,000 requests would do to a WordPress install (with fresh MySQL queries each time).

I set up a new hostname and test in Loader.io for this new instance and gave it a whirl.

Loader.io Test #2 Results

Whomp, whomp. While it lasted a little longer than my puny 512MB droplet, the test still failed after about 12 seconds. This time, 467 clients were successful while 557 timed out.

I guess this makes sense, right? Because loading a WordPress homepage probably involves a few database queries, and the number of those queries times the total number of clients can really add up for a standalone database server.

Caching to the Rescue

Luckily, it’s considered good practice to implement caching on your production websites. Using WordPress as a specific example, there are a number of popular third-party caching plugins to try out.

I went back to my dummy WordPress site and installed the plugin that is featured on the Install screen: WP Super Cache. After a few clicks, I had the plugin installed and caching the live site.

Did it help?

Loader.io Test #3 Results

Hey-oh! It sure did. I finally had my first complete test.

Let’s look at some of the statistics here. At its most latent, my server responded in 5,449ms. Super slow. But, at its quickest, my server responded in 11ms. That’s darn fast.

So, the average latency for 4GB droplet running WordPress with WP Super Cache enabled: 51ms

What About Wordfence?

I typically don’t use WP Super Cache, because I find its user interface confusing and annoying. I recently found a cool plugin called Wordfence Security (its UI isn’t anything to write home about, either) which does a bunch of stuff – caching is one of those things.

I installed Wordfence and enabled Basic caching (their advanced caching was apparently incompatible with my server).

After re-running the same test on Loader.io, here’s what I got:

Loader.io Test #4 Results

It succeeded, and with a slightly lower average response time.

So, the average latency for 4GB droplet running WordPress with Wordfence Basic caching enabled: 12ms

CloudFlare Is My Friend

I mentioned CloudFlare earlier in this post and for good reason: they’re pretty great. CloudFlare offers protection against DDoS attacks for sites around the globe. Along with that, they offer what’s pretty close to a Content Delivery Network (CDN). For free.

This means I can plug in any number of my sites to CloudFlare and have them handle the traffic coming to my site (and serve up static assets like images, scripts, plain HTML files, etc). Since WordPress is a dynamic CMS, CloudFlare won’t serve a static version of my entire site from their global network, but they do a good job of serving most of the heavier parts.

So, I was curious: Would having CloudFlare enabled for this dummy WordPress site help in a high-traffic situation?

When Loader.io hits a site homepage, for example, it’s not loading all of the assets required for that page – just the HTML from that homepage. This means any regular user visiting the homepage is also going to hit my server with additional requests for however many assets they need to load (images, scripts, stylesheets).

This is where I could get into real trouble if I didn’t use some sort of CDN.

So, I edited my Loader.io test to hit a JavaScript file living on my site in addition to just loading the homepage. My first test was with CloudFlare protection turned off.

Loader.io Test #6 results

Something funky happened. Essentially, I started doubling the number of requests my server had to handle by requesting an additional JavaScript file.

My latency was pretty awful, and it looks like I had quite a few timeouts (1472). I also tried visiting the site in my browser during the test, and I was greeted with this message:

CloudFlare Error

Clearly, a 4GB droplet can’t handle ~20,000 requests within a one minute span.

But I wanted to try it again – this time, with CloudFlare enabled:

Activating CloudFlare on a subdomain is as simple as clicking on the gray cloud to make it orange.

Activating CloudFlare on a subdomain is as simple as clicking on the gray cloud to make it orange.

I re-ran the same test:

Loader.io Test #5 Results

That’s not so bad. It looks like CloudFlare did most of the work as far as serving that extra JavaScript file. I double-checked my Apache server logs and verified that my droplet wasn’t serving it, too.

Preparing for Heavy Traffic

Knowing what I know now, I think I can make the following assumptions:

  • A WordPress site on a 512MB droplet from DigitalOcean would never survive when expecting heavy site traffic
  • A WordPress site on a 4GB “medium-sized” droplet from DigitalOcean would maybe survive if caching was enabled
  • You must use a CDN to serve your static assets if you’re planning to get a lot of traffic

I hope that continuing to use a medium-sized droplet along with caching and CloudFlare will do the trick for my sites that are expecting traffic.

You know what, though? Until it actually happens (which is not often for me), I won’t know what will work.

What other things could I do to help my website take on heavy traffic? A couple options:

  • Set up a load balancer (ELB on the Amazon ecosystem or by creating my own using HAProxy on Digital Ocean)
  • Run multiple, mirrored application servers behind the load balancer
  • Set up a dedicated database server running MySQL
  • Rely on someone else to host my site
  • Hire someone smarter than me to host it

Of course, those things cost money (in hardware or people costs).

But as with many things in the web development world: I’ll try something until it fails, and then I’ll find another way.

 

The post How My DigitalOcean Droplet Handles Heavy Traffic appeared first on Joshua P. Larson.

]]>
http://jplhomer.org/2014/11/put-load-right/feed/ 0
Static App Showdown: The “Meeba” Experiment http://jplhomer.org/2014/02/static-app-showdown-meeba-experiment/ http://jplhomer.org/2014/02/static-app-showdown-meeba-experiment/#comments Wed, 12 Feb 2014 04:41:13 +0000 http://jplhomer.org/?p=1724 I took part in a worldwide Hackathon called Static Showdown. It was a lot of fun, and here is a writeup about it (with a link to the game we made).

The post Static App Showdown: The “Meeba” Experiment appeared first on Joshua P. Larson.

]]>
The last time I participated in a Hackathon, it was in December 2012 for Dwolla’s Old MacDonald Hackathon.

I really had a blast, so when I saw Mark Otto’s (the creator of Twitter Bootstrap) tweet that he was a judge in a hackathon, I jumped on the opportunity.

The third-annual Static App Showdown is a worldwide competition where teams have 48 hours to build an app. Basically, the only rules are that the app has to be contained in an HTML file (linked to JavaScript as well as third-party libraries).

This poses somewhat of a challenge, but it’s become a lot easier to make apps today with front-end frameworks like AngularJS, BackboneJS, and EmberJS paired with backend services like Firebase and Parse.

The Team

I called upon my friend and colleague Doug Choi (a talented designer) and his friend Steven Lischer (a talented engineer) to join my team (which I called “The Iowish” for no particular reason).

We got together Thursday night to figure out what we wanted to build. While we had a couple options (from productive to utility), we ended up choosing fun.

We were going to make a game.

The App

You know that game where you start out as a little fish, you eat food, and then grow big enough to eat other fish? Fishy or something? Yeah, that’s what we wanted to build, but with a few key differences:

  • It would be more cellular/evolutionary
  • It would use “weather flags” to show where the large food/opponents were on the board
  • It would be a realtime, multiplayer game.

Our first course of action was choosing a library for our drawing/animation. None of us had created a game before nor used a game/graphic library for anything.

We ended up choosing PaperJS for the project. We were drawn in by the neat animations, but we later regretted this decision (more on that later).

We worked late into Friday night, met up and worked Saturday all day, and again Sunday morning.

The Result

Meeba

Meeba in its prime.

So, we didn’t quite get finished. You can view the app here and play around if you want.

Here’s what Meeba can do right now:

  • Log in anonymously and get assigned a “player” (a white circle)
  • Sync up your movements and size in realtime to Firebase
  • Eat food and grow bigger
  • Watch other players move and eat food in real time
  • Weather flags (i.e. lines) point to the biggest spot of food on the board

Here’s where Meeba has its glaring faults:

  • You can’t log out once you log in
  • The progressive scaling gets out of control, and you get way too big too fast
  • You can’t eat other people yet
  • The only end to the game is that it crashes when all of the food is eaten

Overall, we learned a ton and had a great time learning about the technologies and making the app.

The Lessons

In no particular order, here are a few things we learned this week:

Building a game is hard

Like, seriously. For a web developer, engineer, and designer, we had no experience making games. It’s not like there are any manuals out there for making games from scratch, so we were kind of on our own to make an interactive multiplayer game in under 48 hours.

Choosing the right library is important

It turns out that PaperJS has poor documentation. It was often tough to understand what functions did what, and the error/debugging within the library was pretty lacking. We decided that the library ultimately wasn’t meant for hooking into an interactive game and was really meant for some pretty animations.

Features take a long time to implement

While I worked to get the basic game mechanics working (scrolling, movement, eating), Steven was busy getting the weather flags to work. That’s just one feature we had planned in our laundry list, but due to the poor documentation and other difficulties, we didn’t get that integrated until late Sunday afternoon.

The Food

A really great thing about this weekend was the food. Doug and I visited Uncle Wendell’s BBQ on Ingersoll Friday night for dinner, which was pretty great.

The three of us met up at Waveland Cafe Saturday morning for breakfast. GREAT breakfast place!

We grabbed lunch at the Fighting Burrito downtown followed by dinner at Exile Brewing Co. A lot of food, and a lot of fun.

Will we do Static Showdown next year? I don’t know. Will our game launch on the App Store and have so much success that Flappy Bird feels bad that it ever left? Probs not. But here’s to wishful thinking.

A special thanks to Happy Medium for letting us use the office space for the weekend!

The post Static App Showdown: The “Meeba” Experiment appeared first on Joshua P. Larson.

]]>
http://jplhomer.org/2014/02/static-app-showdown-meeba-experiment/feed/ 0
Introducing Responsive Email Kit http://jplhomer.org/2014/01/introducing-responsive-email-kit/ http://jplhomer.org/2014/01/introducing-responsive-email-kit/#comments Tue, 21 Jan 2014 01:30:57 +0000 http://jplhomer.org/?p=1706 If you know anything about me, you probably know that I'm madly in love with MailChimp. Their email templates are responsive out of the box, and their drag-and-drop editor is to die for. But what about when you can't use MailChimp?

The post Introducing Responsive Email Kit appeared first on Joshua P. Larson.

]]>
If you know anything about me, you probably know that I’m madly in love with MailChimp.

Their email templates are responsive out of the box, and their drag-and-drop editor is to die for.

But what about when you can’t use MailChimp?

We’ve recently started working with a client who uses Constant Contact. Now, let me be clear — I’m sure running an email marketing service is a difficult job, and I haven’t heard the worst things in the world about that company.

But a big problem with Constant Contact right now is that they don’t have any responsive email templates that you can edit within their template editor. (Sure, they have a “responsive” template, but it’s a silly one-column template which actually isn’t responsive).

However, Constant Contact lets users enter their own HTML. This is cool, but it’s going to be awfully tedious when we have lots of repeating information (like events, reminders, etc).

Enter, Responsive Email Toolkit.

I built this tool called Responsive Email Toolkit. You can download it right now on Github.

The folks at ZURB, behind the extremely popular framework Foundation, came up with a great set of responsive email templates they’ve called Ink.

I wanted to implement the Ink templates into a Grunt workflow, so I could:

  • Use Sass/Compass variables and mixins for preprocessed CSS
  • Allow for partials and data-generated lists
  • Make CSS inlining a part of the build process
  • Minify and compress images as part of the build process.

Check out the documentation for more details on how it all works.

Now, I can do neat things like this: Say I have a few events coming up, but I don’t want to repeat the nested tables used by Ink.

First, I add some data to a JSON file, say lists.json:

{
  "events": [
    {
      "name": "My birthday",
      "location": "My apartment",
      "time": "5:30pm"
    },
    {
      "name": "Christmas",
      "location": "The Whole World",
      "time": "December 25"
    }
  ]
}

Then, I can customize one of Ink’s templates to loop through my events and print out the proper HTML:

<% for (var i=0; i < data.lists.events.length; i++) { %>
<table class="row">
  <tr>
    <td class="wrapper last">
      <table class="twelve columns">
        <tr>
          <td>
            <h2><%= data.lists.events[i].name %></h2>
            <p><%= data.lists.events[i].time %> at <%= data.lists.events[i].location %></p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<% } %>

Bada bing bada boom. That’s all she wrote.

Things I’ll probably add to this in the future:

  • Ability to test send emails using Grunt
  • Maybe integrate MailChimp’s API to make a template straight from your HTML
  • Add in other email templates

Let me know what you think!

The illustration at the top is by the fine illustrators at ZURB. I did not draw this squid with my bare hands.

The post Introducing Responsive Email Kit appeared first on Joshua P. Larson.

]]>
http://jplhomer.org/2014/01/introducing-responsive-email-kit/feed/ 1
The Evolution of My Web Design Process http://jplhomer.org/2014/01/evolution-web-design-process/ http://jplhomer.org/2014/01/evolution-web-design-process/#comments Tue, 07 Jan 2014 03:45:51 +0000 http://localhost/jplhomer.org/?p=1543 I've made a lot of changes to my web development workflow recently, and doing so made me reflect on how much my process has changed in the last 12 years. I have written these changes down for you here.

The post The Evolution of My Web Design Process appeared first on Joshua P. Larson.

]]>
I’ve made a lot of changes to my web development workflow recently, and doing so made me reflect on how much my process has changed in the last 12 years. I have written these changes down for you here.

2002: Microsoft Word and Tripod.com

I remember building websites using Microsoft Word.

What?!

Yes — it is as awful as it sounds. I didn’t bother learning HTML; most websites back then were built using tables and spacer GIFs. So using Microsoft Word to drag-and-drop things into place seemed the most logical.

In fact, my pride and joy was the BSA Troop 511 website, hosted on Tripod.com. You want to see it? OK: Here it is: http://troop511wc.tripod.com/.

Yikes.

Thankfully, I gave things up for a while until I got to college.

2007: Notepad, IIS, and the Iowa State IT Department

It was college. I got adventurous.

I wanted to apply for a job at ISU Financial Aid as a student web developer. But, I needed a personal website. I chose my moniker: JPLHomer (JPL are my initials, and Homer is the area of Iowa from which I hail).

One night, I went out and bought a cheap desktop computer from Walmart. I also bought a cheap monitor and set it up in my dorm room.

Luckily, Iowa State offers free versions of some of the Microsoft software through a discount program, and – as a computer science minor (at the time) – I downloaded Windows Server 2003.

Up and running with IIS (Microsoft’s web server solution), I set up a static PHP website. I also had to contact ISU’s IT department in order to get a static IP setup for my dorm room. Crazy, right? They were pretty cool about it, and before I knew it, I had set up the DNS to point jplhomer.org to my dorm room server.

One of the first versions of my website

One of the first versions of my website

2009: Dreamweaver, Fireworks, MediaWiki

This is when my main Dreamweaver kick started. Generally, I would work locally (or straight off of the department’s file server) and push files through Dreamweaver’s FTP function to a remote server.

I often used Fireworks for image editing and [crappy] mockups. While it’s a good product, it’s no longer being actively developed.

This is also where I learned the troubles of a lack of a version control system. We usually had two student web developers at Financial Aid, so we would sometimes overwrite one another’s work if we weren’t careful.

As I look back upon this experience, I can tell you this: This part-time job was single-handedly the most beneficial job experience I’ve had in my life. The skills I learned here have gotten me all of my subsequent jobs. Take note, college students!

2011: Dreamweaver, Photoshop, Bootstrap

Time to be a big boy!

I graduated Iowa State with my degrees in journalism and Spanish and headed straight for a marketing job at the Iowa State Center. At the time of writing, the redesign I did is still being used.

The folks at ISC were still using static HTML documents, and – for a site of that size and that dynamic – a content management system with an events calendar was definitely needed.

I plopped in a WordPress installation and started building the site using Bootstrap 2.0. It was the first version of Bootstrap which supported responsive design, so I was forced to learn about that.

I also began experimenting with LESS, since Bootstrap used that for its core styles.

For deployment, I edited the files right on the live server (double yikes!). I also discovered how incredibly frustrating it can be to try to set up the latest technologies (Node, LESS, Git) on Windows using a command line interface when you have no idea what you’re doing.

I also had to deal with a server migration (from a hardware server sitting in the basement of Stephens Auditorium to a virtual server sitting in Durham Hall). That brought its share of bumps, but I learned about the process nonetheless.

Now: Sublime Text, Git, More…

You guys. I use so many tools now.

  1. Apple products. I’ve moved to the Dark Side and I will never go back. It’s so ridiculously easy to get everything going on a fresh install of OSX. The Mac workflow is incredibly efficient, and everything just works. I use a 27″ iMac at Happy Medium, and I bought a 15″ Macbook Pro Retina last year for my personal use.
  2. Sublime Text. This is the best IDE I’ve found for all of my projects. One of the best parts (besides the multi-line editing tool – seriously, check it out) is the plugin ecosystem. You can download a number of new language files and helpers which make your workflow even more efficient.
  3. Git for version control. I buckled down and starting learning it a couple years ago, but Git has changed my workflow completely. I version control every project. It’s simple to do, and there is no reason you shouldn’t be doing it for your website.
  4. BitBucket. While I use Github for a lot of public repositories, BitBucket comes in handy for the projects I want to keep private (like for work). They have unlimited private repositories, so it’s definitely a great deal if you’re looking to move toward a Git workflow.
  5. Grunt. Grunt is a Javascript task runner which does pretty much everything. Do you ever get tired of doing tedious, repetitive tasks for every project (like minifying your JS files, compiling your CSS, or creating a distribution of your project)? Those are good tasks for grunt. All I have to do for most of my recent projects is navigate to the folder in the command line and run grunt watch. Instantaneously, I have a script that will watch for any changes to my files, recompile everything, and refresh my browser window. How neat is that?
  6. Capistrano. As much as possible, I try to deploy everything through SSH on the command line. Why? Because in a Git-controlled workflow, you can keep track of which changes you make, upload only those changes, and roll them back to a previous commit if needed. It just makes sense.

Future: Vagrant, ?

I’m interested in switching to Vagrant to test my projects, as it seems to be the next logical step in keeping project settings in sync between cloned repositories (like Grunt already does).

I’ve begun playing with it, but I’m not quite there yet with how to integrate it into my workflow.

My process has changed so much already in the last six months. I’m not afraid to make frequent changes to my workflow as long as each change makes my job easier.

The post The Evolution of My Web Design Process appeared first on Joshua P. Larson.

]]>
http://jplhomer.org/2014/01/evolution-web-design-process/feed/ 4
How to use the tar command http://jplhomer.org/2013/12/use-tar-command/ http://jplhomer.org/2013/12/use-tar-command/#comments Sun, 29 Dec 2013 21:12:14 +0000 http://jplhomer.org/?p=1546 I've been doing a lot in the command line lately, so I've gotten to use the tar command quite a bit. Here are a few useful tips that helped me get started.

The post How to use the tar command appeared first on Joshua P. Larson.

]]>
I’ve been doing a lot in the command line lately, so I’ve gotten to use the tar command quite a bit.

Here are a few useful tips that helped me get started:

Basic Usage

The tar command is a compressor/decompressor which generally works out of the box on Mac and Linux machines.

The basic usage is as follows:

$ tar -options file1 file2

Compression

To compress a file, here’s my go-to usage:

$ tar -czvf files.tar.gz ./files/

Let’s look at each of these parts:

  • Options: -czvf
    • c: This means we want to compress (vs x for extract).
    • z: This says we want to use the gz compression technique.
    • v: This means we want to get a verbose output of what is being compressed (great for ensuring everything gets in there like you want it).
    • f: This means we’re compressing a folder and its contents into a file.
  • files.tar.gz: This is the destination file. Don’t forget the .tar.gz extension!
  • ./files/: This is the source folder we want to compress.

It’s as simple as that!

Decompression

To decompress, just use the x option instead of the c option:

$ tar -xzvf files.tar.gz ./

That’s not so bad, is it?

The post How to use the tar command appeared first on Joshua P. Larson.

]]>
http://jplhomer.org/2013/12/use-tar-command/feed/ 0
Hans Zimmer Is a Mozart Fan http://jplhomer.org/2013/11/hans-zimmer-mozart-fan/ http://jplhomer.org/2013/11/hans-zimmer-mozart-fan/#comments Tue, 12 Nov 2013 02:05:38 +0000 http://localhost/jplhomer.org/?p=1523 I'm kind of obsessed with film composers. Here's a reason why Hans Zimmer and Mozart are awesome.

The post Hans Zimmer Is a Mozart Fan appeared first on Joshua P. Larson.

]]>
I was reading a Buzzfeed article about Hans Zimmer (one of my favorite composers) recently.

The article mentioned that a Mozart piece adorned his elaborate recording studio:

There are loads of art books and a small library of classical composers. There’s a framed copy of Mozart’s “Ave Verum Corpus,” which Zimmer calls “the perfect piece of music.” The room is basically engineered for creativity.

My first instinct, of course was to listen to this piece of music Zimmer considers to be perfect. Hopping over to Spotify, I pulled up the track:

YouTube link

But something seemed really familiar. And this it hit me: Hans Zimmer referenced Mozart in his score for The Lion King.

“No way!” I’m sure you’re thinking. But seriously. Go to 1:42 in “Ave verum corpus in D Major” above. Let it sink in.

Now, listen to the haunting air from The Lion King when Simba realizes his father has died and is exiled from his hometown/kingdom/pride (around 2:12):

YouTube link

Nuts, right? That’s totally what I thought.

The above photograph by Jessica Chou for BuzzFeed

The post Hans Zimmer Is a Mozart Fan appeared first on Joshua P. Larson.

]]>
http://jplhomer.org/2013/11/hans-zimmer-mozart-fan/feed/ 0
Building a Responsive Timeline with Advanced Custom Fields http://jplhomer.org/2013/10/building-responsive-timeline-advanced-custom-fields/ http://jplhomer.org/2013/10/building-responsive-timeline-advanced-custom-fields/#comments Fri, 25 Oct 2013 02:27:57 +0000 http://localhost/jplhomer.org/?p=1484 While redesigning this site, I was inspired by Dave Rupert's About page. Dave has built a responsive HTML timeline, and I thought, "Hey, that's pretty neat." After playing around with the design, I decided I wanted to integrate it into my Wordpress site. Here's how I went about it.

The post Building a Responsive Timeline with Advanced Custom Fields appeared first on Joshua P. Larson.

]]>
While redesigning this site, I was inspired by Dave Rupert’s About page. Dave has built a responsive HTML timeline, and I thought, “Hey, that’s pretty neat.” After playing around with the design, I decided I wanted to integrate it into my WordPress site. Here’s how I went about it:

The Backend

After building a few client WordPress sites, I’m absolutely convinced that Elliot Condon’s Advanced Custom Fields plugin is the most valuable plugin out there. And it’s free.

However, for this tutorial, we’ll be using the Repeater Field add-on to Advanced Custom Fields, which costs $25. But seriously, after seeing what we can do with this, you’ll want to buy it. It’s worth every penny.

Make sure you have both Advanced Custom Fields and its Repeater Field add-on installed, and then head to the Custom Fields page in your WordPress Admin Dashboard. Using Advanced Custom Fields with the Repeater Field add-on, we’ll be able to create a custom meta box containing the fields to build our timeline and place it on the page we want.

To start, let’s add a field group and call it “Timeline” (or whatever you feel like). We’re going to add two fields: Sort Order and Events.

Advanced Custom Field Group

Advanced Custom Field Group

Add the Sort Order field (sort_order field name), and make it a Select field with options “Date Descending : Date Descending” and “Date Ascending : Date Ascending.” I made the descending value my default value.

Next, add Events (events field name), and make it a Repeater Field. As subfields, you’ll want to add:

  • Event Title / event_title / text
  • Event Date / event_date / date_picker
  • Event Description / event_description / wysiwyg Feel free to tweak the Display format on Event Date to meet your needs (I changed mine to mm/dd/yy).
Timeline Subfields

Timeline Subfields within Advanced Custom Fields.

Now that we’ve created our fields, we need to tell ACF where to place the field group. I just want my timeline on the About page of my site, so under Location, I set Page is equal to About. Feel free to set this to a page template or to another page on your website. Under options, I set the Style to “Standard Metabox.”

The Location of the Field Group

The Location of the Field Group

When you’re finished, publish the field group!

The Front End

We need to create a template to display the timeline. Using the ACF documentation on Repeater Fields, it’s easy to pull the data, reorder it, and display it in simple HTML:

<?php if ( $events = get_field( 'events' ) ) :
    // Re-order our events just in case
    if ( get_field('sort_order') == 'Date Descending') {
        usort( $events, 'sort_by_date_descending');
    } else {
        usort( $events, 'sort_by_date_ascending');
    }

    // Set a year checker to see if we should print a new year
    $year = 0;
    $is_new_year = false;
?>
<div class="timeline">
    

<?php foreach ( $events as $idx => $event ) :

        $is_new_year = false;

        $event_year = date( "Y", strtotime( $event['event_date'] ) );

        if ( $year != $event_year ) {
            $year = $event_year;
            $is_new_year = true;
        }
    ?>

<?php if ( $is_new_year ) { ?>

<?php if ( $idx > 0 ) { // If it's not the first event, we need to end the current list ?>
            </ul>
        

<?php } ?>

        <h2><?php echo $event_year; ?></h2>

        <ul>

<?php } ?>

    <li>
        <h3><?php echo $event['event_title']; ?></h3>

<?php echo $event['event_description']; ?>

        <time><?php echo date( "F Y", strtotime($event['event_date']) ); ?></time>
    </li>

<?php endforeach; ?>

    </ul>
</div>


<?php endif; ?>

We also want to add custom sorting functions to functions.php:


/**
 * Sort our repeater fields array by date subfield descending
 * @param  mixed $a first
 * @param  mixed $b second
 * @return value
 */
function sort_by_date_descending($a, $b) {
    if ($a['event_date'] == $b['event_date']) {
        return 0;
    }
    return ($a['event_date'] > $b['event_date']) ? -1 : 1;
}

/**
 * Sort our repeater fields array by date subfield ascending
 * @param  mixed $a first
 * @param  mixed $b second
 * @return value
 */
function sort_by_date_ascending($a, $b) {
    if ($a['event_date'] == $b['event_date']) {
        return 0;
    }
    return ($a['event_date'] &lt; $b['event_date']) ? -1 : 1;
}

Now, we want to style our timeline. I’ve done this in an example on Codepen. It makes creative use of the pseudo :before element for the arrows. At a breakpoint, we split up the events using the :nth-child selector.

Check out this Pen!

Content Entry

Head over to the page you specified for the field group, and start entering your life events. Since we’ll be reordering the events in the template, you don’t need to worry about entering things in sequential order.

(Unfortunately, Repeater Fields doesn’t yet support reordering subfields – so we’re depending on the Event Date for the order) Either I’m an idiot or the plugin was just updated — you can now indeed reorder items in Repeater Fields. Rejoice! When you’re finished, publish the page and see your great work. That’s it! Let me know if you have a better solution, and check out mine in the meantime.

The post Building a Responsive Timeline with Advanced Custom Fields appeared first on Joshua P. Larson.

]]>
http://jplhomer.org/2013/10/building-responsive-timeline-advanced-custom-fields/feed/ 2
TRIGGER WORDS: A film in 48 hours http://jplhomer.org/2012/07/trailer-a-film-in-48-hours/ http://jplhomer.org/2012/07/trailer-a-film-in-48-hours/#comments Wed, 01 Aug 2012 02:28:35 +0000 http://localhost/jplhomer.org/?p=1439 Care to see a sneak peek of the trailer for the 48 Hour Film Project film in which I took part?

The post TRIGGER WORDS: A film in 48 hours appeared first on Joshua P. Larson.

]]>
So, this is neat:

I took part in the Des Moines 48 Hour Film Project last weekend (July 27-29, 2012). It was really awesome.

Pat Boberg (an Iowa State journalism alum) invited me to join his team, Tiny Explosions, for the weekend.

We drew the genre Vacation/Holiday. I think we took a really creative (and somewhat creepy way) direction with our film. Below is a trailer (48 seconds…get it?), and the full version will be released Thursday morning. Get excited!

P.S. I play a short role in this project. Can you see me?

The post TRIGGER WORDS: A film in 48 hours appeared first on Joshua P. Larson.

]]>
http://jplhomer.org/2012/07/trailer-a-film-in-48-hours/feed/ 0
A Happy Announcement http://jplhomer.org/2012/07/a-happy-announcement/ http://jplhomer.org/2012/07/a-happy-announcement/#comments Wed, 01 Aug 2012 02:17:58 +0000 http://localhost/jplhomer.org/?p=1433 I announce the next step in my career.

The post A Happy Announcement appeared first on Joshua P. Larson.

]]>
Since the last time we spoke, I’ve taken a new job: I’m now a web developer for Happy Medium in Des Moines!

Happy Medium is a small ad agency. It’s just more than one year old, and I’m the sixth employee to be hired.

I’m pretty darn excited to be a part of a young, growing team. Am I the world’s greatest web designer and web developer? Absolutely not — but I’m excited to face challenges, make mistakes, and solve problems.

If you’re looking to market your business in a smart and honest way, feel free to check out Happy Medium. We (and now I) might be able to help you!

The post A Happy Announcement appeared first on Joshua P. Larson.

]]>
http://jplhomer.org/2012/07/a-happy-announcement/feed/ 0
My Lesson in Hip-Hop http://jplhomer.org/2012/03/my-lesson-in-hip-hop/ http://jplhomer.org/2012/03/my-lesson-in-hip-hop/#comments Mon, 12 Mar 2012 06:24:05 +0000 http://localhost/jplhomer.org/?p=1389 In which I discuss the merits of hip-hop music. The good, the bad. Lil Wayne to André 3000.

The post My Lesson in Hip-Hop appeared first on Joshua P. Larson.

]]>
I’ll get this out into the open: I’m not expert in hip-hop. Or rap. Or neat-o styles of music to which people dance in clubs (though there is this).

But let me write a few lines that may fall upon your eye. I’m going to talk about what I appreciate in hip-hop music, and I’ll compare some artists and their styles.

TL;DR: Some artists are really awesome at writing meaningful lyrics and expanding the art of hip-hop; others — not so much.

It bothers me when people say “Country music isn’t music,” or, “hip-hop and rap is just crap.”

Have you even listened to the music?  The good music?

I’ll prove my point — being, that good hip-hop music exists — by giving you a few examples.

Writing

Bad Example

“John” — Lil Wayne

In this piece, Lil Wayne describes to us… what? I haven’t looked up the lyrics (probably not going to do so), but as far as I’m concerned, he’s saying, “I’m more of a dominant male than you.

Mr. Wayne continues by saying, “I’m fuckin’ her good; she got her legs on my neck.” A unique observation, no less. I suppose it is neat that he is cool enough to be having intercourse on a regular basis.

“I got a chopper in the car.”

We later learn that he’s “got a chopper in the car.” I’m assuming a “chopper” is an AK-47 — which makes his male dominance so much more appealing.

Also, the music video connects with many audiences. Mr. Wayne is seen yelling forcefully, shirtless, into a microphone on a stage in an empty room. Another gentleman is seen in a wheelchair.

Good Example

http://youtu.be/-OpCRHbsIFs

“Int’l Players Anthem” —UGK feat. Outkast

We begin with a scene just before André 3000‘s (Benjamin André, 3-Stacks, our lovable 50% of Outkast) wedding. The protagonist’s wedding party is giving him a hard time about settling down and getting married.

While the actual song doesn’t start until 0:29 seconds, we see how André teases his fellow mates about how they’ll be old and alone if they never settle down.

The song begins with André 3000’s portion of the collaboration.  As he raps on top of the hook (Willie Hutch’s I Choose You”), we learn that Mr. 3000 has finally made a commitment and has decided to settle down.

He’s texted the “girl I used to see,” saying that, “I chose this cutie pie with whom I wanna be.” He’s not at all shy about this commitment, as he’s “CCd every girl,” with whom he’d had relations around town.

We then learn about his internal struggle regarding marriage. Why give up a life of women and fun?

No lookin’ back” says 3-Stacks. “Spaceships don’t come equipped with rear-view mirrors.” I interpret the spaceship line to be the fact that his most recent relationship has happened so quickly and has taken him to new heights, leaving him no time nor need to look back and reflect.

André makes good use of multisyllabic rhymes and internal rhyme, along with a few puns here and there: “I’m Glad-ihs-night so the light from the son will not burn me on my bum.”

At the end of the first portion, we hear 3-Stacks’ friends try to talk him out of it one last time before finally giving in and saying they’ll still have his back.

“Keep your heart, 3-Stacks; Keep your heart.”

The last line of the first portion is from the same friend, who displays his lack of faith in marriage and his disdain for giving ones entire heart to a woman.

The rest of the song continues in a collaborative manner, but I’m the most impressed with Benjamin André’s role.

Freestyle

Sure — I’ve never freestyle rapped before, but I can imagine the participants often have a general idea about which they plan to rap during the always-limited time span of a freestyle rap. But some are just better than others.

Bad Example

Lil Wayne

OK, I seriously don’t intend on this being a Lil Wayne hate-fest. But it kind of is.

At first, Mr. Wayne does not seem too keen on spitting some hot verses into the microphone for the radio-folk. You begin to wonder whether he’s had a little too much purple drank.

Before he begins, Wayne tells us, “I don’t even know how to rap,” and he, “don’t want no music.”

Touché, sir.

The end result? Periods, dogs, lawyers, employers.

This video has 26,000+ dislikes on YouTube.

Good Example

Kid Cudi

Mr. Cudi wastes no time laying down his slick verses into that hot mic. Though a lot of it’s about being a dominant male and having females at his disposal, he sounds awesome.

He even gets bored with the first hook and starts rapping to a new one.

I think that’s sick. And I don’t mean the puking-in-the-alley-after-a-night-of-drinking sick…

“A Life in the Day of Benjamin André” — Benjamin André

It’s true — this man is my favorite rapper. And although this probably isn’t completely freestyle, it’s about as close as you can get.

3-Stacks raps to two different instrument hooks as he tells a story about a woman he met at the beginning of his career. As the story progresses, we learn about his interactions with her as time passes and their lives both change.

Singing

The use of vocal tones can often be overlooked in the art of hip-hop; here, I’ll give it a critical examination. I won’t be too hard on them, though.

Bad Example

“Prom Queen” — Lil Wayne

Mr. Wayne takes on us a trip back to the high school years as he sings/raps about his confusing date situation before prom night.

He apparently has very little luck in securing the woman whom he’d like to accompany to the prom. I think she’s the prom queen, in fact — tying up her schedule quite a bit.

She also has fancy underwear.

This song was brought to you by Autotune: Replacing crappy voices with crappy voices with different musical tones since the turn of the century.

Good Example

http://youtu.be/XEV5_cPZkCo

“When I Look in Your Eyes” — Outkast

While hits like “Hey Ya,” “Roses,” and “Ms. Jackson” come first to mind, Outkast has produced some pretty quality stuff.

This little tune sung by Benjamin André expresses his love toward a woman. Possibly a fresh take on an older Sinatra tune, we learn that every other woman in his life is dull compared to the woman in focus.

I hope I haven’t lost the faith of humanity in proper objectivity by writing this post, but hopefully you got a chance to listen to music to which you don’t habitually listen.

The post My Lesson in Hip-Hop appeared first on Joshua P. Larson.

]]>
http://jplhomer.org/2012/03/my-lesson-in-hip-hop/feed/ 0