Recent Trends

I call them trends some might call it practice. I think both are fairly close to one another but practice is more the term I should be using since I am referring to code.

What makes for a practice? Especially when it comes to programming? Who decides and says a certain way is good? Yeah are groups that try to make standards for everybody to use and follow but that doesn’t always mean they will be followed.

But all of this is just a small bit to entertain the main reason behind this post. Navigation menus. I have come across quite a few that really intrigued me and wonder if i would ever implement in my own projects or future projects. Yet some that I have to ask the question of what that developer what thinking when he, or she, designed it.

The most popular of the bunch being the hover over and dropdown method. Fairly simple and doesn’t require anything major outside of HTML and CSS.

The next one I’ve come across is the the jQuery style of menu. Or at least a javascript enabled navigation menu. Used to hide, resize and modify to fit and often times create more interaction for the end user.

One I haven’t seen in some time is the click and the menu displays. Been far too long since I’ve seen that one but there is most likely a reason – UX/UI related is my guess.

Granted these are good but when it comes to scaling them down the behavior has to change accordingly. Going from a screen size that is greater than 8 inches down to a four or even three inch screen is, and can be, a pain. Figuring out a good solution can be difficult but thankfully there are resources out there that reduce that pain.

The one menu system I have come to not like is tiny nav. For some weird reason I don’t really like the look of it. It almost seems overly simple. Keep in mind that is my personal opinion on that particular method. Moving forward with my thoughts the next thing I have noticed is how some people in WordPress themes use the good old copy/paste.

Yes, I have been known to do that but I at least change my code to suit my needs. Some of the themes I have looked at don’t try. They leave everything intact. Very lazy if you ask me. A perfect example would be a recent one that used Twenty Twelve files verbatim. It kind of hurt to see that.

Part of that reason is because as an aspiring developer I wouldn’t want my code to be used in that manner. One of the reasons I have the utmost respect for those that have been doing what they do for so long. They worked hard to achieve their goals. I know I am so why wouldn’t they? At least that is how I see it.

Practices are a great thing. Guitar lessons are the same. I practice my guitar to get better. Coding is the same. But at what point and when does one encounter a bad practice? One more practice I have noticed in themes is the use of actions.

do_action()

in particular.

This just goes to prove that I need to read the source code more and more. So here I go!

Learning with practice

The progress of my theme is decent. I have been learning how to work with Git and SVN more and more. I did recently have a little conversation with @ipstenu on Twitter about learning version control. Yes, I am still learning how to harness the power of simple commits and getting the hang of how to use branches and tags.

Which brought me to my main point: tutorials.

People on the web have dozens and dozens of them. Some are better than others and some are just beyond outdated. I was looking for a tutorial on how version control works using SVN. You would think I would find at least five. No. I found links talking about how SVN works but no real tutorial.

@ipstenu asked me if I could find one noob friendly tutorial. Of course I couldn’t. True, there wasn’t one. Yet. I have been contemplating creating a simple tutorial on how to use TortoiseSVN in a local setup. Sounds simple, right? Yes and no. The writing is a simple thing but taking all those screenshots to go with that will be a task in itself. I know I’m capable of it I just now have to find the time. Keeping in mind that even my current knowledge is not that great but it should suffice for the time being.

One of the first things that I learned was ‘commit’ so of course that will be the first topic. Next in line is ‘branches’ and ‘tags. and how they work. That is one thing I still haven’t yet mastered through a GUI. Just takes me back to when I was in Junior High and learning about computers but that is another story.

Yes, tutorials have helped me understand certain things but often times I don’t really learn unless I put forth the effort. Learning by practice is a great method and a great way for me and others to learn as well. I just hope that I can get my tutorial written out so that people understand. Although this has given me an idea for a future post: translation.

HTML validation issues

If it’s one thing I hate it’s loading up a site, click on something and then the layout gets all wonky on me. For the last two years I have read and learned about HTML and CSS validation. The one thing I have learned is that there are people out there that don’t care for it.

