New terms from treehouse – Console Foundations Part 1 – Getting Started with the Console and Users and Permissions

Getting Started with the Console

The console is another way to interact with your computer. You type in commands and get text back, it’s not like a Graphical User Interface (GUI). Why learn it? Some tools you might need my not have a GUI. Unix is an OS from the 60s that a lot of modern ones are based on, like GNU/Linux and Apple’s Darwin. Most servers runs some kind of linux based OS. They share a standard called POSIX, Positive Operating System Interface.

Windows is not a POSIX compatible OS. It works differently, making it a less desirable choice for web development.

---

Running Commands

We type in commands, and it will print out info as a response. It goes from the top down, so the latest info is at the bottom. The command line is where you type your commands. You’ll see some text followed by a blinking rectangle. The text is the prompt, which can give you some contextual info. treehouse is who I’m logged in as, and the wiggly horizontal line is the tilde, and is the directory we’re in. The $ tells us where the prompt ends and where our input begins.

The ls command is short for list, and lists files. Type it in, then click enter to run it.

The output gives two things. It means in the folder we’re in right now, there’s a folder called documents (in blue), and a file called hello.txt. Colors aren’t necessary, but can be helpful. Now let’s write ls -l. -l prints the long form of the list, giving us more info.

The total 8 means there are 8 files in this folder that are not being listed by default. The line of letters and dashes specifies the permissions of this particular file. For drwxrwxr-x, d means directory, then there are three triplets of rwx, for read, write and execute. Each triplet means a differential level of people you can access them. The first triplet is for the user who created it. The second is a group, which is like a user but let’s you have multiple users in a group, an each file has a group associated with it. The third is for public permissions, and in this case you can see the w is omitted, so they can’t write.

For -rw-r—–, no one can execute it because it’s a text file.

There are then two treehouse’s list, the first being the user, and the second being the group. The 4096 and 416 is the size, listed in bytes. However, the 4096 isn’t the size of its contents, but rather this is a number they give to directories. Then, the date of the file and its name.

So why are the other 6 files not showing? If you start a file name with a dot, it will by default not show up in an ls listing. This is useful because it let’s us create hidden files. The -a option let’s us see those too. They’re usually configuration files made by other programs, and you usually don’t need to modify them.

We can pass an argument as well. Currently we’ve been listing our current directory, but we can do any other one as well. /etc is the name of another folder.

If we wanted to see them long form, we’d type ls -l /etc

The user root is the admin of our computer, which we normally don’t use so we don’t accidentally delete an important system file. To clear the backlog of commands and responses, type clear.

---

Moving around the filesystem

Folders are usually called directories here. You’re always at some place in the folder tree when you’re in the command line. The pwd (print working directory) command displays your current position in the file system.

In linux, your home directory is listed as home/yourusername. In Mac is users/yourusername. This is a special directory and it has its own shortcut, the ~.

The cd (change directory) command lets you change where you are. Type cd, then where you want to go. Some consoles have tab completion, where you start typing something and hit tab to complete it. Below, I hit doc then tab. If there are multiple options you can tab through them with tab. The trailing slash is in case you want to go into a directory inside of documents.

Notice now our prompt has changed, and now displays ~/documents. If we check pwd it tells us we’re at home/treehouse/documents, and if we check this folder with ls there’s a new text file in here.

Note that if we were to try and type cd documents now, it wouldn’t make any sense, because there’s no documents folder where we currently are in the directory. If we try, we get a response telling us there is none. -bash is the program we’re interacting with now, and is called our shell.

That would be an example of a relative path. We can move around with an absolute path though. It starts with a / or a tilde, meaning we’re starting at the top, or the root, of our document tree. cd /home/treehouse takes us home.

If we were at /home, and wanted to go to documents. We could write /home/treehouse/documents, or just use a tilde instead and do ~/documents.

To go back to home we can just type cd ~.

To go back down to documents form here, we can do cd documents. But what if we want to go back up? Simply type cd ...

You can string this together, doing ../.. makes you go up two directories.

If you typed home/treehouse/.., you’re actually saying you want to go up a level from the treehouse directory, which would be home again.

---

Reading Files

So how do we see what’s inside that hello.txt file? We can use less, a program that displays the contents of a file. It takes as its argument the file you want to view. Notice we’re using a relative path since we’re where the file is at. We could do an absolute path as well and list out home/treehouse etc.

