Web dev acronyms - ftw or wtf?
This article is a reference and a brief, high-level overview of an assortment of acronyms that you may come across in the web development wild. If, like me, you have the memory of a sieve then I hope that this article might come in handy for reminding you what they really mean. This is by no means an exhaustive list and I’m sure there are a many more out there, so if you have any suggestions please let me know ☺️.
Happy reading!
CRUD
Create Read Update Delete
CRUD refers to four common operations of persistent storage, i.e. operations available to perform on data in some sort of database.
A super creative example is that of a to-do list. Each to-do should have methods available for the creation, reading (essentially fetching), updating and deletion of said to-do.
OS
Operating System
The OS of a machine refers to the software installed which enables the user to communicate with the device - it is the layer between the user and the device’s hardware components. Examples include Apple’s macOS, Microsoft’s Windows and Linux which is an open-source OS.
GUI
Graphical User Interface
A GUI enables a user to communicate with a device visually. Elements of a GUI include icons, menus and a mouse to click/drag/scroll on screen. Generally speaking they are more intuitive and easier to work with than a CLI (coming up next), although less powerful in their operating power.
CLI
Command Line Interface
A CLI is a type of program which accepts text inputs in order to execute functions on an operating system. Nowadays a CLI is commonly used to install software, configure computers or access functionality not accessible via a GUI. Back in the early days of computers, users could only interact using a keyboard so a CLI was their only option. There are different variations depending on the OS, so for a deeper dive plus a bit more background information I recommend reading this article.
NPM & NPX
Node Package Manager & Node Package eXecute
NPM is an online repository of open source Node projects. It is also a CLI tool with a variety of commands available which enable developers to install these packages in order to use them in their own projects.
As well as also being a CLI tool, NPX is a Node package runner; it allows developers to execute a package from the NPM registry without installing the package, so is useful for a single time use package. As of version 5.2.0, it comes pre-bundled with NPM.
HTML
HyperText Markup Language
HTML is the standard markup language used on the web. It requires its own .html file type. It is made up of a collection of elements which are also referred to as tags. HTML was designed to be very descriptive, so examples of elements include <h1></h1> which represents a heading 1 and <div></div> which represents a divider element.
HTML not only describes the structure of a web page, it also instructs the browser how to display the data on the page with basic styling. Different browsers might have slightly different styling implementation. Since the inception of the web, there have been many different versions of HTML, with the latest standard being HTML5.
XML
Extensible Markup Language
XML is, like HTML, both a type of markup language and a file type. Its format is text based, and it is predominantly used for storing information (such as documents, data, invoices and more) and sharing said information between programs, people and computers. It is software and hardware independent. One main difference between HTML and XML is that the main purpose of XML is simply to store/transport data and does not focus on the visual displaying of data as much.
JSX
JavaScript XML
JSX is a syntax extension of JavaScript which allows you to write HTML-looking code whilst also harnessing the power of JavaScript.
If you’ve ever worked with React, you will most likely have come across JSX. Although it is possible to use React without JSX, more often than not you will see it in React projects.
Given React’s focus on the separation of concerns as opposed to separation of technologies, rather than writing markup and logic in separate files JSX enables the developer to combine logic and markup into separate components.
CMS
Content Management System
Exactly as it sounds, a CMS is some sort of system developed to manage content. The content is typically stored in a database and the presentational layer then displays the stored data. This enables multiple users to edit data and publish any changes in a relatively pain-free process. Common examples include software such as WordPress, Wix and Drupal.
IAM
Identity Access Management
IAM is a collection of systems, policies and technologies which allow you to control who has access to digital resources and thus reduce the risk of data breaches. I recently read a really great analogy for IAM in this article - I recommend reading it if you need some more clarification!
CI/CD
Continuous Integration, Continuous Delivery and Deployment
CI/CD refers to a set of tools/a method used for the development of software. It prioritises automation and monitoring of each stage of the software lifecycle in order to make the deployment process as pain-free as possible. Specifically, this could include practices like automated testing once a developer has merged their code to a shared branch and then automatically deployment of the changes once all tests have been passed. The complete process of all the different practices is referred to as a CI/CD pipeline.
COVE & PLSRD
Closed Over Variable Environment & Persistent Lexically Scoped Referenced Data
Both of these acronyms are synonyms for closure. Closure is a behavioural feature of JavaScript which allows a function to store a reference to the data that was live in its own local memory as well as its parent function’s memory when said function was created, if said function was returned from its parent function.
In simple terms, the returned function “remembers” the data available in the environment in which it was created after it has been returned by its parent.
There are countless resources out there which explain this concept in detail, but here’s one I found especially helpful: read it here. Frontend Masters also has some great video courses on the topic, in particular JS Hard Parts by Will Sentance, so if that is available to you it’s a great option to gain a deeper understanding.
API
Application Programming Interface
An API acts as a sort of middleman which allows for communication between different software.
A well-known analogy to describe APIs is that of a restaurant. You have a customer (representing the frontend) who wants to order a meal. In order to do so, this customer needs to relay their order to the chefs (representing the backend) in the kitchen. In comes the waiting staff (representing the API) who relay the customer’s order to the chefs and then bring the meal to the customer.
A common API that you might have come across while using JavaScript is .fetch(), which allows you to fetch data (known as resources) from the web via the browser. Without this communication functionality, the browser and the server wouldn’t know the other one existed, so .fetch() is acting as the link between the two.
For more in depth information along with some interesting public APIs available out there, have a read of this.
AJAX
Asynchronous JavaScript and XML
AJAX is a terms that refers to a collection of techniques and technologies which allow the developer to create interactive websites and applications that can request data from a server without blocking other functionality on the web page. It relies on XML/JSON, JavaScript and XMLHttpRequest to retrieve data from a server.
REST
Representational State Transfer
REST is an architectural paradigm for communication between web-based systems and/or software (such as APIs). In order to be considered RESTful systems must comply with certain principals, with a particular focus on separation between the client and the server. RESTful communication is relatively easy to use and implements HTTP requests and endpoints/paths to manage the transfer of data.
HTTP(S)
HyperText Transfer Protocol (Secure)
As the name suggests, HTTP is an application-layer protocol (i.e. a set of rules defining optimal conduct and procedures) for transferring hypermedia documents (such as HTML documents) over the web. Originally it was designed for transferring resources between browsers and servers, but it is possible to use it for other purposes.
When a browser sends a request to a server for some data, it sends along an HTTP header which contains information about the request, such as an HTTP verb (GET, PUT, POST, DELETE are common but others exist) to describe the operation type. The server sends back a response header containing information about the response, such as the response data type, size and data itself amongst other things.
HTTPS is an extension of HTTP and utilises encryption to protect data being sent over the web.
OOP
Object Oriented Programming
OOP is a programming paradigm, meaning an architectural style for writing code. It focuses on separating code into - you guessed it - objects in order to encapsulate data and functionality. This can make it easier to identify where issues are coming from during any debugging.
TCP
Transmission Control Protocol
Yet another protocol, TCP defines how data should be formatted in order to be sent between a server and a client. To be TCP compliant, before any data is transferred a connection between the data-requesting and the data-serving parties must be established and the requested data must be sent in a data packet (if the data requested is large, it may need to be broken down into multiple, smaller packets).
IP (address)
Internet Protocol (address)
IP refers to the set of rules which govern how data is sent over the internet/local network.
An IP address is a unique number given to every device that connects to any network which uses IP in order for these devices to be able to communicate with each other (i.e. send and receive data). In simple terms they describe where the data request is coming from or where to send requested data to, much like a normal home address. IP addresses are assigned to devices by ICCAN (Internet Corporation for Assigned Names and Numbers - two acronyms in one!).
DOM
Document Object Model
The DOM is a cross-platform interface (API) that breaks down an HTML or XML document into a tree structure, with each node representing an element of the document. It does this in order to allow programmes to access, interact with and manipulate parts of the page.
XHR
XML HTTP Request
Another API, XHR is an object provided by the browser and consists of methods which allow for data transfer between the browser and a web server. It falls under the umbrella of AJAX.
ASCII
American Standard Code for Information Interchange
ASCII was developed to enable different makes and models of electronic devices (including computers) to communicate with each other by standardising the representation of characters (letters, numbers, punctuation, etc).
It is a character-encoding system that assigns a unique 8-bit (byte) number to each different character.
One major drawback is the fact that ASCII only supports certain characters (numbers 0-9, upper case and lower case letters A-Z as well as some punctuation characters). This meant that languages not based on the Latin alphabet were not included in the system. In order to provide standardisation to a wider and more inclusive character set, Unicode was introduced in 1991 which is a more expansive character-encoding system supporting different alphabets.
JSON
JavaScript Object Notation
JSON refers to a specific format for storing data. It is syntactically very similar to JavaScript objects as it stores data using key-value pairs, curly braces and commas for separation. It’s often used when sending/receiving data over the web.
SSL & TSL
Secure Socket Layer & Transfer Socket Layer
Both of these acronyms refer to a technology which is responsible for encrypting data sent over the internet. They utilise encryption algorithms to achieve this. TSL is just a more updated and secure version of SSL.
CSS / SASS / SCSS
Cascading Style Sheets / Syntactically Awesome Style Sheets / Sassy Cascading Style Sheets
No doubt you’ll have come across this before if you’ve ever stepped foot in the frontend world. CSS is a style sheet language (which is written and stored in a .css file) that specifies how a markup document should be displayed. It encompasses everything from the basics such as colours, size and font to more complex styling options such as animations.
SASS and SCSS can be thought of as more “advanced” CSS. They are both CSS pre-processer languages which combine all the features of CSS whilst adding some extra behaviour, such as the ability to use variables and nesting. SASS/SCSS files are then compiled in normal CSS that the browser can understand.
Top comments (14)
informative
Hi Pippa,
A good initial glossary but it might be better in alphabetical order. Here are 16 more you might want to add.
A11y: Abbreviation of Accessibility, comprised of the initial and final letter of the word separated by 11 other letters.
ARIA: Accessible Rich Internet Applications
BEM: Block-Element-Modifier, CSS methodology
C4: Design modelling system comprising of Context, Container, Component and Code elements.
CJS: Common JS modules
CUBE: Composition Utility Block Exception, CSS methodology
ECMA: Originally the acronym of European Computer Manufactures Association, but now a contraction of ECMA International, the standards body behind ECMAScript etc.
ES: Contraction of ECMAScript, the specification (ECMA-262) behind JavaScript. Prefix for products such as ESLint, ESBuild and ESM.
ESM: ECMAScript modules
I18n: Abbreviation of Internationalisation, comprised of the initial and final letter of the word separated by 17 other letters.
JS: Contraction of JavaScript
L10n: Abbreviation of Localisation, comprised of the initial and final letter of the word separated by 10 other letters.
OWASP: Open Worldwide Application Security Project, an online community that produces freely-available articles, methodologies, documentation, tools, and technologies in the field of web application security.
RegExp: Contraction of Regular Expression, a pattern encoding and matching technique.
TS: Contraction of TypeScript. An extension to JS that provides data type checking.
WCAG: Web Content Accessibility Guidelines
Regards, Tracy
Don't forget URL.
Wow thanks so much for all of those! I'll have to make some revisions to the article. I did consider alphabetical order but I used some acronyms in the descriptions of other acronyms, so wanted to make sure I didn't use an acronym before explaining it (I hope that makes sense!). I'll take another look and see if I can come up with a better order :)
Good point. Good post.
Very comprehensive list! Don't forget LESS too, which is similar to SCSS.
On a more humorous note, I had a colleague once who wrote a message to tell us he was Working From Home one day, except he used WTF by accident instead :)
"Why The Face?" ;)
(that's a dated Modern Family dad joke)
I used to love Modern Family but don't remember that one. Had to look it up - great joke!
Thank you :) I think I started with half the acronyms initially, the more I wrote, the more I kept coming across! Good point about LESS as well.
Oops...it happens to the best of us!
To be honest, I don't think anyone knows it all no matter how long they've been at it. There were a few on your list that I've never come across and I've been doing this for over 10 years.
The truly important thing is to be able to look them up when needed, and this list is certainly going to help in that respect!
Completely agree, and happy you found it helpful!
If we're talking XML, it's worth mentioning the XML-based format of SVG - Scalable Vector Graphics (and further expand it with SMIL - Synchronized Multimedia Intergration Language - which adds animation to SVG). Not sure just how relevant both are in today's webdev, but personally I love them deeply.
Thanks for the suggestion! Can't believe I didn't think of SVG (and to be completely honest I hadn't heard of SMIL so I'll look into that one), so I'll have to do some additions to the list :)
Nice recap! Should you do some around IT business-related acronyms I'd love to read it😍
Maybe it's just me but there are tones of them out there and some make us struggle thinking of the meaning 😂
Thanks! Don't worry it's not just you - I'm forever having to search what they all stand for!