+
+
diff --git a/src/consts.ts b/src/consts.ts
new file mode 100644
index 0000000..0df8a61
--- /dev/null
+++ b/src/consts.ts
@@ -0,0 +1,5 @@
+// Place any global data in this file.
+// You can import this data from anywhere in your site by using the `import` keyword.
+
+export const SITE_TITLE = 'Astro Blog';
+export const SITE_DESCRIPTION = 'Welcome to my website!';
diff --git a/src/content/blog/4-useful-typescript-tricks.md b/src/content/blog/4-useful-typescript-tricks.md
new file mode 100644
index 0000000..b872733
--- /dev/null
+++ b/src/content/blog/4-useful-typescript-tricks.md
@@ -0,0 +1,232 @@
+---
+title: '5 useful Typescript tricks'
+date: '2019-10-06'
+categories:
+ - 'coding'
+tags:
+ - 'tips-and-tricks'
+ - 'typescript'
+coverImage: './images/amador-loureiro-BVyNlchWqzs-unsplash-scaled.jpg'
+---
+
+Typescript is a godsend. It is very easy to get started with and for most developers there is no way back once they get the hang of it. Sometimes it can get pretty advanced and intimidating though.
+
+This is why I decided to share 5 of my favourite typescript tips and tricks you might have needed in the past. Some are super basic, some are bit more advanced.
+
+**Update** _07 Okt 2019 @ 07:53_
+Reddit user [jakeboone02](https://www.reddit.com/r/typescript/comments/de17xs/5_useful_typescript_tricks_small_tricks_you_might/f2t9prk?utm_source=share&utm_medium=web2x) found an error in the ternary code.
+
+**Update** _06 Okt 2019 @ 15:06_
+Reddit user [smeijer87](https://www.reddit.com/r/typescript/comments/de17xs/5_useful_typescript_tricks_small_tricks_you_might/f2qveub?utm_source=share&utm_medium=web2x) found an error in the code for null coalescing.
+
+**Update** _06 Okt 2019 @ 14:47_
+A fiendly reader pointed out excluding interface type are called discriminated unions.
+
+1. [react higher-order components](#hoc)
+2. [smarter constructor](#constructors)
+3. [type checking functions](#type-checking-function)
+4. [discriminated unions](#excluding)
+5. [optional chaining & null coalescing](#future)
+
+
+
+
+
+
+
+Photo byΒ [Amador Loureiro](https://unsplash.com/@amadorloureiroblanco?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)Β onΒ [Unsplash](https://unsplash.com/search/photos/type?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
+
+
+
+
+
+## Higher-order Components
+
+In React [higher order components (HOC)](https://reactjs.org/docs/higher-order-components.html) are very useful tools. Generally they are used to wrap some layout or functionality to some other component. They are simply functions that return another component: basically the same pattern as decorators.
+
+In typescript it can be confusing how to write them _maintaining the right props_ after wrapping the original component. Here you are:
+
+```
+import React from 'react'
+
+function withLayout
(WrappedComponent: React.ComponentType
) {
+ return (props: P) => (
+
+
+
+
+
+ );
+}
+```
+
+Note also that when using the `withLayout` you don't need to specify the generic type explicitly, as typescript will inherit from the function parameter. Super handy!
+
+## Smarter constructors
+
+Let's start by the building block this is based on. It's a basic Javascript trick, not a typescript exclusive at first.
+
+```
+class Pizza {
+ slices: number
+ name: string
+
+ constructor(init) {
+ Object.assign(this, init)
+ }
+}
+
+const pizza = new Pizza({
+ slices: 8,
+ name: 'Margherita',
+})
+```
+
+What is happening here? With the super handy `Object.assign` simply assigns the object to the class. This is super handy when classes have many constructor parameters. But this is NOT type safe as your IDE/Editor will tell you. How do we fix this?
+
+```
+import { NonFunctionKeys } from 'utility-types'
+
+class Pizza {
+ slices!: number
+ name?: string
+
+ constructor(init: Pick>) {
+ Object.assign(this, init)
+ }
+
+ eat() {
+ this.slices = 0
+ }
+}
+
+const pizza = new Pizza({
+ slices: 8,
+ name: 'Margherita',
+})
+```
+
+Let me explain what happens:
+This leverages the awesome [utility-types](https://github.com/piotrwitek/utility-types) package. We first take all the keys that are not a function, so we don't overwrite the `eat` method of the class. Then we pick those from the general Pizza type.
+
+This means that `slices` will be required, while `name` will be optional, as they are defined.
+
+## Type-checking Functions
+
+Did you know you can write functions to tell typescript what type something is? This is awesome!
+
+Suppose we have the following interfaces
+
+```
+interface Food {
+ name: string
+}
+
+interface Pasta extends Food {
+ type: 'Spaghetti' | 'Fusilli'
+}
+
+interface Pizza extends Food {
+ slices: number
+}
+```
+
+Now we could write a `cook` function that accepts both Pasta and Pizza. Typescript itself cannot differentiate between the too.
+
+```
+function cook(what: Food) {
+ if(what === Pizza) ????
+}
+```
+
+Fortunately there is a nice solution built into typescript.
+
+```
+function isPizza(x: Food | Pizza): x is Pizza {
+ return x.hasOwnProperty('slices')
+}
+
+function isPasta(x: Food | Pasta): x is Pasta {
+ return x.hasOwnProperty('type')
+}
+
+
+function cook(plate: Food) {
+ if (isPizza(plate)) {
+ // Plate is now of type Pizza
+ putInTheOven(plate)
+ }
+ if (isPasta(plate)) {
+ // Plate is now of type Pasta
+ putInThePan(plate)
+ }
+}
+```
+
+Here we define two functions that return `x is Sometype` and return a boolean value based on the input. It's up to you of course to define it properly, but this can be very useful in various situations.
+
+## Discriminated unions
+
+```
+type Sqlite = {
+ type: 'sqlite',
+ database: string,
+}
+
+type PostgreSQL = {
+ type: 'postgresql',
+ database: string,
+ host: string,
+ post?: number
+}
+
+type PossibleConfigs = Sqlite | PostgreSQL
+
+function initialize(config: PossibleConfigs) {}
+```
+
+This might look like a simple one, but I often see people putting those sorts of types all into the same interface. By separating the different type of objects you make sure that they are safe. Also the autocomplete will thank you.
+
+## Optional Chaining & Null Coalescing
+
+This are future features that will be introduced in Typescript 3.7 that are very useful and will not be lived without after the release in early November 2019.
+
+Optional chaining is an obvious shorthand. Every time you need to check if a property (especially if nested) exists, you need to do lots of repetitive checking. No more!
+
+```
+a && a.b && a.b.c // π€¬
+
+a?.b?.c // π
+```
+
+Null coalescing is also a very useful shorthand. You all know the `||` shorthand, often used to initialise a variable if no value is given.
+
+```
+const option = something || 'default'
+
+// Sugar for
+const option = !!something ? something : 'default'
+```
+
+The problem is with values that are actual values, but result as falsy.
+
+```
+false || 'default' // => 'default'
+0 || 'default' // => 'default'
+```
+
+This is where the Null Coalescing comes in.
+
+```
+const option = something ?? 'default' // π
+
+// Sugar for
+const option = (x === null || x === undefined)
+ ? 'default'
+ : x
+
+0 ?? 'default' // => 0
+false ?? 'default' // => false
+```
+
+Basically it only assign the default value if the provided one is `null` or `undefined` so that values like `false` or `0` don't get overwritten.
diff --git a/src/content/blog/5-jetbrains-tipsntricks-i-wish-id-known-sooner.md b/src/content/blog/5-jetbrains-tipsntricks-i-wish-id-known-sooner.md
new file mode 100644
index 0000000..8d6ce54
--- /dev/null
+++ b/src/content/blog/5-jetbrains-tipsntricks-i-wish-id-known-sooner.md
@@ -0,0 +1,64 @@
+---
+title: "5 JetBrains tips'n'tricks I wish I'd known sooner"
+date: '2019-07-03'
+categories:
+ - 'coding'
+tags:
+ - 'ide'
+ - 'jetbrains'
+coverImage: './images/cards-scaled.jpg'
+---
+
+Here are some small features that may not be apparent to the newer devs that leverage the JetBrain IDEs. Most of them I discovered by using the.
+
+1. Double Shift for navigating your codebase
+2. cmd/ctrl + shift + f for text search
+3. Remote Interpreters
+4. Syncing settings
+5. Reformatting
+
+## Double Shift
+
+For many including myself this is the primary way to navigate code and files. Simply press shift two times, type in the file, class or function you are searching for and press enter. This is by far the quickest and most accurate way to navigate code in any Editor or IDE I've tried so far.
+Do it once, and you will not go back.
+
+## CMD + Shift + F
+
+**Windows & Linux**: ctrl + shift + f
+
+This is somewhat similar to 2x Shift. The main difference is that double shifts searches mainly for filenames and symbols (function names, class names, etc.) while CMD shift f functions more like a text search.
+
+What makes this really powerful is that you can [regex search](https://www.jetbrains.com/help/idea/tutorial-finding-and-replacing-text-using-regular-expressions.html#Tutorial_Finding_and_Replacing_Text_Using_Regular_Expressions.xml), [mask files by extension](https://www.jetbrains.com/help/idea/finding-and-replacing-text-in-project.html#exclude_type), [exclude folders](https://www.jetbrains.com/help/webstorm/configuring-project-structure.html#022f3834) (e.g. build folders) and search only in specific directories.
+
+If you ever _loose something in your code_ or _maybe your are new to the project_ and don't know where certain parts are located, **this is the way to find it.**
+
+## Remote Interpreters
+
+This is a huge one for me! JetBrains allows you tu run the code on remote machines. This extends also to all the packages you install, the shell in the terminal is automatically opened on the host.
+
+Remote hosts can be either a machine in which you ssh into, a local docker container running a different version of the language that you need.
+
+_You might ask why?_
+
+1. Use a docker container with a specific version of node/python/php/etc. instead of installing it locally on your machine. Basically a virtual environment for every language. Amazing!
+2. Maybe you want to run the code on a Raspberry Pi, which has a different architecture. So all the packages you install will be installed on the Raspberry and when you hit _command+r_ the code will execute not on your machine but you still get the logs. Incredible!
+
+To configure **simply go to the** _**run**_ **menu and add a new remote interpreter**.
+
+## Sync Settings across devices
+
+This is very simple. You can sync all your settings, including plugins, to either your JetBrain account or your own git settings repository. When you open the IDE some where else, everything is back to how it was.
+
+Enable by going to: File -> Sync IDE Settings
+
+**Note:** The synchronisation is per-IDE-basis, so your WebStorm settings are not synced with your PyCharm settings of course.
+
+## Reformatting
+
+Yet again a one of the reasons why I can't go back to VSCode. For each language there is a TON of customisation possible when reformatting. You can decide how your spaces should look, commas, imports, semicolons, everything is completely up to you.
+
+You can tinker around with it in the Settings under: Editor -> Code Style ->
+
+**Bonus:** If you select on a folder in the project view, you can reformat all files inside it, quick and easy. This is especially useful if one has imported some external sources for example.
+
+Thats it, I hope you found some of it useful and that you can enjoy the JetBrain cosmos even more π
diff --git a/src/content/blog/a-guide-to-directus-for-gatsby-or-sapper-as-cms.md b/src/content/blog/a-guide-to-directus-for-gatsby-or-sapper-as-cms.md
new file mode 100644
index 0000000..d94fe9f
--- /dev/null
+++ b/src/content/blog/a-guide-to-directus-for-gatsby-or-sapper-as-cms.md
@@ -0,0 +1,255 @@
+---
+title: 'A guide to Directus for Gatsby or Sapper as CMS'
+date: '2020-04-11'
+categories:
+ - 'coding'
+tags:
+ - 'cms'
+ - 'directus'
+ - 'gatsby'
+ - 'sapper'
+ - 'static-generated'
+coverImage: './images/noah-silliman-doBrZnp_wqA-unsplash.jpg'
+---
+
+For those who don't know what [Directus](https://directus.io/) is: an open source database first CMS that generates an api. Lot of buzzwords there, but it's truly a cool project that deserves much more attention IMO.
+
+Recently I've used it to deliver some static generated websites that needed some sort of CMS. Think of a blog, or small landing pages. For that kind you can combine it with Gatsby or in this case Sapper to generate static html from the API.
+
+The article will focus on Sapper, but the parts related to Directus are identical for Gatsby, just the frontend will change.
+
+#### What will we do today?
+
+1. [Install Directus](#1)
+2. [Create some data and make in publicly available](#2)
+3. [Create a super small frontend](#3)
+4. [Write a custom hook for Directus that automatically triggers the build whenever content changes in the DB.](#4)
+
+## Installing Directus
+
+This should be straight forward. These instructions are adopted from the [official docker guide](https://docs.directus.io/installation/docker.html). I will use Docker for this.
+
+```yaml
+# docker-compose.yml
+
+version: '3.7'
+
+services:
+ mysql:
+ image: mysql:5.7
+ volumes:
+ - ./data/db:/var/lib/mysql
+ env_file: .env
+
+ directus:
+ image: directus/directus:v8-apache
+ ports:
+ - '8000:80'
+ env_file: .env
+ volumes:
+ - ./data/config:/var/directus/config
+ - ./data/uploads:/var/directus/public/uploads
+```
+
+The we run `docker-compose up -d`. After a few seconds we need to initialise Directus.
+
+```bash
+docker-compose run directus install --email some@email.com --password 1337
+```
+
+Now you can go to [localhost:8000](http://localhost:8000) and sign in with the credentials you just specified
+
+## Create some data
+
+Now I'm going to create some data to test our blog. First go to the [settings](http://localhost:8080/admin/#/_/settings/collections) and create a new collection. Im a going to call it `posts`.
+Then we are going to add a `title` text field and a simple markdown editor with a `body` field.
+Lastly we add a simple post with random data.
+
+
+
+
+
+
+
+Insert collection and data
+
+
+
+
+
+## Giving permissions
+
+Now we need to give permission to the `public` role so that we don't need an API Key. For the most sites this is perfectly fine, since the data we only expose the data that gets displayed in the website anyways.
+
+Goto the [roles settings](http://localhost:8080/admin/#/_/settings/roles) and click on `public`. There select the tables you want/need for the website.
+
+Gotcha: If you have files (like photos) you also need to enable them for public viewing. Do this by clicking "Show Directus System Collections" and enabling view access to `Files`
+
+
+
+
+
+
+
+Give permissions to the public user
+
+
+
+
+
+## Building a minimal frontend with sapper
+
+I will not explain how [Sapper](https://sapper.svelte.dev/) works as this is not the focus today. If you don't know Sapper: It's very similar to Nuxt or Next.js with the additional option to even export as static html, so the end result is similar to a Gatsby website. Very powerful and easy to use and code.
+
+```bash
+# Setup
+npx degit "sveltejs/sapper-template#rollup" my-blog
+cd my-blog
+yarn
+yarn run dev
+# open http://localhost:3000
+```
+
+### Load data from Directus
+
+Directus has a [JS SDK](https://docs.directus.io/guides/js-sdk.html) and since we have made data public we don't even need a token or authentication. Awesome π
+
+```bash
+yarn add @directus/sdk-js
+```
+
+First we are going to initialise the SDK. The default project name is simply `directus`
+
+```ts
+// ./src/lib/api.js
+
+import DirectusSDK from '@directus/sdk-js'
+
+export const client = new DirectusSDK({
+ url: 'http://localhost:8000',
+ project: 'directus',
+})
+```
+
+Then lets make a server side json loader so that the exported site will not even contact the server afterwards. Completely static html.
+
+```ts
+// ./src/routes/posts.json.js
+
+import { client } from '../lib/api'
+
+export async function get(req, res, next) {
+ try {
+ const { data } = await client.getItems('posts')
+
+ res.writeHead(200, {
+ 'Content-Type': 'application/json',
+ })
+ res.end(JSON.stringify(data))
+ } catch (e) {
+ res.writeHead(404, {
+ 'Content-Type': 'application/json',
+ })
+ res.end(
+ JSON.stringify({
+ message: 'Not found',
+ })
+ )
+ }
+}
+```
+
+Finally the svelte component.
+
+```svelte
+// ./src/routes/index.svelte
+
+
+
+
+
+
+ {#each data as post}
+
+ {/each}
+
+```
+
+## Write a custom hook to trigger a build every time the data changes
+
+When it comes to static generated sites often the easiest way to do things is to simply generate the site every "x" time. That kinda works however there will be many build that don't contain any change and you need to wait for a cron job to see changes. That sucks.
+
+Fortunately Directus supports writing custom hooks! π
+I will illustrate the case for [Drone](https://drone.io/), but the approach can be used for any CI/CD server out there.
+
+For that we create a new php file and give it a name. In my case: `drone-hook.php`
+
+```php
+# ./hooks/drone-hook.php
+
+ [
+ 'item.create' => process,
+ 'item.update' => process,
+ 'item.delete' => process,
+ ]
+ ];
+```
+
+I've also put the token inside of the `.env` file so that I can safely check my code into a repo and not having to worry about having a token lying around in the codebase.
+
+```bash
+# .env
+
+...
+DIRECTUS_DATABASE_PASSWORD=directus
+
+DRONE_TOKEN=my-drone-token
+```
+
+The last thing to do is actually load the code into Directus. You can simply mount the `./hooks` folder we just created into the container and reload.
+
+```yaml
+# docker-compose.yml
+
+version: "3.7"
+
+...
+
+ directus:
+ ...
+ volumes:
+ ...
+ - ./hooks:/var/directus/public/extensions/custom/hooks
+```
+
+This will trigger a curl post request every time items in a collection listed inside of `$collectionsToWatch` get either created, updated, or deleted.
+
+You will probably need to make some adaptations if you are not using Drone, but at the end it will boil down to making a http request to your build server triggering a new build.
diff --git a/src/content/blog/a-practical-introduction-to-react-hooks.md b/src/content/blog/a-practical-introduction-to-react-hooks.md
new file mode 100644
index 0000000..38901ba
--- /dev/null
+++ b/src/content/blog/a-practical-introduction-to-react-hooks.md
@@ -0,0 +1,290 @@
+---
+title: 'A practical introduction to React Hooks'
+date: '2019-05-03'
+categories:
+ - 'coding'
+tags:
+ - 'hooks'
+ - 'javascript'
+ - 'react'
+coverImage: './images/matt-artz-353210-unsplash-scaled.jpg'
+---
+
+Since [React](https://reactjs.org/) 16.8 was published in February Hooks are now officially supported and the API finalised and stable. They arose around the idea of functional programming. In short: they allow to have state in functional components and with custom hooks (we'll have a look at those later) they allow us to reuse and share state logic between multiple components. This article assumes a basic understanding of React.
+
+All the code shown can be found here: [https://git.nicco.io/cupcakearmy/guide-react-hooks](https://git.nicco.io/cupcakearmy/guide-react-hooks)
+
+#### What we will look at today
+
+1. Class Components vs Functional Components
+2. Native React hooks
+ - `useState`
+ - `useEffect`
+ - `useRef`
+3. Custom hooks
+ - `useWindow`
+ - `useApi` (The real power)
+
+## 1\. Class vs Functional
+
+Let's first have a look at the 'hello world' of react: A simple counter which we can increment or decrement.
+
+###### Class
+
+```
+import React from 'react'
+
+
+class SimpleClass extends React.Component {
+
+ constructor(props) {
+ super(props)
+ this.state = {
+ counter: 0,
+ }
+ }
+
+ componentDidMount() {
+ console.log('Lets goo π')
+ setTimeout(() => this.setState({ counter: 5 }), 2000)
+ }
+
+ componentDidUpdate() {
+ console.log(this.state.counter)
+ }
+
+ render() {
+ return
+
{this.state.counter}
+
+
+
+
+ }
+}
+```
+
+Easy! Now we will convert the snippet above to the functional equivalent with the help of hooks.
+
+###### Hooks
+
+```
+import React, { useEffect, useState } from 'react'
+
+
+const SimpleFC = () => {
+ const [counter, setCounter] = useState(0)
+
+ return
+
{counter}
+
+
+
+
+}
+```
+
+Awesome π Simple enough right?
+
+## 2\. Native React hooks
+
+### useState
+
+Our constructor with `state` is gone and we have a simple `const [counter, setCounter] = useState(0)`.
+
+How does this work? `useState` returns an array wich deconstructed gives us a getter and a setter. The parameter we pass to it is the initial value. That is all. Simple and useful.
+
+### useEffect
+
+How about the timeout and the `console.log`? Welcome `useEffect`!
+
+`useEffect` takes a function and executes it every time the component updates. So it is basically `componentDidMount` and `componentDidUpdate` together.
+The second parameter determines when the function will be triggered. It expects an array and checks whether the variables inside it change.
+If no array is passed it will trigger every time the component gets updated and or mounted.
+This means that you can pass props into the array and it will effect only when those change. Also, if you pass an empty array it will trigger only once and is equivalent to `componentDidMount`.
+
+```
+useEffect(myFN) // triggered every time the component gets updated
+useEffect(myFN, []) // Only triggered
+useEffect(myFN, [prop1, prop2]) // Gets triggered when either the props get changed
+```
+
+In our example from above we would use it as follows:
+
+```
+import React, { useEffect, useState } from 'react'
+
+
+const SimpleFC = () => {
+ const [counter, setCounter] = useState(0)
+
+ useEffect(() => {
+ setTimeout(() => {
+ setCounter(5)
+ }, 1000)
+ }, [])
+
+ useEffect(() => {
+ console.log(counter)
+ })
+
+ return
+
{counter}
+
+
+
+
+}
+```
+
+### useRef
+
+Now let's have a look at `useRef`. We will have a normal class based component and the equivalent functional one with the help of hooks.
+
+###### Class
+
+```
+class RefClass extends React.Component {
+ constructor(props) {
+ super(props)
+ this.myRef = React.createRef()
+ this.change = this.change.bind(this)
+ }
+
+ change() {
+ this.myRef.current.style.backgroundColor = '#6ba7ee'
+ }
+
+ render() {
+ return
+}
+```
+
+That is huge improvement in terms of amount code and most importantly readability. `react.current` points to the Dom element, which we can then modify at our will.
+
+As a side node: look how much cleaner we can have class functions. instead of needing binding the function to `this`, in functional components we just need to define them.
+
+## 3\. Custom hooks
+
+This is where the real power lies. With custom hooks react allows you to reuse stateful logic and share it between components. Very powerful.
+We will cover two examples:
+
+1. Window size
+2. Consume an API
+
+### Window size
+
+Assume you want to make a component dependent on the window size of the browser. With react hooks this is quick, easy and reusable.
+
+###### hooks.js
+
+```
+export const useWindowSize = () => {
+ const getCurrentSize = () => ({ height: window.innerHeight, width: window.innerWidth })
+
+ const [size, setSize] = useState(getCurrentSize())
+
+ useEffect(() => {
+ const handle = () => setSize(getCurrentSize())
+ window.addEventListener('resize', handle)
+ return () => window.removeEventListener('resize', handle)
+ })
+
+ return size
+}
+```
+
+###### component.jsx
+
+```
+import { useWindowSize } from '../Hooks'
+
+const Custom = ()=> {
+ const size = useWindowSize()
+
+ return
+ Width: {size.width}
+
+ Height: {size.height}
+
+}
+```
+
+As we can see we created a custom hook called `useWindowSize`. We now can use our own hook inside of other components.
+
+Custom components are just arrow functions that use the native `useState` and `useEffect` and some custom logic you add.
+
+Note the `return () => window.removeEventListener('resize', handle)` inside the effect function. You can return a function in the effect function that will get called whenever the hook will be unmounted. This allows us to do cleanup. In this case we stop listening for window size changes. Neat πͺ
+
+### API Hook
+
+Last but definitely not least: API calls. I personally think this is where hooks really show their power. I'll show you the code first and then explain.
+
+###### hooks.js
+
+```
+export const useCallApi = (url) => {
+ const [data, setData] = useState()
+
+ const update = () => {
+ fetch(url)
+ .then(response => response.json())
+ .then(json => setData(json))
+ }
+
+ useEffect(() => {
+ update()
+ }, [])
+
+ return [data, update]
+}
+```
+
+###### posts.jsx
+
+```
+import { useCallApi } from '../Hooks'
+
+
+const Posts = () => {
+ const [posts] = useCallApi(`https://jsonplaceholder.typicode.com/posts`)
+ const [users] = useCallApi(`https://jsonplaceholder.typicode.com/users`)
+ // ...
+
+ if (!posts) return
Loading π°
+
+ return
+ {posts.map((post, i) =>
+
{post.title}
+
{post.body}
+
)}
+
+}
+```
+
+What is happening? We created a custom hook that queries an API and returns the result. How? We pass a url to the hook and we get the data back.
+
+Internally the hook uses `useState` to save the results. It executes the update functions once (because the use effect has an empty array as second parameter).
+
+Now we can use the `useCallApi` hook in multiple components or many times inside the same component. Options are endless.
diff --git a/src/content/blog/a-sane-and-efficient-guide-for-consuming-graphql-endpoints-in-typescript.md b/src/content/blog/a-sane-and-efficient-guide-for-consuming-graphql-endpoints-in-typescript.md
new file mode 100644
index 0000000..e27e4b8
--- /dev/null
+++ b/src/content/blog/a-sane-and-efficient-guide-for-consuming-graphql-endpoints-in-typescript.md
@@ -0,0 +1,187 @@
+---
+title: 'A sane and efficient guide for consuming GraphQL endpoints in Typescript'
+date: '2021-12-31'
+categories:
+ - 'coding'
+tags:
+ - 'code-generation'
+ - 'graphql'
+ - 'typescript'
+coverImage: './images/clayton-robbins-Ru09fQONJWo-unsplash-scaled.jpg'
+---
+
+GraphQL is becoming common practice in the wild, while I feel the workflow with Typescript is still not straight forward. I want to propose one way to go about it and hopefully make your next Typescript GraphQL project a joy to work with!
+Lets dive deeper π€Ώ.
+
+I created a tiny [companion repository](https://github.com/cupcakearmy/blog-typescript-graphql) if you want to check out the code and try it out.
+Or check out the [finished demo](https://blog-typescript-graphql.vercel.app/).
+
+## Intro
+
+First we need to decide on what do we want (and probably need)
+
+- Editor support for syntax highlighting `gql` and `.graphql` files.
+- Strict type safety for our client.
+- Easy tooling & workflow
+
+So our workflow will look something like this:
+
+```
+GrapQL API -> Schema -> Queries & Mutations -> Typescript -> Client
+```
+
+For this article we'll build a minuscule one pager using the [SpaceX Land GraphQL API](https://api.spacex.land/graphql/) to display some space travel data.
+
+## Editor setup
+
+The setup will be be for VSCode. For that we first install the [GraphQL extension](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql). This will enable us to have warnings and autocompletion inside of `gql` tags and `.graphql` files.
+
+We need to add a `.graphqlrc.yml` file at the root with the following content:
+
+```yaml
+schema: https://api.spacex.land/graphql/
+```
+
+## Writing Queries & Mutations
+
+Now onto the real stuff.
+We want to take our endpoint, generate types and queries from it that can then be used by Typescript safely. To do that we will:
+
+1. Setup generators for Schema, Queries, Mutations & SDK.
+2. Write some Queries & Mutations
+3. Generate the SDK
+4. Consume the SDK
+
+### Setup
+
+There is this amazing project called `@graphql-codegen` which is a collection of tools for helping you generating various things from GraphQL. Let's install:
+
+```bash
+# Generators
+pnpm i -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-graphql-request
+# For the SDK
+pnpm i -D graphql graphql-request graphql-tag
+```
+
+I will assume my GraphQL stuff will live under `./src/lib/gql`
+
+We will create a top level configuration file to handle all of our generation step called `codegen.yaml`. Ignore the `config` option for now, I will explain that later
+
+```yaml
+schema: https://api.spacex.land/graphql/
+documents: 'src/**/*.graphql'
+generates:
+ ./src/lib/gql/gen.ts:
+ plugins:
+ - '@graphql-codegen/typescript'
+ - '@graphql-codegen/typescript-operations'
+ - '@graphql-codegen/typescript-graphql-request'
+ config:
+ maybeValue: 'T'
+ typesPrefix: GQL
+ immutableTypes: true
+ useTypeImports: true
+ avoidOptionals: true
+```
+
+The property `schema` does not need an explanation.
+`generates` has 3 plugin enabled, one for the general types, another for queries and mutations and the last one to generate us a ready to use SDK and will save it under `./src/lib/gql/gen.ts`.
+`documents` is a glob that will find all our GraphQL files we write and generate the according code.
+
+### Creating Queries
+
+Now let's create a `src/lib/gql/root.graphql` file and write some queries, all autocompleted of course!
+
+```gql
+query LaunchpadsMany {
+ launchpads(limit: 10) {
+ id
+ name
+ location {
+ name
+ }
+ successful_launches
+ status
+ }
+}
+
+query LaunchByYear($year: String!) {
+ launches(find: { launch_year: $year }) {
+ mission_id
+ mission_name
+ launch_date_utc
+ rocket {
+ rocket_name
+ }
+ }
+}
+```
+
+### Let magic do it's thing
+
+```bash
+pnpm exec graphql-codegen
+```
+
+This will look at all our custom queries and mutations and generate us a ready to consume SDK that is completely typed. Amazing!
+
+### Leverage the new SDK
+
+```ts
+// src/lib/gql/index.ts
+
+import { GraphQLClient } from 'graphql-request'
+import { getSdk } from './gen'
+
+const client = new GraphQLClient('https://api.spacex.land/graphql/')
+export const SDK = getSdk(client)
+```
+
+```ts
+import { SDK } from '$lib/gql'
+
+const data = await SDK.LaunchByYear({ year: '2021' })
+```
+
+You can also use the generated types to explicitly set them
+
+```ts
+import { SDK } from '$lib/gql'
+import type { GQLLaunchByYearQuery } from '$lib/gql/gen'
+
+const data: GQLLaunchByYearQuery = await SDK.LaunchByYear({ year: '2021' })
+```
+
+Every thing is typed now, I can't pass a number to the `year` variable or use return data that does not exist. Typescript will error on me. This not only gives us autocompletion but also the safety of what we are doing.
+
+### Configuration options
+
+I promised I would come back to it at some point.
+
+```yaml
+schema: ...
+generates:
+ ...
+ config:
+ maybeValue: "T"
+ typesPrefix: GQL
+ immutableTypes: true
+ useTypeImports: true
+ avoidOptionals: true
+```
+
+There are [many options](https://www.graphql-code-generator.com/plugins/typescript#config-api-reference) for the generators, but I think these are quite sensible defaults.
+
+`maybeValue` is `T | null` as default, but since we only use our queries which are type safe we can just remove uncertainty and use the correct type straight away.
+
+`avoidOptionals` same thing as the `maybeValue`, just with `prop:?`. Don't want that.
+
+`typesPrefix` is useful if you have some own type specifications that you don't want to clash with. I like to prefix all my generated GraphQL stuff with `GQL` to keep it tidy.
+
+`immutableTypes` i prefer using an immutable type, with basically adds a `readonly` to every property. This way we are sure we are not editing data on the client.
+
+`useTypeImports` this uses `import type` whenever possible.
+
+## Final thoughts
+
+I hope this made your GraphQL life a bit easier, it definitely did for me and it's way more fun to consume GraphQL API this way. Also something worth mentioning is that you can use the `@graphql-codegen/typescript-generic-sdk` package instead of the `@graphql-codegen/typescript-graphql-request` if you want to do the network requests yourself. It's easy to use but if you don't really have a reason just stick with the `graphql-request` one I'd say.
diff --git a/src/content/blog/automate-github-releases-with-drone.md b/src/content/blog/automate-github-releases-with-drone.md
new file mode 100644
index 0000000..f3d0912
--- /dev/null
+++ b/src/content/blog/automate-github-releases-with-drone.md
@@ -0,0 +1,123 @@
+---
+title: 'Automate Github releases with Drone.'
+date: '2020-01-29'
+categories:
+ - 'coding'
+tags:
+ - 'cd'
+ - 'drone'
+coverImage: './images/franck-v-U3sOwViXhkY-unsplash-scaled-1.jpg'
+---
+
+If you have a project on github that has releases for code or binaries for example it might be a good idea to automate it. Not only this saved a lot of clicks and time, but also it makes releases predictable and therefore less prone to errors in the process.
+
+For this article I will take my own [project](https://github.com/cupcakearmy/autorestic) as the example here, but of course this can be applied to any project, written in whatever language and/or framework.
+
+Also I will base this guide on [Drone](https://drone.io/). But I'm sure there is the same workflow for jenkins/circle/whatever CI/CD system you are using.
+This means I'm assuming you have a repository already running with Drone.
+
+The first thing we will need is an access token for the Github API.
+You can get them here [https://github.com/settings/tokens](https://github.com/settings/tokens). I called my `Drone` and you need to check the permissions for the repos as follows.
+
+
+
+
+
+
+
+How to create a new token in Github
+
+
+
+
+
+Copy the token and save it somewhere **safe**. You will see it only once.
+
+We will add this token to our Drone repository settings. For that navigate to your drone instance and open the settings for the repository in question.
+
+
+
+
+
+
+
+Add the token to Drone secrets
+
+
+
+
+
+I've called my secret `github` and I have not allowed it in PRs. Otherwise a PR made by some random user could trigger a release. We don't want that.
+
+Now it's time to edit our drone file and make everything automatic. The flow at the end will be as follows.
+
+1. Code, commit and develop
+2. When you are ready for the next release we create a tag
+3. Once a tag is created and pushed drone will automatically build and release that code attached to the tag.
+
+Simple right? Lets see how!
+
+```yaml
+# .drone.yml
+---
+kind: pipeline
+name: default
+
+steps:
+ - name: build
+ image: node
+ pull: always
+ commands:
+ - yarn
+ - yarn run bin
+ when:
+ event: tag
+
+ - name: publish
+ image: plugins/github-release
+ pull: always
+ settings:
+ api_key:
+ from_secret: github
+ files: bin/*
+ checksum:
+ - sha512
+ note: CHANGELOG.md
+ when:
+ event: tag
+---
+kind: signature
+hmac: 3b1f235f6a6f0ee1aa3f572d0833c4f0eec931dbe0378f31b9efa336a7462912
+```
+
+Lets understand what is happening here:
+
+First I'm building my project. In this case this is a standalone typescript executable build by [pkg](https://github.com/zeit/pkg). The build binaries will be emitted into the `./bin` folder. But it really does not matter. Could be anything.
+
+Secondly we tell the [Github release plugin](http://plugins.drone.io/drone-plugins/drone-github-release/) what files we want to include in the release. In my case this was everything inside the `bin` folder. This can also be an array.
+
+```
+files:
+ - dist/*
+ - bin/binary.exe
+```
+
+The `api_key` includes the token, which we load from a secret so that we don't simply put in the `.drone.yml` file, which could be a huge security issue!
+
+The `checksum` setting is also amazing because as the name suggests the plugin automatically generates checksums for all the files. That is amazingly practical and there is no reason not to do that. You can choose a few hash functions but I would suggest simply going with `sha512`.
+
+## So how do a trigger a release now?
+
+Simple! First tag your code with the following command
+
+```bash
+git tag 1.2.3
+```
+
+Now push the tag and drone will be on its way
+
+```bash
+git push --tags
+```
+
+Thats it! Hope it made your release journey easier π
diff --git a/src/content/blog/backup-mongodb-inside-of-docker-the-right-way.md b/src/content/blog/backup-mongodb-inside-of-docker-the-right-way.md
new file mode 100644
index 0000000..1a407e7
--- /dev/null
+++ b/src/content/blog/backup-mongodb-inside-of-docker-the-right-way.md
@@ -0,0 +1,55 @@
+---
+title: 'Backup MongoDB inside of Docker the easy way'
+date: '2019-08-15'
+categories:
+ - 'coding'
+tags:
+ - 'cli'
+ - 'docker'
+coverImage: './images/tobias-fischer-PkbZahEG2Ng-unsplash-scaled.jpg'
+---
+
+Backing up a mongo instance is more confusing than it should be. Maybe you have run into a `the input device is not a TTY` or you simply don't know how to do it? Here are two 1-Liner to backup and restore a running mongo instance.
+
+## Setup
+
+First we define our mongo instance like below. Notice that instead of mapping the data directory onto our filesystem we have a native volume.
+
+###### docker-compose.yml
+
+```
+version: '3.7'
+
+volumes:
+ db:
+
+services:
+ db:
+ image: mongo:3-xenial
+ restart: always
+ volumes:
+ - db:/data/db
+ ports:
+ - 27017:27017
+```
+
+Then start with `docker-compose up -d`.
+
+## Backup
+
+First we will do a backup of our running instance.
+
+```
+docker-compose exec -T db mongodump --archive --gzip --db mydb > dump.gz
+```
+
+The `-T` option is for enabling piping the output to our own machine. We also tell mongo to use the `--gzip` option to compress the file significantly.
+Lastly we specify the `--db ` that we want to backup.
+
+## Restore
+
+Whenever we want to restore a db, or maybe seed it we can run the following:
+
+```
+docker-compose exec -T db mongorestore --archive --gzip < dump.gz
+```
diff --git a/src/content/blog/be-your-own-tiny-image-cdn.md b/src/content/blog/be-your-own-tiny-image-cdn.md
new file mode 100644
index 0000000..626767d
--- /dev/null
+++ b/src/content/blog/be-your-own-tiny-image-cdn.md
@@ -0,0 +1,87 @@
+---
+title: 'Be your own (tiny) image CDN'
+date: '2023-04-28'
+coverImage: './images/meagan-carsience-QGnm_F_nd1E-unsplash1.jpg'
+---
+
+Today, I want to share how to create and host your own image transformation service, much like the known [Imgix](https://imgix.com/) and [Cloudinary](https://cloudinary.com/). The aim is to have a powerful transformation server for images that caches, so images only need to be computed once.
+
+The building blocks will be [imgproxy](https://github.com/imgproxy/imgproxy) and [nginx](https://nginx.org/). The former is a battle tested and fast image server with support for most image operations, while nginx should not need an introduction.
+
+While imgproxy is the core of this operation, it does not support caching. This is intentional, as it's intended to be run behind a proxy. For that, nginx is the tool of choice, as it enables us to easily setup caching rules to avoid generating the same image twice in a given cache interval. Everything will be done in docker containers, but the concept, of course, extends to bare metal too.
+
+## Setup
+
+Imgproxy fortunately is very customisable and options can be passed by env variables, which is wonderful.
+
+It's generally advised to use signed URLs if possible. In my case, there was no backbend that could sign them, so it was avoided. Whenever omitting signing, it is critical to limit the allowed sources to the minimum with `IMGPROXY_ALLOWED_SOURCES` so that it cannot be abused by other websites.
+
+Below is docker file used. Required is only the `IMGPROXY_BIND` as otherwise nginx cannot connect to our image container. The other options are up to you and are just here for a quick setup.
+
+```yaml
+# docker-compose.yaml
+version: '3.8'
+
+volumes:
+ cache:
+
+services:
+ img:
+ image: darthsim/imgproxy
+ environment:
+ # Required for nginx
+ IMGPROXY_BIND: 0.0.0.0:80
+
+ # Security
+ IMGPROXY_MAX_SRC_RESOLUTION: 100
+ IMGPROXY_ALLOWED_SOURCES: https://images.example.org/
+
+ # Transforms
+ IMGPROXY_ENFORCE_WEBP: true
+ IMGPROXY_ENFORCE_AVIF: true
+ IMGPROXY_ONLY_PRESETS: true
+ IMGPROXY_PRESETS: default=resizing_type:fit,sm=size:250:250,md=size:500:500,lg=size:1000:1000
+
+ proxy:
+ image: nginx
+ ports:
+ - 80:80
+ volumes:
+ - ./proxy.conf:/etc/nginx/conf.d/default.conf:ro
+ - cache:/tmp
+```
+
+The more interesting part is the nginx configuration file below. In this case, we target 30 days as a cache TTL. This could be easily increased if we are only talking about static images.
+
+```nginx
+# Set cache to 30 days, 1GB.
+# Only use the uri as the cache key, as it's the only input for imageproxy.
+proxy_cache_path /tmp levels=1:2 keys_zone=images:8m max_size=1g inactive=30d;
+proxy_cache_key "$uri";
+proxy_cache_valid 200 30d;
+
+server
+{
+ listen 80;
+ server_name _;
+
+ location /
+ {
+ proxy_pass_request_headers off;
+ proxy_set_header HOST $host;
+ proxy_set_header Accept $http_accept;
+
+ proxy_pass http://img;
+
+ proxy_cache images;
+ }
+}
+```
+
+Here we are configuring a few things, so let's elaborate:
+
+First a cache is configured at the location `/tmp`, with the name `images`, a maximum size of 1 gigabyte and the `inactive` parameter to 30 days.
+For the cache key, we use only the `$uri` variable, as all the parameters that affect image generation are included in the path and makes therefore the image transformation unique.
+Lastly, we tell nginx to cache all responses with code `200` for 30 days.
+
+Another important trick is to strip all headers that reach the proxy. This is done by setting `proxy_pass_request_headers` and only passing the `Accept` header, as it's required for automatically determining the image format.
diff --git a/src/content/blog/cleanup-downloaded-google-photos-takeout-archives.md b/src/content/blog/cleanup-downloaded-google-photos-takeout-archives.md
new file mode 100644
index 0000000..0f6f2b1
--- /dev/null
+++ b/src/content/blog/cleanup-downloaded-google-photos-takeout-archives.md
@@ -0,0 +1,67 @@
+---
+title: 'Cleanup downloaded Google Photos Takeout archives'
+date: '2019-05-04'
+categories:
+ - 'general'
+tags:
+ - 'google-photos'
+ - 'google-takeout'
+ - 'icloud-photos'
+ - 'migration'
+coverImage: './images/rayan-almuslem-1302778-unsplash-scaled.jpg'
+---
+
+Recently I've been taking my tin foil hat a bit more seriously and since I mostly live in the Apple ecosystem (yes, you can judge me) the iCloud Photos felt like a pretty good alternative. Yes, it's still a cloud but the content [is encrypted](https://support.apple.com/en-us/HT202303) and most importantly Apple has no real economical incentive on data mining you data. They are far ahead in terms of privacy. With that out of the way let's go! π
+
+TLDR: I wrote this [cleaning script](https://gist.github.com/CupCakeArmy/51070b311e6fd0a3f2d793bee3350ede) (tested only on macOS) to remove all duplicates from the [Google Takeout](https://takeout.google.com/) folders.
+
+The process seemed easy at first. Google offers an awesome tools for exporting data out of their servers. It's called [Takeout](https://takeout.google.com/). So basically you select the Google Photos service and let them create the archives. Then after a few hours you can download them.
+
+Now at the time I had ~40gb worth of pictures and videos saved in Googles cloud, however the archives I downloaded where about ~90gb. I started looking into it and a lot of photos where duplicates and edited versions that google was keeping. In addition the folders where full of JSON metadata.
+
+**time for cleanup π§Ή**
+
+Fortunately for us there is the awesome `find` command that will save our lives. Removing metadata and duplicates from more than ~50k files is impossible by hand.
+
+First we need to remove all `.json` files:
+
+```
+find ./my_takeout_folder -name "*.json" -type f -delete
+```
+
+Then all the duplicates that contain a `(1)` at the end of the file.
+
+```
+# macOS
+find -E ./my_takeout_folder -regex ".*\([0-9]+\).*" -type f -delete
+
+# Unix (Thanks to Stravos F. for pointing that out β€οΈ)
+find ./my_takeout_folder -regextype posix-extended -regex ".*\([0-9]+\).*" -type f -delete
+```
+
+All the edited photos by google
+
+```
+find ./my_takeout_folder -name "*edited*" -type f -delete
+```
+
+And lastly remove all the empty folders.
+
+```
+find ./my_takeout_folder -type d -empty -delete
+```
+
+You probably will have multiple folders because you will have to download multiple archives. Simply unpack them all into one folder and run the scripts on to that folder.
+
+If you are to lazy to run them manually just get this script I wrote
+
+
+
+Then...
+
+```
+chmod +x ./clean
+./clean my_folder_with_all_the_google_takouts
+```
+
+Finally just drag and drop into the Photos app.
diff --git a/src/content/blog/going-beyond-npm-meet-yarn-pnpm.md b/src/content/blog/going-beyond-npm-meet-yarn-pnpm.md
new file mode 100644
index 0000000..cc91f40
--- /dev/null
+++ b/src/content/blog/going-beyond-npm-meet-yarn-pnpm.md
@@ -0,0 +1,84 @@
+---
+title: 'Going beyond NPM: meet Yarn & pnpm'
+date: '2019-08-27'
+categories:
+ - 'coding'
+tags:
+ - 'javascript'
+ - 'node'
+ - 'npm'
+ - 'pnpm'
+ - 'yarn'
+coverImage: './images/ruchindra-gunasekara-GK8x_XCcDZg-unsplash.jpg'
+---
+
+If you are a JS developer you probably use NPM multiple times a day without thinking about it. It's the default package manager which ships with node.
+
+But have you wondered what if there was another way of managing your (probably too many π) packages? We will look at [yarn](https://yarnpkg.com/en/) and [pnpm](https://pnpm.js.org/) as worthy rivals.
+
+**Update** _27 Aug 2019 @ 21:23_
+As [this user](https://www.reddit.com/r/javascript/comments/cw64xt/going_beyond_npm_meet_yarn_pnpm/ey92a0i?utm_source=share&utm_medium=web2x) on reddit pointed out npm now supports offline installs too, so that part is the same for all three package managers. Also apparently the checksums, but I could now verify it.
+
+**Update** _27 Aug 2019 @ 22:51_
+If you are having troubles with pnpm try using `pnpm i shamefully-flatten`. Thanks to [this reddit user](https://www.reddit.com/r/node/comments/cw64qq/going_beyond_npm_meet_yarn_pnpm/ey9aa1v?utm_source=share&utm_medium=web2x).
+
+For the lazy readers: [Jump to the conclusion here](#conclusion).
+
+You might wonder now: why? _Why should I bother reading this when NPM works perfectly_? Is this just another run to the latest framework? Don't worry: there are actual reasons you might want to switch.
+
+#### Speed!!... or the lack of it?
+
+The biggest issue that plagues npm is speed. Unfortunately even with the latest version (6) npm is slow. If you ever had to delete the node_modules folder to do a clean install on a bigger project you will know what I mean. Fans start to spin, laptop gets warm and you can go read an article while npm chews on the dependencies.
+
+## Yarn to the rescue
+
+Yarn came along in the early days and you definitely have heard about it wandering across Github. Back in the days (before npm 5 with the `package-lock.json`) Yarn addressed the issues with consistency by being the first to generate a lockfile (`yarn.lock`). This file could be checked in and the devs would have a consistent dependencies across multiple machines.
+
+#### Speed
+
+Yarn is often twice as fast as npm. It's truly impressive and you need to see it for yourself to believe it. The CLI output is also way more human-friendly.
+
+#### Offline
+
+Every package version is only downloaded once, so if you happen to loose connection or need to download the same package again you will gain a substantial speed boost since they are cached locally.
+_See update at the top_.
+
+#### yarn upgrade-interactive
+
+This is incredible π. If you run `yarn upgrade-interactive` you get an interactive CLI where you can choose what packages to upgrade and which not. It's a simple thing, but one you cannot live without anymore if tried it once.
+
+#### yarn why
+
+Similar to the previous command this is a very handy cli goodie. simply run `yarn why some-package` and yarn will tell you why it was installed, from which dependency it came from, etc.
+
+#### Lack of npx
+
+Unfortunately Yarn lacks the `npx` equivalent of npm, which is the only drawback I encountered while using yarn. Other than that yarn is a very fast and a solid alternative to npm.
+
+## PNPM: The underdog
+
+I truly love this project so I might be biased. They basically implemented a thought I had a while back: **reuse the same packages across your computer**. Confused? Let me explain:
+
+Have you ever measured the size of the your node_modules?
+
+```
+du -sh node_modules
+# --> 816M node_modules
+```
+
+What?! 0.8Gb for a react-native project?!
+Unfortunately that is a pretty common reality and **pnpm** aims to solve that.
+
+PNPM links your packages with symlinks. This means that **the same version of a package only exists once** on your computer. If you ever install the same package twice, it will simply symlinked to your node_modules. π
+[On top of that it's even faster than yarn.](https://github.com/pnpm/benchmarks-of-javascript-package-managers)
+
+#### So perfection is achieved? Let's all switch to pnpm?
+
+Unfortunately it's not that easy. If you start a new project you can probably go with pnpm, but with existing projects I had some problems with building my apps. So it's definitely experimental at best and should not be used without rigorous testing as it might break your app. pnpm also supports npx with `pnpx`.
+
+## Conclusion Time
+
+
Speed
NPX
Offline
Well supported
npm
π
β
β
β
yarn
π
β
β
β
pnpm
π
β
β
β
+
+As you can see above there is no clear winner. NPM is the most compatible of course but really falls behind in terms of speed. **Yarn in my opinion is currently your best bet** and fallback to `npx your-command` when npx is needed.
+pnpm is an incredibly cool tool but is not ready yet for production. With react-native I can cause problems, but with the "normal" stacks it works very good. I will use pnpm for my personal projects from now on.
diff --git a/src/content/blog/how-to-avoid-killing-your-macbook-laptop-battery.md b/src/content/blog/how-to-avoid-killing-your-macbook-laptop-battery.md
new file mode 100644
index 0000000..da32df0
--- /dev/null
+++ b/src/content/blog/how-to-avoid-killing-your-macbook-laptop-battery.md
@@ -0,0 +1,171 @@
+---
+title: 'How to avoid killing your MacBook / Laptop battery'
+date: '2019-07-23'
+categories:
+ - 'general'
+tags:
+ - 'battery'
+ - 'laptop'
+ - 'macbook'
+coverImage: './images/israel-palacio-ImcUkZ72oUs-unsplash-scaled.jpg'
+---
+
+As of May of 2020 this is no more relevant! macOS 10.15.5 finally addressed this issue by not charging the battery to 100% depending on battery temperature, health and so on πππ
+
+There are a lot if misleading wisdom out there about batteries (e.g. it is ok to leave your laptop plugged in). The reasons behind it are pretty interesting and not at all trivial. If you want to know why: keep reading.
+
+**TLDR;** [Jump to the solution](#solution)
+
+
+
+
+
+
+
+Photo byΒ [israel palacio](https://unsplash.com/@othentikisra?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)Β onΒ [Unsplash](https://unsplash.com/search/photos/electricity?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
+
+
+
+
+
+> The worst situation is keeping a fully charged battery at elevated temperatures.
+>
+> batteryuniversity.com
+
+Batteries are consumable items. This means the degrade over time and loose their ability to store energy. We will see how and why this happens and how to combat it.
+
+## Why do batteries degrade?
+
+In theoretical chemistry your battery should be able to last forever. But in the real world of course that's not possible. There are 2 main killers for batteries:
+
+1. Heat
+2. Cycles (Especially above ~80%)
+
+### Killer #1: Heat
+
+With heat the internal materials of the battery start to loose their chemical form and therefore their capacity. Below is a table that illustrates how batteries react to temperature exposure.
+
+_Estimated recoverable capacity when storing Li-ion for one year atΒ various temperatures._
+
+
Temperature
40% charge
100% charge
0Β°C
98% (after 1 year)
94% (after 1 year)
25Β°C
96% (after 1 year)
80% (after 1 year)
40Β°C
85% (after 1 year)
65% (after 1 year)
60Β°C
75% (after 1 year)
60% (after 3 months)
+
+As we can see, a heated battery basically is a lost cause, especially when fully charged.
+
+Unfortunately **there is little we can do for the heat issue** since the thermal design of our Laptop is fixed and the manufacturer will choose where to place the battery and if and how to cool it.
+
+### Killer #2: Cycles
+
+Over this one we have much more control. A cycle varies in definition, but basically it is a discharge, followed by a charge.
+
+Why are cycles bad? Well whenever we move electrons around our battery either by using it or while charging, the chemical material is subjected to wear. Why exactly this happens is beyond my understanding of chemistry, so I won't try to explain it since I would probably do it wrong.
+
+What I can tell you is how to charge and use your battery in the correct manner:
+
+1. Ideally leave your battery between 30% and 80%
+2. Don't charge over 80% if not strictly required for a long trip or so.
+
+### Don't believe me, trust the data
+
+
+
+
+
+
+
+Capacity loss as a function of charge and discharge bandwidth. [Source](https://batteryuniversity.com/index.php/learn/article/how_to_prolong_lithium_based_batteries)
+
+
+
+
+
+As we can observe above, all the tested bandwidth that regularly charged to a full 100% degraded the fastest. Don't do that.
+
+Part of the problem is that as you can see in the graphic below is that while **the first 80% of the capacity is charged easily and quick, the last 80% to 100% have an exponential curve**. Those last percentages are really taxing on the battery because you are trying to stuff the last electrons inside an almost full battery. Imagine you stuffing a last bag into an almost full garbage. You will need to push it.
+
+Making matters worse, the battery will heat up during the last steps of charging because of the strain that is undergoing. This only adds to the problem, since as we learned above heat is incredibly bad for capacities.
+
+
+
+
+
+
+
+Charging graph for Lithium Batteries.
+Graph by [batteryuniversity.com](https://batteryuniversity.com/index.php/learn/article/charging_lithium_ion_batteries) - Colorised by [Android Authority](https://www.androidauthority.com/maximize-battery-life-882395/)
+
+
+
+
+
+This is also the reason because electric vehicles only charge up to 80%. It increases the lifespan of the battery significantly. On the other hand, consumer **products like laptops and phones are more about selling you maximum battery life.** What they don't tell you is **how quick that advertised battery life is going to last after 6 months** of usage.
+
+### Myth: It's ok to keep you laptop plugged in
+
+This is a misconception that arose in recent years. While it is not completely wrong, it overlooks some important aspects.
+
+What is true? Modern laptops and phones don't overcharge the battery and will switch to using only the powered cable as the source. **However** at some point the battery will dip below 97% and the laptop will start charge it again to 100%. Assuming you use your laptop for work the whole day, this will happen multiple times daily. **It will break it**.
+
+## Solution
+
+### For MacBooks (magsafe):
+
+Put a piece of paper/cloth on your middle connector of your MacBook Magsafe charger **whenever your laptop plugged in for long periods**.
+
+
+
+
+
+
+
+How-To protect the battery with Magsafe chargers
+
+
+
+
+
+**Update:** I tried new methods, the one that seems the most practical is to use a little piece of tape that you can bend in front of the connector when needed.
+
+##### Updated method with tape
+
+Put a piece of tape on your middle connector. For simplicity you can just cover 3 pins and leave the 2 outside pins (does not matter which side) free.
+Now you can easily switch between loading the battery or just working on power **whenever your laptop plugged in for long periods**.
+
+
+
+
+
+
+
+Same method, just with tape. Much easier to use.
+
+
+
+
+
+
+
+
+
+
+
+Status of battery after modification
+
+
+
+
+
+This will prevent your laptop from using **and** charging your battery while using it for a whole day.
+**Credits for the hack**: [https://superuser.com/a/1130375](https://superuser.com/a/1130375)
+
+### Laptops with removable batteries:
+
+Simply remove the battery when using laptop for long periods. This will prevent the heat of the laptop being transferred to the battery and it won't charge over and over again to 100%.
+
+#### Sources
+
+- [https://batteryuniversity.com/index.php/learn/article/charging_lithium_ion_batteries](https://batteryuniversity.com/index.php/learn/article/charging_lithium_ion_batteries)
+- [https://batteryuniversity.com/learn/article/bu_808b_what_causes_li_ion_to_die](https://batteryuniversity.com/learn/article/bu_808b_what_causes_li_ion_to_die)
+- [https://batteryuniversity.com/index.php/learn/article/how_to_prolong_lithium_based_batteries](https://batteryuniversity.com/index.php/learn/article/how_to_prolong_lithium_based_batteries)
+- [https://batteryuniversity.com/index.php/learn/article/do_and_dont_battery_table](https://batteryuniversity.com/index.php/learn/article/do_and_dont_battery_table)
+- [https://www.electricbike.com/how-to-make-lithium-battery-last/](https://www.electricbike.com/how-to-make-lithium-battery-last/)
+- [https://www.androidauthority.com/maximize-battery-life-882395/](https://www.androidauthority.com/maximize-battery-life-882395/)
diff --git a/src/content/blog/how-to-bring-your-neural-network-to-the-web.md b/src/content/blog/how-to-bring-your-neural-network-to-the-web.md
new file mode 100644
index 0000000..513fc55
--- /dev/null
+++ b/src/content/blog/how-to-bring-your-neural-network-to-the-web.md
@@ -0,0 +1,343 @@
+---
+title: 'How to bring your neural network to the web'
+date: '2020-02-10'
+categories:
+ - 'coding'
+tags:
+ - 'ai'
+ - 'keras'
+ - 'machine-learning'
+ - 'tensorflow'
+coverImage: './images/natasha-connell-byp5TTxUbL0-unsplash-scaled-1.jpg'
+---
+
+Artificial intelligence, neural networks, machine learning. I don't know which of them is the bigger buzzword. If we look past the hype there are some actually very interesting use cases for machine learning in the browser.
+
+**For the lazy that simply what to just to the source code**
+[Here is the git repo](https://github.com/cupcakearmy/mnist) for you :)
+**Or simply go to the [finished website](https://mnist.nicco.io/)**
+
+Today we will look on how to train a simple mnist digit recogniser and then export it into a website where we then can see it in action. Therefore this article will be split into three parts
+
+1. Training
+2. Export & import the pre-trained model into a website
+3. Build a simple website where we can use the model.
+
+Also I am not going to explain what machine learning is, as there are enough guides, videos, podcasts, ... that already do a much better job than I could and would be outside the scope of this article.
+
+So the first thing we need to understand is that we will not train the model in the browser. That is a job for GPUs and the goal here is only to use a pre-trained model inside of the browser. Training is a much more resource intensive task than simply using the net.
+
+## Training the model
+
+So, the first step is to actually have a model. I will do this in tensorflow 2.0 using the now included keras api. This means Python π
+
+The code below is basically an adapted version of the [keras hello world example](https://keras.io/examples/mnist_cnn/).
+If you want to run the code yourself (which you should!) simply head over to [Google Colab](https://colab.research.google.com), create a new file and just paste the code. There you can run it for free on GPUs which is pretty dope!
+
+```py
+from tensorflow.keras.datasets import mnist
+from tensorflow.keras.models import Sequential
+from tensorflow.keras.layers import Dense, Dropout, Flatten
+from tensorflow.keras.layers import Conv2D, MaxPooling2D
+from tensorflow.keras.utils import to_categorical
+
+(x_train, y_train), (x_test, y_test) = mnist.load_data()
+
+# Reshaping for channels_last (tensorflow) with one channel
+size = 28
+print(x_train.shape, x_test.shape)
+x_train = x_train.reshape(len(x_train), size, size, 1).astype('float32')
+x_test = x_test.reshape(len(x_test), size, size, 1).astype('float32')
+print(x_train.shape, x_test.shape)
+
+# Normalize
+upper = max(x_train.max(), x_test.max())
+lower = min(x_train.min(), x_test.min())
+print(f'Max: {upper} Min: {lower}')
+x_train /= upper
+x_test /= upper
+
+total_classes = 10
+y_train = to_categorical(y_train, total_classes)
+y_test = to_categorical(y_test, total_classes)
+
+# Make the model
+model = Sequential()
+model.add(Conv2D(64, (3, 3), activation='relu', input_shape=(size,size, 1), data_format='channels_last'))
+model.add(Conv2D(32, (3, 3), activation='relu'))
+model.add(MaxPooling2D(pool_size=(2, 2)))
+model.add(Dropout(0.25))
+model.add(Flatten())
+model.add(Dense(128, activation='relu'))
+model.add(Dropout(0.5))
+model.add(Dense(total_classes, activation='softmax'))
+
+model.compile(loss='categorical_crossentropy', optimizer='adam', metrics=['accuracy'])
+
+# Train
+model.fit(x_train, y_train,
+ batch_size=32,
+ epochs=12,
+ verbose=True)
+
+score = model.evaluate(x_test, y_test, verbose=0)
+print('Test loss:', score[0])
+print('Test accuracy:', score[1])
+```
+
+We can run this and we will get a pretty good accuracy. The MNIST dataset ist not very hard to train.
+
+## Export the model
+
+Now the conventional way to save a model is to use the `model.save("model.h5")` method provided by keras. This uses the h5 file format.
+Unfortunately this is not compatible with tensorflow-js. So we need another way.
+
+There is a package called tensorflowjs for python (confusing right? π ) that provides the functionality we need
+
+```ts
+import tensorflowjs as tfjs
+
+tfjs.converters.save_keras_model(model, './js')
+```
+
+It save the model data inside the `./js` folder ready to be used.
+Inside there you will find a `model.json` that basically describes the structure of the model and something like `group1-shard1of1.bin` that contains the fitted weights.
+
+## Import the model
+
+Now we are ready to import that. First we need to install the `@tensorflow/tfjs` package.
+
+```ts
+import * as tf from '@tensorflow/tfjs'
+
+let model
+
+tf.loadLayersModel('/model.json').then((m) => {
+ model = m
+})
+```
+
+Ok how do I use that now?
+
+```ts
+const tensor = tf.tensor(new Uint8Array(ourData), [1, 28, 28, 1])
+const prediction = model.predict(tensor)
+```
+
+**What is happening here?**
+In order to predict a value we first need a tensor (vector) the same shape as our original input with which we trained the model with. In our case that is 1x28x28x1.
+Also we will convert our pixel data into a `Uint8Array`.
+
+## Using the canvas element to draw and predict numbers
+
+I'm not gonna talk about what bundler, etc. I'm using. If you interested simply have a look at the [git repo](https://github.com/cupcakearmy/mnist).
+
+First lets write some basic html for the skeleton of our page.
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+Next we need come short code for drawing on a canvas.
+The code is adapted from [this stackoverflow answer](https://stackoverflow.com/a/8398189) and reduced to the only the basics we need.
+
+In essence it's a canvas that listens on our mouse events and fills the pixels with black. Nothing more.
+
+```ts
+/* jslint esversion: 6, asi: true */
+
+var canvas,
+ ctx,
+ flag = false,
+ prevX = 0,
+ currX = 0,
+ prevY = 0,
+ currY = 0,
+ dot_flag = false
+
+var x = 'black',
+ y = 2
+
+function init() {
+ canvas = document.getElementById('can')
+ ctx = canvas.getContext('2d')
+ w = canvas.width
+ h = canvas.height
+
+ canvas.addEventListener(
+ 'mousemove',
+ function (e) {
+ findxy('move', e)
+ },
+ false
+ )
+ canvas.addEventListener(
+ 'mousedown',
+ function (e) {
+ findxy('down', e)
+ },
+ false
+ )
+ canvas.addEventListener(
+ 'mouseup',
+ function (e) {
+ findxy('up', e)
+ },
+ false
+ )
+ canvas.addEventListener(
+ 'mouseout',
+ function (e) {
+ findxy('out', e)
+ },
+ false
+ )
+
+ window.document.getElementById('clear').addEventListener('click', erase)
+}
+
+function draw() {
+ ctx.beginPath()
+ ctx.moveTo(prevX, prevY)
+ ctx.lineTo(currX, currY)
+ ctx.strokeStyle = x
+ ctx.lineWidth = y
+ ctx.stroke()
+ ctx.closePath()
+}
+
+function erase() {
+ ctx.clearRect(0, 0, w, h)
+}
+
+function findxy(res, e) {
+ if (res == 'down') {
+ prevX = currX
+ prevY = currY
+ currX = e.clientX - canvas.offsetLeft
+ currY = e.clientY - canvas.offsetTop
+
+ flag = true
+ dot_flag = true
+ if (dot_flag) {
+ ctx.beginPath()
+ ctx.fillStyle = x
+ ctx.fillRect(currX, currY, 2, 2)
+ ctx.closePath()
+ dot_flag = false
+ }
+ }
+ if (res == 'up' || res == 'out') {
+ flag = false
+ }
+ if (res == 'move') {
+ if (flag) {
+ prevX = currX
+ prevY = currY
+ currX = e.clientX - canvas.offsetLeft
+ currY = e.clientY - canvas.offsetTop
+ draw()
+ }
+ }
+}
+
+init()
+```
+
+And not the glue to put this together is the piece of code that listens on the "test" button.
+
+```ts
+import * as tf from '@tensorflow/tfjs'
+
+let model
+
+tf.loadLayersModel('/model.json').then((m) => {
+ model = m
+})
+
+window.document.getElementById('test').addEventListener('click', async () => {
+ const canvas = window.document.querySelector('canvas')
+
+ const { data, width, height } = canvas.getContext('2d').getImageData(0, 0, 28, 28)
+
+ const tensor = tf.tensor(new Uint8Array(data.filter((_, i) => i % 4 === 3)), [1, 28, 28, 1])
+ const prediction = model.predict(tensor)
+ const result = await prediction.data()
+ const guessed = result.indexOf(1)
+ console.log(guessed)
+ window.document.querySelector('#result').innerText = guessed
+})
+```
+
+Here we need to explain a few things.
+`canvas.getContext('2d').getImageData(0, 0, 28, 28)` simply returns a flattened array of the pixels from the point (0,0) to (28,28).
+
+Then, instead of simply passing the data to the tensor. we need to do some magic with `data.filter` in order to get only every 3rd pixel. This is because our canvas has 3 channels + 1 alpha, but we only need to know if the pixel is black or not. We do this by simply filtering for the index mod 4
+
+```ts
+data.filter((_, i) => i % 4 === 3)
+```
+
+Lastly we need to interpret the result. `prediction.data()` return an array with 10 items. Because we have trained it that way that we only have 10 possible outcomes. 10 Digits right?
+Well in that case we simply search in which position in the array we have a 1 and the index is out solution.
+We search for a 1 because we only have floats from 0 to 1. So 1 is the maximum.
+
+I hope this helped you understand the process better. It was pretty confusing at first for me too π¬
diff --git a/src/content/blog/how-to-search-in-the-jam.md b/src/content/blog/how-to-search-in-the-jam.md
new file mode 100644
index 0000000..22e560a
--- /dev/null
+++ b/src/content/blog/how-to-search-in-the-jam.md
@@ -0,0 +1,211 @@
+---
+title: 'How to search in the JAM'
+date: '2020-12-06'
+coverImage: './images/uriel-soberanes-gCeH4z9m7bg-unsplash.jpg'
+categories:
+ - 'coding'
+tags:
+ - 'jam-stack'
+ - 'lunr'
+ - 'search'
+ - 'svelte'
+---
+
+So a lot (me included) now are building JAM stack landing pages, shops, full-stack apps, etc. and while you can have a backend of course not all of them have. For those who don't: **How do we search?**
+
+So there is the obvious [Google Programmable Search Engine](https://programmablesearchengine.google.com/about/) but that looks bad and it not really customizable. The results are very good, it's google after all. However for those who want something more custom: Here's one way how.
+
+A working example can found right here [nicco.io/search](https://nicco.io/search) π
+We will look at the following:
+
+1. How to implement the search
+2. Search Accuracy & Precision
+3. Performance & Size
+
+We can't rely on a backend as discussed above, so the magic will happen at build time, like everything in the JAM-verse.
+
+I've decided to go with the free and open source [lunr.js](https://lunrjs.com/) which is a simple but still quite powerful search engine that can run in the client.
+
+```
+const idx = lunr(function () {
+ this.ref('name')
+ this.field('text')
+ this.add({ name: 'A', text: 'Lorem...' })
+})
+const results = idx.search('Lor*')
+```
+
+The first question that probably will pop out in your head is: "How will lunr be able to know what is on our website?" Here is where our work begins.
+
+## Roadmap
+
+1. Aggregate all the data of your site
+2. Prebuild the index and make it available as static JSON
+3. Load `lunr.js` into your site and start searching
+
+## Preparing the Index
+
+So I'm using [Sapper](https://sapper.svelte.dev/) for this blog so the examples will be based on it, but the same principle applies to all JAM tech.
+
+First we need to aggregate all our data. In my case this means all the single pages, blog entries, projects and works. So I created a `/src/routes/search.json.js` file and got to work.
+
+```ts
+import lunr from 'lunr'
+
+import { getAll } from '../lib/wp'
+
+function removeHTML(s) {
+ return s.replace(/<.*?>|\s+|&#\d+;/g, ' ').trim()
+}
+
+async function convertForIdx(type, fields = []) {
+ // Load the data from Wordpress
+ const items = await getAll(type)
+ // Map only the fields we need and are relevant
+ const defaults = ['title', 'content', 'slug']
+ return items.map((item) => ({
+ url: `${item.type}/${item.slug}`,
+ data: [...defaults, ...fields].map((field) => removeHTML(item[field])).join(' '),
+ }))
+}
+
+export async function get(req, res) {
+ const all = await Promise.all([
+ convertForIdx('projects', ['description']),
+ convertForIdx('pages'),
+ convertForIdx('posts'),
+ convertForIdx('works', ['role']),
+ ])
+
+ const idx = lunr(function () {
+ this.ref('url')
+ this.field('data')
+
+ all.flat().forEach((doc) => this.add(doc))
+ })
+ res.setHeader('Content-Type', 'application/json')
+ res.end(JSON.stringify(idx))
+}
+```
+
+First I get all the data from the Wordpress backend and for each item I select at least the `title` and `content` as I want them to be searchable. Then we remove any html tags with a dirty regexp and finally we build the index.
+
+When we call `JSON.stringify(idx)` the precomputed index will be serialized to JSON. Otherwise every client would had to compute that on their CPU, wasting cycles and possibly battery. We don't want that.
+
+Now I have the "search model" ready. You can have a look: [nicco.io/search.json](https://nicco.io/search.json)
+
+## Integrating the search
+
+It's time to integrate the search into the actual website π
+
+```html
+
+
+
+
+
+
+ {#each results as result (result.ref)}
+
+ {/each}
+
+```
+
+The first thing we do is load our preloaded `/search.json` and loading into an instance of `lunr`. This only need to happen once, once the index is loaded we ready to go.
+
+```ts
+const idx = lunr.Index.load(prebuilt)
+```
+
+For the searching itself `lunr` has quite a [few options](https://lunrjs.com/guides/searching.html). The most relevant for me where the wildcard and fuzzy search. While wildcard is good for when we don't have completed a word yet, fuzzy helps us with typos.
+
+```ts
+const fuzzy = idx.search(needle + '~1') // foo~1
+```
+
+While not explicitly said in the docs I'm guessing they use the [Levenshtein Distance](https://en.wikipedia.org/wiki/Levenshtein_distance), which means `~1` will replace at most 1 char.
+
+```ts
+const wildcard = idx.search(needle + '*') // fo*
+```
+
+Wildcard are straight forward. `lunr` supports any kind: `*oo`, `f*o` and `fo*`.
+
+The result is an array with the `ref` field so you can find the related item and a `score`. They are already sorted by score, so basically you just need to write a for loop.
+
+## Search Quality
+
+Now the accuracy and precision are of course on par with Google, but way good enough for a blog or a smaller site. However in 1h you can add search to your JAM site without much work and you stay google free.
+Also this approach gives you all the artistic liberties over the design.
+
+## Performance & Size
+
+Since we are prebuilding and packaging the whole site into one big `JSON` file it's worth taking a look at the size of the index.
+
+For this I took the [Iliad by Homer](https://gutenberg.org/ebooks/6130) and slitted it up into different amount of pieces to simulate the amount of pages. At the same tame, the more pieces, the smaller the single content on one "page".
+
+Please not that it's ~1mb of plain text so it's quite a lot.
+You can get the source code for the "test" [here](https://gist.github.com/cupcakearmy/242b54ee6b1a914896390c91846aa4d4).
+
+### Variable size documents
+
+
+
+
+
+
+
+Graph of Lunr Index size
+
+
+
+
+
+As you can see, with `1000` each around `1.15k` in size we end up with a compressed size of `563 KiB` which starts to get big.
+
+### A more real example
+
+Here is an example where each document is around `10k` in size. Roughly double the text amount needed for this blog post. Then we add an ever increasing amount of documents to the index and watch it grow.
+
+
+
+
+
+
+
+Chart of 10k sized documents building the index.
+
+
+
+
+
+The results are very different of course. Please note the the second graph has a logarithmic scale! If we compare the compressed size at `500` documents we have `494kb @2.3k/doc` vs `1.09MiB @10k/doc`. Basically double, which is not that bad if we consider that the documents are around 5 times bigger.
+
+Hope you enjoyed and learned something, take care β€οΈ
diff --git a/src/content/blog/images/Battery-Charge-Voltage-vs-Time.png b/src/content/blog/images/Battery-Charge-Voltage-vs-Time.png
new file mode 100644
index 0000000..667e56f
--- /dev/null
+++ b/src/content/blog/images/Battery-Charge-Voltage-vs-Time.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:54ef9ac3fb65009c53d55f103eadb1f6c1b9ac9cb93019f161d5c0d842576e61
+size 191614
diff --git a/src/content/blog/images/DST-cycles-web2.jpg b/src/content/blog/images/DST-cycles-web2.jpg
new file mode 100644
index 0000000..9c55921
--- /dev/null
+++ b/src/content/blog/images/DST-cycles-web2.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ee60b8040150d154afd21faf3112421b9b43cacb0626a5b4c53c0590c69626a0
+size 151085
diff --git a/src/content/blog/images/IMG_0160.jpeg b/src/content/blog/images/IMG_0160.jpeg
new file mode 100644
index 0000000..84a46a1
--- /dev/null
+++ b/src/content/blog/images/IMG_0160.jpeg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:767f3552e0f0244b006c0bcb5a8d3c39b2fb83d1eb008cd5abb6d8c8012c11da
+size 182432
diff --git a/src/content/blog/images/IMG_1709.jpeg b/src/content/blog/images/IMG_1709.jpeg
new file mode 100644
index 0000000..f7542d2
--- /dev/null
+++ b/src/content/blog/images/IMG_1709.jpeg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f43dfc65d7f710d7cfe7f21d168c5142c450b95b363e23f340d31135676bedc4
+size 33825
diff --git a/src/content/blog/images/IMG_1710.jpeg b/src/content/blog/images/IMG_1710.jpeg
new file mode 100644
index 0000000..c1776a7
--- /dev/null
+++ b/src/content/blog/images/IMG_1710.jpeg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1e65961b86eb1febbe48eb9292c9a54eebdb61314a7b1223d7c9112423477dcf
+size 175459
diff --git a/src/content/blog/images/IMG_1710.png b/src/content/blog/images/IMG_1710.png
new file mode 100644
index 0000000..9dedb9b
--- /dev/null
+++ b/src/content/blog/images/IMG_1710.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e83975d7ec576ef6ca6c4fc7a007fd82d8066cdfc42ee097527f989ccf025756
+size 2027604
diff --git a/src/content/blog/images/IMG_1711.jpeg b/src/content/blog/images/IMG_1711.jpeg
new file mode 100644
index 0000000..0030521
--- /dev/null
+++ b/src/content/blog/images/IMG_1711.jpeg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f1dfeb6c5d59b355b38a50a0888b178e9fa9fa93bd0d26dd94ffd87ecbc0fae3
+size 136338
diff --git a/src/content/blog/images/Screenshot-2020-01-29-at-14.55.28.png b/src/content/blog/images/Screenshot-2020-01-29-at-14.55.28.png
new file mode 100644
index 0000000..25379a0
--- /dev/null
+++ b/src/content/blog/images/Screenshot-2020-01-29-at-14.55.28.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a4a5b54dfff9307f3460189e6e80eedd6c80ee64eb3ae25bf5c7df3c3cccf882
+size 56274
diff --git a/src/content/blog/images/Screenshot-2020-01-29-at-14.57.05.png b/src/content/blog/images/Screenshot-2020-01-29-at-14.57.05.png
new file mode 100644
index 0000000..b20541b
--- /dev/null
+++ b/src/content/blog/images/Screenshot-2020-01-29-at-14.57.05.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b0f241b1da4e817d415f8984ce54830276b0631042b31815a5569dd6937eb2ad
+size 258865
diff --git a/src/content/blog/images/Screenshot-2020-04-11-at-23.25.48.png b/src/content/blog/images/Screenshot-2020-04-11-at-23.25.48.png
new file mode 100644
index 0000000..e65fa9a
--- /dev/null
+++ b/src/content/blog/images/Screenshot-2020-04-11-at-23.25.48.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2b5d821660053d05743eb6439d652e77a3d4699a45884a9bce88169835c55c8a
+size 564881
diff --git a/src/content/blog/images/Screenshot-2021-01-28-at-12.12.59.png b/src/content/blog/images/Screenshot-2021-01-28-at-12.12.59.png
new file mode 100644
index 0000000..51094e4
--- /dev/null
+++ b/src/content/blog/images/Screenshot-2021-01-28-at-12.12.59.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5db61551895b9969afdb1356560f03c1918faca5e68169b6ac2d200ce700ce90
+size 73938
diff --git a/src/content/blog/images/Screenshot-2021-01-28-at-12.14.03.png b/src/content/blog/images/Screenshot-2021-01-28-at-12.14.03.png
new file mode 100644
index 0000000..2fa8b7c
--- /dev/null
+++ b/src/content/blog/images/Screenshot-2021-01-28-at-12.14.03.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:88c62af32b444a6928c85e8f31cad2f4bef8ebed33893b0a28894d6f87593599
+size 42234
diff --git a/src/content/blog/images/Screenshot-2021-03-23-at-10.20.32.png b/src/content/blog/images/Screenshot-2021-03-23-at-10.20.32.png
new file mode 100644
index 0000000..c16fd32
--- /dev/null
+++ b/src/content/blog/images/Screenshot-2021-03-23-at-10.20.32.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:eb058e043414fe65d83876644ed84a7e2e336ad8b1b4d771062db8494c036e79
+size 101970
diff --git a/src/content/blog/images/Screenshot-2021-03-23-at-10.58.31.png b/src/content/blog/images/Screenshot-2021-03-23-at-10.58.31.png
new file mode 100644
index 0000000..0a2a354
--- /dev/null
+++ b/src/content/blog/images/Screenshot-2021-03-23-at-10.58.31.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b70f8cacc7eaa9ec3127c96cf3d3fecddda61a35313b8fd6f42622d1f2983858
+size 50254
diff --git a/src/content/blog/images/alessandra-caretto-cAY9X4rPG3g-unsplash.jpg b/src/content/blog/images/alessandra-caretto-cAY9X4rPG3g-unsplash.jpg
new file mode 100644
index 0000000..505ff0c
--- /dev/null
+++ b/src/content/blog/images/alessandra-caretto-cAY9X4rPG3g-unsplash.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:641d3e8a3529e6e026773d16bc105b71a0ae27d8361faada37d52551ef198a0f
+size 688323
diff --git a/src/content/blog/images/alina-grubnyak-1254785-unsplash-scaled.jpg b/src/content/blog/images/alina-grubnyak-1254785-unsplash-scaled.jpg
new file mode 100644
index 0000000..6f267c8
--- /dev/null
+++ b/src/content/blog/images/alina-grubnyak-1254785-unsplash-scaled.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ef1c569cdcf9851539f06176d0c9e0debc52875976ff330b1cc6971572fe1404
+size 665199
diff --git a/src/content/blog/images/amador-loureiro-BVyNlchWqzs-unsplash-scaled.jpg b/src/content/blog/images/amador-loureiro-BVyNlchWqzs-unsplash-scaled.jpg
new file mode 100644
index 0000000..5d6a70a
--- /dev/null
+++ b/src/content/blog/images/amador-loureiro-BVyNlchWqzs-unsplash-scaled.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:641e531b6383c8552a05586e2ac44c53718c0b6130d72f23dcb8edf74ee4b3dd
+size 794403
diff --git a/src/content/blog/images/arseny-togulev-1513013-unsplash-scaled.jpg b/src/content/blog/images/arseny-togulev-1513013-unsplash-scaled.jpg
new file mode 100644
index 0000000..722c2f1
--- /dev/null
+++ b/src/content/blog/images/arseny-togulev-1513013-unsplash-scaled.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2f1402d168936c5ef8b97bc4f30afe3d4bae64136feb8d85b8e85bc15d3810d3
+size 287558
diff --git a/src/content/blog/images/asoggetti-418839-unsplash-scaled.jpg b/src/content/blog/images/asoggetti-418839-unsplash-scaled.jpg
new file mode 100644
index 0000000..7e79889
--- /dev/null
+++ b/src/content/blog/images/asoggetti-418839-unsplash-scaled.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:40588829e34a45f71777c36e1dfdc9078bdf88d3196051034d20249d3a0ea539
+size 104152
diff --git a/src/content/blog/images/auth-sequence-auth-code-pkce.png b/src/content/blog/images/auth-sequence-auth-code-pkce.png
new file mode 100644
index 0000000..e409536
--- /dev/null
+++ b/src/content/blog/images/auth-sequence-auth-code-pkce.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5e7b72e16d3f5bcd368eb3b39078e32d0ef904023b7984f32fa2d0e364109479
+size 43477
diff --git a/src/content/blog/images/brett-jordan-qUp3bejuzs-unsplash-scaled.jpg b/src/content/blog/images/brett-jordan-qUp3bejuzs-unsplash-scaled.jpg
new file mode 100644
index 0000000..66214de
--- /dev/null
+++ b/src/content/blog/images/brett-jordan-qUp3bejuzs-unsplash-scaled.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:48603b5e68e25cce1593bf8578f5cc882c1612c213d0c3041312f018087a9a78
+size 191775
diff --git a/src/content/blog/images/cards-scaled.jpg b/src/content/blog/images/cards-scaled.jpg
new file mode 100644
index 0000000..c2ce175
--- /dev/null
+++ b/src/content/blog/images/cards-scaled.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ebc09fc3389fdd05f9d559692c3d24eb7bd99adba36cabfdcf707975670c2474
+size 483287
diff --git a/src/content/blog/images/chris-barbalis-Vvvl-mbboKk-unsplash-scaled.jpg b/src/content/blog/images/chris-barbalis-Vvvl-mbboKk-unsplash-scaled.jpg
new file mode 100644
index 0000000..2d991e9
--- /dev/null
+++ b/src/content/blog/images/chris-barbalis-Vvvl-mbboKk-unsplash-scaled.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7856b748cc26c928c9fd5d43af23d43f72a6f11bf277685ef4b63ad8ada0528e
+size 495251
diff --git a/src/content/blog/images/clayton-robbins-Ru09fQONJWo-unsplash-scaled.jpg b/src/content/blog/images/clayton-robbins-Ru09fQONJWo-unsplash-scaled.jpg
new file mode 100644
index 0000000..73c5609
--- /dev/null
+++ b/src/content/blog/images/clayton-robbins-Ru09fQONJWo-unsplash-scaled.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:366666945890876b458c89ddfb94d4bab8e02f686a08b1d3bc04f0ed0e03e1cc
+size 272668
diff --git a/src/content/blog/images/daniele-franchi-g2fJ7d7eKSM-unsplash.jpg b/src/content/blog/images/daniele-franchi-g2fJ7d7eKSM-unsplash.jpg
new file mode 100644
index 0000000..66a23b6
--- /dev/null
+++ b/src/content/blog/images/daniele-franchi-g2fJ7d7eKSM-unsplash.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a3f3295dd8580c51c510f34b5c5252c56d77be75d1a93ce83583c6a4308e636f
+size 4596995
diff --git a/src/content/blog/images/data.gif b/src/content/blog/images/data.gif
new file mode 100644
index 0000000..41ba811
--- /dev/null
+++ b/src/content/blog/images/data.gif
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a326b48b5b9355bdef2a43fe5298559d45ad645f911519b9e398f981a1390e80
+size 318810
diff --git a/src/content/blog/images/davisco-5E5N49RWtbA-unsplash-scaled-1.jpg b/src/content/blog/images/davisco-5E5N49RWtbA-unsplash-scaled-1.jpg
new file mode 100644
index 0000000..26ed4bf
--- /dev/null
+++ b/src/content/blog/images/davisco-5E5N49RWtbA-unsplash-scaled-1.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:418f648ed44631401d9b4887c951b1db562cb02d981258f410768284dccd4945
+size 160637
diff --git a/src/content/blog/images/franck-v-U3sOwViXhkY-unsplash-scaled-1.jpg b/src/content/blog/images/franck-v-U3sOwViXhkY-unsplash-scaled-1.jpg
new file mode 100644
index 0000000..3611efb
--- /dev/null
+++ b/src/content/blog/images/franck-v-U3sOwViXhkY-unsplash-scaled-1.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:394cb4b320efe0eaafc527569f2e04e57f25f6ca7ad70a6cc951af981012be2a
+size 587956
diff --git a/src/content/blog/images/guillaume-bolduc-259596-unsplash-scaled.jpg b/src/content/blog/images/guillaume-bolduc-259596-unsplash-scaled.jpg
new file mode 100644
index 0000000..cb3ff46
--- /dev/null
+++ b/src/content/blog/images/guillaume-bolduc-259596-unsplash-scaled.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7b41d27d824c56267c2cb666d906c1bede2fdaa1de74f9957e26d502c50cbc2b
+size 1115156
diff --git a/src/content/blog/images/howto-1.jpg b/src/content/blog/images/howto-1.jpg
new file mode 100644
index 0000000..7399a91
--- /dev/null
+++ b/src/content/blog/images/howto-1.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:39057dd4352501b6a8ad5aa62f28662cc0b1310fbbf03c5ad3ee67d0ca3abb9a
+size 143009
diff --git a/src/content/blog/images/howto.jpg b/src/content/blog/images/howto.jpg
new file mode 100644
index 0000000..535e2ab
--- /dev/null
+++ b/src/content/blog/images/howto.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8aaebdf6ec81ea65d61c9db30a93e0e6da65c06b874a614393d260ef135c3ee9
+size 170032
diff --git a/src/content/blog/images/hyeryi-sVk8nrCQ06g-unsplash-scaled.jpg b/src/content/blog/images/hyeryi-sVk8nrCQ06g-unsplash-scaled.jpg
new file mode 100644
index 0000000..03dc9dd
--- /dev/null
+++ b/src/content/blog/images/hyeryi-sVk8nrCQ06g-unsplash-scaled.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:728917127520026b290af0348ef70dee6d36dbd3ec3f72b76d3c2b1fca3bdfdb
+size 1205666
diff --git a/src/content/blog/images/israel-palacio-ImcUkZ72oUs-unsplash-scaled.jpg b/src/content/blog/images/israel-palacio-ImcUkZ72oUs-unsplash-scaled.jpg
new file mode 100644
index 0000000..7e13457
--- /dev/null
+++ b/src/content/blog/images/israel-palacio-ImcUkZ72oUs-unsplash-scaled.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:24f5c8a7e2fce080c7f9090f9db4f8ae5d2644f08eba8671da802bd76880e679
+size 523148
diff --git a/src/content/blog/images/jason-abdilla-jZWmw6007EY-unsplash-scaled.jpg b/src/content/blog/images/jason-abdilla-jZWmw6007EY-unsplash-scaled.jpg
new file mode 100644
index 0000000..c2d3410
--- /dev/null
+++ b/src/content/blog/images/jason-abdilla-jZWmw6007EY-unsplash-scaled.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3a7c6f461682a6a5d127655c2d67b90e1a1293c3fbe9bca763db8ab855e1c534
+size 907098
diff --git a/src/content/blog/images/jielin-chen-pKQIpxzq0ZQ-unsplash-e1562783699383-scaled.jpg b/src/content/blog/images/jielin-chen-pKQIpxzq0ZQ-unsplash-e1562783699383-scaled.jpg
new file mode 100644
index 0000000..6c3b3fa
--- /dev/null
+++ b/src/content/blog/images/jielin-chen-pKQIpxzq0ZQ-unsplash-e1562783699383-scaled.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:82a2dfcd574fef01451a2e62c5efa1975445682c70588bca4e06f1421be4c24d
+size 225187
diff --git a/src/content/blog/images/jonathan-chng-HgoKvtKpyHA-unsplash-scaled-1.jpg b/src/content/blog/images/jonathan-chng-HgoKvtKpyHA-unsplash-scaled-1.jpg
new file mode 100644
index 0000000..8112d96
--- /dev/null
+++ b/src/content/blog/images/jonathan-chng-HgoKvtKpyHA-unsplash-scaled-1.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:16f73c9118460e939f16070572407482c45a885a5f28163d3fe21a1ae63efc4f
+size 547290
diff --git a/src/content/blog/images/luke-chesser-JKUTrJ4vK00-unsplash-scaled.jpg b/src/content/blog/images/luke-chesser-JKUTrJ4vK00-unsplash-scaled.jpg
new file mode 100644
index 0000000..eaf64b5
--- /dev/null
+++ b/src/content/blog/images/luke-chesser-JKUTrJ4vK00-unsplash-scaled.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bdd3909cf6516e603c072d23f1ba8a9394dc29cfdaff787c0a6ecd3ce0083c99
+size 351535
diff --git a/src/content/blog/images/mark-autumns-Ssr26I0QWVY-unsplash-scaled.jpg b/src/content/blog/images/mark-autumns-Ssr26I0QWVY-unsplash-scaled.jpg
new file mode 100644
index 0000000..a95df1e
--- /dev/null
+++ b/src/content/blog/images/mark-autumns-Ssr26I0QWVY-unsplash-scaled.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:012f5cffade95b8952c6da835c5ec9badacce4ab222b8cf6a59ce2d62fb2fd4a
+size 645501
diff --git a/src/content/blog/images/markus-spiske-8CWoXxaqGrs-unsplash-scaled.jpg b/src/content/blog/images/markus-spiske-8CWoXxaqGrs-unsplash-scaled.jpg
new file mode 100644
index 0000000..ec48929
--- /dev/null
+++ b/src/content/blog/images/markus-spiske-8CWoXxaqGrs-unsplash-scaled.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:500b324d99022e3410afa467743fff186a85700462e66487c11f5b7c3722e9d1
+size 244788
diff --git a/src/content/blog/images/matt-artz-353210-unsplash-scaled.jpg b/src/content/blog/images/matt-artz-353210-unsplash-scaled.jpg
new file mode 100644
index 0000000..0b73d1a
--- /dev/null
+++ b/src/content/blog/images/matt-artz-353210-unsplash-scaled.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:08eb7d31540d64f49de77452565c48015bc4da3e5753ba9ed93ad19e70eaef48
+size 190710
diff --git a/src/content/blog/images/meagan-carsience-QGnm_F_nd1E-unsplash1.jpg b/src/content/blog/images/meagan-carsience-QGnm_F_nd1E-unsplash1.jpg
new file mode 100644
index 0000000..f73d30b
--- /dev/null
+++ b/src/content/blog/images/meagan-carsience-QGnm_F_nd1E-unsplash1.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4def0c84923defe516c9d1c7e4be767ff6a7ecfdccf55eb674abf3b5144dbc06
+size 92471
diff --git a/src/content/blog/images/milkovi-kYlYwQze5vI-unsplash-1-scaled.jpg b/src/content/blog/images/milkovi-kYlYwQze5vI-unsplash-1-scaled.jpg
new file mode 100644
index 0000000..68338e0
--- /dev/null
+++ b/src/content/blog/images/milkovi-kYlYwQze5vI-unsplash-1-scaled.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7302bfcb09c4fcaa7cbc1b51254697333f3a0b46090809779bd4a7c49442454a
+size 445129
diff --git a/src/content/blog/images/natasha-connell-byp5TTxUbL0-unsplash-scaled-1.jpg b/src/content/blog/images/natasha-connell-byp5TTxUbL0-unsplash-scaled-1.jpg
new file mode 100644
index 0000000..4060fcd
--- /dev/null
+++ b/src/content/blog/images/natasha-connell-byp5TTxUbL0-unsplash-scaled-1.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0160fa88ffe90a0f9a1846e178b4554db761855aea838973bc32eb700cd28af9
+size 247279
diff --git a/src/content/blog/images/noah-silliman-doBrZnp_wqA-unsplash.jpg b/src/content/blog/images/noah-silliman-doBrZnp_wqA-unsplash.jpg
new file mode 100644
index 0000000..f45a4c6
--- /dev/null
+++ b/src/content/blog/images/noah-silliman-doBrZnp_wqA-unsplash.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8ff024e32cdb7fa6fe8624cc7c42f16a3b7c2981646ab0f01c6e81c6b56a02f3
+size 393856
diff --git a/src/content/blog/images/pawel-nolbert-xe-ss5Tg2mo-unsplash.jpg b/src/content/blog/images/pawel-nolbert-xe-ss5Tg2mo-unsplash.jpg
new file mode 100644
index 0000000..8082c68
--- /dev/null
+++ b/src/content/blog/images/pawel-nolbert-xe-ss5Tg2mo-unsplash.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cd058a3a94865f064a2cc5300267657d449d7cb787662b2ceb945ebe80dfafc7
+size 555132
diff --git a/src/content/blog/images/permissions.gif b/src/content/blog/images/permissions.gif
new file mode 100644
index 0000000..6ab05cf
--- /dev/null
+++ b/src/content/blog/images/permissions.gif
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dc7bc17cdc583accf94e27eadb4bdb49c91e58c6add60074d24e6b71b1d35e19
+size 485939
diff --git a/src/content/blog/images/rayan-almuslem-1302778-unsplash-scaled.jpg b/src/content/blog/images/rayan-almuslem-1302778-unsplash-scaled.jpg
new file mode 100644
index 0000000..af876b7
--- /dev/null
+++ b/src/content/blog/images/rayan-almuslem-1302778-unsplash-scaled.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0f1258ab1f0583e4cb7225f97c777685f0b35021e71ab9ce3ac838fbcaad714d
+size 299888
diff --git a/src/content/blog/images/register-bot.jpg b/src/content/blog/images/register-bot.jpg
new file mode 100644
index 0000000..b878cb4
--- /dev/null
+++ b/src/content/blog/images/register-bot.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4aa44481d72090565e8664bdfbb506f833cabc9a0e1ac988807912d86dc61c71
+size 97464
diff --git a/src/content/blog/images/ruchindra-gunasekara-GK8x_XCcDZg-unsplash.jpg b/src/content/blog/images/ruchindra-gunasekara-GK8x_XCcDZg-unsplash.jpg
new file mode 100644
index 0000000..30e08ad
--- /dev/null
+++ b/src/content/blog/images/ruchindra-gunasekara-GK8x_XCcDZg-unsplash.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a9a2b0d913d11a177032bf5c8148c43e64e97dcff8c0224645f82a8e5e7280c9
+size 4819801
diff --git a/src/content/blog/images/status.jpg b/src/content/blog/images/status.jpg
new file mode 100644
index 0000000..9f20341
--- /dev/null
+++ b/src/content/blog/images/status.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dd832991f433a79e9794b29d80c170486d55187b565e1234f69e2cc141291042
+size 57217
diff --git a/src/content/blog/images/thomas-kelley-t20pc32VbrU-unsplash-scaled-1.jpg b/src/content/blog/images/thomas-kelley-t20pc32VbrU-unsplash-scaled-1.jpg
new file mode 100644
index 0000000..8869909
--- /dev/null
+++ b/src/content/blog/images/thomas-kelley-t20pc32VbrU-unsplash-scaled-1.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6a2d827c72bad2602c6f1f9fa29fcb2471de06dd725feb338b247b034480da05
+size 773178
diff --git a/src/content/blog/images/tobias-fischer-PkbZahEG2Ng-unsplash-scaled.jpg b/src/content/blog/images/tobias-fischer-PkbZahEG2Ng-unsplash-scaled.jpg
new file mode 100644
index 0000000..705aa02
--- /dev/null
+++ b/src/content/blog/images/tobias-fischer-PkbZahEG2Ng-unsplash-scaled.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2e195c9ed36de6e74ff814f663d80387de82245685784e9c5b52e2831d860f09
+size 615029
diff --git a/src/content/blog/images/uriel-soberanes-gCeH4z9m7bg-unsplash.jpg b/src/content/blog/images/uriel-soberanes-gCeH4z9m7bg-unsplash.jpg
new file mode 100644
index 0000000..c16b2b6
--- /dev/null
+++ b/src/content/blog/images/uriel-soberanes-gCeH4z9m7bg-unsplash.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:06f7370a7d558d0abef5b4b0213e574ae8de04416135fe37a4ca949d9c587b82
+size 905920
diff --git a/src/content/blog/leaving-nextcloud-from-heaven-to-the-depths-of-seafile.md b/src/content/blog/leaving-nextcloud-from-heaven-to-the-depths-of-seafile.md
new file mode 100644
index 0000000..2a764e3
--- /dev/null
+++ b/src/content/blog/leaving-nextcloud-from-heaven-to-the-depths-of-seafile.md
@@ -0,0 +1,150 @@
+---
+title: 'Leaving Nextcloud: From heaven to the depths of Seafile'
+date: '2021-03-23'
+updatedDate: '2021-03-27'
+categories:
+ - 'general'
+tags:
+ - 'migration'
+ - 'nextcloud'
+ - 'seafile'
+coverImage: './images/pawel-nolbert-xe-ss5Tg2mo-unsplash.jpg'
+---
+
+Today I'll share and explain the motivations that lead me to leave Nextcloud and choose Seafile, while hopefully making the transition smooth for anyone that wants to follow along. Spoiler: Performance and stuff constantly breaking leads to a Seafile beta being way more stable and reliable that a Nextcloud "Production" release.
+
+Nextcloud is the the de-facto way to go for most self hosted Cloud / Dropbox / Google Drive. So a few years ago in my move to a more ownership driven approach to my data I setup a Nextcloud instance and was quite happy. They have an iOS app and a macOS sync client.
+There are numerous of plug-ins that can accomplish anything from contacts syncing with WebDav to GSuite-Like online collaboration with the Collabora integration, a mail client and real time video conferences with Nextcloud Talk. For many (persons & businesses) this means a convenient place where all the tools are combined under one platform.
+
+## Where the issues started
+
+Trying to be everything at the same time comes at a cost. And that is generally an experience that at least in my experience never feels polished or finished. While the Nextcloud Plug-Ins are incredibly versatile and powerful they also leave room for segmentation and you will notice it.
+
+### The permanent alpha
+
+That's what using Nextcloud feels like 75% of the time. I have no insight into the company behind the project but it feels like they are chasing a release cycle for the sake of paper launching unfinished features that compromise in terms of stability and polish. The thing that bothers me the most is that they are constantly marketed as "production ready" when they clearly had not nearly enough QA.
+
+2 years ago I tried to install Collabora for an organisation I'm involved with and the setup was everything but straight forward. Docs where limited and the answers buried either in a forum thread or github issue. After many web searches I got it to work, but the performance (at least when I tested) was not really usable. We ended up using Google Docs and Etherpad.
+
+Then there was the story with end to end encryption (E2EE) for files. This was a feature that was promoted quite extensively by Nextcloud and [released as stable](https://nextcloud.com/blog/production-ready-end-to-end-encryption-and-new-user-interface-arrive-with-nextcloud-desktop-client-3-0/) after many delays. So I followed the instructions on installing it and... [the sync clients broke down](https://github.com/nextcloud/desktop/issues/2593). What happened? Well Nextcloud released software as stable and production ready, but the most basic functionality was simply not ready and a lot of clients stopped syncing, mine included.
+
+A few weeks ago [Nextcloud 21](https://nextcloud.com/blog/nextcloud-hub-21-out-with-up-to-10x-better-performance-whiteboard-and-more-collaboration-features/) was released and boasted a "10x Speed improvement" which of course is an assumption that cannot hold it's grounds. But I was excited as even a "1.5x-2x" improvement would have been really substantial. I installed the new version and well... performance seemed untouched but as a new feature my UI was stuck in a permanent dark mode UI with unreadable text (see the files sizes). I don't run any custom theme or anything. Is this a complete deal breaker? Of course not, but it goes a long way to show how untested the whole software is if a stable release has unreadable text in the start page of your product.
+
+
+
+
+
+
+
+Screenshot of Nextcloud 21 with colour bugs
+
+
+
+
+
+In addition to the weird CSS bugs it also introduced a new bug where I have to frequently reload the web UI as it "cannot connect" to the server. Definetely production ready.
+
+### Performance
+
+The final issue is the performance as a whole. The web interface regularly takes around 5-10s to load for each action you perform. The only thing that is quite responsive is navigating through folders. It's a drag when you just quickly want to get stuff done and the actual work you have to do takes less than waiting for Nextcloud to serve you the website. It's simply put not fun to use it.
+
+There is also the issue that you need to spin up a second container for cron jobs like it's 2003 and that every update or so you manually have to go into the console to rebuild some indexes. I'll leave them unjudged as it maybe those are "Enterprise Features" which I don't understand.
+
+## Seafile to the rescue
+
+The last update (Nextcloud 21) was the point where I decided to jump ship as explained above. The question was: What options do I have?
+
+- Pydio
+- Seafile
+
+Pydio reinvented itself with the launch of it's Cells product. However at the time of writing the macOS client did not seem ready and therefore was excluded.
+
+Seafile on the other hand just had the release of it's 8th version (still in beta afaik) and supports iOS and macOS.
+
+### Migration
+
+I had to migrate 2 things: Cal/CardDav for Calendar and Contacts and the files drive itself.
+Spinning up a Seafile instance was a breeze as I host every single service with docker.
+
+```bash
+# .env
+MYSQL_ROOT_PASSWORD=random
+DB_HOST=db
+DB_ROOT_PASSWD=random
+
+SEAFILE_ADMIN_EMAIL=me@example.com
+SEAFILE_ADMIN_PASSWORD=a_very_secret_password
+```
+
+```yaml
+version: '2.0'
+
+services:
+ db:
+ image: mariadb:10.5
+ env_file: .env
+ volumes:
+ - ./data/db:/var/lib/mysql
+
+ memcached:
+ image: memcached:1.5.6
+ entrypoint: memcached -m 256
+
+ app:
+ image: seafileltd/seafile-mc:latest
+ env_file: .env
+ volumes:
+ - ./data/app:/shared
+ depends_on:
+ - db
+ - memcached
+```
+
+I then installed the macOS client and simply copied all the files over. Before actually copying the files I added a `seafile-ignore.txt` file in the root to exclude files from being uploaded to the server. Read more [here](https://help.seafile.com/syncing_client/excluding_files/).
+
+**Gotcha**
+The ignore file can be tricky if you tread it like a `.gitignore` files. `.git/` would not exclude all those directories, only the root one. To exclude all `.git` directories you actually need to insert `*/.git/` into the `seafile-ignore.txt` file.
+
+The UI and the sync is incredibly fast, especially when compared to Nextcloud and is delightful to use. It has all the features you would expect: 2FA, user groups, quotas, link sharing (with support for expiration, password and upload only), files sharing between users, etc. It also features collaboration features like Nextcloud but I haven't tested them yet. Also it features an actual REST API with tokens that you can generate (as read-write or read only tokens). Another issue I had to battle with in the past with Nextcloud.
+
+The mobile app on iOS does everything you would expect it to do, including integrating with the native Files API.
+
+For Notability I use the backup feature that uploads backups as PDFs of my notes to a WebDav server. However Seafile disables the usage of WebDav for users with 2FA as it would be a vulnerability. As a solution I simply created a "Notability" user without 2FA and shared the folder i want to use as target with that user. Awesome! Now I have a scoped user that only has access to the notability backup folder without having access to the rest of my files.
+
+## CardDav/CalDav
+
+Since Seafile focuses only on the "Drive" component I had to migrate my contacts and calendars elsewhere. The way to go solution is Radicale and I was surprised to find that there is not official docker image? After a 2-min research I found the most popular docker image did not support Authentication? So I had to create my own.
+
+You can find my [Radicale docker image here](https://github.com/cupcakearmy/docker-radicale), maybe you find it useful. It supports bcrypt passwords and can be deployed with just the env variables for `USER` and `PASSWORD`. It has been tested with the iOS and macOS native clients.
+
+```bash
+# .env
+USER=foo
+PASSWORD=secret
+```
+
+```yaml
+# docker-compose.yml
+version: '3.7'
+
+services:
+ app:
+ image: cupcakearmy/radicale
+ env_file: .env
+ volumes:
+ - ./data:/data
+ ports:
+ - 80:5232
+```
+
+The "migration" was done by exporting the calendars I had in Nextcloud with the native macOS calendar app and simply reimporting them into the new server, again with the native client on macOS. Same procedure with the contacts. Sync works like a charm and I'll never go back.
+
+### The downsides
+
+As with any project Seafile has some drawbacks compared to Nextcloud. Beside the obvious fact that Nextcloud has tons of plug-ins and Seafile does not, Seafile does store data and therefore files in blobs, so they are not visible to the host machine. That means that you cannot directly access lets say a `hello.txt` directly from the filesystem of the server you are hosting the service on. This might be a deal breaker for some people.
+
+Another thing that could bother some is that in the free version of Seafile there is no automatic garbage collection, so from time to time you should run the script to cleanup old data.
+
+## Conclusion
+
+To conclude the journey: It took me an evening to move everything, create the docker image for radicale and I could not be happier. Seafile feels so much more robust in comparison to the point that Nextcloud feels like a toy product. Of course this is not a fair comparison as Seafile only does file sync and not the other 10-20 big features Nextcloud brings to the table. However if you only use Nextcloud to sync files to your own cloud the comparison is not even close IMO.
diff --git a/src/content/blog/matomo-vs-ublock-origin.md b/src/content/blog/matomo-vs-ublock-origin.md
new file mode 100644
index 0000000..6d71aef
--- /dev/null
+++ b/src/content/blog/matomo-vs-ublock-origin.md
@@ -0,0 +1,178 @@
+---
+title: 'Matomo vs uBlock Origin'
+date: '2021-01-28'
+categories:
+ - 'general'
+tags:
+ - 'blocker'
+ - 'matomo'
+ - 'stats'
+ - 'tracking'
+coverImage: './images/luke-chesser-JKUTrJ4vK00-unsplash-scaled.jpg'
+---
+
+After [Ackee](https://github.com/electerious/Ackee) got an update and stopped working I wanted to search for an alternative to get some stats on my statically rendered site. As no server is used, I need some 3rd party service.
+
+I don't want to spy on people, nor set cookies and annoy people with consent banners if they only want to read a damn blog post. The goal is just get a feel for the traffic on the site.
+This is important to mention as the next steps could sound a bit nefarious otherwise.
+Data collected on this site is 100% anonymous and [GDPR](https://gdpr.eu/) compliant.
+
+Since Matomo is the de facto way to go, I spun up the Matomo server with my trusted docker-traefik setup and was up and running in no time.
+( I'll share the config files if anyone is interested at the bottom. )
+
+Then I quickly copied the JS tracker code in my main html template and thought that was it. **Wrong**.
+
+## The problem defaults.
+
+So turns out that Matomo, being widely used is of course included in many Ad-Blocker lists and therefore my stats did not work. Lets see why:
+Basically all ad blockers work with lists. Those lists include pattern that if matched will be filtered out. Let's take a look at the default Matomo tracking code:
+
+```html
+
+```
+
+We can see that my stats server is `stats.nicco.io`. And we also can see that the tracking script is loaded by `matomo.js`, which then sends the details to `matomo.php`. Well that is of course incredibly easy to block, and it is as you can see below:
+
+
+
+
+
+
+
+Part of the EasyList Filter
+
+
+
+
+
+
+
+
+
+
+
+Part of the EasyList Filter
+
+
+
+
+
+That won't work, and since most of the people that visit this site are probably developers which probably have some kind of ad blocker installed.
+
+## Solution time
+
+So after a short Ecosia search I landed on the blog of [Christian Mochow](https://christianmochow.de/author/christian-mochow/) that wrote a [blog post](https://christianmochow.de/beitraege/tools/catch-me-if-you-can-adblocker-umgehen-mit-matomo/) on this issue. I got the solution from his article.
+
+Luckily Apache has the famous Rewrite module, which will solve all our problems. I bet most of you already know where this is headed.
+
+We can create a `.htaccess` file in the root of our Matomo installation folder, to cloak our requests.
+
+```apache
+# .htaccess
+RewriteEngine On
+RewriteRule ^unicorn matomo.js
+RewriteRule ^rainbow matomo.php
+```
+
+Now if we request `https://stats.nicco.io/unicorn` we actually get the response for `https://stats.nicco.io/matomo.js` and the same for `rainbow` and `matomo.php`.
+
+```js
+// Replace in the client
+
+_paq.push(['setTrackerUrl', u + 'matomo.php']) // Before
+_paq.push(['setTrackerUrl', u + 'rainbow']) // After
+
+g.src = u + 'matomo.js' // Before
+g.src = u + 'unicorn' // After
+```
+
+**Awesome!**
+
+I had to create a minuscule `Dockerfile` as the `Rewrite` module is not enabled per default in the standard Matomo docker image.
+
+```docker
+# Dockerfile
+FROM matomo
+RUN a2enmod rewrite
+```
+
+## Responsible Usage
+
+Now as you can see it's incredibly easy to mask tracking stuff, and I bet there are a lot of people doing this in the wild. It is important to respect the privacy of your users and you should never store more data than you need and in the best case don't store data at all.
+
+**Anonymize as much as possible!** Matomo makes this easy. You can effortlessly delete 2 bytes of each ip address (half of the info), enforce strict no cookie tracking and automatically delete data after `x` days. Please do β€οΈ
+
+### Config Files
+
+The `Dockerfile` and the `.htaccess` files are shown above.
+
+```yaml
+# docker-compose.yml
+version: '3.7'
+
+networks:
+ traefik:
+ external: true
+
+services:
+ db:
+ image: mariadb
+ command: --max-allowed-packet=64MB
+ restart: unless-stopped
+ volumes:
+ - ./data/db:/var/lib/mysql
+ env_file: .env
+
+ app:
+ build: .
+ restart: unless-stopped
+ links:
+ - db
+ volumes:
+ - ./data/matomo:/var/www/html
+ - ./.htaccess:/var/www/html/.htaccess
+ env_file: .env
+ labels:
+ - traefik.enable=true
+ - traefik.docker.network=traefik
+ - traefik.port=80
+ - traefik.backend=matomo
+ - 'traefik.frontend.rule=Host:stats.nicco.io;'
+ networks:
+ - traefik
+ - default
+```
+
+```bash
+# .env
+MYSQL_DATABASE=matomo
+MYSQL_USER=matomo
+MYSQL_PASSWORD=
+MYSQL_RANDOM_ROOT_PASSWORD=yes
+
+MATOMO_DATABASE_HOST=db
+MATOMO_DATABASE_ADAPTER=mysql
+
+MATOMO_DATABASE_DBNAME=matomo
+MATOMO_DATABASE_USERNAME=matomo
+MATOMO_DATABASE_PASSWORD=
+```
+
+See the [code for this website](https://github.com/cupcakearmy/nicco.io/blob/220643770385bebb05094b440c28441b49184556/src/template.html#L37-L64).
diff --git a/src/content/blog/monitor-your-self-hosted-services-for-free.md b/src/content/blog/monitor-your-self-hosted-services-for-free.md
new file mode 100644
index 0000000..6758bdd
--- /dev/null
+++ b/src/content/blog/monitor-your-self-hosted-services-for-free.md
@@ -0,0 +1,158 @@
+---
+title: 'Monitor your self hosted services for free'
+date: '2022-07-07'
+coverImage: './images/daniele-franchi-g2fJ7d7eKSM-unsplash.jpg'
+tags:
+ - self-host
+ - monitoring
+---
+
+Monitoring services requires external resources, as monitoring your server(s) from the server itself does not make sense. Renting a whole server for monitoring is a bit of a resources (and money) waste.
+
+## Getting a free VM
+
+Luckily we can leverage the free tiers of many cloud providers. This gives us a free option and stability as they tend to be very reliable. Below is a list of free tiers available form the big 3 players. All of them offer a free VM per month, which is more than sufficient for our needs.
+
+- [Google Cloud Project](https://cloud.google.com/free/docs/gcp-free-tier/#compute)
+- [Microsoft Azure](https://azure.microsoft.com/en-in/pricing/free-services/)
+- [Amazon AWS](https://aws.amazon.com/free/?all-free-tier.sort-by=item.additionalFields.SortRank&all-free-tier.sort-order=asc&awsf.Free%20Tier%20Types=*all&awsf.Free%20Tier%20Categories=categories%23compute)
+
+Choose your preferred cloud, it does not really matter. I went with Google as I find the interface the nicest to use. For the OS of the VM I went which Ubuntu, but any Linux.
+
+## Setup
+
+For monitoring we will use [Uptime Kuma](https://github.com/louislam/uptime-kuma). It's an amazing free, open source monitoring tool, very similar to [UptimeRobot](https://uptimerobot.com/). For simplicity we will run it with Docker and Traefik.
+
+First we need to [instal docker](https://docs.docker.com/engine/install/debian/#install-using-the-repository)
+
+```bash
+curl -fsSL https://download.docker.com/linux/debian/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
+
+echo \
+ "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/debian \
+ $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
+
+apt update
+apt install docker-ce docker-ce-cli containerd.io docker-compose-plugin
+```
+
+Also we want some basic firewall
+
+```bash
+apt install ufw
+ufw allow 80
+ufw allow 443
+ufw allow 22
+ufw enable
+```
+
+Don't forget to point your DNS to the server. For example as a subdomain `status.example.org`
+
+## Depoly Uptime Kuma
+
+We only need a `docker-compose.yaml` file now and we should be up and running. I'll share the folder structure below. We could but everything in one compose file but I like to keep thinks tidy.
+
+```
+.
+βββ kuma
+β βββ docker-compose.yaml
+βββ traefik
+ βββ docker-compose.yaml
+ βββ traefik.yaml
+```
+
+### Traefik
+
+Lets start with Traefik. It will handle all our routing and TLS certificates. Remember to change the acme email down in the `traefik.yaml`
+
+```yaml
+version: '3.8'
+
+networks:
+ default:
+ external: true
+ name: proxy
+
+services:
+ traefik:
+ image: traefik:2.8
+ restart: unless-stopped
+ ports:
+ - '80:80'
+ - '443:443'
+ volumes:
+ - /var/run/docker.sock:/var/run/docker.sock
+ - ./traefik.yaml:/etc/traefik/traefik.yaml:ro
+ - ./data:/data
+ labels:
+ - 'traefik.enable=true'
+
+ # HTTP to HTTPS redirection
+ - 'traefik.http.routers.http_catchall.rule=HostRegexp(`{any:.+}`)'
+ - 'traefik.http.routers.http_catchall.entrypoints=insecure'
+ - 'traefik.http.routers.http_catchall.middlewares=https_redirect'
+ - 'traefik.http.middlewares.https_redirect.redirectscheme.scheme=https'
+ - 'traefik.http.middlewares.https_redirect.redirectscheme.permanent=true'
+```
+
+```yaml
+# Define HTTP and HTTPS entrypoints
+entryPoints:
+ insecure:
+ address: ':80'
+ secure:
+ address: ':443'
+
+#Dynamic configuration will come from docker labels
+providers:
+ docker:
+ endpoint: 'unix:///var/run/docker.sock'
+ network: 'proxy'
+ exposedByDefault: false
+
+#Enable acme with http file challenge
+certificatesResolvers:
+ le:
+ acme:
+ email: me@example.org
+ storage: /data/acme.json
+ httpChallenge:
+ # used during the challenge
+ entryPoint: insecure
+```
+
+To get traefik running we just need to type the following
+
+```bash
+docker network create proxy
+docker compose up -d
+```
+
+### Kuma
+
+The compose file for Kuma is compact. Don't forget to change the domain to yours.
+
+```yaml
+version: '3.8'
+
+networks:
+ default:
+ external: true
+ name: proxy
+
+services:
+ kuma:
+ image: louislam/uptime-kuma:1
+ restart: unless-stopped
+ volumes:
+ - ./data:/app/data
+ labels:
+ - traefik.enable=true
+ - traefik.http.routers.kuma.rule=Host(`status.example.org`)
+ - traefik.http.routers.kuma.entrypoints=secure
+ - traefik.http.routers.kuma.tls.certresolver=le
+```
+
+Now you can navigate to your new monitoring website and create and admin account and setup monitors, alert systems and so on.
+
+Many thanks to [Louis Lam](https://github.com/louislam) for creating and maintaining Utime Kuma! Consider donating!
diff --git a/src/content/blog/react-code-splitting-made-simple-easily-reduce-bundle-js.md b/src/content/blog/react-code-splitting-made-simple-easily-reduce-bundle-js.md
new file mode 100644
index 0000000..4f83a89
--- /dev/null
+++ b/src/content/blog/react-code-splitting-made-simple-easily-reduce-bundle-js.md
@@ -0,0 +1,120 @@
+---
+title: 'React code splitting made simple. Easily reduce bundle.js'
+date: '2019-07-21'
+categories:
+ - 'coding'
+tags:
+ - 'code-splitting'
+ - 'react'
+coverImage: './images/jason-abdilla-jZWmw6007EY-unsplash-scaled.jpg'
+---
+
+On average right now **around 200-500kb of JS is sent** down the pipe to the client. Way to much for my personal taste. Since a lot of website use react, today we will look how to reduce that in a simple and easy way, applicable to almost any app.
+
+
+
+
+
+
+
+Photo byΒ [Jason Abdilla](https://unsplash.com/@jabdilla_creative?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)Β onΒ [Unsplash](https://unsplash.com/search/photos/axe?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
+
+
+
+
+
+Let's start with why our `bundle.js` even grows that much. In my opinion there are 2 causes for this:
+
+1. Devs mindlessly running `npm install`.
+2. Loading **all** the JS, even if it is not needed in the current screen (e.g. the homepage).
+
+## Carefully select packages
+
+The first is not as easily solved if the app is already built. It requires your team to carefully choose your package and realise that often you don't need all the packages you are bundling. Often there is a lighter alternative.
+
+As an example: a lot of websites use [momentjs](https://github.com/moment/moment/): It's an awesome library, **but it weights [231.7kb](https://bundlephobia.com/result?p=moment)!** There is an even cooler alternative: [DayJS](https://github.com/iamkun/dayjs). It requires only [6.5kb](https://bundlephobia.com/result?p=dayjs) and shares the same API as moment, so there is no rewriting code. There are a lot of similar examples that can be made. If you have a big module, just search for a smaller alternative.
+
+#### TLDR;
+
+1. Use the [webpack-bundle-analyser](https://github.com/webpack-contrib/webpack-bundle-analyzer) for already existent packages.
+2. Search for lighter alternatives to big packages.
+3. **Before installing** check on [bundlephobia](https://bundlephobia.com/) how big your desired package is.
+
+## Code splitting & lazy loading
+
+Now to the real deal. The classic problem is that big websites don't split the JS that is sent to the client. This means that the website might receive the JS for the shopping section, while you are only waiting for the homepage to load. This is unnecessary and **waiting for a page to load is always a frustrating experience**. We can do better π
+
+How are we going to achieve this? **Code splitting & lazy loading.**
+We are going to use 2 native react functions, so no external packages.
+
+- [lazy](https://reactjs.org/docs/code-splitting.html#reactlazy)
+- [Suspense](https://reactjs.org/docs/code-splitting.html#suspense)
+
+Lazy & Suspense require React version **16.6** or newer. Also this does not work with server side rendering.
+
+**Lazy** is used to lazy load the component (...duh π). This means that the code for the component is only downloaded when a component actually needs to be shown.
+
+**Suspense** is a handy wrapper for displaying a fallback while the component is loading.
+
+Let's see below how this is achieved:
+
+**From**
+
+```
+import MyList from './MyList'
+
+const App = () =>
+```
+
+This is in fact all you need to do. Now our component `MyList` will lazy load on necessity. Awesome!
+
+#### Bonus: Little helper function
+
+This can get repetitive though, so here is a little helper that basically wraps everything into one function:
+
+```
+export const Split = path => props => {
+ const Component = lazy(() => import(path))
+ return Loading...}>
+
+
+}
+```
+
+Now we can simply do the following:
+
+```
+import { Split } from './utils.jsx'
+
+const MyListLazy = Split('./MyList')
+
+const App = () =>
+ // ...
+
+ // ...
+
+```
+
+There is a little codesanbox below with all the code if you wanna try for yourself (you should! π)
+
+
+
+This concludes todays look at how to reduce the bundle size and use code splitting in react. Note that this does not work with server side rendering.
diff --git a/src/content/blog/reduce-docker-compose-files-with-yaml-magic.md b/src/content/blog/reduce-docker-compose-files-with-yaml-magic.md
new file mode 100644
index 0000000..d40bf13
--- /dev/null
+++ b/src/content/blog/reduce-docker-compose-files-with-yaml-magic.md
@@ -0,0 +1,41 @@
+---
+title: 'Reduce docker-compose files with YAML magic'
+date: '2019-05-06'
+categories:
+ - 'coding'
+tags:
+ - 'docker'
+ - 'docker-compose'
+ - 'yaml'
+coverImage: './images/guillaume-bolduc-259596-unsplash-scaled.jpg'
+---
+
+If you find yourself writing long docker-compose files because you need to specify the same things over and over again inside of the single services: **fear no more**!
+
+_Without further ado:_
+
+```
+version: '3.4' # min version 3.4
+
+x-default: &default
+ restart: always
+ env_file: .env
+
+
+services:
+
+ web:
+ <<: *default
+ image: node
+ # blablabla
+
+ db:
+ <<: *default
+ image: postgres
+```
+
+Thats it! Now both `web` and `db` inherit the properties of `x-default`.
+
+The `x-` prefix is a docker specific thing and is required. YAML support references also without the prefix. Also note that **version 3.4 or higher is required**.
+
+btw: I recently was looking into [Sentry](https://sentry.io/welcome/) and found this [docker-compose](https://github.com/getsentry/onpremise/blob/master/docker-compose.yml) file. Thats how I discovered it.
diff --git a/src/content/blog/rust-in-python-made-easy.md b/src/content/blog/rust-in-python-made-easy.md
new file mode 100644
index 0000000..caa2911
--- /dev/null
+++ b/src/content/blog/rust-in-python-made-easy.md
@@ -0,0 +1,211 @@
+---
+title: 'Rust in Python made easy'
+date: '2020-01-01'
+categories:
+ - 'coding'
+tags:
+ - 'ffi'
+ - 'python'
+ - 'rust'
+coverImage: './images/jonathan-chng-HgoKvtKpyHA-unsplash-scaled-1.jpg'
+---
+
+Python is truly amazing. With all that greatness generally there has to be a tradeoff and in the case of Python it's performance.
+
+Luckily there is an easy way to run computation intensive work in Rust, which is of course orders of magnitude faster. Let's see how!
+
+Overview
+
+1. [hello world example](#simple)
+2. [parameters & returns](#params-returns)
+3. [rust data types compared to pythons ctypes](#types)
+4. [lists / arrays](#lists)
+5. [complex data types handling](#complex)
+
+Lets assume we want to run the following python code in rust.
+
+```
+def add(a, b):
+ return a + b
+
+add(1, 2) # 3
+```
+
+Lets see the steps we need to take to achieve this:
+
+1. write some rust code
+2. compile rust
+3. import rust in python
+4. run the rust code inside of python
+
+## Hello world example
+
+First lets create a new rust project by running:
+
+```bash
+cargo new rust_in_python
+```
+
+Then lets rename `src/main.rs` to `src/lib.rs` as we want a library and not standalone program.
+
+```bash
+mv src/main.rs src/lib.rs
+```
+
+Now we simply write a hello world function in rust
+
+```rust
+#[no_mangle]
+fn hello() {
+ println!("Hello from rust π");
+}
+```
+
+For every function that need to be available to other languages (in our case Python) through foreign function call (ffi) we will need to add the `#[no_mangle]` flag to it.
+
+The last step is to tell rust to compile to a dynamic library. To do so simply add the following to your `Cargo.toml` config file.
+
+```toml
+[lib]
+crate-type = ["dylib"]
+```
+
+Now we are ready to build π
+
+```bash
+cargo build --release
+```
+
+Now just create a `main.py` file and we can import and run our function.
+
+```py
+from ctypes import CDLL
+
+lib = CDLL("target/release/librust_in_python.dylib")
+lib.hello()
+```
+
+And if you run it you will be greeted from rust. No need to install, the `ctypes` package is included the standard python library.
+
+```bash
+python main.py
+```
+
+## With return & parameters
+
+Of course without giving parameters to the function and receiving its output this whole endeavour would be useless.
+
+Before we start I would like to remind you that python is untyped whereas rust of course is strongly typed. This means that we will need to tell python what types the parameters and the return of our rust function we have.
+
+First lets write the simple add function in rust
+
+```rust
+#[no_mangle]
+fn add(a: f64, b: f64) -> f64 {
+ return a + b;
+}
+```
+
+Don't forget to build again π
+
+```bash
+cargo build --release
+```
+
+Now to the python part
+
+```py
+from ctypes import CDLL, c_double
+
+lib = CDLL("target/release/librust_in_python.dylib")
+
+lib.add.argtypes = (c_double, c_double)
+lib.add.restype = c_double
+
+result = lib.add(1.5, 2.5)
+print(result) # 4.0
+```
+
+Lets see what is happening here:
+
+With `lib.add.argtypes` we must pass a tuple specifying how python should parse the data we pass to the `add` function. The `ctypes` package includes a list of different types we can use. [See the full list here](https://docs.python.org/3.8/library/ctypes.html#fundamental-data-types).
+
+The same happens with `lib.add.restype`. As you might have guessed this tells python what type is returned from the rust function.
+
+In our case it's all `c_double` as we are using `f64` in rust.
+
+## Data types in rust
+
+Lets see some other data types and their equivalent in rust.
+
+
Python
C
Rust
c_bool
-
c_byte
char
i8
c_ubyte
unsigned char
u8
c_short
short
i16
c_ushort
unsigned short
u16
c_int
int
i32
c_uint
unsigned int
u32
c_long
long
i64
c_ulong
unsigned long
u64
c_float
float
f32
c_double
double
f64
+
+## Arrays & List
+
+So what about lists? Unfortunately I have not found a way to use Vectors for dynamic size arrays. So for now it's just fixed size arrays.
+
+###### Rust
+
+```rust
+#[no_mangle]
+fn sum(arr: [i32; 5]) -> i32 {
+ let mut total: i32 = 0;
+ for number in arr.iter() {
+ total += number;
+ }
+ return total;
+}
+```
+
+###### Python
+
+```python
+from ctypes import CDLL, c_int
+
+lib = CDLL("target/release/librust_in_python.dylib")
+
+lst = [1, 2, 3, 4, 5]
+# Create the memory of the list size
+seq = c_int * len(lst)
+arr = seq(*lst)
+
+result = lib.sum(arr)
+print(result)
+```
+
+## Classes and complex data types
+
+Often it can be very useful to send and/or receive data in a structured, compact way. We can do this using structs.
+
+###### Rust
+
+```rust
+#[repr(C)]
+pub struct Point {
+ pub x: f64,
+ pub y: f64,
+}
+
+#[no_mangle]
+fn greet_point(p: Point) {
+ println!("x: {}, y: {}", p.x, p.y);
+}
+```
+
+###### Python
+
+```python
+from ctypes import CDLL, Structure, c_double
+
+lib = CDLL("target/release/librust_in_python.dylib")
+
+class Point(Structure):
+ _fields_ = [
+ ('x', c_double),
+ ('y', c_double)
+ ]
+
+
+p = Point(x=1.2, y=3.4)
+lib.greet_point(p)
+```
diff --git a/src/content/blog/speed-up-your-docker-builds-with-dockerignore.md b/src/content/blog/speed-up-your-docker-builds-with-dockerignore.md
new file mode 100644
index 0000000..9aaa9c0
--- /dev/null
+++ b/src/content/blog/speed-up-your-docker-builds-with-dockerignore.md
@@ -0,0 +1,62 @@
+---
+title: 'Speed up your docker builds with .dockerignore'
+date: '2019-12-23'
+categories:
+ - 'coding'
+tags:
+ - 'docker'
+coverImage: './images/thomas-kelley-t20pc32VbrU-unsplash-scaled-1.jpg'
+---
+
+So you ever wondered why your docker build takes so long to startup when all you do is adding a few files to your image and setting which command to run?
+
+Fear no more! `.dockerignore` to the rescue βοΈ.
+
+Whenever you build a docker image the first thing you will always see is the following:
+
+```bash
+docker build -t my-image .
+Sending build context to Docker daemon 203.2MB
+Step 1/6 : FROM ...
+```
+
+The important thing to note is the context with a size of `203.2MB` in this case. What does it mean?
+
+Every time a docker image gets built, it requires the context. By default it's simply the directory of your `Dockerfile`. Basically it's the folder from which you can add files to the image you are building.
+
+This means that for each build, the docker client sends the whole directory to the docker engine to build.
+If you are unlucky this includes either the whole node_modules folder, maybe a virtual env folder for your python or simply everything in your dist folder. In my case it was a venv with 200+MB of data.
+
+This slows down the process significantly and if you are iterating on a dockerfile making only a few tweak this can be very tearing.
+
+> Waiting is the most boring (duh) and painful thing ever.
+>
+> Every person on this planet
+
+## Solution: `.dockerignore`
+
+Simply create a `.dockerignore` file inside of your context (basically in the same directory as your `Dockerfile`) and specify what to include, what to ignore. It works just like our trusted `.gitignore`.
+
+Im my case I only wanted to have my `requirements.txt` and the `.py` files inside of my `src` folder.
+
+###### .dockerignore
+
+```
+# Ignore everything
+**
+
+!/requirements.txt
+!/src
+
+**/__pycache__
+```
+
+If I run `docker build` again watch what happens:
+
+```bash
+docker build -t my-image .
+Sending build context to Docker daemon 37.38kB
+Step 1/6 : FROM ...
+```
+
+Awesome! The context shrunk from 200MB to under 50kB and the startup time of docker build was greatly reduced. This will help substantially if you have a lot of files, like e.g. a node_modules folder.
diff --git a/src/content/blog/step-up-oauth-security-with-pkce.md b/src/content/blog/step-up-oauth-security-with-pkce.md
new file mode 100644
index 0000000..2efec6f
--- /dev/null
+++ b/src/content/blog/step-up-oauth-security-with-pkce.md
@@ -0,0 +1,67 @@
+---
+title: 'Step up OAuth security with PKCE'
+date: '2019-07-10'
+categories:
+ - 'general'
+tags:
+ - 'ietf'
+ - 'oauth'
+ - 'security'
+coverImage: './images/jielin-chen-pKQIpxzq0ZQ-unsplash-e1562783699383-scaled.jpg'
+---
+
+We all have used OAuth at some point. Whether with SSOs or a simple authorization server. While OAuth has multiple so called _flows_, the most commonly used are the _**code**_ and the _**implicit**_ flows. Today we will focus on the security aspect of the latter, pros/cons and solutions to make the _implicit_ flow (more) secure.
+
+I am going to assume some basic OAuth knowledge. [Here](https://medium.com/@darutk/the-simplest-guide-to-oauth-2-0-8c71bd9a15bb) is a basic explanation. [This](https://aaronparecki.com/oauth-2-simplified/) is a quick more in depth article.
+
+#### Quick refresher on implicit vs code flows
+
+As mentioned above there are [multiple flows](https://oauth.net/2/) in the [OAuth2 spec](https://tools.ietf.org/html/rfc6749), but in reality only the **_code_** and **_implicit_** are really used. The big difference between the two ist that in the **_code_** flow the there is a pre-shared password. This requires a backend, so the code flow cannot be used in SPAs.
+
+This is where traditionally the **_implicit_** flow comes into play. It is basically a played down version of his **_code_** brother. Instead of generating a code which is then used in combination with the password on the server side to get the token, in **the** _**implicit**_ **flow the token is returned directly**.
+
+## Issues with security in _implicit_ flows
+
+The implicit flow contains the `state` parameter. This is random value that the client sends to the authorization server. The server then redirects to the client including the `token` and `state` that was passed. This prevents CSRF and Replay attacks where an attacker could basically redirect some site to your callback path. The client should delete the state variable when getting the token. This is already pretty good, but we need to do more. You can read the details [in the spec](https://tools.ietf.org/html/rfc6749#section-10.12).
+
+**The server has no way of verifying that the original client actually got the token.**
+
+This is a big problem! Since the server cannot verify the identity of the original request it could end up giving the token to a 3rd party which did not make the request. Now an attacker has an access token. π
+
+## PKCE to the saving π
+
+So how can our app demonstrate that it is the one that made the request? Of course the smart folks at [IETF](https://www.ietf.org/) have a solution.
+
+It's called **[Proof Key for Code Exchange](https://tools.ietf.org/html/rfc7636)**. In works in a similar way to the code flow, but instead of a password we use hashing. Confused? Let me explain:
+
+1. Your client wants to authenticate
+ 1. On the client side you generate a random string `verifier`.
+ 2. You then compute the SHA-256 hash of the `verifier` which gives you the `challenge`
+ 3. Your app makes the classic `/authorize?...&code_challenge=&code_challenge_method=S256`
+2. The authorization server saves does the usual
+ 1. Redirect to user promps.
+ 2. User accepts.
+ 3. Server redirect to your callback path with a `code`
+3. The client exchanges the `code` for a `token`
+ In the exchange request the client includes the original `verifier` which was used to generate the `challenge` hash.
+4. Server verifies the request
+ The server takes the `verifier` and generates the `challenge` on its own, then checks whether it matches with the original one associated with the `code`
+5. Server send code and client is authenticated.
+
+In this way, using `state` and the **PKCE** extension both the client and server are secured. The server can be sure that the token was sent only to the client from which the request originally was created and the client is safe agains CSRF & Replay attacks. **WIN WIN**. πͺ
+
+Below is a diagram by [Auth0](https://auth0.com/) which helped me understand the whole process more easily.
+
+
+
+
+
+
+
+[https://auth0.com/docs/flows/concepts/auth-code-pkce](https://auth0.com/docs/flows/concepts/auth-code-pkce)
+
+
+
+
+
+I hope you found this helpful. I was blown away by the simplicity of PKCE and how sometimes problems can be solved in very elegant ways thanks to smart people.
diff --git a/src/content/blog/supporting-detecting-dark-mode-in-the-browser.md b/src/content/blog/supporting-detecting-dark-mode-in-the-browser.md
new file mode 100644
index 0000000..13f3def
--- /dev/null
+++ b/src/content/blog/supporting-detecting-dark-mode-in-the-browser.md
@@ -0,0 +1,137 @@
+---
+title: 'Supporting & detecting dark mode in the browser'
+date: '2020-01-07'
+categories:
+ - 'coding'
+tags:
+ - 'css'
+ - 'dark-mode'
+ - 'media-query'
+coverImage: './images/davisco-5E5N49RWtbA-unsplash-scaled-1.jpg'
+---
+
+How do you detect if a user of your website has a preference for light or dark theme? Or maybe has not chosen at all?
+
+We will look at a few ways how to detect and handle dark modes in 2020:
+
+1. [Pure CSS](#pure-css)
+2. [JS](#js)
+3. [React](#react)
+
+## Pure CSS
+
+First lets have a look how we can do this using only CSS. There is a new css media query that is supported by [almost any browser](https://caniuse.com/#feat=prefers-color-scheme) right now.
+**prefers-color-theme**
+
+###### Example Time
+
+```css
+.box {
+ background: #eee;
+}
+
+@media (prefers-color-scheme: dark) {
+ .box {
+ background: #000;
+ }
+}
+
+@media (prefers-color-scheme: light) {
+ .box {
+ background: #fff;
+ }
+}
+```
+
+Just like we use media queries for device width we can easily target specific CSS in case the user has a specific preference.
+
+For completeness, if the user has no preference you can use the media query `@media (prefers-color-scheme: no-preference)`.
+
+## JS
+
+#### Simple
+
+So how do we do the same thing in JS? There is a little helper called `window.matchMedia` ([also widely supported](https://caniuse.com/#feat=matchmedia)) wich takes a media query and tells us if the media query is true of false.
+
+###### Example
+
+```tsx
+const isDark = window.matchMedia('(prefers-color-scheme: dark)')
+isDark.matched // true or false
+```
+
+That simple.
+
+#### Reactive
+
+If we want to go reactive, the `matchMedia` function also allows us to set a listener, so every time the setting changes, we get notified and can act accordingly.
+
+###### Example
+
+```tsx
+const isDark = window.matchMedia('(prefers-color-scheme: dark)')
+isDark.addListener((event: MediaQueryListEvent) => {
+ event.matches // true or false
+})
+```
+
+## React
+
+And of course react. We love it, we use it. So I made [a little library](https://github.com/cupcakearmy/use-light-switch) because all the libs I found for react did not include typescript typing!! π€
+
+Of course it comes with hooks π£.
+
+```bash
+yarn add use-light-switch
+```
+
+### `useLightSwitch()`
+
+This is the basic usage.
+
+```tsx
+import { Mode, useLightSwitch } from 'use-light-switch'
+
+
+const Simple: React.FC = () => {
+ const mode = useLightSwitch()
+
+ if (mode === Mode.Dark) ...
+
+ return ...
+}
+```
+
+### `useModeSelector()`
+
+This is the more useful one IMO.
+
+```tsx
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { useModeSelector } from 'use-light-switch'
+
+const App: React.FC = () => {
+ const selected = useModeSelector({
+ light: { color: 'green', name: 'Light' },
+ dark: { color: 'red', name: 'Dark' },
+ unset: { color: 'blue', name: 'Unset' },
+ })
+
+ return (
+
+
Try switching your dark mode in macOS or Windows
+
+ {selected.name}
+
+
+ )
+}
+
+ReactDOM.render(, window.document.getElementById('root'))
+```
diff --git a/src/content/blog/tales-of-learning-go-from-ts.md b/src/content/blog/tales-of-learning-go-from-ts.md
new file mode 100644
index 0000000..9266fba
--- /dev/null
+++ b/src/content/blog/tales-of-learning-go-from-ts.md
@@ -0,0 +1,132 @@
+---
+title: 'Tales of learning Go (from TS)'
+date: '2021-04-17'
+categories:
+ - 'coding'
+tags:
+ - 'autorestic'
+ - 'go'
+ - 'restic'
+coverImage: './images/mark-autumns-Ssr26I0QWVY-unsplash-scaled.jpg'
+---
+
+The story starts about a week ago (April 2021) when I finally got around rewriting a tool called [autorestic](https://github.com/cupcakearmy/autorestic). It's a CLI wrapper around restic, the amazing backup utility.
+This is not a guide or tutorial, just a diary of experiences of the process of coding Go for the first time. I'm far far far away from understanding Go at it's fullest, so veterans please correct me!
+
+### Background
+
+I started `autorestic` in Typescript as at the time it was the main language I was using and I simply love it. The issue was that JS requires a runtime and does not compile, which is not ideal for a standalone CLI. That ment using [_pkg_](https://github.com/vercel/pkg/) and while originally _pkg_ was quite an awesome project, the binaries are large (`70Mb+`) and the support is starting to dwindle with critical issues not being addressed. This meant that I couldn't create ARM builds due to a pending issue that had been open for more than a year by now.
+
+The languages that came to mind were Rust, Go, Kotlin and Swift and I wanted to get to know a new language in the process. The choice came down to Go as it seemed to be easy to learn and is used extensively where I work at, so that was an added bonus.
+
+What follows are the experiences I made as a mostly TS/JS/Python developer going into Go and learning as I went along. I did not have prior Go experience except some hello world examples here and there.
+
+## Setup
+
+I code on macOS so setup was easy: just run `brew install go` and be done with it. Or so I thought so. The whole `GOPATH` and `GOROOT` is not as straight forward. To this day I have not completely comprehended what they do so I will not even try explain it. I set mine to the following and everything worked after that.
+
+```bash
+export GOPATH="$HOME/.go"
+export GOROOT=(brew --prefix go)"/libexec"
+export PATH="$PATH:$GOPATH/bin:$GOROOT/bin"
+```
+
+VSCode on the other hand actually just works without an issue, which was pleasant. As I will discover later the whole tooling is a real pleasure to work with.
+
+### Structure
+
+There are almost no fixed rules for project structure, but many conventions within the community. A very good starting guide is taking a look at this repo: [golang-standards/project-layout](https://github.com/golang-standards/project-layout). There every "conventional" folder has an explanation of it's meaning.
+
+A (kind of) weird standard in the Go world is not having a `src` folder, but rather everything is at root level of a project.
+
+## Basics
+
+Now to the actual coding. There is come getting used to so buckle up and join the ride.
+
+#### Types
+
+Being a typed language Go has a set of basic types and types built on top of them. Basic types are the classic `string`, `int`, `bool`, etc. Then we have arrays (fixed size) and slices (dynamic). We also get `map` and `struct`.
+
+Complex types like maps and structs can be `nil` (null), while basic types have default values and cannot be `nil`. strings default to `""` and ints to `0`. This means that the only way in Go to check if a value has been initialised (e.g. in a struct) is if the value is different from the default one.
+
+A gotcha for me was that in Go almost everything is copied by value and not reference. Therefore also the `range` oparator which is used to loop arrays, slices and maps will copy by value and not reference, which for JS and Pyton people will be confusing as there complex objects are always copied by reference.
+
+#### Missing language features
+
+Before you start searching "how do I do X in Go?" I will save you the time and give you a list of features that are **not** available in go.
+
+- No ternary operator
+- No optional/default function parameters
+- No function overloading
+- No generics
+- No sum/union type
+
+So don't bother searching for them, they are not there. Which at first seems quite limiting, and after a week still feel the same. If you ask the Go community the overwhelming answer is that it's by choice to keep the language "lean" and don't bloat it with unnecessary syntax. I'll get back to this point later.
+
+#### Imports
+
+In Go you try to group code by functionality, which is quite common in programming languages. These are called "packages" and the import structure is similar to Java. Nothing out of the ordinary. A little gotcha: Go cannot resolve cyclic imports. All in all they work quite well.
+
+External dependencies have a native solution called _go modules_ and work as you would expect it. There is a descriptory file where all your dependencies are listed called `go.mod` and a lock file `go.sum`, no concerns here.
+
+#### Error handling
+
+One of the most obvious patterns in Go is the way errors are handled. Basically whenever a function can "throw" an error instead of _throwing_ and _catching_ in Go we return a nullable (`nil`) value and then check that.
+
+```go
+package main
+
+import (
+ "errors"
+ "fmt"
+)
+
+func main() {
+ if result, err := divide(4, 2); err != nil {
+ fmt.Println("We have broken math")
+ } else {
+ fmt.Println("The result: ", result)
+ }
+}
+
+func divide(x, y int) (int, error) {
+ if y == 0 {
+ return 0, errors.New("Cannot divide by 0")
+ }
+ return x / y, nil
+}
+```
+
+This is definitely different to what I was used to, but I enforces error checking and I think it's actually not a stupid design concept. The only negative consequence of that is that you will write the following statement over and over and over and over again. Get's quite repetitive.
+
+```go
+if err != nil {
+ return err
+}
+```
+
+## Speed
+
+What go lacks in features it makes up in speed. There is no questioning the ease of use and the effective time to code something can be quite low. There will be repetitive tasks, but go makes it possible to move at incredible speed. There is very little holding you back.
+
+The compiler is super fast, which was one of the design goals of the language. Arguably that is not a difficult task to achieve though as the language has virtually no features a compiler needs to actually think about.
+
+## Tooling
+
+Tooling is one of the areas where Go really excels and I have yet to find a comparable language. Many things are opinionated, which I love. There is the default formatter, linter, compiler, etc. Everything simply works and has never stood in the way of coding and getting things done. It was a very refreshing experience, especially after coming from a Electron project where the whole bundling and rest was a real pain to deal with.
+
+#### Cross compilation
+
+Compiling for multiple targets is frankly to easy to be true. You simply pass two environment variables to the compiler and he does the rest. No matter if solaris, arm, mips, windows. It does it all just fine.
+
+```bash
+GOOS=linux GOARCH=arm go build main.go
+GOOS=darwin GOARCH=amd64 go build main.go
+# ...
+```
+
+## What does it feel like to write GO?
+
+I have quite mixed feelings about Go. On one hand the tooling and speed really are compelling advantages. However the language omits too many features in favor of remaining as _lean_ as possible. Having to iterate an array manually just to check if it contains a given element feels really outdated and does not help readability. Also in go using constants is basically unheard of, making code harder to understand and review. Not having optional/default parameters for functions often leads to code duplication as it is way easier to copy paste than to write a "one fits all" function. This is mostly due to the unavailability of generics which make it impossible to write a general `includes(element)` function for arrays of slices for example.
+
+Then again I completely rewrote my CLI tool from scratch in about a week, including cross compiling for multiple platforms while never having touched Go before. That is quite something and not many compiled langauges could have done this. And after getting used to the (many) limitations of the language it's fun to code Go.
diff --git a/src/content/blog/telegram-bots-are-easy.md b/src/content/blog/telegram-bots-are-easy.md
new file mode 100644
index 0000000..8683909
--- /dev/null
+++ b/src/content/blog/telegram-bots-are-easy.md
@@ -0,0 +1,307 @@
+---
+title: 'Telegram bots are easy'
+date: '2019-06-24'
+categories:
+ - 'coding'
+tags:
+ - 'automatization'
+ - 'bot'
+ - 'python'
+ - 'telegram'
+coverImage: './images/arseny-togulev-1513013-unsplash-scaled.jpg'
+---
+
+Recently I've been frustrated with mobile stock apps so I started thinking about solutions. a whole app would have been an unnecessary overkill, after all I just want to get market data about my stocks with some indicators to go along. A perfect use case for a telegram bot!
+
+Today we will have a look at how telegram bots are written and show some base concepts around the platform. We are going to leverage [python-telegram-bot](https://python-telegram-bot.org/) ([latest docs](https://python-telegram-bot.readthedocs.io/en/latest/)).
+
+#### What we will build today:
+
+1. A very simple bot that just replies a picture of a doggo whenever we send `/woof`.
+2. A bot that has **persistence** and will save a list of items we can add.
+3. (bonus round) Dockerize the bot for running it everywhere.
+
+#### Here we go π€
+
+The first thing we need is a bot. To register one you need to talk to the [@BotFather](https://telegram.me/BotFather) (with your normal telegram account). Then simply enter the `[/newbot](tg://bot_command?command=newbot)` command. You will be asked the name and the @handle for your bot. The handle need to end in `bot`.
+After that he will answer with your access token.
+
+
+
+
+
+
+
+Response after successful bot registration
+
+
+
+
+
+## How do bots work?
+
+
+
+
+
+
+
+very badly drawn representation of the bot
+
+
+
+
+
+In its most simple form bots are simple programs that listen to _commands_ send by a user. The cannot initiate a conversation, a user must always message the bot first. After initial contact, the bot can send as many messages as he wants.
+
+Your code connects to the telegram servers and gets notified if new messages/commands have been sent. Then based on the user input your bot can reply with a message, audio, photo or use external services like sending a slack notification, whatever, there are no real limits.
+
+When the user firsts contacts a bot telegram automatically sends a `/start` command which you can use to initialise the bot. When a bot is deleted by a user the corresponding `/stop` command is issued.
+
+## Doggo Bot
+
+We are going to create a virtual environment for the project and install the dependencies. Our starting point will be the basic bot skeleton from which we will fill out the functionality.
+
+Note: we need version 12 of _python-telegram-bot_, as the API changed quite a bit in the previous releases.
+
+```bash
+python3 -m venv env
+source env/bin/activate
+pip install python-telegram-bot==12.0.0b1
+```
+
+```python
+from telegram.ext import Updater, CommandHandler
+
+TOKEN = 'myTelegramBotToken'
+
+def main():
+ updater = Updater(TOKEN, use_context=True)
+ dp = updater.dispatcher
+
+ updater.start_polling()
+ updater.idle()
+
+
+if __name__ == '__main__':
+ main()
+```
+
+Great, now lets write a function to respond to a simple `/ping` message.
+
+```
+// ...
+
+def pong(update, context):
+ update.message.reply_text('Pong')
+
+
+def main():
+ updater = Updater(TOKEN, use_context=True)
+ dp = updater.dispatcher
+
+ dp.add_handler(CommandHandler('ping', pong))
+
+ updater.start_polling()
+ updater.idle()
+
+// ...
+```
+
+When we now send `/ping` to the bot we get a _Pong_ back. Neat!
+
+
+
+
+
+
+
+result of pong message
+
+
+
+
+
+#### But we want doggos! πΆ
+
+```python
+def get_image_url():
+ allowed_extension = ['jpg', 'jpeg', 'png']
+ while True:
+ url = requests.get('https://random.dog/woof.json').json()['url']
+ file_extension = re.search("([^.]*)$", url).group(1).lower()
+ if file_extension in allowed_extension:
+ break
+ return url
+
+
+def woof(update, context):
+ update.message.reply_photo(photo=get_image_url())
+
+
+def main():
+ //...
+
+ dp.add_handler(CommandHandler('ping', pong))
+ dp.add_handler(CommandHandler('woof', woof))
+
+ //...
+```
+
+We define a second command that listens to the `woof` word. Then we have a little helper function that retrieves a url. That url is then passed to the `reply_photo` method and we are done!
+
+We could also pass a [bite-like](https://docs.python.org/3/glossary.html#term-bytes-like-object) object to the `photo` parameter instead of a string containing the url if we would have an actual photo.
+
+
+
+
+
+
+
+reply to woof
+
+
+
+
+
+## Persistence Bot
+
+The doggo bot is a good hello world example, but without persistence a lot of bots would not work. If you want to save something you will need to have some kind of **user base storage**.
+
+For this we will implement a little bot that saved a list of items that a user can add/delete. A bit like a shopping list if you want.
+
+#### Commands
+
+- Add `/add avocados`
+- Delete `/delete avocados`
+- List all `/all`
+- Delete all `/clear`
+
+First the basic setup again. We will import `PicklePersistence` which uses the python _pickle_ object to save the data on your drive. We need to initialise it and pass it to the `Updater` class.
+
+```python
+from telegram.ext import Updater, CommandHandler, CallbackContext, PicklePersistence
+from telegram import Update
+
+TOKEN = 'myTelegramBotToken'
+
+persistence = PicklePersistence('./db')
+
+
+def main():
+ print('Started π')
+ updater = Updater(TOKEN, use_context=True, persistence=persistence)
+ dp = updater.dispatcher
+
+ updater.start_polling()
+ updater.idle()
+
+
+if __name__ == '__main__':
+ main()
+```
+
+Before we beginn lets define 2 helper functions:
+
+```python
+def get_list(context: CallbackContext) -> dict:
+ return context.user_data.setdefault('list', {})
+```
+
+`get_list` will return the object that is unique to every user. The python library generously offers a `user_data` object inside of the `context` parameter that gets passed to each handler. We use `setdefault` in order to get the already present dict of the user or set it to an empty one if undefined.
+
+```python
+def parse_command(update: Update) -> (str, str):
+ key, value = update.message.text.split(' ', 1)
+ return key, value
+```
+
+`parse_command` simply helps us interpret the message of the user. If a user sends us `/add avocado` we only want the _avocado_ part. We simply split at the first space.
+
+Lets finally add all the methods.
+
+```python
+//...
+
+def get_list(context: CallbackContext) -> list:
+ return context.user_data.setdefault('list', [])
+
+
+def parse_command(update: Update) -> (str, str):
+ key, value = update.message.text.split(' ', 1)
+ return key, value
+
+
+def list_add(update: Update, context: CallbackContext):
+ key, value = parse_command(update)
+ get_list(context).append(value)
+ update.message.reply_text('Saved πΎ')
+
+
+def list_delete(update: Update, context: CallbackContext):
+ key, value = parse_command(update)
+ get_list(context).remove(value)
+ update.message.reply_text('Deleted π')
+
+
+def list_all(update: Update, context: CallbackContext):
+ items = get_list(context)
+ update.message.reply_text('\n'.join(items) if len(items) > 0 else 'List empty π’')
+
+
+def list_clear(update: Update, context: CallbackContext):
+ get_list(context).clear()
+ update.message.reply_text('Cleared π§Ό')
+
+
+def main():
+ //...
+
+ dp.add_handler(CommandHandler('add', list_add))
+ dp.add_handler(CommandHandler('delete', list_delete))
+ dp.add_handler(CommandHandler('all', list_all))
+ dp.add_handler(CommandHandler('clear', list_clear))
+
+ //...
+```
+
+
+
+I believe telegram bots can be a great alternative if a full fledged app is an overkill. There are a lot of featured that where not mentioned here, especially custom keyboards.
+
+## Dockerize it
+
+```
+# requirements.txt
+
+python-telegram-bot==12.0.0b1
+```
+
+```docker
+# Dockerfile
+
+FROM python:3.7-slim
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install -r requirements.txt && rm -rf /root/.cache
+
+COPY src .
+CMD ["python", "-u", "/app/Mercatus.py"]
+```
+
+```yaml
+# docker-compose.yml
+
+version: '3.6'
+
+services:
+ bot:
+ build: .
+ restart: unless-stopped
+ command: ['python', '-u', '/app/Mercatus.py']
+ volumes:
+ - ./data.db:/app/data.db
+```
+
+Thats it! I hope you enjoyed the guide. π
diff --git a/src/content/blog/the-essential-no-excuses-security-checklist-for-modern-websites.md b/src/content/blog/the-essential-no-excuses-security-checklist-for-modern-websites.md
new file mode 100644
index 0000000..fa9a3ea
--- /dev/null
+++ b/src/content/blog/the-essential-no-excuses-security-checklist-for-modern-websites.md
@@ -0,0 +1,226 @@
+---
+title: 'The essential no-excuses security checklist for modern websites.'
+date: '2019-09-16'
+categories:
+ - 'security'
+tags:
+ - 'headers'
+ - 'security'
+coverImage: './images/milkovi-kYlYwQze5vI-unsplash-1-scaled.jpg'
+---
+
+The web and its security has come a long way. As always in security there are constantly ways to improve your defences agains bad actors. This is a list of quick and easy, yet powerful tools that all devs should be using.
+
+**Update** _18 Sep 2019 @ 16:02_
+As the reddit user [zfa](https://www.reddit.com/user/zfa/) suggested I included the link to the Mozilla Observatory for automatic auditing.
+
+1. Checklist
+ 1. [HTTPS](#https)
+ 2. [TLS Versions](#tls)
+ 3. [Ciphers](#ciphers)
+ 4. [HSTS](#hsts)
+ 5. [CSP](#csp)
+ 6. [X-Frame-Options](#frame)
+ 7. [X-Content-Type-Options](#content-type)
+2. [Useful Libraries & Tools](#libraries)
+3. [Considerations](#considerations)
+ 1. [Cookies or LocalStorage for JWTs?](#jwt)
+ 2. [Advanced HTTPS practices](#advanced)
+4. [Sources](#sources)
+
+
+
+
+
+
+
+Photo byΒ [MILKOVΓ](https://unsplash.com/@milkovi?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)Β onΒ [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
+
+
+
+
+
+## 1\. HTTPS
+
+Let's start with the most obvious. It's almost 2020 and websites not using HTTPS are simply being irresponsible. There is no reason to run plaintext http in the era of [Letsencrypt](https://letsencrypt.org/) where getting a certificate is **easy and free**. I won't go over how to configure that, there are tons of resources out there and generally its as simple as adding a line in your config file.
+Also redirect all the http traffic to https automatically, basic stuff.
+
+## 2\. TLS Versions
+
+[97.65% of global users](https://caniuse.com/#feat=tls1-1) support TLS version 1.2, so go disable anything below that in your server as it has knows vulnerabilities!
+
+**Configuration**
+
+```
+# Nginx
+ssl_protocols TLSv1.2;
+```
+
+```
+# Apache
+SSLProtocol -all +TLSv1.2
+```
+
+```
+# Traefik
+[entryPoints]
+ [entryPoints.https]
+ [entryPoints.https.tls]
+ minVersion = "VersionTLS12"
+```
+
+## 3\. Ciphers
+
+Similar to the TLS version you should avoid using anything different than AES or ChaCha20. Limit the ciphers to something secure and modern.
+
+**Configuration**
+
+```
+# Nginx
+ssl_prefer_server_ciphers on;
+ssl_ciphers
+'ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256';
+```
+
+```
+# Apache
+SSLCipherSuite
+ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256
+SSLHonorCipherOrder on
+SSLCompression off
+SSLSessionTickets off
+```
+
+```
+# Traefik
+[entryPoints]
+ [entryPoints.https]
+ [entryPoints.https.tls]
+ cipherSuites = [
+ "TLS_ECDHE_RSA_WITH_AES_128_GCM_SHA256",
+ "TLS_ECDHE_RSA_WITH_AES_256_GCM_SHA384",
+ "TLS_ECDHE_RSA_WITH_CHACHA20_POLY1305",
+ "TLS_ECDHE_ECDSA_WITH_AES_128_GCM_SHA256",
+ "TLS_ECDHE_ECDSA_WITH_AES_256_GCM_SHA384",
+ "TLS_ECDHE_ECDSA_WITH_CHACHA20_POLY1305",
+ ]
+```
+
+## 4\. HSTS
+
+Once your website runs on HTTPS it's a good idea to tell the browser not to use HTTP anymore. Thats what the HTTP Strict Transport Security (HSTS) is designed for.
+
+```
+Strict-Transport-Security: max-age=31536000; includeSubDomains
+```
+
+This basically tells the browser to only talk to your domain via HTTPS for the next year. You can exclude the `includeSubDomains` if you want to just target your root.
+
+**Configuration**
+
+```
+# Nginx
+add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
+```
+
+```
+# Apache
+Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains"
+```
+
+## 5\. Content Security Policy (CSP)
+
+This awesome HTTP header is incredibly powerful! It allows you to specify the allowed origins for all kind of files that will be loaded into your website.
+
+The basic idea is: "_Javascript can only be loaded from my domain, images only from the unsplash domain and fonts only are only allowed from google fonts"._
+
+Awesome right? The header for that example would look like this:
+
+```
+Content-Security-Policy: "default-src 'self'; img-src https://unsplash.com/; font-src https://fonts.googleapis.com"
+```
+
+This allows a dev to specify exactly what resources are allowed to load from what domains. Don't worry, you don't need to remember the exact syntax**:**
+**Use the generator**: [https://www.cspisawesome.com/](https://www.cspisawesome.com/)
+
+## 6\. X-Frame-Options
+
+This is a basic one, but it should not be forgotten. It prevents your website to be displayed inside another one. This prevents shit tons of possible attack vectors. Simply set the header and you're done.
+
+```
+x-frame-options: SAMEORIGIN
+```
+
+**Configuration**
+
+```
+# Nginx
+add_header x-frame-options "SAMEORIGIN" always;
+```
+
+```
+# Apache
+header always set x-frame-options "SAMEORIGIN"
+```
+
+## 7\. X-Content-Type-Options
+
+Again, a little header that prevents lots of damage. By setting the Content Type header you prevent the browser from guessing what file contents a downloaded resource is. Basically if `/image.jpeg` is actually a `.js` file the browser would still run it if you don't set the header
+
+```
+x-content-type-options: nosniff
+```
+
+**Configuration**
+
+```
+# Nginx
+add_header x-content-type-options "nosniff" always;
+```
+
+```
+# Apache
+header always set x-content-type-options "nosniff"
+```
+
+## Libraries & Tools
+
+#### Tools
+
+For some automatic auditing of your website you can use the excellent [Mozilla Observatory](https://observatory.mozilla.org/) tool. You can scan a domain and receive information on Header & TLS.
+
+#### Libraries
+
+For a lot of this headers there are some good libraries for automating this which already have good default values, so most of them are plug and play.
+
+
+
+## Considerations
+
+I did not talk about the XSS header, since it's not supported at all in Firefox and Chromium will remove it in the near future, so I think it gives a false sense of security to devs not being vulnerable to XSS if they set the header.
+
+Also I did not touch on the new Feature Policy header wich is currently being drafted. It's very cool and will help a lot in the future. It allows websites to specify what features should be allowed to run, so e.g. if my site does not need the accelerometer just turn it off. That way no 3rd party code is able to access it. Very nice addition, but at the time of writing it's still very alpha and basically not supported.
+
+### Where to store JWTs?
+
+Most websites nowadays make use of JWTs for the authentication. A common question people have is: Where do I store my token? Cookies or LocalStorage? **TLDR: LocalStorage.**
+
+The general knowledge is that LocalStorage is not vulnerable to CRFS and Cookies not to XSS. However as the reddit user [Devstackr](https://www.reddit.com/user/Devstackr/) described [here](https://www.reddit.com/r/reactjs/comments/cubfsa/local_storage_vs_cookies_authentication_tokens/) if you have a XSS vulnerability also your authentication via cookie is compromised, as the injected code can do requests on behalf of the authenticated user.
+
+So while your token cannot be directly stolen from the victim, the attacker can still do everything, including changing the password for example. Additionally you don't need to worry about CRFS at all, which is a huge bonus.
+
+### Advanced Practices
+
+Large websites should additionally consider the following security features:
+
+- Certificate Authority Authorization (CAA) DNS record which specifies what CA is allowed to sign certificates for the served domain.
+- HTTP Public Key PinningΒ (HPKP) provides the option to validate the certificate via DNS record. If misconfigured this can break you entire site, so use carefully!
+
+## Sources / Further reading
+
+- [https://www.keycdn.com/blog/http-security-headers](https://www.keycdn.com/blog/http-security-headers)
+- [https://www.youtube.com/watch?v=-DNNlBYIyxQ](https://www.youtube.com/watch?v=-DNNlBYIyxQ)
+- [https://helmetjs.github.io/](https://helmetjs.github.io/)
+- [https://www.acunetix.com/blog/articles/tls-ssl-cipher-hardening/](https://www.acunetix.com/blog/articles/tls-ssl-cipher-hardening/)
+- [https://www.cspisawesome.com/](https://www.cspisawesome.com/)
+- [https://observatory.mozilla.org/](https://observatory.mozilla.org/)
diff --git a/src/content/blog/the-powerful-es6-proxy-object.md b/src/content/blog/the-powerful-es6-proxy-object.md
new file mode 100644
index 0000000..a1aac5a
--- /dev/null
+++ b/src/content/blog/the-powerful-es6-proxy-object.md
@@ -0,0 +1,105 @@
+---
+title: 'The powerful ES6 proxy object'
+date: '2019-05-31'
+categories:
+ - 'coding'
+tags:
+ - 'es6'
+ - 'javascript'
+ - 'proxy'
+coverImage: './images/alina-grubnyak-1254785-unsplash-scaled.jpg'
+---
+
+Today: yet another ES6 feature that I think most people don't know about.
+
+> "TheΒ **Proxy**Β object is used to define custom behavior for fundamental operations (e.g. property lookup, assignment, enumeration, function invocation, etc)."
+>
+> [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
+
+Let's dive right in! πββοΈ
+
+#### Basic example:
+
+```tsx
+const handler = {
+ get: (obj, key) => (key in obj ? obj[key] : 42),
+}
+
+const proxy = new Proxy({ a: 1 }, handler)
+
+console.log(proxy.a, proxy.b) // 1 42
+```
+
+We start with a plain object `{a: 1}` and we assign it a handler. Our handler intercepts the `get` statement of a normal object and we can define our own custom logic for it. In this case we return the value if it exists, otherwise a 42.
+
+We can se that calling `proxy.b` will output the 42, as it is not set in the root object.
+
+## The handler
+
+The second argument of the Proxy function is what is called the **handler**. This is simply an object with functions that define the logic of the operations, which are called **traps** (as they get triggered). The available traps are as follows:
+
+- get
+- set
+- has
+- deleteProperty
+- ownKeys
+- apply
+- construct
+
+There are a few more, but these are the basic ones. Here is the [full list](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy#Methods_of_the_handler_object).
+
+#### Some practical examples
+
+```tsx
+var handler = {
+ set: (obj, key, value) => {
+ if (key === 'wheels')
+ if (!Number.isInteger(value) || value % 2 !== 0) throw new Error('Wheels need to come in pairs')
+ obj[key] = value
+ },
+}
+
+// π
+var car = new Proxy({}, handler)
+
+car.wheels = 4
+car.wheels = 3 // Throws an error
+```
+
+Here we can see that we can define constrains for the setter. In this case we say that the key `wheels` needs to be and integer and a multiple of 2. This is a trivial example, but we can imagine how useful this can be with forms.
+
+```tsx
+const validators = {
+ username: /^[A-z]{3,}$/,
+ password: /(?=.*[\d]).{8,}/,
+}
+
+const handler = {
+ set: (obj, key, value) => {
+ if (key in validators && validators[key].test(value)) obj[key] = value
+ else throw new Error('Invalid input')
+ },
+}
+
+const form = new Proxy({}, handler)
+
+form.username = 'abc'
+form.username = 'this contains spaces' // -> Error
+
+form.password = 'atleast1digit'
+form.password = 'withoutanydigitthiswillthrowanerror' // -> Error
+
+form.something = true // -> Error, since it does not exist in the validator object
+```
+
+In this example we can validate an object from a form for example. We have a validator object that contains some regex. The Proxy then only allows keys that are inside of the validator and only if they pass the corresponding regex. Vary handy π
+
+## In real life
+
+This only available in ES6 (ES2015) but ~92% of the browsers [support it](https://caniuse.com/#feat=proxy). Some real life applications that make use of this are [MobX](https://github.com/mobxjs/mobx) (since v5.0).
+
+In MobX this allows the developer to skip the tedious `mapStateToProps` and `mapDispatchToProps` and just let MobX handle it. Since with the help of proxies MobX can know what parts of the state are being used by listening on the `get` trap of the state and can then only render the components when the props they are using in the `render()` function are being used.
+
+There a small package that does the same for the redux world: [https://github.com/dai-shi/reactive-react-redux](https://github.com/dai-shi/reactive-react-redux)
+
+I hope this helped and was interesting! π
diff --git a/src/content/blog/use-traefik-and-regexp-to-bypass-adblockers.md b/src/content/blog/use-traefik-and-regexp-to-bypass-adblockers.md
new file mode 100644
index 0000000..fa6a55c
--- /dev/null
+++ b/src/content/blog/use-traefik-and-regexp-to-bypass-adblockers.md
@@ -0,0 +1,76 @@
+---
+title: 'Use Traefik and RegExp to bypass AdBlockers'
+date: '2022-01-10'
+coverImage: './images/hyeryi-sVk8nrCQ06g-unsplash-scaled.jpg'
+categories:
+ - 'general'
+ - 'security'
+tags:
+ - 'ad-blocker'
+ - 'tracking'
+ - 'traefik'
+ - 'umami'
+---
+
+**This will be a controversial one, so let me explain the motivations first.**
+
+I was using Matomo for collecting traffic metrics on different websites, however it's kind of bloated for what I need to do. My goal is to get a grasp on viewership, **without collecting personal data** or any fancy analytics. I wanted to try out Umami as it seems simple and is privacy respecting first (including GDPR), without the need to tweak settings.
+
+The problem was that my AdBlocker was not letting request through and since most of the people visiting this site will probably devs they surely have some AdBlocker installed.
+
+**FYI**: All the data collected on this site are accessible and visible to anyone [here](https://spectare.nicco.io/share/Xklie3UU/Nicco).
+
+## The issue
+
+Lets have a look at the typical Umami code:
+
+```html
+
+```
+
+The problem is that most block list have `umami.js` on it, which make measuring anonymous traffic impossible. Now blocklists are very static (for performance reasons) and therefore quite easy to circumnavigate.
+
+## Rerouting
+
+What do you do when the street you are driving on is blocker? You take the detour.
+
+The solution is not to use `umami.js` directly, but redirect it form another name. With traefik this is very easy using the [ReplacePathRegex middleware](https://doc.traefik.io/traefik/v2.0/middlewares/replacepathregex/). Let's see how:
+
+```yaml
+version: '3.8'
+
+networks:
+ proxy:
+ external: true
+
+services:
+ umami:
+ image: ghcr.io/mikecao/umami:postgresql-latest
+ networks:
+ - default
+ - proxy
+ labels:
+ - traefik.enable=true
+ - traefik.http.routers.umami.rule=Host(`spectare.nicco.io`)
+ - traefik.http.routers.umami.entrypoints=secure
+ - traefik.http.routers.umami.tls.certresolver=le
+ - traefik.http.routers.umami.middlewares=umami-rewrite
+ - traefik.http.middlewares.umami-rewrite.replacepathregex.regex=/unicorn.js
+ - traefik.http.middlewares.umami-rewrite.replacepathregex.replacement=/umami.js
+
+ db:
+ image: postgres:12-alpine
+ ...
+```
+
+We need to configure the `regex` and `replacement` parameters for the `replacepathregex` middleware. In my case I chose to use `/unicorn.js` and redirect it internally to `/umami.js`. This way the internal service is doing business as usual while ad blockers do not block the request.
+
+## Responsibility
+
+As you can imagine this would enable far more nefarious use cases. You could also mask it as something like `23hf872.min.js` or whatever. So use with caution and **always keep in mind your users privacy and data!**
diff --git a/src/content/blog/why-i-love-js-but-sometimes-i-feel-we-shoot-ourself-in-the-foot.md b/src/content/blog/why-i-love-js-but-sometimes-i-feel-we-shoot-ourself-in-the-foot.md
new file mode 100644
index 0000000..17f6da2
--- /dev/null
+++ b/src/content/blog/why-i-love-js-but-sometimes-i-feel-we-shoot-ourself-in-the-foot.md
@@ -0,0 +1,38 @@
+---
+title: 'Why I love JS but sometimes I feel we shoot ourself in the foot.'
+date: '2020-05-29'
+categories:
+ - 'general'
+tags:
+ - rant
+---
+
+Let's start by saying this: I absolutely love JS & Typescript, they are my favourite languages and I would not want to live without them.
+
+Now that being said, whenever I look at Go or Python for example the quality of packages cannot be compared. This is I feel the biggest weakness of the JS ecosystem and is frustrating because it could be so much better.
+
+## Quality vs Quantity
+
+Basically this is my main problem with the ecosystem. Whenever we look at other languages generally speaking there is one, maybe two packages for each use case they are trying to solve. And there is a consensus inside of that coding community what the preferred tools should be.
+
+In the NPM world there are always what feels like never ending alternatives that try to solve the same problems over and over again.
+
+So an economist might think: "Why is this bad? Competition is always good as it leads to innovation when compared to a monopoly". While this is true in a market I feel it does not reflect perfectly in the world of NPM and open source projects where anyone can contribute and influence decisions and directions taken by a specific piece of software/package.
+
+What is the consequence of this? Many abandoned, half-finished packages that need to be rewritten every now and then only to be left unmaintained again. Let the cycle repeat itself...
+
+## Bundle work! Don't disperse it
+
+What if instead of reinventing the wheel over and over again we tune the wheel we have so that it becomes the best, most versatile wheel for everyone. Fragmentation is always a huge amount of work and leads to half-backed projects that always have some downsides. From that downside a new project is born and again, the cycle continues.
+
+## It's confusing for everyone and especially for beginners
+
+Ok so lets say I need to do some API calls in my node server. Of course I'm not going to use the native API because it's low level and not very readable. So what do I choose? Do I install `axios` or `node-fetch`, maybe `request`? What about `isomorphic-fetch`? Or `superagent`?
+
+This is a perfect example of the issue. They all try to solve the same very basic thing, in 5 different ways. Why cannot we have 1 or maybe 2? What if we could simply have the de facto library that does it all?
+
+Some time ago a friend coming from Python asked me that question and I could not give him an answer. He was visibly confused. In python there is no discussion really: you install `requests` and it will support 99.9% of use cases anyone will ever have. And if something is missing it will be added. Simple.
+
+Same thing with bundlers. `webpack`, `parcel`, `rollup` and now `snowpack`. Why?! Don't get me wrong, I'm sure all of them have some incredible smart engineering behind it, but what is the need of splitting the knowledge and not combine it to make something greater?
+
+I would just wish that JS people could start to converge on some best practices to ease the life of everyone developing in this ecosystem.
diff --git a/src/content/blog/why-i-think-svelte-is-the-next-big-thing-a-reacts-lover-view.md b/src/content/blog/why-i-think-svelte-is-the-next-big-thing-a-reacts-lover-view.md
new file mode 100644
index 0000000..b33bcc9
--- /dev/null
+++ b/src/content/blog/why-i-think-svelte-is-the-next-big-thing-a-reacts-lover-view.md
@@ -0,0 +1,180 @@
+---
+title: 'Why I think svelte is the next big thing: a reacts lover view'
+date: '2020-10-29'
+categories:
+ - 'coding'
+tags:
+ - 'react'
+ - 'svelte'
+coverImage: './images/alessandra-caretto-cAY9X4rPG3g-unsplash.jpg'
+---
+
+The first thing I thought when I heard there is this new framework called "Svelte" was: F\*\*\* no, please, not again. Why? Why do we need yet another framework ffs. React is amazing, don't try to reinvent the wheel.
+
+I was so wrong...
+
+So maybe one of you is thinking the same thing. Why [Svelte](https://svelte.dev/)? What is all the fuzz about? Well.... let me tell you π
+
+This is not a tutorial, for that check the amazing [official tutorial](https://svelte.dev/tutorial/basics) which teaches you everything from the basics to more advanced stuff.
+
+Why is there a wheel? Well quite simply: Svelte IS reinventing the wheel.
+You see: what are most of the frameworks doing nowadays? They provide a way to code user interfaces with a component approach. This makes a lot of sense because we can reuse them, they are boxed items that stand for them self. Modularizing and splitting up concerns make big apps easier to write and afterwards maintain.
+
+What sets Svelte apart from a tecnical standpoint ist that it's foremost a compiler as opposed to a runtime like React or Vue. What does it mean? It means that all the reactivity is done at compile time and not in the browser. Svelte knows before hand what property can change and what doesn't. That's very powerful.
+
+## Easy of use and simplicity
+
+This in my opinion might be the biggest driver for svelte. The [official tutorial](https://svelte.dev/tutorial/basics) is great and well thought out. What stood out to me was how easy it was for non web people I know to get up and running in the matter of a day.
+Simplicity is really hard however Svelte abtracts everything you need away and breaks it down to simple `html`, `js` and `css`. The learning curve is... well more like a flat line you just need to step on.
+
+## Taking the fun back to the web
+
+Personally the greatest feat Svelte achieves is staing out of the way while supporting you, the developer in everything you need to do. It is never in the way, it always makes your life easier.
+
+### Vue and React had a child
+
+It is very clear that Svelte was inspired by both React and Vue picking the best features of both worlds. This is probably why Svelte is so amazing. It has the luxury to build on years of experience of what works, and what does not.
+
+Inspired by React:
+
+- Components are JS Objects
+
+Inspired by Vue:
+
+- 2 Way binding
+- Syling
+- Making ecosystem first party
+- Single file components
+
+Moslty "Unique" features:
+
+- Class toggles
+- Stores
+
+## Styling
+
+Styling in react sucks. There is no way around it. In Vue that problem is solved by simply having scoped css built-in. No need for preprocessors, since we have CSS Variables and namespacing is no longer an issue.
+
+```svelte
+
+
+
+
+
{title}
+
+
+ Virtues sexuality philosophy law chaos society evil strong self christianity sexuality truth. Revaluation convictions decrepit snare passion oneself decieve oneself. Right suicide grandeur fearful play. Right joy merciful transvaluation good truth derive evil contradict intentions. Self salvation faithful disgust marvelous transvaluation aversion.
+
+
+Generate more!
+```
+
+No need to worry that our styles will affect some other stuff and we don't need to pass around classNames from other files.
+
+## Single File Components
+
+`.svelte` files are just like `.vue` files and they contain everything: code (`js`/`ts`), markup (`html`) and styling (`css`). No need to separate files for styling which bloats every React project that does not want to rely on css-in-js which in my opinion is just garbage.
+
+## 2 way binding
+
+This alone will save you tons of time and makes implementing stuff more intuitive and fun.
+
+```svelte
+
+
+
+
+```
+
+Yes, it will sync the UI to the variables, but both ways. In react you need to either use some 3rd party lib or juggle `value` and `onChange` events.
+
+This also works for parent - child props, so no need to write verbose update functions to be called from the children. Everyone hates those.
+
+## Stores
+
+So I truly hate Redux. It is the reason I've quit companies and unfortunately it is the way to go in react. In svelte we have build it stores and they are simply put: amazingly powerful and easy.
+
+```svelte
+// store/todos.js
+import { writable } from 'svelte/store'
+import axios from 'axios'
+
+export const data = writable([])
+
+export async function load() {
+ const { data: d } = await axios({
+ method: 'get',
+ url: '/api/todos/',
+ })
+ data.set(d)
+}
+```
+
+```svelte
+
+
+{#each $data as todo}
+
+{/each}
+```
+
+With a simple `$` in front of a store svelte will update the UI according to the store content. And we simply update it. No complex bootstrapping with context, dispatcher, acitons and so on.
+
+## Class toggles
+
+This is a feature I use all the time and it is just so useful. You can basically bind a value to toggle a css class, in this case `done`. No need to to string magic or, again, import some 3rd party module to manage our class names.
+
+```svelte
+
+
+
+
+
+ Some task
+
+```
+
+## First party support
+
+Another thing that I cannot stand in React and Svelte does right in my opinion is that in the react world everything is basically up to the community. Even the typing! That means that while there is more choice in theory, in practise it leads to a fragmented unmaintained ecosystem.
+
+The Svelte is not afraid of incorporating tools from the community into the officials repos. I strongly believe that it is in everybodies interest that tooling and core functionality should always be first party code. Much like Vue does it.
+
+## Concluding thoughts
+
+First of all lets all thank Rich Harris which is the creator of Svelte.
diff --git a/src/content/blog/write-cross-browser-extensions-without-the-tears.md b/src/content/blog/write-cross-browser-extensions-without-the-tears.md
new file mode 100644
index 0000000..8aa12ea
--- /dev/null
+++ b/src/content/blog/write-cross-browser-extensions-without-the-tears.md
@@ -0,0 +1,199 @@
+---
+title: 'Write cross browser extensions without the tears'
+date: '2021-12-28'
+categories:
+ - 'coding'
+tags:
+ - 'web-extension'
+coverImage: './images/markus-spiske-8CWoXxaqGrs-unsplash-scaled.jpg'
+---
+
+Today I want to cover the process of developing browser extensions, from start to finish and submission to the chrome and firefox stores.
+According to Apple the new Safari will have better support for extensions, but as for now (Dec. 2021) this is not the case so we will focus on Firefox and Chromium based browsers.
+
+This guide and the examples will be based on [Ora](https://github.com/cupcakearmy/ora), a web extension I wrote for both Firefox and Chrome.
+
+We will not touch on the [controversial](https://www.eff.org/deeplinks/2021/12/chrome-users-beware-manifest-v3-deceitful-and-threatening) manifest version 3. We'll stick to version 2.
+
+## The Basics
+
+Let's dive right in! A browser extensions is basically a series of small "websites". Logic is written in Javascript, styled in CSS, etc. This also means that we can use Vanilla JS, React, Svelte, whatever you prefer.
+
+There are mainly 3 types of content you need to know.
+
+1. **Content scripts**
+ These are files that you will be injected into existing tabs of the user. This can be `CSS` or `JS` files. They live on a tab level.
+2. **Background scripts**
+ Here we have files that will run in the background, in a separate thread. They are not bound to any tab/window and have basically the same runtime as the browser itself. These are only `JS` scripts.
+3. **Normal websites for your extension**
+ As we will se later, files inside your extensions will be served as if it was a server, so here you will code you settings page, dashboard and everything else. These are `HTML`, `CSS`, `JS`, images, etc. You name it.
+ Often this will be an options page, or a dashboard.
+
+Almost everything I learned about browser extensions I learned from the [MDN Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions), they are amazing! If you are stuck this should be the first point to look.
+
+## The Manifest
+
+The first thing you'll need to know is a file called `manifest.json`.
+Here you will define all the contents, permissions, icons, name, etc. It's the entry point to your app. It's where your high level configuration lives.
+
+```json
+{
+ "manifest_version": 2,
+ "name": "Ora",
+ "version": "0.8.1",
+ "description": "See how much time you spend on each website and set limits"
+}
+```
+
+## Icons
+
+Every extensions has an icon. They are defined in the `manifest.json`.
+
+`[icons](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/icons)` is for the general icon, in the settings menu e.g.
+`[browser_action](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action)` is for the icon you'll see in the browser interface. Optionally you can specify `theme_icons` for dark mode support.
+
+As a general rule you can always specify different sizes, but in my experience the easiest method is to just use a good high res (256 or 512px) png. SVGs support is quite hit or miss, would not recommend it.
+
+Here I chose the same 512px png for both the extension and the interface.
+
+```json
+{
+ "manifest_version": 2,
+ ...
+ "icons": {
+ "512": "icons/watch.png"
+ },
+ "browser_action": {
+ "default_icon": {
+ "512": "icons/watch.png"
+ },
+ "default_title": "Ora Dashboard",
+ "theme_icons": [
+ {
+ "light": "./icons/watch.png",
+ "dark": "./icons/watch-alt.png",
+ "size": 512
+ }
+ ]
+ }
+}
+```
+
+## Permission
+
+Browser extensions are really powerful, but need to request permissions to unlock that power. Most of them you'll find on your way but the most common are `` for injecting scripts/styles into every page. another common one would be `tabs` to be able to get information on all tabs.
+
+Try to keep permissions to the minimum possible and not request stuff you don't need. Permissions are listed when installing the extensions all at once, unlike on a phone where there is a prompt.
+
+For ora I needed `` to inject scripts to block a website when the time limit was reached, `tabs` to count the time spent on websites and `unlimitedStorage` & `storage` for saving all that data.
+
+```json
+{
+ "manifest_version": 2,
+ ...
+ "permissions": ["", "tabs", "unlimitedStorage", "storage"]
+}
+```
+
+## Toolchain
+
+We all hate it, bundlers, framework setup, etc. I will try to give you the most basic, painless setup. And by far that is a setup using `[parcel.js](https://parceljs.org/)`.
+
+They have official [support for browser extensions](https://parceljs.org/recipes/web-extension/)! And it works really well.
+I would write some little guide, but TBH it would just duplicate their docs so I will just point you to the [official documentation](https://parceljs.org/recipes/web-extension/) which explains the steps perfectly.
+
+The cool thing about parcel is that we use the `manifest.json` as entry point and just point to the sources we want to use inside of that. Parcel does the rest of the magic.
+
+```json
+{
+ "manifest_version": 2,
+ ...
+ "background": {
+ "scripts": ["./src/background/index.ts"]
+ },
+ "content_scripts": [
+ {
+ "matches": [""],
+ "run_at": "document_start",
+ "js": ["./src/content/index.ts"]
+ }
+ ]
+}
+```
+
+As you can see above we just use `ts` typescript files in our manifest and parcel will compile them for us. And those typescript files can include React, Svelte, whatever framework and it will just work. Amazing π
+
+For svelte you'll need to add the [typescript transformer](https://github.com/orlov-vo/parcel-transformer-svelte). React works out of the box.
+
+## Cross browser support without tears
+
+For this we need to thank the good folks over at Mozilla. They created [webextension-polyfill](https://github.com/mozilla/webextension-polyfill).
+
+```ts
+import browser from 'webextension-polyfill'
+
+const tabs = await browser.tabs.query({ active: true })
+```
+
+Just like that you will have code that will work in both Chrome and Firefox 99% of the time. This can be used in background scripts, client scripts and standalone pages.
+
+## Building
+
+```json
+{
+ ...
+ "scripts": {
+ "dev": "parcel watch --target dev --no-hmr ./manifest.json",
+ "build": "parcel build --target prod ./manifest.json",
+ "dist": "run-s clean build pack:*",
+ "pack:zip": "zip -r ./ora.zip dist/prod/*",
+ "pack:ff": "web-ext build -s dist/prod --overwrite-dest"
+ },
+ "targets": {
+ "dev": {
+ "sourceMap": {
+ "inline": true,
+ "inlineSources": true
+ }
+ },
+ "prod": {}
+ },
+}
+```
+
+This is the `package.json` of Ora. How is the extension built?
+
+1. Parcel bundler builds the raw web files, copies images, etc to the `./dist/prod` folder.
+2. For Chrome we only need to zip it with `zip -r ./ora.zip dist/prod/*`.
+3. For Firefox we use the mozilla own `[web-ext](https://github.com/mozilla/web-ext/)` tool with `web-ext build -s dist/prod --overwrite-dest`.
+ This results into a `web-ext-artifacts/ota-0.8.1.zip` file.
+
+## Distributing
+
+Now you can upload the normal zip file to the chrome web store after paying a one time 5$ fee and the web ext artefact to the mozilla add-on page.
+
+Mozilla also requires for minified apps (which this one is) to also submit sources. Just zip the source code (without node_modules) and upload them along the minified one.
+
+## Common use cases
+
+I also want to add a few notes on common use cases that every extensions uses.
+
+### Communication between content, background and other scripts.
+
+The `[postMessage](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage)` API is the way to go. It's basically like IPC in the sense that you can send any serializable content from and to any of your scripts while listening for an answer.
+
+### Storage / Persistence
+
+Here you have a lot of options. The easiest way that works for most cases is using the `[storage](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage)` API. Here you get access to `local` and `sync` storage interfaces. `local` is.. well local and `sync` is synced between browsers if the user is logged in. Choose whatever suits you best.
+
+Another options, which is more powerful for more complex and data hungry is using something like `[Dexie.js](https://dexie.org/)` on top of IndexedDB. This is a full NoSQL kind of local database. A good options for data intensive extensions.
+
+### Shortcuts
+
+You can easily add keyboard shortcuts to your browser extension with the `[commands](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/commands)` entry in the `manifest.json`. This has the added benefit that browsers provide an interface where users can customize them.
+
+A little exception for opening the popup with a keyboard shortcut can be achieved with the `_execute_browser_action` command.
+
+## Final thoughts
+
+A browser extension is very fun project for a free Sunday and I'd recommend everyone to try it out, it's easier than you might think!
diff --git a/src/content/blog/write-your-own-drone-plugin-from-scratch.md b/src/content/blog/write-your-own-drone-plugin-from-scratch.md
new file mode 100644
index 0000000..ed90cfa
--- /dev/null
+++ b/src/content/blog/write-your-own-drone-plugin-from-scratch.md
@@ -0,0 +1,157 @@
+---
+title: 'Write your own drone plugin from scratch'
+date: '2019-05-25'
+categories:
+ - 'coding'
+tags:
+ - 'cd'
+ - 'drone'
+ - 'guide'
+ - 'plugin'
+ - 'python'
+coverImage: './images/asoggetti-418839-unsplash-scaled.jpg'
+---
+
+Recently Drone released it 1.0 version update. It came with a cleaner and more useful UI and a new structure for declaring the YAML drone pipelines files. Perfect time for writing our own drone plugin. π
+
+**TL;DR** Get the code: [https://github.com/CupCakeArmy/drone-deploy](https://github.com/CupCakeArmy/drone-deploy)
+
+This should be a starting point to guide you in the right direction towards writing your first drone plugin. **It's easier than it might seems**. Let's go π
+
+#### What do we want to achieve?
+
+- Login with an ssh key from drone secrets
+- copy files to a remote location
+- execute remote commands
+
+## How are Drone Plugins written?
+
+Very simple actually: **drone plugins are nothing more than a docker image**. The process is as follows:
+
+1. The code gets mounted inside your image at \`/drone/src\`
+2. You make slack api calls, deploy, whatever you want.
+
+Since the source is mounted inside a container you can use **whatever language you prefer**! Cool. For this small project I decided to go with Python, but you could use node, go, whatever runs inside Docker.
+
+First lets look how a plugin is defined inside the `.drone.yml` file.
+
+```yaml
+kind: pipeline
+name: default
+
+steps:
+ # build...
+
+ - name: deploy
+ image: you/your-drone-plugin # public docker image
+ settings:
+ host: example.org
+ user: root
+ password: h4x0rz
+```
+
+**How do we get those variables?** Drone mounts them as environment variables inside the plugin container prefixed by `PLUGIN_`.
+So `host: example.org` becomes `$PLUGIN_HOST=example.org` and so forth.
+
+###### In Python
+
+```python
+def main():
+ host = os.environ.get('PLUGIN_HOST')
+ port = os.environ.get('PLUGIN_PORT', 22)
+ user = os.environ.get('PLUGIN_USER')
+ password = os.environ.get('PLUGIN_PASSWORD')
+ key = os.environ.get('PLUGIN_KEY')
+
+main()
+# example.org
+# 22
+# root
+# h4x0rz
+# None
+```
+
+**How do I get secrets?** We need to use the `from_secret` syntax. Supposing you have saved your private key as a repository secret under `ssh_key` the example would look as follows:
+
+```yaml
+- name: deploy
+ settings:
+ key:
+ from_secret: ssh_key
+```
+
+Easy π**What about arrays**? We want to copy a list of sources to the server.
+
+```yaml
+- name: deploy
+ settings:
+ sources:
+ - ./public
+ - docker-compose.yml
+```
+
+This will result into `PLUGIN_SOURCES=./public,docker-compose.yml`. Basically we get a comma-separated-string.
+
+```yaml
+# Takes a string, splits it at the comma and removes empty elements
+def clean_array(s: str) -> List[str]:
+ return list(filter(None, s.split(',')))
+
+sources = clean_array(os.environ.get('PLUGIN_SOURCES', ''))
+```
+
+## Putting it all together
+
+```python
+import paramiko
+
+def execute(c: SSHClient, cmd: str, path: str = None, env:dict = None) -> str:
+ if path is not None:
+ cmd = 'cd {}; {}'.format(path, cmd)
+ stdin, stdout, stderr = c.exec_command(cmd, environment=env)
+ return stdout.read().decode('utf-8').strip()
+
+
+def main():
+
+ # Takes a string, splits it at the comma and removes empty elements
+ def clean_array(s: str) -> List[str]:
+ return list(filter(None, s.split(',')))
+
+ host = os.environ.get('PLUGIN_HOST')
+ port = os.environ.get('PLUGIN_PORT', 22)
+ user = os.environ.get('PLUGIN_USER')
+ password = os.environ.get('PLUGIN_PASSWORD')
+ key = os.environ.get('PLUGIN_KEY')
+ target = os.environ.get('PLUGIN_TARGET')
+ commands = clean_array(os.environ.get('PLUGIN_COMMANDS', ''))
+ sources = clean_array(os.environ.get('PLUGIN_SOURCES', ''))
+
+ ssh = paramiko.SSHClient()
+ try:
+ k = paramiko.RSAKey.from_private_key(io.StringIO(key))
+ ssh.set_missing_host_key_policy(paramiko.AutoAddPolicy())
+ ssh.connect(hostname=host, username=user, pkey=k, port=port, password=password)
+
+ sftp = ssh.open_sftp()
+ try:
+ # Upload the files
+ # for file in file....
+ sftp.put(archive_local, archive_remote)
+ finally:
+ sftp.close()
+
+ for command in commands:
+ output = execute(ssh, command, target, envs)
+ print(command)
+ print(output)
+
+ finally:
+ ssh.close()
+```
+
+This of course simplifies the code a lot, but should give a general idea how it's done.
+
+For a full fledged example check out the repo: [https://github.com/CupCakeArmy/drone-deploy](https://github.com/CupCakeArmy/drone-deploy)
+
+Enjoy! π
diff --git a/src/content/config.ts b/src/content/config.ts
new file mode 100644
index 0000000..9c24dfd
--- /dev/null
+++ b/src/content/config.ts
@@ -0,0 +1,26 @@
+import { defineCollection, z } from 'astro:content'
+
+const blog = defineCollection({
+ type: 'content',
+ // Type-check frontmatter using a schema
+ schema: ({ image }) =>
+ z.object({
+ title: z.string(),
+ description: z.string().optional(),
+ // Transform string to Date object
+ date: z.coerce.date(),
+ updatedDate: z.coerce.date().optional(),
+ coverImage: image().optional(),
+ tags: z.string().array().default([]),
+ }),
+})
+
+const page = defineCollection({
+ type: 'content',
+ schema: z.object({
+ title: z.string(),
+ date: z.coerce.date(),
+ }),
+})
+
+export const collections = { blog, page }
diff --git a/src/content/images/about.webp b/src/content/images/about.webp
new file mode 100644
index 0000000..4eb4947
--- /dev/null
+++ b/src/content/images/about.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:71a2c44560dcfe4896ee9da04a8c7f5116aab137707141bd9226b636a57e09af
+size 211186
diff --git a/src/content/images/home.png b/src/content/images/home.png
new file mode 100644
index 0000000..39b7f55
--- /dev/null
+++ b/src/content/images/home.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:504713159b7a670ceaddcbac590e6c5cbbb0e3141c1e57bdba59636f39a3ec4c
+size 4568347
diff --git a/src/content/page/about.mdx b/src/content/page/about.mdx
new file mode 100644
index 0000000..0506d86
--- /dev/null
+++ b/src/content/page/about.mdx
@@ -0,0 +1,63 @@
+---
+title: 'About'
+date: '2020-09-21'
+---
+import SkillBar from '../../components/SkillBar.astro'
+import AboutImage from '../../components/AboutImage.astro'
+
+Hi, I'm Nicco
+
+I've been doing programming things and "You do computer science right? Can you fix my printer?" for a while now.
+My home is mainly the web, but I wander down many paths of computer science, wherever Ecosia and curiosity bring me that day.
+
+
+
+
+
+
+
+## Today
+
+I do a lot of Typescript, but I always try new things that come up on the interwebs and while most of them turn out to be hype, some are real gems.
+
+**A list of some "skills" (Pros)**
+
+- Frontend
+ - React, Vue & Svelte for Web apps, landing pages, etc.
+ - Typescript lover
+ - Electron multiplatform _macOS/Linux/Windows_ apps.
+ - Mobile apps for _iOS_ and _Android_, mostly in React Native.
+- CI/CD
+ - I've written plug-ins for _Drone_
+ - Docker multi stage build, etc.
+ - Pipelines for testing & deployments of various projects/apps
+ - Github actions
+- Backend
+ - Serverless backends (in _AWS_)
+ - Postgres/Maria/Mysql/Mongo experience.
+ - Python server
+ - Go CLI utilities
+ - Web scraping
+- Clouds I've deployed production services
+ - AWS
+ - GCP
+
+**And stuff I suck at (Cons)**
+
+- Testing, hate it.
+- Love rewriting stuff from ground up.
+- Probably much more...
+
+## History
+
+It all started when I turned the Google website pink with the dev tools in IE7 and thought I hacked google only to reload the website and discover that (of course) it was only local.
+
+That got me onto HTML & CSS and super vanilla JS.
+Then of course came PHP it all it's glory which was the revelation for me.
+I could write servers! OMG! Wait.. where to save that data?
+"MySQL joined the chat" and along came some shady phpMyAdmin interfaces where we designed some databases and wrote SQL queries in plain strings always reminding ourselves to sanitise everything.
+Remember kids: before our friendly Docker whale was a thing and we all installed XAMPP on our local machines with the (i believe still today) in beta Sublime Text 3. Good stuff.
+
+The rest... well I have a bad memory π
+
+
diff --git a/src/content/page/privacy.md b/src/content/page/privacy.md
new file mode 100644
index 0000000..9cafac5
--- /dev/null
+++ b/src/content/page/privacy.md
@@ -0,0 +1,28 @@
+---
+title: 'Privacy'
+date: '2020-09-24'
+---
+
+### TLDR;
+
+- There is no personal data collected.
+- No data is or will be passed to any third party.
+- All the traffic data is publicly available [here](https://spectare.nicco.io/share/Xklie3UU/Nicco).
+
+## Privacy Policy
+
+### What data is collected
+
+We do not collect any personally identifiable information and anonymizes all data collected. Users cannot be identified and are never tracked across websites. Our analytics do contain any tracking code.
+
+### What is the data used for
+
+We aggregate statistics for analysing website usage. All this data is available publicly under the following link: [https://spectare.nicco.io/share/Xklie3UU/Nicco](https://spectare.nicco.io/share/Xklie3UU/Nicco).
+
+### Third Parties
+
+All the data is collected by us locally and never shared with any third party.
+
+### Contact
+
+For questions or issues please contact us at [privacy@nicco.io](mailto:privacy@nicco.io).
diff --git a/src/content/page/projects.md b/src/content/page/projects.md
new file mode 100644
index 0000000..2be69d6
--- /dev/null
+++ b/src/content/page/projects.md
@@ -0,0 +1,6 @@
+---
+title: Projects
+date: '2024-11-29'
+---
+
+To be filled :)
diff --git a/src/content/page/rest.mdx b/src/content/page/rest.mdx
new file mode 100644
index 0000000..97ade2f
--- /dev/null
+++ b/src/content/page/rest.mdx
@@ -0,0 +1,7 @@
+---
+title: Rest
+date: '2024-11-29'
+---
+import Links from '../../components/ContactLinks.astro'
+
+
diff --git a/src/env.d.ts b/src/env.d.ts
new file mode 100644
index 0000000..e16c13c
--- /dev/null
+++ b/src/env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/src/global.d.ts b/src/global.d.ts
deleted file mode 100644
index 63908c6..0000000
--- a/src/global.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-///
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
new file mode 100644
index 0000000..074adfd
--- /dev/null
+++ b/src/layouts/BlogPost.astro
@@ -0,0 +1,30 @@
+---
+import type { MarkdownHeading } from 'astro'
+import { Image } from 'astro:assets'
+import type { CollectionEntry } from 'astro:content'
+import type { ReadTimeResults } from 'reading-time'
+import PostAttributes from '../components/PostAttributes.astro'
+import Tags from '../components/Tags.astro'
+import Toc from '../components/Toc.astro'
+import PageWithTitle from './PageWithTitle.astro'
+
+type Props = CollectionEntry<'blog'>['data'] & { headings: MarkdownHeading[]; readingTime: ReadTimeResults }
+
+const { title, updatedDate, date, tags, coverImage, headings, readingTime } = Astro.props
+---
+
+
+
+
+
+ {coverImage && }
+ ({ name: t, href: `/tag/${t}` }))} />
+
+
+
+
+
diff --git a/src/layouts/PageWithTitle.astro b/src/layouts/PageWithTitle.astro
new file mode 100644
index 0000000..d98b8ee
--- /dev/null
+++ b/src/layouts/PageWithTitle.astro
@@ -0,0 +1,52 @@
+---
+import SpacedLetters from '../components/SpacedLetters.astro'
+import Root from './Root.astro'
+
+export type Props = {
+ title: string
+ readable?: boolean
+ expanded?: boolean
+}
+
+const { title, readable = false, expanded = true } = Astro.props
+---
+
+
+
- {/if}
-
-
-
diff --git a/src/lib/gql/gen.ts b/src/lib/gql/gen.ts
deleted file mode 100644
index 1b5ea05..0000000
--- a/src/lib/gql/gen.ts
+++ /dev/null
@@ -1,9512 +0,0 @@
-import type { GraphQLClient } from 'graphql-request';
-import type * as Dom from 'graphql-request/dist/types.dom';
-import gql from 'graphql-tag';
-export type Maybe = T;
-export type InputMaybe = T;
-export type Exact = { [K in keyof T]: T[K] };
-export type MakeOptional = Omit & { [SubKey in K]?: Maybe };
-export type MakeMaybe = Omit & { [SubKey in K]: Maybe };
-/** All built-in and custom scalars, mapped to their actual values */
-export type Scalars = {
- ID: string;
- String: string;
- Boolean: boolean;
- Int: number;
- Float: number;
-};
-
-/** A Field Group registered by ACF */
-export type GQLAcfFieldGroup = {
- /** The name of the ACF Field Group */
- readonly fieldGroupName: Maybe;
-};
-
-/** Avatars are profile images for users. WordPress by default uses the Gravatar service to host and fetch avatars from. */
-export type GQLAvatar = {
- readonly __typename?: 'Avatar';
- /** URL for the default image or a default type. Accepts '404' (return a 404 instead of a default image), 'retro' (8bit), 'monsterid' (monster), 'wavatar' (cartoon face), 'indenticon' (the 'quilt'), 'mystery', 'mm', or 'mysteryman' (The Oyster Man), 'blank' (transparent GIF), or 'gravatar_default' (the Gravatar logo). */
- readonly default: Maybe;
- /** HTML attributes to insert in the IMG element. Is not sanitized. */
- readonly extraAttr: Maybe;
- /** Whether to always show the default image, never the Gravatar. */
- readonly forceDefault: Maybe;
- /** Whether the avatar was successfully found. */
- readonly foundAvatar: Maybe;
- /** Height of the avatar image. */
- readonly height: Maybe;
- /** Whether the object is restricted from the current viewer */
- readonly isRestricted: Maybe;
- /** What rating to display avatars up to. Accepts 'G', 'PG', 'R', 'X', and are judged in that order. */
- readonly rating: Maybe;
- /** Type of url scheme to use. Typically HTTP vs. HTTPS. */
- readonly scheme: Maybe;
- /** The size of the avatar in pixels. A value of 96 will match a 96px x 96px gravatar image. */
- readonly size: Maybe;
- /** URL for the gravatar image source. */
- readonly url: Maybe;
- /** Width of the avatar image. */
- readonly width: Maybe;
-};
-
-/** What rating to display avatars up to. Accepts 'G', 'PG', 'R', 'X', and are judged in that order. Default is the value of the 'avatar_rating' option */
-export enum GQLAvatarRatingEnum {
- /** Indicates a G level avatar rating level. */
- G = 'G',
- /** Indicates a PG level avatar rating level. */
- Pg = 'PG',
- /** Indicates an R level avatar rating level. */
- R = 'R',
- /** Indicates an X level avatar rating level. */
- X = 'X'
-}
-
-/** The category type */
-export type GQLCategory = GQLDatabaseIdentifier & GQLHierarchicalTermNode & GQLMenuItemLinkable & GQLNode & GQLTermNode & GQLUniformResourceIdentifiable & {
- readonly __typename?: 'Category';
- /** The ancestors of the node. Default ordered as lowest (closest to the child) to highest (closest to the root). */
- readonly ancestors: Maybe;
- /**
- * The id field matches the WP_Post->ID field.
- * @deprecated Deprecated in favor of databaseId
- */
- readonly categoryId: Maybe;
- /** Connection between the category type and the category type */
- readonly children: Maybe;
- /** Connection between the category type and the ContentNode type */
- readonly contentNodes: Maybe;
- /** The number of objects connected to the object */
- readonly count: Maybe;
- /** The unique resource identifier path */
- readonly databaseId: Scalars['Int'];
- /** The description of the object */
- readonly description: Maybe;
- /** Connection between the TermNode type and the EnqueuedScript type */
- readonly enqueuedScripts: Maybe;
- /** Connection between the TermNode type and the EnqueuedStylesheet type */
- readonly enqueuedStylesheets: Maybe;
- /** The unique resource identifier path */
- readonly id: Scalars['ID'];
- /** Whether the node is a Content Node */
- readonly isContentNode: Scalars['Boolean'];
- /** Whether the object is restricted from the current viewer */
- readonly isRestricted: Maybe;
- /** Whether the node is a Term */
- readonly isTermNode: Scalars['Boolean'];
- /** The link to the term */
- readonly link: Maybe;
- /** The human friendly name of the object. */
- readonly name: Maybe;
- /** Connection between the category type and the category type */
- readonly parent: Maybe;
- /** Database id of the parent node */
- readonly parentDatabaseId: Maybe;
- /** The globally unique identifier of the parent node. */
- readonly parentId: Maybe;
- /** Connection between the category type and the post type */
- readonly posts: Maybe;
- /** An alphanumeric identifier for the object unique to its type. */
- readonly slug: Maybe;
- /** Connection between the category type and the Taxonomy type */
- readonly taxonomy: Maybe;
- /** The name of the taxonomy that the object is associated with */
- readonly taxonomyName: Maybe;
- /** The ID of the term group that this term object belongs to */
- readonly termGroupId: Maybe;
- /** The taxonomy ID that the object is associated with */
- readonly termTaxonomyId: Maybe;
- /** The unique resource identifier path */
- readonly uri: Maybe;
-};
-
-
-/** The category type */
-export type GQLCategoryAncestorsArgs = {
- after: InputMaybe;
- before: InputMaybe;
- first: InputMaybe;
- last: InputMaybe;
-};
-
-
-/** The category type */
-export type GQLCategoryChildrenArgs = {
- after: InputMaybe;
- before: InputMaybe;
- first: InputMaybe;
- last: InputMaybe;
- where: InputMaybe;
-};
-
-
-/** The category type */
-export type GQLCategoryContentNodesArgs = {
- after: InputMaybe;
- before: InputMaybe;
- first: InputMaybe;
- last: InputMaybe;
- where: InputMaybe;
-};
-
-
-/** The category type */
-export type GQLCategoryEnqueuedScriptsArgs = {
- after: InputMaybe;
- before: InputMaybe;
- first: InputMaybe;
- last: InputMaybe;
-};
-
-
-/** The category type */
-export type GQLCategoryEnqueuedStylesheetsArgs = {
- after: InputMaybe;
- before: InputMaybe;
- first: InputMaybe;
- last: InputMaybe;
-};
-
-
-/** The category type */
-export type GQLCategoryPostsArgs = {
- after: InputMaybe;
- before: InputMaybe;
- first: InputMaybe;
- last: InputMaybe;
- where: InputMaybe;
-};
-
-/** The Type of Identifier used to fetch a single resource. Default is ID. */
-export enum GQLCategoryIdType {
- /** The Database ID for the node */
- DatabaseId = 'DATABASE_ID',
- /** The hashed Global ID */
- Id = 'ID',
- /** The name of the node */
- Name = 'NAME',
- /** Url friendly name of the node */
- Slug = 'SLUG',
- /** The URI for the node */
- Uri = 'URI'
-}
-
-/** Connection between the category type and the category type */
-export type GQLCategoryToAncestorsCategoryConnection = {
- readonly __typename?: 'CategoryToAncestorsCategoryConnection';
- /** Edges for the CategoryToAncestorsCategoryConnection connection */
- readonly edges: Maybe>>;
- /** The nodes of the connection, without the edges */
- readonly nodes: Maybe>>;
- /** Information about pagination in a connection. */
- readonly pageInfo: Maybe;
-};
-
-/** An edge in a connection */
-export type GQLCategoryToAncestorsCategoryConnectionEdge = {
- readonly __typename?: 'CategoryToAncestorsCategoryConnectionEdge';
- /** A cursor for use in pagination */
- readonly cursor: Maybe;
- /** The item at the end of the edge */
- readonly node: Maybe;
-};
-
-/** Connection between the category type and the category type */
-export type GQLCategoryToCategoryConnection = {
- readonly __typename?: 'CategoryToCategoryConnection';
- /** Edges for the CategoryToCategoryConnection connection */
- readonly edges: Maybe>>;
- /** The nodes of the connection, without the edges */
- readonly nodes: Maybe>>;
- /** Information about pagination in a connection. */
- readonly pageInfo: Maybe;
-};
-
-/** An edge in a connection */
-export type GQLCategoryToCategoryConnectionEdge = {
- readonly __typename?: 'CategoryToCategoryConnectionEdge';
- /** A cursor for use in pagination */
- readonly cursor: Maybe;
- /** The item at the end of the edge */
- readonly node: Maybe;
-};
-
-/** Arguments for filtering the CategoryToCategoryConnection connection */
-export type GQLCategoryToCategoryConnectionWhereArgs = {
- /** Unique cache key to be produced when this query is stored in an object cache. Default is 'core'. */
- readonly cacheDomain: InputMaybe;
- /** Term ID to retrieve child terms of. If multiple taxonomies are passed, $child_of is ignored. Default 0. */
- readonly childOf: InputMaybe;
- /** True to limit results to terms that have no children. This parameter has no effect on non-hierarchical taxonomies. Default false. */
- readonly childless: InputMaybe;
- /** Retrieve terms where the description is LIKE the input value. Default empty. */
- readonly descriptionLike: InputMaybe;
- /** Array of term ids to exclude. If $include is non-empty, $exclude is ignored. Default empty array. */
- readonly exclude: InputMaybe>>;
- /** Array of term ids to exclude along with all of their descendant terms. If $include is non-empty, $exclude_tree is ignored. Default empty array. */
- readonly excludeTree: InputMaybe>>;
- /** Whether to hide terms not assigned to any posts. Accepts true or false. Default false */
- readonly hideEmpty: InputMaybe;
- /** Whether to include terms that have non-empty descendants (even if $hide_empty is set to true). Default true. */
- readonly hierarchical: InputMaybe;
- /** Array of term ids to include. Default empty array. */
- readonly include: InputMaybe>>;
- /** Array of names to return term(s) for. Default empty. */
- readonly name: InputMaybe>>;
- /** Retrieve terms where the name is LIKE the input value. Default empty. */
- readonly nameLike: InputMaybe;
- /** Array of object IDs. Results will be limited to terms associated with these objects. */
- readonly objectIds: InputMaybe>>;
- /** Direction the connection should be ordered in */
- readonly order: InputMaybe;
- /** Field(s) to order terms by. Defaults to 'name'. */
- readonly orderby: InputMaybe;
- /** Whether to pad the quantity of a term's children in the quantity of each term's "count" object variable. Default false. */
- readonly padCounts: InputMaybe;
- /** Parent term ID to retrieve direct-child terms of. Default empty. */
- readonly parent: InputMaybe;
- /** Search criteria to match terms. Will be SQL-formatted with wildcards before and after. Default empty. */
- readonly search: InputMaybe;
- /** Array of slugs to return term(s) for. Default empty. */
- readonly slug: InputMaybe>>;
- /** Array of term taxonomy IDs, to match when querying terms. */
- readonly termTaxonomId: InputMaybe>>;
- /** Whether to prime meta caches for matched terms. Default true. */
- readonly updateTermMetaCache: InputMaybe;
-};
-
-/** Connection between the category type and the ContentNode type */
-export type GQLCategoryToContentNodeConnection = {
- readonly __typename?: 'CategoryToContentNodeConnection';
- /** Edges for the CategoryToContentNodeConnection connection */
- readonly edges: Maybe>>;
- /** The nodes of the connection, without the edges */
- readonly nodes: Maybe>>;
- /** Information about pagination in a connection. */
- readonly pageInfo: Maybe;
-};
-
-/** An edge in a connection */
-export type GQLCategoryToContentNodeConnectionEdge = {
- readonly __typename?: 'CategoryToContentNodeConnectionEdge';
- /** A cursor for use in pagination */
- readonly cursor: Maybe;
- /** The item at the end of the edge */
- readonly node: Maybe;
-};
-
-/** Arguments for filtering the CategoryToContentNodeConnection connection */
-export type GQLCategoryToContentNodeConnectionWhereArgs = {
- /** The Types of content to filter */
- readonly contentTypes: InputMaybe>>;
- /** Filter the connection based on dates */
- readonly dateQuery: InputMaybe;
- /** True for objects with passwords; False for objects without passwords; null for all objects with or without passwords */
- readonly hasPassword: InputMaybe;
- /** Specific ID of the object */
- readonly id: InputMaybe;
- /** Array of IDs for the objects to retrieve */
- readonly in: InputMaybe>>;
- /** Get objects with a specific mimeType property */
- readonly mimeType: InputMaybe;
- /** Slug / post_name of the object */
- readonly name: InputMaybe;
- /** Specify objects to retrieve. Use slugs */
- readonly nameIn: InputMaybe>>;
- /** Specify IDs NOT to retrieve. If this is used in the same query as "in", it will be ignored */
- readonly notIn: InputMaybe>>;
- /** What paramater to use to order the objects by. */
- readonly orderby: InputMaybe>>;
- /** Use ID to return only children. Use 0 to return only top-level items */
- readonly parent: InputMaybe;
- /** Specify objects whose parent is in an array */
- readonly parentIn: InputMaybe>>;
- /** Specify posts whose parent is not in an array */
- readonly parentNotIn: InputMaybe>>;
- /** Show posts with a specific password. */
- readonly password: InputMaybe;
- /** Show Posts based on a keyword search */
- readonly search: InputMaybe;
- /** Retrieve posts where post status is in an array. */
- readonly stati: InputMaybe>>;
- /** Show posts with a specific status. */
- readonly status: InputMaybe;
- /** Title of the object */
- readonly title: InputMaybe;
-};
-
-/** Connection between the category type and the category type */
-export type GQLCategoryToParentCategoryConnectionEdge = {
- readonly __typename?: 'CategoryToParentCategoryConnectionEdge';
- /** The node of the connection, without the edges */
- readonly node: Maybe;
-};
-
-/** Connection between the category type and the post type */
-export type GQLCategoryToPostConnection = {
- readonly __typename?: 'CategoryToPostConnection';
- /** Edges for the CategoryToPostConnection connection */
- readonly edges: Maybe>>;
- /** The nodes of the connection, without the edges */
- readonly nodes: Maybe>>;
- /** Information about pagination in a connection. */
- readonly pageInfo: Maybe;
-};
-
-/** An edge in a connection */
-export type GQLCategoryToPostConnectionEdge = {
- readonly __typename?: 'CategoryToPostConnectionEdge';
- /** A cursor for use in pagination */
- readonly cursor: Maybe;
- /** The item at the end of the edge */
- readonly node: Maybe;
-};
-
-/** Arguments for filtering the CategoryToPostConnection connection */
-export type GQLCategoryToPostConnectionWhereArgs = {
- /** The user that's connected as the author of the object. Use the userId for the author object. */
- readonly author: InputMaybe;
- /** Find objects connected to author(s) in the array of author's userIds */
- readonly authorIn: InputMaybe>>;
- /** Find objects connected to the author by the author's nicename */
- readonly authorName: InputMaybe;
- /** Find objects NOT connected to author(s) in the array of author's userIds */
- readonly authorNotIn: InputMaybe>>;
- /** Category ID */
- readonly categoryId: InputMaybe;
- /** Array of category IDs, used to display objects from one category OR another */
- readonly categoryIn: InputMaybe>>;
- /** Use Category Slug */
- readonly categoryName: InputMaybe;
- /** Array of category IDs, used to display objects from one category OR another */
- readonly categoryNotIn: InputMaybe>>;
- /** Filter the connection based on dates */
- readonly dateQuery: InputMaybe;
- /** True for objects with passwords; False for objects without passwords; null for all objects with or without passwords */
- readonly hasPassword: InputMaybe;
- /** Specific ID of the object */
- readonly id: InputMaybe;
- /** Array of IDs for the objects to retrieve */
- readonly in: InputMaybe>>;
- /** Get objects with a specific mimeType property */
- readonly mimeType: InputMaybe;
- /** Slug / post_name of the object */
- readonly name: InputMaybe;
- /** Specify objects to retrieve. Use slugs */
- readonly nameIn: InputMaybe>>;
- /** Specify IDs NOT to retrieve. If this is used in the same query as "in", it will be ignored */
- readonly notIn: InputMaybe>>;
- /** What paramater to use to order the objects by. */
- readonly orderby: InputMaybe>>;
- /** Use ID to return only children. Use 0 to return only top-level items */
- readonly parent: InputMaybe;
- /** Specify objects whose parent is in an array */
- readonly parentIn: InputMaybe>>;
- /** Specify posts whose parent is not in an array */
- readonly parentNotIn: InputMaybe>>;
- /** Show posts with a specific password. */
- readonly password: InputMaybe;
- /** Show Posts based on a keyword search */
- readonly search: InputMaybe;
- /** Retrieve posts where post status is in an array. */
- readonly stati: InputMaybe>>;
- /** Show posts with a specific status. */
- readonly status: InputMaybe;
- /** Tag Slug */
- readonly tag: InputMaybe;
- /** Use Tag ID */
- readonly tagId: InputMaybe;
- /** Array of tag IDs, used to display objects from one tag OR another */
- readonly tagIn: InputMaybe>>;
- /** Array of tag IDs, used to display objects from one tag OR another */
- readonly tagNotIn: InputMaybe>>;
- /** Array of tag slugs, used to display objects from one tag OR another */
- readonly tagSlugAnd: InputMaybe>>;
- /** Array of tag slugs, used to exclude objects in specified tags */
- readonly tagSlugIn: InputMaybe>>;
- /** Title of the object */
- readonly title: InputMaybe;
-};
-
-/** Connection between the category type and the Taxonomy type */
-export type GQLCategoryToTaxonomyConnectionEdge = {
- readonly __typename?: 'CategoryToTaxonomyConnectionEdge';
- /** The node of the connection, without the edges */
- readonly node: Maybe;
-};
-
-/** A Comment object */
-export type GQLComment = GQLDatabaseIdentifier & GQLNode & {
- readonly __typename?: 'Comment';
- /** User agent used to post the comment. This field is equivalent to WP_Comment->comment_agent and the value matching the "comment_agent" column in SQL. */
- readonly agent: Maybe;
- /** The approval status of the comment. This field is equivalent to WP_Comment->comment_approved and the value matching the "comment_approved" column in SQL. */
- readonly approved: Maybe;
- /** The author of the comment */
- readonly author: Maybe;
- /** IP address for the author. This field is equivalent to WP_Comment->comment_author_IP and the value matching the "comment_author_IP" column in SQL. */
- readonly authorIp: Maybe;
- /**
- * ID for the comment, unique among comments.
- * @deprecated Deprecated in favor of databaseId
- */
- readonly commentId: Maybe;
- /** Connection between the Comment type and the ContentNode type */
- readonly commentedOn: Maybe;
- /** Content of the comment. This field is equivalent to WP_Comment->comment_content and the value matching the "comment_content" column in SQL. */
- readonly content: Maybe;
- /** The unique identifier stored in the database */
- readonly databaseId: Scalars['Int'];
- /** Date the comment was posted in local time. This field is equivalent to WP_Comment->date and the value matching the "date" column in SQL. */
- readonly date: Maybe;
- /** Date the comment was posted in GMT. This field is equivalent to WP_Comment->date_gmt and the value matching the "date_gmt" column in SQL. */
- readonly dateGmt: Maybe;
- /** The globally unique identifier for the comment object */
- readonly id: Scalars['ID'];
- /** Whether the object is restricted from the current viewer */
- readonly isRestricted: Maybe;
- /** Karma value for the comment. This field is equivalent to WP_Comment->comment_karma and the value matching the "comment_karma" column in SQL. */
- readonly karma: Maybe;
- /** Connection between the Comment type and the Comment type */
- readonly parent: Maybe;
- /** The database id of the parent comment node or null if it is the root comment */
- readonly parentDatabaseId: Maybe;
- /** The globally unique identifier of the parent comment node. */
- readonly parentId: Maybe;
- /** Connection between the Comment type and the Comment type */
- readonly replies: Maybe;
- /** Type of comment. This field is equivalent to WP_Comment->comment_type and the value matching the "comment_type" column in SQL. */
- readonly type: Maybe;
-};
-
-
-/** A Comment object */
-export type GQLCommentContentArgs = {
- format: InputMaybe;
-};
-
-
-/** A Comment object */
-export type GQLCommentParentArgs = {
- where: InputMaybe;
-};
-
-
-/** A Comment object */
-export type GQLCommentRepliesArgs = {
- after: InputMaybe;
- before: InputMaybe;
- first: InputMaybe;
- last: InputMaybe;
- where: InputMaybe;
-};
-
-/** A Comment Author object */
-export type GQLCommentAuthor = GQLCommenter & GQLNode & {
- readonly __typename?: 'CommentAuthor';
- /** Avatar object for user. The avatar object can be retrieved in different sizes by specifying the size argument. */
- readonly avatar: Maybe;
- /** Identifies the primary key from the database. */
- readonly databaseId: Scalars['Int'];
- /** The email for the comment author */
- readonly email: Maybe;
- /** The globally unique identifier for the comment author object */
- readonly id: Scalars['ID'];
- /** Whether the object is restricted from the current viewer */
- readonly isRestricted: Maybe;
- /** The name for the comment author. */
- readonly name: Maybe;
- /** The url the comment author. */
- readonly url: Maybe;
-};
-
-
-/** A Comment Author object */
-export type GQLCommentAuthorAvatarArgs = {
- forceDefault: InputMaybe;
- rating: InputMaybe;
- size?: InputMaybe;
-};
-
-/** Connection between the Comment type and the Comment type */
-export type GQLCommentToCommentConnection = {
- readonly __typename?: 'CommentToCommentConnection';
- /** Edges for the CommentToCommentConnection connection */
- readonly edges: Maybe>>;
- /** The nodes of the connection, without the edges */
- readonly nodes: Maybe>>;
- /** Information about pagination in a connection. */
- readonly pageInfo: Maybe;
-};
-
-/** An edge in a connection */
-export type GQLCommentToCommentConnectionEdge = {
- readonly __typename?: 'CommentToCommentConnectionEdge';
- /** A cursor for use in pagination */
- readonly cursor: Maybe;
- /** The item at the end of the edge */
- readonly node: Maybe;
-};
-
-/** Arguments for filtering the CommentToCommentConnection connection */
-export type GQLCommentToCommentConnectionWhereArgs = {
- /** Comment author email address. */
- readonly authorEmail: InputMaybe;
- /** Array of author IDs to include comments for. */
- readonly authorIn: InputMaybe>>;
- /** Array of author IDs to exclude comments for. */
- readonly authorNotIn: InputMaybe>>;
- /** Comment author URL. */
- readonly authorUrl: InputMaybe;
- /** Array of comment IDs to include. */
- readonly commentIn: InputMaybe>>;
- /** Array of IDs of users whose unapproved comments will be returned by the query regardless of status. */
- readonly commentNotIn: InputMaybe>>;
- /** Include comments of a given type. */
- readonly commentType: InputMaybe;
- /** Include comments from a given array of comment types. */
- readonly commentTypeIn: InputMaybe>>;
- /** Exclude comments from a given array of comment types. */
- readonly commentTypeNotIn: InputMaybe;
- /** Content object author ID to limit results by. */
- readonly contentAuthor: InputMaybe>>;
- /** Array of author IDs to retrieve comments for. */
- readonly contentAuthorIn: InputMaybe>>;
- /** Array of author IDs *not* to retrieve comments for. */
- readonly contentAuthorNotIn: InputMaybe>>;
- /** Limit results to those affiliated with a given content object ID. */
- readonly contentId: InputMaybe;
- /** Array of content object IDs to include affiliated comments for. */
- readonly contentIdIn: InputMaybe>>;
- /** Array of content object IDs to exclude affiliated comments for. */
- readonly contentIdNotIn: InputMaybe>>;
- /** Content object name to retrieve affiliated comments for. */
- readonly contentName: InputMaybe;
- /** Content Object parent ID to retrieve affiliated comments for. */
- readonly contentParent: InputMaybe;
- /** Array of content object statuses to retrieve affiliated comments for. Pass 'any' to match any value. */
- readonly contentStatus: InputMaybe>>;
- /** Content object type or array of types to retrieve affiliated comments for. Pass 'any' to match any value. */
- readonly contentType: InputMaybe>>;
- /** Array of IDs or email addresses of users whose unapproved comments will be returned by the query regardless of $status. Default empty */
- readonly includeUnapproved: InputMaybe>>;
- /** Karma score to retrieve matching comments for. */
- readonly karma: InputMaybe;
- /** The cardinality of the order of the connection */
- readonly order: InputMaybe;
- /** Field to order the comments by. */
- readonly orderby: InputMaybe;
- /** Parent ID of comment to retrieve children of. */
- readonly parent: InputMaybe;
- /** Array of parent IDs of comments to retrieve children for. */
- readonly parentIn: InputMaybe>>;
- /** Array of parent IDs of comments *not* to retrieve children for. */
- readonly parentNotIn: InputMaybe>>;
- /** Search term(s) to retrieve matching comments for. */
- readonly search: InputMaybe;
- /** Comment status to limit results by. */
- readonly status: InputMaybe;
- /** Include comments for a specific user ID. */
- readonly userId: InputMaybe;
-};
-
-/** Connection between the Comment type and the Commenter type */
-export type GQLCommentToCommenterConnectionEdge = {
- readonly __typename?: 'CommentToCommenterConnectionEdge';
- /** The node of the connection, without the edges */
- readonly node: Maybe;
-};
-
-/** Connection between the Comment type and the ContentNode type */
-export type GQLCommentToContentNodeConnectionEdge = {
- readonly __typename?: 'CommentToContentNodeConnectionEdge';
- /** The node of the connection, without the edges */
- readonly node: Maybe;
-};
-
-/** Connection between the Comment type and the Comment type */
-export type GQLCommentToParentCommentConnectionEdge = {
- readonly __typename?: 'CommentToParentCommentConnectionEdge';
- /** The node of the connection, without the edges */
- readonly node: Maybe;
-};
-
-/** Arguments for filtering the CommentToParentCommentConnection connection */
-export type GQLCommentToParentCommentConnectionWhereArgs = {
- /** Comment author email address. */
- readonly authorEmail: InputMaybe;
- /** Array of author IDs to include comments for. */
- readonly authorIn: InputMaybe>>;
- /** Array of author IDs to exclude comments for. */
- readonly authorNotIn: InputMaybe>>;
- /** Comment author URL. */
- readonly authorUrl: InputMaybe;
- /** Array of comment IDs to include. */
- readonly commentIn: InputMaybe>>;
- /** Array of IDs of users whose unapproved comments will be returned by the query regardless of status. */
- readonly commentNotIn: InputMaybe>>;
- /** Include comments of a given type. */
- readonly commentType: InputMaybe;
- /** Include comments from a given array of comment types. */
- readonly commentTypeIn: InputMaybe>>;
- /** Exclude comments from a given array of comment types. */
- readonly commentTypeNotIn: InputMaybe;
- /** Content object author ID to limit results by. */
- readonly contentAuthor: InputMaybe>>;
- /** Array of author IDs to retrieve comments for. */
- readonly contentAuthorIn: InputMaybe>>;
- /** Array of author IDs *not* to retrieve comments for. */
- readonly contentAuthorNotIn: InputMaybe>>;
- /** Limit results to those affiliated with a given content object ID. */
- readonly contentId: InputMaybe;
- /** Array of content object IDs to include affiliated comments for. */
- readonly contentIdIn: InputMaybe