Code Snippets

12/3/14

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: https://github.com/bbuie/code_snipits

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 development shop founded in 2009 by Ben Buie. For years, Ben built and modified web assets for clients in Utah. In 2011, he moved the company to Colorado and in 2015 he started taking on new clients full-time.

Buink’s Core Values:

  • Cost effective technology (with business strategy in mind)
  • Eloquent, maintainable code
  • Responsive and transparent communication

Read more about Buink

Dave G.
Dave G.
14:05 13 Aug 23
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 needs.read more
Dru M.
Dru M.
15:41 25 Mar 21
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!
Seth L.
Seth L.
21:36 29 Jun 19
Ben and team are incredible to work with. They are reliable and proficient. I'd highly recommend hiring them for web development work. SethVOLTAGE
Craig A.
Craig A.
20:50 18 Jun 19
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.
15:36 18 Jun 19
Grateful to have Ben and his team as such a capable, reliable partner for completing client work!
Tom S.
Tom S.
13:18 14 Jun 19
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 business.read more
Marilyn F.
Marilyn F.
22:47 13 May 19
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.
01:33 28 Aug 18
Great company to help with all your web design needs!
Next Reviews
js_loader

Connect with Buink

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