
LINQs Skip().Take() is a great when you want to export a subset of a data source. A typical use case is to add paging to data tables where users can determine how many elements they want to be displayed at the same.

```csharp
var collection = Enumerable.Range(0, 5); // 0, 1, 2, 3, 4
var chunk = collection.Skip(2).Take(2).ToList();  // 2, 3
```

Skip() and Take() is implemented as extension methods on IEnumerable. Most of data structures that implements IEnumerable does not have indexed access, as that is limited to structures such as as List and Array.
The implementation of Skip() cannot access elements at position N directly. Instead, it would use IEnumerable.GetEnumerator().MoveNext() subsequently to move to the first element that should be included in the result set. To access element N+1, N calls to MoveNext() will be made.
The table below shows run times for splitting a dataset of N integers on my local computer. The runtime drastically increases with number of elements.

| Number of elements  | Skip().Take() |
| :-------------        | :----------   |
| 25                  | 3ms           |
| 250                 | 5ms           |
| 2500                | 12ms          |
| 25000               | 324ms         |
| 250000              | 18284ms       |

How can we improve? With indexed access, of course.

The following code snippets shows an extension method on IEnumerable that converts the source to an Array and utilizes direct access based on index. No more need to move through all preceding elements with GetEnumerator().MoveNext().


```csharp
public static IEnumerable<T> ChunkOptimizedForLargeDatasets<T>
	(this IEnumerable<T> source, int skip, int take){

	var list = source as IList<T> ?? source.ToArray();
	var upperLimit = Math.Min(list.Count, skip + take);
    for (var i = skip; i < upperLimit; i++)
    {
    	yield return list[i];
    }
}
```

Let's compare the run times with our custom implementation.

| Number of elements  | Skip().Take() | Custom
| :-------------      | :----------   | :----------  
| 25                  | 3ms           | 2ms
| 250                 | 5ms           | 1ms
| 2500                | 12ms          | 1ms
| 25000               | 324ms         | 2ms
| 250000              | 18284ms       | 16ms

### When to use?

Given the low performance gain for smaller datasets it would only make sense to introduce a custom implementation to projects operating on very large datasets in memory. For those project, this implementation could be used where the initial cost of converting an IEnumerable to indexable data structures is low compared to the performance gain of index access.

Skip(), Take() and the poor performance it brings


Just like one would expect from a proxy, the Proxy object in JavaScript acts as an intermediary between a caller and an intended target. As Proxy will intercept operations, one can alter or extend the original functionality for a given object.

Awesome! How does it work?



A proxy constructor accepts a target and a handler. In the following case we create a proxy with a person object as intended target and handler as the object that overrides the normal behavior of person.

We provide a custom implementation for get that will check if the property accessed is the name-property. If so, we do not give back that name, but hides it. If another property is accessed, we pass the call to the original behavior of the object by using built-in Reflect object.  

```js
let person = {name: "Jane", age: 18};

let handler = {
  get: function(target, prop, receiver) {
    if(prop === "name") return "Name is hidden";
	return Reflect.get(...arguments)
  }
};

let proxy = new Proxy(target, handler);
console.log(proxy.name); // Name is hidden 
console.log(proxy.age); // 18
```

In the previous example the handler only has a get-property, meaning that it will only override get accessor for the object. Other properties on the object will still works as before.

To illustrate either further, a proxy provided with an empty object as handler will work just as the original object itself.

```js
let person = {name: "Jane", age: 18};
let emptyHandler = {};

let proxy = new Proxy(target, emptyHandler);

console.log(proxy.name); // Jane 
console.log(proxy.age); // 18
```

## Real world scenario: Localization

Nowadays, a web site often needs to support multiple languages and as a business grows one might want to extend to new regions. Therefore, one would not insert language specific phrases directly in HTML, but somehow make this dynamic. During an expansion one would need to employ proficient translators to add support for more languages.

For the translators it would be hugely beneficial to see which language key is used where on a web site in order to fully grasp the context while translating. Comparing this to only working with a list of keys (e.g. welcome_header, welcome_info_text) we understand the huge benefit it can provide.

