Command Line · Git · Viking Code School

Web Development Basics with Viking Code School

This is an overview of the Web Development Basics course of Viking Code School’s prep work. This first course started with a series of introductory lessons that went over what a web developer is and what they do. This included a discussion of the front end vs. the back end, webs sties vs. applications, how the internet functions, and other basic concepts. The command line through Git Bash was set up and several software installations were completed. The assignments included learning how to use the command line and getting comfortable with how to use Git and GitHub.

I have a computer running Windows 8.1 as the operating system, so installed Git Bash for Windows. I may purchase a Mac before the start of the immersive program in order to work on a Unix environment later. This introductory lesson covered a lot that I was already aware of in regards to basic concepts on web development and the internet, but Git and GitHub were new for me. It was interesting learning how the Git workflow operates and it became clear to me by the end of the course how useful and easy this version control system is for updating code and working on separate branches when more than one developer is working on the same application.

The following are a series of questions that cover the main topics of the course that I answered to review the material and test my knowledge.

All About Web Developers

What does a Web Developer do?

A web developer is a software programmer who engages in the development of internet applications for websites. These applications are run using HyperText Transfer Protocol (HTTP) from a server to an internet browser. A developer may build a website for themselves, for others as a freelancer, or for a company for which they are employed.

What’s the difference between web developers and web designers?

A web designer’s work is concerned with the visual appearance, artistic design, and graphical composition of a website. A web developer focuses on actually building the website using various computer programming languages or systems of code that allow the website and its applications to function. Web development takes place both on the back end or server, and the front end or browser. Many times the distinction between designer and developer are blurred, however, as some aspects to each overlap.

What’s the difference between front end, back end, and full stack developers?

The front end, or client-side, refers to the content that is presented on the web browser and is concerned with the user’s experience. HTML, CSS, and Javascript are all examples of languages used for the front end. The back end, or server-side, refers to the inner workings of a website or application and involves all of the code and data that is stored on the server. The code on the back end deals very much with how stored or input information is interpreted, calculated, retrieved, manipulated, and sent to the front end to be displayed to the user. A full stack developer encompasses a knowledge and ability to write code for both the front and back end in unison to create an entire web application.

What’s the difference between static and dynamic web pages?

A static website has a set collection of pages linked together that do not change from user input and are largely used to display already defined information. A dynamic website or application receives input from the user in some form that creates, removes, edits, and/or retrieves data from the server, displaying new information in response to that interaction.

What’s the best way to get help when you get stuck?

Utilizing Google to search for answers to questions or issues that arise during programming can be one of the fastest and easiest ways to solve a problem. Identifying an error and finding a solution can often be located on message boards and online programming communities.

Where are the closest developer communities to you?

Learn to Code Phoenix, DesertPy, Phoenix Javascript, HackerNest Phoenix

What online developer communities can you join?

GitHub, Stack Overflow, Hacker News, Reddit

Why is it better to use a developer-friendly text editor like Atom or Sublime Text than something oriented more towards word-processing like Microsoft Word?

A developer-friendly text editor allows you to view full directories, open files in different tabs, navigate using keyboard shortcuts, and highlight and color code syntax in many different programming languages. Text editors like Atom also allow users to create snippets, which add to a developer’s efficiency.

What are the top 3 characteristics of great web developers?

Curiosity, Hacker Mindset, Passion

What do companies look for in a junior web developer?

Companies are concerned more with what a developer has built and their ability than their academic history. It is good to build up a large and diverse portfolio of code as evidence of this ability. Employers also want people who are able to communicate well and work within a team. Web developers should have a willingness to adapt in learning new technologies and programming languages. They should also be able to think creatively in using all of the tools at their disposal.

What is the hiring process like for a developer?

The process begins with submitting a cover letter, resume, your Github page, and links to projects you have completed. A phone screening takes place if the employer likes the materials you have offered for review, followed by a series of interviews that may include programming exams and observation. Developer interviews often involve tests of one’s abilities to code well and think analytically. Employers want to know that the applicant can examine and understand the components of a larger whole, complete projects, and function well within a team.

