Simple Definitions of Essential Front-End Accronymns and Lingo

The following terms are some of the most common acronyms and jargon spoken everyday by web developers.

HTML

Hypertext markup language is standardized code that defines the structure of a website. It is a text-based system that organizes content and defines how the content flow and layout will be presented through semantic elements like ordered lists, links, headers and footers. HTML elements are indicated by tags, like <a></a>. Tags also can embed other languages like JavaScript and link to CSS scripts. When we open an HTML file within a browser, the code inside the file is interpreted as a visual (or audible) web page.

CSS

Cascading Style Sheets is a language used for describing how an HTML document should look. It defines the contents’ presentation in terms of layout, colours, and fonts.

Cascading refers to the priority scheme that determines which style rule applies if multiple style rules are targeting a specific element. For instance, the most recently read rule and a more specific target have precedence over the contrary. Multiple rules are combined to produce the final style for an element.

Style sheet refers to a set of rules for how to style elements in a document.

CSS is separated from HTML in order to improve accessibility, reduce repetition in the HTML document ant and enable web pages to share formatting.

JS

JavaScript is an object-oriented programming language that makes a site dynamic, interactive, responsive to user events (like clicking), and manipulates data and webpage content.

JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as types, operators, control structures, and statements.

API

An application programming interface is a messenger interface that takes our request to access information and tells the external data source what data we want to get, add, update or delete, and delivers the response back to us.

RESTful API

Representational State Transfer is type of API. Data exists at a URL called an API endpoint, like http://api.yummly.com/v1. We can interact with the data using standard HTTP methods like GET, POST, PUT and DELETE.

  1. GET requests data (i.e. get details of an existing recipe)

  2. POST creates new data (add new recipe)

  3. PUT updates data (update recipe)

  4. DELETE removes data (remove recipe from db)

More options can be passed along with our request after the URL in the query string. An option is called a query parameter and consists of a key value pair

http://api.yummly.com/v1/api/recipes?_app_id=YOUR_ID&_app_key=YOUR_APP_KEY&q=onion+soup

JSON

JavaScript Object Notation is a JavaScript object formatted for APIs that is comprised of curly braces and key value pairs. A JSON object can include all JS data types (such as strings, numbers, booleans, nested arrays and objects).

{ artist: "Solange",

song: "Cranes in the Sky" }

Asynchronous JavaScript

When JavaScript executes, it makes an AJAX (Asynchronous JavaScript and XML) request to exchange information with the server and doesn't wait for the response while it continues processing. It is asynchronous because even after making multiple AJAX requests, the code interpreter continues executing code during the data return wait time, and data returned does not interrupt the presentation of the page with a refresh.

A promise is a variable that stores an AJAX request. A promise is not the data itself, but a promise that data will eventually return. A handler function deals with the successful or failed response.

DOM

Document Object Model is a convention for representing and interacting with objects in HTML documents. The nodes (aka elements) of every document are organized hierarchically into a tree structure with branches or children nodes. The root of the tree is document.documentElement.

Domains

Devices that make up the internet are set up in large networks of physical infrastructures that communicate with each other via underground/underwater wires and are identified using IP addresses. Like mailing a card, when we are communicating information over the internet, we need to have a return address and mailing address.

Domain: shouldiuseacarousel.com

Internet protocol (IP) addresses are the unique strings of identification numbers that allow devices to communicate. In order to make the numbers easier to memorize we use domain names.

IP: 45.72.141.133

DNS

Domain Name System is used to translate the domain names into IP address numbers.

URL

Uniform Resource Locator is a more specific address than a domain name, providing information like the specific folder and file on the server.

Domain: youtube.com

URL: https://www.youtube.com/watch?v=V5Lreb5U87U

Browser

A software application for getting, presenting and navigating across websites, videos, photos and interactive content on the web. The most commonly used browsers are Chrome, Firefox, Internet Explorer and Safari.

Ensuring a site is cross-browser compatible is a big concern for developers, luckily tools like React, Webpack, Post-CSS and Babel make this easier.

Steps to render a page on a browser:

  1. Browser receives HTML from a server and forms the Document Object Model (DOM)

  2. Styles are loaded and parsed and forms the CSS Object Model (CSSM)

  3. A set of objects, called a rendering tree, which visually represent visible nodes in a DOM structure that combine the DOM and CSSOM. Each of the rendering objects in the tree contains its corresponding DOM object with applied styles.

  4. For each render tree, object’s coordinates are calculated to layout all elements

  5. The tree objects are displayed in the browser through a process called “painting”

  6. The browser “repaints” individual elements whose styles change or reflow the elements when changes affect the document contents, structure, or element position.

Client

A client is an internet-connected device, such as a wifi-connected computer or a data-connected cellphone, as well as the web-accessing software available on those devices, such as the browser.

SERVERS/HOSTING

Hosting refers to the computers that never turn off called servers which store the files comprising a website.

A web hosting service provider provides services needed for a website to be viewed such as diskspace, email accounts, databases, FTP access to upload and download files, a control panel to manage hosting and website, and security features to keep data secure.

HTTP

Hypertext Transfer Protocol

A Protocol is a well known set of rules and standards used to communicate between machines.

Clients and servers communicate by exchanging messages. The browser initiates communication by sending messages called requests and the server handles these requests and responds with messages that are called responses. HTTP is used to fetch hypertext documents (aka links), images, videos or post content to servers.

Servers respond to requests with status codes that are 3 digits long. Codes starting with:

1 — provides info while connection is still in progress

2 — successful connection was made

3 — redirection

4 — client side error: requested resources don’t exist or user is denied access

5 — server side error: failed db connection or server is down

Proxies

The intermediators who relay HTTP messages between browser and server, which can impact performance and perform numerous functions like:

  1. caching

  2. filtering — i.e. Virus scans, parental control

  3. load balancing — allowing multiple servers to serve different requests)

  4. authentication

  5. logging — i.e. storing histories

Cookies

A small piece of data sent by the server and stored in a user’s web browser so a web browser doesn’t have to repeatedly request this data and slow download time. Cookies are mostly used for the purpose of:

  1. Session management: logins (keeping a user logged in), shopping carts, game scores

  2. Personalization: user preferences and settings

  3. Tracking: recording and analyzing user behaviour

Thanks for reading!

I hope this helped solidify any abstract concepts about the development process and help you to explain these terms to other budding developers, interviewers, designers, clients, your internet illiterate relatives etc.