
If you have a UUID in a string format and you need to have a `UUID` object you can create one as follows:

```swift
let uuid = UUID(uuidString: "...")
```

Note that this method can return nil if the string is not a valid UUID representation.



If you want to have a segmented picker in your application like the one below you need to set the picker style of your `Picker` view to `segmented`:

![Image showing a segmented picker with 4 icons representing the different seasons](/swift/segmented_picker/screenshot.png)

```swift
struct SeasonSelectorView: View {
    @State var season: Season = .summer

    var body: some View {
        Picker("Select the period", selection: $season) {
            Text(Season.spring.rawValue).tag(Season.spring)
            Text(Season.summer.rawValue).tag(Season.summer)
            Text(Season.autumn.rawValue).tag(Season.autumn)
            Text(Season.winter.rawValue).tag(Season.winter)
        }.pickerStyle(.segmented)
    }
}
```



This is how you can define an enum in Swift with raw values for each enum value:

```swift
enum Periodicity: Int {
	case weekly = 7
	case monthly = 30
	case yearly = 365
}
```

If you want to get the wrapped value you wan use the `.rawValue` property:

```swift
let periodicity: Periodicity = .weekly

let days = periodicity.rawValue
```



Sometimes you might be unable to create an observed object using the `@ObservedObject` annotation, for example if you need to use the object in the `init()` function of a view. When this happens there is a different way of creating an observed object, which is by using the `ObserverObject` initializer:

```swift
var ProjectView: View {
	@ObservedObject let project: Project

	init(project: Project) {
		_project = ObservedObject(initialValue: project)
	}

	var body: some View {
		// ...
	}
}
```

Note the underscore in front of `_project`, this is basically telling Swift to replace the underlying variable created by the `@ObservedObject` annotation.

You can also apply the same principle to other annotations such as `@State` or `@FetchRequest`.



Go to the `.xcodeproj` file, it should be the one with a blue icon with your app name next to it.

Then go to the Info tab, look for the `Application Scene Manifest` key inside the “Custom iOS Target Properties”, expand it and add a new key inside it with the name `Scene Configuration`. You can leave it empty, check that the type is `dict`.

Rebuild your app and launch it and the error should not appear again in the console.



In Swift, core data entities can be extended to provide them with additional functionality. Imagine that you’ve got an entity called `Task` with two fields: `creationDate` and `completionDate`. You could extend the entity to compute the amount it took to complete the task:

```swift
extension Task {
	func timeSpent() {
		return self.completionDate.timeIntervalSince(self.creationDate)
	}
}
```



Sometimes you’ll want to create your own errors to be thrown once something wrong happens within your application. For this, Swift provides the `Error` protocol that you can use:

```swift
struct InvalidInputError: Error {
	message: String
}
```

The `Error` protocol doesn’t have any requirement on its own so you can define whatever information you need inside it.

I’ve used a `struct` above to create a custom error but Apple’s documentation states that for simple errors `enum` constructs are well suited as well:

```swift
enum ConversionError: Error {
  case unknownCharacter
	case emptySource
}
```

Here’s an example of how you can use this custom error:

```swift
func convertValue(value: String) {
	if value.isEmpty {
		throw ConversionError.emptySource
	}
	// ...
}
```



If you need to create some CoreData instances that have a relationship between them you can do the following.

First you create the entities:

```swift
// Create the first item
let project = Project(context: context)
project.id = UUID()
project.name = "Test project"

let task = Task(context: context)
task.id = UUID()
task.name = "Task name"
```

Then you need to assign one entity to the other through the property that contains the relationship:

```swift
task.project = project
```

You can use this to create new entities throughout your code, it is particularly useful when creating previews for your views if they use both the parent and child entities.



The only thing you need to delete a CoreData object is the `viewContext` and the object itself. With those values you can execute the following:

```swift
viewContext.delete(yourObject)

do {
  try viewContext.save()
} catch {
  // handle your error here
}
```



If you want to get the string representation of a UUID in Swift you can call the `uuidString` property from the struct:

```swift
let uuid = UUID()

print("Your UUID is \(uuid.uuidString)")
```



If you want a screenshot from the iOS simulator you can do one of the following:

1. `command` + `s`
2. File > Save Screen



If you want to display a counter with the number of seconds passed since the view appeared on the screen you need to use a `Timer` that calls a function after the specified time has passed.

```swift
struct CounterView: View {
	@State var runningTime: Int = 0

	var body: some View {
		// ...
		.onAppear({ startCounting() })
	}

	func startCounting() {
    Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { _ in
      runningTime = getRunningTime()
    }
  }
}
```

If you want to stop updating the view you can store the timer in a variable and call the `invalidate` method on it:

```swift
struct CounterView: View {
	// ...
	@State var timer: Timer? = nil

	// ...

	func startCounting() {
    timer = Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { _ in
      runningTime = getRunningTime()
    }
  }

	func stopCounting() {
		if let _timer = timer {
      _timer.invalidate()
    }
	}
}
```



In SwfitUI it is extremely easy to add a sheet layer on top of your current view. You just need to append the `.sheet(...)` modifier to your view:

```swift
ZStack {
  Text("My main view goes here")
}.sheet(isPresented: $shouldShowSheet) {
  Text("My sheet content")
}
```

The sheet modifier accepts a boolean value as a binding and the content that should be displayed when the boolean value is `true`.

If within the sheet view you want to programatically dismiss the sheet you can use the dismiss environment function provided:

```swift
struct CreateProjectView: View {
  @Environment(\.dismiss) var dismiss

  var body: some View {
    HStack {
      Text("My sheet")
			Button(action: {dismiss()}) {
				Text("Dismiss sheet")
			}
    }
  }
}
```



To convert a `Date` to a `String` with a given format you can use a `DateFormatter`:

```swift
let dateFormatter = DateFormatter()
dateFormatter.dateStyle = .short

let date = "\(Date(), formatter: dateFormatter)"
```

This will print the current date in the d/m/yy format.

If you also want to include the time of the date you need to specify the `timeStyle`:

```swift
let dateFormatter = DateFormatter()
dateFormatter.dateStyle = .short
dateFormatter.timeStyle = .short

let date = "\(Date(), formatter: dateFormatter)"
```

Finally, if you want to fix a format representation and customise it to your needs you can specify the `dateFormat` instead:

```swift
let dateFormatter = DateFormatter()
dateFormatter.dateFormat = "HH:mm YYYY"

let date = "\(Date(), formatter: dateFormatter)"
```



SwiftUI provides a custom color picker that works perfectly in iOS:

```swift
ColorPicker("Project Color", selection: $projectColor, supportsOpacity: false)
```

This is how the picker looks like:

![iPhone screenshot showing the color picker](/swift/color_picker/screenshot.png)



If a function you need to execute might throw but you don’t care about it you can execute it with `try?`:

```swift
func getValue() throws -> String {
	throw Error("Something went wrong")
}

// ...

try? getValue()
```

In this case the returned value will be `nil` which can also be replaced with the nil-coalescing operator:

```swift
let value = (try? getValue()) ?? "default value"
```

Note the parenthesis around the `try?` statement, otherwise it won’t work.



```swift
RoundedRectangle(cornerRadius: 20)
	.fill(.regularMaterial)
	.frame(height: 150)
	.padding(EdgeInsets(top: 0, leading: 15, bottom: 0, trailing: 15))
```

This view shows a rectangle with the corners being rounded by the radius specified. You can also specify the fill color (not to be confused with the background one).



> You are part of a rescue operation for a lost boat in the sea.
> You have a radar capable of telling you if a boat is in a specific region.
> Your goal is to save the crew by coding a function that will return the location of the boat

This was a coding interview question that I was asked when I was searching for my first programming job. We'll have a look at how we can solve it and we'll learn how to implement a binary search algorithm in JavaScript along the way.

### Interviewer tips

The task is clear but the interviewer shared a couple more details about the problem:

- For simplification purposes, consider the sea is a rectangle grid divided in square cells.
- Given inputs: dimensions (width and height) of the sea.
- Expected output: location (cell coordinates) of the boat.

![sea_with_boat.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1622576316236/JopsJNpVn.png)

### Assumptions

We'll consider that the radar takes an area as input which is modelled as a rectangle consisting on a point (top-left one) and its dimensions (width and height). The radar will return `true` if the boat is present in the area and `false` if not.

```ts
type Area = {
  x: number;
  y: number;
  width: number;
  height: number;
};

type UseRadar = (area: Area) => boolean;
```

### First solution: brute force

The first solution that might come to your mind is "let's use the radar on each cell of the sea until we find the boat". We can implement this by using 2 nested for loops that iterate over each axis and stop as soon as the radar finds the boat. The code could look like this:

```ts
const getBoatCoordinates = () => {
  for (let x = 0; x < WIDTH; x++) {
    for (let y = 0; y < HEIGHT; y++) {
      if (useRadar({ x, y, width: 1, height: 1 })) return { x, y };
    }
  }
};
```

![Brute Force (MTL).gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1622574465430/dyGcFLx1X.gif)

This is a valid solution that will return the position of the boat, however, it is not a very efficient one. Imagine that you're checking an area of 100 (`width = 10` and `height = 10`) and that the radar takes `1 minute` to return an answer. We would spend **50 minutes** on average checking for the boat ( `0.5 * width * height * radarTime` ) which is definitely time enough for our boat to sink with all the crew on it. But don't despair, what if I tell you that we can improve the algorithm so that the time spent looking for the boat will be 7 minutes?

### Second solution: binary search

Here's is where binary search comes into action. For those of you that are unfamiliar with what binary search is, you can think of it as an iterative algorithm where the search population is divided in half and one of the portions is discarded.

For example, if you wanted to look for a word in a dictionary using this algorithm you would go to the middle page of the dictionary, check on which side your word is and discard the other. Now you would have half a dictionary to look for your word and you could repeat the same operation: divide in two, check where your word is and discard the other portion. You'd keep doing this until you reached your word.

The main advantage of this algorithm is that it decreases significantly the amount of lookups you have to execute as you keep discarding half of the population on each iteration.

Coming back to our boat, we can use the same approach and start splitting our sea in half and check one of the regions with the radar. If the radar returns true we can discard the other region and if it returns false we discard the one we checked. We can keep doing this until we have an area that contains one cell. The boat must be here.

![Binary Search (MTL).gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1622574657387/j1-9RPV-S.gif)

Let's try to implement the algorithm:

```ts
const getBoatCoordinatesInArea = (area) => {
  // Area is divided in 2
  const [area1, area2] = divideArea(area);

  // Checks if boat is in first area
  if (useRadar(area1)) {
    return getBoatCoordinatesInArea(area1);
  } else {
    return getBoatCoordinatesInArea(area2);
  }
};
```

The important bit of this function is what's coming after the `if` statement, if the boat is in `area1` we call the same function with that portion of the sea, if not, then the boat must be in `area2` and we call the same function with that chunk.

We are still missing the exit condition in the function, which is the one that will make it stop iterating. We said that we want to exit once the area contains only one cell so let's add it to the code.

```ts
const getBoatCoordinatesInArea = (area) => {
  // Exit condition
  if (area.width === 1 && area.height === 1) {
    return { x: area.x, y: area.y };
  }

  // Area is divided in 2
  const [area1, area2] = divideArea(area);

  // Checks if boat is in first area
  if (useRadar(area1)) {
    return getBoatCoordinatesInArea(area1);
  } else {
    return getBoatCoordinatesInArea(area2);
  }
};
```

Finally, we need an entry point to the function:

```ts
const getBoatCoordinates = () => {
  return getBoatCoordinatesInArea({
    x: 0,
    y: 0,
    width: WIDTH,
    height: HEIGHT,
  });
};
```

Here we're just calling the function that we created in the previous step with the entire grid to kickstart the binary search algorithm.

Let's have a look at the number of times we use the radar with this new approach. We need to know the number of times we divide the area in half until we get a single cell. Since we are dividing the grid by 2 on each iteration, we can use the logarithm to the base 2 to get the number: `log2(width * height)`. Now, with our initial inputs we would need the radar `6.64 times` but since we cannot use it half a time (you use it or you don't) we need to round the number to the next integer which results in `7 times`. This translates into a waiting time of **7 minutes**, which gives us enough time to send a rescue boat and save the crew! Hurray!

### Comparing both algorithms

We can compare these results with the ones obtained by the brute force algorithm:

| Dimensions                   | Brute force | Binary search |
| ---------------------------- | ----------- | ------------- |
| `width = 100` `height = 100` | 50 minutes  | 7 minutes     |
| `width = 200` `height = 200` | 200 minutes |  9 minutes    |
| **Increase %**               |  **300%**   |  **~30%**     |

We can see that the binary search algorithm is not only better in absolute terms (7 mins vs. 50 mins) but also if the input area grows to twice the height and twice the width the time grows only 30% instead of 300%.

### Conclusion

We achieved our goal and the crew is saved! Hopefully, the interviewer liked our solution and the job is ours!