How the Web Works

What is the internet?

The internet is a network of several computers and devices that transmit information between each other using shared programming languages and a standard protocol (HTTP).

How is information broken down and sent?

Larger pieces of code or information are broken down into smaller pieces or packets that are transmitted separately and reassembled at their destination.

What are packets?

Packets are pieces of information of a larger whole, such as an image, video, or web application that are used to transmit larger sets of code more easily.

What is a “client”?

The client is the user’s device requesting information from a server over the internet. Often this client request occurs via a web browser that retrieves information from or interacts with a server.

What is a “server”?

The server is a computer that the client requests information from over the internet. The client can enter input to the server to interact with, change, or request specific data or sets of data.

What is HTTP and how does an HTTP request work?

HTTP is an acronym for Hypertext Transfer Protocol, which is the method used to request and transmit data over the internet. When the user enters information into their browser, the client, it generates HTTP that is sent to the server, which then responds with HTTP to provide the data requested.

What are DNS servers?

A DNS, or Domain Naming System, server, connects human readable names of websites to their Internet Protocol (IP) address, which consists of a specific series of numbers.

What is HTML and how is it used?

HTML is an acronym for Hypertext Markup Language, a language consisting of tags that are used to delineate the content, structure, and appearance of the front end of a web page.

What is CSS and how is it used?

CSS is an acronym for Cascading Style Sheets, a language that implements elements of the front end appearance of an HTML page, such as fonts, colors, spacing, transparency, and alignment.

What is your browser’s Web Inspector (aka Developer Tools) and how can you use it to poke around in a page’s HTML?

Developer Tools in your web browser allow you to view the actual HTML and CSS code that generated the content of the page. Hovering over different items will highlight the corresponding sections of code.

What happens behind the scenes after you click “search” on google.com?

Your search query is sent via HTTP to the server where it is processed through the application to produce the requested results. These results are then sent back to the client’s browser to be displayed.

The Command Line

What is the command line?

The Command Line Interface (CLI) appears in the command prompt or terminal shell where a user can type text based commands to direct the computer to complete specific tasks. It allows a programmer to change settings and permissions, move between directories, create, open, edit, and remove files and directories, interact with Github repositories to create or merge branches, add commits, and more.

How do you open it on your computer?

The Command Prompt can be accessed on Windows by typing “cmd” under Start > Run, or the Windows key + R. The equivalent Terminal can be accessed on macOS by the Command + Space keys, and typing “terminal.”

What is Bash?

Bash is an abbreviation for Bourne-Again SHell, which can be used on Unix, Linux, and Windows.

How can you navigate into a particular file directory?

$ cd directoryName

How can you create a directory?

$ mkdir

How can you destroy a directory or file?

$ rm $ rm -rf

How can you rename a directory or file?

$mv

Why are file permissions important?

Permissions help to prevent unwanted access or modification of files.

How do you view hidden files in a directory?

$ ls -a

How do you find information about a particular command?

$ man

What is a “Superuser” and how do you execute commands as this user?

The “Superuser” of a computer has special privileges that are used to administer and maintain the system. “sudo” can be used in the command line, which stands for Superuser do.

What is Vim?

Vim is an improved version of the Vi text editor that is included on most Unix systems. It allows for efficient text editing, useful for programming.

How do you quit Vim if you get stuck in it?

hit escape, then :q [quit] :q! [quit without saving] :qa! [quit all]

What is the .bash_profile file and what is it used for?

The .bash_profile file contains variables and commands used to configure the bash shell.

What is the $PATH variable?

The $PATH variable tells the shell which directories to search for executable files in response to commands issued by the user.

Why might you need to add onto your $PATH variable?

So an application can be found and run in the command line.

What are alias commands?