An example implementation in React is showcased below. The code shown has a custom hook that returns a dictionary object corresponding to the language set in current user settings.

```js
import locales from "./all-locales"; // import all possible languages

export const useLocalization(wordKey) => {
    // Get current language key from user settings
	const selectedLanguageKey = useSelector(state => state.userSettings.language); 
    
	// return dictionary for given language
	return locales[selectedLanguage]; 
}
```

In turn, this would be consumed from within a React component like this  

```js
export const Welcome(wordKey) => {
    //Get current localization
	const localization = useLocalization(); 

    return (
		<div>
        	<h1>{localization.welcome_header}</h1>
			<p>{localization.welcome_info_text}</p>
		</div>
    )
}
```

In order to control when to show keys we need a feature that allows users to toggle whether the key or translations should be shown. We would make the feature permission based so only translators are allowed to toggle.

Lastly, we would change useLocalization() to return a proxy instead of a dictionary object directly. The handler we provide to the proxy would check whether the setting to show word keys is turned on or not. Turned on, return the word key. Turned off, pass the operation along to original behavior. An example implementation can be seen below.

```js
import locales from "./all-locales"; 

export const useLocalization(wordKey) => {
	const selectedLanguageKey = useSelector(state => state.userSettings.language);
    // Get settings to show word key
    const showIdsInsteadOfWord = useSelector(state => state.userSettings.showIdsInsteadOfWord);  

let handler = {
  get: function(target, prop, receiver) {
	// Given settings to show Ids is toggled on, return the key provided  
    if(showIdsInsteadOfWord) return prop; 
	return Reflect.get(...arguments)
  }
};

	return new Proxy(locales[selectedLanguage], handler); // return proxy
}
```

JavaScript Proxy


We have all heard it. Developers are not good at design.

Thankfully, we have UX-designers. I have had the pleasure of collaborating with excellent designers in my time and have seen firsthand the importance of their work. Sadly, as developers we are not always blessed with a designer on our team...

In this blog post I will highlight design principles that every developer should know. Apply these principles and you have come a long way in improving the user experience of your product. Those principles are

1. Visual Hierarchy
2. Whitespace
3. Alignment
4. Contrast
5. Grouping

## 1. Visual Hierarchy

Visual hierarchy is usage of visual clues to orders elements by importance. Visual hierarchy helps our brain to focus on the most important elements first and serves as a guide to where a user should look. There are many characteristics that can be altered to increase / reduce the importance of an element such as size, color or contrast.

A user's reading pattern is culturally influenced so a western user would normally read you design from left-to-right. One can then apply visual clues to either

- Break the expected pattern
- Reinforce the expected pattern

On the image below, size is used to break the expected reading pattern

 <img src="/assets/blog/it-looks-like-a-developer-designed-it/visual-hierarchy.png" width="1600" height="905" alt="A picture showing how text size can be used to guide order of what eyes focuses on" />

## 2. Whitespace

Whitespace is space between design elements or within a design element. It is also referred to as negative space and is used to increase both the aesthetics and the efficiency of a page. Below we see a poor uses of whitespace on the left image. Even though some effort has been put in to improve visual hierarchy in terms of sizing and colors, the design is too cramped. On the right image, whitespace has been properly applied which results in a better design. Take note of how "BUY NOW" comes alive with proper whitespace usage both around and within the element.  

<div class="image-row">
  <img src="/assets/blog/it-looks-like-a-developer-designed-it/whitespace_bad.png" width="2105" height="1184" alt="A picture showing bad use of whitespace">
  <img src="/assets/blog/it-looks-like-a-developer-designed-it/whitespace_good.png" width="2105" height="1185" alt="A picture showing good use of whitespace">
</div>

## 3. Alignment

Alignment refers to the placement of elements related to each other. It is used to create structure to a page and makes a design look more professional. Alignment is often not recognized when executed properly, but one would definitely miss it should not it be. This can be seen when comparing the two layouts below.

