Spectrum of programming codes:

Low level code:

Machinespeak is the basic low level code. It’s long, efficient and really hard for humans to manipulate and
understand. The only advantage to this type of code is that it is infinitely customizable.

High level code:

Higher level code becomes progressively shorter but becomes decreasingly customizable and more descriptive.
High level codes have languages that are less complicated. These are the programming languages used for
various applications.

Medium Level Code:

Many peripherals (mouse, keyboards, printers etc.) used such code and the peripheral “driver” or “pilot” is the
interpreter that does the job of translating this to low level code and feed it to the computer processor.
Binary System:

Operating System:
Any operating system is a very fast interpreter that takes inputs given by humans and converts it into machine
code so that the users are able to communicate with the computer.
The Personal Computer revolution has been made possible due to Operating Systems that allow ease of use and
communication with the computers.
E.g. MS DOS, Mac OS, Windows, Linux etc

Desktop Software:
Software is anything that’s built in or run’s on or within the hardware system is called the software. Desktop is a
term used to coin your system’s OS.
Any application or self-contained script or series of logic that runs within your OS is referred to as desktop
software.
MS and MAC use different machine codes and hence the applications/programs for both these OS are different.
Applications are miniature OS that operate within your primary OS that serve different functions.
The desktop software communicates in a specific high level programming language to its operating system,
which then translates it down to Lachine code and relays this information for the hardware to take action on it.
All these systems operate as layers, with hardware at the bottom, and the OS sits on top of it with the desktop
s/w sitting on top of it and then the various applications on top of the desktop s/w.

Platform:
It is creating a software environment where anyone else can make something that runs within your OS and then
distribute it to other users.
Various OS serve as platforms for third party applications to operate within the environment created, thus
enriching the user experience through this ecosystem of applications.

Internet

TCP/IP: Transmission Control Protocol/Internet Protocol:

