Programming The Web

Command Line Basics

To begin we will be using the Command Line to program. For a Mac; the Command Line is located in the utilities folder in the applications folder and is named Terminal. Terminal can be accessed by pushing command and the space bar and then typing in Terminal.

PWD COMMAND

The first command I’m covering will be pwd command. This command prints out the current directory in the terminal. This command can be useful when copying or moving a file or directory and the knowledge of what location is necessary.

LS COMMAND

The second command I will introduce to you is ls -l and this is used to view the contents of a directory in a list format. Simply ls on it’s own prints out the contents of a directory all the same; except it is not in a list. As you can see the name of the application is on the far right and it is quiet easy to read. This command is important because it allows one to view what is inside a folder and allows one to furthermore navigate throughout the computer’s architecture.

CD COMMAND

Another crucial command for the navigation of the Terminal (or Command Line) is the cd command. When using this command you type in cd followed by the Directory you wish to navigate to. To move backwards in a directory to one folder higher than the current directory; you simple type in cd followed by two dots; such as (cd ..). Again this just allows you to move back a directory. Lastly if one wants to return to their home directory all you simply need to do is type in cd and then the tilde symbol. Such as (cd ~).

MKDIR COMMAND

As you can see in the image above: the mkdir command creates a new directory. This can oftentimes be useful when you are creating a webpage and you need a place to put your index.html; index.css and script.js files (along with any image or video files you have as well). Always the first step of this process is to make a new directory (or folder) and proceed from three.

TOUCH COMMAND

After you have created a new directory for you webpage you can proceed to create a new webpage files. As you can see from what I have done above; creating the pages for a single page web page is as simple as typing in touch followed by the files necessary. As you can see you only need to type in touch once in order to create three different files simply by listing them one after another.

NANO COMMAND

In order to edit one of the files you have just created; simply type in the nano command follow by the file name and the prefix of the file you wish to edit. This command outputs in the following picture.

NANO TERMINAL

This is the nano terminal. In order to exit the nano terminal you must push command and X and then push the Y button. This will save your work and allow you to run the file in either the browser as a website or the terminal as a script.

NODE PACKAGE MANAGER

Above is an image of me installing node.js. The first part of the command; sudo. This command allows you to run administrative tasks as a root or superuser. Basically this means you can become a computer administrator just by typing in sudo followed by your password. From there I used the pip package installer in order to install node.js. Node is often times used to use javascript in the terminal as well as download other packages.

NODE COMMAND

In order to perform Javascript computations in the Terminal; you must first type in the command node. After you have typed node and pushed enter; you are then capable of writing Javascript code in the Terminal and it will output if the code is correct; all when you push enter.

CLEAR COMMAND

In order to clear out the previous input and output of the Terminal; one can simply type in the command clear and the previous history of commands goes away.

RM COMMAND

In order to delete a directory or the contents of a directory; one can simply type in the rm -r command. Generally you need not type in the second part of the command (-r) in order to delete files. You can get away with only writing rm then the file you wish to delete.

HELP COMMAND

If at time you seek guidance for commands; you can type in the command followed by --help. This will open a page describing to you the different nuances of the command. Another way to achieve the same effect is to type in man (short for manual) and then the command. An example of this is if I were to seek guidance with sudo I could type in man sudo or man --help.

HYPERTEXT MARKUP LANGUAGE (HTML)

HTML ELEMENT

The first element in an HTML page is alway the HTML element. It is the first and last element to be displayed in a .html file and is there so that it can be read by the browser.

HEAD ELEMENT

The head element in html is usually the second element in an html document. It allows for there to be a head portion of the document. This is where the title element can reside as well as link element which is useful for linking the css page.

TITLE ELEMENT

The title element of an html document is the section of the document where you write the name of the documents and a brief description of what the html document is about. When viewing an html document in the browser the title element can be found as the text within the tab.

BODY ELEMENT

The body element is similar to the head element and it describes the second portion of the html document. There are several elements that can fill the space between the opening and closing body tags. These elements include image; video; div; paragraph and buttons.

DIV ELEMENT

The div element can often be found between either the head or the body elements. It is called div because it is thought to be a divider of the document. Divs can be used to display text as well as create different background landscapes with css.

PARAGRAPH ELEMENT

Next we have the paragraph element. This element can be used to display text and as you can see the image above it is quiet easy to display text with the paragraph or (p) element.

IMAGE ELEMENT

The image element is a way to display images in your website. Like all elements it requires an opening and closing tag. One can link images with the src descriptor. In order to use an image on a site you can upload the image to your site in a img directory and display the link after the src descriptor. Another way is to upload the image to a remote source and copy/paste the image’s url: again after the src descriptor.

IFRAME ELEMENT

The iFrame element allows a Web Developer to display videos from online resources or with their own remote hosting capabilities. The src descriptor allows one to input either a url to a service such as youtube or a file where one has uploaded their video.

LINK ELEMENT

The link element can oftentimes be located in the head element. It is used for linking css pages to html pages. The CSS pages linked to the HTML pages are responsible for the styling of the html document. Instead of using the src descriptor like the iframe; img and script elements do: the CSS link element uses href to link the CSS page to the HTML document.

SCRIPT ELEMENT

The script element is similar to the link element for CSS; except it is for Javascript. This means that any external Javascript pages can be linked to html pages with the Script element. This is done with src again and the relative path to the Javascript file.

CASCADING STYLE SHEETS (CSS)

ID SELECTOR