<div class="image-row">
  <img src="/assets/blog/it-looks-like-a-developer-designed-it/alignment_boxes_bad.png" width="1600" height="897" alt="A picture of boxes poorly aligned to illustrate importance of good alignement">
  <img src="/assets/blog/it-looks-like-a-developer-designed-it/alignment_boxes_good.png" width="1600" height="1014" alt="A picture of boxes nicely aligned to illustrate importance of good alignement">
</div>

## 4. Contrast

Contrast is difference between elements. A well-known example of contrast is text color compared to background color. Poor contrast results in unreadable text and one must always keep in mind factors such as color blindness as well.

Contrast comes in many forms and can be adjusted to improve visual hierarchy. In the following examples one can see different types of contrast utilized for visual effect, such as color, shape, size and fonts. An interesting factor is that one might have to deliberately challenge other design principles, e.g. alignment, to create the desired effect.  

<div class="image-row">
  <img src="/assets/blog/it-looks-like-a-developer-designed-it/contrast_color.png" width="1360" height="1185" alt="Example using colors to create contrast">
  <img src="/assets/blog/it-looks-like-a-developer-designed-it/contrast_textalign.png" width="1020" height="1395" alt="Example text alignment to create contrast">
  <img src="/assets/blog/it-looks-like-a-developer-designed-it/contrast_shape.png" width="1312" height="1142" alt="Example using shape to create contrast">
</div>

<div class="image-row">
  <img src="/assets/blog/it-looks-like-a-developer-designed-it/contrast_text.png" width="1600" height="862" alt="Example using text size, color and font to create contrast">
  <img src="/assets/blog/it-looks-like-a-developer-designed-it/contrast_size.png" width="1665" height="1500" alt="Example using size to create contrast">
</div>

## 5. Grouping

Objects closely placed are perceived as related and form groups. Element that are logically connected should therefore be placed close to each other. For instance, a label should be near its corresponding input field.

Grouping can also be utilized to minimize noise and to "reduce" the number of elements on the page. In the example below, both designs hold nine elements in total. When looking at the design on the right, the design is perceived as having three groups of elements instead of 9 individual elements. Even though the elements are different in terms of shape and color, we still visually group them just because they are located close to each other.

<div class="image-row">
  <img src="/assets/blog/it-looks-like-a-developer-designed-it/grouping_bad.png" width="2550" height="1705" alt="Example of poorly grouped elements on a page">
  <img src="/assets/blog/it-looks-like-a-developer-designed-it/grouping_good.png" width="1600" height="936" alt="Example of well grouped elements on a page">
</div>

It looks like a developer designed it!


A common task for a developer is to perform transformations of data in several steps. One could implement it with several assignments

```js
export function transform(array) {
  const incrementedBy2 = incrementBy2(array);
  const doubled = double(incrementedBy2);
  const total = sum(doubled);
  return total;
}
```

or without assigning each step result to a new variable.

```js
function transformNoAssignments(array) {
  return sum(double(incrementBy2(array)));
}
```

None of these solutions works perfectly. *transform()* is quite tedious to write and adds intermediate assignments that we do not really care about.

Even though *transformNoAssignments()* is shorter, it still has issues from a readability perspective. For one, the steps are run in reverse order of how they are written. *IncrementBy2()* would run first, then double() and at last sum().

In this blog post we will implement a function, *pipe()*, that addresses the aforementioned issues.

```js
let numbers = [1, 2, 3];
let transformed = pipe(incrementBy2, double, sum)(numbers);
```

Pretty, right? And readable, none the less.

## Implementation

Going forward we call the set of input functions as pipeline, while each individual function in our *pipeline* will be referred to as a *step*.

The implementation of *pipe()* is shown below, both with traditional function syntax

```js
function pipe(...steps) {
  return function (initialValue) {
    return steps.reduce(
            function(accumulatedValue, currentFunction){ 
                return currentFunction(accumulatedValue)
            }, 
            initialValue)
    };
}
```

... and arrow function syntax.

