Searching For a True Match

Sometimes I just can't be bothered to deal with bullshit. When something isn't meeting my needs, I don't have time to fuck around with it. If (!"My boyfriend knows how to hit my g-spot") || "does my ass look good in these jeans" != true), then my boyfriend better figure out how to bang that ! out of that equation and I need to iterate through some more jeans before I execute buyThesePants(). Fortunately for these type of conundrums, there are a few particularly handy JS methods to sort through your data.

Filter: 
Allows you to insert each item from an array into a function that returns a boolean. If shoving the item into the function elicits a return value of "true" , then that item , along with any other truth-returning items from the original array, are inserted into a new array which becomes the return value of the filter.

syntax:var filteredArray = [array of data].filter(PUT BOOLEAN FUNCTION BETWEEN THESE PARENTHESIS);

example:
Holly, a scarlet-haired astrophysicist with a schedule even tighter than her waist line,  decided that it was time to stop playing the field and find a man to with whom she could start a family. Keen to keep her gene-pool as gingery fresh as possible, she decided to throw together a quick API to scrape data from hot-n-both-red.com, redI.com and crimsonlovers.com that would return the profiles of only the men that she deems to be desirable mates (ie 6'3 or taller, dog lovers making 65k minimum salary in a science related field). Below is an excerpt of some of the data she scraped:

var scrappedProfiles = [
 {name: "Dr Sex Panther", heightInCm: 160 , age: 35, income: 150000, profession: "Doctor", hobbies: "searching for my soul mate", pets: "has cats / likes dogs and cats", motto: "Trust me, I'm a doctor" },
{name:  "DJ Swizzle Stick", heightInCm: 175,  age: 25, income: 35000, profession: "valet",  hobbies: "gangsta rap, football, hunnies",  pets: "has cats / likes dogs and cats", motto: "I got 99 problems, but I'd like one more"},  
{name: "big D", heightInCm: 26 , age: 69, income: "mypenis", profession: "gigolo", hobbies: "blow, blowin', gettin' blown", pets: "yes I do", motto: "fuck bitches get money" },
{name: "Zenith", heightInCm: 185,  age: 25, income: 55000, profession: "Astronomy research", hobbies: "fishing, camping, walking my dogs",  pets: "has dogs / likes dogs", motto: "stay away from the dark side"}
];

After looking at the shape of the data, Holly designed the following filter that employed regex to search for certain key words in her prospective suitors profession and pet info as well as an assessment of the numerical value of their height and income. 

function dateable(profileObject){
  if( profileObject.income >= 65000 &&  profileObject.heightInCm >= 190 && profileObject.pets.search("dog") != -1     && profileObject.profession.search(/astro|doctor|sci|engineer|research|bio|chem|dev/i) != -1 ){
      return true;
  }
  return false;
}

var results = scrappedProfiles.filter(dateable);


Some:Checks to see if any individual items in an array meets the criteria of a given boolean and then returns true only if at least one item returns true when plugged into the boolean function. Some will return false only if there are no items within the array that meet the condition defined in the boolean function.

syntax:var filteredArray = [array of data].filter(PUT BOOLEAN FUNCTION BETWEEN THESE PARENTHESIS);

example: Frustrated that she was not getting any results back from her dating profile scraper. Holly, decided to broaden her search to include more sites (even some with men with less-favorable hair pigmentation). Not wishing to buy a membership to a site unless it contained some men that met her criteria, Holly modified her original function and ran it on prospective web sites:

function dateable(profileObject){
  if( profileObject.income >= 65000 &&  profileObject.heightInCm >= 190 && profileObject.pets.search("dog") != -1     && profileObject.profession.search(/astro|doctor|sci|engineer|research|bio|chem|dev/i) != -1 ){
      return true;
  }
  return false;
}

var useableSite = scrappedProfiles.some(dateable);

Every: 
Checks to see if all individual items in an array meet the criteria of a given boolean and then returns true only if every single item in the array gets a true result from the boolean or returns false if any of the items return false when plugged into the boolean function.

syntax:
var filteredArray = [array of data].every(PUT BOOLEAN FUNCTION BETWEEN THESE PARENTHESIS);

example:Once Holly had a few sites that she knew contained good prospects, she decided to apply one last function before joining a site. She wrote the below to search through the contents of each field on a user's profile and identify any disparaging language towards women.

function respectful(profileObject){
   var foulLanguage = [];
  
 Object.keys(profileObject).forEach(function(item, index){

  var value = profileObject[item]

 if(value.toString().search(/bitch|sukeban|whore|skintern|cunt|bobby soxer/i) != -1){
      foulLanguage.push(profileObject[item])
  }
       
})
   if (foulLanguage.length === 0 ){
      return true;
    }
  
  return false; 
  }

var useableSite = scrappedProfiles.every(respectful);

Teaching a New Browser Old Tricks

Up until today every time I pulled input from a user that input would only exist as long as the page was not refreshed.As soon I clicked the refresh button my code would swirl down into the sewer of code of unsaved data that exists in the DOM.

My mind was blown last week when i learned about the wizardry that is session storage and local storage. Your browser can remember data from refreshes and even browser accesses past.

WHAT IS SESSION STORAGE?
Each website has its own storage space where you can save information that you will need access for longer than just one refresh of the page. When you save data as session storage it persists (remains in storage) until you close the browser tab or window. (It will not be passed on to new tabs or windows). Once you close the tab it is deleted.

This might be useful for a simple game where you have a limited number of tries at a task and wanted to be able to refresh the page to set you back to the previous try or close the tab to entirely restart. It may also be helpful for a survey or other nonsensitive document, where you want to be able to keep the info you've already filled out and saved, but clear the rest with a refresh.

syntax for saving to session storage:
sessionStorage.variable = value;
(the value can be a number, string, array, or object that has been converted into a string).
to remove an item from session storage:
sessionStorage.removeItem("name of session Storage variable you want to remove");
to clear all out of local storage:
window.sessionStorage.clear();

to view session storage: 
in Chrome dev tools you can view what is stored in your session storage by going to the resources tab  at the top of the tools and then when you're in the resources tab, on the left side select Session Storage and you should be able to see the variables (keys) and their values that are being stored.

WHAT IS LOCAL STORAGE?
Local storage works much the same as session storage, except that data saved in localStorage persists until it is removed , either through dev tools console or through a script that is being run on the page. (ie closing tabs, refreshing browser, shutting down computer etc will not remove it, the browser must be told to remove the data.) Below the two variables test 1 were assigned. Once the browser was closed and reopened the local storage variable persisted, but the sessionStorage was cleared.

to view session storage: in Chrome dev tools you can view what is stored in your session storage by going to the resources tab  at the top of the tools and then when you're in the resources tab, on the left side select Session Storage and you should be able to see the variables (keys) and their values that are being stored.









JSON
*** Local storage and Session storage store all data as a string ***

So if you save a number to local storage it will be converted into a string, so if you were to try to add it to another number it would concatenate the string instead of actually preforming math...

the solution to this is to use JSON.stringify to convert the data into a string before you save it  and then use JSON.parse to convert it back to its original format so that you can work with it. (if you are only saving a single string, it is sufficient to just put the string in quotes without bringin JSON into it.

NOTE: you cannot stringify a function.

read more about JSON.

GET YOUR HANDS DIRTY:
-try this go to your browser and open the dev tools on an empty page and type localStorage.bgColor = "red."
-Then refresh the page and type localStorage.bgColor ... it will console log red... because it remembers.
-Now that variable bg.Color will be red until it is changed manually OR until code for that page is run that changes it.
- If you link a javascript file to your index page and just type:
document.body.style.backgroundColor = localStorage.bgColor;
then refresh your browser, BAM! Your page is now a sexy fire engine red. 

My friend DOM

Way back... a few months ago, when I started interviewing for coding bootcamps, one of my interviewers asked me to tell him about the DOM... and I was like, "Sorry I don't know him. Is he like to Fonz of programming..." He's not. In fact he's not a he at all.

WHAT IS "THE DOM"?
DOM is an acronym that stands for Document Object Model and it's basically a copy of the HTML that your browser renders when you open it.

WHY DO YOU NEED A COPY OF WHAT YOU WROTE?
Because it is a copy multiple users can reach out to the page without having to have the source files on their computer and they can interface with the same page at once and have a user experience that is unique from that of others.

DOM MANIPULATION:You don't want to access the DOM much. The more you grab info or push info to the DOM the slower your program will run. (because you have to wait for the script running the program to reach out to the DOM. Manipulating things in your actual script first and then sending as much correspondence to the DOM at once as you can is the preferred way to do things.

JQUERY SELECTORS AND THE DOM
Jquery makes interacting with the DOM much easier than using vanilla (plain ol') java script. The selectors allow you to easily classify and reference page elements like buttons, input and divs, text etc. The best way to learn about jQuery is to read the  jQuery docs, but the TLDR is that it is a library that has converted the long hand and sometimes confusing process of referencing the DOM with javascript into simple procedural steps. Once you add a script tag for jQuery (eg <script src="https://code.jquery.com/jquery-2.1.4.min.js"></> ) your browser will know to reference that library every time you include an $ symbol before your text. For example, $("#name") is the jQuery way to refer to an element on your DOM that has an id of name.

There are tons of handy things that can be with jQuery, so I definitely recommend having a peruse through the jQuery site.

GITing it

It was not so long ago that I was at total noob to Git Hub and even after I’d gone through the motions of installing git hub and doing the exercises I still didn't quite understand what it was...

SO WHAT THE HUB IS GIT? 

GitHub is a site that stores files for free. That’s it. It doesn’t necessarily have to be files for computer programming. It can be image or text files or whatever you want.


WHY STORE FILES THERE?

  The cool thing about Git Hub is that it has been designed in such a way that multiple people can work on files at once. This is done by storing a copy of the files on the computer of each person who is working on the file and then when their changes to the file are uploaded back to GitHub it will identify what is different in your version of the file than the original and any other versions other people have created and will allow everyone involved to look at the changes and compare them.

Even if you are the only one working on the file, it is still quite handy to save it to GitHub because you will be able to look back at every version of the file you have saved — and if you are working on a computer program and you get off track in such a way that your program no longer runs OR doesn’t do what you had expected, you can back track and go back to an earlier version of the file before you got onto the wrong track and you can branch off in a new direction.

This process of saving different versions of a file and branching off in new directions is called Version control. And there are a lot of programs and sites that do this (Google drive can be used in a similar way for example), but GitHub is one of the most popular free sites to do this. And also, GIT lends itself nicely to puns.

HOW DO YOU USE GIT HUB:

These sites can help you GIT started:

Code School's Free intro to git hub

http://gitimmersion.com/

Pro GIT book