Acceptance testing: Testing that aims to ensure that the software meets the requirements initially specified.

Agile: A team-based software development methodology designed to embrace change and speed.

Angular: A JavaScript framework, most usually written in TypeScript.

Application programming interface (API): An API is a messaging service between computer systems, allowing a computer to make requests and receive responses.

Aspect ratio: The ratio of the width of an image to its height, separated by a colon. A square image would have an aspect ratio of 1:1. The numbers are always as low as possible, in the same way as fractions are reduced. For example, if an image was 1440px wide and 960px tall, it would have an aspect ratio of 3:2.

Assembly language: Assembly languages are processor specific and closely resemble instructions to the CPU. They are not very user friendly, so higher-level languages were developed. See Javidx9 (2017) for lots more information.

Asynchronous JavaScript and XML (AJAX): AJAX allows a JavaScript program to communicate with a server without having to submit a form. One way to think of it is that the browser takes multiple sips of data from the server rather than huge gulps.

Attribute: While some HTML elements don’t require attributes, some, such as img and source, would be useless without them. They either act as a modifier to the attribute or provide functionality.

Back-end: For front-end developers, the back-end is most usually the server and any programs or databases running there.

Backlog: All the work yet to be completed and not yet scheduled. In Agile, all tasks start in the backlog before being completed.

Base64: An encoding algorithm. It uses a base-64 numbering system rather than the decimal (base-10) system you will be more familiar with. It is most often used to convert binary data, such as images, into text but it can also be used to convert other types of data.

Boolean: A Boolean value is either true or false (0 or 1). There are other value types, such as numbers and strings, and these can be tested using Boolean tests. For instance, 1 = = = 1 would result in true whereas 1 = = = 2 would result in false. In JavaScript, there are the concepts of ‘truthy’ and ‘falsy’, as it is a dynamically typed language. This can trip up developers, but Craig Buckler (2017) has an excellent resource with further information.

Bundler: A bundler bundles multiple JavaScript files into one. It ensures that any programming dependencies are loaded and available before they are required by other parts of the program.

Business logic: Business logic deals with how data can be created, read, updated and deleted (often shortened to CRUD), usually in a database on the back-end.

Call: The process of making an API request.

Cascading Style Sheets (CSS): The language used to style HTML markup.

Chaining: Chaining in CSS is the way in which multiple classes are added to an element to change its style. Chaining in JavaScript is used in jQuery. You can incorporate it into your own code and it is accomplished by returning the object after each method call. Gregory Schier (2013) goes into far greater depth on his blog.

Child: The nested nature of HTML means that all elements are the children of the main html element. Most other elements can also have children, but some cannot. Reading the document type definition will tell you which can, and also what their accepted children are.

Class: In CSS, a class is an attribute and identifier of one or more elements, as opposed to an id attribute: there should only ever be one element with a given id. In JavaScript, a class is a way of providing a structure and interface for creating and interacting with objects (for more information see Mozilla, 2020a).

Client: For front-end developers the client is usually the browser. Front-end developers work client-side.

Compiler: A program which converts one programming language into a lower-level programming language, eventually down to machine code.

Content delivery network (CDN): A CDN is a geographically distributed set of servers that host and serve identical content. Because they are spread around the world, the closest (and thus fastest) serves the resource to the client.

CSS object model (CSSOM): The CSSOM is a representation of all the CSS on a web page. It can be manipulated, in the same way as the DOM can be manipulated, by JavaScript.

Database abstraction layer (DBAL or DAL): A DBAL provides a uniform interface for programs to use when communicating with any (usually SQL-based) database.

Dependencies: JavaScript is likely the most used programming language in the world. Sometimes we will find functions and libraries which we can make use of within our own work, so we add them as dependencies. This means we don’t have to reinvent the wheel if someone has already written what we need.

Dependency source tree: This lists the dependencies for a project so that we don’t need to save all our dependencies when we make backups of our work. It also means we can download only our work and recreate the application later by downloading the specified versions of the listed dependencies.

Document object model (DOM): The DOM is a representation of all the HTML markup on a web page. It can be manipulated or wholly created by JavaScript.

ECMAScript: ECMAScript is the evolving standard which JavaScript conforms to.

