Things I've Tagged ‘Front End Development’

Page 1 of 1

#Deployment, #Front End Development, #Git

Using a Git Workflow on This Site

I’ve been toying with a total and complete rework of this site for a little while, but to be honest I’m not sure what platform to pursue. Do I chose a new CMS? Do I go with Jekyll or some other static file variant? It’s difficult to decide–I know I’d like to learn a completely foreign and new skill set. For the time being, however, WordPress is my home. Fam.

My hope for this workflow–and it appears to bear out–is that I can rapidly design, develop, and deploy my updates and changes. I have been using Grunt for task automation for a while now–and that required a bit of command line knowledge–but I wasn’t initially using a git workflow. I mean, it’s just me, right? Well, I found that not using a git workflow made deployment much more difficult. What do I upload? What did I change? How do I undo this change?

Code Contrololol

I’ve really just begun to do personally what I do professionally–it just makes sense to introduce efficiencies into my personal workflow when I’m so used to working this way–and I’m not really sure why it took so long.

I’ve setup a Bitbucket repo and maintain a feature branch workflow while doing development work locally with a MAMP install. I’m not currently tracking my entire WP install, only my theme, but I do my best to keep the environments similar to one another. I completely skip a staging environment for this site–I feel like it’s overkill–so it’s not a duplication of what I might do in a more important (client) setting.

I don’t really have the money for a commit-to-deploy sort of environment, so I deploy using GitFTP-Deploy to deploy changes from my ‘master’ branch.

I am still using Node/Grunt for task automation…in spite of how quickly devs seem to have moved beyond it, but whatever.


  • This is a bit experimental on my personal work, but something I use in my day-to-day client work
  • Typically we’ll track the entire site, WP install, plugins, etc.
  • I am introducing this process into my freelance work as well…git repo and all
  • For now I’m working on a minor redesign/refresh and I’ll be doing that in real time

Exciting times.

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