Notice how less takes up our entire screen/console. You can use the arrows to move up and down. The cursor has changed, there are now some commands we can use to move around. Spacebar will scroll one page at a time. (END) tells us it’s the end of the file. Pressing q at any point will quit and take you back to the command line.

Fun fact – since less is based of the more program from the original Unix, you can type that as well, and it will run like less, but will try to emulate the older more program. These programs are called pagers, because they show one page at a time. The cat program will print the content of one or more files to the contents, and can concatenate files together. Notice how it just printed it out and took us back to the command line.

To concatenate just list the files you want to do that to.

---

Editing Files

nano is a text editor that works on the console, and is named after the old Unix program pico. Just type nano then the text you want to edit.

It’s another full screen program. You can move around with arrows, type and click enter to make spaces. There are shortcuts at the bottom. The carrot means the control key. To get help, press control+G, which takes you to another screen with more commands.

If you exit the editor and have made changes, it will ask you if you want to save.

vim and Emacs are other, more powerful options, but have a steeper learning curve.

---

Moving and Deleting Files

Let’s say we want to rename a file hello.txt to hi.txt. Instead of thinking of it as renaming it, think of it as moving it from the hello.txt location to the hi.txt location. mv is the move command, and takes two arguments, from where we want to move something, and where we want to move it.

To move it from one directory (remember, in the console that means a folder) to another), it works the same way. To move it into documents, just write that as the second argument with a / after it. It will move it from the current directory to the new one with the same file name.

Note that ls documents/ didn’t move us into the documents directory, but rather just listed what was in there. To move it back, just switch the arguments. We can use tilde, since we’re going home/treehouse, .., to go up a directory, or finally ., which is the current directory we’re in.

If we were to do this:

It would not only move it to the documents directory but also rename the file to hello.txt.

mv also works for directories.

Once again, to move it back we just switch them.

The cp command copies things for you, leaving the original one in place. One again it takes two arguments, the first being what you want to copy, the second being want you want to name it/move it to.

cp only works for files though. To copy a directory, you need to type -r, which will recursively copy all the things within the directory.

We can see that it copied the file within it.

The rm command removes a file or directory. Be very careful, there isn’t a way to undo this. It’s not like your OS that has a recycle bin.

rm can’t remove a directory by itself. We need to use -r again.

To make a directory, use the mkdir command, which stands for make directory. The argument it takes is the name of the directory/path you want to make.

To make a directory inside of other ones. mkdir documents/notes/console wouldn’t work because there isn’t a notes directory yet. You can either make notes then console:

Or, you can create a nested directory, however levels deep, by using -p with mkdir.

---

Users and Permissions

Creating Users

You can set up multiple users, each with their own login, password and home directory. It’s a place for each user to put their stuff. There are files outside of the home directory that are used by the computer and typically not accessible to users.

Had to do some code to get this to work apparently.

You can learn which user you are by looking at the command prompt (right now I’m treehouse), or by typing the command whoami.

The adduser command let’s you add a new one. The argument it takes is the name of the user you want to add. However, you also need to be running in a special mode called sudo. It will then ask you for the password of the person you’re currently logged in as. In the example below we forgot the name argument the first time. It didn’t ask for the p/w again though because it was recently typed in.

So it created a user mike, then a group mike, then a home directory for him, then copied some files to get it started. Now we put in the p/w for that user, in this case html5.

Now we put some info in about the user, which isn’t mandatory. Then you can review the info to see if it’s correct and press Y for yes, n for no. Y is capitalized, which is a convention meaning it’s the default option if we don’t hit anything. So, if we want yes we don’t have to type it, we can just press enter.

To switch to this new user, you can use the su (switch user) command. You enter their p/w, and then you’ll be then. Notice how the prompt has changed. We can use whoami to see that we’re mike, and pwd to see we’re in the home directory. When you switch to a new user, you remain in the same directory that you were in before, in this case home/treehouse, which is NOT mike’s home directory. To go there we type cd.

So how do we switch back to the treehouse user? We can use su treehouse, or the exit command, which takes us out of the switched user that we were in before. Notice how we’re still in home/treehouse – where we were as mike has not affected where the treehouse user was.

---

File Permissions

Read, Write and Execute (rwx) are self explanatory. Execute only comes into play with programs. They are defined for three different entities:

1. User (u) – who made it

2. Group (g) – each user has a primary group that matches their username, but can be a part of many different groups.

3. Other users (o) – for those who are not the user owner, or in the group.

They are abbreviated u, g and o, in that order, giving you 9 permissions for each file. ls -l let’s you see those permissions.