Element: In HTML an element is a component of the document. It can have one, many or no attributes. It will have at least one parent (if it isn’t the html element) and can have one, many or no children within it.

Engine: A browser engine converts HTML markup into a DOM. There is also a JavaScript engine, which executes the JavaScript code in the page. Search engines are used to retrieve information from diverse sources.

ES6: Otherwise known as ECMAScript 2015 or JavaScript 6, this is an updated ECMAScript specification. The latest version at the time of writing is ES2020.

Evergreen browser: Browsers which automatically update and upgrade to the latest version.

Expression: An expression is something which can be evaluated into a Boolean – a test, if you will.

Extending: In CSS, this is the process of extending a class with extra styling.

Extensible Markup Language (XML): XML is a markup language similar to HTML and with roots in SGML. It was designed to store and transport data.

Feature phone: Generally a phone with only a numerical input and limited multimedia or internet capabilities. Sometimes also known as a ‘dumb phone’.

Framework: JavaScript frameworks dictate how the application should be structured.

Front-end: The part of the website with which the user interacts, made up of HTML, which can be decorated with CSS, and enhanced with JavaScript.

Graphical user interface (GUI): Pronounced ‘gooey’, it is the user interface with which we interact with phones and computers, with clickable icons representing programs or actions.

Handler: An event handler is a JavaScript function which is called when an event occurs.

