Closures in JS

I’m having a lot of trouble understanding how to use closures in JavaScript. A closure seems to be just a function within a function. I am still trying to find more examples of closures and their usage, so feel free to share any good ones you come across.

In the meantime, I found this Stack Overflow explanation pretty good:
http://stackoverflow.com/questions/111102/how-do-javascript-closures-work

 

Also finally found out what to call the ‘=>’ operator:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Advertisements

WordPress on Mac

Installing WordPress on a Mac?

I used XAMPP as my Apache server distribution cause I’m the most familiar with it. Luckily they have a Mac version that is similar to Windows: https://www.apachefriends.org/index.html

After installing XAMPP, install WordPress: https://wordpress.org/ by placing the unzipped wordpress folder into your XAMPP/htdocs/ directory.

In your XAMPP folder, find manager-osx and double click on it to open the GUI. Click Start All.

Screen Shot 2017-02-12 at 10.43.02 PM.png

Then navigate to Http://localhost/phpmyadmin

Create a database for WordPress called whatever you want:

screen-shot-2017-02-12-at-10-48-45-pm

I called mine WordPress.

Open up the wp-config-sample.php file to edit the database information to the following:

screen-shot-2017-02-12-at-10-53-01-pm

Then rename the file to wp-config.php and save it.

Next, navigate to http://localhost/wordpress and follow the steps to install the WordPress application.

