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

My WordPress theme

I finally, finally got the ball rolling on what will be my theme and theme structure for this site! I am so excited about this. After having read so many posts about templates, CSS, OOCSS, SaSS, PHP and just about any random acronym you can possibly think of I finally have a name for the theme and the look.

The name is actually inspired, of course, by Flamenco. I am calling the theme: Sole√°. The name is a the type of comp√°s, or time signature that is in one of two forms. 3/4 and 6/8 time is a simple way of putting it but there is more to it. It doesn’t really follow the basic musical pattern but I’ll let you research that on your own if you want to really learn more about Flamenco music.

I am slowly learning how to work with TortoiseSVN as my local version control and will try to gain more knowledge with github with this theme as time progresses. I know that my second theme will be a lot easier to work with once I get the hang of my workflow and work area.

Photoshop is a great tool and I love using it. Notepad++ and I have been getting along more and more and Chrome has been very dear to me in this learning process. Forums and web articles I have read are great and taught me not only new techniques but also helped improve my way of thinking about programming.

The theme is a simple theme with very few images to cut load times. The colors I have chosen are black, a dark blue, a grey tone, and blue tone as an accent and for emphasis for certain elements like links and some headers.

The only images I chose to use are for the header and maybe a divider for the bottom of the article when being viewed as a list of and not a single view. The one view that will be a little tricky to finagle will be getting the gallery the way I want.

There are so many ideas that I want to use for the gallery format postings but I think I may just go ahead and implement a simple one. Click on an image and it takes you to the single image page and not having a modal window with the gallery of images; that version I’ll try to implement for the next theme or maybe as an update.

The reason I am wanting to release said theme is because I want to learn more about web development and I hope to share my learnings with the community as well as others. So in the next three, or four weeks, please don’t be alarmed if I start posting three things in one day about code. It will serve as a way for me to organize my thoughts and ideas as well as sharing my pains with the world and hopefully some people gain some insight how to code for their own projects down the road.

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.

A new direction

Sad to say and write that I haven’t really been working on my Bachelor’s Degree in well over a year. Why? Part because I haven’t looked at other schools that I would like to attend online and the other part is because I have thought hard about what it is that I really love doing. Is it graphics or coding?

I’m not saying I don’t want to get a degree in web design but the more and more I read about programming the more and more I start to think it will be a better fit for me. Programming, too, has its own beauty and art form.

When I think back and reflect on the years I spent in front of a monitor I slowly realize that a good portion of the time I was merely looking at code. Graphics were a mere second to it all. I love both but I think that programming may just be my final decision. It almost reminds me of the era when it was one person that did everything when it came to printing.

Reading the history of graphic design in one of the courses I took was extremely enlightening to me. It not only helped me see type/typography as an art form but as an extension.

Reading more and more about functions, arrays, variables, and cases makes me realize that I really do want to be programming more often and lean more towards web development and not design as much. So I’m thinking of a major in the science and minor in the art of virtual communication? I call it virtual communication because it’s not quite visual communication and not digital visualization.

Anyway, with so much running through my mind I have headed in a new direction and I think that I will actually like where this takes me.

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.

Parenthood – The journey begins

Parenthood:

Parenthood is a never-ending journey and every day is a new adventure into making mistakes while trying to keep some sanity. Parenthood has no rules, guidelines or even a reference guide but it is still a great thing to be a part of. I entered upon this journey on June 7, 2012. Okay not entirely but that was the day my little boy, Salvador, was born so I will count that as the actual day the journey began. I will add more and more pages as time goes on and I get time to share these little life lessons.

Parenthood and the rules

Really there have been no rules for either one of us since SJ was born. SJ because his middle name of course begins with a “J” and if you were to look at my little man you would say that is a big name for a little guy. Now I’m just getting a little off track. The things that both of us have learned are things that people often tell us. A good example is when people tell us that we won’t be getting any sleep. I’m used to not sleeping so that is not really new to me. My body has been so REM deprived over the last years that I am more than capable of functioning on three or four hours of sleep a day. The one thing that has changed about that is that the so-called sleep pattern is more random that ever.

Parenthood and the guidelines

Okay the basic guidelines are pretty simple when you get down to it: Don’t kill the baby. That is the basic guideline and the one thing to really follow. Everyday is an exploration into a world of¬†how to. How to keep the little one entertained while keeping your sanity, how to keep him quiet long enough to make a bottle so he won’t scream your ears off. No one thing will work the same way the next day. That is one thing you can count on to be true. There are moments when you will want to be alone to think, read or do something so simple as taking a shower but it can feel like forever because you are changing, feeding, burping and then changing again just to keep your little one from bawling.

What can oftentimes make things easy is having somebody there to help out to accomplish those basic everyday tasks like doing laundry, eating, cooking, cleaning or taking a bath. Unfortunately, I know some people out there don’t often have that luxury and I often wonder about how they manage to do it and have a huge amount of respect for them for being able to pull it off.

Understanding JavaScript prototypes

Working with jQuery has been a really crazy journey these past few weeks. The biggest hurdle has been understanding how it all works. Little by little it has all been clicking in my head. Reading several articles about what jQuery is and how to use is has been a good enlightenment for me. There are of course a few drawbacks to trying things on your own and the biggest being no feedback. While, yes, there is some feedback but not in the traditional way or sense that I was accustomed.

I love being able to learn at my own pace but at the same time it can be very hard. Perfect example of this is trying to understand how JavaScript prototypes work. The first time I encountered the term was viewing a tutorial on building a jQuery plugin. While he made a quick reference to another article that I read after viewing the video it both confused me a little bit but it also helped me understand JavaScript a little more.

In the following weeks and months I hope to have a post explaining a little more about how prototypal inheritance works in JavaScript and maybe have something to show for it when I have it all done. I need to find some more resources and read more articles about it so I can get a better grasp and then I will have a much better understanding of it all. When done, I will hopefully have a jQuery plugin completed by then. Yes, another plugin but I need to start somewhere like most people did and have and what better way than to learn from not only others but from my mistakes as well.

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.

Lessons re-learned

The last two months have flown pretty quickly and it has almost seemed like a blur. To a certain extent. I have realized as to what I really love and that is coding. There is a hidden beauty I found while learning how to make my site work properly and I fell in love with it. Yes, there are a few hardships to face while trying to make a simple page work but it is that challenge that I have always loved to learn from.

Recently I started reading my PHP and MySQL books again and they are starting to remain in my head. Meaning that the things that I read are worth reading now. It is often strange to think that the things that I had once read are now actually making sense to me as to how they work. It is like I needed to take a break from it all to really understand it.

The next stage of it all will be testing all the things that I have learned and hope that they will stick with me. The biggest challenge will be testing on both a live site as well a local site. Not all things are often times created equal and this will be a good way of testing my skills of coding.

The next few days and weeks will be a fun journey into creating a functional theme I can try to submit to the WordPress community. I have thought hard about this and it should be pretty fun and a little daunting at the same time since there are some things that I want to change the output of but feel confident that I will find what I need within the forums and Google on my side.