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