The first digit tells you whether it’s a directory. Then u, g and o’s permissions in triplets. A dash means they don’t have that permission. The chmod command changes the permissions of a file or directory. Then the user and group names are listed. The txt file doesn’t have an x permission because it’s a text file.

It takes a few arguments, first who we’re changing this for (u,g,o). Then whether add or remove the specified permission, using a + for add or a – for remove. Then, the permission you want to change. Finally, the file or directory you want to change this for. Here, we gave o the permission to write on hello.txt.

To add a permission for every, omit the first argument for ugo, then the change.

To remove one:

Permissions are usually represented using octal notation, which is base 8 instead of 10. When you add one to 7, the answer is still 8, but is represented by 10.

It’s used because there are 8 possible combos of rwx. You’ll see three numbers written, corresponding to u, g, then o.

To remember the values, each is assigned a value, just add them up. – is zero.

You can use this with chmod. Right now hello.txt adds up to 666. To add x to each ugo, we can do 777.

Another example.

---

File Ownership

The chown command can change the owner of a file or directory. The arguments you put in are the new owner, then the file or directory. It won’t work in this case unless we put sudo, which will override any permissions. Here, we’ve reassigned hello.txt to mike.

Since we’re signed in as treehouse, and now only have the group permissions, we can only read it now, and not write or execute it. So the cat command would work, but the nano one would tell us there’s no write permission, so we could change but wouldn’t be able to save with control+o.

Now, when you try to exit it will still ask you if you’d like to save, but you can’t, so just choose No.

To change the user and the group, put a colon between them.

If you wanted to read or write to it now you’d just have to su as mike, or reassign it back to treehouse.

---

Sudo

What if you want to change things but don’t have permission? There is a special user on every computer called root, who overrides every permission on every file and can do anything. If you know their password, you could su as them, but this is less than ideal, because it requires three steps, and being root can be dangerous if you do something by accident. It’s better to work as a normal user and only use the permissions when needed. It’s better to use the sudo command, which lets you run a command with the privileges of root. This is also better because you can give certain people permission to use sudo, rather than let them know the password to root.

Example: before when we were changing the ownership of hello.txt. When you first use sudo, it will require a p/w to be used. It’s not the password of the root user, but rather the users password. It’s a system that allows certain users to use it. This helps ensure that someone might not be logged in as you, and gives you a moment to think about whether you want to do the command. It won’t prompt you for the p/w for a specified amount of time.

Fun shortcut – !! represents the last command that was run. It will print the command that was run, and also it’s output. Sometimes referred to as a bang. Good use case: If you forgot sudo for a command, you just can type sudo !! rather than having to recall it with up arrow and move the cursor over.

Note that you can only use sudo if it’s been enable for you as a user.

New terms from treehouse – AJAX Basics Part 2 – jQuery and AJAX and AJAX and APIs

jQuery is great in that it makes me feel less terrible about my JS skills. It also makes working with AJAX extremely simple and quick. Many people exclusively use it for their AJAXin’.

We are apparently able to replace all the code we had to write out for the first example with just these lines:

The #ajax selects the div on the page with the id ajax, and the .load method is shorthand for requesting a bit of html and then loading that into the page. It is one of many helpful AJAX functions in jQuery. We can then hide the button with the .hide() method.

---

jQuery’s AJAX Shorthand Methods

They made these for the most common kinds of AJAX requests, listed here. .get() method is a way to send a GET request to your server. This actually doesn’t use a selector, we can just use it with the dollar sign jQuery symbol. It takes a few arguments. The first is the url, the one you’re making the request to. The second is optional, and is data you send to the web server, which is added to the url as a query string. You can actually use JS objects here instead of just a string.

For example, if you want this:

You could actually do this:

The third argument is the callback function, which is the code that runs after the response from the server. The difference with jQuery is you don’t need to check the XHR ready status or for any errors. It’s only run when the AJAX request is complete and successful. You write it like this, and the response argument in the function is the same as the responseText property of the XHR object from the last stage.

You can also insert the info directly in instead of using variables.

Let’s see how we can replace the load() method with the get() one.

Note that the load method is easier and less code. It’s just nice to have different ways to do things.

---

Office project revisited

Here we’ll rewrite this project in jQuery rather than JS. jQuery has a AJAX helper function called getJSON() that not only performs the necessary AJAX requests, but also parses the returned JSON file. It works like the get() method seen before.