Post a comment if you can think of other algorithms that will save the crew in less time and feel free to reach out if you have any questions!

### Bonus: the divideArea function

We didn't implement the `divideArea` in the code earlier so let's have a look at it here. Since we can divide an area in two axis, we can take 2 different approaches to implement this function. The first one is dividing the area initially on one axis until you reach its limit, for example, you divide vertically until width becomes 1, and then you start dividing on the other axis. The second one is swapping the axis on each iteration, which is a bit more complex since you need to keep track of the divided axis.

Check the first approach here:

```ts
const divideAreaVertically = ({ x, y, width, height }: Area): [Area, Area] => {
  const halfWidth = Math.floor(width / 2);
  const leftArea: Area = { x, y, width: halfWidth, height };
  const rightArea: Area = {
    x: x + halfWidth,
    y,
    width: width - halfWidth,
    height,
  };

  return [leftArea, rightArea];
};

const divideAreaHorizontally = ({
  x,
  y,
  width,
  height,
}: Area): [Area, Area] => {
  const halfHeight = Math.floor(height / 2);
  const bottomArea: Area = { x, y, width, height: halfHeight };
  const topArea: Area = {
    x,
    y: y + halfHeight,
    width,
    height: height - halfHeight,
  };

  return [bottomArea, topArea];
};

const divideArea = (area: Area): [Area, Area] => {
  if (area.width > 1) return divideAreaVertically(area);

  return divideAreaHorizontally(area);
};
```



The conditional operator is a JavaScript expression that evaluates and returns one of two expressions depending on a specified condition:

```tsx
<condition> ? <expression if true> : <expression if false>
```

It’s very useful if you want to assign a value to a variable based on a condition or as an `if...else` alternative:

```tsx
// assignment expression
const visibility = isMobile ? 'hidden' : 'visible';

// if...else alternative
isUserRegistered ? logInUser() : signUpUser();
```

Note that only the winning expression is the one evaluated, so in cases where you have functions as expressions, only the winning function will be evaluated (in our example above, the user would be signed up **or** logged in, never both of them)



## What are enums?

Enums are programming constructs that allow you to represent a set of constants that belong to a particular context.

```tsx
enum Direction {
  UP,
  DOWN,
  LEFT,
  RIGHT,
}

enum State {
  LOADING,
  SUCCESS,
  ERROR,
}
```

## Why are they useful?

They are useful because they allow the programmer to define and use these constants in an easy and meaningful way, improving the readability of the code.

```tsx
moveCharacter(Direction.DOWN);

setState(State.LOADING);
```

The compiler will ensure that all the values of the enum are the same everywhere where they are used.

## Numeric enums

If nothing is specified, TypeScript will assign numeric values to the enums. By default, TypeScript will start with 0 and auto increment it, but you can change the starting number:

```tsx
enum State {
  LOADING, // By default will be 0
  SUCCESS, // 1
  ERROR, // 2
}
enum State {
  LOADING = 1, // It will be 1
  SUCCESS, // 2
  ERROR, // 3
}
```

## String enums

You can also assign strings to your enum members, they will be the values used in runtime.

```tsx
enum Status {
  LOADING = 'LOADING',
  SUCCESS = 'SUCCESS',
  ERROR = 'ERROR',
}
```

The main benefit is that you don’t rely on the member position and you lock the value that will be later used up/down stream and stored in the database.

## Enums as types

Enums can be used as any other type in TypeScript: as the type of a field of an object, as the input type of a variable in a function, etc.

```tsx
// Using enums in other types:
type Player = {
  direction: Direction,
  health: number,
}

// Using enums in functions:
function updateDirection(player: Player, newDirection: Direction) {
  ...
}
```

## Compiling enums

So how are enums compiled into JavaScript? They get converted to objects whose keys are the enums members and the values the numeric or string values you gave them:

```tsx
// The State enum with string members would be compiled into this:
const State = {
  LOADING: 'LOADING',
  SUCCESS: 'SUCCESS',
  ERROR: 'ERROR',
};
```



## Understanding the loose equality operator

The loose equality operator (`==`) checks for the equality of two values and the result, as opposed to the strict equality (`===`), depends on the **type** of these values. So even if two things look very different, this operator can say they are the same. For example:

```jsx
'' == 0; // true
'' == []; // true
undefined == null; // true
```

## Comparing Strings against Numbers

