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.

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

Keeping WordPress on my mind

I keep posting on this about how code is becoming a part of my life and yet I have yet to actually post any of it; It is really depressing to see and read. So, here goes: With the project I have been working on (my site) I have been working with how WordPress handles its files and queries. It has been good seeing and interacting with it all. A good, and quick, example of how it works is here.

With that in mind I have thought about how I want certain things to look on the front page of the site. So, this would entail that WordPress will look for one of many pages. The first one it will look for is

home.php

and then it will look for

index.php

if it doesn’t find the first file. That is, of course, if I am using WordPress as a blogging tool otherwise it will look for the

front-page.php

if I have it set as a CMS (Content Management System ).

The files I have created so far are the basic ones that WordPress needs to be read/seen in the Appearance panel. They are comprised of

style.css

and

index.php

which are the two minimum required files. The front/home page so far will of course have a featured/sticky support but will be able to use the excerpt if the post has it filled out otherwise it will just post the entire content. That little snippet looks like:

<div class="entry-content"></div>
<pre>
    <!--?php if( has_excerpt() ) : the_excerpt(); else : the_content(); theme_linked_pages(); <span class="hiddenSpellError" pre=""-->endif;?>
</div><!-- .entry-content -->

The next stage will be creating the look of how an individual post will look like. That file is called:

single.php

. It will look fairly close to the homepage layout but of course there are going to be subtle differences. I’m debating if I really want a sidebar on the entire site but I know it will be useful for simple navigation.

Now, WordPress uses functions as template tags. Case in point:

the_content()

. It displays the content of the post when used inside of a WordPress loop. I have created a simple

functions.php

file that will house all my custom functions for the theme. In that file I inserted:

function theme_setup () {
        // Add post format support
        add_theme_support( 'post-formats', array('aside', 'image', 'link', 'quote', 'status') );
        // Add theme support for custom background
        add_theme_support( 'custom-background', array('default-color' => 'fff' ) );
        // Add theme support for Post Thumbnails
        add_theme_support ( 'post-thumbnails' );
        // Register the menu
        register_nav_menu ( 'primary', 'Main Menu');
    };

What that little snippet does is create support for post formats, custom background support, thumbnail support and creates a menu holder for my theme. I’ll explain those things down the road – hopefully.

Now, up until recently I have only really posted photos of what my site will look like. This has been a great experience on how my site will look like when I actually start posting more and more code since I am using a plugin to create the syntax highlighting. Taking a turn into the code side of web development will be a great thing for me. Now to explore more about theme development and WordPress.

Making some progress

Slowly but surely I am making some progress about how my site is looking. Don’t get me wrong I like the look at the moment but I want something that is very simple since it is just my thoughts and nobody elses that I am writing about. The next phase will be expanding the theme to support a good part of WordPress functionality and capabilities.

Yes, I have worked on this for far too long and I think it is now time to really finish what I started nearly six months ago. Has it really been that long? I know I am nearing a year with Web hosting hub and I have been pretty happy with them. Granted I haven’t experimented as much as I would like to but I have learned quite a bit from the things that I have done.

Site's header portion

The site is slowly coming together and I like the progress that I have made thus far. There are a few things that I still need to modify but it will all come together pretty soon. There are just a few more things to modify and it will all be done.

The one thing that I will have a bit of an issue with will be creating a good JavaScript gallery. Thankfully it is all making sense to me now. Now to try to get some sleep so that my brain can make sense of all the things running through my mind at the moment.

My blog site

This blog site has been a great thing for me. I have learned so much about myself by actually writing about my thoughts. It has opened my mind to how I really feel about life and the world around me.

I have been experimenting more and more with web design and development. I can’t wait until I finally finish my site’s final design. There are so many resources that I have used in order to create the final look of the site. When I get a moment or possibly the next day that I have off I will try my best to create a simple tutorial on how to create a simple local server to test websites. Granted there are plenty of tutorials out there as well but this one will be more suited to me since it dealt with my experience.

The one thing that I am debating is what fonts I want to use because there are so many elements that I want to include but I don’t want to throw off the feel of the site entirely. As many people have come to know I have fallen head over heels about type. I am in the midst of creating a post about how type has influenced my daily life. Yes, it does sound a little odd but it will make sense when it is finally published.

Recently, I have been looking at lines of code in order to create my site. Some of the things that I have learned are that I need to read more and more. Not just code but books and articles in general. I have so many unfinished books on the shelf that they have practically gained weight from all the dust they have collected.

The other thing that struck me as interesting while redesigning my site was looking at exactly what I post and how I can stylize how I like it. There are several things that I post but I know I don’t use the full potential of WordPress when I could be. I have learned about the subtle differences between digital publishing and physical but that will be for my type posting.

