Front-end terminology🌱 This post is just budding and will be updated.
A very unsorted and incomplete list of terminology, phrases and products you might run into when working with front-end development. Don’t use this as a list of things to study, but rather as list to skim through from time to time to try and pick up something. Again, you don’t have to know all of this.
Short for developer tools. Usually refers to the developer tools of browsers like Firefox or Chrome, but could also refer to devtool extensions for frameworks (React, Vue).
Same thing as a web address, for example ”https://antongunnarsson.com“.
The text on a web page. Originally from copywriting but now often used as a generic word for all texts.
- White space
The empty space between elements on a page, although not necessarily white.
- Accessibility (a11y)
Best practices for keeping a website accessible for people with any kind of disability. The acronym comes from the fact that there is 11 letters between a and y in accessibility.
- Internationalization (i18n)
Best practices for enabling a site to be adapted to any culture (language etc). The acronym comes from the fact that there is 18 letters between i and n in internationalization.
- Localization (l10n)
The act of adapting a site to a specific culture. For example translating texts, formatting numbers etc. The acronym comes from the fact that there is 10 letters between l and n in localization.
- Client side
Code run on the client, for example in a users browser.
- Server side
Code run on a server.
- Environment variable
Variables set on the enviroment in which the “app” is deployed.
Language for controlling how web pages are displayed.
- CSS preprocessor
A way to write CSS but with more features, for example nesting, by utilizing a different syntax. Needs a build step to be transformed into CSS. Examples: https://sass-lang.com/, http://lesscss.org/.
- CSS modules
A way to write CSS where it’s scoped locally by default. Solves similar issues as CSS-in-JS. Read more.
HyperText Markup Language. The standard way to specify a websites structure.
- HTML Tag
A tag specifies the start and end of an HTML element. For example
- Meta tag
Meta tags are special HTML tags that are used to convey metadata information that is used by things like search engines, website embeds and other.
The act of adding something around something. For example, “You need to wrap the content variable in curly brackets” would mean to go from
- Semantics (eg semantic HTML)
- User Agent
A string indicating what web browser that is used.
Content Management System. A system that helps users manage the content of a website, for example Wordpress or Contentful.
Search Engine Optimization. Practices for optimizing a websites ranking in search engines such as Google.
Short for Create, Read, Update, Delete. Used to describe the basic operations of persistent storage. Sometimes also refers to basic websites where all you can do is these actions.
Document Object Model.
- Virtual DOM
User Interface. All the things you see on a web page.
- UX (User Experience)
How users interact with a web site but also how the web site affects user. For example the color
redmight indicate a dangerous action while the color
greencould indicate something positive.
- CTA (Call To Action)
Part of a user interface that encourages the user to take some action, usually a button in a primary color.
- CI/CD (Continuous Integration / Continuous Delivery)
- Version Control
The act of saving multiple versions of things you work on. For example copying your school projects and naming then “project.docx”, “project-v2.docx”, “project-v2-final.docx”. In programming you usually use a tool such as Git to handle this for you.
The most popular version control system, despite it being very easy to screw up with it. My greatest tip: Oh Shit, Git?!.
The most popular platform for hosting Git repositories and the de-facto standard for open source. Other popular platforms is GitLab and Bitbucket.
- “Above the fold”
Content shown on the screen when intially loading a webpage. The fold referencing the bottom of the screen. The term originates from newspapers where content on the top half of a folded newspaper was used to grab peoples attention.
- “Hard coded”
Values typed directly into the code, and hence not dynamic.
- Full stack
A very _ term used to describe working with both the Frontend and Backend.
Error code for page not found
An error, a flaw, a fault. Something that doesn’t work. The worlds first computer bug is reported to have been an actual bug.
Removing bugs from a program. Usually time is mostly spent investigating what the bug actually is, rather than writing code to fix it. Or as someone once said: “Debugging is like being the detective in a crime story where you are also the murderer.”
- Responsive design
A document used by search engine bots to find all the pages on your site.
A very rough design, usually just outlines and aproximated position of elements.
- Web components
- State management
- Text editor
- VS Code
- Agile / Scrum
- The Cloud
- Google Cloud Platform
- EcmaScript (ES5/ES6/ES7..)
- Package manager
- Static site generators (SSG)
Last update: September 25, 2020