When should you use a JavaScript plugin on your website?

My main point in writing this post is to have you think twice before using a pre-built JavaScript plugin. Thousands and thousands of plugins have been written and uploaded to the web for you to download for free and achieve just about any functionality that you may need. It’s tempting to keep using pre-built plugins, but will it always save you time? I’ll dive into the pros and cons of both options.

As I’ve built multiple websites I have questioned the use of pre-built plugins. Many of these come with extra utilities that are built in and that I don’t necessarily use or need when I implement it into my website. These extra utilities mean more lines of code and an increased site size! Plugins may cause your website to become bloated and less optimized, but at the same time can be life savers that allow you to implement features that you may not have been able to in the time frame that is required of you.

Pros of Pre-Built JS Plugins

  • Those without an in-depth knowledge of JavaScript are able to achieve the benefits of JavaScript.
  • Feature rich sections of your site can be achieved within minutes.
  • Updates and security patches are taken care of for you with supported plugins.
  • Allows you to avoid “re-inventing the wheel”. Why code something that someone has already perfected?

Cons of Pre-Built JS Plugins

  • Plugins often come with features and functionality that you do not need, causing the total size of your site to increase. (You can often write the JS you need in much less code than a plugin you would like. See my example later in this post…)
  • If you need to add functionality to the plugin at a later date it can be complicated and difficult to extend the current plugin code.
  • Pre-built plugins will not be as tailored to your site and needs as your own custom code.

When considering whether to use a plugin, always review the size of the JS file and determine whether or not it could be feasible for you to achieve the functionality you need with less lines. In a recent project I worked on I was asked to built a site component with tabbed content. All I needed was something with links(tabs) that when clicked would switch the display of the anchored tab content. We had used a plugin called Responsive Tabs on previous projects. I looked at the code and decided I could achieve what I needed in far less code. The Responsive Tabs JS file 705 lines long and 26.3 KB large:

https://github.com/jellekralt/Responsive-Tabs/blob/master/js/jquery.responsiveTabs.js

I was able to build a simple custom tab plugin for my needs in 60 lines and 1.43 KB. That’s over 18 times smaller! Here is the link to the plugin I wrote:

https://github.com/tnschmidt/quick-tabs/blob/master/jquery.quickTabs.js

When you’re dealing with multiple plugins on a site you’ll start decreasing the size of your site very quickly, which will be a huge improvement for anyone loading the site on a slow network. Since this I’ve gone ahead and built a few other custom plugins for a few projects. Here is a simple plugin for a rotating banner image:

https://github.com/tnschmidt/bg-rotate.js

To finish, I want to reiterate that using a pre-built or custom plugin can both be a good idea depending on your situation. Before you decide make sure to weigh the pros and cons of each option!

Front End Website Optimization Checklist

Website optimization is a essential skill for all front end developers and a feather to put in the cap for other types of developers. There is nothing more beneficial to site conversion rates and encouraging user engagement than a quick loading web page. Most users expect a site to load in two seconds or less, and may leave if it does not. Check off the following front end website optimization list as you work to cut website lag:

  • Reduce HTTP Requests (file concatenation, sprites)
  • Enable GZIP Compression (GZIP)
  • Enable Leverage Browser Caching
  • Optimize Images (with task managers, online Tools, image editors)
  • Load Important Content First (defer JavaScript, lazy load images)
  • Minify Assets (js & css)
  • Load Assets From a Content Delivery Network (CDN)
  • Test Site With Online Tools

I’ll now layout instructions on the implementation of each of the list items.

Reduce HTTP Requests

WHY? Each HTTP request adds load time to your page while the browser waits for the server to serve up the asset.

HOW?

  • Concatenate CSS and JavaScript files (this can be done manually or with a task runner like GRUNT).
  • Combine images into image sprites. This can be done easily with online tools such as http://wearekiss.com/spritepad.
  • Only load content that will be used on the page.

Enable GZIP Compression

WHY? Enabling GZIP compression allows the server to compress the files that are sent to the browser making them smaller and thus faster to load for users.

