Home » Blog » Archives for February 2017

Month: February 2017

happy woman with laptop

Yay! It Works!

Yay – it works!  Famous words of a developer when they finally get some code to magically work.

Have you ever come to an error in your code and it drives you crazy trying to find that one thing that is making not work.  Sometimes it is simple like a missing semicolon but you have been staring at it too long to see it.  Other times it is in the wrong order like on an HTML file calling in some JavaScript links but they were added in the wrong place.

I have had that happen to me many times.  It’s frustrating when you are looking through your code and you know it has to be something so small that you are just missing it.  You google the error you’re getting and you try changing things you know are working but something just isn’t right.

I am currently working on revamping the design of this site and was working on the Front Page and setting it up like a landing page.  I know I had the HTML and the CSS correct.  It was showing up correctly.  I know the JavaScript/jQuery was correct per checking it against multiple googled places on the net.  But for some reason it just wasn’t executing.  I couldn’t figure it out why.  I was getting the “$ is not defined” error message.  Googled it and saw several different ways to run jQuery in a JavaScript file.

Here are a few examples:

$(document).ready(function () {
  //your code here
});
$(function () {
  //your code here
});
$(function () {
  //your code here
})(jQuery);
jQuery(function () {
  //your code here
});

I tried them all and no luck.  The JavaScript still would not execute.

Then during one of my changes I saw a different error come up with the other one.  One of my script links for MailChimp didn’t have the SRC correct.  It was missing the “http:” part, it just started with “//”.  I made that correction and BOOM the rest of my JavaScript finally executed.  I decided to change my JavaScript code back to what it was before all the changes from googled suggested sites and it still worked.

Just goes to show, sometimes it isn’t your code missing a semicolon but a link that is messing it all up.  Now I can finish the rest of my theme to match the front page and my newly revamped site will go live.  Yay! It Works!

Now I’m off to celebrate like a rock star because you know, I’m excited it works!

development environment

Development Environment Setup For A Basic Site

Using NPM, Gulp, BrowserSync, Gulp-Sass, Bootstrap and Git

A few weeks ago I had an idea, which I’m sure others had too, to create a simple basic site setup.  I wanted to create a development environment that I could reuse each time I create a new project.  Using the tools listed above to make my web development easier.  The following is what I found in my research of reading blog posts and watching videos on YouTube.  I hope you find this helpful like I do.

The following is written as instructions to follow.  If you are interested in a PDF of these instructions, use my contact form to let me know and I’ll email it to you.

First, create a folder for your new site.

Folder structure:

Site Name (main folder)

app

css

app.css

js

bootstrap.min.js (create by copying from Bootstrap files in node_modules)

jquery.min.js (create by copying from Bootstrap files in node_modules)

tether.min.js (create by copying from Bootstrap files in node_modules)

scss

app.scss

_bootstrap.scss (create by copying from Bootstrap files in node_modules)

_custom.scss (create by copying from Bootstrap files in node_modules)

Index.html

gulpfile.js

node_modules (folder is created when running npm commands)

package.json (file is created when npm init is run)

 

Next, setup Git, Node.js and Gulp Globally

Install Git – if not already installed

Create new Git repository on GitHub if using it.

Install Node.js – if not already.  Get the install and instructions from here

Install Gulp globally – if not already:  npm install -g gulp

Change to directory of new site folder:  cd sitename

Follow basic Git commands

git init

git add .

git commit -m “Initial commit”

If using GitHub

git remote add origin <copy address from GitHub for the repository>

git push origin master

 

Finally, setup the remaining items used while developing

Initialize npm:  npm init

Enter in your responses or accept defaults by pressing enter – this creates the package.json file

Adjust package.json file as necessory

Install jQuery:  npm install jquery –save (the “–save” saves the install to the package.json file)

Install normalize.css:  npm install normalize.css –save

Install Gulp:  npm install gulp –save-dev (saves to the package.json file in the dev section)

If node_modules disappears – run:  npm install from inside folder with the
package.json to install all listed in the package file.

Don’t forget to then run:  npm outdated to get the most update versions

 

Create the gulpfile.js file in the root of Site Name directory

Install Gulp plugins – for example:  npm install browser-sync gulp –save-dev

npm install gulp-sass –save-dev

npm install bootstrap@3 –save

Add basic gulp watch commands to the gulpfile.js like the one on this site:  https://browsersync.io/docs/gulp

 

The above instructions gave me a basic setup for a site to start developing to my hearts content.  The gulp watch with browser sync and gulp-sass lets me concentrate on the creation of my site while it automatically refreshes the css files and the browser.  I get to see the changes as they are made and it is all triggered on the files being saved in the code editor.

Leave a comment below and let me know what you think.  Do you use another setup?  If I missed something, let me know.