What I have learned from reading tutorials, forums and glanced from other (what I consider professionals) developers is that validation is key. I, too, agree that it should be good practice. Better yet: natural. The one issue I have run into as of lately is that WordPress will output an empty element and you get an error in validation. The other thing I noticed is that often times an image doesn’t always get a “alt” attribute. Yes, this can be remedied by making one in the media editing section but what happens when a user doesn’t put one in?

I think that by default WordPress should at least create a sort of container or filler for those rare scenarios. A good example is the gallery shortcode and the captions it creates; or rather it doesn’t. When there is no caption for the image it will still output that element but will be empty. Bad. Rather than creating an empty element just don’t output it. Again: bad.

So, rather than nothing do something. It’s what I kind of did with a quick solution.

$caption = wptexturize( $image->post_excerpt );
 if ( !empty($caption) ) {
 $output .= "tt< {$captiontag} class='wp-caption-text gallery-caption'>" . $caption . "n";
 } else {
 $caption = "No caption entered";
 $output .= "tt< {$captiontag} class='no-caption'>" . $caption . "n";
 }

It works for my needs and what is really nice is that if I forget to put a caption on an image for my gallery posts it will say: No caption entered.

Now I just have to work on REGEX to remove unwanted attributes. The journey continues! 🙂

Me, WordPress and Template tags

Recently I have been working more diligently on putting some finishing touches on my personal blog’s theme. Working on a local machine is so much easier now that I understand how it works. I remember when I started out with PHP it was painful.

I got frustrated because I didn’t know where the files had to go at first, the changes I had made to the configuration weren’t taking effect and random little things that almost discouraged me from continuing.

The other day I was reading on the WordPress forums seeing if there was somebody I could help. One thing leads to another and I wind up looking at frameworks, plugins and template tags. Now, I have posted something pretty similar to this before because it was a bit of a rant when I saw somebody posting code I felt was not good practice but that is besides the point at the moment.

What I really want to get to is why I’m writing about template tags. They are an extremely useful thing to know – to some. WordPress has several template tags at your disposal and I love it. There are however some that I have seen in some themes that I would love to use in some of my themes down the road.

A perfect example is using a template tag for navigational links. WordPress has a really good template tag:

< ?php posts_nav_link(); ?>

Simple. It does the job: create navigational links for more posts. I feel the downside to that is that it is all in one container. Yes, there are ways around it by creating your own template tag (which a lot of people seem to do) and use that instead. But what to use? I like the Kubrick method of navigational links where rather than using the one

post_nav_links()

you use two in one. Creating a previous and next link is easy. A better way of doing this is if you are using just the bare minimum amount of files in a WordPress theme is using conditionals to create the navigational links for certain looks.

< ?php
/* Create page navigation and post navigation
 * depending on what is being viewed.
 */
if ( is_single() ) { ?>
  
< ?php } else { ?>

< ?php } // end else statement

The little snippet works fairly decent but it is a little cluttered. It can be simplified a little more so that the only things that change are the

<

div>s containing the actual links. So we can modify it to:

< ?php
/* Create page navigation and post navigation
 * depending on what is being viewed.
 */

Now we don't repeat code and saves some processing power for other things. Amazing what cutting down two lines of code will do! Now we can wrap all that into a function and use it as a template tag to make things easier in an

index.php

file. So the final code would look something like:

/* Create page navigation and post navigation
 * depending on what is being viewed.
 */

function my_theme_nav_links() { ?>
  
< ?php }; // end my_theme_nav_links() 

Now we can use the function anywhere in our theme for post navigation.

Theme progress – good

Slowly but surely my blog’s is coming together. The one thing I am now attempting to do is work out a gallery system. While I do like the Twenty Twelve’s way of presenting the image gallery I want something a little different. The way the Twenty Twelve handles the images is by linking to a page. I don’t want that on mine. Part of that reason is because I won’t be having very many images that are bigger than 800 pixels wide.

What that really entails is that a person with a computer screen of about 13 inches will be seeing more photo than they bargained for. I don’t want to do that. Especially if a person is using a mobile device. That means that image would be the only thing that they see. That is a big no bueno for accessibility. Having to scroll side to side to view an entire image on a mobile device decreases the user experience in my book.