```js
const pipe = (...steps) => 
    (initialValue) =>
          steps.reduce(
              (accumulatedValue, currentFunction) =>
                    currentFunction(accumulatedValue), 
              initialValue);
```

*pipe()* is a function that accepts any number of functions as input parameters and returns a function that accepts an initialValue. When executed, the steps are processed sequentially, with the output of the previous step serving as input to the next step in the pipeline. InitialValue is used as input to the first step.  

Let us run through the details.

### How can the returned function accept any number of functions as input?  

A JavaScript function can be called with any number of arguments. Should the number of called parameters exceed the number of input parameters those excess inputs would be ignored.  

```js
const add = (a, b) => a + b;
add(1, 2) // 3
add(1, 2, 3, 4) // 3
```  

However, when using the *spread operator (...)* the inputs are converted into a single array.

```js
const logNumbersAsArray = (...numbers) => console.log(numbers);

logNumbersAsArray(1,2,3,4,5) // [1,2,3,4,5]
```  

Consequently, we can call *pipe()* with as many input parameters as we like. The steps would be converted into an array of functions.

### Next on, we look at how Reduce() is used  

*Reduce()* is a JavaScript function that operates on an array, executes a *reducer function* on each element, ultimately reducing the array to a single output value.

One could for instance implement a sum function as follows

```js
const sumReducer = (accumulated, current) => accumulated + current;

const sum = (numbers) => numbers.reduce(sumReducer, 0);
```  

Utilizing logging statements we can inspect the intermediate steps of the process.

```js
const sum = (numbers) => 
  numbers.reduce(
        (accumulated, current) => {
    const result = accumulated + current;
    console.log(`Accumulated: ${accumulated} Current: ${current} Output: ${result}`);
            return result;
        }, 0)

const result = sum([1,2,3,4]);

// Accumulated: 0. Current: 1. Output: 1
// Accumulated: 1. Current: 2. Output: 3
// Accumulated: 3. Current: 3. Output: 6
// Accumulated: 6. Current: 4. Output: 10

console.log(result);
// 10
```  

Since *pipe()* accepts functions instead of numbers as input we would have to call each step as part of the reducer function. Take note of how *currentFunction()* is called with accumulatedValue as input.

```js
const pipe = (...steps) => 
    (initialValue) =>
          steps.reduce(
              (accumulatedValue, currentFunction) =>
                    currentFunction(accumulatedValue), 
              initialValue);
```  

## Verification

To verify that the implementation works as expected we write some Jest tests. We test that each step is passed the returned value of the previous step and that *pipe()* outputs the correct value when all steps has been processed.

```js
const incrementBy2 = jest.fn((number) => number.map((x) => x + 2));
const double = jest.fn((number) => number.map((x) => x * 2));
const sum = jest.fn((number) => number.reduce((a, b) => a + b, 0));

describe("Pipe", () => {
  it("should pass output of current step to next", () => {
    pipe(incrementBy2, double, sum)([1, 2, 3]);

    expect(incrementBy2).toHaveBeenCalledWith([1, 2, 3]);
    expect(double).toHaveBeenCalledWith([3, 4, 5]);
    expect(sum).toHaveBeenCalledWith([6, 8, 10]);
  });

  it("should return accumulated value", () => {
    const twentyFour = 
      pipe(incrementBy2, double, sum)([1, 2, 3]);
      expect(twentyFour).toBe(24);

    const eighteen = pipe(double, incrementBy2, sum)([1, 2, 3]);
    expect(eighteen).toBe(18);
  });
});
```

## Closing

We conclude this blog post by showing an example of how pipe() can be used.

```js
// Steps
const incrementBy2 = (array) => array.map((x) => x + 2);
const double = (array) => array.map((x) => x * 2);
const sum = (array) => array.reduce((a, b) => a + b, 0);

let numbers = [1, 2, 3];

let pipeline = pipe(incrementBy2, double, sum);
typeof(pipeline) // function
pipeline(numbers); // 45

// called directly
pipe(incrementBy2, double, sum)(numbers); // 45
});
```


