Things I've Tagged ‘jQuery’

Page 1 of 1

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



#AJAX, #JavaScript, #jQuery, #php, #Web Design

jQuery AJAX Form Submission

I’ve never been much of a programmer; and I’m probably unusually intimidated by JavaScript. I can’t explain its effect on me, considering what I’ve tackled with php (which, I suppose is arguably pretty simple and inefficient stuff), but it’s not something I’m proud of.

At any rate, this week I decided to tackle a bit of a problem that has been bothering me for as long as I’ve had the current design on my portfolio site.
The portfolio side of things exists as a single page site with work samples, a little information, and a contact form. The contact form would require that you reload the page upon submission in order to process and send the message, which always seemed like a jarring experience from a user interaction perspective.
In order to solve that problem, my solution was the ever popular: AJAX.

I’ve used some jQuery plugins in the past, so I was familiar with the framework; after doing some reading and thinking about compatibility with my current setup, I decided that jQuery’s built in AJAX implementation, and animation effects, would be just about perfect for my needs. Why? Because the jQuery framework is incredibly useful to me, as a designer, with little time for figuring out how to implement all of these fancy user interactions with JavaScript. Plus, it’s the framework I use for everything.

Read the rest of this entry »