Blog & presenting my apps, games and other projects.

Short intro how to install PostgreSQL on macOS and some nice aliases to help the use.

PostgreSQL on macOS


I needed to install [PostgreSQL](https://www.postgresql.org/) locally on my macOS as I started a new hobby project where I'm planning to use it.

I'm using [homebrew](https://brew.sh/) to install it as it is an easy way to add it and later to remove it.

## Installing PostgreSQL

Run this in your terminal

```bash
brew install postgres
```

## Starting PostgreSQL manually

I liked to have total control when the PostgreSQL is running so I will start it like this:

```bash
pg_ctl -D /usr/local/var/postgres -l /usr/local/var/postgres/server.log start
```

In addition to just starting it will create a log for PostgreSQL loggings.

### To automatically start it

When you installed PostgreSQL with homebrew you might have noticed that it have you the following information in the terminal:

```
To have launchd start postgresql now and restart at login:
  brew services start postgresql
```

## Stopping PostgreSQL manually

To stop it, just run this command:

```bash
pg_ctl -D /usr/local/var/postgres stop -s -m fast
```

## Aliases

I created few aliases for convenience. Start, stop and tailing the log.

```
alias pgstart='pg_ctl -D /usr/local/var/postgres -l /usr/local/var/postgres/server.log start'
alias pgstop='pg_ctl -D /usr/local/var/postgres stop -s -m fast'
alias pglog='tail -f /usr/local/var/postgres/server.log'
```

## GUI client

I am using [Postico](https://eggerapps.at/postico/) to connect to my development database (well, currently it does no have anything else than development :D). It is available for macOS for free, but some features are limited.


Here are the steps that I did to get my Next.js blog to show syntax highlight in react-markdown generated code blocks.

Syntax highlight to Next.js blog


These are the steps I did to add syntax highlighting to my blog which uses Next.js and `react-markdown` for rendering Markdown.

## Add react-syntax-highlighter

```bash
yarn add react-syntax-highlighter
```

## Create CodeBlock component

Then I created new separate component for the code blocks, intuitively named: CodeBlock.

```jsx
import React from 'react';
import PropTypes from 'prop-types';

import SyntaxHighlighter from 'react-syntax-highlighter';
import { a11yDark, a11yLight } from 'react-syntax-highlighter/styles/hljs/';
import { useDarkMode } from 'next-dark-mode';

const CodeBlock = ({ language, value }) => {
  const { darkModeActive } = useDarkMode();
  return (
    <SyntaxHighlighter
      style={darkModeActive ? a11yDark : a11yLight}
      language={language}
    >
      {value}
    </SyntaxHighlighter>
  );
};

CodeBlock.propTypes = {
  language: PropTypes.string,
  value: PropTypes.string,
};

export default CodeBlock;
```

As you can see, I use `next-dark-mode` for my theme styling and there I get which I'm currently using. But you can skip those if you do not need them.

## Using the CodeBlock

Then in the place where I'm using `react-markdown` I will give the created **CodeBlock** for it `renderers` prop like this:

```jsx
import CodeBlock from './CodeBlock';
//...
<ReactMarkdown source={markdownBody} renderers={{ code: CodeBlock }} />;
```

## Done

Now the blog has syntax highlighting and it is a little better looking when viewing the code blocks.


Piping operators, <| and |> of Elm with few examples how they can be used.

Elm piping


I have been fiddling a little with Elm and looking through manual and some guides. It is first functional programming language that I am experiencing and there is lots of new concepts.
But now I'm presenting you few operators of the Elm. Some might call them pizza operators, not because of the taste but the shape!

## Piping

Here is the original example code that is not using piping at all. `padLeft` is from Elm's Core package, String.
Code does get the minutes from seconds, so e.g 280 seconds is 4 minutes. And it will add padding zero to start so that it always has `00` if no minutes yet or e.g `01` when one minute has passed.

_The code is indented as the [elm-format](https://github.com/avh4/elm-format) did format it in the editor._

```elm
secondsToMinutes : Int -> String
secondsToMinutes seconds =
    padLeft 2 '0' (String.fromInt (floor (toFloat seconds / 60)))

-- example how to use this
secondsToMinutes 280
-- result is "04"
```

### |> Forwards pipe

```elm
secondsToMinutes : Int -> String
secondsToMinutes seconds =
    (seconds |> toFloat)
        / 60
        |> floor
        |> String.fromInt
        |> padLeft 2 '0'

```

### <| Backwards pipe

```elm
secondsToMinutes : Int -> String
secondsToMinutes seconds =
    padLeft 2 '0' <|
        String.fromInt <|
            floor <|
                toFloat seconds
                    / 60
```

#### Simpler <| example

You can use backwards pipe to replace parentheses like in the following case. _This example is just for demo purpose, of course you can do the `String.fromInt` in the function but that is not the point of this._

```elm
cat : String -> String -> String
cat name age =
  "Cat name is " ++ name ++ " and it's " ++ age ++ " years old."

cat "Jackie" (String.fromInt 8)
-- This is same as:
cat "Jackie" <| String.fromInt 8
```

### Source

I asked the naming for the operators from the helpful [Elm Slack](https://elmlang.herokuapp.com/), I suggest you to join if you are interested of Elm!

Links to docs:

- [floor](https://package.elm-lang.org/packages/elm/core/latest/Basics#floor)
- [padLeft](https://package.elm-lang.org/packages/elm/core/latest/String#padLeft)
- [toFloat](https://package.elm-lang.org/packages/elm/core/latest/Basics#toFloat)
- [|>](<https://package.elm-lang.org/packages/elm/core/latest/Basics#(|%3E)>)
- [<|](<https://package.elm-lang.org/packages/elm/core/latest/Basics#(%3C|)>)


Here is a small tip how to use DuckDuckGo from your Terminal.

DuckDuckGo from terminal


Here is the end result how you can open the Duckduckgo search in your favorite browser, straight from the terminal:

```bash
? What does number 42 mean
```

_I'm using macOS in this post._

Requirement
`brew install jq`

In your bash config, e.g `.zshrc` add the following

```bash
urlencode()
{
  local args="$@"
  jq -nr --arg v "$args" '$v|@uri';
}

duckduckgo()
{
  open "https://duckduckgo.com/?q=$(urlencode "$@")"
}

alias '?'='duckduckgo'
```

## Open in specific browser

If you want to open the result in spesific browser instead of your system default, you can e.g make a small change to open it in Firefox like this:

```bash
open -a firefox  "https://duckduckgo.com/?q=$(urlencode "$@")"

```

### Open the Duckduckgo in terminal

If you are hardcore user of the terminal you can instead use the following (this is the original way that was used by the Heiker)

```bash
lynx "https://lite.duckduckgo.com/lite/?q=$(urlencode "$@")"
```

## Sources

Idea is based on the [Heiker's bash alias on Dev.to comments](https://dev.to/vonheikemen/comment/11ia7)


Here are the steps that I had to take to get Vim to my freshly installed Xubuntu. Did need to install few additional dependencies to get it compiled.

Adding Vim to Xubuntu 20.04


I recently installed Xubuntu, version 20.04 on old laptop. And I needed an editor, so I tried to run Vim from terminal. But it was not found!

There were some 3rd party repos that had the compiled binaries for the Vim, but as you can guess, they are not updated recently. So I thought to try to compile Vim from source.

Here are the steps that I was required to get the Vim working on my Xubuntu 20.04.

## Getting source

Head to Vim's [GitHub page](https://github.com/vim/vim) where the source files and instructions for compiling are located.
Run following in the terminal to get the source code to your own computer:

```
git clone https://github.com/vim/vim.git
```

## Compiling

When you have cloned succesfully the source files, go to your `vim/src` directory.

```
cd vim/src
```

Then run the following to compile the Vim

```
make
```

### Problems when compiling

If you have the same problem that I had, that after some time an error occured that said something about that:

> No Terminal Library Found

So I looked up from the internetz and found this [solution](https://askubuntu.com/questions/158344/no-terminal-library-found-when-compiling-vim).

```
sudo apt-get install libncurses5-dev libncursesw5-dev
```

After installing the missing packages, I tried to run `make` again and now it was successful.

## Installing

As instructions says, you should install your Vim also to use it. So run the following command will do the trick:

```
make install
```

## Done

Now you should have the latest (at the time of pulling the source, compiling, installing) available version of the Vim. You can now update your Vim by doing the instructions again, but instead of cloning you should get the latest sources with:

```
git pull
```

Happy editing with the Vim can start on your fresh Xubuntu!


I got the idea to create my own blog my listening webbidevaus.fi -podcast. And when I saw the great tutorial made by Cassidy Williams on Twitter, I was ready to start.

Starting to create this site


I got the idea of creating blog when I have listened the [webbidevaus.fi](https://webbidevaus.fi/)-podcast and how blogs are dying because of social media.
And after I happened to see the great [tutorial](https://www.netlify.com/blog/2020/05/04/building-a-markdown-blog-with-next-9.4-and-netlify/) by [Cassidy Williams](https://cassidoo.co/) on the Twitter, I was ready to start.

## What have been used to build this site?

If you are not familiar with that tutorial or do not want to read it, but I suggest you do, here are the main ideas and tech behind.

- Built with [Next.js](https://nextjs.org/) framework
- `react-markdown` that will parse and render Markdown files
  - Blog posts are written with Markdown
- `gray-matter` will parse meta data from the blog posts that are in YAML, "front matter"
- `raw-loader` will enable the possibility to load Markdown files with webpack
- `sass` to help with styling the site
- `next-dark-mode` for the color theme setting of the site
- Accessibility is payed attention to while creating the site
  - Trying to validate with screenreader (VoiceOver) and with keyboard navigation

## What will this site contain?

Idea is to add own pages for my projects: apps, games and others. And to occasionally write some blog post, mostly from something that I'm building or found interesting.

But I might also blog something that is not related to dev.