Let's pipe!


When I was introduced to the C# programming language one of the aspects I really found interesting was LINQ. It was something about the readability and the ease of use of it all. Even non-technical people would be able to read this code and semi-understand what was going on.

```csharp
 var adults = customers.Where(customer => customer.Age > 18); 
```

I decided to take a look at what building blocks of the C# language that would be combined for the LINQ syntax to work. Throughout this blog post we will implement a method that works similar to Where(), a method of LINQ that is used to filter a data source. One of the major benefits of LINQ is that it can be used to query different types of data sources such as objects or relational databases. For brevity, we will not address all the aspects of such an implementation. Instead we will make do with an implementation that can be used to filter an in-memory data source, and while doing so highlight some important features of the C# language itself.

Our aim is to implement a method, *ThatHas()*, which can be consumed as seen below.

```csharp
var adults = customers.ThatHas(customer => customer.Age > 18); 
```

## Step 1 - Extension Methods

Traditionally, a method is called with input parameters like

```csharp
 var adults = ThatHas(customers, customer => customer.Age > 18); 
```

which is not the syntax we are looking for. We want our method to be callable as if it was a member of the type itself, Customers.ThatHas(). C# extension methods to the rescue! Extension methods are used to add methods to existing types, hence the name.

To achieve this, we create a separate static class that we call *extensions*. We also add a method stub which is the starting point of our implementation.

```csharp
public static class Extensions
{
	public static List<Customer> ThatHas(this List<Customer> customers, //otherParamters)
	{
		// implementation
	}
}
```

Take note of the *this* keyword of the first input parameter of the method above. This allows us to use our method the way we are looking for.

```csharp
 var adults = customers.ThatHas(...); 
```

> Note: Extension methods must be declared in a static context.

## Step 2 - Lambdas and delegates

The consumer of our method will also have to pass in a predicate to filter the list of customers by. Of course, different scenarios requires different filters and our method needs to support that. A lamda expression is perfect for this scenario. The syntax for a lambda expression is as following:

```csharp
// Syntax
(input-parameters) => expression

// Examples
number => number + 2;
customer => customer.Age > 18
```

Luckily for us, any lamba can be converted into a delegate type. Delegate types can be passed as input parameters to methods, which is exactly what we are looking for. Below we can see a lambda expression that is assigned to the Func delegate add2. The delegate accepts an integer and returns an integer, hence the Func<int, int> syntax.

```csharp
Func<int, int> add2 = number => number + 2;
```

For our scenario we are looking for a lambda that accepts a customer and returns a boolean value of whether a condition has been met. If the lambda returns true, the customer will be included in the result returned by *ThatHas()*.

```csharp
 Func<Customer,bool> isAdult = customer => customer.Age > 18;
```

We now have the building blocks to implement a first working example of *ThatHas()*. The method accepts a predicate, iterates the list of customers and adds each customer to the result only if the predicate returns true.

```csharp
public static List<Customer> ThatHas(this List<Customer> customers, Func<Customer, bool> predicate)
{
	var result = new List<Customer>();
	foreach (var customer in customers)
	{
		if (predicate(customer))
		{
			result.Add(customer);
		}
	}
	return result;
} 
```

*ThatHas()* can now be used like this

```csharp
var adults = customers.ThatHas(customer => customer.Age > 18)
```