Alias commands are shortcuts that can be set up for use in the command line. This is often for convenience so that long scripts that are used often don’t need to be fully typed out.

Define the following:
The Web

URL

The Uniform Resource Locator (URL) of a website is the address used to reach it. Human readable addresses get mapped through the DNS into IP addresses.

Domain

The part of the URL that specifies the location of the web server to which you are sending your request.

IP Address

Address of a website. Four numbers ranging from 0-255 separated by periods. Unique, but hard to remember – hence URLs and the DNS.

DNS

The Domain Naming System (DNS) allows human-readable URLs that can be translated into IP addresses.

HTTP

Hypertext Transfer Protocol (HTTP) is the protocol or standard used for transferring information around the internet. It is the way a client and server communicate.

HTTPS

Hypertext Transfer Protocol Secure (HTTPS) has an added layer of security. Any sensitive information should be sent over HTTPS.

POP & IMAP & SMTP

Sets of protocols for handling e-mail. Post Office Protocol (POP), Internet Messaging Access Protocol (IMAP), and Simple Mail Transfer Protocol (SMTP).

API

An Application Programming Interface (API), is an exposed portion of a web application, which allows other web applications to communicate with and retrieve information from it. APIs are essentially a way for applications on different web servers to interact with each other. Applications such as YouTube, Instagram, Twitter, and Facebook produce API keys for the public to implement into their own webpages or applications. For example, a YouTube API key can be used on a blog to display how many subscribers a specific channel has. In another example, an Instagram API key can be used by a web application to retrieve the most recent posts or number of followers of a specific user. This is done by requesting that information from the Instagram application and web server via the API. The information is then delivered to the other application’s server, so it can ultimately be displayed to the client.

Web Server

This is the portion of a web application that accepts, processes, and responds to incoming HTTP requests from client browsers or separate applications. This is what is referred to as the back end of the web application and is often run on a remote computer. There are many different programming languages developers utilize to create the coded instructions for the back end, or server side, of an application, such as Java, Ruby, Python, PHP, Perl, SQL, C++, C#, Python, Go, Swift, and others.

Bugs

An error in software, often related to a programming mistake or omission, which causes a program to malfunction.

The Cloud

The Cloud is a reference to using remote servers hosted on the internet to store, manage, and process data, rather than from a local server or personal computer’s hard drive.

Cookies

Text files stored by the browser, which are sent back to the server each time the browser requests a page from that same server. They are mainly used to identify users and sometimes to prepare custom web pages or results for them. Session (or transient) cookies are stored in temporary memory and erased when browser is closed, they do not collect info on user. Instead, they store information in the form of a session identification that does not personally identify the user. Persistent (or permanent) cookie are stored on hard drive until it expires at expiration date or until user deletes it. They are used to collect identifying info about the user such as surfing behavior or user preferences for a site.

404 Error

The error page a user receives when the page they were hoping to access does not exist.

SEO

Search Engine Optimization is the process of producing content that contains attributes beneficial to increasing the content’s visibility in search engine results.

Design

WYSIWYG

“What you see is what you get” – often in reference to a GUI where the changes you make are nearly identical to the changes you will see on your page.

Responsive Design

A responsive design ensures a website is viewable on a variety of devices and browsers by adapting its content to display for ease of reading and navigation without the user needing to resize their screen.

Grid System

The design structure of a web page that allows for the organization of graphic elements into sections or shapes.

RGB

An acronym for, Red, Green, Blue, the three colors that make up a pixel’s final color. Each value is an integer between 0 and 255. The combination of the three integers specifies a color.

Hex

A base 16 numeral system. Digits are 0-9, a-f. Often used to express RGB.

Above the Fold

Content that is visible immediately when the page is loaded without having to scroll.

GUI

A Graphical User Interface (GUI) is one that allows a user to interact with a program through a graphical interface instead of a text-based interface.

Front End / Back End

Front end refers to the client-side, the browser and languages like HTML, CSS, JavaScript. The back end refers to the server-side that hosts the web application and frameworks like Rails that operate on those servers.

