Things I've Posted in ‘Entries’

Page 2 of 18

#Ghost, #WordPress

WordPress is Catching My Attention Again

Ever since Ghost was released I’ve been incredibly interested in installing and learning the platform–even toying with the idea of switching over completely. Alas, on my host, this is impossible due to Ghost’s dependency on node.js, and so I was left reeling just a bit.

It was in this fugue state over the past month that I discovered just how much I truly love WordPress again, particularly with the introduction of version 3.8 and the updates being made to the admin screen. I’m very happy with what is happening there, and I have faith in the platform as a whole. Yes, it can be a little bloated; yes the plugins aren’t always well written; but none of these things really detract from the flexibility of the system.

I’m excited to develop for WordPress again, and I can’t wait to see what’s coming next.

#Healthcare, #Politics

Thoughts on

I’m not going to take this on as a design or front-end-development critique, because it will add nothing to the conversation. Plus, politics are my style man.

I’m dead serious. The site itself has a nice look to it, but the back end man…yikes.

What I know from the web development community is that there are scaling issues when it comes to front-end performance, but nothing that cannot be corrected fairly easily. And I for one found it promising that the site was built using responsive design, though I’m not so certain I’d enjoy signing up for healthcare through a mobile phone.

The back end, on the other hand, has been a bit of a disaster for a plethora of reasons, but primarily because the entire system is reliant upon the robustness of antiquated systems; from the descriptions of the issues it appears the entire structure was not adequately tested for the projected user load, but the fact that it failed under strain is not surprising. But I’m done rehashing these points.

“If you like your plan, you can keep it…”

What makes the entire affair an unmitigated disaster is what it ultimately means for consumers and citizens–it means increased costs. This was not an unexpected consequence of the rules that were implemented.

What some were not expecting to see was their existing insurance plans being phased out in an effort to offer plans that meet the requirements of the PPACA. The law required existing plans to essentially remain unchanged in order to maintain a grandfathered status; because this rule included maintaing the cost structure from year to year, this became impossible in practice. The result is a doubling of cost to the consumer as unnecessary coverages are tacked on. You in fact, do not get to keep your plan no matter how much you love it.

If you’re one of the unlucky few to lose your current coverage, and are pushed into the exchange system, you’ll be confronted by much higher coverage costs than you’re used to.

Couple these two points with the exchange system failures and you have the potential for major disruptions in coverage for many consumers. Will that lead to decreases in coverage in complete opposition to the reason the law was touted to begin with? I expect it in the short run.

We should be decreasing costs

If we want health inflation to stay low and health care costs to be less of an anchor on advancement, we should want more Americans making $50,000 or $60,000 or $70,000 to spend less upfront on health insurance, rather than using regulatory pressure to induce them to spend more. And seen in that light, the potential problem with Obamacare’s regulation-driven “rate shock” isn’t that it doesn’t let everyone keep their pre-existing plans. It’s that it cancels plans, and raises rates, for people who were doing their part to keep all of our costs low.

Ross Douthat

Precisely right. Aside from the mandate, the fact that every regulation in the new law screamed increased costs for consumers was a giant red flag that proponents of the legislation either ignored completely or denied were even issues.

In spite of the fact that we want as many people as possible to be covered, this was never a good solution. The website is another example of how much of a shit-show the entire thing was.

#Missing In Action

Where In The World Have I Been?

What a fast six months it has been since I started my new job. I’ve loved every minute of it, but man has it kept me from doing much thinking about writing. I have literally had nothing to say or add since May, and that makes me a little bit sad. I even took my site down–sort of–for a month and a half. Just thought I’d keep a simple landing page going.

I’m not going to promise that I can keep up, but over the course of the next year I plan to develop an iOS app of my own. I’ll catalog the process here as often as I can, and hopefully learn a thing or three in the process.

So, it is nice to be back.

#ARS, #Career

Moving On

If you visit my website often (hi, no one), you probably noticed that I made a few changes in the description of who I am. Well, singular person, that is because I will be moving on from my previous job and joining the team at ARS Advertising on March 25. ARS is, “a fully integrated marketing, print & interactive design and content management company with a strong focus on client service, innovation and results.”

This is a move I am extremely excited about, but one that I am also a little bit saddened by–saddened, because I’ll be leaving a company and a group of people that have meant an awful lot to me. I described it with my colleagues as bittersweet. I will miss every single one of them.