The ECMAScript documentation states that if a `String` value is compared against a `Number` value then the `String` one needs to be converted to `Number` first.

Let's apply this to our example: `'' == 0`

First, the `''` is converted to a number, since its an empty string it will result in a `0`.

Now the expression would become `0 == 0`, which logically returns `true`.

## A word of caution 🚨

Due to its nature, the loose equality can return unexpected results, so you should be very careful when using it. Here are some examples of why:

```jsx
true == 0; // false but
true == 1; // true but
true == 2; // false again 🤷‍♂️

undefined == null; // true

new Boolean(false) == false; // false
```



Node provides a set of APIs to interact with the operating system. If you want to read all the files in a directory you could use the `fs` module. Here’s how:

```jsx
const fs = require('fs').promises;
fs.readdir('path/to/dir').then((files) => {
  files.forEach((file) => console.log(file));
});
```

Note that the calls to the file system are asynchronous, to handle this we used the _promisified_ APIs, but the _callback-based_ ones also exist



## 1. Explicitly

Using the square bracket notation. This is probably the most common way of creating an Array.

```js
const arr = [1, 2, 3];
```

## 2. Destructuring another array

Using the ES6 notation you can create a copy of another array. Specially useful in functional programming to avoid side effects (i.e. modifying the original array).

```js
const numbers = [1, 2, 3, 4];

const copyOfNumbers = [...numbers];

// You can also join 2 arrays into one:
const numbersTwice = [...numbers, ...numbers];
// This will be [ 1, 2, 3, 4, 1, 2, 3, 4 ]
```

## 3. Array's constructor

JavaScript defines an Array constructor that allows you to specify the length of the array. This method is useful if you know how large your array is going to be. Note that the constructor will create an array where all the elements are empty (not `undefined`).

```jsx
const emptyArray = new Array(5);

console.log(emptyArray);
// [ <5 empty items> ]

console.log(emptyArray.length);
// 5
```

## 4. Array.from()

This method accepts an iterator (which can be another array or a set) and creates a new array with the same elements.

```js
const copiedArray = Array.from([1, 2, 3]);
```

## 5. Array.of()

This method accepts an unlimited number of parameters that will be used as elements of the new constructed array.

```js
const paramsArray = Array.of('a', 'b', 'c');
```



You've heard about React hooks and you start to get a grasp on it, you understand what the main ones do and use them effortlessly in your components.

It's time to level up and to start creating your custom hooks to contain the business logic of your application.

The main benefit of building your own hooks is that you can encapsulate the logic and reuse them across your application, avoiding repeating code in multiple places.

Let's imagine an application that displays 2 set of items to the users: _tasks_ and _projects_. For this you have 2 separate components that call 2 different API endpoints. You need to handle the request lifecycle and keep the state for both of them so let's try to code a solution that would work for each case.

### Creating the hook

The standard practice for hooks in React is that their name starts with `use`, so we'll call our hook `useItemsLoader`

```jsx
const useItemsLoader = () => {};
```

### Defining the state, input and output

We want to make the hook configurable for different endpoints so we will add an input parameter with this.

Our hook will be responsible for storing the data (with the items) and the state of the request (`LOADING`, `DONE` and `ERROR`). Since the shape of the data is simple enough (just a couple of fields) we'll store it in a single variable. We will use the `useState` hook for this.

Finally, we will return the data so the caller component of the hook can render itself properly.

```jsx
const useItemsLoader = (endpoint) => {
  const [data, setData] = useState({ items: null, state: 'LOADING' });
  return data;
};
```

### Requesting the data

We need a way to trigger the request, so we will use the `useEffect` hook. The hook will fetch the data once the component has been mounted.

We will also manage the lifecycle of the request, setting the state based on the outcome.

```jsx
useEffect(() => {
	fetchItems(endpoint)
    .then( items => setData({ items, state: 'DONE' }))
		.catch( () => setData({ items: null, state: 'ERROR' });
}, [endpoint]);
```

### Putting everything together

This is the final result of the hook:

```jsx
const useItemsLoader = (endpointPath) => {
	const [data, setData] = useState({ items: null, state: 'LOADING' });

	useEffect(() => {
		fetchItems(endpoint)
	    .then( items => setData({ items, state: 'DONE' }))
			.catch( () => setData({ items: null, state: 'ERROR' });
	}, [endpoint]);

	return data;
};
```

And this is how we can use it in our component:

