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.
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.
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.
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 ~).
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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 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 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.
In this example padding-top is used to create space above the element; therefore to the top of the element.
Padding-bottom is used in CSS to create space below an element.
Padding-left is used in CSS to create space to the left of an element.
Padding-left is used in CSS to create space to the right of an element.
The background-image property is used to display an image behind the linked HTML element.
The background-color property is used to display a color behind a linked HTML element.
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.
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.
The margin-top property allows for space to be above the linked element.
The margin-bottom property allows for space to be below the linked element.
The margin-left property allows for space to be to the left of the linked element.
The margin-right property allows for space to be to the right of the linked element.
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.
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
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.
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.
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.
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.
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 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.
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 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.
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.
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/