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

Using the command prompt/ terminal

A DOSile EXPERIENCE
(contains no useful information)

I faintly remember using DOS on a pre-windows computer. When I was in 7th grade, before my dad had bought our first family computer. I was required to take computer class for three months. I would love to tell you that class was life-changing and sparked an interest in technology that burned inside of me from that day on...

But to me, at the age of 11, the thing that was most exciting about computers was their capacity to print large shitty address labels that sported shamefully pixelated images of Garfield And Friends. I was one of those kids who loved to stickers. My dresser, my homework folders, the brown paper bag covers on my books were all covered in stickers. So I'm pretty sure the day we learned how to make our own sticky labels was raddest day of my life.

As soon as I got home from school, I hand-wrote a half a dozen letters to send out to friends and family. Then I marched out to the mailbox, tipped up the red flag and gave the almost indistinguishable pictures of Odie and Garfield one last loving glance as I sent them off to "wow my friends and family."

... so I guess that's why seeing the good ol' black and white > on my screen makes me feel cool...  or maybe its cool for the same reason overly-pixelated graphics of Garfield are cool. Terminal commands are the OGs of computer interfacing. But using the command prompt is more than just a kookie-retro thing, it can actually be quite handy.

**** useful stuff starts here****

WHAT IS THE COMMAND PROMPT/ TERMINAL? 


-The command prompt (>  on a windows computer or $ on a Mac) is a non-GUI (graphical user interface) way to can access files and programs without a mouse or touch screen).

WHY WOULD YOU USE THE COMMAND PROMPT/ TERMINAL? 

-If you are familiar with searching/ accessing files through the command prompt it can be an extremely efficient and precise way to search and access files. (ie instead of opening finder and scanning through to the folder you want and then selecting the file you are looking for in that folder, you can just type one line into the command prompt and BAM, you've opened the file you were looking for. )

-It is the fastest easiest way to use certain Interfaces eg (Git Hub)

HOW DO YOU LEARN TO USE IT? 

Here are a few sites that are helpful in getting started with using the terminal:

The Command Line Crash Course

LinuxCommand.org

Ryan's Linux Tutorial

WHAT ARE THE BASICS? 

ls: lists the files in a directory

(adding  -a  will show files with any extension (some of which are normally hidden like git repository info)

cp: Copy the contents of a file and move it to a different file

eg:
cp file1.txt newBlankfile.txt OR file1.txt file2.txt 

mv: rename a file or directory OR move a file or directory
eg:

mv file1.txt improvedFile1.txt ... will rename "file1.txt": "improvedFile1.txt"
or

mv file1.txt folder1 ... will move file1.txt into folder1
or

mv folder1 theAwesomeFolder ... will rename the directory "folder1": "theAwesomeFolder"

mkdir: make a new empty directory (folder).

cd: change directory. Change from one directory to another
eg 

cd ..   takes you one step backwards in your path

cd ~ takes you to your home directory

cd ../../.. takes you three back

cd ~/desktop/fileOnDesktop takes you from the home directory forward 2 steps from there

pwd: "print working directory" ie show the path to get to where you currently are

less: gives you a summary of what's in a file
syntax:  less file-name

http://www.thegeekstuff.com/2010/02/unix-less-command-10-tips-for-effective-navigation/

cat: Displays text file, file concatenation, create new text file, modify file, read text file

syntax:  cat filename OR cat > filename OR cat [options] filename

man: displays a manual of linux commands

syntax: man [option(s)] keyword(s)

eg man ls OR man pstree | col -b pstree.txt

grep: seraches any given input file, selecting lines that match one or more pattern(s). By default, a pattern matches an input line if the regular expression (RE) in the pattern matches the input line. Each input line that matches at least one of hte patterns is written to the standard output.

syntax:  grep patternYoureLookingFor filename

find: finds stuff
syntax:  find location comparison-criteria search-term

.    finds all the files in the current and subdirectories

The pipe: method to send data from one program to another. Output is fed from the program on the left side of the "|: to the program on the right

syntax: fileOne and/or LinuxCommand1 | file2 and/or LinuxCommand2 | etc etc

eg

ps auxwww | grep fred | more

ls -al |grep Aug| grep -v '200[456]'| more

echo: appends text to a file. 

syntax:  echo "some text" >> afile.fileType (.txt, .rb etc) 

touch: creates an empty file
syntax: touch newFileName.type