Add bold text to certain articles
This commit is contained in:
Angelos Chalaris
@ -10,13 +10,13 @@ firstSeen: 2023-01-08T05:00:00-04:00
|
||||
|
||||
### Definition
|
||||
|
||||
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 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:
|
||||
|
||||
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
Apart from Big-O notation, there are other notations that are used to describe the complexity of an algorithm, such as `Ω` (Omega) and `Θ` (Theta). `Ω` describes the best-case complexity of an algorithm, while `Θ` describes the average-case complexity of an algorithm.
|
||||
Apart from Big-O notation, there are other notations that are used to describe the complexity of an algorithm, such as `Ω` (Omega) and `Θ` (Theta). `Ω` describes the **best-case complexity** of an algorithm, while `Θ` describes the **average-case complexity** of an algorithm.
|
||||
|
||||
### Common Data Structure operations
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ excerpt: Ensure your HTML documents have a proper favicon by including these lin
|
||||
firstSeen: 2023-01-24T05:00:00-04:00
|
||||
---
|
||||
|
||||
Over the years, I've seen many different and often conflicting guidelines about favicons and which tags are essential. Nowadays, I think you can get away with a very minimal set of meta tags and tailor them to your needs as you go. Here's my recommendation for the bare minimum you should include in your `<head>` element:
|
||||
Over the years, I've seen many different and often conflicting guidelines about favicons and which tags are essential. Nowadays, I think you can get away with a very **minimal set of meta tags** and tailor them to your needs as you go. Here's my recommendation for the bare minimum you should include in your `<head>` element:
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
||||
@ -20,7 +20,7 @@ The `<head>` element of an HTML document is where you can include links to exter
|
||||
</head>
|
||||
```
|
||||
|
||||
- The `canonical` link element tells search engines which URL is the canonical version of the page. This helps prevent duplicate content issues and ensures that the correct page is indexed.
|
||||
- The `sitemap` link element tells search engines where to find the sitemap for the website. Sitemaps are XML files that contain a list of all the pages on the website and their metadata. They are used by search engines to index the website and display it in search results.
|
||||
- The `alternate` link element tells search engines where to find the RSS feed for the website. RSS feeds are XML files that contain a list of the most recent posts on the website. They are used by search engines to display the website's content in search results, as well as by RSS readers to display the website's content in a more convenient format.
|
||||
- The `search` link element is used by browsers to display a search box in the browser's address bar. This allows users to search the website directly from the address bar, instead of having to navigate to the search page.
|
||||
- The `canonical` link element tells search engines which URL is the **canonical version** of the page. This helps prevent duplicate content issues and ensures that the correct page is indexed.
|
||||
- The `sitemap` link element tells search engines where to find the **sitemap** for the website. Sitemaps are XML files that contain a list of all the pages on the website and their metadata. They are used by search engines to index the website and display it in search results.
|
||||
- The `alternate` link element tells search engines where to find the **RSS feed** for the website. RSS feeds are XML files that contain a list of the most recent posts on the website. They are used by search engines to display the website's content in search results, as well as by RSS readers to display the website's content in a more convenient format.
|
||||
- The `search` link element is used by browsers to display a **search box** in the browser's address bar. This allows users to search the website directly from the address bar, instead of having to navigate to the search page.
|
||||
|
||||
@ -26,7 +26,7 @@ Social media play an important role to any content's success. To ensure your con
|
||||
</head>
|
||||
```
|
||||
|
||||
The above snippet contains OpenGraph and Twitter tags. OpenGraph tags are used by Facebook and other social media platforms to display a preview of the page when it's shared. Similarly, Twitter uses Twitter tags for the same information. Here's a breakdown of each one:
|
||||
The above snippet contains OpenGraph and Twitter tags. **OpenGraph tags** are used by Facebook and other social media platforms to display a preview of the page when it's shared. Similarly, Twitter uses **Twitter tags** for the same information. Here's a breakdown of each one:
|
||||
|
||||
- The `og:title` and `twitter:title` meta tags are used to display the page's title in the preview.
|
||||
- The `og:description` and `twitter:description` meta tags are used to display a short description of the page in the preview.
|
||||
|
||||
@ -22,7 +22,7 @@ More often than not, this sort of metadata can grow in complexity with time. How
|
||||
</head>
|
||||
```
|
||||
|
||||
- The `charset` meta tag tells the browser what character encoding to use when rendering the document.
|
||||
- The `viewport` meta tag tells the browser how to render the page on mobile devices.
|
||||
- The `title` element is used by search engines to display the page's title in search results.
|
||||
- The `description` meta tag is used by search engines to display a short description of the page in search results.
|
||||
- The `charset` meta tag tells the browser what **character encoding** to use when rendering the document.
|
||||
- The `viewport` meta tag tells the browser how to render the page on **mobile devices**.
|
||||
- The `title` element is used by search engines to display the page's **title** in search results.
|
||||
- The `description` meta tag is used by search engines to display a **short description** of the page in search results.
|
||||
|
||||
@ -9,7 +9,7 @@ excerpt: A short guide on how to correctly construct a URL in JavaScript.
|
||||
firstSeen: 2023-02-26T05:00:00-04:00
|
||||
---
|
||||
|
||||
Oftentimes, we need to create a URL in JavaScript, to request a resource or redirect the user. A seemingly simple task, yet URLs can be quite nuanced and complex, requiring a lot of attention to get right. This rings especially true if you've ever worked with different encodings and multiple query parameters.
|
||||
Oftentimes, we need to **create a URL in JavaScript**, to request a resource or redirect the user. A seemingly simple task, yet URLs can be quite nuanced and complex, requiring a lot of attention to get right. This rings especially true if you've ever worked with different encodings and multiple **query parameters**.
|
||||
|
||||
Naively, many developers reach for template literals to construct a URL. After all, URLs are simply strings and interpolation can be used to add parameters as needed. Except, this approach is error-prone and can lead to bugs. Let's take a look at an example:
|
||||
|
||||
@ -22,7 +22,7 @@ const url = `https://examp.le?q=${query}&lang=${locale}&from=${campaign}`;
|
||||
// "https://examp.le?q=Where's Waldø?&lang=en-US&from=promo_email"
|
||||
```
|
||||
|
||||
As you can see, template literals aren't well-suited for URLs, as they won't encode special characters. If you've worked with JavaScript for any amount of time, you might reach for `encodeURIComponent()` to fix this:
|
||||
As you can see, template literals aren't well-suited for URLs, as they won't **encode special characters**. If you've worked with JavaScript for any amount of time, you might reach for `encodeURIComponent()` to fix this:
|
||||
|
||||
```js
|
||||
const query = "Where's Waldø?";
|
||||
@ -42,7 +42,7 @@ const url = `https://examp.le
|
||||
|
||||
Surely, this dealt with encoding, but the multiline string has sneaked a newline character (`\n`) into the URL. This is because template literals preserve whitespace, leading to such issues. Breaking the string into multiple lines and concatenating them can help, but the code is starting to get ugly.
|
||||
|
||||
Obviously, there are other issues that might come into play, making this a non-trivial problem to solve. Luckily, there's a better way to construct URLs in JavaScript, using the `URL` object. Let's see how we can use it to solve the problem above:
|
||||
Obviously, there are other issues that might come into play, making this a **non-trivial problem** to solve. Luckily, there's a better way to construct URLs in JavaScript, using the `URL` object. Let's see how we can use it to solve the problem above:
|
||||
|
||||
```js
|
||||
const query = "Where's Waldø?";
|
||||
|
||||
@ -9,7 +9,7 @@ excerpt: Locale-sensitive string splitting and truncation are finally possible i
|
||||
firstSeen: 2022-12-04T05:00:00-04:00
|
||||
---
|
||||
|
||||
Breaking a string into words is not the easiest, neither is finding a good place to add an ellipsis. Part of the problem is recognizing word boundaries and words themselves. Luckily `Intl.Segmenter` is a relatively new object that enables locale-sensitive text segmentation.
|
||||
Breaking a string into words is not the easiest, neither is finding a good place to add an ellipsis. Part of the problem is recognizing word boundaries and words themselves. Luckily `Intl.Segmenter` is a relatively new object that enables **locale-sensitive text segmentation**.
|
||||
|
||||
`Intl.Segmenter` allows you to specify a locale and a `granularity` option to specify how a string should be segmented. The `granularity` option can be set to `'grapheme'`, `'word'` or `'sentence'` according to your needs. Using `Intl.Segmenter.prototype.segment()` on a string returns an iterable `Segments` object. This can then be used to find the correct index to split a string without being in the middle of a word or a sentence.
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ excerpt: Scroll listeners can easily become a performance bottleneck for your we
|
||||
firstSeen: 2023-03-07T05:00:00-04:00
|
||||
---
|
||||
|
||||
When working with scroll listeners in JavaScript, one can often run into performance issues. This is because scroll listeners are triggered on every single scroll event, which can be quite frequent. Most of the time, such listeners are used for infinite scrolling and lazy loading, meaning that the scroll event won't be intercepted. As such, `Event.preventDefault()` will not be called, guving us an optimization opportunity.
|
||||
When working with scroll listeners in JavaScript, one can often run into performance issues. This is because scroll listeners are triggered on **every single scroll event**, which can be quite frequent. Most of the time, such listeners are used for infinite scrolling and lazy loading, meaning that the scroll event won't be intercepted. As such, `Event.preventDefault()` will not be called, guving us an optimization opportunity.
|
||||
|
||||
```js
|
||||
window.addEventListener('scroll', () => {
|
||||
@ -18,4 +18,4 @@ window.addEventListener('scroll', () => {
|
||||
}, { passive: true });
|
||||
```
|
||||
|
||||
As demonstrated in this code snippet, setting the `passive` option to `true` will enable certain performance optimizations in the browser. This way, the browser will know that it can safely skip the event queue and execute the scroll listener immediately. The result is a much smoother experience for the user, as the scroll event will be handled immediately, instead of being queued and handled later.
|
||||
As demonstrated in this code snippet, setting the `passive` option to `true` will enable certain **performance optimizations** in the browser. This way, the browser will know that it can safely skip the event queue and execute the scroll listener immediately. The result is a much smoother experience for the user, as the scroll event will be handled immediately, instead of being queued and handled later.
|
||||
|
||||
@ -9,7 +9,7 @@ excerpt: There's a good way to test the emptiness of a Python list and a better
|
||||
firstSeen: 2023-01-15T05:00:00-04:00
|
||||
---
|
||||
|
||||
Checking the emptiness of a Python list is rather easy using the `len()` function. Yet, there's another technique that works on all types of sequences and collections. This is based on the truth value testing of the sequence or collection itself.
|
||||
Checking the emptiness of a Python list is rather easy using the `len()` function. Yet, there's another technique that works on all types of sequences and collections. This is based on the **truth value testing** of the sequence or collection itself.
|
||||
|
||||
By default, a Python object is considered truthy unless its class defines either a `__bool__()` or a `__len__()` method that returns `False` or `0` respectively. Python's built-in objects, such as tuples, lists, strings, dictioners, sets and ranges all implement a `__len__()` method. This menas that truth value testing of these objects will return `False` if they are empty, and `True` otherwise.
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ excerpt: Learn how to sort a Python dictionary list using a tuple key.
|
||||
firstSeen: 2023-01-04T05:00:00-04:00
|
||||
---
|
||||
|
||||
Sorting a list of dictionaries in Python can seem intimidating at first. This is especially true if you want to sort using multiple keys. Luckily, the `sorted()` function can be used to sort a list of dictionaries using a tuple `key`. Simply return a tuple with the order of keys you want to sort by and the `sorted()` function will do the rest.
|
||||
Sorting a list of dictionaries in Python can seem intimidating at first. This is especially true if you want to **sort using multiple keys**. Luckily, the `sorted()` function can be used to sort a list of dictionaries using a tuple `key`. Simply return a **tuple** with the order of keys you want to sort by and the `sorted()` function will do the rest.
|
||||
|
||||
```py
|
||||
friends = [
|
||||
|
||||
Reference in New Issue
Block a user