At this point, I’m not entirely sure what I’ve gotten myself into. The move is certainly a promotion for me, and that part is nice, but the role is sort of undefined for me as of now. But that’s also very exciting, because it gives me an opportunity to grow the position as this branch of the company begins to take on more interactive work.

I don’t know what the future has in store, but I’m really excited to find out.

#Google Reader, #Mourning, #Technology

On The Passing of Google Reader

When I heard about the impending closure of Google Reader, I reacted as any rational person would: I freaked the hell out in my head, and wondered what I would do now that a huge part of my daily workflow for the past eight years was going away. Does that make me an entitled bastard? Probably.

Their reasoning behind the closure was that “usage of Google Reader has declined, and as a company [they’re] pouring all of [their] energy into fewer products,” and that seems like a bit of a cop out, for many reasons. To address the first point, we never really get a solid look at what those declining numbers are. Did they lose 50% of their user base in two years? What exactly does that look like? In so far as focusing their energy on fewer products, they chose some pretty wild products in a range of industries that are decidedly not part of what I perceive to be their core. Are self driving cars, Google Glass, and Chromebooks really more important than a product that is useful right now on the web?

I don’t know why I’m so bothered by this closure. The fact is, I gather the vast majority of my news and information from Google Reader, and switching to another service is going to be tough. I’ve already chosen Feedly, and done the prerequisite sync, but it’s not the same the experience. Perhaps with time, the information flow that service provides will match up or become better, but right now, I’m not impressed by the in-browser experience.

Sad to see you go, Reader.

#iPad, #iPhone, #Retina, #Wallpapers

Griddin iPad & iPhone 5 Retina Wallpaper

I bought an iPad recently. Love the thing, but finding wallpapers that I liked was a losing effort. What’s a graphic/web designer to do but design their own? Being a lover of all things grid when it comes to my device wallpaper, I created a set for the iPad and iPhone 5.

The challenge with a grid on the iPad is creating a usable grid with the device’s multiple orientations. I really wish they would have designed them to line up properly; but because they didn’t, the multiple grids create a more interesting looking wallpaper. Enjoy responsibly!


#Gallery, #WordPress

Updating The Gallery Markup

I’ve wanted to use the WordPress gallery shortcode functionality for quite some time on my site–not that I would overuse or abuse it or anything–but it seemed rather useful for including multiple images in a post if I happened to want to do so.

The unfortunate part about using it is the resulting markup that ends up being generated by the shortcode. The original code utilizes a definition list (dl) for each image in the gallery, and inserts a line break (br) after each row. Not the cleanest code in the world. I’m also using a lightbox to display the full size image and could not utilize its native gallery functionality with the markup as is. What’s a man, or woman, to do? Improve the situation, that’s what!

Improved Markup

<section id="gallery-1" class="gallery gal-col-3 clearfix">
    <figure class="gallery-item">
        <a rel="gallery-1" href="img/link/src.jpg" title="generic title"><img src="img/link/src-thumb.jpg" class="attachment-images-thumb" alt="generic title" height="220" width="220"></a>
       <figcaption class="wp-caption-text gallery-caption">Generic Caption</figcaption>
    <figure class="gallery-item">
        <a rel="gallery-1" href="img/link/src.jpg" title="generic title"><img src="img/link/src-thumb.jpg" class="attachment-images-thumb" alt="generic title" height="220" width="220"></a>
       <figcaption class="wp-caption-text gallery-caption">Generic Caption</figcaption>

This code is much cleaner, and perhaps a little more HTML5 centric using the figure and figcaption tags, while also eliminating the page breaks. In the spirit of OOCSS, I’m keeping most of the original classes intact. How am I styling that up? Glad you asked.

The Basic CSS

I’ve created a base set of styles to get you started. I’ve purposely not styled certain items in this tutorial/plugin because you should modify these to fit your purposes.