To be able to upload images and install templates using your WordPress application, you’ll need to run this command in your Terminal (of course change the path to the one that matches your directory:

chmod -R 755 /Applications/XAMPP/htdocs/Wordpress/wp-content

FCC – Twitch TV Project

Finally finished this project! I started this project during a pair programming session before the holidays and then just got busy and never finished it.

This project required using Twitch.tv’s API. Working with API’s is always challenging, especially if the API is not well documented. Twitch’s API has a lot of documentation and there’s tons of information on how to get it to work in the FCC forums: https://forum.freecodecamp.com/t/how-to-use-the-twitchtv-api/19541. (This link is also included in the project bullet-points.)

The first step was reading the forum and getting the correct API URL.
Using this: https://wind-bow.gomix.me/ as the starting point.

After getting that URL, it became time to read the Twitch.tv API documentation to see how to get the information we want. I focused on a list showing my favorite channels, but you could also have focused on users or videos. Twitch documentation here: https://github.com/justintv/Twitch-API

Endpoint Description
GET /streams/:channel/ Get stream object
GET /streams Get stream object
GET /streams/featured Get a list of featured streams
GET /streams/summary Get a summary of streams
GET /streams/followed Get a list of streams user is following

The URL I used to make the API call became: https://wind-bow.gomix.me/twitch-api/streams/' + channelNames[i] with channel name being taken from an array of my favorite channels in a for loop

Once I got the URL down, I decided to build the front-end, just a basic skeleton of the page, and then focus on the JS. Wanting to use pure JavaScript, there was ALOT I had to learn. I read about making XMLHttpRequests to the API and how to handle the request response. I also read about jQuery’s .prepend() and .append() functions and how to translate their properties into JavaScript.

You can find my finished code here: https://github.com/sunsplat/fcc_twitch

Designing this project was super fun! I played around with Google’s Material Design by using Material Design Lite.

You just insert these links into the of your HTML and you have access to the classes and icons:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js">script>

To access the icons, go here: https://material.io/icons/

To read more about the purpose and Do’s and Don’t’s of each component in Material Design go here: https://material.io/guidelines/material-design/introduction.html

View my final project here: https://sunsplat.github.io/fcc_twitch/

JavaScript Resources

So I’ve begun the dive into learning the JavaScript MEAN stack after becoming confident in writing vanilla JS. I have found some great resources recently and wanted to share:

This is by far my favorite resource for learning Express and NodeJS:
http://cwbuecheler.com/web/tutorials/2013/node-express-mongo/

The guy breaks down and explains every line of code so that you have a better understanding of what it’s doing.

He also has a Part 2 that incorporates MongoDB: http://cwbuecheler.com/web/tutorials/2014/restful-web-app-node-express-mongodb/

Trello Board of Resources for learning Front-End and Git. I mainly look at the boards under React:
https://trello.com/b/EbwlbqRR/resources

A great and easy way to develop responsive sites:
http://susy.oddbird.net

A great way to learn JS by playing a game: https://codecombat.com
Free Code Camp has a clan you can join: https://codecombat.com/clans/5835e3b200a02f2400786712

 

Code4Startup- ReactJS for Newbies

This is a great tutorial for people new to React and looking for a simple and easy to understand introduction: https://code4startup.com/projects/reactjs-for-newbies

Several things to note about this tutorial:

  1. Grabbing the CDN links off the React website will not work with this tutorial. You must use the versions that Leo uses:
      <!-- The core React library -->
      http://fb.me/react-0.14.7.js
      <!-- The ReactDOM Library -->
      http://fb.me/react-dom-0.14.7.js
  2. If you want to use Codepen to store the code, you must select Babel in the Settings as the JavaScript Preprocessor. Add the External JavaScript links in #1 and you’ll be all set!

My Pen:

Install MongoDB on Windows 10

To install MongoDB on your Windows 10 machine, follow the following steps.

  1. Go to MongoDB website and download the Community version of the package like you see in the image below:
    unnamed-qq-screenshot20160925205425
  2. Once the download finishes, double click on the .msi file to start the installation. Install using the default settings, installing Complete package.
  3. Once installation completes, we need to add MongoDB to the Path in System Variables so that you can use the MongoDB commands in the command prompt. Right click on the Windows icon (the very left icon) on the taskbar and click on ‘System’.
  4. Click on Advanced System Settings on the left hand side and then when the window pops up, click on the Advanced tab and find Environment Variables…unnamed-qq-screenshot20160925205921
  5. Under the System Variables, double click on Path to add a new path for MongoDB:unnamed-qq-screenshot20160925210218
    You can also click on ‘New…’ button to add a new variable.
  6. Once the new window opens, add a new path for MongoDB according to your download path. If you used the default install settings, your install path for MongoDB should be similar to this:
    unnamed-qq-screenshot20160925210240
    3.2 is the version number, so just double check what your version number is before adding it in. Then click OK to save the changes.
  7. Then open your command prompt and type:
    $ mkdir C:\data\db\
    This is where all your database collection information is stored. NOT where your actual database for your app is stored.
  8. Now to connect your path to this directory, type this in the command prompt:
    $ mongod --dbpath <path where you want your database for your app stored>
    For example:
    $ mongod --dbpath C:\Users\Ellen\myfirstapp\contacts

  9. To check if your MongoDB is set up correctly, you can always run
    $ mongod
    You’ll get a response like the following:
    unnamed-qq-screenshot20160925211256

    Source: https://code.msdn.microsoft.com/Mongo-Database-setup-on-6963f46f

Kill a Program in Linux

I came across a really simple problem while using my Linux OS. I am used to the CTRL+ALT+DEL in Windows to open the Task Manager to close programs. I wasn’t sure how to do the same in a Linux environment.

To close a program in Linux from the command line, there are two options:

If you don’t know the name of the application, you can use this one. It will prompt you to click on the window of the application you are trying to close.
After clicking on it, the program will immediately close.

$ sudo xkill

If you know the name of the application, you can type:
$ sudo killall <name of application>
For example: $ sudo killall firefox

Creating Cron Job on RHEL7

Found a great resource for creating cron jobs in Red Hat Enterprise Linux 7:

https://access.redhat.com/documentation/en-US/Red_Hat_Enterprise_Linux/6/html/Deployment_Guide/ch-Automating_System_Tasks.html

(Yes it is from the creator’s website!) How cron jobs are laid out in /etc/crontab:

SHELL=/bin/bash
PATH=/sbin:/bin:/usr/sbin:/usr/bin
MAILTO=root
HOME=/
# For details see man 4 crontabs
# Example of job definition:
# .---------------- minute (0 - 59)
# | .------------- hour (0 - 23)
# | | .---------- day of month (1 - 31)
# | | | .------- month (1 - 12) OR jan,feb,mar,apr ...
# | | | | .---- day of week (0 - 6) (Sunday=0 or 7) OR sun,mon,tue,wed,thu,fri,sat
# | | | | |
# * * * * * username  command to be executed

So for example, if you want to create a cron job that will start XAMPP Apache server every weekday:

0 8 * * mon,tue,wed,thu,fri root /opt/lampp/laampp start

If you aren’t sure if you have cron or anacron available on your machine, you can run:

$ rpm -q cronie cronie-anacron

If you have cron packages installed, the command above will list them.

Passing a PHP Array through AJAX

If you are creating dynamic elements on your page, you will need to be able to send information to and from the browser. There’s lots of documentation on how to POST data using AJAX to the server side. What if you want to return an array of data back to the browser?

$.ajax({
    url: "<?php echo site_url('test/urlGoesHere/'); ?>",
    type: 'POST',
    data: form_data,
    dataType:"json",
    success: function(data) {
        alert(data[0]);
   }

Marking the dataType as json here is key.

In your PHP file, use json_encode to send your array:

print json_encode($my_array);

If you don’t want to save the array into a variable, you can also just write the array between the json_encode parantheses:

print json_encode(array("name"=>$name,"title"=>"Ms."));

Then in your AJAX success, you can access the array elements this way:

data.name[0]; //the first name element
data.title;  // "Ms."
data[0];

If this was your array: array("Jack", "Mr."), then your AJAX data can be handled like this:

$.ajax({
    url: "",
    type: 'POST',
    data: form_data,
    dataType:"json",
    success: function(data) {
        var name = data[0];
        var title = data[1];
        alert('Name: ' + name + ', Title: ' + title);
   }