Things I've Posted in ‘Entries’

Page 2 of 18

#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!

griddin


#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>
    <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>
</section>

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 {
      width:100%;
      float: none;
      padding: 1% 0;
  }
  .gal-col-2 .gallery-item {
      width:50%;
  }
  .gal-col-3 .gallery-item {
      width:33.3333%;
  }
  .gal-col-4 .gallery-item {
      width:25%;
  }
  .gal-col-5 .gallery-item {
      width:20%;
  }
  .gal-col-6 .gallery-item {
      width:16.6667%;
  }
  .gal-col-7 .gallery-item {
      width:14.2857%;
  }
  .gal-col-8 .gallery-item {
      width:12.5%;
  }

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
remove_shortcode('gallery');
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.

extract(shortcode_atts(array(
    '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.

Example

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.


#Not Popular, #Spam

Adventures in Comment Spam

My personal site is hardly a heavily trafficked property, so when I open up my website’s dashboard and discover comment spam I get a little bit excited–mostly because unpopular sites don’t receive comment spam (right?). Most of the time the content amounts to what I can only figure is gibberish in another language or content stolen from some other website. Occasionally, the spam is a rehash of a comment already on the page. The common thread is that the “authors” are attempting to game the search engine game by getting their links on my site.

Well today, I pull up the comment spam to take a look, and a few caught my eye. Each of these seem to be referring to a WordPress theme–that I have not created, by the way–asking for help in solving some random issue they’re experiencing. Intriguing. Let’s see how I might be able to help.


1) Ramesh writes…

I have another new site.After insltal your theme,the widgets work well with your social.However, on my current site, even i deavtivate all plugin,it still have the same problem !!( widgets will not show up if show community widget )Also, if i set Homepage Layout : to Blog, after press save ,it always show Magazine instead, eventhough first page display correct.( The new setup site doesnot have this problem )I have never find problem like this before, very strange. Drop down menu works with Page but not for CATEGORIES.even i have sub-categories, there is no drop downใPlease HelpThanks

Wow, that sounds rather discouraging. Personally if I ran into those problems when activating a theme, I might discard it and start searching for something new, so hats off to you. My suggestion is to turn on debug mode and see what error messages come up. Best bet is to look for ErrorException [ Notice ]: User error mode initiated in file ../theme_directory/header.php. Very common.


2) Husel muses…

Hi! Great theme! I was wondering if there is a way to revmoe the Posted by admin on July 29, 2010. Uncategorized Comments Off Edit box in the blog posts? I thought it was author comments off but that doesn’t appear to revmoe it. Thanks! Again, great theme.

Husel, buddy, thanks a million! My theme is pretty great. Well, the best way to remove that is to navigate to the posts.php file and look for the code that seems kind of similar to what you’re requesting I help you remove. All of my themes are meant for developers.


3) Mina stammers…

well so the code didn’t showIn the header.php, I had to comemnt out the if else statements in the Top Nav section cause the function(wp_nav_menu) doesn’t exist or isn’t being called. If I comemnt out the if statement, then the menu appears. What do you think is happening?Tony

Well Mina/Tony, I’m not entirely sure. What code didn’t show? What if/else statement are you commenting out? Who is asking the questions?


Thanks for commenting guys, I’m sorry I couldn’t let these just pass into obscurity on an old post. Hope I helped, and…game blouses.


#minify, #Web Development

Minify on the Fly? Probably Not The Best Idea

In order to serve up better performance on my site I minify my JavaScript and css files using cssmin and jsmin (in spite of the author’s exhortations to do otherwise) respectively, but I don’t do it in the most efficient manner possible. I’m basically serving up those cache files on the fly, making it the old school, non production method for doing this. I’m not actually processing the files on the fly, however, only checking to see if a source file has been modified before rebuilding the cache.

I’m running it all through the WordPress wp_enqueue_script/wp_enqueue_style system in my custom theme, but I need to find a method that would work more efficiently in a high traffic environment–not that I have that problem at the moment–instead of serving up those cache files using php.

I thought about running a cron job that would take care of the minification, then just link the theme to minified css or js files. Any ideas?


#Politics, #Secession

The Secessionist Petitions Are a Terrible Reaction

While I have my own opinions on the legality of the secession of states from the union–and I happen to agree with Mr. Jefferson on this subject–I have to question the usefulness of the exercise; unless these folks are merely releasing the frustrations of the political loss and the vexing nature of their political opposition, this particular bid has very little merit in my eyes…so far.

What I suspect is that they see a government of limitless power in one that is run by Democrats; they see their rights reduced by onerous regulation; they see a government that gains additional power under a tenuous connection to taxation; and they see a future that does not include their point of view. I could not agree more with a number of these suppositions, but do I see a need for secession? If they think the political and economic situation is bad now, then they will recoil in disgust at the results of their attempted revolt.

No, I say we live together and we die together as a union of sovereign states. Not merely bound by documents, but by more important connections: community and family. We cannot base rash decisions on political connections that are easily severed. Political movements and philosophies are cyclical, but one thing is true that we cannot ignore: society is always marching forward, and to suggest otherwise is to disregard history.

Whether that forward movement is ultimately beneficial, however, is another matter.


Update 11/15/2012 Just a few things to note here on the legality of something like secession. Eugene Volokh addresses this whole concept quite nicely in a post at The Volokh Conspiracy, but this point in particular touches on what my thinking on secession was:

3. Is It Legally Possible for States to Secede? Of course, if the rest of the nation sufficiently agrees to this. It’s possible, given the originalist argument in Texas v. White, that Congress and the President can’t accomplish this through the normal federal lawmaking process (plus the consent of the seceding state), though I suspect that ultimately the constitutional question will be seen as a political decision for Congress and the President to make. But even if the Constitution is against this, it can be amended. If 2/3 of Congress, 3/4 of the states, and the seceding state agree to secession, secession will happen, and American legal institutions would view it as entirely legal (and, in my view, correctly so).

Seems right to me, but I’m no economist.