Blog Category: web


Post Templates in WordPress...Finally

I know this has been out for a while, but I just happened to stumble across it. I build a lot of custom WordPress themes and I often use page templates to develop custom functionality. I don’t usually have the need to give posts a specific template, but it would be nice, right? In the past I had to use a plugin to give WordPress this functionality but now it’s finally baked in!

WordPress 4.7 brought about this change and here’s how to do it:


<?php
/*
Template Name: Custom Post Layout
Template Post Type: post
*/

Add that code to the top of your post template and you’re good to go. You can even make specific templates for custom post types. This is such a powerful feature that really extends WordPress without having to build in any “hacky” work-arounds.

Using Coda with Siteground SSH Connection

In case you ran into this problem like I did, here is the solution. I found the answer from Grant in this google group and thought I would present it in a nicer format.

If you’re trying to make an SFTP connection from Coda (Mac) to your Siteground hosting account then this might help you. I was getting an error when I loaded in my SSH private key - something to the effect of the key not being in the correct format.

The answer was to create a config file with the text below in your “~/.ssh/” folder.

Host servername
    HostName servername
    User username
    IdentityFile ~/.ssh/id_rsa_siteground
    Port 18765

PS: Coda’s docs didn’t even help me with this. The format they suggest using for the Config file still didn’t fix the error.

How to Track Downloads in with Universal Google Analytics

The code below is a modification on the code mentioned in this article by Blast Analytics about how to track downloads in the Events tab in Google Analytics. The code they have in their article works only with Analytics Classic - this has been modified to use the send function available in the new analytics tracking code.


var filetypes = /\.(zip|exe|dmg|pdf|doc.*|xls.*|ppt.*|mp3|txt|rar|wma|mov|avi|wmv|flv|wav|m4r)$/i;
var baseHref = '';
if ($('base').attr('href') != undefined) baseHref = $('base').attr('href');