```jsx
const Tasks = () => {
  const tasksData = useItemsLoader('path/to/tasks');

  if (tasksData.state === 'LOADING') return <div>Loading data...</div>;
  if (tasksData.state === 'ERROR') return <div>Something went wrong</div>;

  return (
    <div>
      <h1>Tasks</h1>
      {tasksData.items.map((task) => (
        <Task task={task} />
      ))}
    </div>
  );
};
```

We could do the same with our other `Projects` component, reusing the `useItemsLoader` but with a different endpoint.

Custom hooks are a good solution even for more complex solutions. They allow us to have the logic contained and separated from our components improving the maintainability of our code. If we need to change something in the future we will need to do it in a single place.



Have you ever wanted to create gradient text as the following?

<GradientText/>

With Tailwind CSS you can achieve it witih just 5 classnames:

```jsx
<span
  className="bg-gradient-to-r from-cyan-400 to-emerald-500 
             bg-clip-text text-transparent"
>
  To infinity and beyond
</span>
```

- `bg-gradient-to-r` will set the background to a gradient from the left to the right
- `from-cyan-400` will set the starting color as cyan 400 (#22D3EE), it can be set to any Tailwind color
- `to-emerald-500` will set the ending color as emerald 500 (#10B981), it can be set to any Tailwind color
- `bg-clip-text` will make the background to be clipped behind the text
- `text-transparent` will make the font color to be transparent so the clipped background is visible through it



Express is a web framework for NodeJS that enables the development of web servers to be used for a variety of applications. From a simple API endpoint to a web server with a rendering engine. The way the business logic is executed in the Express application is with middleware functions.

## What are middleware functions in Express?

They are normal JavaScript functions that accept 3 parameters: `request`, `response` and `next`. These functions will be the ones dealing with the request that reaches your Express server.

They can execute any kind of code: reading users from a database, calling a 3rd party API, storing files in a S3 bucket, etc.

Here is an example of a middleware function:

```jsx
const app = express();

// This will be executed for all requests
app.use((req, res, next) => {
  console.log('New request');
  next();
});

app.listen(8080);
```

## How are they executed?

The Express application is the one that executes them in the same order they have been registered as long as the path specified (if any) matches the request's url path. The HTTP method (GET, POST, PUT...) can also be specified when registering these functions and the requests will be routed accordingly.

Here is another example:

```jsx
// Will be executed for each request
app.use((req, res, next) => {
  console.log('New request incoming');
  next();
});

// Will be executed only for GET requests to /users
app.get('/users', (req, res, next) => {
  console.log('New GET request to /users');
  next();
});
```

## The request object

It is a normal JavaScript object containing information about the HTTP request: the URL, the body, the cookies sent by the client, etc.

Among other properties, it contains the following ones:

- `req.body`: body of the request
- `req.cookies`: contains cookies sent by the client
- `req.path`: the URL path
- `req.query`: an object containing a property for each query-parameter in the route

It also contains these methods:

- `req.accepts('content-type')`: checks if the content type is acceptable
- `req.get('header-name')`: returns the specified request header field

You can add more fields to the request object so the next middleware functions can read it.

## The response object

It contains methods to send data back to the client. It can be used to modify the status code, the headers and the body response:

- `res.status(200)`: sets the HTTP status code
- `res.sendStatus(404)`: sets the HTTP status code and sends the registered status message as the body
- `res.send({ name: 'John', age: 30 })`: sends the passed object as the body

The send method can only be called once, otherwise you'll get an exception.

## The next callback

It is a callback function that can be invoked to delegate the execution to the next middleware.

Middleware functions must invoke this callback unless the response is sent to the client, otherwise the request will be left hanging.

If there is more code after the `next()` callback it will be executed once the next middleware is finished:

```jsx
app.use((req, res, next) => {
  console.log('Previous middleware has called next()');
  next(); // Next middleware will be executed
  console.log('Next middleware has just finished its execution');
});
```

## A request lifecycle

Imagine that you have a server with the following middleware functions:

```jsx
app.use((req, res, next) => {
  console.log('Beginning of middleware 1');
  next();
  console.log('End of middleware 1');
});

app.use((req, res, next) => {
  console.log('Beginning of middleware 2');
  next();
  console.log('End of middleware 2');
});

app.use((req, res, next) => {
  console.log('Beginning of middleware 3');
  res.sendStatus(200);
  console.log('End of middleware 3');
});
```

When a request reaches the server this is what you would see in the logs:

```jsx
// Beginning of middleware 1
// Beginning of middleware 2
// Beginning of middleware 3
> Response is sent to the client
// End of middleware 1
// End of middleware 2
// End of middleware 3
```



```jsx
class Cache {
  constructor(maxAge) {
    this.store = {};
    this.maxAge = maxAge;
  }

  put = (key, value) => {
    this.store[key] = { timestamp: Date.now(), value };
  };

  get = (key) => {
    if (!(key in this.store)) return null;
    if (Date.now() < this.store[key].timestamp + this.maxAge) {
      return this.store[key].value;
    } else {
      delete this.store[key];
      return null;
    }
  };
}
```

This is an easy way of setting up an in-memory key-value cache with expiry time in JavaScript. It is based on a plain JavaScript object and you can store value with the put method which will store the value along with the timestamp. The get method will check if the key is in the object and if the item hasn't expired by comparing the current timestamp with the maxAge. If the item has expired it will remove it from the object so that memory is freed up. Note that this is only recommended in development stages because it can make the node process to run out of memory.

Here is an example of how to use it:

```jsx
const cache = new Cache(1000);

cache.put('id1', 'value1');
cache.get('id1'); // 'value1'

cache.get('id2'); // null

// Some time later
setTimeout(() => {
  cache.get('id1'); // null
}, 1500);
```



```js
const sumDigits = (number) => {
  const digits = [...number.toString(10)].map((digit) => Number(digit));
  return digits.reduce((sum, digit) => sum + digit, 0);
};

console.log(sumDigits(3041)); // 8
console.log(sumDigits(987)); // 24
console.log(sumDigits(10437)); // 15
```

Here's an easy way of summing all the digits of a given number in JavaScript:

First, we need to get the digits separately, for this we can convert the number to a string of base 10, spread all the characters in an array and map those characters to the equivalent number.

Then, with the help of the reduce method we can compute the sum of the digits. The reduce method iterates over each item of an array and executes the given function with each item as the 2nd argument and an accumulator value as the first one. This accumulator is the returned value of the function on the previous iteration (the first time the default value is used, 0 in our case). Hence, on the first iteration the function will return the first digit, on the second one it will return the sum of the first 2 digits and so on.



```jsx
const dns = require('dns').promises;

// Resolve IPv4 record
dns.resolve4('google.com').then((record) => console.log(addr));
// This logs [ '172.217.168.174' ]

// Resolve IPv6 record
dns.resolve6('google.com').then((record) => console.log(addr));
// This logs [ '2a00:1450:4003:808::200e' ]
```

This is how you can resolve the DNS of a website and get the IP address under which the page rests. Node provides the dns module and in this example we are using the promises implementation so we don't have to pass callbacks to the functions.

Here we show the resolve4 function to get the IPv4 addresses and the resolve6 for the IPv6 addresses. With this module you can resolve all type of DNS records like cname, mx or txt.



```jsx
// setTimeout
const timeoutId = setTimeout(() => {
  console.log('This will be executed once after 1000ms');
}, 1000);

clearTimeout(timeoutId);

// setInterval
const intervalId = setInterval(() => {
  console.log('This will be executed repeatedly after 1000ms');
}, 1000);

clearInterval(intervalId);
```

Ever wondered how to cancel the execution of a timeout or an interval in JavaScript? You might have faced the case where you don't need the executions of any of these functions anymore. Both setTimeout and setInterval return an id that you can use it later as parameter for clearTimeout and clearInterval functions respectively. This will stop further executions once and for all.

Fun fact: according to the documentation, you can use the clearTimeout and clearInterval interchangeably as the ids come from a shared pool. This is discouraged though for readability purposes.



```jsx
const arr = [
  { name: 'James', age: 32 },
  { name: 'Lily', age: 33 },
  { name: 'Harry', age: 10 },
];

arr.sort((obj1, obj2) => obj1.age - obj2.age);

console.log(arr);
// [ { name: 'Harry', age: 10 },
//   { name: 'James', age: 32 },
//   { name: 'Lily', age: 33 } ]
```

This is how you can sort an array of objects by a given key. The sort method accepts a function that takes two parameters: the two items of the array that is going to be sorted, and must return a number. If the returned number is greater than 0 it means that the second item should go before the first one. If the returned number is less than 0 it means that the first item should go before the second one. If the returned number equals 0 it means that both items are the same in sorting terms.

Note that the sorting algorithm for arrays is executed in place, so the original array will be modified when using this method. If you don't want the original array to be changed you'll need to make first a copy.



```jsx
const createArray = (length: number, value: any = null) => {
  return new Array(length).fill(value);
};

const emptyArrayOfLengthFive = createArray(5);
// [null, null, null, null, null]

// If we had used new Array(5) we would have
// [ <5 empty items> ]
```

If you want to create an array in JavaScript of a given length you can use the Array constructor plus the fill method combined. The first one will create a new array of given length but it will be empty, if you try to iterate over it you'll notice that there will be 0 iterations. This is where the fill method comes into action, by using it we'll be inserting the given value in all the elements of the array. Now the resulting array is filled and we can iterate over it.



```jsx
// install dotenv with
npm install dotenv

// use it in the main file of your application
import dotenv from 'dotenv';
dotenv.configure()

console.log(process.env.YOUR_VARIABLE) // your_variable_value

// .env file
YOUR_VARIABLE=your_variable_value

// .gitignore file
.env
```

Sometimes you'll need to store some configuration variables that shouldn't be placed directly in the code because of security reasons (you might store your DB password here) or because they need to change depending on the deployment stage (the url endpoint of the DB might be different). One approach to solve this is to create a .env file containing this variables and deploy it manually. In order to easily read and parse this file we can use the dotenv library. You'll need to install it and execute its "configure" method. Once that's done, you'll be able to read the variables normally from the process.env object.

Note that it is highly recommended to include this .env file in your .gitignore so it is not accidentally pushed to a public repository, exposing all your secrets.



```js
// Add item to localStorage
window.localStorage.setItem('key', 'value');

// Get item from localStorage
const value = window.localStorage.getItem('key');

// Remove item from localStorage
window.localStorage.removeItem('key');

// Remove all items from localStorage
window.localStorage.clear();
```

You can store data in the browser to be retrieved at a later time. You'll need a key to reference the stored value that we'll be used on read time. Here are the different methods available:

- Add item: localStorage.setItem(key, value)
- Get item: localStorage.getItem(key)
- Remove item: localStorage.removeItem(key)
- Remove all items: localStorage.clear()

Only string values can be stored but you can convert arrays or objects into JSON to bypass this limitation.



```js
const person = { name: 'John', age: 29, hobbies: ['chess', 'football'] };

const personStr = JSON.stringify(person);
// myObjectStr = '{"name":"John","age":29,"hobbies":["chess","football"]}'

const parsedPerson = JSON.parse(myObjectStr);
// parsedPerson = { name: 'John', age: 29, hobbies: ['chess', 'football'] }
```

If you want to convert a JS object to a JSON string you can use the JSON.stringify method. For the inverse operation, going from a JSON string to a JS object, you can use the JSON.parse method. JSON strings are good for client-server communication and also because they can be converted back to JavaScript objects easily. Note that the only types that are convertible to JSON are: numbers, strings, booleans, nulls, arrays and objects.


Hi there, I'm Marcos!

UUID from string

Segmented picker

Enums with raw values

Creating an Observed Object programatically

Fix the «Info.plist contained no UIScene configuration dictionary…» error in a new Xcode project

Extending CoreData entities

Creating a custom Error in swift

Creating CoreData objects with relationships

Deleting a CoreData object

Getting the string representation of a UUID

Taking a screenshot in the iOS simulator

Updating a view periodically

Sheet presentation

Converting dates to string with specific format

ColorPicker in SwiftUI

RoundedRectangle in SwiftUI

What's "try?" in Swift

⛵️ A lost boat, a radar and how to implement a binary search in JavaScript

❓ The conditional operator in JavaScript

🎛️ Enums in TypeScript

〰️ Why does ‘’ == 0 returns true in JavaScript?

🗄️ Getting a list of files in a directory with NodeJS

5️⃣ 5 ways of creating an Array in JavaScript

🪝 Creating a custom React hook

🌈 Generating gradient text with Tailwind CSS

🔀 Understanding Express' middleware functions

💾 Simple in-memory cache with JavaScript

➕ Summing all digits of a number with Array.reduce

📇 Checking DNS records in Node

⏱ Cancelling setTimeout and setInterval executions

🗝️ Sorting an array of objects by a given key

📏 Create an array of a given length in JS

🏞️ Using dotenv to work with environment variables

💽 Storing data in the browser with localStorage

🧵 From JS object to JSON string and vice versa