Home » Blog » Archives for beckybair

Author: beckybair

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.

Quick Update on Master To Do List

Now that the holidays are over I just wanted to give y’all an update on my progress using my master to do list.

Since I put into use my Master To Do List, I believe I have done pretty good.

For my online courses, I have completed three that were in my list. One was three months long and the other two you do it is you want to – no time limit. I am also 45% done on another course. I’m sticking to doing one at a time. I have added three different classes to my course to do list.  I am planning on doing some quick reviews of some of the courses I have completed.

For my projects, I am 50% complete of one of my projects – my AT Assist application.

Overall I believe I am doing pretty good.

Rabbit Holes – Learning Web Development

Last year I decided to refresh my web development skills and possibly learn new ones. In October I did a Ruby on Rails and a WordPress blueprints from Skillcrush.  I also found classes on Udemy, Codecademy, The Oden Project, and others.

Skillcrush

Great classes and great active community.  It was great to have Office Hours and Google Groups to talk about the lessons.  Since I am an Alumni, I have access to their Slack channel.  The groups and topics there are awesome.

Udemy

I have signed up for several different Udemy classes lol. Nothing like spreading myself thin in my learning of web development. With Udemy I have purchased 25+ classes, started 6 and completed 1 since I have signed up. They all look so interesting/good and different languages I think I want to learn – one day.

Codecademy

On Codecademy I have completed 7 courses so far. I have 2 that I am currently in progress of completing.  This site is a fun way to learn that walks you step-by-step through the topic you are learning.  It is browser based and no need for any other applications and can be done anywhere you have access to the internet.  Very handy while traveling or at the coffee shop.

The Oden Project

The Oden Project is a cool site. It isn’t a site with courses on it per say. It is more like a path to follow with links to certain places on the web to learn which includes courses on Codecademy for example. They are on the right track with this idea. Trying to give me as a “learner” a path to follow.

sky-ditch-eye-hole

All these “sites” are good but, at least for me, can send you spiraling down a rabbit hole. The Oden Project tries to limit that but if I run into a snag and “google” to find an answer, the search results could send you all over the place. Read this link which then has a link to another place to read and so on. One night devoted to “coding” can quickly turn into a night of reading and surfing. Which can be good if you are learning but if you don’t reign in your searching, you could waste a whole night away.

If you are like me, and trying to learn/do coding in your free time (not your “day job”), a night wasted really cuts into your available time you give yourself for learning or doing. There has to be a better way.

Part of my problem is I jump from one course to another due to working on this project or that one.  I think of so many ideas, I get distracted on what my task at hand was to begin with.  I need to find a way to monitor my time, and distractions, to keep me on track of the project I am currently working on.

I’m feeling scatterbrained and a little lost.  I am going to try to create a Master To Do list and see if that helps me to at least prioritize what I want to accomplish.  I can also add items to it as I think of them instead of being distracted and ending up down the rabbit hole.  I can just add them to the list and forget about them until I’m ready to work on them.

I did a search for some type of template for a Master To Do list and found one on a site called Scattered Squirrel.  She has a lot of free printables that are pretty and functional.  I found one called, get this, Master To Do Lists.  lol  I printed it and saved the PDF for future uses.  My “To Do” for tonight is to write down all the things I am doing and want to do on the list and then prioritize it.

Wish me luck!

WordPress for fun & profit

Want to know the secret to my success? How I managed to learn how to code and immediately start making money with my coding skills, while continuing to learn?

The answer is simple: WordPress.

WordPress is one of those incredible open source gifts that just gives and gives and gives some more. And for the beginning coder who wants to keep learning new programming skills while making some money, WordPress is hands down the way to go.

For those of you not familiar with the platform, WordPress is an open source content management system built in PHP. Originally, WordPress was designed for blogging. But now, thanks to the creation of custom post types and the hard work of thousands of WordPress plugin developers, the platform can do much, much more.

I, like most developers, built my first website using HTML and CSS. Shortly thereafter, a good friend of mine suggested that I look into hacking around in WordPress. What he explained to me is that WordPress was a great content management system, and could be a good way for me to get familiar with some basic programming concepts like templating, working with loops, learning about database, and more fun things like that, while also building cool custom websites.

He spent 30 minutes explaining to me how the application is set up and where to look for more information, and that was it, I was off to the races. Me and my new friend WordPress soon became inseparable.

For a good year or so after that, I had a great side hustle going building marketing and content publishing websites with what can only described as an extremely limited tech skillset.

Now, I look back at the websites I created with WordPress before I really knew anything about programming with a mix of horror and amazement.

But honestly, I really shouldn’t be embarrassed because though they weren’t particular programmatically exciting, WordPress made it easy to build extremely robust custom marketing and content publishing websites even with only a small set of skills. Four years later, many of the websites I built are still alive and going strong (wow did I love big rounded buttons or what?).

The top five reasons why you should learn how to build in WordPress:

1. Do nothing, and you’ll still have a great website
Wordpress comes out of the box with arguably, one of the best content management systems in the world (thank you open source & the power of hundreds of people working together on one web application). Now, there is still a learning curve and some people do complain that the WordPress backend is a little too complicated, but honestly, as someone who has done a lot of work with other systems (and seen what it looks like when you try to building something as robust as WordPress from scratch), they really have worked out a lot of the kinks!

2. Chances are, someone else has already solved any problem you run into
One of the best parts of WordPress is that you have access to a HUGE library of open source WordPress plugins that will allow you to customize the CMS in all manner of ways. If you find yourself wanting to add some functionality to your site that isn’t native to the platform (a slideshow, a contact form, a facebook login) chances are someone else has wanted to add that functionality and already done the hard work for you. And all you have to do is install the plugin!

3. When you are lost, WordPress has the best docs
The WordPress Codex is seriously the most amazing, wonderful, searchable group of docs every created for any open source project ever. Anyone who has worked with other open source web applications or content management systems (*cough* Drupal *cough*) can tell you that the WordPress documents are spectacularly thorough, clear, and easy to use. If this is your first experience, know you are being seriously SPOILED.

4. Did we mention the 5 minute install?
Oh, by the way, WordPress is incredibly easy to install on your local machine (let me introduce you to my friend WAMP and MAMP and the famous, 5 minute WordPress install), and is supported by practically every web hosting service in the world. In fact, major web hosts like GoDaddy and HostGator offer fancy things like “1-click” WordPress installation services that will have you up and running in a matter of seconds.

5. And most importantly, knowing how to hack WordPress is known to lead to some serious CA$H
Last, but not least, knowing how to customize WordPress is a seriously marketable tech skill. There are many many freelancers and companies that have built entire careers on hacking WordPress. Just ask our friend Zoe!

Have I convinced you that WordPress is awesome? Fantastic! Watch out for a post next week about advanced WordPress techniques.