$('a').on('click', function(event) {
  var el = $(this);
  var track = true;
  var href = (typeof(el.attr('href')) != 'undefined' ) ? el.attr('href') :"";
  
  //console.log(href);
  
  var isThisDomain = href.match(document.domain.split('.').reverse()[1] + '.' + document.domain.split('.').reverse()[0]);
  if (!href.match(/^javascript:/i)) {
    var elEv = []; elEv.value=0, elEv.non_i=false;
    if (href.match(/^mailto\:/i)) {
      elEv.category = "email";
      elEv.action = "click";
      elEv.label = href.replace(/^mailto\:/i, '');
      elEv.loc = href;
    }
    else if (href.match(filetypes)) {
      var extension = (/[.]/.exec(href)) ? /[^.]+$/.exec(href) : undefined;
      elEv.category = "download";
      elEv.action = "click-" + extension[0];
      elEv.label = href.replace(/ /g,"-");
      elEv.loc = baseHref + href;
    }
    else if (href.match(/^https?\:/i) && !isThisDomain) {
      elEv.category = "external";
      elEv.action = "click";
      elEv.label = href.replace(/^https?\:\/\//i, '');
      elEv.non_i = true;
      elEv.loc = href;
    }
    else if (href.match(/^tel\:/i)) {
      elEv.category = "telephone";
      elEv.action = "click";
      elEv.label = href.replace(/^tel\:/i, '');
      elEv.loc = href;
    }
    else track = false;

    if (track) {
      
      ga('send', {
        hitType: 'event',
        eventCategory: elEv.category.toLowerCase(),
        eventAction: elEv.action.toLowerCase(),
        eventLabel: elEv.label.toLowerCase(),
        eventValue: elEv.value
      });

      if ( el.attr('target') == undefined || el.attr('target').toLowerCase() != '_blank') {
        setTimeout(function() { location.href = elEv.loc; }, 400);
        return false;
      }
  }
  }
});

Kicking Off a Kickstarter Campaign

So October 1st was the first day of Fohm’s Kickstarter campaign. Fohm is my new company - we’re an innovative memory foam company with a focus on delivering the highest quality possible. Our first product is a new memory foam pillow - one that has a technology unlike any other pillow on the market today.

We’re launching our company via Kickstarter in order to raise some funds for a few last pieces of the puzzle. Molds and fabric can be very expensive - especially when you use such high quality materials like we do. So the goal is to raise $23,000 within 30 days via the most popular crowdfunding website out there.

The process leading up to our launch on Kickstarter took quite a bit of work. We had to shoot a high quality video, get photography, write some copy, launch a one-page website… OH, and get some press. Let me tell you about getting press - it takes LOTS of preparation. Do not underestimate how much preparation goes into a solid PR campaign. Contacting all the right journalists with the right pitch is crucial to actually getting some decent coverage in the media.

Day one was fun - we hit it hard with Facebook posts, Tweets, emails to all of our family, friends and business contacts. We called and emailed everyone we knew. It was fantastic to start to see the pledges roll in from people we didn’t know.

Then days two and three came along and things continued to grow - we were still contacting a few people we knew and hoping that Kickstarter would do it’s job and get some traffic for us. This is one key area that no one should rely on - Kickstarter provides no guarantee whatsoever that it will make you a “staff favorite” or put you in their popular list. You are solely required to drive your own traffic to your project. Kickstarter provides some nice analytics to see where your pledges came from and the amount of video plays - but that’s about it. If you are truly lucky - then Kickstarter will help to promote your product - but the key word here is LUCK. You must go into a campaign thinking that you won’t get picked as a staff favorite and that Kickstarter won’t help you at all. Now, Kickstarter does provide a powerful platform - but they certainly don’t do all of your marketing for you.

So along came days four, five and six and here we are. We sent out a massive press release today in hopes that we will get picked up by a major publication or blog. This would help to drive some serious traffic for us - which again, we’re the ones responsible for making sure it happens.

I’m left right now feeling a little anxious about the future of our campaign, but I’m confident we will cross the finish line. We’re going to keep pushing our message out there and contacting the media with our pitch. After all - we KNOW the product is awesome, we just need the world to know it too. In case you’re wondering, here is the link to our Kickstarter campaign.

A New Version of Responsivenavigation.net is Live

The wonderful thing about any kind of web conference is the inspiration it gives you to do more and better things. On the cusp of this inspiration, I have launched a new version of responsivenavigation.net. I actually have been working on this re-design for about a week in prep for my talk today - but due to the crazy amount of “regular work” that I have had the past few weeks - I kept pushing back the launch date.

But now the new site is live. I added a few more links to the homepage as well as a new design for the entire site’s navigation. I am slowly becoming a big fan of navigation that runs down the left side of a page. It’s nothing new at all - but for the most part only seems to be a navigation pattern that documentation websites use.

This got me thinking - why do documentation websites use navigation that runs down the left hand side? Oh, because it’s easy to navigate. So why wouldn’t this type of navigation be used on all kinds of websites? Isn’t “easy to use” navigation the goal here?

I’ll still be adding more and more examples as time goes on and new techniques develop. But at least I’m in a really good place with the site right now. Enjoy and let me know if you want to see anything new.

Put Quality Into Your Work

I was recently reading this blog article from ZURB about why they decided to drop Zepto from Foundation 5. Foundation, by the way, is a completely free front-end framework for developers and designers. It’s also FREE. ZURB puts out Foundation simply for the good of the community. They see no direct compensation for building and maintaining that framework. Sure, they may see some indirect benefits from offering a free framework, but otherwise - it’s completely up to them to decide what they want to do with it, how long they want to support it, and what kind of features it has.

So what is their motivation to put this terrific front-end framework out there for anyone to use and download as they please? Well, I’m not going to answer that for you. But what I am going to focus on is the quality with which they put into Foundation. You can see from their blog article that they care about the quality of their product. They noticed that jQuery provided faster performance than the Zepto javascript library they were originally using. So after some deliberation they decided it would be a better product if they dropped Zepto and included jQuery 2.X. Now, this might not seem like that big of a deal - but think about it. They took the time to measure the speed at which their code performed and make adjustments to make it even faster. In my book I call that caring about quality. Did they have to do that? No, not at all. No one is paying them to make their product better. They simply want to put out a quality product - and in doing so, they realize that all the little details that going their products are what make them better.

“From the moment they wake they devote themselves to the perfection of whatever they pursue. I have never seen such discipline.”

That quote is from the movie, The Last Samurai. It sums up what the people of Samurai were about. They put quality and perfection into everything they did - no matter how mundane the task was. It’s rare to find that kind of commitment to quality in today’s world. Think about all the products we use on a daily basis that last for a few weeks before we have to throw them in the trash. Cheap toys from China. Crappy clothes from Wal-Mart. Operating systems from Microsoft. ;) The list goes on.. But the bigger lack of quality is from actual work and communication from people. As smartphones and texting becomes more integrated into our lives, children’s grammar and spelling are becoming worse. Most schools have stopped teaching children cursive writing. It seems like there is so much competing for our attention that anything we actually devote half-a-minute to is done with clear disregard for perfection. It’s done with the sole purpose of “getting it done”.

