Prelude

I started to study Front-End back in 2019. Immediately I faced the fact that in order to learn fast I need to summaries and structure my knowledge. Moreover I looked for an opportunity to recall quickly an information I already learnt (e.g. list of array iteration methods: forEach, map, filter, etc.), so that later, when I was solving a task (let's say CodeWars kata), I could easily pick up proper method for specific problem.

I came to the idea of creating my personal compendium. The main ideas on which it was built were conciseness and consistency. Compared to classic "googling" or checking specification, you don't waste time on searching the one sentence within article, which will explain you everything. Due to conciseness compendium only offers you key information, due to consistency you immediately know at which line to look.

So I felt comfortable programming with this compendium, and even after finding my first job, I continued enriching it with methods I face during my work, as well as with programming fundamentals & theory of web technologies, which are crucial for deep understanding of World Wide Web. Except of practical benefit, it felt rather motivating to observe outline of my web knowledge. I could also clearly see which gaps I have.

Today this compendium can be called a real-life documentation containing 176 articles, which explain terms needed for real-life projects and highlight nuances, which can significantly reduce the time spent on finding a bug reason.

I decided to share this compendium, since I guess it might be helpful for the community of web engineers under the following scenarios:

  • beginner - studying Front-End & structuring knowledge;
  • advanced - recall of features and technologies, which were not used for some time;
  • advanced in another field - quick introduction. e.g. Back-End developer, who needs to improve UI to match new server functionality.


Besides compendium is very suitable for preparing for the technical interview. From the both sides ;)

WiP

Currently this compendium is work in progress, since articles should be rewritten to markdown.

Articles content also updates and expands on every day basis.

Terms of Use

All the articles are written, structured and adapted by me, according to the style guide of this compendium. Sources of raw information are official specifications, generic documentations, such as MDN and JavaScript.info, or specific technology documentations, which will be referenced at the end of articles.

All compendium materials are forbidden to be republished or copied. Visitors are allowed to use code examples in their personal and commercial projects.

Style Guide

conciseness & consistency - key characteristics of this compendium

  • they are implemented by following a specific style
  • for illustrative introduction this guide is already structured according to that style

Conciseness

one line - one entity or idea is explained in one line

  • if explanation is long enough that is wraps to the second line, it is shortened
  • since most text is not connected like in paragraph, sentences are lowercased
  • besides there are no dots at the end of line

please note that lines do not wrap on my 15" laptop. for smaller screens indentation is provided as workaround

Consistency

Headings

title - is used at the top of each article

heading - is used to divide article into sections

subheading - is used to divide article section into subsections

Structure

term - one line of compendium tries to explain one term or focus on one term. e.g. object method

tabulated block - information related to the term is written under the term with tabulation

  • tabulated block might contain:
  • independent theses, providing additional details
  • example
  • another term, which is strongly dependent on the main one
  • list of options (like right here)

list of actions - some instructions are described as a list. each action at separate line

  • e.g. setup

Emphasis

highlight - each term is highlighted in color

underline - links are underlined

highlight & underline - all headings are highlighted in color and underlined

bold - some important information is highlighted in bold

monospace - one-line code examples are highlighted using monospace font

code block - multi-line code examples use syntax highlight and are located at separate block

note - some sentences are not related directly to one specific term. they just exist in separate block

Abbreviations

e.g. - means "for example"

  • stands for "exempli gratia"

i.e. - means "in other words"

  • stands for "id est"
To Compendium