First off, plugins can be useful, but there is a time and place for everything. In today's world, instant gratification is king and load times are one of the single most important things any developer should consider. You have about 3-5 seconds to hook a user and keep them scrolling if your site spends 3 seconds loading that user could already be lost. So what's the point? Stay away from plugins and build the feature yourself. Why chip away at your 3-5 seconds loading jQuery for one plugin? I see it all the time on development discussion boards and it makes me crazy. Someone new to programming asks for help on how you would build feature X and someone almost always answers "Just use a plugin." This is, almost always, the wrong answer. The "I'll just use a plugin" slope is slippery and robs new programmers of needed experience, over bloats code and is in some cases just lazy.

If you came here just looking for a javaScript photo gallery you can find that here.

Problem Solving is Important

The ability to efficiently solve problems and work through challenges is one of the most important attributes of a strong programmer. Any coder will tell you stories about hours of troubleshooting, problem-solving, and debugging... problem-solving skills are insanely important. I don't think I can say this enough, but it is something that the old "just use a plugin" answer completely ignores. Struggling your way through a feature you are not sure how to build will build your confidence, strengthen your problem-solving and help you learn the language you are coding in better. Problem-solving, at times, feels almost like a journey of self-discovery, making you all too aware of your strengths and weaknesses, but this will help you become a better programmer. I can't remember how many times some problem has sent me deep into the vast unknown of language documentation, discussion boards, and random blogs, but each time I learned something new.

I want to say that part of the problem is problem-solving. Let me explain this, I don't think newer programmers really think about problem-solving or are taught techniques to solve problems. I know when I first started writing code I wanted to jump into the language and learn as much as I could, not learn about how to walk through a feature and write pseudo-code, but this is important. It helps you define the feature and outline what exactly you need to accomplish. Once you break a feature into smaller well-defined segments it doesn't feel as unknown and daunting. Take a photo gallery, for example, this is one of the most common questions that I see get the "just use a plugin" treatment. This is absolutely absurd, loading jQuery and, in some cases, jQuery UI for one plugin makes no sense. Once you break the photo gallery feature down into smaller parts you realize how simple it actually is to accomplish in vanilla javaScript.

Developing A System

It's important to develop your own system for problem-solving and dissecting features. This may seem annoying or pointless at first, but it will make you a better programmer. I thought the idea of pseudo-code was just silly at first, why would I write out a function or feature in plain English, isn't that a waste of time? Quickly I realized that this greatly improved my code quality and ability to efficiently plan and execute the programming of new features. Pseudo-code is basically a guide or outline of what you need to do, almost like outlining an essay before you write it.

The Process

I'm not going to sit here and tell you this is the best way for you to approach a feature you are unsure of, this works for me and may or may not work for you. The point is, develop a process and use it. So what do I do? It is really just a few simple steps.

1. Define the feature
2. Define the functionality
3. Write pseudo-code for each segment
4. Write the actual code
5. Refactor and optimize

That is really the bulk of my process, simple but it works for me. These steps can really be adapted to most anything, not just development. Problem-solving is a life skill and being able to effectively assess and solve problems is valuable. This is a consistent process that I use when developing new features or tricky features and in the long run it has made me a stronger developer, kept me away from plugins and/or frameworks, and helps to optimize my code. So let's use our photo gallery example and walk through the steps a bit.

Define the Feature

This is a simple description of what you are trying to do. For our example it could look like this:

I need to create a photo gallery that auto-plays, has controls
for next and previous photos, and stops the autoplay when next
or previous controls are interacted with.

Just a simple definition of what you are trying to create. This will just give you a sense of where you are going and what you are building and keep you focused on the scope of that feature.

Define the Functionality

This is another broad description of what you are doing but focused on the specific functionality. Using the feature definition above you can already see some of the functionality is defined.

1. Auto play - photo gallery should automatically change images
on a set interval.

2. Next Control - interaction should go to the next photo, stop the autoplay, and if we are on the last photo it should return
to the first photo.

3. Previous Control -  interaction should go to the previous
photo, stop autoplay, and if on the first image of the gallery
the last image should be displayed.

The definition gives you a good break down of what you are going to need to accomplish to build the entire feature. You can start seeing at this point different functions of the feature. In our example you can see you will need a way to check which image we are on, find the next image, functionality to show and hide images, event listeners for next and previous buttons etc. This gives you somewhere to start dissecting the feature.

Optionally, depending on the feature, you could further break this down segmenting each individual piece of functionality into its functional pieces. For example, the next control would include stopping the autoplay, checking current image, finding the next image, changing the image, and creating an event listener.

Write the Pseudo-code

This is where your feature really starts to take shape. Although, pseudo-code is just a plain English description of what should happen it is essentially an outline of the actual functionality. Each piece of the puzzle should be considered and described, this will really help you see the feature and plan the functionality. I'm not going to write the entire pseudo-code for our example, but I will include an example for the autoplay.

var current image is the index of displayed image
var last image is the length - 1 of our gallery

Every 7 seconds run this function {
    if(our current image is the last image in our gallery then){
        hide the current image
        display the first image
        update the index for current image
    }
    else{
        hide the current image
        display the next image
        update the index for current image
    }
}

You can walk yourself through the functionality of the autoplay function pretty easily when you write it all out in plain English. I tend to use some coding conventions for organization and visual hierarchy, but overall it is just plain English. Another benefit of pseudo-code is planning variables and elements you need to keep track of. From just this autoplay pseudo-code you can see you need to find the gallery, index the images, keep track of the current index, and create a way to show/hide images.

Write the Code

Next, you're going to start writing the code. By this point, you should have a pretty clear picture of what you are doing, the variables you need, and the structure of your code. When you get to this point the feature really doesn't seem as daunting. You are writing individual pieces that join together to form the entire feature, pretty easy. So again, for our example, the autoplay could look something like this.

this.gallery = setInterval(()=>{
    if(this.currentImage === this.totalImages - 1){
        let n = 0;
        this.change(n);
    }
    else if (this.currentImage >= 0 && this.currentImage < this.totalImages - 1) {
        let n = this.currentImage + 1;
        this.change(n);
    }
}, 7000);

Pretty simple once you know everything that is going into it.

Refactor and Optimize

At this point the code is done, the feature is working, and you are ready to make another pass and optimize the code. This is important, look for ways to minimize your code and optimize the functionality. This might mean taking your code and turning it into a class or removing variables. Whatever it is, it is an important step that helps you become a more efficient developer.

The Take-Away

Overall, the most important thing to take away from this is to not jump straight to plugins. Don't be afraid of breaking down a problem and coming up with your own solution. It will make you a better developer. So next time someone tells you to "just use a plugin" take a few minutes and see if you can create your own solution.

Did you come here for a javaScript photo gallery

No worries, if you came here for code you can check out the companion tutorial and the code here.