This mentality lends itself to society thinking it’s ok to “just get it done” without regard for how good the product or service truly is. Ever wonder why such good, quality (and expensive) products come from Germany and Switzerland? They put the extra effort in building products out of quality materials, with processes that might take longer - but result in a better, longer lasting products.

I know that sometimes I am a victim to just “getting it done” while disregarding the quality for which a project was built. So while I strive to put perfection and dedication into everything I build, I hope the rest of the world does the same.

CSS: Select the Last Odd Child

How did I never see this before? In my need for random pieces of code throughout the day, I had this problem arise. I needed a responsive navigation pattern to format correctly when I had an odd number of links. I was using this “clean grid” pattern and I originally wrote that you need an even amount of links in order for this pattern to look good. Not anymore!

Thanks to the magic of CSS3, we can target two things at once: :nth-last-child(1) - then we combine it with :nth-child(odd) to target both a last child and an odd selector. Pretty slick, huh? So put it together and we get this: ul.nav li:nth-last-child(1):nth-child(odd) a

This let me target the last element ONLY if it were an odd number. If it wasn’t an odd number, then no harm no foul.

Here’s the reference I found with a bit more info: http://stackoverflow.com/questions/8641003/css-last-odd-child

Longevity in Web Development

Today I had the pleasure of looking at some code that I had written about three years ago. A client needed a site updated and I decided that the code also needed to be updated. It’s not that the site didn’t work just fine - but there was just so much cool stuff I was able to add to it that I didn’t have (or know about) 3 years ago. I added some font icons, some fancy new CSS3 properties, and some new javascript for added functionality. I also had to refactor some of the PHP to make it a little cleaner and more efficient.

But all that updating had me wondering if there was a better way. Is there a better way to keep your code more maintainable and “future-proof”? My best guess would be that no - it’s impossible to write code that is completely future-proof because new things will always be evolving. It’s not to say that you can’t write the absolute best program right now and it won’t be useful at all in a few years. Because it totally should be. However there will definitely be something you can add or change within a few years. That’s just the nature of the beast.

So from now on I suppose I’ll try to write all my code as clean and as “future-proof” as I can make it - all while knowing that someday, I’ll be back to clean it up a bit more. Or add something shiny and new.

An Alternative to Google Maps

In 2013, Google made a major update to it’s maps feature. It’s still a work in progress I suppose, but for the most part it’s a completely different interface than what it used to be. Along with interface changes came the addition and deletion of specific features. One of the biggest features they removed was the ability to embed maps via an iframe.

