Code Snippets


One of the things I’m really happy about my last year at Voltage is my focus on creating reusable snippets of code that can be used to quickly deploy features on client sites. I’ve made my repository of code_snippets publicly available so that anyone can take advantage of them. Note, these are not for beginners, but if you’re familiar with HTML, CSS, and object oriented Javascript, you can easily take advantage of them.

I’m most proud of the Javascript structure of these snippets. Most of the Javascript in these files organized in a way that makes it really easy to drop it into an existing project. I start by creating a global object and then adding functions to it that can be called in the document ready or by other functions in the object. Each function returns an object after it is run that allows you to further manipulate the functionality at anytime. I’m not sure what this structure is called, it is somewhat of a hybrid of a structure I saw used on a site I made edits to and the better use of the object structure of Javascript. I’d love to hear your comments about this structure.

Keep in mind, that some of these are a work in progress, but all have been tested on at least one site. I welcome pull requests to improve the functionality, although I must say that I may be hesitant to add any code that I think is bulky or not very customization.

Some of the things you can do with these snippets.

  • Add a customizable, responsive modal to a page.
    • I’m aware that there are tons of modal plugins out there, but many that I’ve found make customization hard. Customization is key at Voltage, so using this snippet, you can show a modal that plays a video, shows an image, shows a gallery, or even shows content. Oh, and did I mention it is responsive?
  • Add a Google Map with a clickable legend.
    • Maps aren’t necessarily hard to add, but wading through the sometimes nebulous Google Maps API documentation isn’t fun. This snippet allows you to drop in the javascript and html and quickly have a map. You can even use the legend to interact with the map.
  • Make your javascript more responsive.
    • These functions allow you to set breakpoint variables based on browser width and allow your Javascript to react to changes in these breakpoints. A great example of this is the customApp.breakpointImages function. You can modify your image tags to load images based on the active breakpoint.
  • Add a responsive, very customizable slider.
    • I’ve tried many slider plugins and the problem with most is they are designed for people who don’t know how to code. For us, custmization is key, so I started using unslider, which is very customizable, but had some bugs in different browsers. Everything we build has to be compatible back to IE8, so I use these code snippets all the time to quickly deploy an unslider while making sure it is totally responsive and compatible.

There are more snippets that I didn’t mention, but these are a few that I keep finding insanely helpful. I hope you do to. Please add comments if you’d like to see me add stuff to them.

Live Project Link:

About The Author

Ben currently works as a senior developer and technical business consultant outside of Boulder, Colorado.

Read more about Ben

About Buink

Buink Web Development is a website development company founded in 2009. Although we still focus on web development, we now offer digital marketing services, web design, local SEO services, ecommerce website design, and custom logo design

Our value proposition: Buink can help you unleash the power of the internet and help your business scale with superior quality code at a competitive price and in a transparent, honest way. 

Read more about Buink

Cycle S.
Cycle S.
Buink generously helped us optimize our Google Ads for an upcoming community event. He expertly walked us through our dashboard making precise recommendations that helped us launch a successful campaign. Google Ads were much more difficult to get going than we anticipated, so we were very grateful... for the more
Dave G.
Dave G.
Buink is a great place to work, as well as a great place to have quality software written. I originally contracted Buink for some web development, and it worked out so well we began working together on many different projects. Definitely an honest transparent company that needs to be considered for... your software more
Dru M.
Dru M.
Ben’s a super responsive, thoughtful, sharp and all around great guy to work with. Excellent with his trade. I’d recommend him to anyone. Thanks Ben!
Craig A.
Craig A.
It was a pleasure to work with Ben and his team. It is rare to find such attention to high standards of coding and devops.
Lexi S.
Lexi S.
Grateful to have Ben and his team as such a capable, reliable partner for completing client work!
Tom S.
Tom S.
I reached out to Buink after finding Ben’s name in a local developer/consultant listing in 2017, and I have to say, it has been an absolute pleasure to work with Buink. Ben consistently understands not just the development task laid in front of him but the business application behind the task. I’ve... never felt more comfortable with a development team than I do with Buink. I truly feel Ben and his team are integral partners in the success of my more
Marilyn F.
Marilyn F.
I could not recommend Buink Web Development more highly. Ben and his team have recently developed a budgeting app for me (both web and IOS). I have had the opportunity of working with them for over a year and I am extremely happy with the results.I would say that the biggest plus for me is that I... trust Ben completely. From the very first, Ben has helped me make decisions that were in the best interest of my company. I have never felt like he is taking advantage of me. Ben does his best to keep the whole process very open and upfront. I have really appreciated that.I tell people all the time that I love my developers. And I do. I'm very happy that I chose to use Buink to develop my apps. It was the best business decision I could have made.If you are looking for someone to develop a website or app, I strongly suggest choosing Buink Web Development. They are fantastic!Marilyn Ference, President, Defend Your Money, LLCread more
James Landon B.
James Landon B.
Great company to help with all your web design needs!
Next Reviews

Connect with Buink

Connect with Buink via email, send us a message, or subscribe to our blog.