We’ll start with $(document).ready, which is a jQuery function that waits for all of the HTML to load before running the code. This is required only when including the link to your js files in the head of the file, before the body of the html.

Note: he added the comment to say what the closing brackets are for, which helps clarify things when writing jQuery.

We then add in the getJSON method, which accepts the same arguments as the get() method. The data argument is optional, and we won’t use it here. Once again, we can create a variable or insert the value or function in directly. Note: the response here is expecting to receive JSON, if the server sends back anything else, like plain text or XML, the getJSON method will fail. We can then start adding to the anonymous callback function. We’ll set statusHTML to an opening ul tag with the class bulleted.

Remember, the JSON file we’re linking to is just an array of objects containing the name and their in/out status. Before, we used a loop. In $, we can use the .each function, which works the same way.

For the array argument, you enter the index number for the value you want, like the i in a for loop.

\

So in our example, data is the array we’re referring to. Then for each object in the array, value has two properties, each with a value, for name and inoffice.

Let’s add that to our code. We’ll name the second argument in the anon function employee, since it’s basically a list of objects containing info on employees. The rest of the code is basically the same as the last one where we add list items with a certain class depending on the value of employee.inoffice. Make sure to add the closing ul tag outside of the loop, otherwise it will add one every time. We then add the html to the page using the .html() method, using our statusHTML variable as our argument.

---

Posting Data with jQuery

The get() method is good for small things, like an email address, but for larger things, like a blog post, use post(). It’s for data meant to be stored in a database. It takes 3 arguments again, the url you’re sending to, the data you want to send, and the callback function you want to run after it’s sent and you get the response. For the data, you can use a JS object like for get(), but more commonly you’ll want to use data from a form.

jQuery’s serialize() method can take a form’s worth of fields, encode them and prepare the data to be sent to the server. Below, we show how to use it:

First, we use the $(document).ready because they put this code in the head section. Then they select the form element, and put a .submit() event handler so this triggers when the form is submitted. Then, they prevented the default action of the form so the submit button wouldn’t work as it normally would. Then, they created an attribute for where we’re posting to, url, and the data of the form, formData. For form data we use .serialize(), which goes through all the form fields and encodes them for us. Finally, we do a post() and finish up by having it change the html of the #signup element once it’s complete.

---

The AJAX method

get() and post() are actually built from a more complex and robust method, the $.ajax() method. It takes a url for the request, like the others, but then also a JS object containing key value pairs that set various other options of the request. They are listed out in the documentation above. Let’s redo the last post example with this one. Basically you plug everything you need into the object.

So why use this? For flexibility. The get(), post() etc shorthand methods are convenient but limited in comparison. For example, you can set a timeout, to wait a certain amount of time to hear back from the server. After which you can quit the AJAX request, and do something else. Or if you need user authentication, you can set that up to pass along with the request. Still, the shorthand methods are useful for most requests.

---

Handling Errors

jQuery’s AJAX functions fail silently, meaning that your callback function won’t work in that case. Sometimes that’s okay, but sometimes you want to let your users know that’s a problem.

Let’s say you’re building a chat app. You submit a message with a form, and it gets sent to the server via AJAX. Then, the recipient receives it via AJAX as well.  But what if there’s an issue where it doesn’t send? You should notify the user.

The .fail() method’s purpose is to run a function when an AJAX request fails. It can be used for all of jQuery’s JAAX methods except the .load() method. Since jQuery supports chaining, where you tack on one method to another, you can simply add fail() to the end of another.

It takes a single argument, a callback function that runs if the request fails. jQuery passes several arguments to it, but the only really useful one is the first, a jQuery XHR object (jqXHR), which is an enhanced version of a regular XML Http object we learned about earlier and includes extra helpful properties, like info about the error via the .status property. Here we show that using the alert function.

If you instead use the .statusText property it will explain it via text and you can give that to the user.

But, if you just want to print the error to the page there’s an even easier way, just create a variable with a string explaining it, and add that to the html. Not sure why he wrote the variable and then added to it though, you could just do it all in the line where you declared it.

Remember, .fail doesn’t work for the $.load method, nor for remote AJAX requests that use JSONp, which are requests to a different web server.

---

AJAX and APIs

What is an API?

All sites let you access them using a web server, but some also provide a method from accessing content from another webserver via a server-side language like php or ruby. An API, or, Application Programming Interface is the method that let’s you connect your site to a third part web service, like youtube or flickr. It defines what you can get from a web server, and how you get it. Each site that has one has it’s own unique one. Some have JS API’s that you can access via AJAX, without the need of a server-side language.

