SVGs got quite popular in recent years. They have several advantages over traditional image formats and are widely used from icons to illustrations. If you ever inspected one, you might have noticed a `path` element with a `d` attribute with a long cryptic text of some letters and some kind of coordinates.

```html

<svg viewBox="0 0 100 100">
  <path fill="none" stroke="black"
    d="M 10,30
       A 20,20 0,0,1 50,30
       A 20,20 0,0,1 90,30
       Q 90,60 50,90
       Q 10,60 10,30 z"
    />
</svg>
```

The `d` property represents the "path definition" and consists of multiple path commands. The [MDN documentation on path commands](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#path_commands) is quite good and gives you a great overview over the types of commands. In short: The definition defines how the SVG should draw lines and arcs. However, it can get quite difficult to understand and to tell how an SVG will look like.

The same happened to Mathieu Dutour, as he wondered what the commands exactly mean and how they work. So he created a neat tool called [SVG Path Visualizer](https://svg-path-visualizer.netlify.app/). You can paste in any path definition and it will explain it to you step by step.

<article class="c-callout">
    <img class="c-callout__image" alt="Preview of SVG Path Visualizer" src="https://svg-path-visualizer.netlify.app/og-image.png" loading="lazy" />
    <a class="c-callout_link" target="_blank" rel="noreferrer noopener" href="https://svg-path-visualizer.netlify.app/">
        <h2 class="c-callout__title">SVG Path Visualizer</h2>
    </a>
    <p class="c-callout__description">Enter an SVG path data (the string inside the `d` attribute) to visualize it and discover all its different commands.</p>
</article>

Check it out and if you find it useful, star the [SVG Path Visualizer Repository on GitHub](https://github.com/mathieudutour/svg-path-visualizer).

**Resources**

* [SVG Path Visualizer](https://svg-path-visualizer.netlify.app/)
* [MDN web docs: Path commands](<https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#path_commands>)

SVG Path Visualizer


Lately I have been renewing my knowledge of different sorting algorithms. During my studies I came across this neat [visualization of 8 different sorting algorithms on Toptal](https://www.toptal.com/developers/sorting-algorithms).

They visually demonstrate how these algorithms operate on different kinds of data sets like random input, nearly sorted input or reversely sorted input. From these different variations you can see, that there is no true best sorting algorithms. But each one has different strengths and weaknesses.

Be sure to check it out and give it a try!

**Resources**
* [Sorting Algorithms Animations](https://www.toptal.com/developers/sorting-algorithms)

8 different sorting algorithms visualized.

Sorting Algorithms visualized


Recently I updated my blog to the latest [Next.js 12.1](https://nextjs.org/blog/next-12-1), which has been released recently. Locally, running `next build` still worked fine. However, my GitHub Actions started to fail with the message "Failed to load next.config.js".

![Error output saying: Failed to load next.config.js](/assets/images/failed-to-load-next-config-js.png)

After searching and finding [this issue on GitHub](https://github.com/colbyfayock/next-wordpress-starter/issues/274), it was clear that there seemed to be an issue with the Node version, as [Next.js requires at least Node.js 12.22.0 or later](https://nextjs.org/docs/getting-started#system-requirements). Luckily, the [setup-node action](https://github.com/actions/setup-node), provides the possibility to specify the node-version which should be used. By default it uses the node version from PATH. This was `v10.24.1` in my case.

I could resolve my issue by specifying at least a fixed major version like that:

```
- name: Install and Build
  uses: actions/setup-node@v2
  with:
    node-version: "16"
```


What to do in case you encounter this problem?

Failed to load next.config.js in GitHub Action


This talk will be very helpful for anyone who has to speak in front of an audience. It will highlight several Sins to avoid during the presentation. Following the suggestions, you will have a more comfortable time as the speaker and it will be a more pleasant experience for the audience.

## Info about the Talk

### Title
The Seven Deadly Presentation Sins

### Duration
Roughly one hour

### Avaialble on
YouTube - [The Seven Deadly Presentation Sins](https://www.youtube.com/watch?v=v1Elm3YlR-U&list=PLl0AtsmuedN4lbpkR8lg1hyE-ZCrh9ebd&index=8&t=211s&ab_channel=NDCConferences)

### Description

> What makes a great presentation? More importantly, what are the elements that can destroy a great presentation, even if the content itself is technically sound?
>
> In this session Samantha and Andrew Coates demonstrate seven sins that must not be committed in a presentation, why and how a presentation can suffer from committing them, and how to avoid accidently committing them
>
> -- <cite>excerpt from the YouTube description</cite>


Talk Recommendation: The Seven Deadly Presentation Sins


If you earn a living developing websites, one of your considerations should be website performance. An invaluable tool for investigating performance issues and finding bottlenecks is [WebPageTest](https://www.webpagetest.org/). If you have never heard of it before, be sure to check it out and give it a try.

It may seem quite complex and confusing at first, since they condense a lot of information into a few charts. However, it is well worth the effort to learn and understand it. If you are wondering what all those charts, lines and colors mean, be sure to read this awesome article ["Reading a WebPageTest Waterfall Chart"](https://calendar.perfplanet.com/2019/reading-a-webpagetest-waterfall-chart/) from Matt Hobbs. He explains every little piece of WebPageTest and helps you kickstart your web performance debugging capabilities with WebPageTest.

**Resources**

- [WebPageTest](https://www.webpagetest.org/)
- [Reading a WebPageTest Waterfall Chart](https://calendar.perfplanet.com/2019/reading-a-webpagetest-waterfall-chart/)


Learn how to improve website performance with the WebPageTest Waterfall Chart

Understanding the WebPageTest Waterfall Chart


If you are using VS Code and working with code formatters like [Prettier](https://prettier.io/) regularly, this extension might come in handy. If everything is setup correctly, the code formatters are straight forward and help tremendously. However, sometimes you might need to disable them, because they contradict some linter rules or are not setup correctly in a different project.

That's where the [Formatting Toggle](https://marketplace.visualstudio.com/items?itemName=tombonnike.vscode-status-bar-format-toggle) extension helps. It's statement is simple:

<blockquote class="c-quote" cite="https://marketplace.visualstudio.com/items?itemName=tombonnike.vscode-status-bar-format-toggle">
    VS Code extension that allows you to toggle the formatter (Prettier, Beautify, …) ON and OFF with a simple click.
    <small class="c-quote__source">https://marketplace.visualstudio.com/items?itemName=tombonnike.vscode-status-bar-format-toggle</small>
</blockquote>

That is all it does, but it does the trick. It adds a toggle to the VS Code Status Bar, that let's you quickly enable and disable formatters. Give it a try. It will surely be a useful addition.

**Resources**

- [VS Code Extension: Formatting Toggle](https://marketplace.visualstudio.com/items?itemName=tombonnike.vscode-status-bar-format-toggle)


VS Code Extension Tipp! Quickly toggle formatter on/off with 'Formatting Toggle'

VS Code Extension: Formatting Toggle


If you are interested in how the magic behind react works and what it takes to build your own basic version of react, be sure to check out [Build your own React on pomb.us](https://pomb.us/build-your-own-react/).

It is a fantastic read. You will learn to build your own react from the ground up. Starting with the `createElement` and `render` function and working your way up to function components and even hooks. A fair warning though, you will need a bit of time to go through the whole article. However, as a bonus you will find one of the best ways to present evolving code that I have seen in a long time.

**Resources**

- [Build your own React](https://pomb.us/build-your-own-react/)


Awesome post 'Build your own React' on pomb.us

pomb.us - Build your own React


If you routinely work with VS Code you might be familiar with the `CTRL + R` shortcut. By default it is configured to open the "File: Open Recent..." window. This is especially handy, if you work on multiple projects in parallel and want to switch between them quickly.

However, this functionality broke for me recently, after reinstalling my notebook. As it turns out, the culprit was an extension: The `eg2.vscode-npm-script` extension which improves npm support for VS Code. So why did it break exactly? The extensions adds several new keyboard shortcuts. Some of them use chords including the `CTRL + R` keys. This stopped VS Code from accepting the `CTRL + R` shortcut, because it was waiting for the second part of a chord.

The authors of the extension (from Microsoft) recognized in hindsight, that [this was a mistake](https://github.com/Microsoft/vscode/issues/60711) and recommend [in their README](https://github.com/Microsoft/vscode-npm-scripts) to remap the shortcut for these commands.

Now it is up to you to decide, if it is worth to keep the extension and remap the shortcuts or to remove it altogether. In my opinion it offers some interesting functionality, but can safely be removed, since VS Code offers great support for npm out of the box.

**Resources**

- [vscode/issue #60711](https://github.com/Microsoft/vscode/issues/60711)
- [Microsoft/vscode-npm-scripts](https://github.com/Microsoft/vscode-npm-scripts)


How to solve the problem, when CTRL+R shortcut is broken in VS Code

CTRL+R is broken in VS Code


Let's say that you have to find a list of all links on a page. This is a fairly basic task and can be solved in different ways. For our purposes, using Vanilla JS, we could either use `document.getElementsByTagName` or `document.querySelectorAll`. While the former returns a `HTMLCollection`, the latter returns a `NodeList`. They are similar enough for our example, so we'll go with `querySelectorAll`. Our code will look something like this:

```js
// let elements = document.getElementsByTagName("a")
// HTMLCollection(3) [a, a, a]

let elements = document.querySelectorAll("a")
// NodeList(3) [a, a, a]
```

That looks promising! As a next step, we want to get the `"href"` attribute from each link. So that we end up with a list of urls that page links to. Since we are well versed developers and want to use a functional approach, we use the `map` function. As a reminder, the map function will execute the callback for each element in the array and create a new array from the return values. Combined with arrow functions we get some concise, expressive code:

```js
let links = elements.map(elem => elem.getAttribute("href"));
// Uncaught TypeError: document.querySelectorAll(...).map is not a function
```

However, that will result in a nasty TypeError. But why? Both the `NodeList` and the `HtmlCollection` look like arrays and can even access single items with `elements[index]`. As it turns out, there are [iterable objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) as well as "array-like objects". Array-like objects have a `length` property and can access elements via an index, but don't have all the methods, that natural arrays have. Which is precisely the case with `NodeList` and `HtmlCollection`.

There are two quick and easy solutions (probably more, but those should be sufficient) to solve this problem:

## Array.from

<blockquote class="c-quote" cite="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from">"The Array.from() method creates a new, shallow-copied Array instance from an array-like or iterable object."</blockquote>

`"Array.from"` is a new built-in function in ES6 (polyfills for IE are available), which can convert the `NodeList` and other objects into actual arrays. With that, we are now able to finally use the map function to implement our logic.

```js
let elements = document.querySelectorAll("a");
let links = Array.from(elements).map(elem => elem.getAttribute("href"));
```

## Spread/Rest operator

The second solution utilizes the new spread and rest operators. By extracting the elements of a `NodeList` and immediately spreading it into a new array.

```js
let elements = document.querySelectorAll("a");
let links = [...elements].map(elem => elem.getAttribute("href"));
```

## Conclusion

Both solutions work fine for that example. The main take away is, that you should be aware that not everything that looks like an array at first glance, really can be used in all situations like an array. However, additions with ES6 like the spread operator make dealing with arrays (and objects) easier and more comfortable.

**Resources**
* [querySelectorAll MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)
* [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList)
* [Array.from](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
* [Spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)

NodeList are like arrays, but the are not arrays. So what to do?

Help! My NodeList is not an Array


If you ever wondered, why you can't add a file to git that you just created, it is probably somewhere ignored in a `.gitignore` file. But from what file and through which rule exactly? Luckily, it is possible to check that with `git check-ignore`.

The usage is quite straight forward. You pass it the path to a file. The command outputs the path if it is ignored.

```sh
> git check-ignore <pathname>
> git check-ignore -v <pathname>
```

If you use the verbose option `-v`, the command will additionally output, the exclude pattern that matched the path as well as the `.gitignore` file and the exact line number.

```sh
> git check-ignore -v .vscode/settings.json
.gitignore:4:.vscode    .vscode/settings.json
```

**Resources**

* [Git - git-check-ignore Documentation](https://git-scm.com/docs/git-check-ignore)

Find out who to use the git check-ignore utility

git check-ignore: a helpful utility


There is a neat functionality in Visual Studio that is quite helpful while debugging .Net applications. While the functionality itself has been around for a while, I am not sure that everyone working with Visual Studio is aware of it. It is possible to inspect the returned value of a method immediately after it has returned.

Suppose you have a method like `Calc` in the following example. The result of the expression on line 10 is immediately returned. However, during debugging, you might want to inspect the return value before it is passed into another method on line 3.

```c#
static void Main(string[] args)
{
    SomeOtherCalc(Calc(1, 2));
    var foo = "";
    // ...
}

static int Calc(int a, int b)
{
    return a + b;
}

static void SomeOtherCalc(int c)
{
    // ...
}
```

Traditionally, you could temporarily introduce a local variable `result`, store the computation and return `result` afterwards. However, that would require you to rebuild the project and introduce temporary unnecessary code.

```
// Possible, but we try to avoid that
static int Calc(int a, int b)
{
    var result = a + b;
    return result;
}
```

Instead, you can add a breakpoint on your expression on line 10. Once hit, you "Step Out" of the method. This will place the debugger on the line, where the method has been called (line 3). Exactly at this point, you can now inspect the returned value either via the "Immediate Window" by typing `$ReturnValue` or via the "Autos" window, where the value will also be displayed.

<figure>
    <img src="/assets/images/returned_value.png" alt="Inspect the returned value with Visual Studio Debugger">
    <figcaption class="c-caption">Inspect the returned value with Visual Studio Debugger</figcaption>
</figure>

With this useful functionality, you can inspect the return values of methods more easily without actually modifying the source code. Take note, that you won't be able to inspect the return value anymore as soon as you move the debugger forward.

**Resources**

* [How to see the value returned by a method in Visual Studio Debugger?](http://www.malgreve.net/2014/01/21/how-to-see-the-value-returned-by-a-method-in-visual-studio-debugger/)

Check out this useful tip on how the inspect the return value of a method in Visual Studio Debugger

Inspect the return value of a method in Visual Studio Debugger


Recently, I came across an - at first glance - startling interaction between `OrderBy` and `null`. Suppose you have a list of players with their name and number of losses. Since it is a legacy implementation, new players "Losses" are initialized with `null`.

```c#
class Player {
    public string Name { get; set; }
    public decimal? Losses { get; set; }
}

var allEntries = new List<Player>
{
    new Player { Name = "Player A", Losses = 5 },
    new Player { Name = "Player B", Losses = 8 },
    new Player { Name = "Player C", Losses = null },
    new Player { Name = "Player D", Losses = 1 },
    new Player { Name = "Player F", Losses = 10 },
};
```

We want to get the top 3 players with the lowest number of losses to reward them. We can easily achieve that by using `OrderBy` and `Take`.

```c#
var topEntries = allEntries
    .OrderBy(e => e.Losses)
    .Take(3)
    .ToList();
```

Normally, we would expect our `topEntries` to contain the Players "Player D", "Player A" and "Player B" with 1, 5 and 8 losses respectively. However, soon we realize, that actually "Player C" is the top player with his `Losses = null`. So if you ever have to sort by a nullable property, be sure to remember that `null` values are ordered first by default. In the example, a fix would be trivial by filtering out null values before ordering.

```c#
var topEntries = allEntries
    .Where(e => e.Losses != null)
    .OrderBy(e => e.Losses)
    .Take(3)
    .ToList();
```

## A deeper dive

How does that actually work internally? `OrderBy` uses an `IComparer` to compare entries and order them properly. It is possible to specify a custom implementation as the second argument for the `OrderBy` method. If no argument is provided, it will fall back to `Comparer<decimal?>.Default`. Since our type is nullable, this will be a `NullableComparer<decimal?>`. You can checkout the whole logic and implementation [on GitHub](https://github.com/microsoft/referencesource/blob/master/mscorlib/system/collections/generic/comparer.cs). The important part is the `Compare` method.

```c#
// NullableComparer<T> implementation
public override int Compare(Nullable<T> x, Nullable<T> y) {
    if (x.HasValue) {
        if (y.HasValue) return x.value.CompareTo(y.value);
        return 1;
    }
    if (y.HasValue) return -1;
    return 0;
}
```

If you are unsure, what the return values of -1, 0 and +1 mean in that context, you can always refer to [the Documentation](https://docs.microsoft.com/en-us/dotnet/api/system.icomparable?view=netframework-4.8). Basically, if the value is less than zero, "x" is ordered first. If the value is greater than zero, "y" is ordered first. So if we examine the `NullableComparer<T>::Compare` implementation, we get the following results:

* If "x" is **NOT NULL** and "y" is **NOT NULL** ➡ The smaller numeric value will be ordered first
* If "x" is **NOT NULL** and "y" is **NULL** ➡ "y" (null) is ordered first
* If "x" is **NULL** and "y" is **NOT NULL** ➡ "x" (null) is ordered first
* If "x" is **NULL** and "y" is **NULL** ➡ Both are null and don't need to be reordered.

And that is the explanation, why `null` values are ordered first. As you see, with Microsoft publishing a lot of their source code on GitHub, it is straight forward to find the implementation of Framework functionality and reason about it.

**Resources**

* [MSDN Enumerable.OrderBy documentation](https://docs.microsoft.com/en-us/dotnet/api/system.linq.enumerable.orderby?view=netframework-4.8)
* [Comparer of T source code](https://github.com/microsoft/referencesource/blob/master/mscorlib/system/collections/generic/comparer.cs)
* [IComparable Interface documentation](https://docs.microsoft.com/en-us/dotnet/api/system.icomparable?view=netframework-4.8)

An interesting observation concerning OrderBy and null interaction in C#

OrderBy and null in C#


If you work on a decently sized TypeScript application, chances are that your source directories are nested quite a bit and you will have various components which need to import something from completely different folders. So if you find yourself writing a lot of imports with `../../../`, then this tip might be helpful for you!

A useful tool in that case are import aliases. If you are using webpack these are part of the [Module Resolution](https://webpack.js.org/configuration/resolve/). [Justin Tulk wrote a great post](https://medium.com/@justintulk/solve-module-import-aliasing-for-webpack-jest-and-vscode-74007ce4adc9) about import aliasing with webpack, VS Code and Jest, so be sure to check that one out!


Webpack aliases are not that straight forward with TypeScript. Find out here what you need to do.

Use webpack aliases with TypeScript


Christmas time is here. Work is going slow. There is not a lot of stuff to do. If that applies to you and you enjoy a programming challenge, then I have news for you! Check out this years version of [Advent of Code](https://adventofcode.com/)! Each day a new puzzle will be published with two parts. You can earn stars for each completed puzzle and even compete on a leaderboard (the first 100 solutions receive more stars).

The author, [Eric Wastl](http://was.tl/), puts in a lot of effort into Advent of Code each year. So show him some love and spread the word!

<blockquote class="c-quote" cite="https://adventofcode.com/2019/about">
Advent of Code is an Advent calendar of small programming puzzles for a variety of skill sets and skill levels that can be solved in any programming language you like. People use them as a speed contest, interview prep, company training, university coursework, practice problems, or to challenge each other.
<small class="c-quote__source">https://adventofcode.com/2019/about</small>
</blockquote>

I will also join in on the fun and publish my solutions on GitHub at [zlypher/advent-of-code](https://github.com/zlypher/advent-of-code). However, I am already a few days behind, so don't count on it being completely up to date.

If you are stuck or simply want to exchange some thoughts and solutions with other people, I encourage you to check out the [Advent of Code on Reddit](https://www.reddit.com/r/adventofcode/). Don't be intimidated though, there are some impressive solutions posted.

**Resources**
* [Advent of Code](https://adventofcode.com/)
* [Eric Wastl](http://was.tl/)
* [Advent of Code on Reddit](https://www.reddit.com/r/adventofcode/)

Checkout Advent of Code, an Advent calendar of small programming puzzles

Advent of Code 2019


Let's face it: The clipboard is one of the most important tools for every developer. Traditionally you could only paste the last item you copied, which is quite limiting. To solve this limitation, there exists a wide variety of utility apps and programs. But those are not necessary anymore (if you work on Windows 10).

Already since October 2018, Windows 10 natively supports a feature called "Clipboard history", which enables you to select the entry to paste from your previous copied elements. This feature is disabled by default, but can easily be enabled via `Settings > System > Clipboard` by toggling the `Clipboard history` switch. From there on, you can use `Windows key + V` and select the appropriate entry to paste.

You even have the possibility to sync your clipboard history across multiple devices. So give it a try or read up on all the nitty gritty details on [this article from Windows Central]([How to use the new clipboard on Windows 10 October 2018 Update](https://www.windowscentral.com/how-use-new-clipboard-windows-10-october-2018-update)).

**Resources**
* [How to use the new clipboard on Windows 10 October 2018 Update](https://www.windowscentral.com/how-use-new-clipboard-windows-10-october-2018-update)

Supercharge your clipboard usage with the Windows 10 Clipboard History

Windows 10 Clipboard History


If you are looking for a quick way, to execute NPM scripts from within VS Code, this tip is for you! There is a neat little feature included in VS Code, that is quite useful but disabled by default. The "NPM Script Explorer". It simply displays all available scripts from your `package.json` and makes them executable via a button click.

<figure>
    <img src="/assets/images/npm_scripts_explorer.png" alt="Example view of NPM Scripts explorer in VS Code">
    <figcaption class="c-caption">Example view of NPM Scripts explorer in VS Code</figcaption>
</figure>

To enable the NPM Script Explorer, go to VS Code Settings (`File > Preferences > Settings`). Search for "npm.enableScriptExplorer" and enable the setting "Npm: Enable Script Explorer". That's all there is to it. Now you can simply execute them, by clicking on the corresponding play button.


Learn how to easily run NPM scripts from VS Code with the NPM Script Explorer

Easily run NPM scripts from VS Code with the NPM Script Explorer


If you select some text on your website or blog, it will get a default styling from your browser. If you are on Chrome/Windows, this will most likely be a dark blue background and a white text color. Did you know, that you can change this styling via CSS? The magic word is `::selection` and as a matter of fact, it is quite [well supported across all browsers](https://caniuse.com/#feat=css-selection).

The `::selection` pseudo element allows you to style the highlighted text. This is actually quite simple:

```css
::selection {
    background-color: #130BB0;
    color: #EFF5F5;
}
```

Pretty straight forward. Checkout [this CodePen](https://codepen.io/zlypher/pen/yZQBbg) and play around to get a feeling how it works. However, only a few css properties are supported on the `::selection` pseudo element:
* color
* background-color
* cursor
* caret-color
* outline
* text-decoration
* text-emphasis-color
* text-shadow

Just don't forget about Accessibility and be sure to pick a [sufficient contrast ration](https://webaim.org/resources/contrastchecker/). So experiment and play around with it. It can add a nice touch to your website.

**Resources**
* [::selection CodePen](https://codepen.io/zlypher/pen/yZQBbg)
* [::selection](https://developer.mozilla.org/en-US/docs/Web/CSS/::selection)
* [caniuse ::selection CSS pseudo-element](https://caniuse.com/#feat=css-selection)

Use the ::selection pseudo element to add a fancy highlight to your blog

The ::selection pseudo element


Today I stumbled over this great article ["Ten Soft Skills That Will Shape Your Career"](https://benmccormick.org/2019/04/15/soft-skills) by Ben McCormick. He lists and explains ten non-technical topics, that had a clear positive impact on his career. I largely agree with his list and think that those skills would be very helpful, for all the developers I interact with on a daily basis. My top three skills from that list are:

1. Initiative
2. Continual Learning
3. Clear Communication

Want to go into more detail and find out about the remaining seven skills? Check out his article and let me know what you think!

Ten Soft Skills That Will Shape Your Career by Ben McCormick


*Note: This article is aimed at developers working with Umbraco and requires intermediate knowledge.*

Creating complex layouts is a difficult task. Creating complex layouts and let content editors modify the layout is even more difficult. Luckily, Umbraco provides a special Property Editor exactly for this use case: [Grid Layout](https://our.umbraco.com/documentation/getting-started/backoffice/property-editors/built-in-property-editors/grid-layout).

## Grid Layout

Grid Layout gives the developers and content editors a lot of flexibility. The developers can configure the basic structure of the layout. They can define layouts for columns and rows as well as useable grid editors. The content editors can then create as many rows/columns as they like (within the predefined structure), and use the available grid editors. They can easily create, edit, order and remove those editors, giving them great flexibility in setting up pages and improving their workflow. While the default implementation of the Grid Layout is based on a Bootstrap grid, all views can easily be changed by developers to accommodate different requirements.

Umbraco ships with a few default grid editors out of the box (see [grid.editors.config.js](https://github.com/umbraco/Umbraco-CMS/blob/v8/dev/src/Umbraco.Web.UI.Client/src/config/grid.editors.config.js)). Those include elements like `Headline`, `Image`, `Rich text editor` and some more. With these basic elements you can already cover quite some use cases. However, you might want create more sophisticated components, which consist of multiple different properties. Luckily, this is also possible and that's where [LeBlender](https://our.umbraco.com/packages/backoffice-extensions/leblender/) comes into play.

## LeBlender

While it is certainly possible to [create your own custom grid editors from scratch](https://our.umbraco.com/documentation/getting-started/backoffice/property-editors/built-in-property-editors/grid-layout/Build-Your-Own-Editor), it is quite tedious and might take some time to get right. However, the Backoffice extension "LeBlender" enables a quick and easy way to configure complex custom grid editors.

<figure>
    <img src="/assets/images/leblender.png" alt="Backoffice view of LeBlender. It allows to create custom grid editors with multiple configurable properties">
    <figcaption class="c-caption">Backoffice view of LeBlender. It allows to create custom grid editors with multiple configurable properties</figcaption>
</figure>

While the custom grid editors can be configure via the backend, the developers has full control over the view logic of the custom editor. By default, LeBlender creates a razor view file which can be used to customize the rendering. It is also possible to define a Controller which gives you even more flexibility if you use a lot of custom logic inside your grid editor.

So if you are regularly working with Umbraco and are using Grid Layout (or thinking about using it), definitely check out LeBlender and give it a try. It is quite easy to get started with it and will save you a lot of time in the long run.

**Resources**
* [LeBlender Umbraco Extension](https://our.umbraco.com/packages/backoffice-extensions/leblender/)
* ~~Make your Umbraco Grid Layout smarter with LeBlender 1.0.0~~ **Not Available anymore**
* [Grid Layout documentation](https://our.umbraco.com/documentation/getting-started/backoffice/property-editors/built-in-property-editors/grid-layout)

LeBlender provides an easy interface to create complex Grid Editors for Umbraco

Easier Grid Editors with LeBlender


If you are working professionally with TypeScript and have access to [egghead.io](https://egghead.io), I strongly recommend you the Course [Advanced Static Types in TypeScript](https://egghead.io/courses/advanced-static-types-in-typescript) by Marius Schulz. As long as you haven't mastered TypeScript in every detail yet, I am sure that you will learn new interesting features of TypeScript. The `never` Type, the usage of Discriminated Union Types, and many more topics are covered in this advanced course. Marius does a really good job in explaining them and their usage.

Give it a try ⇒ [Advanced Static Types in TypeScript](https://egghead.io/courses/advanced-static-types-in-typescript)

Checkout the fantastic course about TypeScript by Marius Schulz

Advanced Static Types in TypeScript on egghead.io


Recently, a new interesting VS Code extension has been added to the Marketplace: [Browser Preview](https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview). As the name suggests, it enables you to have a Google Chrome window inside your VS Code instance! That's pretty neat! Apart from that, it is also debuggable via the [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome).

Currently, it is still in preview and some users are reporting performance and usability issues. However, it is under active development and an interesting project. I'll definitely keep an eye on it. Be sure to give it a try and support the author if you like it!

**Resources**
* [Browser Preview - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview)
* [vscode-browser-preview Repository](https://github.com/auchenberg/vscode-browser-preview)



Checkout this new VS Code Extension Browser Preview

VS Code Extension: Browser Preview


I recently realized, that - at least for me - conference talks and lectures are an invaluable help in discovering interesting topics and expanding my knowledge in various areas. Now the main problem lies in the discovery of the most interesting ones. There are literally hundreds of videos available via YouTube and other platforms.

So I made a resolution for 2019 to watch at least 1 hour worth of talks each week. The most interesting ones, which inspired me or taught me something new, will be collected in a curated playlist on YouTube as well as on my blog. So stay tuned for some awesome software engineering talks! You can find most of the list, with a short description of each video, on the new ["Talks" page](/talks) or you can checkout the [YouTube playlist "Software Engineering Talks and Lectures"](https://www.youtube.com/playlist?list=PLl0AtsmuedN4lbpkR8lg1hyE-ZCrh9ebd).

Do you have some favourite talks? Send me a suggestion and I'll be happy to check it out!

Introducing the curated playlist of interesting talks and lectures in Software Engineering

Software Engineering Talks and Lectures


I have some great news for everyone interested in the internals of React and JavaScript in general! [Dan Abramov](https://mobile.twitter.com/dan_abramov), one of the software engineers behind [ReactJS](https://reactjs.org/), started his own personal blog since the end of November. Ever wondered, how React can tell the difference between a Class from a Function? Or how `setState` knows what it should do? Then definitely check out his posts on [Overreacted](https://overreacted.io) and follow him on [Twitter](https://mobile.twitter.com/dan_abramov)!

Checkout Dan Abramovs new personal blog - Overreacted

Overreacted - Personal blog by Dan Abramov


Popular CSS frameworks like [Bootstrap](https://getbootstrap.com/) often include a functionality for tooltips. Those tooltips are controlled via JavaScript. They appear if you hover the element with the mouse cursor and vanish as soon as your mouse leaves the element. That might be a bit of a problem, if you want to customize the HTML/CSS of the tooltip and need to inspect the element. Since as soon as you try to inspect it, it is gone.

Today, I will show you two quick and easy ways (they are pretty similar though) to work around this issue.

## Utilizing setTimeout

The first solution has already been posted on [CSS Tricks as Timed Debugger](https://css-tricks.com/set-timed-debugger-web-inspect-hard-grab-elements/), but it is still worth repeating. What we want to do, is freeze any changes to the DOM, as long as we want to inspect it. You might have noticed it already, that happens when you place `debugger;` somewhere in your JS code or hit a breakpoint.

<blockquote class="c-quote" cite="https://css-tricks.com/set-timed-debugger-web-inspect-hard-grab-elements/">
A debugger; statement, when the DevTools are open, kinda freezes the DOM. No more events are fired and script excecution is completely paused.
<small class="c-quote__source">https://css-tricks.com/set-timed-debugger-web-inspect-hard-grab-elements/</small>
</blockquote>


We just need a way to delay it, so that we have a chance to open the tooltip. Luckily, this is quite easy with `setTimeout`:

```js
> setTimeout(() => { debugger; }, 3000)
```

This way, you have enough time to open the tooltip. As soon as the code executes, the `debugger;` statement is hit.

## Pause script execution

There is another way to trigger the same behaviour: You can use the shortcut for your dev tools to "pause script execution". For Google Chrome this happens to be `F8`. So hover over the desired element to open the tooltip, press `F8` and you are free to inspect the tooltip as you wish.

<figure>
    <img src="/assets/images/pause_script.png" alt="Pause script execution tooltip from Chrome DevTools">
    <figcaption class="c-caption">Pause script execution tooltip from Chrome DevTools</figcaption>
</figure>

## Conclusion

So both tricks work basically the same and are really easy to use. They both utilize the fact, that the DOM is frozen, as long as the JS execution is stopped on a breakpoint. So give it a try!

**Resources**
* [Bootstrap Tooltips](https://getbootstrap.com/docs/4.1/components/tooltips/)
* [Set a Timed Debugger To Web Inspect Hard-To-Grab Elements](https://css-tricks.com/set-timed-debugger-web-inspect-hard-grab-elements/)

Every wondered how to debug those tooltips, that keep vanishing as soon as you try to inspect them?

How to debug those pesky tooltips


There are quite a lot of different tools and scanners out there for us web developers, to monitor best practices on our websites. Another one of those scanners - and pretty new at that - is [webhint.io](https://webhint.io). It features an online scanner as well as a cli tool (neatly packaged via npm) which you can run locally or on your build servers.

Currently, it tests for various issues in the categories:
* Accessibility
* Interoperability
* PWA
* Performance
* Security

But will it kill/replace Lighthouse and similar tools? Frankly, I don't know and I am not 100% convinced about it yet either. But it definitely looks promising, so keep an eye on it!

**Resources**
* [webhint.io](https://webhint.io)

Keep an eye out on the new website scanner webhint.io

Webhint.io - another website scanner


## The Problem

For our web application, we use Highcharts to render beautiful charts. Some charts are reused multiple times across the website, so we decided to prerender them via [highcharts/node-export-server](https://github.com/highcharts/node-export-server). Due to operational reasons, it is hosted inside a Windows Service via [Azure/iisnode](https://github.com/Azure/iisnode). This process works reasonably well. However, we noticed, that there are errors logged, although the charts seem to be rendered just fine:

```
[error] phantom worker 2 error - SetProcessDpiAwareness failed: "COM error 0x80070005  (Unknown error 0x0ffffffff80070005)"
```

## Investigation of the Error

Naturally, we wanted to find the cause of this error, if there are some issues we should be aware of and if there is anything we could do to avoid it.

A quick search reveals, that there are quite some GitHub repositories, that experience similar issues. In the end, most of them refer to an issue in PhantomJS. The most prominent discussion is in the [issue #14095](https://github.com/ariya/phantomjs/issues/14095). If you don't know: "PhantomJS (phantomjs.org) is a headless WebKit scriptable with JavaScript." (from Phantom JS README). Incidentally, it is used by the Highcharts Node.js Export Server to render the charts. And unfortunately, this issue occurs, if PhantomJS is run from a service in Windows. Which happens to be just what we are doing.

## Resolving the Error

### Pass flag to PhantomJS

However, there seems to be a way around this issue. According the issue, it is possible to pass `-platform windows:dpiawareness=0` to PhantomJS. So can we actually configure this, since the phantomjs process is spawned by the node-export-server? The actual call happens in `phantompool.js`:

```js
// https://github.com/highcharts/node-export-server/blob/2.0.16/lib/phantompool.js
worker.process = phantomjs.exec(settings.worker, (__dirname + '/../'));
```

There is no way to configure additional options, so we are out of luck here.

### Windows Registry

There seems to be some additional way to work around this issue via the Windows Registry or Windows Policies, but I wasn't able to find out the specifics. If you have more luck on this front, please let me know.

### Fork node-export-server

Another possibility would be to fork the node-export-server repository on GitHub and implement the desired functionality. However, this would cause additional overhead and it seems unlikely, that this would be merged back into the main repository. Since it seems that the engineers from Highcharts are thinking about moving to a different headless browser like Chrome (with its rather new headless mode). However, there doesn't seem to be a clear path or timeline yet. Follow the [issue #57 on GitHub](https://github.com/highcharts/node-export-server/issues/57) for further updates.

## Result

In the end, we decided to live with these errors for now, as there doesn't seem to be any problem with the chart generation itself. Workarounds would require further development and testing resources which are currently not available.

**Resources**
* [node-export-server Repository](https://github.com/highcharts/node-export-server)
* [iisnode Repository](https://github.com/Azure/iisnode)
* [PhantomJS Repository](https://github.com/ariya/phantomjs)


Find out where these SetProcessDpiAwareness exception in node-export-server are coming from

COM Exception with IISNode and node-export-server


[Umbraco](https://umbraco.com/products/umbraco-cms/) is a widely used ASP.NET CMS. If you worked with Umbraco for some time, you might have noticed, that there are various layers of caching and it can be confusing where data is stored.

So Umbraco has four layers, where data is stored or cached:
1. Database table `[dbo].[cmsPropertyData]`
2. Database table `[dbo].[cmsContentXml]`
3. XML file `App_Data/umbraco.config`
4. In-Memory cache



## cmsPropertyData

The `[dbo].[cmsPropertyData]` table resides in the umbraco database. It holds all data stored in the properties of all your nodes. Take note, that all previous versions are stored as well. So if you change something in the backend, it will be reflected in this table. However, this table is not actually used for the frontend. You want to take a look at `[dbo].[cmsContentXml]` for that.

## cmsContentXml

Once you publish a node, Umbraco gathers all the information for this node, and stores it as a XML structure in the `[dbo].[cmsContentXml]` table. So you will have on entry per node with its node id and all of its data. This might be the source for the data in your application, but it also might be the `umbraco.config`.

## umbraco.config

The `umbraco.config` is basically the same as the `[dbo].[cmsContentXml]` but stored as a file on disk. By default, this file is created and used to reduce the load on the database. However, this can be disabled via a `Web.config` entry.

## Conclusion

So this was a short introduction of the different layers of Umbraco. You might not encounter it in your day to day work, but if you need to change something directly in the database, it might be good to have an idea where the data might be cached.

**Resources**
* [Umbraco CMS](https://umbraco.com/products/umbraco-cms/)
* [Umbraco CMS - GitHub Repository](https://github.com/umbraco/Umbraco-CMS)

Umbraco: Layers of Caching


Today it like to share short [code snippet](https://gist.github.com/zlypher/0b9b295e2ee39da4125105e88d8d7d3e) with you. You can use it to find all elements with a specific css property value. In my example, I want to find all elements with a custom `z-index`. So let's jump right in. The snippet is pretty straight forward:

```js
(() => {
    const elems = Array.from(document.querySelectorAll("*"))
        .filter(elem => window.getComputedStyle(elem).zIndex !== "auto")
        .map(elem => {
            return {
                elem: elem,
                style: window.getComputedStyle(elem),
            };
        });
    console.table(elems);
})();
```

## Explanation

In the gist, you will find another variations with slightly different tradeoffs. For sake of brevity, we will only consider this one. So let's step through it.

We create a new function with the nifty arrow syntax. This could easily be written as `(function() {` for older browser though.

```js
(() => {
```

Next up we query all elements which match the `*` selector (hint: all of them). And create an array from the returned `NodeList`.

```js
    const elems = Array.from(document.querySelectorAll("*"))
```

Here comes the actual fun part. With `window.getComputedStyle(elem)`, the browser provides an interface to fetch all css declarations which are applied to the element (including user agent stylesheets, so don't wonder, why there are way more values than you expected). We can now access all css properties in three different ways (see below). With `.zIndex`, we fetch the declartion for the `z-index` and check if it is not set to `auto`. `auto` is the default value from the HTML specification and applied by the browser, so we want to filter all those elements out, where it is still the browser default value.

```js
        .filter(elem => window.getComputedStyle(elem).zIndex !== "auto")
```

Now we map over all found elements and create a new object with a reference to the element as well as the style declaration for each element.

```js
        .map(elem => {
            return {
                elem: elem,
                style: window.getComputedStyle(elem),
            };
        });
```

At last, we can output our results or continue working with them.

```js
    console.table(elems);
```

And finally end the function and call it, to make it an IIFE (immediately invoked function espression).

```js
})();
```

## Output

If you run this snippet in the console on [https://github.com](https://github.com) for example, you will receive an output like that:

<figure>
    <img src="/assets/images/elems_by_css.png" alt="Example output from the console from the snippet, from github.com">
    <figcaption class="c-caption">Example output from the console from the snippet, from github.com</figcaption>
</figure>

## window.getComputedStyle

The function `window.getComputedStyle(elem)` returns a `CSSStyleDeclaration`, but how can you actually extract the css property values? There are actually three different ways to do that:

* via a function `getPropertyValue(propName)`
* via index access `cs[propName]`
* via property `cs.propName`

<blockquote class="c-quote" cite="https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle">"The CSS property values may be accessed using the getPropertyValue(propName) API or by indexing directly into the object such as cs['z-index'] or cs.zIndex."</blockquote>

**Resources**
* [Window/getComputedStyle on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle)
* [CSSStyleDeclaration on MDN](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration)
* [Gist with Code Example](https://gist.github.com/zlypher/0b9b295e2ee39da4125105e88d8d7d3e)

How to find all elements with a specific css property

Find elements by css properties


Some time ago, I wrote that one should add `rel="noopener noreferrer"` to external links. And as it so happens, I added this attribute manually for all external links on this blog created with Jekyll. All in all, quite tedious.

Today I was wondering, if there is a possibility to automatically add those attributes during the build process. Shouldn't be too difficult to implement, but it still would be neat to have a plugin readily available for such a functionality.

And sure enough, I found [d-ogarkov/jekyll-extlinks](https://github.com/d-ogarkov/jekyll-extlinks) which is easy enough to install and automatically adds the desired attributes to external links. The last update to the GitHub Repository may already be quite old, but the plugin works as expected. If you are looking for an alternative with more recent contributions, you could also take a look at [keithmifsud/jekyll-target-blank](https://github.com/keithmifsud/jekyll-target-blank). It seems to be a bit more sophisticated, but also very easy to integrate.

**Resources**
* [Post about rel="noopener noreferrer"]({% link _posts/2017-11-14-secure-target-blank-with-noopener-noreferrer.md %})
* [d-ogarkov/jekyll-extlinks](https://github.com/d-ogarkov/jekyll-extlinks)
* [Alternative: keithmifsud/jekyll-target-blank](https://github.com/keithmifsud/jekyll-target-blank)

Use jekyll-extlinks to automatically add attributes for external links with Jekyll

Automatically add attributes for external links with Jekyll


[Azure DevOps](https://azure.microsoft.com/services/devops/) is a CI/CD solution from Microsoft which seemlessly integrates with Azure. In his blog post [Azure DevOps Continuous Build/Deploy/Test with ASP.NET Core 2.2 Preview in One Hour](https://www.hanselman.com/blog/AzureDevOpsContinuousBuildDeployTestWithASPNETCore22PreviewInOneHour.aspx), Scott Hanselman guides us through his process of setting up Azure DevOps for his podcast website.

And another important point: Azure DevOps is free for Small Teams and Open Source projects. OS projects even geht unlimited minutes for their CI/CD. So definitely give it a try!


Azure DevOps Continuous Build/Deploy/Test with ASP.NET Core 2.2 Preview in One Hour from Scott Hanselman

Setup Continuous Integration with Azure DevOps


Checkout this awesome anecdote and blog post by Stephen Mann ~~Don't Do This in Production /stephenmann.io/post/dont-do-this-in-production/~~ **Not Available anymore**

Don't Do This in Production from Stephen Mann

Don't Do This in Production


Checkout my new small [side project "Bool Checker"](https://zlypher.github.io/bool/).

## What does it do?

"Bool Checker" basically takes a boolean expression like `a && b` or `foo || (bar && baz)` and determines, what these expressions would evaluate to if you pass `true/false` to the respective elements.

## Why should I try it?

You might have some complex boolean expressions in your codebase and you don't want to waste a lot of time to figure out what they would evaluate to? Then this tool is for you!

Apart from that I took some time to create it and it would be awesome to hear what you think about it!

## Why did I create it?

I was following the chapters from [Craftin Interpreters by Bob Nystrom](http://www.craftinginterpreters.com/) for quite some time. So I was looking for a chance to implement this knowledge in a small app and boolean expressions seemed to be a reasonable choice for an interpreter.

Further Links:

* [Bool GitHub Repository](https://zlypher.github.io/bool/)
* [Crafting Interpreters TOC](http://www.craftinginterpreters.com/contents.html)

Determine what any boolean expression evaluates to

Project: Bool Checker


The [MDN (Mozilla Developer Network) web docs](https://developer.mozilla.org/en-US/) are an awesome resource for every web developer. 

So naturally I regularly use MDN to check possible attributes, how an element can be used or on what browsers it is supported. While working on a small side project, I noticed, that the compatibility table of the `input[type=color]` element shows quite some browsers as "Compatibility unknown". Amongst others Edge. Since I already had a basic example of the input element available and I am working on a Windows machine I tried the example with Edge and sure enough, everything worked just fine.

That's when I decided to try and improve MDN by contributing a small fix. But where to start? Luckily, each page has a big edit button at the top and works just like most other wikis. However, before you can edit a page, you need to sign in to your MDN profile. If you don't have one, you can sign in with GitHub and a MDN profile will automatically be created.

After signing in and editing a page, you will see a huge RichText editor. The browser compatibility table is normally at the very bottom, but when you scroll there you will find a message along those lines:

<img src="/assets/images/mdn_edit_compatibility.png" alt="Note on Edit for the compatibility table">

So the browser compatibility data is actually managed in a separate [git repository on GitHub](https://github.com/mdn/browser-compat-data). So let's head over to GitHub and check it out. The repository is quite nicely structured and really well documented. The [README.md](https://github.com/mdn/browser-compat-data/blob/master/README.md) describes the structure of the repository and the CONTRIBUTING.md explains what you should be aware of if you want to contribute.

So I quickly browser through the open Pull Requests, but I didn't find anything for my specific issue. Great! So let's find out where we can make the necessary changes. And sure enough, we find the file `/html/elements/input/color.json` which contains the exact data we want to modify.

The JSON structure is pretty straight forward. It contains an entry for each browser:

```json
{
    "support": {
        "chrome": {
            "version_added": "20"
        },
        "chrome_android": {
            "version_added": null
        },
        "edge": {
            "version_added": null
        },
        "edge_mobile": {
            "version_added": null
        }
    }
}
```

The `version_added` property can have four different states:
* **string**: The exact version when a browser started supporting the element/attribute
* **null**: The compatibility is unknown
* **true**: The browser supports it, but the exact version is unknown
* **false**: The browser doesn't support it

Okay so what shall we enter? `true`? That would be possible, but it would be neat if we know the actual version. Well, [caniuse.com](https://caniuse.com/#feat=input-color) thinks that it is supported since version 14 and sure enough, we find a Microsoft support ticket (wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6514216--input-type-color **Not Available anymore**) with an official response stating that it is indeed shipped since EdgeHTML 14.

So what is there left to do? We simply fork the repository, edit the `color.json` file and enter `"14"` as the `version_added` for `edge` and `edge_mobile` and create the pull request. To ease the pain for the reviewers, we provide the link to the microsoft support ticket.

And voilà, we are finished. And not even 24 hours later, the pull request was successfully merged without any problems!

So it is actually quite easy to contribute to most of the online developer resources these days. If you haven't tried it, I encourage you to take a look. Small patches and updates like this make the resource a little bit better and more valuable step by step!

Read up on this topic:

* [MDN web docs](https://developer.mozilla.org/en-US/docs/Web)
* [MDN web docs contribution guide](https://developer.mozilla.org/en-US/docs/MDN/Contribute)
* [MDN browser compatibility repository](https://github.com/mdn/browser-compat-data)
* [My first PR to the compatibility repository](https://github.com/mdn/browser-compat-data/pull/2434)

Follow the journey to my first contribution to MDN

My first contribution to MDN


If you are a web developer or often find yourself writing lots of HTML, XML, JSX and CSS, then this post is for you! Today I'd like to introduce you to a very useful tool for writing lot's of boilerplate HTML: [Emmet](https://emmet.io/)

Probably almost everyone feels the same way... writing lots of HTML or CSS is rather boring, repetetive and error prone. Some editors automatically close html tags, but that's mostly it. This is where Emmet comes into play. It defines a css like syntax which expands to actual valid HTML structure or CSS properties.

So let's not waste any time and give you an example. The following abbreviation demonstrates the basic features of Emmet.

```text
section>.hello>p{World}
```

This snippet will expand to the following HTML structure:

```html
<section>
    <div class="hello">
        <p>World</p>
    </div>
</section>
```

Pretty neat, huh? If you have ever written some css, the snippet should be pretty self explanatory. You can create children with `>`, names prefixed with a `.` will add a class to the element and `{}` let's you specify some actual text content. Everything that is not recognized as a special snippet will be rendered as a tag name. Check out the [Emmet Cheat Sheet](https://docs.emmet.io/cheat-sheet/) for lot's of different possibilites to use and combine different snippets!

One more neat trick combines multiplication with item numbering. So if you want to create a list with 5 elements, numbered from 1 to 5, this would be trivial with emmet:

```text
ul>li*5{$}
```

And zack, it will output:

```html
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
```

That is so sweet and will reduce the time to write stuff like that quite a bit! And another great thing: Emmet works for JSX as well! So don't worry about the `class` attributes. If you are inside a JSX context, Emmet will automatically create `className` isntead. Oh, and there is also a resolver for CSS snippets. So you can quickly specify properties without having to type out the whole line. See some nifty examples below:

```css
.test {
    /* pos:r */
    position: relative;
    /* d:f */
    display: flex;
    /* pt40px */
    padding-top: 40px;
    /* ml2e */
    margin-left: 2em;
}

/* @m */
@media screen {
    
}
```

There are tons of different options for almost all css properties available (even helpers to automatically create browser prefixes). So definitely checkout the docs from emmet, which are really comprehensive.

If you are wondering how to actually use it, don't worry... most of the modern text editors and IDEs have extensions for Emmet readily available or even built in (VSCode!). [Browse through the download section of Emmet](https://emmet.io/download/), if you are not sure about your editor. Even online services like CodePen or JSFiddle support emmet abbrviations out of the box.

It might take a bit to get used to it, but it will definitely speed up your development process in the long run. Give it a try and spread the word if you found it useful!

Check out Emmet here:
* [Emmet Website](https://emmet.io/)
* [Emmet GitHub](https://github.com/emmetio)
* [Emmet Cheat Sheet](https://docs.emmet.io/cheat-sheet/)

Emmet — the essential toolkit for web-developers

Easier Web Development with Emmet


Today I came across a question regarding merge conflicts with git from a teammate:

"Can I use Visual Studio to resolve merge conflicts or is it required to use a merge tool?"

At first I was surprised by this question but then I realized, that git merge conflicts might be a black box for some developers. So what exactly are merge conflicts?

Normally git is pretty good in merging changes from different branches, since these changes are often in different files. However, if two or more people try to merge changens to the same lines, merge conflicts are likely to occur. In these circumstances, git is not able to automatically determine which changes should end up in the merged version.

To resolve this issue, manual intervention is needed. To make it easy for developers to see, what has been changed, git adds conflict markers to the file.

```
Q: What shall I do in case of a merge conflict?
<<<<<<< HEAD
A: Panic!
=======
B: Stay calm!
>>>>>>> other-branch
```

So what is there left to do in case of a merge conflict? You need to remove the unwanted change and delete the conflicts markers. So that only the code/text is left that you actually want. Commit and you are done.

And what is the difference to visual merge tools? Basically there is none. They only thing these tools offer is the "visual" part. The highlight the changes from the different branches a bit nicer - often side by side - than an ordinary text editor. However, modern text editors like Atom or [Visual Code normally provide pretty good help with merging](https://code.visualstudio.com/docs/editor/versioncontrol#_merge-conflicts) as well.

So the next time you encounter a merge conflict, don't fret! Remember that merge conflicts can - in most cases easily - be resolved by opening the file in an text editor and removing the unwanted text as well as the conflict markers.

GitHub has pretty good articles on dealing with [merge conflicts](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/addressing-merge-conflicts/about-merge-conflicts) and [resolving merge conflicts](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/addressing-merge-conflicts/resolving-a-merge-conflict-using-the-command-line), so be sure to check them out.

Git Merge Conflicts


Ever wondered what stands behind Visual Studio that creates the actual application from your source files? Want to find out, what all the magic stuff in the `csproj` files really means?

Luckily for you, I just added a new [GitHub repository "MSBuild Basics"](https://github.com/zlypher/msbuild-basics) which covers all the basic information!

* What is MSBuild?
* What is the stuff in the `csproj`?
* How does it work together?
* And how can you make it run to your liking?

Find it out in my repository [zlypher/msbuild-basics](https://github.com/zlypher/msbuild-basics). Created in collaboration with [TheDarkEye666](https://github.com/TheDarkEye666). If you find any problems, please leave an Issue or a Pull Request.

Find out what msbuild is and what the stuff in a csproj file really means

MSBuild Basics


If you develop in the .Net Ecosystem and have create a Windows Service, you might have come around this issue: One services doesn't work like it should. You want to restart it, but you discover, that it is stuck in either the state "Starting" or "Stopping". Unfortunately, all options are greyed out and you can neither start nor stop the service via the GUI.

So how can we resolve this issue and get the service back up and running? Fortunately, there is a solution which has been found long ago (see further links) and is not that hard to execute. All you need to do is find the process id (PID) of the offending service and kill it via the command line.

Find out the PID of the service. Just make sure to use the actual service name and not the display name!

```bash
> sc queryex <SERVICE_NAME>
```

This will output some information about the service, including the process id.

```
C:\Users\Thomas>sc queryex Foo.Services.Bar

SERVICE_NAME: Foo.Services.Bar
        TYPE               : 10  WIN32_OWN_PROCESS
        STATE              : 2 0 START_PENDING
                                (NOT_STOPPABLE, NOT_PAUSABLE, IGNORES_SHUTDOWN)
        WIN32_EXIT_CODE    : 0  (0x0)
        SERVICE_EXIT_CODE  : 0  (0x0)
        CHECKPOINT         : 0x0
        WAIT_HINT          : 0x0
        PID                : 3976
        FLAGS              :
```

Kill the service. Make sure you have sufficient privileges to kill the service.

```bash
> taskkill /f /pid 3976
SUCESS: The process with PID 3976 has been terminated.
```

This will kill the service completely and you should be able to restart it again.

Read up on this topic:
* [How to recover from Windows service that is stuck in starting or stopped state](https://www.schneider-electric.com/en/faqs/FA239679/)
* How to kill a windows service stuck on stopping or starting (support.minisoft.com/index.php/how-to-kill-a-windows-service-stuck-on-stopping-or-starting/ **Not Available anymore**)

How to kill a Windows Service which is stuck in status \"Starting\"

Windows Service stuck in status "Starting"


## The Problem

Quite a few pages need social share links nowadays. Product pages, blog posts, news articles, ... They are basically everywhere. There are quite a lot of libraries and plugins available which provide the desired functionality. However, they often rely on additional JavaScript being loaded and come with a lot of unnecessary stuff.

But don't forget! Most of them are ordinary links, which don't require anything except a link tag. So how can you add the most common social share links to your page?

## Social Links

**Facebook**

Facebook is probably one of the most popular social networks. Unfortunately, you can only share a URL, but you can't prefill the text to comment. Therefore, the share link is rather straight forward:

`https://www.facebook.com/sharer/sharer.php?u=[SHARE URL]`

Just remember, that `[SHARE URL]` has to be a valid URL, or the link won't work.

**Twitter**

Next on the list is twitter. By specifying the `[SHARE TEXT]` it is possible the prefill the tweet with any textual content you like:

`https://twitter.com/intent/tweet/?text=[SHARE TEXT]`
`https://twitter.com/home?status=[SHARE TEXT]` (works as well)

**Whats App**

To enable sharing via WhatsApp, one can use the following link. For WhatsApp it is possible to specify content, which will be prefilled. If the user has WhatsApp installed, this link will open the App and ask to select a contact to send the message to.

`whatsapp://send?text=[SHARE TEXT]`

This share link only makes sense on mobile (maybe tablet as well) devices. So be sure to include appropriate checks, or your users might get confused.

**E-Mail**

E-Mail is the next one on the list. Old, but still used to share links and information. Just as you might have imagined, you can specify a receiver email adress, a subject and the content of the email:

`mailto:[TO EMAIL]?subject=[SHARE TITLE]&body=[SHARE TEXT]`

The `[TO EMAIL]` part is completely optional. If it is not specified, the email agent will prepare the email with the given subject and body.

**SMS**

SMS share links are a bit special. Different behaviour on Android and iOS. You don't actually have to set a [PHONE NUMBER]. If you leave it blank the user will be able to select a recipient. The message will be prefilled with the given text.

`sms:[PHONE NUMBER]?body=[SHARE TEXT]`

*(This link will only work on Android though. See Update for further details)*

## Others

There are a lot of other social networks and ways to share content. But don't worry, there are a lot of resources available online, where you can [generate social](http://www.sharelinkgenerator.com/) [share links](https://sharingbuttons.io/) or check the [share urls](https://github.com/bradvin/social-share-urls).

## Conclusion

To sum up, it is very easy to get started and integrate social share links into your website.

<section class="c-mind" markdown="1">
**Keep in Mind:** Don't forget to URL encode the text content you want to share with these links.
</section>


Read up on this topic:
* [StackOverflow answer regarding SMS share link](https://stackoverflow.com/a/19126326/733368)

<section class="c-update" markdown="1">
**Update 2018-01-18:**

It appears, that iOS handles the SMS share links differently than Android. Android accepts a link format like `sms:[PHONE NO]?body=[TEXT CONTENT]`. However, this will fail on iOS. Instead you have to use `sms:[PHONE NO];body=[TEXT CONTENT]` for old iOS versions and `sms:[PHONE NO]&body=[TEXT CONTENT]` for iOS 8 and above. Take note of the delimiter in front of the body parameter!

Check out [How to pre-populate the sms body text via an html link](https://stackoverflow.com/q/6480462/733368) via StackOverflow.
</section>

Social Share Links


So you just finished your neat little go project and want to distribute it via [Github Releases](https://help.github.com/articles/about-releases/). Fear not! [GoReleaser](https://goreleaser.com/) is an amazing tool to get you started with only a few steps.

**Requirements:**
- Go
- Github Repository
- Github Token

## Steps

1. First of all install the latest version of GoReleaser (for example via `go get`)

    ```bash
    go get github.com/goreleaser/goreleaser
    ```

2. Create your configuration file (`.goreleaser.yml`). A basic one looks something like this:

    ```yml
    # .goreleaser.yml
    builds:
      - binary: awesome-project
        goos:
          - windows
          - darwin
          - linux
        goarch:
          - amd64
    ```

3. Make sure to create a Github Token and add it as an environment variable as `GITHUB_TOKEN`. [Find out how to create your Github Token](https://github.com/blog/1509-personal-api-tokens)

    ```bash
    export GITHUB_TOKEN=4a68...
    ```

4. Make sure to push at least one tag (GoReleaser uses the latest tag of your repository)

    ```bash
    git tag -a v0.0.1 -m "Release Test"
    git push origin v0.0.1
    ```

5. Run GoReleaser

    ```bash
    goreleaser
    ```

6. Profit!

You now have your first release for your github repository complete with downloadable versions for multiple plattforms and a Changelog with all your commits since the previous tag.

## Conclusion

GoReleaser is an amazing tool which works exceptionally well and was really painless to setup.

Read up on this topic:
* [GoReleaser Website](https://goreleaser.com/)
* [GoReleaser Github Repository](https://github.com/goreleaser/goreleaser)

Easily create GitHub Releases with GoReleaser

Go - Create GitHub Releases with GoReleaser


If you are using links with `target="blank"` you might expose a vulnerability. The page you are linking to gains partial access to your tab via `window.opener`. However, there is a pretty simple workaround. You can prevent this by specifying `rel="noopener noreferrer` on your links. Even [Create React App](https://github.com/facebookincubator/create-react-app) emits a warning, if you forget to specify the `rel` attribute:

```bash
Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener  react/jsx-no-target-blank
```

There are actually a lot of blog posts going into great lengths explaining the details of this security vulnerability. So be sure to check them out. As a starting point, check out the [hacker news article from yesterday](https://news.ycombinator.com/item?id=15685324).

Read up on this topic:
* [Mathias Bynens: About rel=noopener](https://mathiasbynens.github.io/rel-noopener)
* [Alex Yumashev: Target="_blank" - the most underestimated vulnerability ever](https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/)
* [Browser Support for "noopener"](https://caniuse.com/#search=noopener)
* [MDN link documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)

Secure target="blank" with rel="noopener noreferrer"


If you care about web performance (and you probably should, if you create websites for a living), you probably know, that a big factor on website weight are images. [According to HTTP Archive, as of 1st of November 2017, a huge chunk of transferred bytes belong to images](http://httparchive.org/interesting.php).

So images are a prime candidate for optimization to improve the load times for all users. Luckily, [Addy Osmani](https://addyosmani.com/) created an impressive resources with almost everything one needs to know about image compression and image optimization.

In his eBook ["Essential Image Optimzation"](https://images.guide/) he covers a wide variaty of topic and guides the reader through all of them. Areas he deals with are:

* image formats
* image compression
* image delivery
* lazy loading
* much more ...

Although he covers a lot of topics he always goes into the details and provides reference implementation via various npm packages. Even if not everything might fit your project, some parts will definetly be worth considering.

So if you use any images on your website, be sure to check this awesome free resource and consider contributing (github.com/GoogleChrome/essential-image-optimization **Not available anymore**), if you find an error.


Check it out here: [images.guide](https://images.guide/)

Checkout this awesome guide about image optimization

Recommendation: Essential Image Optimization - images.guide


A few days ago, one of our Testers found a strange behaviour on our website. The website loads initially, has its first paint and suddenly turns white for a fraction of a second and then displays everything correctly.

So let's see if we can find out, what's going on. First step: Clone current stable version locally and try to reproduce the problem. Thankfully, it occurs on the local machine as well. And just to make sure, the bug also occurs on other browsers than Chrome.

First general idea: Load the website, open dev tools and check the console. One message seems rather close to the occurence of the phenomenon:

```bash
GET https://dev.visualwebsiteoptimizer.com/j.php?a=52337&u=XXX&r=0.8674099101753603 net::ERR_BLOCKED_BY_CLIENT
```

Well [uBlock Origins](https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm?hl=de) blocks the loading of [Visual Website Optimizer](https://vwo.com/), but that can't be the problem, right? Let's remove the line and check again. And sure enough, the white flash is gone...

As it turns out, in a previous attempt to make the site loading more efficient, the VWO snippet was extracted into a separate js file and loaded with the "defer" attribute.

By removing the "defer" attribute, everything seems the be working again whithout a white flash.

I'm not sure what the VWO script is doing, but everything seems to work fine for now. However, it would be interesting to dig deeper into the actual behaviour of the VWO script.

Deferred VWO and the white flash


Today I wanted to manually deploy a [Create React App](https://github.com/facebookincubator/create-react-app) project to Github Pages. Now, normally this happens via Travis CI after each build, but this time I wanted to manually verify something. Luckily, this is pretty easy with CRA. If you installed the "gh-pages" packages and added the required script to package.json you only need to execute the deploy script and you are good to go.

## The Problem

But this time, I ran into a rather strange problem:

```bash
λ npm run deploy                                                                                                                   
                                                                                                                                   
> bool@1.0.0 predeploy E:\projects\bool                                                                                            
> npm run build                                                                                                                    
                                                                                                                                   
                                                                                                                                   
> bool@1.0.0 build E:\projects\bool                                                                                                
> react-scripts build                                                                                                              
                                                                                                                                   
Creating an optimized production build...                                                                                          
Compiled successfully.                                                                                                             
                                                                                                                                   
File sizes after gzip:                                                                                                             
                                                                                                                                   
  50.73 KB  build\static\js\main.54678454.js                                                                                       
  658 B     build\static\css\main.5c98f198.css                                                                                     
                                                                                                                                   
The project was built assuming it is hosted at /bool/.                                                                             
You can control this with the homepage field in your package.json.                                                                 
                                                                                                                                   
The build folder is ready to be deployed.                                                                                          
To publish it at https://zlypher.github.io/bool, run:                                                                              
                                                                                                                                   
  npm run deploy                                                                                                                   
                                                                                                                                   
                                                                                                                                   
> bool@1.0.0 deploy E:\projects\bool                                                                                               
> gh-pages -d build                                                                                                                
                                                                                                                                   
error: unable to create file deployed at Mon Sep 25 18:25:02 UTC 2017 by Deployment Bot (from Travis CI): Invalid argument         
fatal: Could not reset index file to revision 'origin/gh-pages'.                                                                   
                                                                                                                                   
npm ERR! code ELIFECYCLE                                                                                                           
npm ERR! errno 1                                                                                                                   
npm ERR! bool@1.0.0 deploy: `gh-pages -d build`npm ERR! Exit status 1                                                              
npm ERR!                                                                                                                           
npm ERR! Failed at the bool@1.0.0 deploy script.                                                                                   
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.                                 
```

If you read the log carefully, you will see that the script "gh-pages -d build" fails. Even "git checkout gh-pages" fails with the same error.

Now if you've already used Travis CI to deploy th GH pages, you will be aware, that it creates a file with the timestamp of the deployment. In this example this files is conveniently named "Mon Sep 25 18:25:02 UTC 2017 by Deployment Bot (from Travis CI)".

## The Solution

As it turns out, Windows really dislikes colons (":") in file names and prohibits them. So git can't create the file during checkout of the branch and fails with an "Invalid argument". In my case, manually deleting the file via github.com resolved the issue. Afterwards, the deployment script completed successfully.

Filenames and Git on Windows


Different browsers (or layout engines) often behave slightly different. One of those differences caught me off guard recently. The culprit: linear-gradient. To be more precise a fade effect from transparent to white.

Image you have a box with text of fixed height and you wan't to fade out the text. A simple implementation would look something like this:

```html
<div class="box">
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
  <div class="fade"></div>
</div>
```

With the following styling:

```css
.container {
  position: relative;
  margin: 0 10px;
  border: 1px solid grey;
  padding: 8px;
  width: 300px;
}

.fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), white 75%);
}
```

So nothing fancy here. Basically an overlay with a height of 100px and fading from transparent to white. Works in Chrome? Yes, so we are good to go... Actually not quite.

## The Problem

As you may have noticed, we used `rgba(0, 0, 0, 0)` for our transparent color. So a nice pure black with an alpha channel of 0. Turns out, Safari is pretty strict here and draws a strange looking grey gradient.

## The Solution

So what can we do about this? Luckily, it is sufficient to change the transparent color from a transparent black `rgba(0, 0, 0, 0)` to a transparent white `rgba(255, 255, 255, 0)`. With this simple fix everything looks as expected in Safari as well.

[Checkout the Codepen!](https://codepen.io/zlypher/pen/BwRyMb)

Tip: If you want to prevent the fade effect to interfere with your text selection, add `pointer-events: none` to `.fade`.

Linear Gradient - differences in Chrome/Safari

Modern websites have a lot of icons scattered around. A solid technique to implement those icons are SVG sprites. As it turns out, it's pretty easy to start using them. If you can't or don't want to use SVGs, an alternative are icon fonts like [Glyphicons from Bootstrap](https://getbootstrap.com/components/#glyphicons) or [Font Awesome](http://fontawesome.io/).

There are already a lot of solid and good guides in mastering SVG sprites, so this post will focus on the bare essentials to get started. If you are in a hurry, you can skipt straight to the [results](#result).

## Steps

1. Add a new svg element at the top of your body tag. (It might work, if it is placed somewhere else, but to make sure that everything works correctly, place it at the top).

    ```html
    <body>
        <svg xmlns="http://www.w3.org/2000/svg">
            
        </svg>
    </body>
    ```

    You will notice, that the svg will probably have a default size. Chromem 59 displays the svg element as rectangle with a width of 300px and a height of 150px. Since we don't need to display the spritesheet itself, we can simply set `display: none`.

    ```html
    <svg xmlns="http://www.w3.org/2000/svg" style="display: none">
    ```

    Note: If you dislike inline styles, you can define a css class and set the display property there. Just make sure, that the svg doesn't show up.

2. Get the actual svg icon from your designer or from the web. There are a lot of websites out there which offer free (always check the license though) svg icons. For this example, let's export an icon from [icomoon](https://icomoon.io/app/). It will look something like this:

    ```html
    <symbol id="icon-html-five" viewBox="0 0 32 32">
        <title>html-five</title>
        <path d="M1.892 0l2.567 28.801 11.524 3.199 11.554-3.204 2.572-28.796h-28.216zM25.336 26.963l-9.288 2.574v0.015l-0.024-0.007-0.024 0.007v-0.015l-9.288-2.574-2.195-24.609h23.015l-2.195 24.609zM20.336 16.569l-0.408 4.58-3.944 1.065-3.933-1.060-0.252-2.82h-3.547l0.495 5.547 7.252 2.006 7.229-2.006 0.97-10.844h-12.874l-0.322-3.617h13.517l0.316-3.532h-17.694l0.953 10.681z"></path>
    </symbol>
    ```

    We can almost use this 1:1. Just make sure to save some precious bytes by dropping the `<title>` element.

3. Add the svg icon to your svg spritesheet, by placing the `<symbol>` inside the `<svg>`. Your spritesheet should look something like this

    ```html
    <svg xmlns="http://www.w3.org/2000/svg" style="display: none">
        <symbol id="icon-html-five" viewBox="0 0 32 32">
            <path d="M1.892 0l2.567 28.801 11.524 3.199 11.554-3.204 2.572-28.796h-28.216zM25.336 26.963l-9.288 2.574v0.015l-0.024-0.007-0.024 0.007v-0.015l-9.288-2.574-2.195-24.609h23.015l-2.195 24.609zM20.336 16.569l-0.408 4.58-3.944 1.065-3.933-1.060-0.252-2.82h-3.547l0.495 5.547 7.252 2.006 7.229-2.006 0.97-10.844h-12.874l-0.322-3.617h13.517l0.316-3.532h-17.694l0.953 10.681z"></path>
        </symbol>
    </svg>
    ```

4. Done! Well almost... Your spritesheet is finished, but you can't see your icon yet. What's left is, to display it somewhere on your page. This is done via this neat little snippet:

    ```html
    <svg><use xlink:href="#icon-html-five" /></svg>
    ```

    And voilà... you should see your beautiful icon on your page. Now don't forget to add a width, height and some styling to your new and shiny icon. Oh, and if you have the same icons multiple times on your page, you can style them individually. 

## Result

So all in all your code can look something like the following snippet. Or you can view and edit [an example here](https://codepen.io/zlypher/pen/wqzMKE).

```html
<body>
    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
        <symbol id="icon-html-five" viewBox="0 0 32 32">
            <path d="M1.892 0l2.567 28.801 11.524 3.199 11.554-3.204 2.572-28.796h-28.216zM25.336 26.963l-9.288 2.574v0.015l-0.024-0.007-0.024 0.007v-0.015l-9.288-2.574-2.195-24.609h23.015l-2.195 24.609zM20.336 16.569l-0.408 4.58-3.944 1.065-3.933-1.060-0.252-2.82h-3.547l0.495 5.547 7.252 2.006 7.229-2.006 0.97-10.844h-12.874l-0.322-3.617h13.517l0.316-3.532h-17.694l0.953 10.681z"></path>
        </symbol>
    </svg>

    <div>
        Here comes my shiny icon:
        <svg width="16px" height="16px">
            <use xlink:href="#icon-html-five" />
        </svg>
    </div>
</body>
```

## Further Links

If you want to dive deeper into the topic I suggest to scan and read through the following links and experiment with SVGs yourself.

* [An Overview of SVG Sprite Creation Techniques](https://24ways.org/2014/an-overview-of-svg-sprite-creation-techniques/)
* [How to Implement Cross-Browser SVG Sprites](https://webdesign.tutsplus.com/tutorials/how-to-implement-cross-browser-svg-sprites--cms-22427)
* [How to Create and Manage SVG Sprites](https://www.webdesignerdepot.com/2017/05/how-to-create-and-manage-svg-sprites/)
* [Icon System with SVG Sprites](https://css-tricks.com/svg-sprites-use-better-icon-fonts/)
* [SVG "symbol" a Good Choice for Icons](https://css-tricks.com/svg-symbol-good-choice-icons/)

## Things to keep in mind

* Positive: No additional roundtrip to fetch the icon image from the server
* Positive: Using the same icon multiple times is cost effective (space)
* Only add the icons you intend to use on the current site
* Negative: Additional code which won't be cached

Getting Started With SVG Sprites


There are a lot of Software Engineer, Software Architect and general Software enthusiast blogs on the web. So why do we need another one (_Hint: this one_)?

Well to be completely honest, there are two reasons behind this blog:

1. If you browse around the web und look for hints, what a successfull Software Engineer should do, you find (among others) the following statements: _"Build an online presence"_, _"Give back to the community, by helping others"_ or _"Get a reputation by presenting your skills"_. Therefore, I aim to fulfill these requirements by writing this blog.

2. I am quite forgetful about some techniques or problems I encounter and solve during my day to day work. So this website doubles as some kind of diary or writeup, so that I can reflect on what I have learned so far and get feedback from everyone else.

I am happy, that you took some time to read one or more pages of this blog and I gladly hear your opinion and I encourage you to give me feedback.

Welcome to my awesome super unique developer blog

Thomas ProchazkaDancer, Horseman and Software Engineer