> There are a lot of details to this step that is too elaborate for this blog post.Please visit [Microsoft official documentation](https://learn.microsoft.com/en-us/dotnet/csharp/language-reference/operators/lambda-expressions) for details regarding lambdas, functions and delegates.


## Step 3 - IEnumerable and iterator methods

Currently, our extension method only accepts a List of customers. However, we could easily support multiple collection types of customers (lists, sets, arrays etc.) by accepting an IEnumerable<Customer> instead. IEnumerable is the base interface for collections supporting iteration.

Along the same lines, the method should not return a specific class implementation and we change the return type to IEnumerable as well. To return IEnumerable instead of List, we use the *yield return* keyword.

```csharp
public static IEnumerable<Customer> ThatHas<Customer>(
	this IEnumerable<Customer> customers, 
	Func<Customer, bool> predicate)
{
	foreach(var customer in customers)
	{
		if(predicate(customer))
		{
			yield return customer;
		}
	}    
}
```

These last changes have turned *ThatHas()* into an _iterator method_ as it now returns a source for enumeration instead of a List. Consequently, it will no longer be possible to have items accessible by index. This is of no concern to us as our filtering logic does not require such feature. Should a consumer of *ThatHas()* require indexing they could enumerate in a number of ways, e.g. by utilizing .*ToList()* or .*FirstOrDefault()* on the IEnumerable<Customer>.

```csharp
var adults = customers.ThatHas(x => x.Age> 18);
var firstAdults = adults[0]; //Not possible
 
// Use ToList() to create a List from IEnumerable
var adults = customers.ThatHas(x => x.Age> 18).ToList();
var firstAdults = adults[0]; //Possible

// Get first element on the IEnumerable if present
var first = customers.ThatHas(x => x.Age> 18).FirstOrDefault();
```

## Step 4 - Generics
Our implementation looks decent, but we still have one major problem. The method only works for class of type Customer, but we would like it to be applicable for all C# types as seen below.

```csharp
 new List<int>() { 1, 2, 3 }.ThatHas(number => number > 2);    
    
 new List<string>() { "one", "two", "three" }.ThatHas(str => str.Length > 2);
    
 new List<Person>().ThatHas(person => person.Birthday.Year > 1980); 
```
Generic methods allows us to do exactly that. A generic method is a method that is called with a given type parameter. In the following example we see how the generic IsTheSame()-method is callable by both int and string as type. Take notice of IsTheSame<T>.

```csharp
public class Comparer
{
	public bool IsTheSame<T>(T value1, T value2)
	{
		return value1.Equals(value2);
	}
}

var comparer = new Comparer();

// Called with int as type
var numbersMatch = comparer.IsTheSame(1,2);

// Called with string as type
var stringsMatch = comparer.IsTheSame("string1","string2");
```

Like methods, classes can also be generic. As seen in the example below, *IsTheSame()*-method will have the type of its input parameters set by the type parameter of the class (see Comparer<T>). Strictly speaking, *IsTheSame()* method seen below is no longer a generic method as its input parameters are locked to the type parameter of the class after the class has been instantiated.


```csharp
public class Comparer<T>
{
	public bool IsTheSame(T value1, T value2)
	{
		return value1.Equals(value2);
	}
}

// Called with int as type
var numberComparer = new Comparer<int>();

// Called with string as type
var stringComparer = new Comparer<string>(); 

numberComparer.IsTheSame(1, 2);
stringComparer.IsTheSame("1", "2");

numberComparer.IsTheSame("1", "2"); //compile error
stringComparer.IsTheSame(1, 2);  //compile error
```

Finally, we update *ThatHas()* to be generic and we end up with our final implementation.

```csharp
public static IEnumerable<TSource> ThatHas<TSource>(
    this IEnumerable<TSource> source, 
    Func<TSource, bool> predicate)
{
	foreach(var element in source)
	{
		if(predicate(element))
		{
			yield return element;
		}
	}    
}
```

## Closing

*ThatHas()* is now a generic iterator extension method which accepts a generic delegate as input parameter.

Lets close this post by comparing the method signatures of our *ThatHas()* and *Where()* from LINQ:

```csharp
// ThatHas()
public static IEnumerable<TSource> ThatHas<TSource>(
    this IEnumerable<TSource> source, 
    Func<TSource, bool> predicate)

// Where()
public static IEnumerable<TSource> Where<TSource>(
    this IEnumerable<TSource> source, 
    Func<TSource, bool> predicate)  
}
```

It seems that we now are at a point that resembles *Where()* quite a bit...

tech.blog

web development, .NET and UX

Skip(), Take() and the poor performance it brings

JavaScript Proxy

It looks like a developer designed it!

Let's pipe!

LINQ - The building blocks