The id selector is used to identify HTML elements in order for them to be styled with CSS. Often times an ID descriptor can be any descriptive word about the HTML element.

TEXT-ALIGN PROPERTY

Text-Align can oftentimes be used on text-related elements in order to put these elements in the middle of the page when the property “center” is used. There a few other settings for text-align such as right and left.

ITEM-ALIGN PROPERTY

Item-Align is used for HTML elements that are not necessarily text-related thought you want these elements to be in the middle of the page. Item-Align has a few other properties as well such as right and left again.

PADDING PROPERTY

Padding is used in CSS to create space where there wasn’t before. In the image example above padding is used at 100px in order to create more space above the linked element.

PADDING-TOP PROPERTY

In this example padding-top is used to create space above the element; therefore to the top of the element.

PADDING-BOTTOM PROPERTY

Padding-bottom is used in CSS to create space below an element.

PADDING-LEFT PROPERTY

Padding-left is used in CSS to create space to the left of an element.

PADDING-RIGHT PROPERTY

Padding-left is used in CSS to create space to the right of an element.

BACKGROUND-IMAGE PROPERTY

The background-image property is used to display an image behind the linked HTML element.

BACKGROUND-COLOR PROPERTY

The background-color property is used to display a color behind a linked HTML element.

COLOR PROPERTY

The color property is often used with text elements; such as div or p. You are free to choose whatever color you would like the text to be.

MARGIN PROPERTY

The margin property is very similar to the padding property. In order for you to create more space around an element use the margin property and it will create space for you.

MARGIN-TOP PROPERTY

The margin-top property allows for space to be above the linked element.

MARGIN-BOTTOM PROPERTY

The margin-bottom property allows for space to be below the linked element.

MARGIN-LEFT PROPERTY

The margin-left property allows for space to be to the left of the linked element.

MARGIN-RIGHT PROPERTY

The margin-right property allows for space to be to the right of the linked element.

PROGRAMMING WITH JAVASCRIPT

NODE COMMAND

In order to type Javascript into the Terminal and have it output something; one must use the node command. In order to do so you simply type in node and push enter. Instantly one is brought to a developer console where they are free to begin programming Javascript.

VAR STATEMENT

Variable Declaration in Javascript is very simple. There are three statements that can be used in Variable Declaration. The first one is Var. As you can see from above a Var variable is one that can be changed later on. In the image example above you can see how the favoriteNumber variable is changed from two to three and it still outputs at the end to be three.

CONST STATEMENT

The second statement of Variable Declaration in Javascript is the const Statement. This allows for a variable to be defined once and only once. Once a const variable is defined you are no longer allow to change it without error upon output.

LET STATEMENT

Lastly the let statement is more similar to var than const in such a way that let can be redefined. You can see from the example above the let variable is defined again and it outputs to be the correct number.

FOR LOOP INPUT

The image example above is the input for a for loop. In the first part of the program the variable array favoriteFoods is defined. In the second part of the program there is a for loop that prints out one item of the array at a time; until there is no items left in the array to print out. The way a for loop works is simple; after declaring it a for loop you have initialize the i; the initial variable. The second parameter in the for loop is when the loop is going to stop printing out. This is shown with i=favoriteFoods.length. This means that the for loop with stop printing when the loop equals the same number as the length of the array. Lastly the i++ refers to the fact that the loop with be incremented one time until it stopped

FOR LOOP OUTPUT

As you can see from above; node is used to run the script. Once the script is run the for loop repeats five times; printing out one item of the array each time around.

ELSE-IF STATEMENT INPUT

You can see the image example above and how a number is defined to be two. Then an if-else statement is used to print out the number if the number is equal to two(which it is). If the number is not equal to two then it will then print out the number minus 1.

ELSE-IF STATEMENT OUTPUT

Again node is used to run the Javascript script. The number printed out is two and it seems the number was equal to two.

FUNCTION INPUT

Above; a function is used in order to multiply two numbers; four and seven. As you can see the multiply function returns a*b of which were both initialized in the first line of code. Console.log is a way to print out information to the console.

FUNCTION OUTPUT

Again here is the outcome of the previous input. As you can probably deduce; four times seven is actually twenty-eight. So it seems the program ran swimmingly and the calculation was done correctly.

INTERPLANETARY FILE SYSTEM

IPFS INIT

In order to use the Interplanetary File System CLI in a project; one must first initialize the project with ipfs init. This allows for the project to then be uploaded to the IPFS node.

IPFS DAEMON

IPFS daemon is the command used to view the UI component of the IPFS Command Line Interface. Inside of daemon one is capable of viewing the files they have upload to the IPFS node. One can also change the settings of the IPFS node.

OPEN NEW TERMINAL WINDOW

In order for one to upload their work to the IPFS node; the daemon must be open. Therefore once the daemon is open navigate to your Terminal’s File->New Tab area in order to open a new window for uploading the site.

IPFS ADD

IPFS add is used to upload the contents of a site to the IPFS node. In order to begin doing this one must first cd to the correct directory. Then the command ipfs add is used with the extra part -r used in order to make it possible for the IPFS to upload folders instead of just files. Lastly the . part at the end is used in order to upload all of the contents of a directory.

COPY IPFS HASH NUMBER

Once you upload your site to the IPFS node with IPFS add; the Terminal will return your IPFS node hash as you can see above. It is important you copy and paste this hash in order to publish in the next step.

IPFS PUBLISH

Go ahead and paste the hash id after ipfs name publish in order to furthermore publish your site. You will be able to view this site at http://gateway.ipfs.io/ipfs/.