Things I've Tagged ‘JavaScript’

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.


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


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