HOW? Can be enabled via the .htaccess file by adding the code snippet below:

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Enable Leverage Browser Caching

WHY? We are able to specify parameters to tell our server to which files to cache and for how long.

HOW? Enabling leverage browser caching can be achieved by adding the code below to your .htaccess file. You can adjust the time parameters for each file type.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##

Optimize Images

WHY? Images can be large in file size and are quite often the cause of slow websites. Shrinking the file size of images displayed on the website will dramatically decrease load time.

HOW?

NOTE: Images should rarely by over 200KB in size and typically smaller than 50KB.

Load Important Content First

WHY? User’s perception of how fast website loads depends on what they see on their screen. HTML and CSS should be loaded before JavaScript.

HOW?

  • Defer parsing of JavaScript (typically should be placed in footer of website)
  • Lazy load images (can be done with JavaScript plugins or CMS plugins, example: https://www.midphase.com/website-hosting/)
  • AJAX loading dynamic content

Minify Assets

WHY? Minifying your assets will cut out extra white spaces and shorten code to decrease the size of your CSS and Javascript.

HOW?

Load Assets From a Content Delivery Network

WHY? It takes users longer to download website files when they live far from the website’s server. A CDN distributes the website assets around the globe to allow the user to download the assets from the closest CDN location.

HOW?

Test Site With Online Tools

WHY? Testing the site with these tools will give you a good idea of things you may need to do in order to speed your site up.

HOW?

Keeping up with the latest front end technologies

front-end-technologiesSomeone asked me a few days ago, “How do you keep up with the latest front end technologies?” How would you answer the question for yourself? I’ll talk about some things I’ve done and mention an awesome website to get you started!

Some techniques are better for you than for others, so you should come up with a tailored solution that fits your learning tendencies. Here are a few things that I have done that work for me:

Read Job Posting Descriptions
Most job postings will have a list with multiple technologies they are looking to use. If you read a spec you don’t recognize or have not worked with, set a goal to familiarize yourself. By understanding what the industry needs you’ll be able to focus on specifics that will make you marketable.

Dev Projects
Get off the couch and turn off Netflix in the evening! Take on projects at work and at home that require tools and emerging technologies to solve specific problems. When you run into an issue, search for solutions, learn processes by reading, and implement them!

Goals
Set goals in intervals that will motivate you to learn and give you a mark to reach. If you hear about an emerging technology, set a goal to learn it within ‘X’ months. Part of learning something new may be setting a goal to read a book (e-book) on the subject.

Ask Questions & Collaborate
If you have co-workers or friends in the industry, take the opportunity to ask them questions! There is nothing more valuable than sitting down and discussing technologies with experienced developers in person.

Enough about what works for me–if you are wanting some quick inspiration or a starting point on how to keep yourself “in the know”, check out the Front End Rescue website. In brief, Front End Rescue lists four steps to help keep you up to date:

  1. Follow cool people
  2. Find the best sources
  3. Attend conferences
  4. Get your own sources

Each step lists multiple options to follow or subscribe, and from there you’ll be able to expand your pool as you explore. Get yourself a twitter account and start following!

No Time Like the Present

Yes, it is time. It’s time I start writing about some web design and development tidbits.  Hopefully these posts help others avoid those learning curve “pull-your-hair-out” moments that may be experienced in the process of development and design!

Well, a little about me and my work then. I can most definitely say I love my career. The desk and computer are my little happy place. Forgetting to eat lunch because I’m into a project is a regular occurrence! I really enjoy designing websites, but can’t give up developing them either. I guess you can call that full-stack. I try and keep up with the latest technologies by reading and experimenting on my own, and I have a blast doing it.

Apart from work I have a passion for the outdoors. I guess my desk gets offset with fresh air. I’m in to amateur landscape architecture and gardening. I especially love myself some mountains. Anything that has to do with being in the high altitudes, whether skiing, hiking, or camping, makes me feel really good.

And finally my family. If anything is important to me, family is the most. I have a wonderful wife that constantly spoils me and two little girls to which I can never say no…

Thanks for stopping by and I hope you enjoy!