Skip to content
Browse files
Refactor figures
  • Loading branch information
niklas-heer committed Dec 28, 2019
1 parent 2a0cbfd commit 1f903f40c244823992c21fae1ddacf47e123daac
Showing 12 changed files with 27 additions and 75 deletions.
@@ -23,7 +23,7 @@ As Team Lead CPS, I actively guide and support my team to achieve our mission an
- `11.2013 - 08.2015`: **Web Frontend Developer** (working student) @ [Bertsch Innovation GmbH](
- `01.2012 - 11.2013`: **Web Frontend Developer** (working student) @ [Sellaround GmbH](

See more information at [LindedIn]( or [Xing](
See more information at [LinkedIn]( or [Xing](


@@ -39,7 +39,7 @@ The author describes three overarching principles which help overcome root cause

“Continuous Discovery and Delivery” is a great way to translate these three principles into a process and mindset for people to adhere too.

{{< figure src="/assets/images/2019/reviews/inspired/fig_1.jpg" caption="Continuous Discovery and Delivery — Taken from: Marty Cagan, Process vs Model, <a href=''></a>, 7 August 2017" position="center" >}}
{{< figure src="2019/reviews/inspired/fig_1.jpg" caption="Continuous Discovery and Delivery — Taken from: Marty Cagan, Process vs Model, <a href=''></a>, 7 August 2017" position="center" >}}

## Quotes

@@ -21,24 +21,14 @@ But let's start at the beginning of my journey.

### Why not simple old `top`?

<figure class="half">
<a href="/assets/images/2014-12-01/top.png"><img src="/assets/images/2014-12-01/top.png" alt=""></a>
<a href="/assets/images/2014-12-01/htop.png"><img src="/assets/images/2014-12-01/htop.png" alt=""></a>
<figcaption>top vs htop</figcaption>
{{< figure src="2014-12-01/top.png" position="center" caption="top" >}}
{{< figure src="2014-12-01/htop.png" position="center" caption="htop" >}}

As you can guess from the pictures above `htop` does really exactly the same as `top`, but in a much nicer way so in my opinion there is no discussion about why you would choose `top` over `htop`!

### vtop the unknown beauty

<a href="/assets/images/2014-12-01/vtop.png"><img src="/assets/images/2014-12-01/vtop.png" alt=""></a>
{{< figure src="2014-12-01/vtop.png" position="center" caption="vtop" >}}

[vtop][vtop] looks much cleaner than htop. One look and you exactly know whats going on on the system! You can list processes by CPU or Memory usage which is really awesome, you can navigate with your arrow keys or `k` and `j` which is also nice and the best of all you can simply highlight/select a process and kill it by typing `dd`!

@@ -7,12 +7,7 @@ categories: []
tags: [code, jekyll, linux, git, web]

<a href="/assets/images/2014-12-05/after.png"><img src="/assets/images/2014-12-05/after.png" alt=""></a>
<figcaption>my blog was never faster nor easier to deploy!</figcaption>
{{< figure src="2014-12-05/after.png" position="center" caption="my blog was never faster nor easier to deploy!" >}}

## Deployment via git

@@ -92,13 +87,8 @@ git push production
This is the fastest site I've ever built.

<figure class="half">
<a href="/assets/images/2014-12-05/before.png"><img src="/assets/images/2014-12-05/before.png" alt=""></a>
<a href="/assets/images/2014-12-05/after.png"><img src="/assets/images/2014-12-05/after.png" alt=""></a>
<figcaption>before and after</figcaption>
{{< figure src="2014-12-05/before.png" position="center" caption="before" >}}
{{< figure src="2014-12-05/after.png" position="center" caption="after" >}}

### Optimizing the web-server

@@ -7,12 +7,7 @@ author: Niklas Heer
toc: false

<a href="/assets/images/2015-08-18/screen.png"><img src="/assets/images/2015-08-18/screen.png" alt=""></a>
<figcaption>even faster than jekyll</figcaption>
{{< figure src="2015-08-18/screen.png" position="center" caption="even faster than jekyll" >}}

## Why I switched to Hugo

@@ -49,20 +44,11 @@ That is pretty neat.

### Locally

<a href="/assets/images/2015-08-18/screen2.png"><img src="/assets/images/2015-08-18/screen2.png" alt=""></a>
<figcaption>My workspace when I'm writing</figcaption>
{{< figure src="2015-08-18/screen2.png" position="center" caption="My workspace when I'm writing" >}}

When I'm writing new posts, I can view my changes instantly in my browser. Hugo serves my page locally and rebuilds and reloads the site whenever I change and save a file. This is achieved with this command: `hugo server -w -t "nh"`. When listening it should look similar to this:

<a href="/assets/images/2015-08-18/screen3.png"><img src="/assets/images/2015-08-18/screen3.png" alt=""></a>
{{< figure src="2015-08-18/screen3.png" position="center" >}}

### Online

@@ -132,11 +118,7 @@ A more detailed instruction on how to set this up, can be found [here](https://g
You should place this script somewhere in `static`, because Hugo will put files in this directory directly in the `public` folder.
I also recommend to set your webroot to the `public` folder of your Hugo project.

<a href="/assets/images/2015-08-18/screen4.png"><img src="/assets/images/2015-08-18/screen4.png" alt=""></a>
{{< figure src="2015-08-18/screen4.png" position="center" >}}

Additionally you can install the [Hugo binary]( on your server to build the site automatically, when you push any changes.
This is the way I chose to do it.
@@ -43,12 +43,7 @@ Another thing we learned is, that because some are new to TDD (Test Driven Devel

Fortunately, an attendee took on the task so [@sd_alt]( will tell us what TDD really means and also introduce us to some frameworks/tools which could help us to get going faster. :smile:

<a href="/assets/images/2016-10-04/brace.jpg"><img src="/assets/images/2016-10-04/brace.jpg" alt=""></a>
<figcaption>The next /dev/night takes place on [__11.10.2016__]( 19:10.</figcaption>
{{< figure src="2016-10-04/brace.jpg" position="center" caption="The next /dev/night takes place on [__11.10.2016__]( 19:10." >}}

## TL;DR

@@ -11,7 +11,7 @@ tags:
- clean code

{{< figure src="/assets/images/2016-10-25/meetup.jpg" caption="From our third meetup which was in October. So many people! It's just awesome!" >}}
{{< figure src="2016-10-25/meetup.jpg" caption="From our third meetup which was in October. So many people! It's just awesome!" >}}

The last [/dev/night]( was a huge success! We had over 20 people at our last event in October! That was a whopping 330% increase compared to our last event!

@@ -29,12 +29,7 @@ Here are two things I want to highlight from the talk:
> -- <cite>[Robert Greiner](</cite>
<a href="/assets/images/2016-10-25/Tests.png"><img src="/assets/images/2016-10-25/Tests.png" alt=""></a>
<figcaption>The test pyramide.</figcaption>
{{< figure src="2016-10-25/Tests.png" position="center" caption="The test pyramide." >}}

After the talk, we were ready for the challenge. This time we did the "[Pig Latin Kata](".
If you haven't done it already, you should try it out! It's a lot of fun!
@@ -11,7 +11,7 @@ tags:
- testing

{{< figure src="/assets/images/2016-11-22/meetup.jpg" caption="From our fourth meetup which was in November. Happy hacking!" >}}
{{< figure src="2016-11-22/meetup.jpg" caption="From our fourth meetup which was in November. Happy hacking!" >}}

The fourth [/dev/night]( was a continuation of the success we had with [the third one]( Again we had about 20 people at our meetup! Freakin' Awesome!

@@ -14,7 +14,7 @@ tags:
- draft

{{< figure src="/assets/images/2019/2019-11-01_draft.png" >}}
{{< figure src="2019/2019-11-01_draft.png" >}}

I'm using Hugo for my blog and I wanted to find a way in which I can view drafts while developing, but hide them on the deployed site.

@@ -70,15 +70,15 @@ This is all very nifty and helpful.

Netlify is connected to Github and builds the site and published it to the `` domain once I push or merge something into the `master` branch.

{{< figure src="/assets/images/2019/2019-12-28_screenshot-1.png" >}}
{{< figure src="2019/2019-12-28_screenshot-1.png" >}}

I can also try stuff out on my `develop` branch and create a merge request so that I can see how the site would look like before I merge it and therefor deploy it to `master`.

{{< figure src="/assets/images/2019/2019-12-28_screenshot-2.png" >}}
{{< figure src="2019/2019-12-28_screenshot-2.png" >}}

On my local machine I use the `netlify dev` command to just spin up a development environment in which I can see my changes instantly.

{{< figure src="/assets/images/2019/2019-12-28_screenshot-3.png" >}}
{{< figure src="2019/2019-12-28_screenshot-3.png" >}}

The CLI tool detects what system you are using based on the configuration file present in the root directory. If you want to do more advanced stuff you can also define this yourself like I did in the `netlify.toml` like this:

@@ -120,12 +120,12 @@ Since I already had a Hugo blog I didn't had to change the content too much. Eve

The cool new thing with this theme is that I can have sites in :de: German and in :uk: English.

{{< figure src="/assets/images/2019/2019-12-28_screenshot-4.png" position="center" >}}
{{< figure src="2019/2019-12-28_screenshot-4.png" position="center" >}}

This is easily achieved by just having two files with the same same except one ends on `` and the other with ``.
Alternatively you can also create a folder with a `` and `` file in it.

{{< figure src="/assets/images/2019/2019-12-28_screenshot-5.png" position="center" >}}
{{< figure src="2019/2019-12-28_screenshot-5.png" position="center" >}}

Okay what I added completely new is the **Book Reviews** section but the whole system is a story for another time. If you are interested you can have a look yourself into the [source code]( and see how it works.

@@ -8,19 +8,19 @@ images = ""
tags = ["blog", "logo", "image", "svg", "ico"]

{{< figure src="/assets/images/nheer_logo.png" position="center" style="max-height: 300px;" >}}
{{< figure src="nheer_logo.png" position="center" style="max-height: 300px;" >}}

This is my new logo with for the moment I just use as a `favicon` for this site.

## How I came up with it

Actually it was a pretty quick prototyping and I kind of like the result. It is not perfect, but better than my old logo which looked like this:

{{< figure src="/assets/images/2019/2019-12-28_old-logo.png" position="center" style="height: 200px;" >}}
{{< figure src="2019/2019-12-28_old-logo.png" position="center" style="height: 200px;" >}}

What I actually did to make the new logo happen is that I used [Gravit Designer]( and opened a new **512** by **512** pixel document. Then I started with a circle in a color I like (`#9900FF`). After that I just wrote an `N` in a text element and went through the different fonts. The font I finally landed on was `Bungee Shade`. I centered it and then I converted the font to path.

{{< figure src="/assets/images/2019/2019-12-28_screenshot-6.png" position="center" >}}
{{< figure src="2019/2019-12-28_screenshot-6.png" position="center" >}}

After that I had a compounded path which I split it up.

@@ -1,9 +1,9 @@
{{ if .Get "src" }}
<figure class="{{ with .Get "position"}}{{ . }}{{ else -}} left {{- end }} zoomable" >
<img src="{{ .Get "src" | safeURL }}" {{ with .Get "alt" }} alt="{{ . | plainify }}" {{ end }} {{ with .Get "style" }} style="{{ . | safeCSS }}" {{ end }} />
<img src="/assets/images/{{ .Get "src" | safeURL }}" {{ with .Get "alt" }} alt="{{ . | plainify }}" {{ end }} {{ with .Get "style" }} style="{{ . | safeCSS }}" {{ end }} />

{{ if .Get "caption" }}
<figcaption class="{{ with .Get "captionPosition"}}{{ . }}{{ else -}} center {{- end }}" {{ with .Get "captionStyle" }} style="{{ . | safeCSS }} zoomable" {{ end }}>{{ .Get "caption" | safeHTML }}</figcaption>
<figcaption class="{{ with .Get "captionPosition"}}{{ . }}{{ else -}} center {{- end }}" {{ with .Get "captionStyle" }} style="{{ . | safeCSS }}" {{ end }}>{{ .Get "caption" | markdownify }}</figcaption>
{{ end }}
{{ end }}

0 comments on commit 1f903f4

Please sign in to comment.