In the meantime I will keep reading about programming, art, design, type and how to merge them together into one good-looking blog that I call my own.

Wireframes and mockups

What are wireframes?

Simple. Wireframes are a bunch of boxes, circles and lines that when combined together create a skeleton of what will eventually be a finished product. Call it the chicken wire to a sculptor, the rough sketch to painter or even the Lego instructions of the X-Wing.

But why?

Why not? As a visual artist, and person, I have to communicate with visual aids. One way is using said circles, squares, lines and even some text to help get my point or vision across to others. Web design is much the same way. A designer must create a visually stunning website while at the same time making it an easy to navigate through the site.

How is it achieved?

By creating wireframes and mock-ups. They are a great tool for designers as well as developers.  Recently, I have been working on creating a set of elements that are commonly used when it comes to creating web site wireframes and mockups in Illustrator and it has been both a little hard but fun as well. I have loved every minute of it since it has given me ideas about how I want to visually communicate to a future client even better. Part of it derived from reading the WordPress developer site and seeing how they got their ideas across and so I figured I would not only follow suit but also find a way to contribute to the community.

I am almost done with the Illustrator file with some basic elements but I keep getting this weird feeling like I am forgetting to include something. Something that is a key element when it comes to wireframes but I keep looking and nothing has yet to come to mind.

What next?

The next stage will be creating a user interface file with both Illustrator and Photoshop to share but that won’t be for some time. Either that or create some simple buttons, icons or random web graphics for people to have for free.

My Notepad++ take

Over the years I have loved working with code and can recall when I first saw those little lines that created a table to create a two column page and used simple graphics as the background of the entire table. I was using Microsoft’s FrontPage editor to not only create my own pages but to look at the lines of code other pages were using. From that I learned how to create simple things like links, images and the basics of how a web page is created.

Several years later I found out about Adobe’s GoLive program and wanted to try it out. I downloaded a demo and fell in love with the WYSIWYG (what you see is what you get) editor but quickly realized that it wasn’t for me. I loved seeing the curly braces, the semicolons, greater than, ampersand and all the dancing characters that actually made the page a page and gave it the theme it did.

A few more years pass by and now Adobe has DreamWeaver. I, of course, tried that out and loved being able to switch between the two but still wasn’t fully in love. I will never really be satisfied, I guess. I have weird expectations when it comes to things like that, but that is besides the point. I knew I wouldn’t be able to afford the program so I ventured out to see what other available code editors were available. I found several but the one that I still use to this day is Notepad++.

The main reason I fell in love with it was the ability to change the theme to my own personal one. I could create one and choose to share with the community if I wanted. (I have yet to create a custom theme but will be when I have a lot more time to.)

Aside from the ability to change themes the biggest reason was the syntax highlighting of the program. Being that it is free doesn’t hurt much either. Recently a new version came out and they added a few more things to make me want to keep using it more and more. The best feature for me is the document map. It helps so much when looking over the nearly nine thousand lines of code that make up the development version of jQuery to understand how it works or looking at the beautiful code that makes up WordPress.

Document Map

Along with the ability to quickly look over the lines of code is the ability to quickly change themes. There are a few that come already with it but I use one that I found here. It is a simple one for web developer/designers but it is somewhat limited when it comes to other language support in syntax highlighting. For me it does the job on a smaller screen and for my main computer I like using a darker style so I can keep looking at the screen just a few more minutes longer.

Theme selection

Along with styles there several plugins that make it all worthwhile to code an iOS app, site or simple script. For those site developers using the native FTP support is extremely simple and rather intuitive. Nothing fancy for me which is what I love in FTP support. You have the ability to create several profiles (sites) and connect/disconnect when you please. Besides FTP, there is also REGEX support and many, many more plugins. The newest one being PCRE (Perl Compatible Regular Expressions) support and I know that once I get a good book on Perl and regular expressions I will be using that to its full extent.

Plugin manager

Being able to connect via FTP is good and being able to read all those lines of code is what a code editor should really be about. Having the ability to change the font to what I like and the colors to my choosing so I can differentiate between what is a comment and what is actual code is essential when it comes to developing and creating a good web app.

JavaScript syntax highlighting

But what is a good editor without the ability to expand and collapse? One of my favorite features of Notepad++ is the ability to do so. Almost a perfect model of what a document tree is. That is one feature that I have used since the first day I installed it in on my computer.

With technology making things much, much easier to distribute in the next release I can’t help but wonder what will be next. The one thing I would love to see is either a plugin that has support for version control or have that be part of its core program. Only time will tell.