This is the protocol that computers use to transfer information to and from servers and other computers. TCP is
a system for breaking up data into packets (which are small batched chunks of information optimized for
transfer and IP is a series of numbers that tells that information where it is going to.
Intranet is a LAN (Local access network) that has multiple terminals connected to each other either directly or
through a hub.
A network of interconnected LANs through an intermediary is what forms the Internet.

The world wide web

(www) is not the same as the internet. The www created a unified system, whereby all computers regardless of
technology could access and transfer the same information. The internet is a network of interconnected devices
and the www is built on top of that and acts as a standardization system for sending and processing information.
One of the ways in which the www standardizes the system is through the HTTP protocol (Hyper Text Transfer
Protocol) which essentially acts as language for coding information so that every computer on the planet can
understand it.

Client/Node/Server:
Client is the user’s computer as it is device in a transaction receiving the information.
A server is the computer that provides the information requisitioned by client (a server ‘serves’ the information)
My machine that the transmitted information crosses through while moving from the server to the client is
called a node.
The internet is made up of these three elements; the clients, servers and nodes.
There are 3 principle types of nodes are: ISP (Internet Service Provider), Modem and Router.

Domain names, IP address and DNS:

IP is essentially a 9 digit string of numbers with periods. The IP address is unique to each computer connected to
the internet and this serves as the mailing address for the www for send or receive information from any device.
The DNS (Domain Name System) is a loose configuration of 8 trillion or so servers that hold the information as to
what IP address is associated with which domain name.
When you purchase a domain, you need to attach it to a web server to host your application or site and in order
to do that you’ll need to update the DNS as to where that information is going to be stored.
ICANN (International Corporation of Associated Names and Numbers) is a non-profit organization that controls
the DNS and decides if a particular domain name is actually available.

Browser
Browsers are like any other software program or application. The www made the information on the internet
standardized and uniform and a browser assists us in accessing this information. A browser performs these 2
basic functions:
1. It can establish a persistent connection with the server where you can access files to view a website.
2. It can translate web programming into a form that your operating system can understand. Hence
functions as an interpreter that can display web files and packages them in a convenient, easy to use
manner.
There are many browsers available for users and every browser has a different way of interpreting web code.
Hence, web developers have stringent quality control procedures to assure that the website loads correctly on
multiple different web browsers.
Opera is the most correct browser, whereas Internet Explorer is the least.
Netscape was the first commercially available browser, though the first browser ever was called Mosaic.
Netscape did 3 things that changed the internet forever:
1. They invented a new language called LIVESCRIPT that allowed websites to have a much richer
functionality. LiveScript later become the JavaScript.
2. They invented the SSL (Secure Sockets Layer). Until then the TCP/IP was really easy to hack. The SSL
encrypted the traffic that passed through the TCP/IP protocol. This was then un-encrypted on the client
machine (HTTPS = Hyper Text Transfer Protocol Secure). This security layer permitted the client to safely
shop online.
3. Netscape launched the browser-wars which lead to the growth of the internet and Microsoft.

Mobile internet
Cellphones can access the internet using a WiFi or the cell service. The cellular/radio towers serve as the routers
to route and organize cellular data and call traffic to the appropriate client and providing cellular connectivity
and hence signal on the handsets in their areas. The phone companies who own these cell towers act as the ISP
in this case. The modem for cellular data is called as the Gateway Server which converts the data into a language
that the cell-phone can understand. This language is called as WAP (Wireless Application Protocol).
WAP is a protocol optimized for phones and for transfer over radio waves.

Anatomy of a website
The clients want some information from the server hence it uses a browser, which is an interpreter of machine
code that gives the output to the user/client in a convenient format; then the client is directed to the required
domain to access the required website.
Code are instructions that a machine can understand and act upon and web code is the way to instruct browsers
on what to show for a website. Consequently a website is actually just a big set of files, normally text files
(.html/.php/.py) stored in a folder.
The homepage of any website is usually denominated as ‘index.html’ and the browser picks up this file to display
the default home page of any website. This file is the main instruction file that tells a browser on what to show.
Information like, where the pictures are, color/size/font text, margins, alignments etc. The website folder also
has a ‘styles.css’ file just instructions on the style of the website. There will also a file for the backend script
‘backend.php’. The HTML and CSS files decide on how the website looks, whereas the PHP file decides on what
the website can do. This file adds functionality to the website. The backed file hence, contains instructions on
what the website does behind the scene and the user can’t see these actions. Usual formats used are
PHP/PY/RB. Besides the HTML, CSS and PHP files, the website folder contains many other files and folders. There
is usually a folder for images etc. Each page in the website is a folder within a folder and each page will normally
contain similar types of files.

Mobile websites and Mobile Applications

Mobile websites are created by programming specific instructions in the index file for smaller display sizes and
adaptive display. This concept relates to Responsive web design. Displaying correctly in multiple screen sizes and
being responsive are two different issues.
In case you access the internet websites using a browser on your phone, the process is exactly the same as that
on the computer (client-browser-router-modem-ISP-server and back) since your mobile phone is actually a
miniaturized computer. The website displayed is however the Mobile Website having customized display for
smaller screens.
But when you use a Mobile Application the process is different since the user will have to open the pre-installed
App on the phone and use the features of the App for desired consequence. In this case the client is not just
pinging a web server to load the website files, but the client already has a lot of these files already stored on the
phone. The equivalence of the INDEX and CSS files are already downloaded on the phone and these are the files
installed on the phone when the user downloads an App. In this case the website files aren’t being accessed and
interpreted by a browser, the files have to written in a different way for the phone so that it’s operating system
can understand and correctly display the front of the App. Different systems require different languages.
Essentially the whole process of using the browser as an interpreter is skipped and is replaced with a package of
information called and App. The backend files for mobile Apps are situated on the server end which is
automatically linked up with the App whenever it is opened. The package (group of files downloaded on the
phone to install the App) there are always instructions to find, access and employ the backend functionality.

Front, Back and stacks

Frontend or backend are used to refer to the programming/code that dictates the broadly either display or
function.
The display, layout and graphics of the website compose its frontend. All these frontend files are displayed on
the clients’ browser and hence the frontend uses the computer’s RAM and the CPU to process the visual
components of the website. Hence, when the user opens too many websites and different web pages, it
noticeably slows down the computer.
Backend files are part of websites and they are used to get functionality in the background of the website. These
backend files run primarily on the server and hence use the server and its processors as the hardware to
complete its tasks. Consequently, the programming of backend code id called as the server-side programming
(such as PHP, Ruby, and Python).
In order for a website to function properly both, the backend and the frontend have to work together in
tandem. In reality the backend programming will constantly fetch or calculate something and deliver it
instantaneously to the browser which then displays the information.
For example while watching a video, if the client presses the pause button, that physical button is controlled by
the frontend code and the action to stop the video from playing is then processed on the backend. The front
end button sends a signal to the backend using backend languages.

Programming Language:
Programming is a way to write instructions for a computer to understand and then run with. Computers
understand a language that is known as machine code (binary).
The set of rules that makes programming syntax understandable by a computer is known as a programming
language. Programming languages are useful only with software/hardware that is designed specifically to
understand and operate with the respective language. All computer languages are different ways of giving the
same set of instructions.

HTML (Hyper Text Markup Language)

HTTP provided the possibility of including Hyperlinks within web documents with links to other documents. The
official word for a “link” on a webpage is actually Hyperlink. Soon programmers felt the need to add further
features to webpages and the technology that was used to create hyperlinks evolved into HTML.
HTML is the simplest web language to learn and is included in every single website. HTML is simply used to
insert objects (text, button, table, link, etc.) onto webpages and then assign attributes to that object.
To define attributes to objects in HTML tags are used that are placed in between <alligator brackets>. There are
about a 142 different tags in HTML that can be added to an object.
New versions of HTML allow the programmer to embed various different files formats onto a webpage such as,
music, videos, games etc.

Pulling Code
HTML can pull code into the page that it’s in (or the document) from other documents on the same web server.
Pulling code is actually the ability to include code within the main code that’s being displayed on the browser.

CSS (Cascading Style Sheets)

It is a sheet that describes the styles of the elements on a webpage.
HTML was made to modify and format text originally however with increasing sophisticated interface on the
webpages CSS was included to all allow more control over the page. After all, HTML was never meant for page
description, it was meant for text description. With CSS the programmer can create a variety of new attributes
that can be applied to the HTML elements on the webpage.
CSS uses “class” which is similar to a ‘tag’ in HTML. (Create a class, name it and give it some attributes of
location on the screen). You wrap your HTML object in this class and any attributes that you give to the class
shall be given to the object wrapped in that class tag.
Normally programmers either create these class rules in the same document as that which contains the text, but
separated on the top or create a separate page and change the extension of this file to “.css” and save it as a
separate CSS file in the folder. You refer the HTML document to this CSS file by pulling code.
This second method is the preferred method and used by all. It has distinct advantages in that the HTML
document remains clean an easy to read and secondly, multiple documents can share the same CSS file. Further,
editing or modifying the entire website can be achieved by changing this single CSS file once.

Nesting:
Cascading refers to the fact that classes can be combined and then displayed in a format that is visually
“cascading” with each class and its attributes indented to provide visual organization to the CSS instructions.
This concept is known as ‘nesting’ which creates the indented staircase look to the webpage style classes and
attributes, hence the word cascading in CSS.
When you make a class inside of a class in CSS, it creates two separate classes. The first (root) CLASS followed by
the SUBCLASS. The subclass applies to the objects included therein but it also inherits the attributes that are
associated with the root class that it is attached to.
This nesting and consequent inheritance of attributes in subclasses leads to a lot of frustration amongst
programmers, since they have to endlessly figure out CSS style sheets trying to figure out which class applies to
which object and what class is cancelling out the other class and what class is inheriting the class that got
cancelled.
Designers and frontend developers need a mastery over CSS to design their websites as they originally intended
them to appear and feel.

JavaScript (JS)
Java is a popular backend language used largely by enterprise teams.
JavaScript is interactivity.
Some examples of this interactivity are; clicking buttons, pages loading when you scroll, clicking a button and
having it change the page without refreshing it, etc.
JavaScript can show or hide certain parts of a webpage on the circumstances, it can also change font sizes,
create pop-ups, slide-ins, it can load something on to a page only when the user needs it, it can even animate
elements on the webpage.
In the early days (1990s), websites were composed of only a handful of objects such as, text, images, tables,
graphs and sometimes forms. And the forms posed a major challenge to the user experience since, say for
example, a client chose a username while filling a form which has already been taken by somebody else, there
was no real live solution to let the user know that the chosen username had already been taken.
JavaScript was originally created by Netscape and it was originally named as Mocha. During the browser-wars
when the browser wanted to do mare and websites became fancy, JavaScript was the tool to make the user
experience more interesting and enjoyable. It also helped sites run faster. There are many tools and more are
regularly added to make JS faster and more powerful, and the term for this phenomenon is ‘JavaScript
Exhaustion’.

Backend Languages:
This is the real engine of the website or application. It takes around 15 hours of time to build the front end but
80+ hours to build the backend of an application.
Backend languages are considered to be more complex and more capable at the same time. They are designed
for manipulating information, making complex calculations and building functionality of any web application.

Python
Though it is a high level language, Python is known to be versatile and also the fact that it is especially easy to
learn as compared to other backend languages. Some other languages such as PHP and Ruby can only be made
to manipulate web pages and work with servers. But on the other hand, python can be used to write web apps,
desktop apps, data analysis, visualization, numeric al computing, web scraping, and even in scientific computing
applications. Hence it is considered as a general purpose programming language.
Python is called an ‘expressive language’ because the syntax of its code closely resembles that of English
language. Hence it’s widely considered to be the best first language to learn. Most notably Google uses Python,
besides YouTube, Dropbox and even NASA.
Since it is a high level language it is efficient and easy to code but, a programmer can be less precise with it. Also
as it is a general purpose language, and web browsers, desktop applications or server code all these uses
requires the user to install a special interpreter to interpret the code (web/ desktop/ server) for you.

PHP
PHP stands for PHP Hypertext Preprocessor, the acronym PHP includes its own acronym in its acronym. This was
an inside joke amongst the original team that developed PHP; to name it in recursive (something is self-
referential, like a name capsuling its own name in itself).
PHP is one of the most common languages used for backend and also has a significant user community. It is
considered to be easy to learn, but due to its age it has become a bit tedious. PHP Is more the most part open-
source and not a commercialized language. For the most part PHP is flexible, well-supported and easy to use.
Facebook uses PHP, so does WordPress (Word press is responsible for 22% of the entire internet).

Ruby
It’s a popular and fast, new and trendy language but the size of the developer community and has a glut of
inexperience developers in the market. It was designed for speed and inside the language system itself it
includes a lot of automation and intuitive changes that save time for the developer. Hence, you can create a
relatively complex application in a very short period of time. Etsy, Air BnB, Shopify, Groupon etc. use Ruby.

Tech Stack
A Technology stack- All applications work ON the system and not IN the system. Since the OS is a gigantic
interpreter for the computer and as a result any program can function only within the space that the OS has
created for it. The way that we think of it is to relate to it as a physical stack and hence we stay ON and not IN.
This stack paradigm is one the way thinking about the technology when any programming languages or set of
technologies work together and enable each other, they can be referred to as a stack.
Web Stack: For example, to build a website (or an app etc.) a series of programming languages and technologies
are used to get the job done. A web-stack will refer exactly to this series of technologies and inform about the
combination of technologies that this website uses.
Tech Stack: Tech stack is a phrase used for both; web and mobile apps and not just to a simple website.
Every tech stack is broken down into four different categories with interchangeable parts. A Common example is
the LAMP stack, wherein L is the Linux OS, A is Apache server language, M stands for MySQL which manages the
database used to store information; P stands for PHP that operates all the backend functions of the website.
Facebook is built on LAMP tech stack. LAMP is changed to WAMP if the OS in the stack is Windows and similarly
MAMP for Macintosh OS.

Common Stacks for Web

For the web, we need to make for choices on technology platforms to be used to compile a stack:
 Operating system
 Server System
 Database
 Backend Language
There is no mention of the frontend language used in a stack since everyone uses the same technology for the
frontend, which is HTML, CSS and JavaScript.

LAMP: Linux, Apache, MySQL, PHP. This is a classic stack and unless there are specific needs that need to be
addressed, this is the default stack used.
If a company big and has concerns about security and compliance (finance, healthcare, education tech etc.) the
specific stack that they might opt for is WINS: Windows Server, IIS Server, .NET, Microsoft SQL Server.
This stack is good for web security and IP protection for big enterprises, however it’s slow to use, expensive and
employees have to be trained on how to use this stack.
For a small startup that has a product which needs to be cutting edge, loads extremely fast and focuses on the
best user experience will typically use the MEAN stack (MongoDB, Express.js, Angular.js and Node.js).

5 Basics of Programming
Algorithms:
They present a way of thinking and can take any form that you want (Graphical/ mathematical/ Notes/
Flowcharts, pseudo-code etc.).
An algorithm is a set of rules to be followed when solving a problem.

Terminal block which indicates the beginning or the end of the

program

Process block which represents a set of operations

Decision block which shows a condition that determines which

path the program will take

Input/ Output block showing inputs or results

Syntax and coding environment:

It is a set of rules or the programming grammar for a programming language and normally differs for different
programming languages. There is an autocomplete in almost all code editors which is very helpful.
A program that takes your code and builds it into a new program is called an IDE – Integrated development
environment and is composed of code editor, builder and a debugger.
Writing ‘pretty’ code, keep the coding environment organized and easy to read and understand. Name your
variables such that they make sense and are logical. Write comments in code to leave a trace of the sequence,
progress, logic and functionality of the code you write and the variables you employ.
Leave space in certain parts of the code to separate different sections of your code.

Functions:
There are function names and function parameters. If you want to call a function, you type its name and
parameters in parenthesis. [return_type function_name(parameter list)]
For e.g. Fibonacci (7) = 13; max(10, 20, 5) = 20

We don’t see the functions body in code. Functions help you look at the big picture and solve the main problem.
Once you write a function that works for any given parameter, you don’t have to worry about that chunk of
code; you just call the function and give the parameter that you want.
This makes for much shorter code that’s easier to read which helps you focus on the big picture. It also avoids
duplicating code.
Functions encapsulate tasks hence you don’t have to worry about the function body.
They let you reuse code which makes your code shorter and easier to read. They enable easier share ability and
allow you to break a program into more manageable pieces.

There are user-created functions and well as built-in functions.

Objects
An object is a particular instance of a class, where the object could be a combination of variables, functions and
data structures.

OOP (Object Oriented Programming Languages)

Many objects in the code, resemble objects in real life that belongs to a particular a class,this is the idea behind
OOP languages.

Fundamental concepts of OOP:

1. Inheritance enables a new class to take the properties of an existing class.
The existence of base classes and derived classes makes the managing relationships between classes a
lot easier. (For eg if ‘Animal’ is the base class, then, ‘Carnivorous’ and ‘herbivorous’ are derived classes)
2. Polymorphism enables you to read a finer function in a derived class.
3. Abstraction is the concept of using functions without being concerned about the mechanisms they use
to extract the desired result or action. Hiding unnecessary parts of your code and separating it into
functions to focus on the main problem on hand.
4. Encapsulation is the concept of having private and public properties and functions of an object.

Pointers and References:

A pointer is a variable that holds the memory address of another variable.
A reference variable is another name for an already existing variable

Debugging:
It is the process of finding and resolving defects, bugs or problems within a program that prevent it from
working correctly.

Wolf-Fence Algorithm:
You can split your program into a number of parts and run each part separately and figure out which half of the
code has a bug. Split that particular half into 2 parts again to verify which part has the bug and so forth until you
identify the bug.

Non-linear code execution

If your program as structures such as ‘while’ and ‘for’ loops, verify if the structure executes exactly the number
of times that you expect it to.
Instructions like ‘go to’ can get stuck in infinite loops.
Anatomy of a Website:
The client that is usually a computer tells the browser to fetch some information that resides on a server. A
browser is just an interpreter that can interpret code in a way that we can understand.

Core Concepts of Coding

IDE
Programmers use a text editor known as an IDE (Integrated Development Environment)
You can use a text editor from SublimeText.com for writing code.

Syntax
Every programming language has its own rules and its own vocabulary. Syntax can be categorized as strict
syntax, expressive syntax etc. Older languages use strict syntax wherein even one small error in coding will lead
to the failure of the program to run, whereas Python has expressive syntax, which is much more pardoning to
small syntax errors.
Variables
All languages use the concept of a variable. It is a short form way of storing information and then using it later to
manipulate the instructional code. Assigning values to variables also reduces the volume of code, since instead
of writing the entire equation each time you can just call upon the variable. Also updating or changing the code
becomes easier, since all you need to do is assign a new value to the variable and it automatically updates
everywhere.

Printing
Printing is a common command used in coding that takes the entire code and outputs that onto a screen
whenever you run the code.
Programs are just text documents and they don’t do anything until a browser that knows how to read the
instructions and respond accordingly opens them. So the print command will ferry things from the browser’s
memory to the browser’s output, which is basically what the user actually sees.
This is a concept in backend languages, whereas in a frontend language like HTML, the browser basically shows
everything on the screen and you don’t require the use of print. If a frontend language needs to make a
calculation and show the result of that calculation on the screen, it’ll have to use a backend language to make
those calculations behind the scene. Naturally, a backend code does not just display itself and hence you’ve to
tell it to do so using the print command.

Commenting
Well-documented code helps the programmer and other programmers understand what the code is referring
to, when is it going to get used, what gets displayed and what isn’t, what part of the application is using this
calculation, etc.?? This is why we have a concept called Commenting.
Comments are texts that don’t follow any programing syntax to explain what the programmer is doing; it
provides additional information about the code.
But if we write comments just as the other code, the program will not understand what that text means and will
try to run it as codes, consequently, showing a bunch of errors. To avoid this from happening, we have to
‘comment it out’. This means that all comments must be preceded by a particular symbol depending on the
language that informs the browser that this is not code.
In Python you insert a # in front of the comment, which is the same in Ruby as well. In PHP a comment is
inserted in between goal posts as such: /* comment */. This is more efficient in a sense since the comment is
encapsulated in between the ‘/’ and as such there is no possibility of accidentally mixing it up with your code,
like for example if the preceding or following code is accidentally too close to, or joined to the comment # the
browser might try to read it as code and throw up errors.

Strings
Strings have to deal with text as well, text that the computer is not supposed to read as code. When you have to
save text as a variable that can be called later, print to screen or manipulated in other ways. The inherent
problem is that text often gets confused with code, especially in higher level languages such as Python.
That’s why you use Strings that are typically stored in a variable as such: string = “this is text”.
But in case you have to write a quotation inside of a string variable the program gets confused because of the
quotation marks in between the quotation marks. For eg:
String = “Gandhi once said “All men are born equal” which holds true today as well!”
Now the browser will read the first and last (green) parts as strings encapsulated in quotation marks and the
middle (blue) part of the phrase to be code.

Escape Command
Languages handle this issue through a concept known as “Escape command”. With an escape variable you can
essentially tell the computer that this is a string but this one thing that is typed within is actually code and you
should run that.
Say if you want to write a quote over in two lines, one below the other, you just can’t write the first half of the
in the first line and then change line to complete the rest of it in the same string. Since you won’t have closed
the double quotations (”) at the end of the line as the string hasn’t ended yet. To overcome this, you can use the
/n command in Python which lets it know that this is an escape command to skip line and the text after the /n
command is on a different line.
String = ““Gandhi once said /n “All men are born equal” /n which holds true today as well!”
And so, if I command now print = string, it’ll show the three parts of the text on 3 different lines on the screen.

Array
In programming it means a series of pieces of information that are all formatted the same and saved in one
bundle. For example a series of pieces of information like numbers uniquely or strings, or variables alone. You
don’t mix any of those together. Being able to save information like that saves you a lot of time in certain
circumstances, like for example making a separate variable for every single piece of information.
If you want a query to randomly pick just one of the values from an array, you use something known as a
Pointer. A pointer is essentially like a theoretical arrow inside the array that says what position each item is in.

Frameworks, IDEs and Libraries

A programming framework is a predefined structure that tries to speed up development by giving pre-made
elements you can reuse and taking out the tedious task of creating structure and redundant tasks and
redundant systems.
Programmers can use frameworks to build upon by changing existing code or adding code of their own to get
the specific desired output from a piece of code.
Programming is an instructions list for a computer or an OS, or a browser to do something. Frameworks are pre-
made code (programming instructions) that attempts to remove/reduce the effort and speed up the process of
making standard parts in this code that have already been written by others earlier.
All websites or web apps have some kind of similar structure and frameworks help us by setting up that folder
structure and linking everything together for you, so that you can spend time working on the parts of the app
that are actually unique and different.
There exist a variety of different frameworks to cater to each specific programming language.
PHP – Zend Framework, CakePHP, Laravel, CodeIgniter etc.
Python – Django, Flask, Pyramid etc.

Front End Frameworks

On the browser side (frontend) HTML, CSS and JS together determine the look and the interactivity of the
website. A framework can provide the developer with a template website that’s setup in the most convenient
way possible.

CSS SHEET
In most cases this framework will give the developer a CSS sheet that contains a pre-made “grid” system.

Grid System (Layouts)

In frontend development the grid system means making a style sheet that allows you to easily put images,
buttons, text and any other object you want to out on your website into easy to use and see vertical columns.

UI Pack/ UI Kit (Buttons and objects)

UI stand for User Interface, which defines which objects the user sees on the screen. A UI kit will provide the
developer with a predesigned set of button-designs, fonts, sliders, headers and any other common component.
It can also give graphic designs for more specific things such as profile pictures, frames for images, charts, tables
and other specific details.

Interaction Snippets (Pieces of action code)

A frontend pack can also contain a list of pre-used JavaScript commands that are very common and used
routinely. Including things like submitting forms, pop-ups, sliders, search boxes, error messages etc.
Backend Frameworks
They can give you a structure. That means that it’ll force you to program your application in a specific way that
fits with the structure that they’ve given to you.
Frameworks often force the developer in to a certain Paradigm of Programming. Hence, in case you want to
migrate to another framework for your website, it’ll require a complete overhaul.

File and Folder Structure

Every time you make a website and you setup the server side files, you will be setting them up in quite a
standardized manner. There are ways that are accepted by the developer community on how to set these up. A
backend framework provides you with this stencil to setup the backend file and folder structure. For example
there’s always a separate folder for CSS, for images, APIs, models, for templates or themes etc.

Pre-made Code for Functions

A backend framework also provides a lot of pre-made code for functions that are regularly used in website
development. A framework gives a lot of code and though you might not use all of that, you’ll use the common
ones that are used across the vast majority of sites.

Downloading files

Optimizing Images
Saving and recalling them

Setting up APIs
For pulling information from other websites like Facebook or Twitter

Setting up a payment terminal

Backend Micro-Frameworks
There are full frameworks or smaller frameworks called as micro-frameworks. Full frameworks will provide you
with tons and tons of pre-made functions, support, file structure etc. for a wide variety of use cases. So much so
that sometimes when you install a full framework, you have issues with maintaining all of that information and
just keeping track of where everything is, what you need to use and what is not needed.
It can be really complicated to learn a framework and that’s why some frameworks are actually smaller and
focus only on the core functions that are important and not on the extras that you light possibly need. Micro-
frameworks are easier to learn, maintain and manage. They also help the website/app perform better since
browsers don’t have to load as much code.

What is an IDE – Integrated Development Environment

IDEs are programs that programmers can use to make their applications inside of. IDEs provide spell check for
code, making sure that the syntax used is correct. They might also have an auto-complete feature to help coders
write the same line of code over and over again. They usually help developers organize and structure the files
before they upload them to a web server. These might even help the developer keep track of which document is
new or outdated, thus handling version control. But the most important thing that an IDE does is that it creates
an automatic development environment.
Development environment is a setup on your computer, or on a web server space where you can write code for
your program, test it, and then automatically see how it runs for real as if it were uploaded to a live website.
Even if a programmer doesn’t have a development environment setup, he can still write programs, since coding
is just text on a text document, but there is no way of getting quick feedback, verification of correctness,
whether it is functioning in the intended way etc.
The alternative is to setup a tool to test the application offline and an IDE is a great example of that closed
feedback system.
Examples of IDEs used: Low level language - Visual Studio by Microsoft; App for iOS – Xcode, Adobe
Dreamweaver too is an IDE, Java – Net Beans, PHP – PHP Storm (It actually allows installing frameworks into the
IDE).
IDE can help writing code easier by giving seamless feedback additionally it can also help share files and code
between team members, thus used by companies within bigger teams.
Ides are expensive, and add extra code to a project that might not be useless or entirely necessary (code bloat),
finally, it takes time and resources to learn how to actually use an IDE.

Libraries
Libraries, frameworks and IDEs can often share similar functions and often libraries are installed at the same
time as the other two.
Frameworks are pre-made architecture for an app with a bunch of cool add-ons.
At the same time there was a smaller movement to solve the problem of rewriting redundant code again and
again by programmers. The solution was to instead take lots and lots of chunks of pre-made commands and
package them together for easy access. A library of assorted pre-made bits of code as per my requirement saves
a lot of time as compared to writing code from scratch. JQuery is one of the most popular and famous libraries.
There are a multitude of different libraries that provide for doing anything and everything in JavaScript. There
are even search engines just dedicated to finding JavaScript libraries (handlebars, mustache, jquery, unicycle,
fixiebike).
Backend languages have libraries as well. Examples are: Rubygem, Scrapy, formtastic etc.
Frameworks and IDEs are quite adept at using libraries and are usually designed to support them.

Example: If you have to write a Résumé, you normally don’t start from scratch, but refer to a pre-existing
template and then edit, remove and add chunks of information on the template to make your personalized
Résumé. This Template can be compared to a Framework.
The text editor (or MS Word) on which you open the template to make the appropriate changes can be
compared to an IDE.
A Library may be compared to a list of key words and competencies that can be included into your Résumé to
make you profile appropriate for a particular job description.

Application Programming Interface (API)

One app can borrow information from another or an app may ask another app to do something. For example
you can post a message on Facebook and then auto post the same on Twitter or Instagram. This happens
through the concept of APIs.
The developer might have a lot of valuable code files and a lot of valuable user data information within the App
and within the App’s community. But at the same time, Facebook has the same thing and they think that all the
features that they’ve built and all the users that they’ve collected are also very valuable. If you ask Facebook for
that information, they can’t just manually give it over since that’ll take too long and they can’t open up their
code base to you, since that’ll put them in a very vulnerable situation as you might either steal information of
plant a bug therein. The solution to this conundrum is an API, also known as an API Layer because APIs exist
almost outside of the main code base of an application.
An API is like a mini application (a program) that runs on top of a larger application and it is used to facilitate the
transfer of information to external apps that ask for them.
APIs can automatically handle transfers and fulfilling of information requests, thus saving time and resources for
both the apps. It can also put limits on what the other apps can ask for and simply won’t respond if they ask for
the wrong thing or if they ask for too much of something they can give them denial responses. Lastly, they can
give detailed information on the best way to access the information available, such that it doesn’t make a mess
or slow down the system of the host.
If you have an app that requires information on a particular user, the program asks for information on that
particular user from the API, which then digs up that information and furnishes it. This saves a lot of time and
also provides access to information that other apps might have and you light not.
You can have an analogy of an API to a waiter.
Now a day while building apps, people are building less of the app themselves and more of asking other Apps’
APIs to do the work and give them the information they need. Also we are now seeing businesses being created
where API is not an afterthought but it’s the actual business model. You can effectively create a commonly used
and useful chunk of an application, let people connect to it and then charge them for using it. Crunchbase is an
example of an API that was built to give people information about startups.
So it’s a lot less of “let’s build all of this” and whole lot more of “let’s build a little bit and borrow the rest from
other APIs”.

Content Management Systems (CMS)

This is a technology used for the web. Writers post their writing through them, web developers spend much
time customizing them and software engineers install them and build plug-ins for them.
A CMS is an application that helps you as a website developer manage its content. Here content refers to
anything that the developer/owner creates and puts online. Blogs, posts, images, graphs, PDFs, guides,
instructional videos etc. are typical examples of content. The originator of the content has to be the site owner
or a site contributor, since any piece of content has some sort of value and can be treated as an asset, hence
vague comments or likes/dislikes don’t count as content.