.gallery {
    margin:1.5em 0;
.gallery-item {
    float: left; 
    padding: 1%;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -o-box-sizing: border-box;
   box-sizing: border-box;
.gallery img {
    max-width: 100%;
    height: auto;    
    display: block;
    margin: 0 auto;
/* A gallery image caption */
.gallery .gallery-caption { }
 .gal-col-1 .gallery-item {
      float: none;
      padding: 1% 0;
  .gal-col-2 .gallery-item {
  .gal-col-3 .gallery-item {
  .gal-col-4 .gallery-item {
  .gal-col-5 .gallery-item {
  .gal-col-6 .gallery-item {
  .gal-col-7 .gallery-item {
  .gal-col-8 .gallery-item {

Time To Change It All

You might be thinking, “that’s all well and good, but how do I get that beautiful markup on my site?” I’m glad you asked. There are a couple of approaches you could take. On my site I chose to create a new function in my theme functions file to manage the short code because that’s all I needed for my setup. For our purposes here, a plugin makes distribution easier.

If you wanted to go the theme function route, you can follow along to get a basic overview. First, unregister the default gallery shortcode in order to setup our own.

// replace gallery shortcode
add_shortcode('gallery', 'mm_gallery_shortcode');

Next, we need to modify the default gallery shortcode function. One of the first sets of things we’ll change are the default attributes in order to ensure we’re using semantically correct tags.

    'order'      => 'ASC',
    'orderby'    => 'menu_order ID',
    'id'         => $post->ID,
    'itemtag'    => 'figure',
    'icontag'    => '',
    'captiontag' => 'figcaption',
    'columns'    => 3,
    'size'       => 'images-thumb',
    'include'    => '',
    'exclude'    => ''
), $attr));

Then we’ll reflect those changes just a little further down in the function.

$itemtag = tag_escape($itemtag);
$captiontag = tag_escape($captiontag);
$icontag = tag_escape($icontag);
$valid_tags = wp_kses_allowed_html( 'post' );
if ( ! isset( $valid_tags[ $itemtag ] ) )
    $itemtag = 'figure';
if ( ! isset( $valid_tags[ $captiontag ] ) )
    $captiontag = 'figcaption';
if ( ! isset( $valid_tags[ $icontag ] ) )
    $icontag = '';

The last portion I want to highlight in the code is the actual output. I changed the gallery div tag into a section tag and modified the classes to reduce their number. I then add one to reflect the column number. Using str_replace I also add a rel attribute to our image link. Additionally, I have eliminated all line breaks from the output.

function mm_gallery_shortcode($attr) {
    /*A LOT of excluded CODE.....*/
    $gallery_div = "<section id='$selector' class='gallery gal-col-{$columns} clearfix'>";
    $output = apply_filters( 'gallery_style', $gallery_style . "\n\t\t" . $gallery_div );
    $i = 0;
    foreach ( $attachments as $id => $attachment ) {
         $link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);
         $link = str_replace( '<a href', '<a rel="'. $selector .'" href', $link );
         $output .= "<{$itemtag} class='gallery-item'>";
         $output .= "$link";
         if ( $captiontag && trim($attachment->post_excerpt) ) {
             $output .= "<{$captiontag} class='wp-caption-text gallery-caption'> " . wptexturize($attachment->post_excerpt) . " </{$captiontag}>";
        $output .= "</{$itemtag}>";
    $output .= "</section>\n";
    return $output;

The code I’m highlighting above is incomplete, so I recommend you use the plugin if you have no clue what you’re doing. Otherwise, use it as a jumping off point.


View Project At GitHub

#CSS, #Front End Development, #JavaScript, #jQuery

Eliminating Frivoulous JavaScript & jQuery Use

So, one of the first things I wanted to do in the process of developing this new theme was to eliminate a lot of the JavaScript bloat that existed in the previous theme. I just kept piling on jQuery plugins in order to get certain layout ideas and interactivity functioning. Not the brightest move on my part, particularly when I just attached them willy-nilly on every page minified in the header.

Now that you’ve stopped laughing hysterically, I have my reasons. I found that my method of inclusion had a lot more to do with the nature of my WordPress theme than anything else. I do eliminate quite a bit of the bloat that generally accompanies a WordPress approved theme in the form of classes and the general structure that most of them use. Suffice it to say that my development methods are not going to lead me to develop massive award winning theme releases–I specialize in custom jobs that have very specific requirements, and starting from scratch to reduce bloat happens to seem like a logical move on my part. But…my digression has nothing to do with the rest of this post.

My theme structure forced me into some bloated thinking in terms of user interactions. There was a lot of basic interactivity that I was using jQuery for, including some hovers that revealed content with a basic fading transition. I decided for this new theme that I would completely eliminate that and rely on css3 as much as possible. My first goal was to get it working in the current major browsers (i.e. Firefox, Chrome, IE9), and then to wrangle support out of earlier versions of IE. I have yet to decide on my approach there, but I’ve eliminated JavaScript as an option. Worst case, I’ll have to settle on changing the interaction method completely with those bits of content.

As an example, for my image posts when the primary image is hovered over I wanted to reveal an overlay with the date and title of the image. In the first iteration of this I used jQuery for the animation. That seems like an awfully bloated approach, and so I eliminated it relying instead on css3 transitions.

article.images header {
    opacity: 0;
    -webkit-transition:opacity 0.25s linear;  
        -moz-transition:opacity 0.25s linear; 
                 transition:opacity 0.25s linear;
article.images header:hover {
    opacity: 1;

Of course, YMMV in regards to browser support, but for now it fits my purposes. My next goal is to modularize what I’m currently using in order to better organize my code and to hopefully eliminate some inefficiencies. I will of course be writing all about it.

But the point of all of this is that I had fallen into the trap of cramming as much awesome jQuery animation as I could into my site because I thought I needed it. It didn’t have a real purpose, though.

The fact is, I needed to understand what was going on behind the scenes in order to truly appreciate what was at work; in that way I could have found a simpler, more efficient method of accomplishing the same thing. Here’s hoping 2013 is another year of lessons learned.

#Front End Development, #JavaScript, #Web Design

My Experience as A Front End Developer

Update: Just to clarify this, I see it more as a description of the fact that I am not happy with my level of knowledge rather than an indication of my total lack of it. I feel like this attitude is a motivator for me more than anything else.

It’s certainly no lie that I’ve fallen behind in my knowledge of the Latest & Greatest™ (best) practices emerging in the last year or so; staying abreast of new ideas in the world of development is without a doubt one of the toughest things to do in this profession–aside from the work itself.

What got me thinking about this was a post I read today from Mr. Noah Stokes about the advice he gave a young front end dev on how to expand his skill set.

The easy answer to this is to just do more work. Take on as many projects as you can. The more work you do, the more you’ll learn as you arrive at different problems and challenges with each project. How you solve those problems is how you build your skill set.

Noah Stokes, Advice for Up and Coming Front-End Developers

And that right there is the greatest challenge I face on a day to day basis. I’m simply not diving into code nearly as often as I should simply because my day job isn’t about building new things and facing new development challenges. In fact, I’m often working in some facet of design that does not require a single line of code. Instead, my job is about code maintenance, expansion, and refinement. How do I take legacy work and content and turn that into something built for modern consumption?

That in itself is a challenge, but not one that is at the bleeding edge of development work.

For me the most glaring weakness in my toolkit is my knowledge of JavaScript. I come from a php background so OOP (haha, php isn’t a good language) is not a foreign concept to me, but I am by no means a CS graduate nor was I particularly interested in the finer points of programming logic while I was building up my skill set. This has come back to bite me in the past two years as my chosen path is starting to require the knowledge, of and expertise in the use of, JavaScript.

My goal for 2013 is to make my weakness a potential strength. Perhaps that means posting a bit of code every week exploring some problem I have. Who knows, but the bottom line is, if I want to survive, I have to improve.

#Redesign, #Responsive

A New Year, Another Redesign

With every new year comes a New Year’s resolution related to someone’s ideal self–in the online sense, that would be my website. I built the previous version roughly two years ago, having modified it slightly since then, but much has changed in web development over that time.

Let’s see how many buzzwords I can hit. Developing with responsive techniques is becoming more important than ever. We’re all quickly moving towards a model of development that is completely independent of the screen resolution of users. With that in mind, front end developers are being asked to know everything from HTML/css to JavaScript. As those techniques change, so too does design, favoring big bold and flat visuals in the mold of Microsoft’s formerly-known-as-metro interface. Woo, that was fun.

Frankly, I favor those visuals. The new Surface tablet is absolutely wonderful to use and the operating system work’s perfectly in that context. Microsoft, go ahead and feel free to send me one. No pressure. I basically built this site from the ground up to be flat and simple. New markup, new JavaScript, new style sheets. All new, built in a marathon three day session.

Unfortunately, certain portions of the site still contain legacy code and design. That’s pretty much unavoidable at this point. I’ll be modifying those pages as I go. Enjoy the new look, and check it out on your mobile phones and tablet like devices.