Developer Tools and Code

HTML

HyperText Markup Language is a front end markup language used to specify the structure and appearance of a page.

CSS

CSS is an acronym for Cascading Style Sheets, a language that implements elements of the front end appearance of an HTML page, such as fonts, colors, spacing, transparency, and alignment.

JavaScript

A scripting language that runs in the browser. It allows interactivity with the user. It also appears in the back end with nodejs.

AJAX

Asynchronous Javascript and XML (AJAX) is a concept used to enable web pages to exchange data with a server without the user having to refresh or reload the entire page. It allows for applications to send and receive data in the background. The real time updating of a Facebook feed is an example.

Pseudo-Code

Shorthand for what you are planning to code.

C

An older programming language that inspired the development of many later languages. It’s one of the lowest forms of programming language, one step removed from machine language.

Ruby

Ruby is a dynamic, object oriented programming language.

Ruby Gems

Libraries of programming in Ruby that can automate tasks and speed up work.

Frameworks

A collection of libraries used for building web applications. Frameworks save a lot of time, so the developer does not have to reinvent the wheel.

Ruby on Rails

Web framework for creating web applications.

Command Line

The interactive shell where commands can be entered to run the operating system. Useful for navigating the file system.

Version Control

A system whereby each version of a set of code is saved, so that changes can be tracked easily and multiple developers can easily work on the same set of code at the same time via branches. Changes created by separate developers within the same time frame can then be merged together into the master branch via pull requests.

Git

The most widely used language for version control. The largest cloud-based repository for these files is Github.

Open Source

Freely licensed code that can be modified and used by anyone.

CMS

Content Management System (CMS) is an application used to manage the content of a website. Used to make updating a website’s content easier. It enables administrators to make changes efficiently without the need for coding experience.

Database

A database is a collection of information or data that is organized so that it can be easily accessed, managed, and updated.

SQL

Structured Query Language (SQL) is a standardized query language for requesting information from a database.

XML

Extensible Markup Language (XML) allows for the structuring of electronic documents using tags. HTML is a subset of XML.

Schema

Defines a set of rules as to how XML documents should appear.

Script

High level code that is translated into machine runnable instructions using an interpreter program as it is run. Ruby and Javascript are examples. Contrasts with a complied language, which you need to compile ahead of time.

Installations

Why did you need to install Ruby?

The Ruby interpreter we installed allows us to run our code locally on our computer, so that we can ensure it runs correctly by the server.

Why didn’t you need to install HTML, CSS and JavaScript?

These languages are native to the browsers and do not require a compiler to interpret. They all can be written in a simple text editor.

What is RVM and how will it be useful later?

Ruby Version Manager (RVM) and is a command line tool that allows a programmer to work with different versions of Ruby or sets of gems. Some programs or gems may only run with a specific version of Ruby and the RVM lets you switch between them.

What is XCode?

XCode is an Integrated Development Environment (IDE) created by Apple for developing OS X and iOS software.

NOTE: Some of the following answers were contributed to the prep basics repo for Viking Code School by fellow students, a fork of the repo can be found here.

Git

What is Git?

Git is the most popular distributed version control system used for software development. It is used to efficiently maintain and manage code for a project, is free and open source, has an emphasis on speed and data assurance, and allows for multiple workflows which can branch out or merge as needed.

What does SCM stand for?

Source Code Management (SCM) is generally achieved via software that provides coordination, communication and version control services to developers.

What is a VCS?

Version Control Systems (like Git) provide monitored and regulated access to a software repository.

Why is Git useful for a developer?

Git version control system is useful for a developer because it allows the developer the ability to access previous versions of their project, essentially being able to rewind time if they decide that a previous commit is better suited for their needs; be it a current implementation isn’t working out, or to investigate changes to find where any problems may exist.

Why is Git useful for a team of developers?