---

Flickr’s API

Most API’s will make you apply for an API key, where you let them know who you are and what you want to use their API for. It acts sort of like a password, when you connect to their web server you need to send along your API key. It let’s them know who is making the request, and limits access to the service and content accordingly. This let’s them revoke the key also if needed, if you’re doing something bad or requesting too much.

Flickr offers a trimmed down version of their API that’s freely accessible and doesn’t require a key. The Flickr feeds page list urls that let you do this. We’ll be using the public feeds one. It let’s you search for posts by a particular user or tag. By default, https://api.flickr.com/services/feeds/photos_public.gne, the result it gives you is in XML, but to request JSON just add the query string: https://api.flickr.com/services/feeds/photos_public.gne?format=json

Still, that’s hard to read, so chrome has a JSONview extension which helps.

It lists out helpful properties. The items property is formatted like a JS array, where each value contains info for a photo, like its title, where it can be found, and a link to a thumbnail sized image.

Now, remember the issues with requesting info from another web server via AJAX. The solution – browsers let you link to other types of files like CSS, images and JS ones, so we link to a JS file on the Flickr server. The trick is Flickr is really sending us the photo data wrapped in a JS file, accomplished using JSONP, which loads the JS file from another server.

---

Beginning the project

Goal here is to make a site that loads images from flickr based on certain tags. Here’s the game plan:

We’ll start with the $(document).ready function since we’re linking to it at the beginning of the file. Now we want to select the word on the button. We’ll select anything with the tag button, then use the .click() helper method, which will add a click event handler to each of the buttons, meaning it will run its function each time one of the buttons is clicked.

First thing is we want to highlight the clicked button. Let’s do this by adding a class to the clicked button. Remember, “this” means that the class will only be added to the one that was clicked, and not the other ones.

This is good in that it highlights that button, but bad in that it remains highlighted if we click another. So, we’ll make it remove the class from all the buttons whenever a button is clicked, then add the class to the button that was clicked using this.

---

Making the AJAX Request

Now it’s time to make a JSON call using the getJSON() method. We want to send it when a visitor presses on of the buttons, so we’ll put it inside the click event as well. Remember, it takes three arguments, the url to the resource, any additional data, then the callback function.

We add “?jsoncallback=?” query string to the url to tell flickr we’re making a JSONP request, and let’s us get around security limitations.

Next step, we need to send data, using the flickOptions variable. We need to send different things depending on which button is clicked. We can use the .text() method to get all the text inside the element along with “this” again. Flickr is expecting the data in the form of a JS object, so make a variable with flickOptions and set it equal to an object. We’ll set the tags‘ key value equal to the animal variable, which contains the word of the button pressed. The options available for the keys in the object we send as data are listed here. We can also use the format key to say we want JSON instead of XML.

Now to do the callback function. You’ll see it receives one argument, named data, represents the JSON data returned by jQuery, which has been parsed into usable JS.

Note that you can also just plug everything in directly to the getJSON() method rather than create variables.

---

Now to write the HTML to display the photos. First we’ll create a variable photoHTML that will contain the html that we can add to. Since we’re doing this 4 times in a row for four pictures, we’ll use a loop via the .each() method. It’s structure looks like this:

It takes two arguments, an array and a callback function that is applied to each thing in that array. The i is the index value of the item, and the item is the actual value. Here’s an example of how this would work.

You could also write this using a simple for loop in JS, like below, but jQuery makes it easier.

Ok, so data is the JSON we received back as JS, and the items property contains all the properties we need. So, we write data.items. NOTE: you can call the arguments whatever you want. We’ll stick with i for index, but change item to photo since that makes more sense.

First, we’ll add the opening list item tag. Then we’ll add the link, getting the href value from the photo.link property. Remember, we’re using photo there because we defined that as our value for the index specified. data.items just says what overall array we’re referencing. Then, we want to add an image tag, with the source from photo.media.m. We’ll then close the a and li elements. Finally, we close the ul tag outside of the loop, and add this variable to the html of our page.

---

New project – make it so you can enter a word and search for a tag, rather than having to click a button.

Pretty much just change the event handler to work for form submits, then change the tags value to what the person entered.

To improve it, let’s disable the input and change the submit button while the AJAX request is running.

But, we also need to reenable them once the form is done. We’ll do that by adding them at the end of the AJAX callback function.