Code Food Travel repeat!

Code Snippets

How to Install Bower Without Error Permissions on Mac OSX

If you’re a talented web design coder yet retarded when it comes to any technical installation snafoos like me, this guide will help you make it to the finish line alive in one piece.

Problem: in trying to install bower or run grunt, I got ‘EACCES permission denied’ error permissions & bower_components + it’s subfolders were completely missing. I need Bower to work because I’m setting up a development environment for Shopify to customize a theme.

Solution: Alright, open your Command line tool:

  1. Install ruby gems:
    sudo ruby setup.rb
  2. Make sure it’s updated:
    sudo gem update --system
  3. Install bundler:
    gem install bundler
  4. Go to directory of the Shopify ruby gem, and type:
sudo gem install shopify_theme
  1. (done with:
  2. (now follow:
  3. Install Grunt if you don’t have it:
    sudo npm install -g grunt-cli
  4. Install Bower if you don’t have it:
    sudo npm install -g bower
  5. If that returns errors, try this KEY SOLUTION:
    sudo bower install --allow-root
  6. If successful, you can now compile. Type:
  7. If you get an error that the folder “bootstrap-sass-official” cannot be found, rename the folder “bootstrap-sass” -> “bootstrap-sass-official” and try grunt again! 
  8. This is where it worked for me!

Get WordPress Jetpack working on ICDsoft hosting (2015 FIX)

ICDsoft upgraded their Apache server this year, so the OLDER version of this code you may see floating out on the internet will not work. This updated CURRENT CODE below will fix the problem:

WordPress Jetpack

  1. Install WordPress JetPack. FIX below for ICDSoft webhost customers (for whom Jetpack is blocked out of the box):
    1. Problem: Error message: ‘site_inaccessible – Error Details: The Jetpack server was unable to communicate with your site [HTTP 412].’
      1. Explanation from ICDSoft Tech Support: We have a special set of rules on the server that are employed to prevent most popular hacking attempts. The xmlrpc.php module of WordPress very often is a target of hack attacks, that’s why we have a rule that disables the access to it. Please add the following code to the .htaccess file in the WordPress directory of the account:
    2. Solution: Go to control panel, click file manager, go to wordpress install directory, open .htaccess file to edit.
    3. Change security setting to let JetPack talk to by pasting the below code into .htaccess. Click save, and it will work! You may have to redo .htaccess edit on wordpress upgrades etc, not sure.
      <IfModule security2_module>
      SecRuleRemoveById 114

Dynamically load website credits through external javascript

Are you a web developer? Do you add your website credits onto the sites you build, but when you have a change in info, you have to change it in 20+ places? Never fear.. here’s something convenient:

  1. Add a div with id=”footer” to your footer section
    <div id="footer"></div>
  2. On the line BELOW your footer tag.. where you will insert your site credit, insert the javascript call via a file named anything of your choice
    	<script type='text/javascript' src='http://**yourclient**.com/js/core_webjs.js'></script>
  3. This file, which i call core_webjs but you could call anything you want, includes a call to an external file which you can store in a folder on your own website, so you can update your site credits from your own domain rather than having to go into each client’s FTP. This script is not the shortest by far, and I’m sure you can find a shorthand for this if you care
    function loadjscssfile(filename, filetype){
     if (filetype=="js"){ //if filename is a external JavaScript file
      var fileref=document.createElement('script')
      fileref.setAttribute("src", filename)
     else if (filetype=="css"){ //if filename is an external CSS file
      var fileref=document.createElement("link")
      fileref.setAttribute("rel", "stylesheet")
      fileref.setAttribute("type", "text/css")
      fileref.setAttribute("href", filename)
     if (typeof fileref!="undefined")
    loadjscssfile("http://**yourwebsite**.com/**makeafoldertostoreallthis**/**clientname**.js", "js") 
  4. This is the site credit file on your end. Just be sure not to use apostrophe’s, unless you can escape /’ it out.. if that’s confusing, just don’t use apostrophes in your credit description. Here’s a demo of mine:
    document.getElementById('footer').innerHTML += '<br>	<p style="opacity:.5;"><a href="" alt="Steven Chu: Photographer, Video, Haircuts, Socially Engaged Artist. New York" title="Steven Chu: Photographer, Video, Haircuts, Socially Engaged Artist. New York">Web Coding by</a> <a href="" alt="Steven Chu Studio: New York Visual Creative Consultant: Branding, Digital Web Design, Art Direction" title="Steven Chu Studio: New York Visual Creative Consultant: Branding, Digital Web Design, Art Direction">Steven Chu Studio</a> <a href="" alt="InstaTechie - Your face to face tech concierge. IT. Creativity. Productivity. New York." title="InstaTechie - Your face to face tech concierge. IT. Creativity. Productivity. New York.">/ InstaTechie</a>.</p>';
  5. Now when you go to your client’s site, you should see your site credit file (stored on your own domain) rendering the text on their end!

Bootstrap close Mobile / Responsive menu “on click”

This is a great snippet from stackoverflow.

The Snippet to automatically close your Boostrap Menu after clicking on an item

This is great if you are hyperlinking to jumps on the same page (ie. if you have a one-page layout).

	var navMain = $("#nav-main");
	navMain.on("click", "a", null, function() {

Then find your nav menu HTML/PHP and add label it with ID id=”nav-main”.
If you’re using Roots Theme, this is under templates/header-top-navbar.php.

Twitter Bootstrap Roots Theme

I’m using the Roots Theme, which uses Grunt to compile all the scripts.
Paste this snippet into your _main.js file into the All Pages section so it fires on all pages. My snippet above is cleaned up of any stray spaces and characters to prevent compiling errors.

1 of 6
%d bloggers like this: