# Module Federation

It was through a sharing session within my organisation that I learned about [Module Federation](https://webpack.js.org/concepts/module-federation/) as one of the most exciting feature in Webpack 5. According to different blogs, they claimed that this is a game changer in JavaScript.

## What is Module Federation?

Based on the definition, it is a webpack module that makes sharing code and dependencies between different code bases easier. This loads the code dynamically at runtime to reduce code duplication and only downloads the missing dependencies if any.

## Possible uses

### Component library

As part of the sharing session, it was being introduced with the component library build for the organisation. This is important and useful so that there is a single design language which enforces the brand and UX guidelines across all the other projects.

### Micro-frontends

They are not exactly components but main purpose is basically to scale applications that are in large organisations.

## Personal thoughts

This is a very new concept to me and is something I definitely look forward to utilise. At this moment, I will choose to use it for projects that requires scalability and huge amount of code sharing among independent applications.

That is all I have for today and really excited to see where Module Federation brings JavaScript to.

Module Federation

# console.table()

We are all familiar with things like:

1. `console.log()`
2. `console.error()`
3. `console.warn()`
4. `console.info()`

But, `console.table()` is a really interesting one.

It basically displays the data that one would log to the console in a table form, as per what the method suggests so.

## Example

```js
const items = ["foo", "bar", "baz"];

console.table(items);
```

| Index | Value |
| ----- | ----- |
| 0     | foo   |
| 1     | bar   |
| 2     | baz   |

`console.table()` definitely formats the data nicely and makes things easier to read.

console.table()

# CSS: line-clamp

A very useful CSS trick to truncate long text to the number of lines specified. Using this CSS tricks do help in performance as JavaScript is generally heavy and expensive in resource.

## CSS

```css
.long-text {
  width: 300px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
```

## HTML

```html
<p class="long-text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid architecto
  asperiores distinctio dolore, dolores eaque error esse eum hic id inventore
  magni maxime minus modi molestiae quasi quod tempora voluptates?
</p>
```

## Result

And the result? Just a simple 3 lines of text ending with an ellipsis.

```html
Lorem ipsum dolor sit amet,
<br />
consectetur adipisicing elit.
<br />
Autem consectetur esse in quos reprehenderit voluptas...
```

CSS: line-clamp

# Parse String to Boolean using JSON.parse()

`JSON.parse()` is able to convert a string to boolean easily while retaining its value.

```js
let strTrue = "true";
let strFalse = "false";

console.log(JSON.parse(strTrue)); // true
console.log(JSON.parse(strFalse)); // false
```

While working on environment variables using `process.env` from a `.env` file, I realised that I had to use strict equal `process.env.SOME_VARIABLE === "true"` in order to make the condition as a valid boolean since environment variables are `typeof` String. While finding a better way around this, I came across using the `JSON.parse()` way that seems to make it easier. I was able to write a reusable function to make things easier for me too.

```yaml .env
SOME_VARIABLE=true
```

```ts
const isFeatureEnabled = (feature: string): boolean => {
  return JSON.parse(feature);
};

isFeatureEnabled(process.env.SOME_VARIABLE); // true
```

Let me know how other ways do you handle converting a string of values "true" or "false" to their boolean values.

Parse String to Boolean using JSON.parse()

# import.meta

I recently found out about the `import.meta` syntax while working on [Sanity](https://sanity.io) that uses Vite.

The `import.meta` is an object that is bundled with the JavaScript Modules. It contains information about the module and is extensible.

The following is an example of using the query parameters with the `import` syntax.

```html
<script type="module">
  import "./index.mjs?someParams=foo";
</script>
```

The `index.mjs` module is able to read the parameters `someParams` using the `import.meta` syntax

```js
new URL(import.meta.url).searchParams.get("someParams"); // foo
```

This is something new to me in which it cannot be done when using `process.env`

## TypeScript

We are able to create the typing through `env.d.ts` in the root of the project

```ts
// env.d.ts
interface ImportMetaEnv {
  SOME_ENV_VARIABLE: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}
```

## Uses

This is normally used in the browser.

- [Vite](https://vitejs.dev)

import.meta

# RSS Autodiscovery to Site

Interestingly, there is a way to actually add the RSS feed to a site for RSS readers to pull up through their autodiscovery feature.

```html
<link
  rel="alternate"
  type="application/rss+xml"
  title="RSS feed for site"
  href="/rss"
/>
```

And if the feed is an ATOM feed, change the `type` to `application/atom+xml`

RSS Autodiscovery to Site

# New Array Prototype Methods

While reading [The State of JS 2022](https://2022.stateofjs.com/en-US/features/language/), I came across two new `Array.prototype` methods which I previously have not heard of. They are `Array.prototype.at()` and `Array.prototype.findLast()`.

## .at()

This is going to be very useful for returning a value at a particular index in the array without having to iterate through. This great improve the time complexity to O(1) which is the best.

An example from [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at):

```js
const array = [5, 12, 8, 130, 44];

array.at(2); // 8
```

The `.at()` makes the code looks sweet, short and simple.

## .findLast()

As we know, the `.find()` method is one of the most commonly used method to-date. The `.findLast()` is the opposite where it iterates the array in a reverse order. This is so useful if I want to search for a value that appear the last.

An example from [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findLast):

```js
const array = [5, 12, 50, 130, 44];

array.findLast((item) => item > 45); // 130
```

New Array Prototype Methods

# Double tilde operator in JavaScript

There are 2 main ways to convert a string to a number.

## Using Number()

The `Number()` way in JavaScript gets the job done fairly quickly. And if the string cannot be a valid number, it will return `NaN`.

```js
Number("123.456"); // 123.456
```

## Using parseInt()

Another method is using `parseInt()`. This returns the nearest rounded down integer.

```js
parseInt("123.456"); // 123
```

---

The following method is the one that I recently came across. It was a rather interesting way to convert a string to a number.

## Using Double tilde (~~)

```js
~~"123.456"; // 123
```

This particular method ignores the decimal place and no rounding happens; just slightly different from the `parseInt()` method.

Random Musings (8)

Random Musings ⁽⁸⁾