Hello World: A ‘Hello World’ is a program which displays ‘Hello World’ and illustrates how a programming language works. The Hello World Collection (http://helloworldcollection.de) is a collection of ‘Hello World’ programs in many computer programming languages.

HyperText Markup Language (HTML): Tim Berners-Lee, inspired by Charles Goldfarb’s SGML, developed HTML to display data on the internet.

Interpreter: An interpreter executes programs without them having been compiled into a lower-level programming language.

Java Applet: A Java Applet is a program written in Java which can be embedded within a web page.

JavaScript (JS): An interpreted programming language.

JavaScript Object Notation (JSON): A human-readable file format used for storing data made up of key–value pairs.

JavaScript tagging: A way of collecting information about what a user does on a website or application.

JavaScript XML (JSX): A way of representing HTML within JavaScript, primarily used in React.

JSFiddle: An online integrated development environment for HTML, CSS and JavaScript.

Library: A collection of functions, often all associated with one area, such as numbers or dates.

Machine code: Assembly language uses words so that humans don’t need to interact with processors directly. An assembler takes assembly language and converts it to machine code (see Sims, 2016, for further explanation).

Markup: Notation added to text to give extra information about how the text should be displayed.

Meetup: An informal gathering of people to discuss a specified subject or subjects.

Minimal viable product (MVP): A version of a product which does the bare essentials required. It is used to garner data about whether an investment of effort is justified.

Model–view–controller (MVC): A design pattern with three distinct areas: the data (model), the user interface (view), and the event controllers and associated programming logic (controller).

Model–view–viewmodel (MVVM): Similar to MVC but with a slightly different architecture. Rather than having a controller, there is instead a viewmodel. The difference is discussed further in Chapter 2.

Module bundler: A program which bundles modules (see Bundler above, as they are effectively the same thing).

Module loader: Similar to module bundlers, these are JavaScript programs that retrieve and execute JavaScript modules in an order which does not cause errors.

MySQL: A relational database management system which is open source and very popular.

Native modules: Native modules remove the need for module loaders and module bundlers by providing a facility for JavaScript programs to import functionality from other JavaScript files without an external library. See Buckler (2018) for an excellent article on this topic.

Native web components: Native web components allow developers to create their own HTML elements. At present, it is only possible to do so by using a suite of different technologies.

Networking layer: The part of a browser that enables it to retrieve data from servers.

Non-functional requirement: This describes what a system should do without regard to how it does it.

NoSQL: A database which doesn’t use SQL as a way of retrieving data and doesn’t store its data in normalised tables.

Object-oriented programming (OOP): A way of programming which aggregates closely associated functions and values in an object.

Package manager: A program which automates the process of installing dependencies.

Parent: All elements apart from the html element in an HTML document have a parent.

PHP: A popular open-source server-side programming language. Created in 1994, it has evolved significantly since.

Polyfill: A plugin or piece of code that provides the technology that a browser should provide but perhaps, due to the browser not following modern standards, does not.

Post-processor: In this context, post-processors take CSS and ensure the style declarations work across multiple browsers by adding multiple prefixes for different browsers.

Pre-processor: These take styling written in one of the stylesheet languages, such as SASS, and convert it into CSS.

Pull request: A request for changed code to be merged into a codebase.

Quality assurance (QA): A means of measuring the success of the software and ensuring its quality.

React: A JavaScript framework.

Render: In this instance, the act of drawing the DOM to the browser with its associated styling from the CSSOM.

Root element: The ultimate parent of elements in an HTML document. This is the html element.

Scrum (Agile): A way for Agile teams to tackle problems while working to produce a finished product.

Selector: Selectors are used to find elements which need to be styled. There are many, many ways this can be accomplished but it is usually done by finding the relevant class or id attribute of an element.

Semantics: Concerned with meaning.

Server log: A record made by the server of all requests made to it.

Serverless infrastructure: Serverless infrastructure and architecture abstract the programming stack of server-side infrastructure – that is to say, the infrastructure is still there, but it is provided by a third party. Rather than paying for the provision of infrastructure, users instead pay to use the infrastructure.

Server-side infrastructure: The programming stack installed on a server. It allows the server not only to serve web pages and applications but also to store and process data.

Single-page application (SPA): In an SPA, the current page you are visiting has been entirely generated by JavaScript and navigation is mocked. Instead of the browser retrieving a new HTML document, JavaScript rewrites the current page with data retrieved from the server or the state management pattern.

Spiral: A methodology which entails a repeated process of planning, risk analysis, engineering and evaluation, designed to mitigate risks. Initially requirements are small, and during each iteration further requirements are added.

Sprint (Agile): A sprint is a period in which a feature is developed and released to a client. The duration of sprints varies, but I usually work in fortnight-long sprints.

SQL injection attack: The process whereby attackers attempt to subvert systems by placing malicious code in form inputs. Once executed, these might damage systems or lead to private data becoming public.

Standard Generalized Markup Language (SGML): An ISO standard markup language which inspired both HTML and XML. It was developed to display documents in different formats, such as on the internet or in print. Versions of HTML prior to HTML5 could still be parsed as SGML.

Stand-up (Agile): A meeting, usually held every morning, in which a team discusses progress, plans and impediments. They are called stand-ups because traditionally attendees had to remain standing and this encouraged terse reports.

State management pattern: A state management pattern allows the state of your application to be shared among all components of that application.

Story (Agile): A description of what will be achieved as a result of some work carried out in a sprint. A sprint can have many stories.

Structured Query Language (SQL): A language used to create, read, update and delete information within a relational database. There are many different types of SQL, which is why sometimes a database abstraction layer is used.

Style sheet: An external file containing CSS referenced within the head of an HTML document. The file is downloaded by the browser and used as part of the process of generating the CSSOM.

Toolchain: A set of other programs used in development. For instance, CSS and JavaScript toolchains generate CSS and JavaScript for consumption by browsers, perhaps from languages other than CSS or JavaScript.

Transpilation: The process of converting one programming language into another. Most often in front-end development we talk of transpiling TypeScript into JavaScript.

Use case: In most instances, front-end developers use the term ‘use case’ as a substitute for ‘situation’. Different situations or use cases require different approaches.

User: The user of the application we are developing and the focus of the front-end developer.

User eXperience (UX): The experience of a user while interacting with the web page or application.

User interface (UI): The front-end of a web page or application.

Version control system: A way of ensuring changes to a codebase are tracked and can be reversed.

Viewport: The browser window. This is most often in portrait orientation on mobile devices and landscape on desktops or laptops.

Vue: A JavaScript framework.

Waterfall: A methodology which emphasises a logical approach to development. It has been criticised for being rigid and ignoring feedback during the development process.

Web template engine: Most often a server-side technology. It abstracts the generation of HTML and can mean that repetitive blocks of code can be stored in a separate file and inserted by the server-side application when pages are requested by the browser.

What you see is what you get (WYSIWYG): An editor in which the final product closely resembles that which the editor sees while editing.