ag

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.

  • DevTools
    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).
  • URL
    Same thing as a web address, for example ”https://antongunnarsson.com“.
  • Copy
    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.
  • CSS
    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-in-JS
    A category of tools that allow you to write CSS inside of your JavaScript. Benefits include easier ways to applying styling based on state and reducing scoping issues. Examples: styled-components, emotion.
  • CSS modules
    A way to write CSS where it’s scoped locally by default. Solves similar issues as CSS-in-JS. Read more.
  • HTML
    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 <tagstart>content</tagend>.
  • 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.
  • Wrapping
    The act of adding something around something. For example, “You need to wrap the content variable in curly brackets” would mean to go from content to {content}.
  • Nesting
  • Semantics (eg semantic HTML)
  • User Agent
    A string indicating what web browser that is used.
  • JavaScript
  • TypeScript
  • CMS
    Content Management System. A system that helps users manage the content of a website, for example Wordpress or Contentful.
  • SEO
    Search Engine Optimization. Practices for optimizing a websites ranking in search engines such as Google.
  • CRUD
    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.
  • DOM
    Document Object Model.
  • Virtual DOM
  • UI
    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 red might indicate a dangerous action while the color green could 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.
  • Git
    The most popular version control system, despite it being very easy to screw up with it. My greatest tip: Oh Shit, Git?!.
  • GitHub.com
    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.
  • Backend
  • Frontend
    What the user interacts with. In the context of web sites it’s 99% of the time HTML, CSS and JavaScript.
  • Full stack
    A very _ term used to describe working with both the Frontend and Backend.
  • 404
    Error code for page not found
  • Bug
    An error, a flaw, a fault. Something that doesn’t work. The worlds first computer bug is reported to have been an actual bug.
  • Debugging
    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.”
  • Cache
  • Cookies
  • API
  • REST
  • GraphQL
  • DevOps
  • Responsive design
  • Sitemap
    A document used by search engine bots to find all the pages on your site.
  • Wireframe
    A very rough design, usually just outlines and aproximated position of elements.
  • Framework
  • Library
  • React
    One of the largest JavaScript frameworks. Created by Facebook. Introduced the idea of declarative components to the masses. Uses JSX.
  • JSX
  • Vue
    • SFC
  • Angular
  • Svelte
  • Web components
  • State management
  • Minification
  • MVP
  • IDE
  • WebStorm
  • Text editor
  • VS Code
  • Atom
  • Sublime
  • Agile / Scrum
  • The Cloud
  • Azure
  • AWS
  • Google Cloud Platform
  • CLI
  • NodeJS
  • StackOverflow
  • EcmaScript (ES5/ES6/ES7..)
  • Package manager
    • NPM
    • Yarn
  • Webpack
  • Linting
    • Prettier
    • ESLint
  • Static site generators (SSG)
  • Media query

WebMentions

What's this?
Nothing's here yet! Tweet about this post to show up here.