Update illustration paths

CONTRIBUTING.md

@@ -34,8 +34,7 @@ In order to create a new snippet, you should follow the steps below:
 - Snippet types must be one of the following: `story`, `list`, `tip`, `cheatsheet` or `question`.
 - Snippet tags must be comma-separated. You are allowed to specify a single language tag (e.g. `react` or `javascript`), preferably as the first tag.
 - Snippets must have their `firstSeen` dates formatted using [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601).
-- Snippet authors must be added in JSON format as seen in `blog_data/blog_authors.json`.
-- Snippet covers must be added inside the `blog_images` directory and have the exact same name as the snippet filename. Snippet covers must be Unsplash images of appropriate theme and content and their links must be provided as part of the PR, so that they can be added to the appropriate collection.
+- Snippet authors must be added in JSON format as seen in `blog_data/blog_authors.json`. Snippet covers must be Unsplash images of appropriate theme and content and their links must be provided as part of the PR, so that they can be added to the appropriate collection.
 - Snippet excerpts must be a very short description of the snippet's content, up to 180 characters in length. The excerpt must contain some of the main keywords and a general intro to the snippet, as it will be used for social sharing and previewing the snippet itself.
 - Snippets that are of the `list` type must be written as such, check previously submitted snippets for more details.
 - Snippet code and examples must be enclosed in appropriate, language-tagged blocks, be short and use modern techniques and features. Also make sure to test your code before submitting. Always use soft tabs (2 spaces), never hard tabs.

blog_posts/4-javascript-array-methods.md