Using Git allows a team of developers to independently work alongside one another, while having the ability to seamlessly implement those changes to the main project. It also helps situations where independent developers work may contradict each other, by showing changes and allowing the developers to choose which ones they would like to keep.

The Git Basics

How do you create a new Git repository for a project locally?

To create a Git repository locally, you want to navigate to the root directory of your project and type ‘git init’. This will initialize a local repository and load all of the necessary files git will need to track the files in that directory.

How do you create it on Github?

By clicking on the plus symbol (‘+’) of your github user account and selecting NEW REPOSITORY

How do you commit changes?

By typing a git command, git commit -m “Your message”. It will move the files from staged to unmodified. Type “git status” prior to commit. You can see “Changes to be committed:” Type “git status” again after commit, you will see “nothing to commit, working directory clean” The other way is typing a git commit -am “Your message”, which will both stage and commit changes.

What is the difference between staging and committing changes?

Staging is moving files from Modified to Staged by issuing a git command, “git add your_file”, “git add .”, or “git add -A”. Committing is moving files from Staged to Unmodified.

Remotes

What is the difference between committing your changes and pushing them to Github?

Committing your changes will only save them in your local repository. Pushing them to Github will save them to your remote repository.

What is the difference between a “remote” and your local repo?

A remote repo allows you to either pull upstream changes from the master repo, or publish (push) your local commits. A local repo is the environment where we can make local changes and is typically the one on our computer.

How do you add your Github repo as the remote?

git remote add origin URL

URL is copied from my repo in my GitHub account

How do you check the status of your current repo in Git?

git status

How do you see the history of your previous commits (from the command line)?

git log

How can you look through your historical commits on the Github website?

You can look through a history of commits by clicking on the repository name and then clicking the commits.

Branching and Merging

What is a “Merge”?

A merge is when you take the changes you’ve made on one branch, and bring them into another branch to update it with the new changes.

What is a “Pull Request”?

A pull request is when you contribute to someones else’s project, and you let them know that you have made changes that they can look over and possibly implement into their project.

What is “Forking” a repo?

Making a copy of another master repo into your own github account so as to not disturb the master in order to do work on it, make changes and/or corrections and later submit for a pull request.

What is “Cloning” a repo?

Making an identical copy of a Git repo on your local server is “cloning” the repo. This is different from forking, where a copy of a repo is made in Git itself.

What is “Branching”?

Branching is when the developer creates a separate version of their local repository (master branch), allowing changes to be made to that new branch, that won’t affect their master until the developer wishes to merge the changes.

Why would you use a branch?

Using a new branch allows the developer to make experimental changes to their project while having the ability to either discard those changes later, or merge them into their main project. It also allows teams to work off the master branch simultaneously and merge them all later.

How do you create a new branch?

In your terminal type git branch to create a branch. Then type git checkout to start working on your new branch.

You can combine the two commands and just type git checkout -b and that will create and change into your new branch.

How do you merge branches back together?

In order to merge branches back together you should merge the master branch into your-branch

$git checkout your-branch $git merge master

Resolve any conflicts that occur. Move back to your master branch and merge your-branch into the master branch.

$git checkout master $git merge your-branch

You’ll see output indicating any changes that were made

What is a “Merge Conflict” and when will it occur?

A merge conflict occurs during a merge when the same part of some file has changed in the two different branches. For example, let’s say John and Jane are working on a project together. John creates a branch for a feature he is working on. While he is working on this branch, he modifies a file that Jane has also modified on the master branch. When John attempts to merge the master branch into his feature branch, he’ll receive a message that the automatic merge failed and that the conflicts need to be fixed and the changes committed.

How do you resolve a “Merge Conflict”?

In order to solve a Merge Conflict, one needs to open the conflicting file in a text editor and find the conflicting lines of code. One can find the conflict by spotting the merge markers. To resolve this, delete the line you want to get rid of and then delete the merge markers. After deleting the merge markers, you can save the file, add it to the stage, and finally commit it.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s