I suppose they have their reasons for removing this feature - the first one being that they can now make money by offer this as a “business” feature. So if you want to have that old functionality you have to pay a monthly fee for their Google Maps for Business. I guess that’s cool since they offer even more fun features along with the plain old ability to embed a nice map.

I must have embedded over 200 maps in the past 3 years. Almost every site I launched needed (or wanted) a map on their site. And for good reason. So for me to pay for Google’s “Business” solution probably could be justified.

However…

Google still technically keeps it’s API open and free for developers to use. They just don’t offer the WSIWYG feature of creating an embeddable iframe. So I found this great little JS library called Gmaps.js. It’s super easy to use and incorporate into any website. Their documentation is fantastic and it’s been super easy to integrate into my WordPress websites. I’ve created a nice little shortcode that I can use in my themes, letting me embed a Google map wherever I want. I know there are a few plugins out there that probably take advantage of this library, but I thought it was much easier to roll my own solution.

So, Kudos to Google for a new source of revenue but thanks for keeping our options open!

My New Responsive Design Workflow - Custom Boilerplates and Grid Systems

Lately, I have been struggling with starting projects and keeping them organized and clean. I have tried using other people’s grid systems, boilerplates, and starter files - only to find myself modifying them to no end. For example - I’ll start off with Bootstrap using their grid system and a few buttons and alerts. But I soon realize that I don’t like their typography. So I edit that. Then I realize I don’t like the padding, margins, and fixed width and height on a few of their input elements. So I edit those. And the list goes on… By the time I end up with a finished product, I would have been better off just writing all the CSS from scratch.

Front End Web Developent Frameworks

What’s even more frustrating is that sometimes I’ll use something like Bootstrap only to end up having about 1000 lines of additional code that just sits in the stylesheet and adds unnecessary weight to the page. I’ll either be too lazy to remove it or it’s so intertwined with the other code that I don’t feel like rooting out what I don’t need. Sure I can create a custom build of bootstrap - but it’s just not the same.

I have also gotten stuck in the same situation when building custom WordPress themes. I’d usually start off with a starter theme like _s (which is probably the best one I have found), then end up modifying it to no end. I DO realize that this is the point of a starter theme - it’s just a place to start - it’s not meant to be your final theme. But again, I find myself wasting a lot of time building in the same functions over and over again that could easily be reused for future themes. This time wasted on repetitive actions could definitely be better spent on building out new functionality, problem solving, or getting creative with designs. The point is - time is money, and I hate wasting money.

So I finally come to the point where I created a boilerplate of my own - a set of files for quickly prototyping single page HTML websites. It includes a mobile-first responsive grid system (which by the way is a fun exercise to create yourself), a reset from Normalize.css, and some other common CSS patterns that I typically use. It also sets the typography to how I usually like it for responsive website. It’s easy for me to modify and best of all, it saves me a bunch of time! I can quickly get a prototype together in a flat HTML file and easily create a mock-up in the browser. This has proven to really get my projects started faster and even speeds up my WordPress theme development. It lets me build something that the client can see and feel right away. Instead of trying to explain a flat PSD to the client, they can actually see some movement.

I frequently make changes to this boilerplate when building new projects too. If there is something I am working on a in a project that I know I will use in another project - I just add it to the master files, then push it to Github. Easy as that - it takes a few minutes to stop what I am working on and add it to the master files - but in the long run it saves a lot of time.

I’ve also done the same thing with a WordPress stater theme. It’s more work than creating a simple set of HTML, CSS, and JS files, but it definitely saves time in the long run. And I keep adding to the master files as I go along. This makes each new project I work on that much faster.

Of course, there will always be a time when certain modifications won’t justify using my starter theme, but for the most part it serves it’s purpose - it starts my project on a faster path than just creating it from scratch.

So my advice? Start your own boilerplate and scratch using everyone else’s. Use your favorite elements from other systems out there and roll it into your own unique system. Here are just a few fun front-end projects that you can pull elements from when deciding how to build your own:

Next