@@ -32,7 +32,7 @@ const isOdd = x => x % 2 === 1;
 arr.filter(isOdd); // [1, 3]
 ```
 
-![JavaScript Array Methods](./blog_images/js-array-methods.png)
+![JavaScript Array Methods](./illustrations/js-array-methods.png)
 
 ### Array.prototype.reduce()
 

blog_posts/big-o-cheatsheet.md

@@ -12,7 +12,7 @@ firstSeen: 2023-01-08T05:00:00-04:00
 
 Big-O notation, represents an algorithm's **worst-case complexity**. It uses algebraic terms to describe the complexity of an algorithm, allowing you to measure its efficiency and performance. Below you can find a chart that illustrates Big-O complexity:
 
-![Big-O Complexity Chart](./blog_images/big-o-complexity.png)
+![Big-O Complexity Chart](./illustrations/big-o-complexity.png)
 
 Simply put, `O(1)` stands for **constant time complexity**, which is the most efficient, while `O(n!)` stands for **factorial time complexity**, which is the least efficient. The `n` in the complexity represents the size of the input, so `O(n)` means that the algorithm's time complexity will grow linearly with the size of the input.
 

blog_posts/css-nested-border-radius.md

@@ -11,7 +11,7 @@ firstSeen: 2022-04-03T05:00:00-04:00
 
 Nesting elements with rounded borders can look very wrong if not done correctly. Luckily, there's a simple math trick to make it look right. All you need to do is **calculate the border radius of one of the elements and the distance between them**. The border radius of the outer element should be equal to the sum of the border radius of the inner element and the distance between the two elements. This can be mathematically expressed as `innerRadius + distance = outerRadius` or more tersely `R1 + D = R2`.
 
-![Nested border radius formula](./blog_images/border-radius.png)
+![Nested border radius formula](./illustrations/border-radius.png)
 
 Let's take a look at a simple CSS example. Say we want to style two nested boxes with rounded borders. The outer box has a `border-radius` of `24px` and a `padding` of `8px`. Using the previous formula, we can deduce that the inner box should have a `border-radius` of `16px`.
 

blog_posts/flexbox-cheatsheet.md

@@ -54,7 +54,7 @@ lastUpdated: 2021-06-12T19:30:41+03:00
   - `space-evenly`: distribute items evenly, ensuring equal space between any two items
   - `stretch`: distribute items evenly, stretching auto-sized items to fit the container
 
-![Diagram of Flexbox properties](./blog_images/flexbox-diagram.png)
+![Diagram of Flexbox properties](./illustrations/flexbox-diagram.png)
 
 ### Items
 

blog_posts/git-fast-forward.md

@@ -11,7 +11,7 @@ firstSeen: 2021-07-15T05:00:00-04:00
 
 Merging a branch is one of the most common operations when working with Git. Depending on your team and projects you've been a part of, you might have heard of or even used Git's **fast-forward** mode when merging. Fast-forward mode is the default in Git, however GitHub will essentially override this by default and create a merge commit instead.
 
-![Git fast forward explained](./blog_images/git-fast-forward.png)
+![Git fast forward explained](./illustrations/git-fast-forward.png)
 
 ### Fast-forward merge
 

blog_posts/javascript-variable-scope.md

@@ -20,7 +20,7 @@ JavaScript provides two ways to define a variable (`var` and `let`) and one way
 
 It is generally preferred to use `let` and `const` to avoid confusion when it comes to scoping. However, it is important to note that `var` can be a useful JavaScript feature when used in the correct circumstances.
 
-![Visualization of JavaScript variable scope](./blog_images/js-variable-scope.png)
+![Visualization of JavaScript variable scope](./illustrations/js-variable-scope.png)
 
 ### Scope
 

blog_posts/js-async-defer.md

@@ -11,7 +11,7 @@ firstSeen: 2022-09-04T05:00:00-04:00
 
 When it comes to loading JavaScript files, there are a few different options available. Understanding exactly how scripts are loaded and executed is crucial for website performance, as well as for the overall quality of the user experience. Let's take a look at how the `<script>` tag works and how certain attributes affect its behavior.
 
-![Script loading visualization](./blog_images/async-defer.png)
+![Script loading visualization](./illustrations/async-defer.png)
 
 ### No attributes
 

blog_posts/js-data-structures-binary-search-tree.md

@@ -13,7 +13,7 @@ firstSeen: 2021-08-31T05:00:00-04:00
 
 A binary search tree is a data structure consisting of a set of ordered linked nodes that represent a hierarchical tree structure. Each node is linked to others via parent-children relationship. Any given node can have at most two children (left and right). The first node in the binary search tree is the root, whereas nodes without any children are the leaves. The binary search tree is organized in such a way that for any given node, all nodes in its left subtree have a key less than itself and all nodes in its right subtree have a key greater than itself.
 
-![JavaScript Binary Search Tree visualization](./blog_images/ds-binary-search-tree.png)
+![JavaScript Binary Search Tree visualization](./illustrations/ds-binary-search-tree.png)
 
 Each node in a binary search tree data structure must have the following properties:
 

blog_posts/js-data-structures-binary-tree.md

@@ -13,7 +13,7 @@ firstSeen: 2021-08-26T05:00:00-04:00
 
 A binary tree is a data structure consisting of a set of linked nodes that represent a hierarchical tree structure. Each node is linked to others via parent-children relationship. Any given node can have at most two children (left and right). The first node in the binary tree is the root, whereas nodes without any children are the leaves.
 
-![JavaScript Binary Tree visualization](./blog_images/ds-binary-tree.png)
+![JavaScript Binary Tree visualization](./illustrations/ds-binary-tree.png)
 
 Each node in a binary tree data structure must have the following properties:
 

blog_posts/js-data-structures-doubly-linked-list.md

@@ -13,7 +13,7 @@ firstSeen: 2021-08-12T05:00:00-04:00
 
 A doubly linked list is a linear data structure that represents a collection of elements, where each element points both to the next and the previous one. The first element in the doubly linked list is the head and the last element is the tail.
 
-![JavaScript Doubly Linked List visualization](./blog_images/ds-doubly-linked-list.png)
+![JavaScript Doubly Linked List visualization](./illustrations/ds-doubly-linked-list.png)
 
 Each element of a doubly linked list data structure must have the following properties:
 

blog_posts/js-data-structures-graph.md

@@ -13,7 +13,7 @@ firstSeen: 2021-08-17T05:00:00-04:00
 
 A graph is a data structure consisting of a set of nodes or vertices and a set of edges that represent connections between those nodes. Graphs can be directed or undirected, while their edges can be assigned numeric weights.
 
-![JavaScript Graph visualization](./blog_images/ds-graph.png)
+![JavaScript Graph visualization](./illustrations/ds-graph.png)
 
 Each node in a graph data structure must have the following properties:
 

blog_posts/js-data-structures-linked-list.md

@@ -13,7 +13,7 @@ firstSeen: 2021-08-08T05:00:00-04:00
 
 A linked list is a linear data structure that represents a collection of elements, where each element points to the next one. The first element in the linked list is the head and the last element is the tail.
 
-![JavaScript Linked List visualization](./blog_images/ds-linked-list.png)
+![JavaScript Linked List visualization](./illustrations/ds-linked-list.png)
 
 Each element of a linked list data structure must have the following properties:
 

blog_posts/js-data-structures-queue.md

@@ -13,7 +13,7 @@ firstSeen: 2021-07-29T05:00:00-04:00
 
 A queue is a linear data structure that behaves like a real-world queue. It follows a first in, first out (FIFO) order of operations, similar to its real-world counterpart. This means that new items are added to the end of the queue, whereas items are removed from the start of the queue.
 
-![JavaScript Queue visualization](./blog_images/ds-queue.png)
+![JavaScript Queue visualization](./illustrations/ds-queue.png)
 
 The main operations of a queue data structure are:
 

blog_posts/js-data-structures-stack.md

@@ -13,7 +13,7 @@ firstSeen: 2021-08-03T05:00:00-04:00
 
 A stack is a linear data structure that behaves like a real-world stack of items. It follows a last in, first out (LIFO) order of operations, similar to its real-world counterpart. This means that new items are added to the top of the stack and items are removed from the top of the stack as well.
 
-![JavaScript Stack visualization](./blog_images/ds-stack.png)
+![JavaScript Stack visualization](./illustrations/ds-stack.png)
 
 The main operations of a stack data structure are:
 

blog_posts/js-data-structures-tree.md

@@ -13,7 +13,7 @@ firstSeen: 2021-08-22T05:00:00-04:00
 
 A tree is a data structure consisting of a set of linked nodes that represent a hierarchical tree structure. Each node is linked to others via parent-children relationship. The first node in the tree is the root, whereas nodes without any children are the leaves.
 
-![JavaScript Tree visualization](./blog_images/ds-tree.png)
+![JavaScript Tree visualization](./illustrations/ds-tree.png)
 
 Each node in a tree data structure must have the following properties:
 

blog_posts/nodejs-chrome-debugging.md

@@ -18,4 +18,4 @@ Node.js can be debugged using Chrome Developer Tools since `v6.3.0`. Here's a qu
 4. Click `Open dedicated DevTools for Node` to open a new window connected to your Node.js instance.
 5. Use the Developer Tools to debug your Node.js application!
 
-![about:inspect page](./blog_images/chrome-debug-node.png)
+![about:inspect page](./illustrations/chrome-debug-node.png)

blog_posts/typographic-scale-basics.md

@@ -21,7 +21,7 @@ While this gives us a pretty solid setup, some elements might not look properly
 
 Putting it all together, we should end up with a typographic scale that looks similar to this:
 
-![Typographic scale example](./blog_images/typography-example.png)
+![Typographic scale example](./illustrations/typography-example.png)
 
 ```css
 :root {