What I have so far is the single, comments, index, search form, sidebar, content, header, and footer pages completed. I still have to work on the functions, tweaks, custom template tags, page and post formats code pages. The one that I know will give my some issues will be the gallery.

I am slowly learning how to code that because the built-in gallery shortcode is not HTML valid. It outputs a element even when there is no caption for the image. What I have to do is one of two options: filter the gallery or remove the gallery shortcode and use my own. For the time being I think I will just have to settle for filtering the gallery output to get the desired result. Not that big of a deal; at least I’ll learn on the way.

The one thing I still have to finish, oddly enough, is the images that I will be using. I’m not sure if I will use individual files or just one since I do want to be able to support HiDPI down the road but that is another subject for another time. Right now I still have a few functions to declare and a few more things to code.

TortoiseSVN – version control status

More and more I have coded the theme for my site and more and more I beginning to understand how TortoiseSVN works. Version control has been good to me so far. Every bit of testing I do helps to program my brain to register and understand better. A good example is a quick little snippet I am implementing in my personal blog.

$p_tags = get_the_tags();
if (!empty($p_tags)):
?>
< ?php
endif;

That little snippet - I think - is pretty neat. The reason I think so is because I feel that you shouldn't put elements into the DOM that you don't need. Enough about code let me get to what I was really typing about: version control.

TortoiseSVN sample icons

Working with TortoiseSVN is great. Making commits is easy. Adding files and folders is even better. I have two different folders setup of course; one is the actual repository and the other is the working copy where I can tinker and play. After I have made my final decision of what to use as the final code I make that little commit and a new version is made. That I love seeing those little icons in the files and folders.

If I find an error or something doesn't quite work out I can just as quickly revert back to the earlier version. It is that easy and I love taking advantage of that. One great thing that I learned from watching a WordPress WordCamp video many months ago. Version control is, by far, one of the greatest thing I have come across - so far.

TortoiseSVN revision history sample

TortoiseSVN version control has made coding for me much more enjoyable. I am beginning to see the light at the end of this tunnel that is my final blog theme. Since I have most the ground work set for how the theme will be displayed I can start to focus on styling. It will be a fun task with SCSS; although in the near future I will start to use git more and more for future projects.

TortoiseSVN sample

Git is one more version control tool that I am looking forward to using. I have basic knowledge of how it works, I just need to actually work with it to really know and see it in action. Branching, tagging and merging will be a lot easier for me to comprehend once I use both version control tools more and more.

Code – Functions

Recently I was perusing the WordPress support forums in hopes to use some of my newly gained knowledge to help others that are learning just like me. I came across a thread that made me laugh a little bit. It was a practice I’ve never really seen and I think should be avoided; at least in my eyes.

The question was how to display the full content and not just an excerpt of the post. I thought to myself: This sounds pretty easy, let’s give this a whirl, shall we? Read the post and what the person is asking to do in show the full content when a person is viewing a specific category.

Simple. An

if

statement to check what the person is viewing and if it is true then show the full content otherwise don’t.

( is_category( 'videos' ) ? the_content() : the_excerpt();

That simple little line does so much with as few lines of code as possible. It is the ternary form of writing an if else statement. What is pretty much says is: If the category is videos the show the content otherwise show the excerpt. The snippet would be shown within a

category-video.php

file since that is the way the template hierarchy works within WordPress.

Now rather than posting code I gave the person the advice since they seemed to know a fair amount when it comes to programming. I am one of those people who if you give me some guidance I can then find my way. But I guess what he wanted was for somebody to do the work for him.

I think what really made me more compelled to not post the snippet was the way coded the functions. A way I’ve seen before but seems rather redundant and kind of pointless in my opinion. Wrapping a function within a function to test if that function exists is pointless when you know that function does not already exist. That was painful to say/type.

From all my books and random sites I’ve come to read about functions they have made more and more sense the more I use them. Functions are pretty much a simple tool. A way to make programming a little easier. The way I have seen functions being used is much like objects and I see those as multidimensional arrays. Yes, somewhat complex way of looking at it but it makes sense to me.

The thing that really threw me off was how this person was using functions to create HTML markup by escaping from PHP. While I have seen this, it was used in a manner that didn’t really call for it; you’re more likely to bloat a file that way and it’s very possible to get lost in all that escaping.

Writing code should not be complicated. You don’t need to change the wheel in order to get it right. HTML should rarely ever make its way inside of PHP. I believe HTML, from all that I have read, is more for static content and PHP dynamic. A good example would be the following snippet.

As you can see from the example the only things that are supposed to change are the title, content, meta information and of course the comments so why would you wrap that all within one function? I can see why to a certain extent but it just becomes redundant and just may hurt performance in the long run. Not only that it will be painful to resolve any errors if you have several functions doing that every single time.

/rant

Emmet – Zen Coding

Okay, I just recently found out about this amazing Notepad++ plugin and I am beyond in love with it! I had tried using Zen Coding but for some strange reason it didn’t work. It could have been me, to be honest.

The plugin works very simply by creating shortcuts to cut the development time. These shortcuts are simple snippets of code which come very handy when creating sample layouts.  When it comes to creating my theme I have found that it has helped me in thinking about how to think semantically for the web.

The way Zen Coding works is pretty straight forward and I love it for that. You input a string of text that you want, expand it and all the markup is done for you.

Sample of the before expansion
Before expansion.

It works a little like math, at least it looks like it to me. Still trying to understand the syntax but it looks fairly simple and I love a small challenge. When you go to expand you have to make sure that you are on the last character or it will expand everything up to where the cursor is at.

After expansion
The markup after expansion

I’m going to have plenty of fun with this one. 🙂

Code – Theme status: structure

So far I have been experimenting with adding theme options to my theme for when I get ready to actually share the theme with the WordPress community. I have the basic file structure that I want to be using for themes down the road. It is of course HTML5 and I’ll try and mess around with CSS3 and transitions eventually.

The basic markup is:

< !doctype html>


  


This should be a rough guideline for the future themes and pages I create. The next stage will be using PHP to display all the dynamic content.

The reason I think this is a good structure is because it almost replicates a book. The <header> tags act like the index for the site while the <footer>  acts as information and the <div> with the class of content is, of course, the content of the site.

Next step: files to be used and the folder structure.

Code – some random javascript conditionals

Warning: what you are about to read deals with code.

Working with PHP is fun for me. At times it can be a pain but I still love it. One thing that I have been trying to find is an AJAX media query for loading certain stylesheets when the viewport is at certain widths. I know that it can be achieved but what I’m wondering is how I would pull this off with WordPress.

jQuery makes it easier to achieve since it is a library to help the development process. I know I will begin with that and PHP but the next step will be creating the necessary files.

Of course I want to think mobile first but my dilemma is that would require http requests – to the best of my knowledge. The good side about that is that yes it would load the needed stylesheet and won’t do any browser sniffing so it relies on the viewport and resolution of the device.

On the plus side I can pretty much start it fairly quickly with a simple jQuery call.

$( window ).resize( function(){
  var width = $( window ).width();

    if ( width < 640 ){
      // Load this stylesheet
      } else if ( 641 < width < 800 ) {
      // Load this stylesheet
      } else {
      // Load this one
      };
});

Now what this really does is check when the screen is resized and not really for the initial width which is what I need to check for. So, what I really need is to first check the width and load the stylesheet accordingly and if the window gets resized run that same check. So I can create a new self invoking function and see how that would work.

var w_check = (function(){
  if ( width < 640 ){
      // Load this stylesheet
      } else if ( 641 < width < 800 ) {
      // Load this stylesheet
      } else {
      // Load this one
      };
})();
$( window ).resize( w_check() );

But then I run into the issue of having more than one stylesheet opened at once and risking the theme getting all warbled. 😐 Yes, they would still have media queries but can I safely use all at once without hurting the layout? I think I may just have to test this out before I deploy. Notepad++, here we come!!