[{"author":"Anton Ödman","title":"Nesting Rounded Corners in CSS","description":"Consistency in rounded corners is something I came upon every now and again. It would really bother me until I found this very neat trick to solve it.","date":"2022-10-25","draft":false,"slug":"nesting-rounded-corners","isIndexFile":false,"category":"css","component":{},"preview":{"html":"

I came upon this amazing article about an issue I have had many times but never really bothered to look up. Here is an image (from the page), illustrating the issue.

","text":"I came upon this amazing article about an issue I have had many times but never really bothered to look up. Here is an image (from the page), illustrating the issue."},"readingTime":"1 min read","body":"

Fix rounded corners with math

I came upon this amazing article about an issue I have had many times but never really bothered to look up. Here is an image (from the page), illustrating the issue.

$\"css$

The solution

The solution is to see every border radius in circles. Each radius is a circle. This allows us to calculate each radius with this equation:

outerRadius - gap = innerRadius

If you want the actual CSS, it looks something like this:

--outer-radius: 1em;\n--padding: 0.5em;\n--inner-radius: calc(var(--outer-radius) - var(--padding));

","previous":{"author":"Anton Ödman","title":"Intercepting a Fetch Request","description":"A stumbled upon a nice script that helped a lot of people to book a train in Sweden, and got interested in how it works. This is just a quick summary of that.","date":"2022-10-25","draft":false,"slug":"intercept-fetch-request","isIndexFile":false,"category":"javascript","component":{},"preview":{"html":"

Every christmas, people in Sweden want to go home. And once the train tickets gets released, the servers crash. Every year. This neat script was published in several news papers. It modifies the fetch request to run several times until it succeed with an exponential back-off delay, not to overwork their servers.

","text":"Every christmas, people in Sweden want to go home. And once the train tickets gets released, the servers crash. Every year. This neat script was published in several news papers. It modifies the fetch request to run several times until it succeed with an exponential back-off delay, not to overwork their servers."},"readingTime":"4 min read","body":"

Intercepting a fetch request

window._fetch = window.fetch;\nwindow.fetch = (...args) => {\n  return new Promise((resolve, reject) => {\n    const maxRetries = 10\n    let retries = 0\n    const retry = () => {\n      window._fetch(...args)\n        .then((data) => {\n          if (data.status === 429 && retries < maxRetries) {\n            retries++\n            setTimeout(retry, 500 * Math.pow(2, retries))\n          } else {\n            resolve(data);\n          }\n        }).catch(reject)\n    }\n    retry()\n  })\n};

If it receives a specific answers, it reruns the script until it either succeeds or have tried 10 times.

Intercepting in general

I though this was a very nice approach, and started to read more about it. The ability to actually intercept a core feature/API of the browser and modify it opens up for some very interesting possibilities. I found some nice tips and tricks on this SO question, if you want to intercept the Fetch API yourself. You can read up upon it yourself, but this is another (similar) approach to intercept and modify.

const {fetch: origFetch} = window;\nwindow.fetch = async (...args) => {\n  console.log(\"fetch called with args:\", args);\n  const response = await origFetch(...args);\n  \n  /* work with the cloned response in a separate promise\n     chain -- could use the same chain with `await`. */\n  response\n    .clone()\n    .json()\n    .then(body => console.log(\"intercepted response:\", body))\n    .catch(err => console.error(err))\n  ;\n    \n  /* the original response can be resolved unmodified: */\n  //return response;\n  \n  /* or mock the response: */\n  return {\n    ok: true,\n    status: 200,\n    json: async () => ({\n      userId: 1,\n      id: 1,\n      title: \"Mocked!!\",\n      completed: false\n    })\n  };\n};

"}},{"author":"Anton Ödman","title":"Intercepting a Fetch Request","description":"A stumbled upon a nice script that helped a lot of people to book a train in Sweden, and got interested in how it works. This is just a quick summary of that.","date":"2022-10-25","draft":false,"slug":"intercept-fetch-request","isIndexFile":false,"category":"javascript","component":{},"preview":{"html":"

Intercepting a fetch request

window._fetch = window.fetch;\nwindow.fetch = (...args) => {\n  return new Promise((resolve, reject) => {\n    const maxRetries = 10\n    let retries = 0\n    const retry = () => {\n      window._fetch(...args)\n        .then((data) => {\n          if (data.status === 429 && retries < maxRetries) {\n            retries++\n            setTimeout(retry, 500 * Math.pow(2, retries))\n          } else {\n            resolve(data);\n          }\n        }).catch(reject)\n    }\n    retry()\n  })\n};

If it receives a specific answers, it reruns the script until it either succeeds or have tried 10 times.

Intercepting in general

const {fetch: origFetch} = window;\nwindow.fetch = async (...args) => {\n  console.log(\"fetch called with args:\", args);\n  const response = await origFetch(...args);\n  \n  /* work with the cloned response in a separate promise\n     chain -- could use the same chain with `await`. */\n  response\n    .clone()\n    .json()\n    .then(body => console.log(\"intercepted response:\", body))\n    .catch(err => console.error(err))\n  ;\n    \n  /* the original response can be resolved unmodified: */\n  //return response;\n  \n  /* or mock the response: */\n  return {\n    ok: true,\n    status: 200,\n    json: async () => ({\n      userId: 1,\n      id: 1,\n      title: \"Mocked!!\",\n      completed: false\n    })\n  };\n};

","next":{"author":"Anton Ödman","title":"Nesting Rounded Corners in CSS","description":"Consistency in rounded corners is something I came upon every now and again. It would really bother me until I found this very neat trick to solve it.","date":"2022-10-25","draft":false,"slug":"nesting-rounded-corners","isIndexFile":false,"category":"css","component":{},"preview":{"html":"

I came upon this amazing article about an issue I have had many times but never really bothered to look up. Here is an image (from the page), illustrating the issue.

Fix rounded corners with math

I came upon this amazing article about an issue I have had many times but never really bothered to look up. Here is an image (from the page), illustrating the issue.

$\"css$

The solution

The solution is to see every border radius in circles. Each radius is a circle. This allows us to calculate each radius with this equation:

outerRadius - gap = innerRadius

If you want the actual CSS, it looks something like this:

--outer-radius: 1em;\n--padding: 0.5em;\n--inner-radius: calc(var(--outer-radius) - var(--padding));

"},"previous":{"author":"Anton Ödman","title":"Convert a SVG file to PNG and serve it in Express","description":"I tend to use SVG:s a lot, however, sometimes I feel like it simpler to render them as PNG:s for some special workflows. This a neat trick to do that in your own API.","date":"2022-10-10","draft":false,"slug":"return-png-express","isIndexFile":false,"category":"node","component":{},"preview":{"html":"

I work a lot with SVG:s, but sometimes I want to render them as PNG:s to make some of my workflows simpler. This is a neat trick that uses the sharp library within express to generate a PNG file from SVG and serve it in an endpoint.

","text":"I work a lot with SVG:s, but sometimes I want to render them as PNG:s to make some of my workflows simpler. This is a neat trick that uses the sharp library within express to generate a PNG file from SVG and serve it in an endpoint."},"readingTime":"2 min read","body":"

Rendering SVG to PNG in an API

server.get(\"/api/cover/:id\", function(req, res) {\n    var svg = getSvg(req.params.id);\n    const buffer = Buffer.from(svg);\n    const img = await sharp(buffer).png();\n\n   res.writeHead(200, {\n     'Content-Type': 'image/png',\n     'Content-Length': img.length\n   });\n\n   res.end(img); \n});

"}},{"author":"Anton Ödman","title":"Convert a SVG file to PNG and serve it in Express","description":"I tend to use SVG:s a lot, however, sometimes I feel like it simpler to render them as PNG:s for some special workflows. This a neat trick to do that in your own API.","date":"2022-10-10","draft":false,"slug":"return-png-express","isIndexFile":false,"category":"node","component":{},"preview":{"html":"

Rendering SVG to PNG in an API

server.get(\"/api/cover/:id\", function(req, res) {\n    var svg = getSvg(req.params.id);\n    const buffer = Buffer.from(svg);\n    const img = await sharp(buffer).png();\n\n   res.writeHead(200, {\n     'Content-Type': 'image/png',\n     'Content-Length': img.length\n   });\n\n   res.end(img); \n});

","next":{"author":"Anton Ödman","title":"Intercepting a Fetch Request","description":"A stumbled upon a nice script that helped a lot of people to book a train in Sweden, and got interested in how it works. This is just a quick summary of that.","date":"2022-10-25","draft":false,"slug":"intercept-fetch-request","isIndexFile":false,"category":"javascript","component":{},"preview":{"html":"

Intercepting a fetch request

window._fetch = window.fetch;\nwindow.fetch = (...args) => {\n  return new Promise((resolve, reject) => {\n    const maxRetries = 10\n    let retries = 0\n    const retry = () => {\n      window._fetch(...args)\n        .then((data) => {\n          if (data.status === 429 && retries < maxRetries) {\n            retries++\n            setTimeout(retry, 500 * Math.pow(2, retries))\n          } else {\n            resolve(data);\n          }\n        }).catch(reject)\n    }\n    retry()\n  })\n};

If it receives a specific answers, it reruns the script until it either succeeds or have tried 10 times.

Intercepting in general

const {fetch: origFetch} = window;\nwindow.fetch = async (...args) => {\n  console.log(\"fetch called with args:\", args);\n  const response = await origFetch(...args);\n  \n  /* work with the cloned response in a separate promise\n     chain -- could use the same chain with `await`. */\n  response\n    .clone()\n    .json()\n    .then(body => console.log(\"intercepted response:\", body))\n    .catch(err => console.error(err))\n  ;\n    \n  /* the original response can be resolved unmodified: */\n  //return response;\n  \n  /* or mock the response: */\n  return {\n    ok: true,\n    status: 200,\n    json: async () => ({\n      userId: 1,\n      id: 1,\n      title: \"Mocked!!\",\n      completed: false\n    })\n  };\n};

"},"previous":{"author":"Anton Ödman","title":"A Simple Hook for React Context","description":"It is often quite nice to use Context in React, I tend to use this hook to simplify it.","date":"2022-10-10","draft":false,"slug":"hook-for-react-context","isIndexFile":false,"category":"react","component":{},"preview":{"html":"

Whenever I set up a new React project, I tend to use Context to pass around the state in the application. I often use this custom hook as a base. Here I arbitrarily name it GlobalContext.

","text":"Whenever I set up a new React project, I tend to use Context to pass around the state in the application. I often use this custom hook as a base. Here I arbitrarily name it GlobalContext."},"readingTime":"3 min read","body":"

A React Context Hook

Whenever I set up a new React project, I tend to use Context to pass around the state in the application. I often use this custom hook as a base. Here I arbitrarily name it GlobalContext.

import { createContext, useContext } from \"react\";\n\nexport interface GlobalContextInterface {\n    numbers: number[]\n}\n\nconst GlobalContext = createContext<GlobalContextInterface>({\n    numbers: []\n});\n\nconst useGlobalContext = () => useContext(GlobalContext);\n\nexport { GlobalContext, useGlobalContext };

This makes it quite easy both to set it up, as well as import it within components.

import { GlobalContext } from \"./hooks/useGlobalContext\";\n\n\nconst App = () => {\n\n    return (\n        <div>\n            <GlobalContext.Provider value={{numbers: [1,2,3]}}>\n                <RestOfApp />\n            <GlobalContext.provider>\n        </div>\n    )\n}\n

And whenever you want to import the state to a component, you use the provided hook.

import { useGlobalContext } from \"./hooks/useGlobalContext\";\n\n\nconst ChildComponent = () => {\n    const { numbers } =\n        useGlobalContext();\n\n    //...\n}

"}},{"author":"Anton Ödman","title":"A Simple Hook for React Context","description":"It is often quite nice to use Context in React, I tend to use this hook to simplify it.","date":"2022-10-10","draft":false,"slug":"hook-for-react-context","isIndexFile":false,"category":"react","component":{},"preview":{"html":"

Whenever I set up a new React project, I tend to use Context to pass around the state in the application. I often use this custom hook as a base. Here I arbitrarily name it GlobalContext.

A React Context Hook

Whenever I set up a new React project, I tend to use Context to pass around the state in the application. I often use this custom hook as a base. Here I arbitrarily name it GlobalContext.

import { createContext, useContext } from \"react\";\n\nexport interface GlobalContextInterface {\n    numbers: number[]\n}\n\nconst GlobalContext = createContext<GlobalContextInterface>({\n    numbers: []\n});\n\nconst useGlobalContext = () => useContext(GlobalContext);\n\nexport { GlobalContext, useGlobalContext };

This makes it quite easy both to set it up, as well as import it within components.

import { GlobalContext } from \"./hooks/useGlobalContext\";\n\n\nconst App = () => {\n\n    return (\n        <div>\n            <GlobalContext.Provider value={{numbers: [1,2,3]}}>\n                <RestOfApp />\n            <GlobalContext.provider>\n        </div>\n    )\n}\n

And whenever you want to import the state to a component, you use the provided hook.

import { useGlobalContext } from \"./hooks/useGlobalContext\";\n\n\nconst ChildComponent = () => {\n    const { numbers } =\n        useGlobalContext();\n\n    //...\n}

","next":{"author":"Anton Ödman","title":"Convert a SVG file to PNG and serve it in Express","description":"I tend to use SVG:s a lot, however, sometimes I feel like it simpler to render them as PNG:s for some special workflows. This a neat trick to do that in your own API.","date":"2022-10-10","draft":false,"slug":"return-png-express","isIndexFile":false,"category":"node","component":{},"preview":{"html":"

Rendering SVG to PNG in an API

server.get(\"/api/cover/:id\", function(req, res) {\n    var svg = getSvg(req.params.id);\n    const buffer = Buffer.from(svg);\n    const img = await sharp(buffer).png();\n\n   res.writeHead(200, {\n     'Content-Type': 'image/png',\n     'Content-Length': img.length\n   });\n\n   res.end(img); \n});

"},"previous":{"author":"Anton Ödman","title":"My Custom Svelte Boop Component","date":"2022-09-23","description":"Creating a Boop component might be a bit tricky with the spring effect. This is my component I tend to re-use whenever I want to use it in a project.","tags":["svelte"],"draft":false,"slug":"my-custom-svelte-boop-component","isIndexFile":false,"category":"svelte","component":{},"preview":{"html":"

Since I first read about the boop, I have always been really fond of it. I try to use it throughout all of my applications (which often appears to be written in Svelte), so I thought I might share my custom boop component here so that I can reuse it without having to publish it to NPM.

","text":"Since I first read about the boop, I have always been really fond of it. I try to use it throughout all of my applications (which often appears to be written in Svelte), so I thought I might share my custom boop component here so that I can reuse it without having to publish it to NPM."},"readingTime":"8 min read","body":"

I’ll publish the raw code and explain some of the use cases below.

<script lang=\"ts\">\n\timport { spring } from \"svelte/motion\";\n\n\tinterface IBoopParams {\n\t\tx?: number;\n\t\ty?: number;\n\t\trotation?: number;\n\t\tscale?: number;\n\t\topacity?: number;\n\t}\n\n\tconst initialState: IBoopParams = {\n\t\tx: 0,\n\t\ty: 0,\n\t\trotation: 0,\n\t\tscale: 1,\n\t\topacity: 1,\n\t};\n\n\texport let boopParams: IBoopParams = initialState;\n\t$: boopParams = { ...initialState, ...boopParams };\n\n\texport let stiffness = 0.1;\n\texport let damping = 0.15;\n\texport let shouldBoop = false;\n\texport let timing = 150;\n\texport let isHovering: boolean | null = null;\n\n\t$: inHoverState = false;\n\n\t$: if (isHovering !== null) {\n\t\tinHoverState = isHovering;\n\t}\n\n\tlet boopSpring = spring(initialState, { stiffness, damping });\n\t$: boopSpring.set(inHoverState ? boopParams : initialState);\n\t$: style = `transform:\n        translateX(${$boopSpring.x}px)\n        translateY(${$boopSpring.y}px)\n        rotate(${$boopSpring.rotation}deg)\n        translateZ(0)\n        scale(${$boopSpring.scale});\n        opacity: ${$boopSpring.opacity};`;\n\n\tconst toggleSpring = () => (inHoverState = !inHoverState);\n\n\t$: if (inHoverState && shouldBoop) {\n\t\twindow.setTimeout(() => {\n\t\t\ttoggleSpring();\n\t\t}, timing);\n\t}\n</script>\n\n<div\n\t{style}\n\tclass=\"flex\"\n\ton:mouseenter={() => {\n\t\tif (!isHovering) toggleSpring();\n\t}}\n\ton:mouseleave={() => {\n\t\tif (!isHovering && !shouldBoop) toggleSpring();\n\t}}\n>\n\t<slot />\n</div>

Usage

So basically, I use this as a custom component. Pass whatever you want to animate as children and the component takes care of the rest. Everything occurs at hover, and for any effect you at least have to pass the boopParams to specify which animations.

<Boop boopParams={{ scale: 1.06 }}>\n  <SomeComponent/>\n</Boop>

By default, it will not actually “boop”. It will transition (with a spring effect) to the state defined in the boopParams, and transition back when you hover out from the specified component. The effect will basiscally work like an hover effect.

Spring settings

There are some basic spring configuration settings you can pass to the component as well, stiffness and damping. I won’t go into detail what they do here, but it’s easy to read up on here. This is more or less what created the “squigly” effect.

<Boop boopParams={{ scale: 1.06 }} stiffness={0.1} damping={0.15}>\n  <SomeComponent/>\n</Boop>

Using as a Boop

Usually, you probably want to have the boop effect when using this. Meaning, it will update to the specified state, and after a timeout, transition back to the original state. For this, the shouldBoop param is needed.

<Boop boopParams={{ scale: 1.06 }} shouldBoop={true}>\n  <SomeComponent/>\n</Boop>

This will basically remove the on/off hover effect, and run the boop animation whenever the element is hovered upon. You can also specify the timeout by passing the timing parameter.

Passing Your Own Hover State

Sometimes, you might want to add the boop on a part of a component. Basically, if you hover over the parent, you only want the child to Boop. This is allowed for by the isHovering parameter. If it is passed, it will only rely on it to trigger the boop.

<div\n    class=\"parent\"\n    on:mouseenter={() => {isHovering = true}}\n    on:mouseleave={() => {isHovering = false}}\n  >\n    <Boop boopParams={{ scale: 1.06 }} shouldBoop={true} isHovering={isHovering}>\n        <SomeComponent/>\n    </Boop>\n</div>

This is not by any means a complete or highly maintained Svelte component, but it gets the job done and I tend to use it a lot.

"}},{"author":"Anton Ödman","title":"My Custom Svelte Boop Component","date":"2022-09-23","description":"Creating a Boop component might be a bit tricky with the spring effect. This is my component I tend to re-use whenever I want to use it in a project.","tags":["svelte"],"draft":false,"slug":"my-custom-svelte-boop-component","isIndexFile":false,"category":"svelte","component":{},"preview":{"html":"

I’ll publish the raw code and explain some of the use cases below.

<script lang=\"ts\">\n\timport { spring } from \"svelte/motion\";\n\n\tinterface IBoopParams {\n\t\tx?: number;\n\t\ty?: number;\n\t\trotation?: number;\n\t\tscale?: number;\n\t\topacity?: number;\n\t}\n\n\tconst initialState: IBoopParams = {\n\t\tx: 0,\n\t\ty: 0,\n\t\trotation: 0,\n\t\tscale: 1,\n\t\topacity: 1,\n\t};\n\n\texport let boopParams: IBoopParams = initialState;\n\t$: boopParams = { ...initialState, ...boopParams };\n\n\texport let stiffness = 0.1;\n\texport let damping = 0.15;\n\texport let shouldBoop = false;\n\texport let timing = 150;\n\texport let isHovering: boolean | null = null;\n\n\t$: inHoverState = false;\n\n\t$: if (isHovering !== null) {\n\t\tinHoverState = isHovering;\n\t}\n\n\tlet boopSpring = spring(initialState, { stiffness, damping });\n\t$: boopSpring.set(inHoverState ? boopParams : initialState);\n\t$: style = `transform:\n        translateX(${$boopSpring.x}px)\n        translateY(${$boopSpring.y}px)\n        rotate(${$boopSpring.rotation}deg)\n        translateZ(0)\n        scale(${$boopSpring.scale});\n        opacity: ${$boopSpring.opacity};`;\n\n\tconst toggleSpring = () => (inHoverState = !inHoverState);\n\n\t$: if (inHoverState && shouldBoop) {\n\t\twindow.setTimeout(() => {\n\t\t\ttoggleSpring();\n\t\t}, timing);\n\t}\n</script>\n\n<div\n\t{style}\n\tclass=\"flex\"\n\ton:mouseenter={() => {\n\t\tif (!isHovering) toggleSpring();\n\t}}\n\ton:mouseleave={() => {\n\t\tif (!isHovering && !shouldBoop) toggleSpring();\n\t}}\n>\n\t<slot />\n</div>

Usage

<Boop boopParams={{ scale: 1.06 }}>\n  <SomeComponent/>\n</Boop>

Spring settings

<Boop boopParams={{ scale: 1.06 }} stiffness={0.1} damping={0.15}>\n  <SomeComponent/>\n</Boop>

Using as a Boop

<Boop boopParams={{ scale: 1.06 }} shouldBoop={true}>\n  <SomeComponent/>\n</Boop>

This will basically remove the on/off hover effect, and run the boop animation whenever the element is hovered upon. You can also specify the timeout by passing the timing parameter.

Passing Your Own Hover State

<div\n    class=\"parent\"\n    on:mouseenter={() => {isHovering = true}}\n    on:mouseleave={() => {isHovering = false}}\n  >\n    <Boop boopParams={{ scale: 1.06 }} shouldBoop={true} isHovering={isHovering}>\n        <SomeComponent/>\n    </Boop>\n</div>

This is not by any means a complete or highly maintained Svelte component, but it gets the job done and I tend to use it a lot.

","next":{"author":"Anton Ödman","title":"A Simple Hook for React Context","description":"It is often quite nice to use Context in React, I tend to use this hook to simplify it.","date":"2022-10-10","draft":false,"slug":"hook-for-react-context","isIndexFile":false,"category":"react","component":{},"preview":{"html":"

Whenever I set up a new React project, I tend to use Context to pass around the state in the application. I often use this custom hook as a base. Here I arbitrarily name it GlobalContext.

A React Context Hook

Whenever I set up a new React project, I tend to use Context to pass around the state in the application. I often use this custom hook as a base. Here I arbitrarily name it GlobalContext.

import { createContext, useContext } from \"react\";\n\nexport interface GlobalContextInterface {\n    numbers: number[]\n}\n\nconst GlobalContext = createContext<GlobalContextInterface>({\n    numbers: []\n});\n\nconst useGlobalContext = () => useContext(GlobalContext);\n\nexport { GlobalContext, useGlobalContext };

This makes it quite easy both to set it up, as well as import it within components.

import { GlobalContext } from \"./hooks/useGlobalContext\";\n\n\nconst App = () => {\n\n    return (\n        <div>\n            <GlobalContext.Provider value={{numbers: [1,2,3]}}>\n                <RestOfApp />\n            <GlobalContext.provider>\n        </div>\n    )\n}\n

And whenever you want to import the state to a component, you use the provided hook.

import { useGlobalContext } from \"./hooks/useGlobalContext\";\n\n\nconst ChildComponent = () => {\n    const { numbers } =\n        useGlobalContext();\n\n    //...\n}

"},"previous":{"author":"Anton Ödman","title":"Create A Resposive Grid with CSS Flexbox","description":"Even though CSS Grid is more or less designed to create grids with, flexbox can actually be used to create some responsible grids without much effort.","date":"2022-09-17","draft":false,"slug":"responsive-grid-with-css-flexbox","isIndexFile":false,"category":"css","component":{},"preview":{"html":"

First of all, we need to create the flex wrapper. We only need some basic css properties. Most important is the flex-wrap property, which will allow the items to wrap if they overflow. I’ll add gap as well to add some nice spacing.

","text":"First of all, we need to create the flex wrapper. We only need some basic css properties. Most important is the flex-wrap property, which will allow the items to wrap if they overflow. I’ll add gap as well to add some nice spacing."},"readingTime":"2 min read","body":"

Creating the flex wrapper

.wrapper {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 16px;\n}

Creating the items

The items only need two properties to create a responsive effect; min-width and flex.

.item {\n    min-width: 250px;\n    flex: 1;\n}

The min-width is needed to put some restrictions on the items, not making them smaller than the specified width. Setting flex to 1, which is shorthand for flex: 1 1 0%, actually does three things.

Setting flex-grow to 1, allowing the item to grow if needed.
Setting flex-shrink to 1, allowing the item to shrink if needed. However, as we have defined a min-width, it won’t be smaller than that.
Setting flex-basis to 0%, which will set the “ideal” size for the item.

Here is an example of how it looks:

$\"css$

"}},{"author":"Anton Ödman","title":"Create A Resposive Grid with CSS Flexbox","description":"Even though CSS Grid is more or less designed to create grids with, flexbox can actually be used to create some responsible grids without much effort.","date":"2022-09-17","draft":false,"slug":"responsive-grid-with-css-flexbox","isIndexFile":false,"category":"css","component":{},"preview":{"html":"

Creating the flex wrapper

.wrapper {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 16px;\n}

Creating the items

The items only need two properties to create a responsive effect; min-width and flex.

.item {\n    min-width: 250px;\n    flex: 1;\n}

Setting flex-grow to 1, allowing the item to grow if needed.
Setting flex-shrink to 1, allowing the item to shrink if needed. However, as we have defined a min-width, it won’t be smaller than that.
Setting flex-basis to 0%, which will set the “ideal” size for the item.

Here is an example of how it looks:

$\"css$

","next":{"author":"Anton Ödman","title":"My Custom Svelte Boop Component","date":"2022-09-23","description":"Creating a Boop component might be a bit tricky with the spring effect. This is my component I tend to re-use whenever I want to use it in a project.","tags":["svelte"],"draft":false,"slug":"my-custom-svelte-boop-component","isIndexFile":false,"category":"svelte","component":{},"preview":{"html":"

I’ll publish the raw code and explain some of the use cases below.

<script lang=\"ts\">\n\timport { spring } from \"svelte/motion\";\n\n\tinterface IBoopParams {\n\t\tx?: number;\n\t\ty?: number;\n\t\trotation?: number;\n\t\tscale?: number;\n\t\topacity?: number;\n\t}\n\n\tconst initialState: IBoopParams = {\n\t\tx: 0,\n\t\ty: 0,\n\t\trotation: 0,\n\t\tscale: 1,\n\t\topacity: 1,\n\t};\n\n\texport let boopParams: IBoopParams = initialState;\n\t$: boopParams = { ...initialState, ...boopParams };\n\n\texport let stiffness = 0.1;\n\texport let damping = 0.15;\n\texport let shouldBoop = false;\n\texport let timing = 150;\n\texport let isHovering: boolean | null = null;\n\n\t$: inHoverState = false;\n\n\t$: if (isHovering !== null) {\n\t\tinHoverState = isHovering;\n\t}\n\n\tlet boopSpring = spring(initialState, { stiffness, damping });\n\t$: boopSpring.set(inHoverState ? boopParams : initialState);\n\t$: style = `transform:\n        translateX(${$boopSpring.x}px)\n        translateY(${$boopSpring.y}px)\n        rotate(${$boopSpring.rotation}deg)\n        translateZ(0)\n        scale(${$boopSpring.scale});\n        opacity: ${$boopSpring.opacity};`;\n\n\tconst toggleSpring = () => (inHoverState = !inHoverState);\n\n\t$: if (inHoverState && shouldBoop) {\n\t\twindow.setTimeout(() => {\n\t\t\ttoggleSpring();\n\t\t}, timing);\n\t}\n</script>\n\n<div\n\t{style}\n\tclass=\"flex\"\n\ton:mouseenter={() => {\n\t\tif (!isHovering) toggleSpring();\n\t}}\n\ton:mouseleave={() => {\n\t\tif (!isHovering && !shouldBoop) toggleSpring();\n\t}}\n>\n\t<slot />\n</div>

Usage

<Boop boopParams={{ scale: 1.06 }}>\n  <SomeComponent/>\n</Boop>

Spring settings

<Boop boopParams={{ scale: 1.06 }} stiffness={0.1} damping={0.15}>\n  <SomeComponent/>\n</Boop>

Using as a Boop

<Boop boopParams={{ scale: 1.06 }} shouldBoop={true}>\n  <SomeComponent/>\n</Boop>

This will basically remove the on/off hover effect, and run the boop animation whenever the element is hovered upon. You can also specify the timeout by passing the timing parameter.

Passing Your Own Hover State

<div\n    class=\"parent\"\n    on:mouseenter={() => {isHovering = true}}\n    on:mouseleave={() => {isHovering = false}}\n  >\n    <Boop boopParams={{ scale: 1.06 }} shouldBoop={true} isHovering={isHovering}>\n        <SomeComponent/>\n    </Boop>\n</div>

This is not by any means a complete or highly maintained Svelte component, but it gets the job done and I tend to use it a lot.

"},"previous":{"author":"Anton Ödman","title":"Align Text On The Same Vertical Line Using Flow Layout","description":"When there is a lot of text on a page, it's generally looks much better if every paragraph and heading starts at the exact same vertical line. This is a short guide how to do that and still keep the page responsive","date":"2022-09-04","draft":false,"slug":"flow-layout-with-text-aligned","isIndexFile":false,"category":"css","component":{},"preview":{"html":"

First of all, we want to create a centered container. We’ll create a CSS class that we can apply to all elements that we want to display on the same vertical line.

","text":"First of all, we want to create a centered container. We’ll create a CSS class that we can apply to all elements that we want to display on the same vertical line."},"readingTime":"2 min read","body":"

Creating a centered container

First of all, we want to create a centered container. We’ll create a CSS class that we can apply to all elements that we want to display on the same vertical line.

.centered {\n     max-width: 800px; /* the max value of the container */\n     margin: 0 auto; /* center the container */\n}

Any time this class is added to an element, it will be centered and have a max-width of 800px. As it is only the max-width defined, the container will stil work on mobile devices.

You might want to add some padding as well, so there will be some spacing on smaller devices.

Aligning the text

The text will in this case be aligned if everything is using flow layout. However, a problem might occur if we want to add some padding on a certain text element.

As the padding (especielly left padding) will move the text, it will no longer be aligned. The trick is to use negative margin to “undo” the effect. This will move the text back to the vertical line and add the padding “outside”.

.text-element {\n    padding: 16px;\n    margin: -16px;\n}

I learnt this neat trick from the CSS for Javascript Developers course by Josh W. Comeau, which I highly recommend if you want to learn things like this.

"}},{"author":"Anton Ödman","title":"Align Text On The Same Vertical Line Using Flow Layout","description":"When there is a lot of text on a page, it's generally looks much better if every paragraph and heading starts at the exact same vertical line. This is a short guide how to do that and still keep the page responsive","date":"2022-09-04","draft":false,"slug":"flow-layout-with-text-aligned","isIndexFile":false,"category":"css","component":{},"preview":{"html":"

First of all, we want to create a centered container. We’ll create a CSS class that we can apply to all elements that we want to display on the same vertical line.

Creating a centered container

First of all, we want to create a centered container. We’ll create a CSS class that we can apply to all elements that we want to display on the same vertical line.

.centered {\n     max-width: 800px; /* the max value of the container */\n     margin: 0 auto; /* center the container */\n}

Any time this class is added to an element, it will be centered and have a max-width of 800px. As it is only the max-width defined, the container will stil work on mobile devices.

You might want to add some padding as well, so there will be some spacing on smaller devices.

Aligning the text

The text will in this case be aligned if everything is using flow layout. However, a problem might occur if we want to add some padding on a certain text element.

.text-element {\n    padding: 16px;\n    margin: -16px;\n}

I learnt this neat trick from the CSS for Javascript Developers course by Josh W. Comeau, which I highly recommend if you want to learn things like this.

","next":{"author":"Anton Ödman","title":"Create A Resposive Grid with CSS Flexbox","description":"Even though CSS Grid is more or less designed to create grids with, flexbox can actually be used to create some responsible grids without much effort.","date":"2022-09-17","draft":false,"slug":"responsive-grid-with-css-flexbox","isIndexFile":false,"category":"css","component":{},"preview":{"html":"

Creating the flex wrapper

.wrapper {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 16px;\n}

Creating the items

The items only need two properties to create a responsive effect; min-width and flex.

.item {\n    min-width: 250px;\n    flex: 1;\n}

Setting flex-grow to 1, allowing the item to grow if needed.
Setting flex-shrink to 1, allowing the item to shrink if needed. However, as we have defined a min-width, it won’t be smaller than that.
Setting flex-basis to 0%, which will set the “ideal” size for the item.

Here is an example of how it looks:

$\"css$

"},"previous":{"author":"Anton Ödman","title":"How To Use Custom (Local) Fonts with Tailwind CSS","description":"Using custom fonts locally is quite normal in web development. The tailwind documentation does not quite cover that part though. This is a simple guide on how to do that.","date":"2022-08-08","draft":false,"slug":"custom-local-fonts","isIndexFile":false,"category":"tailwind","component":{},"preview":{"html":"

First of all, we have to add the font as a @font-face in our CSS.

","text":"First of all, we have to add the font as a @font-face in our CSS."},"readingTime":"3 min read","body":"

Adding the font

First of all, we have to add the font as a @font-face in our CSS.

In my case, I wanted to add the Aribau font to a project I am working on.

@font-face {\n\tfont-family: \"aribau\";\n\tsrc: url(\"/fonts/Aribau-Grotesk-Regular.otf\");\n\tfont-weight: normal;\n\tfont-style: normal;\n}

The font is located in my static folder.

To reference the font in our Tailwind, we need to add the following snippet to our tailwind.config.cjs.

module.exports = {\n\tcontent: [\"./src/**/*.{html,js,svelte,ts}\"],\n\ttheme: {\n\t\textend: {\n\t\t\tfontFamily: {\n\t\t\t\taribau: [\"aribau\"],\n\t\t\t},\n\t\t},\n\t},\n\tplugins: [],\n};

Now we can simply change to that font by the normal tailwind syntax for fonts.

<div class=\"font-aribau\">Hello</div>

Adding font weight and style

It’s also quite simple to add font weight and style to be able to use those attributes as well in Tailwind. All we have to do is change the font-weight and font-style attributes.

@font-face {\n\tfont-family: \"aribau\";\n\tsrc: url(\"/fonts/Aribau-Grotesk-Bold.otf\");\n\tfont-weight: bold;\n\tfont-style: normal;\n}

And now we can simply add the bold version like this:

<div class=\"font-aribau font-bold\">Hello</div>

Same goes for the style of the font.

You can also use numeric values instead of normal or bold as a font-weight.

font-weight: 100;\nfont-weight: 200;\nfont-weight: 300;\nfont-weight: 400;// normal\nfont-weight: 500;\nfont-weight: 600;\nfont-weight: 700;// bold\nfont-weight: 800;\nfont-weight: 900;

"}},{"author":"Anton Ödman","title":"How To Use Custom (Local) Fonts with Tailwind CSS","description":"Using custom fonts locally is quite normal in web development. The tailwind documentation does not quite cover that part though. This is a simple guide on how to do that.","date":"2022-08-08","draft":false,"slug":"custom-local-fonts","isIndexFile":false,"category":"tailwind","component":{},"preview":{"html":"

First of all, we have to add the font as a @font-face in our CSS.

","text":"First of all, we have to add the font as a @font-face in our CSS."},"readingTime":"3 min read","body":"

Adding the font

First of all, we have to add the font as a @font-face in our CSS.

In my case, I wanted to add the Aribau font to a project I am working on.

@font-face {\n\tfont-family: \"aribau\";\n\tsrc: url(\"/fonts/Aribau-Grotesk-Regular.otf\");\n\tfont-weight: normal;\n\tfont-style: normal;\n}

The font is located in my static folder.

To reference the font in our Tailwind, we need to add the following snippet to our tailwind.config.cjs.

module.exports = {\n\tcontent: [\"./src/**/*.{html,js,svelte,ts}\"],\n\ttheme: {\n\t\textend: {\n\t\t\tfontFamily: {\n\t\t\t\taribau: [\"aribau\"],\n\t\t\t},\n\t\t},\n\t},\n\tplugins: [],\n};

Now we can simply change to that font by the normal tailwind syntax for fonts.

<div class=\"font-aribau\">Hello</div>

Adding font weight and style

It’s also quite simple to add font weight and style to be able to use those attributes as well in Tailwind. All we have to do is change the font-weight and font-style attributes.

@font-face {\n\tfont-family: \"aribau\";\n\tsrc: url(\"/fonts/Aribau-Grotesk-Bold.otf\");\n\tfont-weight: bold;\n\tfont-style: normal;\n}

And now we can simply add the bold version like this:

<div class=\"font-aribau font-bold\">Hello</div>

Same goes for the style of the font.

You can also use numeric values instead of normal or bold as a font-weight.

font-weight: 100;\nfont-weight: 200;\nfont-weight: 300;\nfont-weight: 400;// normal\nfont-weight: 500;\nfont-weight: 600;\nfont-weight: 700;// bold\nfont-weight: 800;\nfont-weight: 900;

","next":{"author":"Anton Ödman","title":"Align Text On The Same Vertical Line Using Flow Layout","description":"When there is a lot of text on a page, it's generally looks much better if every paragraph and heading starts at the exact same vertical line. This is a short guide how to do that and still keep the page responsive","date":"2022-09-04","draft":false,"slug":"flow-layout-with-text-aligned","isIndexFile":false,"category":"css","component":{},"preview":{"html":"

First of all, we want to create a centered container. We’ll create a CSS class that we can apply to all elements that we want to display on the same vertical line.

Creating a centered container

First of all, we want to create a centered container. We’ll create a CSS class that we can apply to all elements that we want to display on the same vertical line.

.centered {\n     max-width: 800px; /* the max value of the container */\n     margin: 0 auto; /* center the container */\n}

Any time this class is added to an element, it will be centered and have a max-width of 800px. As it is only the max-width defined, the container will stil work on mobile devices.

You might want to add some padding as well, so there will be some spacing on smaller devices.

Aligning the text

The text will in this case be aligned if everything is using flow layout. However, a problem might occur if we want to add some padding on a certain text element.

.text-element {\n    padding: 16px;\n    margin: -16px;\n}

I learnt this neat trick from the CSS for Javascript Developers course by Josh W. Comeau, which I highly recommend if you want to learn things like this.

"},"previous":{"author":"Anton Ödman","title":"Remove Images That Are Not Found using HTML","description":"Sometimes you might want to fetch a photo dynamically, if that fails you most likely would want to remove it or replace it with another picture. This is how.","date":"2022-07-11","draft":false,"slug":"remove-broken-image","isIndexFile":false,"category":"html","component":{},"preview":{"html":"

HTML allows you to basically add a onerror attribute to the image tag, in which you can either remove or replace the image you are trying to show.

","text":"HTML allows you to basically add a onerror attribute to the image tag, in which you can either remove or replace the image you are trying to show."},"readingTime":"1 min read","body":"

Removing a broken image

HTML allows you to basically add a onerror attribute to the image tag, in which you can either remove or replace the image you are trying to show.

To remove the image if you cannot find it, simply use this.remove(). In this particular case, this refers to the actual HTML element.

<img src=\"/somePicture.jpg\"  \n     onerror=\"this.remove()\" \n/>

If you want to display a fallback image instead, you can use this snippet;

<img src=\"/somePicture.jpg\" \n     onerror=\"this.onerror=null; this.src='anotherPicture.jpg'\" \n/>

Thanks to Flavio Copes, for showing this neat trick.

"}},{"author":"Anton Ödman","title":"Remove Images That Are Not Found using HTML","description":"Sometimes you might want to fetch a photo dynamically, if that fails you most likely would want to remove it or replace it with another picture. This is how.","date":"2022-07-11","draft":false,"slug":"remove-broken-image","isIndexFile":false,"category":"html","component":{},"preview":{"html":"

HTML allows you to basically add a onerror attribute to the image tag, in which you can either remove or replace the image you are trying to show.

","text":"HTML allows you to basically add a onerror attribute to the image tag, in which you can either remove or replace the image you are trying to show."},"readingTime":"1 min read","body":"

Removing a broken image

HTML allows you to basically add a onerror attribute to the image tag, in which you can either remove or replace the image you are trying to show.

To remove the image if you cannot find it, simply use this.remove(). In this particular case, this refers to the actual HTML element.

<img src=\"/somePicture.jpg\"  \n     onerror=\"this.remove()\" \n/>

If you want to display a fallback image instead, you can use this snippet;

<img src=\"/somePicture.jpg\" \n     onerror=\"this.onerror=null; this.src='anotherPicture.jpg'\" \n/>

Thanks to Flavio Copes, for showing this neat trick.

","next":{"author":"Anton Ödman","title":"How To Use Custom (Local) Fonts with Tailwind CSS","description":"Using custom fonts locally is quite normal in web development. The tailwind documentation does not quite cover that part though. This is a simple guide on how to do that.","date":"2022-08-08","draft":false,"slug":"custom-local-fonts","isIndexFile":false,"category":"tailwind","component":{},"preview":{"html":"

First of all, we have to add the font as a @font-face in our CSS.

","text":"First of all, we have to add the font as a @font-face in our CSS."},"readingTime":"3 min read","body":"

Adding the font

First of all, we have to add the font as a @font-face in our CSS.

In my case, I wanted to add the Aribau font to a project I am working on.

@font-face {\n\tfont-family: \"aribau\";\n\tsrc: url(\"/fonts/Aribau-Grotesk-Regular.otf\");\n\tfont-weight: normal;\n\tfont-style: normal;\n}

The font is located in my static folder.

To reference the font in our Tailwind, we need to add the following snippet to our tailwind.config.cjs.

module.exports = {\n\tcontent: [\"./src/**/*.{html,js,svelte,ts}\"],\n\ttheme: {\n\t\textend: {\n\t\t\tfontFamily: {\n\t\t\t\taribau: [\"aribau\"],\n\t\t\t},\n\t\t},\n\t},\n\tplugins: [],\n};

Now we can simply change to that font by the normal tailwind syntax for fonts.

<div class=\"font-aribau\">Hello</div>

Adding font weight and style

It’s also quite simple to add font weight and style to be able to use those attributes as well in Tailwind. All we have to do is change the font-weight and font-style attributes.

@font-face {\n\tfont-family: \"aribau\";\n\tsrc: url(\"/fonts/Aribau-Grotesk-Bold.otf\");\n\tfont-weight: bold;\n\tfont-style: normal;\n}

And now we can simply add the bold version like this:

<div class=\"font-aribau font-bold\">Hello</div>

Same goes for the style of the font.

You can also use numeric values instead of normal or bold as a font-weight.

font-weight: 100;\nfont-weight: 200;\nfont-weight: 300;\nfont-weight: 400;// normal\nfont-weight: 500;\nfont-weight: 600;\nfont-weight: 700;// bold\nfont-weight: 800;\nfont-weight: 900;

"},"previous":{"author":"Anton Ödman","title":"A Persistent Svelte Store With Localstorage","description":"Storing data in localstorage is very common in most web applications, this is a neat trick to do that with a Svelte Store","date":"2022-07-08","draft":false,"slug":"store-with-localstorage","isIndexFile":false,"category":"svelte","component":{},"preview":{"html":"

It’s not uncommon to want to save your state in localstorage. I found this neat trick here that allows you to easily create a Svelte store with a function you can call to save and load your state in localStorage.

","text":"It’s not uncommon to want to save your state in localstorage. I found this neat trick here that allows you to easily create a Svelte store with a function you can call to save and load your state in localStorage."},"readingTime":"2 min read","body":"

A persistent Svelte store

This is a basic example with a counter.

// store.js\nimport { writable } from 'svelte/store';\n\nconst createWritableStore = (key, startValue) => {\n  const { subscribe, set } = writable(startValue);\n  \n\treturn {\n    subscribe,\n    set,\n    useLocalStorage: () => {\n      const json = localStorage.getItem(key);\n      if (json) {\n        set(JSON.parse(json));\n      }\n      \n      subscribe(current => {\n        localStorage.setItem(key, JSON.stringify(current));\n      });\n    }\n  };\n}\n\nexport const count = createWritableStore('count', 0);

And you simply use it by importing it and calling the useLocalStorage method if you want to activate it.

// App.svelte\nimport { count } from 'store.js';\n\ncount.useLocalStorage();

"}},{"author":"Anton Ödman","title":"A Persistent Svelte Store With Localstorage","description":"Storing data in localstorage is very common in most web applications, this is a neat trick to do that with a Svelte Store","date":"2022-07-08","draft":false,"slug":"store-with-localstorage","isIndexFile":false,"category":"svelte","component":{},"preview":{"html":"

A persistent Svelte store

This is a basic example with a counter.

// store.js\nimport { writable } from 'svelte/store';\n\nconst createWritableStore = (key, startValue) => {\n  const { subscribe, set } = writable(startValue);\n  \n\treturn {\n    subscribe,\n    set,\n    useLocalStorage: () => {\n      const json = localStorage.getItem(key);\n      if (json) {\n        set(JSON.parse(json));\n      }\n      \n      subscribe(current => {\n        localStorage.setItem(key, JSON.stringify(current));\n      });\n    }\n  };\n}\n\nexport const count = createWritableStore('count', 0);

And you simply use it by importing it and calling the useLocalStorage method if you want to activate it.

// App.svelte\nimport { count } from 'store.js';\n\ncount.useLocalStorage();

","next":{"author":"Anton Ödman","title":"Remove Images That Are Not Found using HTML","description":"Sometimes you might want to fetch a photo dynamically, if that fails you most likely would want to remove it or replace it with another picture. This is how.","date":"2022-07-11","draft":false,"slug":"remove-broken-image","isIndexFile":false,"category":"html","component":{},"preview":{"html":"

HTML allows you to basically add a onerror attribute to the image tag, in which you can either remove or replace the image you are trying to show.

","text":"HTML allows you to basically add a onerror attribute to the image tag, in which you can either remove or replace the image you are trying to show."},"readingTime":"1 min read","body":"

Removing a broken image

HTML allows you to basically add a onerror attribute to the image tag, in which you can either remove or replace the image you are trying to show.

To remove the image if you cannot find it, simply use this.remove(). In this particular case, this refers to the actual HTML element.

<img src=\"/somePicture.jpg\"  \n     onerror=\"this.remove()\" \n/>

If you want to display a fallback image instead, you can use this snippet;

<img src=\"/somePicture.jpg\" \n     onerror=\"this.onerror=null; this.src='anotherPicture.jpg'\" \n/>

Thanks to Flavio Copes, for showing this neat trick.

"},"previous":{"author":"Anton Ödman","title":"How To Add A Client Side Only Library To SvelteKit","date":"2022-06-28","description":"Due to the nature of SvelteKit, it might sometimes be a complicated to run (or import) a client only library, this is a quick fix for that.","tags":["svelte"],"draft":false,"cover":"/covers/png/client-side-library.png","slug":"client-side-library","isIndexFile":false,"category":"svelte","component":{},"preview":{"html":"

SvelteKit runs the code in the script tag both on the server and in the client, based on the circumstances. Meaning that you’ll most likely get an error that document or window is not defined.

","text":"SvelteKit runs the code in the script tag both on the server and in the client, based on the circumstances. Meaning that you’ll most likely get an error that document or window is not defined."},"readingTime":"3 min read","body":"

The Problem

<script>document.getElementByClass(\"test\")</script>

This code will fail as document not accessible on the server.

The Solution

SvelteKit allows us to run client side only code in two ways. You can choose to either use the onMount function, or the browser flag.

<script>\n    import { onMount } from 'svelte';\n    import { browser } from '$app/environment';\n\n\n    onMount(() => {\n        document.getElementByClass(\"test\")\n    })\n\n    // or...\n\n    if (browser) {\n        document.getElementByClass(\"test\")\n    }\n</script>\n

The browser flag is also good to use when the script context is module. Source here.

<script context=\"module\">\n    import { browser } from '$app/environment';\n\n    export async function load({ fetch }) {\n        if (!browser) {\n            // code here runs only on the server\n        }\n        return {\n           // something to return\n        }\n    }\n<script>\n

Importing a library

Sometimes, you might have a problem importing a library becuase some of its dependenices expect the DOM to be avaible. In that case, you can import it like so;

<script>\n\timport { onMount } from 'svelte';\n\n\tonMount(async () => {\n\t\tconst module = await import('some-lib');\n\t\tconst SomeLib = module.default;\n\n\t\t// use module here...\n\t});\n</script>

This snippet was from this Stack Overflow question.

"}},{"author":"Anton Ödman","title":"How To Add A Client Side Only Library To SvelteKit","date":"2022-06-28","description":"Due to the nature of SvelteKit, it might sometimes be a complicated to run (or import) a client only library, this is a quick fix for that.","tags":["svelte"],"draft":false,"cover":"/covers/png/client-side-library.png","slug":"client-side-library","isIndexFile":false,"category":"svelte","component":{},"preview":{"html":"

The Problem

<script>document.getElementByClass(\"test\")</script>

This code will fail as document not accessible on the server.

The Solution

SvelteKit allows us to run client side only code in two ways. You can choose to either use the onMount function, or the browser flag.

<script>\n    import { onMount } from 'svelte';\n    import { browser } from '$app/environment';\n\n\n    onMount(() => {\n        document.getElementByClass(\"test\")\n    })\n\n    // or...\n\n    if (browser) {\n        document.getElementByClass(\"test\")\n    }\n</script>\n

The browser flag is also good to use when the script context is module. Source here.

<script context=\"module\">\n    import { browser } from '$app/environment';\n\n    export async function load({ fetch }) {\n        if (!browser) {\n            // code here runs only on the server\n        }\n        return {\n           // something to return\n        }\n    }\n<script>\n

Importing a library

Sometimes, you might have a problem importing a library becuase some of its dependenices expect the DOM to be avaible. In that case, you can import it like so;

<script>\n\timport { onMount } from 'svelte';\n\n\tonMount(async () => {\n\t\tconst module = await import('some-lib');\n\t\tconst SomeLib = module.default;\n\n\t\t// use module here...\n\t});\n</script>

This snippet was from this Stack Overflow question.

","next":{"author":"Anton Ödman","title":"A Persistent Svelte Store With Localstorage","description":"Storing data in localstorage is very common in most web applications, this is a neat trick to do that with a Svelte Store","date":"2022-07-08","draft":false,"slug":"store-with-localstorage","isIndexFile":false,"category":"svelte","component":{},"preview":{"html":"

A persistent Svelte store

This is a basic example with a counter.

// store.js\nimport { writable } from 'svelte/store';\n\nconst createWritableStore = (key, startValue) => {\n  const { subscribe, set } = writable(startValue);\n  \n\treturn {\n    subscribe,\n    set,\n    useLocalStorage: () => {\n      const json = localStorage.getItem(key);\n      if (json) {\n        set(JSON.parse(json));\n      }\n      \n      subscribe(current => {\n        localStorage.setItem(key, JSON.stringify(current));\n      });\n    }\n  };\n}\n\nexport const count = createWritableStore('count', 0);

And you simply use it by importing it and calling the useLocalStorage method if you want to activate it.

// App.svelte\nimport { count } from 'store.js';\n\ncount.useLocalStorage();

"},"previous":{"author":"Anton Ödman","title":"How To Run Prettier On Changed Files Only","date":"2022-06-22","description":"Run prettier to format files that are changed in Git.","tags":["git"],"draft":false,"cover":"/covers/png/prettier-on-changed-files.png","slug":"prettier-on-changed-files","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

If we want to only format changed files for whatever reason, this quick command makes that possible. You will have to change it according to your needs, depending on which files you want.

","text":"If we want to only format changed files for whatever reason, this quick command makes that possible. You will have to change it according to your needs, depending on which files you want."},"readingTime":"1 min read","body":"

Format changed files

If we want to only format changed files for whatever reason, this quick command makes that possible. You will have to change it according to your needs, depending on which files you want.

npx prettier --write $(git diff --name-only --diff-filter d | grep '.ts$' | xargs)

In this case, it is only working on .ts files. But you can change it to whatever suits your needs. Found the script here.

"}},{"author":"Anton Ödman","title":"How To Run Prettier On Changed Files Only","date":"2022-06-22","description":"Run prettier to format files that are changed in Git.","tags":["git"],"draft":false,"cover":"/covers/png/prettier-on-changed-files.png","slug":"prettier-on-changed-files","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

If we want to only format changed files for whatever reason, this quick command makes that possible. You will have to change it according to your needs, depending on which files you want.

Format changed files

If we want to only format changed files for whatever reason, this quick command makes that possible. You will have to change it according to your needs, depending on which files you want.

npx prettier --write $(git diff --name-only --diff-filter d | grep '.ts$' | xargs)

In this case, it is only working on .ts files. But you can change it to whatever suits your needs. Found the script here.

","next":{"author":"Anton Ödman","title":"How To Add A Client Side Only Library To SvelteKit","date":"2022-06-28","description":"Due to the nature of SvelteKit, it might sometimes be a complicated to run (or import) a client only library, this is a quick fix for that.","tags":["svelte"],"draft":false,"cover":"/covers/png/client-side-library.png","slug":"client-side-library","isIndexFile":false,"category":"svelte","component":{},"preview":{"html":"

The Problem

<script>document.getElementByClass(\"test\")</script>

This code will fail as document not accessible on the server.

The Solution

SvelteKit allows us to run client side only code in two ways. You can choose to either use the onMount function, or the browser flag.

<script>\n    import { onMount } from 'svelte';\n    import { browser } from '$app/environment';\n\n\n    onMount(() => {\n        document.getElementByClass(\"test\")\n    })\n\n    // or...\n\n    if (browser) {\n        document.getElementByClass(\"test\")\n    }\n</script>\n

The browser flag is also good to use when the script context is module. Source here.

<script context=\"module\">\n    import { browser } from '$app/environment';\n\n    export async function load({ fetch }) {\n        if (!browser) {\n            // code here runs only on the server\n        }\n        return {\n           // something to return\n        }\n    }\n<script>\n

Importing a library

Sometimes, you might have a problem importing a library becuase some of its dependenices expect the DOM to be avaible. In that case, you can import it like so;

<script>\n\timport { onMount } from 'svelte';\n\n\tonMount(async () => {\n\t\tconst module = await import('some-lib');\n\t\tconst SomeLib = module.default;\n\n\t\t// use module here...\n\t});\n</script>

This snippet was from this Stack Overflow question.

"},"previous":{"author":"Anton Ödman","title":"Iterate Over An Array With The Modulo Operator","date":"2022-06-18","description":"The modulo operator is often used to calculate if a value is odd or even, however, it comes to great use when you want to iterate (and re-iterate) an array without having to deal with to much logic.","tags":["javascript"],"draft":false,"cover":"/covers/png/iterate-array-with-modulo.png","slug":"iterate-array-with-modulo","isIndexFile":false,"category":"javascript","component":{},"preview":{"html":"

We want to iterate over an array, for this particlar example, let’s say it has 10 values. When we pass the tenth object, we want to start over from object number one.

","text":"We want to iterate over an array, for this particlar example, let’s say it has 10 values. When we pass the tenth object, we want to start over from object number one."},"readingTime":"2 min read","body":"

The Problem

We want to iterate over an array, for this particlar example, let’s say it has 10 values. When we pass the tenth object, we want to start over from object number one.

If we would use a normal for loop, the array would be out of bounds quite soon if we didn’t manually reset the index.

$\"problem\"$

The solution

We can use the modulo operator to fix this problem without having to use to much logic. By simply adding it we can define a “max” value, allowing or the value to start over from 0 instead of continuing counting on for all eternity.

let nextIndex = (currentIndex + 1) % arrayLength;

This would always keep the nextIndex variable (in this case), to never pass 10.

$\"modulo$

This example works if you want to iterate upwards, always adding a number. There is a slight difference if you want to go the other way, with subtraction.

const arrayLength = 10;\nlet currentIndex = 10;\n\nlet nextIndex = (currentIndex - 1 + arrayLength) % arrayLength;

"}},{"author":"Anton Ödman","title":"Iterate Over An Array With The Modulo Operator","date":"2022-06-18","description":"The modulo operator is often used to calculate if a value is odd or even, however, it comes to great use when you want to iterate (and re-iterate) an array without having to deal with to much logic.","tags":["javascript"],"draft":false,"cover":"/covers/png/iterate-array-with-modulo.png","slug":"iterate-array-with-modulo","isIndexFile":false,"category":"javascript","component":{},"preview":{"html":"

We want to iterate over an array, for this particlar example, let’s say it has 10 values. When we pass the tenth object, we want to start over from object number one.

The Problem

We want to iterate over an array, for this particlar example, let’s say it has 10 values. When we pass the tenth object, we want to start over from object number one.

If we would use a normal for loop, the array would be out of bounds quite soon if we didn’t manually reset the index.

$\"problem\"$

The solution

let nextIndex = (currentIndex + 1) % arrayLength;

This would always keep the nextIndex variable (in this case), to never pass 10.

$\"modulo$

This example works if you want to iterate upwards, always adding a number. There is a slight difference if you want to go the other way, with subtraction.

const arrayLength = 10;\nlet currentIndex = 10;\n\nlet nextIndex = (currentIndex - 1 + arrayLength) % arrayLength;

","next":{"author":"Anton Ödman","title":"How To Run Prettier On Changed Files Only","date":"2022-06-22","description":"Run prettier to format files that are changed in Git.","tags":["git"],"draft":false,"cover":"/covers/png/prettier-on-changed-files.png","slug":"prettier-on-changed-files","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

If we want to only format changed files for whatever reason, this quick command makes that possible. You will have to change it according to your needs, depending on which files you want.

Format changed files

If we want to only format changed files for whatever reason, this quick command makes that possible. You will have to change it according to your needs, depending on which files you want.

npx prettier --write $(git diff --name-only --diff-filter d | grep '.ts$' | xargs)

In this case, it is only working on .ts files. But you can change it to whatever suits your needs. Found the script here.

"},"previous":{"author":"Anton Ödman","title":"How To Get the Inferred TypeScript Types From VS Code","date":"2022-06-16","description":"VS Code automatically infers your TypeScript types in a project, even if you haven't implicitly declared it yourself. However, if it is long it will hide some parts of it. This is how you get the full type.","tags":["tools"],"draft":false,"cover":"/covers/png/inferred-vs-code-type.png","slug":"inferred-vs-code-type","isIndexFile":false,"category":"tools","component":{},"preview":{"html":"

When you try to copy the type directly from the inferred VS Code type, you get this shortened version which do not include all the details.

","text":"When you try to copy the type directly from the inferred VS Code type, you get this shortened version which do not include all the details."},"readingTime":"1 min read","body":"

The Problem

When you try to copy the type directly from the inferred VS Code type, you get this shortened version which do not include all the details.

The Solution

The solution is quite simple and will use tsc.

First of all, be sure that you do not have any types defined in the file from the beginning. Then run the following script.

tsc filename.ts --declaration --emitDeclarationOnly

This will create a file with the full definition. Simple as that.

If you haven’t installed tsc you can choose to either use npx or install it globally.

# install if before running the command\nnpm install typescript -g\n\n# or run it with npx\nnpx tsc filename.ts --declaration --emitDeclarationOnly

"}},{"author":"Anton Ödman","title":"How To Get the Inferred TypeScript Types From VS Code","date":"2022-06-16","description":"VS Code automatically infers your TypeScript types in a project, even if you haven't implicitly declared it yourself. However, if it is long it will hide some parts of it. This is how you get the full type.","tags":["tools"],"draft":false,"cover":"/covers/png/inferred-vs-code-type.png","slug":"inferred-vs-code-type","isIndexFile":false,"category":"tools","component":{},"preview":{"html":"

When you try to copy the type directly from the inferred VS Code type, you get this shortened version which do not include all the details.

","text":"When you try to copy the type directly from the inferred VS Code type, you get this shortened version which do not include all the details."},"readingTime":"1 min read","body":"

The Problem

When you try to copy the type directly from the inferred VS Code type, you get this shortened version which do not include all the details.

The Solution

The solution is quite simple and will use tsc.

First of all, be sure that you do not have any types defined in the file from the beginning. Then run the following script.

tsc filename.ts --declaration --emitDeclarationOnly

This will create a file with the full definition. Simple as that.

If you haven’t installed tsc you can choose to either use npx or install it globally.

# install if before running the command\nnpm install typescript -g\n\n# or run it with npx\nnpx tsc filename.ts --declaration --emitDeclarationOnly

","next":{"author":"Anton Ödman","title":"Iterate Over An Array With The Modulo Operator","date":"2022-06-18","description":"The modulo operator is often used to calculate if a value is odd or even, however, it comes to great use when you want to iterate (and re-iterate) an array without having to deal with to much logic.","tags":["javascript"],"draft":false,"cover":"/covers/png/iterate-array-with-modulo.png","slug":"iterate-array-with-modulo","isIndexFile":false,"category":"javascript","component":{},"preview":{"html":"

We want to iterate over an array, for this particlar example, let’s say it has 10 values. When we pass the tenth object, we want to start over from object number one.

The Problem

We want to iterate over an array, for this particlar example, let’s say it has 10 values. When we pass the tenth object, we want to start over from object number one.

If we would use a normal for loop, the array would be out of bounds quite soon if we didn’t manually reset the index.

$\"problem\"$

The solution

let nextIndex = (currentIndex + 1) % arrayLength;

This would always keep the nextIndex variable (in this case), to never pass 10.

$\"modulo$

This example works if you want to iterate upwards, always adding a number. There is a slight difference if you want to go the other way, with subtraction.

const arrayLength = 10;\nlet currentIndex = 10;\n\nlet nextIndex = (currentIndex - 1 + arrayLength) % arrayLength;

"},"previous":{"author":"Anton Ödman","title":"Change from HTTPS to SSH in a Git Repo","date":"2022-02-18","description":"The default way of cloning and maintaining Git repos for some might be using HTTPS. In case you want to switch to SSH, this is a very short guide on how to do that.","tags":["git"],"draft":false,"cover":"/covers/png/from-https-to-ssh.png","slug":"from-https-to-ssh","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

There are basically 3 (or 4) steps to change from HTTPS to SSH.

","text":"There are basically 3 (or 4) steps to change from HTTPS to SSH."},"readingTime":"2 min read","body":"

Change from HTTPS to SSH

There are basically 3 (or 4) steps to change from HTTPS to SSH.

Create your SSH key

To create your SSH key, use the following command:

ssh-keygen -t rsa -C \"email@email.com\"

The -C flag stands for comment and you can write whatever you want, I prefer to write my email.

Copy key

Copy the key to your clipboard, as we need to upload it to our git remote repository (Github, Gitlab, Azure, or whatever provider you use).

cat ~/.ssh/id_rsa.pub

Unless you specified a new location for the file, this is very it is located. Use the cat command to print out the content and copy it manually.

Add key to remote host

You need to manually add the key to your remote git host. Every provider does this differently, but often it is accessible within the settings of the user.

Change to SSH

The final command to make the change work is to update your local repository to use SSH instead. You should replace this with the link to your specific repository.

git remote set-url origin git@github.com:USERNAME/REPOSITORY.git

Use git remote -v to check if everything has updated correctly.

"}},{"author":"Anton Ödman","title":"Change from HTTPS to SSH in a Git Repo","date":"2022-02-18","description":"The default way of cloning and maintaining Git repos for some might be using HTTPS. In case you want to switch to SSH, this is a very short guide on how to do that.","tags":["git"],"draft":false,"cover":"/covers/png/from-https-to-ssh.png","slug":"from-https-to-ssh","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

There are basically 3 (or 4) steps to change from HTTPS to SSH.

","text":"There are basically 3 (or 4) steps to change from HTTPS to SSH."},"readingTime":"2 min read","body":"

Change from HTTPS to SSH

There are basically 3 (or 4) steps to change from HTTPS to SSH.

Create your SSH key

To create your SSH key, use the following command:

ssh-keygen -t rsa -C \"email@email.com\"

The -C flag stands for comment and you can write whatever you want, I prefer to write my email.

Copy key

Copy the key to your clipboard, as we need to upload it to our git remote repository (Github, Gitlab, Azure, or whatever provider you use).

cat ~/.ssh/id_rsa.pub

Unless you specified a new location for the file, this is very it is located. Use the cat command to print out the content and copy it manually.

Add key to remote host

You need to manually add the key to your remote git host. Every provider does this differently, but often it is accessible within the settings of the user.

Change to SSH

The final command to make the change work is to update your local repository to use SSH instead. You should replace this with the link to your specific repository.

git remote set-url origin git@github.com:USERNAME/REPOSITORY.git

Use git remote -v to check if everything has updated correctly.

","next":{"author":"Anton Ödman","title":"How To Get the Inferred TypeScript Types From VS Code","date":"2022-06-16","description":"VS Code automatically infers your TypeScript types in a project, even if you haven't implicitly declared it yourself. However, if it is long it will hide some parts of it. This is how you get the full type.","tags":["tools"],"draft":false,"cover":"/covers/png/inferred-vs-code-type.png","slug":"inferred-vs-code-type","isIndexFile":false,"category":"tools","component":{},"preview":{"html":"

When you try to copy the type directly from the inferred VS Code type, you get this shortened version which do not include all the details.

","text":"When you try to copy the type directly from the inferred VS Code type, you get this shortened version which do not include all the details."},"readingTime":"1 min read","body":"

The Problem

When you try to copy the type directly from the inferred VS Code type, you get this shortened version which do not include all the details.

The Solution

The solution is quite simple and will use tsc.

First of all, be sure that you do not have any types defined in the file from the beginning. Then run the following script.

tsc filename.ts --declaration --emitDeclarationOnly

This will create a file with the full definition. Simple as that.

If you haven’t installed tsc you can choose to either use npx or install it globally.

# install if before running the command\nnpm install typescript -g\n\n# or run it with npx\nnpx tsc filename.ts --declaration --emitDeclarationOnly

"},"previous":{"author":"Anton Ödman","title":"How To Backup a Remote PostgreSQL Database and Run it Locally With Docker","date":"2022-02-18","description":"You probably access remote databases all the time, however, if you want to work offline it could be cumbersome not to have access to your database. This is a simple method to back it up and run it locally using Docker.","tags":["database"],"draft":false,"cover":"/covers/png/backup-locally.png","slug":"backup-locally","isIndexFile":false,"category":"postgresql","component":{},"preview":{"html":"

Scroll down to the bottom for a script you can use instead.

","text":"Scroll down to the bottom for a script you can use instead."},"readingTime":"4 min read","body":"

Scroll down to the bottom for a script you can use instead.

Get started

To begin, we need to install psql as we are going to do this using the CLI. We will also be using pg_dump and pg_restore which often come installed with psql or postgresql.

# Using apt-get\nsudo apt-get -y install postgresql\n\n# using brew\nbrew tap homebrew/services\nbrew install postgres

Create a dump to a local file

We need to back up the data into a local dump file using the pg_dump command. In this case, it will save the data to a file called database.dump.

You need to replace the <values with the actual remote database values, like host and username. This might take a while.

# Might be needed if you have SSL\nexport PGSSLMODE=require\n\npg_dump -h <host-name> -d <database-name> -U <user> -Fc -b -f database.dump

Create database in Docker

We need to create the Postgres database in Docker.

docker run -d --rm \n    -e POSTGRES_PASSWORD=secret\n    -e POSTGRES_USER=user \n    -p 5432:5432 \n    --name database postgres

This command will start the Docker container in detached mode, meaning it will run in the background. Once the container has stopped, it will be deleted as we added the --rm flag. We added the environment variables for the port, user and password:

Username: user
Password: secret
Port (default): 5432

Populate database

To populate the database from the dump file, we first need to create an actual database. In this case, I will just name it db.

echo \"create database db;\" | psql -h localhost -p 5432 -U user -W

The database will be created with localhost as host. The user and port are the same as above. A prompt will appear to enter your password to be able to continue.

Finally, we need to restore the database data from the dump file.

pg_restore --no-acl --no-owner -h localhost -p 5432 -d db database.dump -U user -W

We use the pg_restore command with some flags. In this case, the most important ones are referring to the port we defined, the database file, the user and what the local database name is.

Script

In case you want to run everything with a script, you can copy it from below. This will look for a local dump file, if it cannot find it, it will download it, and then create the local database and populate it.

#! /bin/bash\nPG_USER=user\nPG_PASSWORD=secret\nPG_PORT=5432\nPG_DATABASE=db\n\nREMOTE_HOST=<remote-host>\nREMOTE_USER=<remote-user>\nREMOTE_DATABASE=<remote-database>\n\nFILE=./database.dump\n\nif [ ! -f \"$FILE\" ]; then\n    echo \"Database dump does not exist, will download. Enter password for database on prompt and wait, it might take some time...\"\n\n    export PGSSLMODE=require\n    pg_dump -h $REMOTE_HOST -d $REMOTE_DATABASE -U $REMOTE_USER -Fc -b -f $FILE\nfi\n\necho \"Starting Postgres container...\"\ndocker run -d --rm \n    -e POSTGRES_PASSWORD=$PG_PASSWORD -e POSTGRES_USER=$PG_USER \n    -p $PG_PORT:5432 \n    --name database postgres\n\necho \"Waiting for startup...\"\nsleep 3\n\necho \"Creating database...\"\necho \"create database $PG_DATABASE;\" | psql -h localhost -p $PG_PORT -U $PG_USER -W\n\necho \"Restoring data to database...\"\npg_restore --no-acl --no-owner -h localhost -p $PG_PORT -d $PG_DATABASE $FILE -U $PG_USER -W\n

"}},{"author":"Anton Ödman","title":"How To Backup a Remote PostgreSQL Database and Run it Locally With Docker","date":"2022-02-18","description":"You probably access remote databases all the time, however, if you want to work offline it could be cumbersome not to have access to your database. This is a simple method to back it up and run it locally using Docker.","tags":["database"],"draft":false,"cover":"/covers/png/backup-locally.png","slug":"backup-locally","isIndexFile":false,"category":"postgresql","component":{},"preview":{"html":"

Scroll down to the bottom for a script you can use instead.

","text":"Scroll down to the bottom for a script you can use instead."},"readingTime":"4 min read","body":"

Scroll down to the bottom for a script you can use instead.

Get started

To begin, we need to install psql as we are going to do this using the CLI. We will also be using pg_dump and pg_restore which often come installed with psql or postgresql.

# Using apt-get\nsudo apt-get -y install postgresql\n\n# using brew\nbrew tap homebrew/services\nbrew install postgres

Create a dump to a local file

We need to back up the data into a local dump file using the pg_dump command. In this case, it will save the data to a file called database.dump.

You need to replace the <values with the actual remote database values, like host and username. This might take a while.

# Might be needed if you have SSL\nexport PGSSLMODE=require\n\npg_dump -h <host-name> -d <database-name> -U <user> -Fc -b -f database.dump

Create database in Docker

We need to create the Postgres database in Docker.

docker run -d --rm \n    -e POSTGRES_PASSWORD=secret\n    -e POSTGRES_USER=user \n    -p 5432:5432 \n    --name database postgres

Username: user
Password: secret
Port (default): 5432

Populate database

To populate the database from the dump file, we first need to create an actual database. In this case, I will just name it db.

echo \"create database db;\" | psql -h localhost -p 5432 -U user -W

The database will be created with localhost as host. The user and port are the same as above. A prompt will appear to enter your password to be able to continue.

Finally, we need to restore the database data from the dump file.

pg_restore --no-acl --no-owner -h localhost -p 5432 -d db database.dump -U user -W

We use the pg_restore command with some flags. In this case, the most important ones are referring to the port we defined, the database file, the user and what the local database name is.

Script

#! /bin/bash\nPG_USER=user\nPG_PASSWORD=secret\nPG_PORT=5432\nPG_DATABASE=db\n\nREMOTE_HOST=<remote-host>\nREMOTE_USER=<remote-user>\nREMOTE_DATABASE=<remote-database>\n\nFILE=./database.dump\n\nif [ ! -f \"$FILE\" ]; then\n    echo \"Database dump does not exist, will download. Enter password for database on prompt and wait, it might take some time...\"\n\n    export PGSSLMODE=require\n    pg_dump -h $REMOTE_HOST -d $REMOTE_DATABASE -U $REMOTE_USER -Fc -b -f $FILE\nfi\n\necho \"Starting Postgres container...\"\ndocker run -d --rm \n    -e POSTGRES_PASSWORD=$PG_PASSWORD -e POSTGRES_USER=$PG_USER \n    -p $PG_PORT:5432 \n    --name database postgres\n\necho \"Waiting for startup...\"\nsleep 3\n\necho \"Creating database...\"\necho \"create database $PG_DATABASE;\" | psql -h localhost -p $PG_PORT -U $PG_USER -W\n\necho \"Restoring data to database...\"\npg_restore --no-acl --no-owner -h localhost -p $PG_PORT -d $PG_DATABASE $FILE -U $PG_USER -W\n

","next":{"author":"Anton Ödman","title":"Change from HTTPS to SSH in a Git Repo","date":"2022-02-18","description":"The default way of cloning and maintaining Git repos for some might be using HTTPS. In case you want to switch to SSH, this is a very short guide on how to do that.","tags":["git"],"draft":false,"cover":"/covers/png/from-https-to-ssh.png","slug":"from-https-to-ssh","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

There are basically 3 (or 4) steps to change from HTTPS to SSH.

","text":"There are basically 3 (or 4) steps to change from HTTPS to SSH."},"readingTime":"2 min read","body":"

Change from HTTPS to SSH

There are basically 3 (or 4) steps to change from HTTPS to SSH.

Create your SSH key

To create your SSH key, use the following command:

ssh-keygen -t rsa -C \"email@email.com\"

The -C flag stands for comment and you can write whatever you want, I prefer to write my email.

Copy key

Copy the key to your clipboard, as we need to upload it to our git remote repository (Github, Gitlab, Azure, or whatever provider you use).

cat ~/.ssh/id_rsa.pub

Unless you specified a new location for the file, this is very it is located. Use the cat command to print out the content and copy it manually.

Add key to remote host

You need to manually add the key to your remote git host. Every provider does this differently, but often it is accessible within the settings of the user.

Change to SSH

The final command to make the change work is to update your local repository to use SSH instead. You should replace this with the link to your specific repository.

git remote set-url origin git@github.com:USERNAME/REPOSITORY.git

Use git remote -v to check if everything has updated correctly.

"},"previous":{"author":"Anton Ödman","title":"Get Started With Awk in Bash","date":"2021-07-15","description":"Awk can be very useful when working with text files in Bash. This is a short cheat sheet on some of the commands you'll most often use.","tags":["bash"],"draft":false,"cover":"/covers/png/get-started-with-awk.png","slug":"get-started-with-awk","isIndexFile":false,"category":"bash","component":{},"preview":{"html":"

To use awk, you often work with textfiles. The text file could look something like this.

","text":"To use awk, you often work with textfiles. The text file could look something like this."},"readingTime":"4 min read","body":"

The Basics of awk

To use awk, you often work with textfiles. The text file could look something like this.

ajay manager account 45000\nsunil clerk account 25000\nvarun manager sales 50000\namit manager account 47000\ntarun peon sales 15000\ndeepak clerk sales 23000\nsunil peon sales 13000\nsatvik director purchase 80000

What awk basically does, is handle each line, one by one. It also separates the fields in a line so you can get your specified value. By default, you’ll use whitespace as a separator.

The syntax should look something like this

# with a file\nawk '{print}' test.txt\n\n# with pipes\necho \"some text\" | awk '{print}'

It is important to use ' instead of " to make it work.

Printing fields

You can use awk in many different ways. The most common is printing one or more separate fields. Each field is given a variable you can use. This applies to all lines, not only the first one used in this example.

 $1    $2      $3     $4\najay manager account 45000

If you want to print the whole line, you’ll use $0. Here are some examples of how you can use it.

# print whole line\nawk '{print $0}' test.txt\n\n# print only first field\nawk '{print $1}' test.txt\n\n# print first and last\nawk '{print $1, $4}' test.txt

You can also filter to write fields that only contain a specific text.

# print only lines containing the word \"manager\"\nawk '/manager/ {print}' test.txt\n\n# print only lines containing the word \"manager\" or \"clerk2\nawk '/manager|clerk/ {print}' test.txt

Built-in variables

There are some variables you can use as well.

NR - line number
NF - number of fields in each line
FS - field separator (whitespace as default)
RS - record separator (newline as default).
OFS - output field separator (blank space is default).
ORS - output record separator

Some basic usages with the variables

# display last field only\nawk '{print $NF}' test.txt\n\n# display only first line\nawk 'NR==1 {print $0}' test.txt\n\n# display line from 3 to 6\nawk 'NR==3, NR==6 {print $0}' test.txt\n\n# display each line with line number before\nawk '{print $NR,$0}' test.txt\n\n# print all lines with more than 0 fields\nawk 'NF > 0' test.txt\n\n# print lines with more than 0 characters\nawk 'length($0) > 10' test.txt\n\n# print line if first field is \"ajay\"\nawk '$1 == \"ajay\" {print $0}' test.txt

Change field separator

By dafult, each field is separated by a whitespace. If you want to use something else, you can specify it with the F flag.

# use = as separator\nawk -F '=' '{print $1}'\n\n# use + or = as separator\nawk -F '[+=]' '{print $1}'

"}},{"author":"Anton Ödman","title":"Get Started With Awk in Bash","date":"2021-07-15","description":"Awk can be very useful when working with text files in Bash. This is a short cheat sheet on some of the commands you'll most often use.","tags":["bash"],"draft":false,"cover":"/covers/png/get-started-with-awk.png","slug":"get-started-with-awk","isIndexFile":false,"category":"bash","component":{},"preview":{"html":"

To use awk, you often work with textfiles. The text file could look something like this.

","text":"To use awk, you often work with textfiles. The text file could look something like this."},"readingTime":"4 min read","body":"

The Basics of awk

To use awk, you often work with textfiles. The text file could look something like this.

ajay manager account 45000\nsunil clerk account 25000\nvarun manager sales 50000\namit manager account 47000\ntarun peon sales 15000\ndeepak clerk sales 23000\nsunil peon sales 13000\nsatvik director purchase 80000

What awk basically does, is handle each line, one by one. It also separates the fields in a line so you can get your specified value. By default, you’ll use whitespace as a separator.

The syntax should look something like this

# with a file\nawk '{print}' test.txt\n\n# with pipes\necho \"some text\" | awk '{print}'

It is important to use ' instead of " to make it work.

Printing fields

 $1    $2      $3     $4\najay manager account 45000

If you want to print the whole line, you’ll use $0. Here are some examples of how you can use it.

# print whole line\nawk '{print $0}' test.txt\n\n# print only first field\nawk '{print $1}' test.txt\n\n# print first and last\nawk '{print $1, $4}' test.txt

You can also filter to write fields that only contain a specific text.

# print only lines containing the word \"manager\"\nawk '/manager/ {print}' test.txt\n\n# print only lines containing the word \"manager\" or \"clerk2\nawk '/manager|clerk/ {print}' test.txt

Built-in variables

There are some variables you can use as well.

NR - line number
NF - number of fields in each line
FS - field separator (whitespace as default)
RS - record separator (newline as default).
OFS - output field separator (blank space is default).
ORS - output record separator

Some basic usages with the variables

# display last field only\nawk '{print $NF}' test.txt\n\n# display only first line\nawk 'NR==1 {print $0}' test.txt\n\n# display line from 3 to 6\nawk 'NR==3, NR==6 {print $0}' test.txt\n\n# display each line with line number before\nawk '{print $NR,$0}' test.txt\n\n# print all lines with more than 0 fields\nawk 'NF > 0' test.txt\n\n# print lines with more than 0 characters\nawk 'length($0) > 10' test.txt\n\n# print line if first field is \"ajay\"\nawk '$1 == \"ajay\" {print $0}' test.txt

Change field separator

By dafult, each field is separated by a whitespace. If you want to use something else, you can specify it with the F flag.

# use = as separator\nawk -F '=' '{print $1}'\n\n# use + or = as separator\nawk -F '[+=]' '{print $1}'

","next":{"author":"Anton Ödman","title":"How To Backup a Remote PostgreSQL Database and Run it Locally With Docker","date":"2022-02-18","description":"You probably access remote databases all the time, however, if you want to work offline it could be cumbersome not to have access to your database. This is a simple method to back it up and run it locally using Docker.","tags":["database"],"draft":false,"cover":"/covers/png/backup-locally.png","slug":"backup-locally","isIndexFile":false,"category":"postgresql","component":{},"preview":{"html":"

Scroll down to the bottom for a script you can use instead.

","text":"Scroll down to the bottom for a script you can use instead."},"readingTime":"4 min read","body":"

Scroll down to the bottom for a script you can use instead.

Get started

To begin, we need to install psql as we are going to do this using the CLI. We will also be using pg_dump and pg_restore which often come installed with psql or postgresql.

# Using apt-get\nsudo apt-get -y install postgresql\n\n# using brew\nbrew tap homebrew/services\nbrew install postgres

Create a dump to a local file

We need to back up the data into a local dump file using the pg_dump command. In this case, it will save the data to a file called database.dump.

You need to replace the <values with the actual remote database values, like host and username. This might take a while.

# Might be needed if you have SSL\nexport PGSSLMODE=require\n\npg_dump -h <host-name> -d <database-name> -U <user> -Fc -b -f database.dump

Create database in Docker

We need to create the Postgres database in Docker.

docker run -d --rm \n    -e POSTGRES_PASSWORD=secret\n    -e POSTGRES_USER=user \n    -p 5432:5432 \n    --name database postgres

Username: user
Password: secret
Port (default): 5432

Populate database

To populate the database from the dump file, we first need to create an actual database. In this case, I will just name it db.

echo \"create database db;\" | psql -h localhost -p 5432 -U user -W

The database will be created with localhost as host. The user and port are the same as above. A prompt will appear to enter your password to be able to continue.

Finally, we need to restore the database data from the dump file.

pg_restore --no-acl --no-owner -h localhost -p 5432 -d db database.dump -U user -W

We use the pg_restore command with some flags. In this case, the most important ones are referring to the port we defined, the database file, the user and what the local database name is.

Script

#! /bin/bash\nPG_USER=user\nPG_PASSWORD=secret\nPG_PORT=5432\nPG_DATABASE=db\n\nREMOTE_HOST=<remote-host>\nREMOTE_USER=<remote-user>\nREMOTE_DATABASE=<remote-database>\n\nFILE=./database.dump\n\nif [ ! -f \"$FILE\" ]; then\n    echo \"Database dump does not exist, will download. Enter password for database on prompt and wait, it might take some time...\"\n\n    export PGSSLMODE=require\n    pg_dump -h $REMOTE_HOST -d $REMOTE_DATABASE -U $REMOTE_USER -Fc -b -f $FILE\nfi\n\necho \"Starting Postgres container...\"\ndocker run -d --rm \n    -e POSTGRES_PASSWORD=$PG_PASSWORD -e POSTGRES_USER=$PG_USER \n    -p $PG_PORT:5432 \n    --name database postgres\n\necho \"Waiting for startup...\"\nsleep 3\n\necho \"Creating database...\"\necho \"create database $PG_DATABASE;\" | psql -h localhost -p $PG_PORT -U $PG_USER -W\n\necho \"Restoring data to database...\"\npg_restore --no-acl --no-owner -h localhost -p $PG_PORT -d $PG_DATABASE $FILE -U $PG_USER -W\n

"},"previous":{"author":"Anton Ödman","title":"Bash Essentials To Create Useful Automation Scripts","date":"2021-04-14","description":"Bash syntax is quite complex and can be hard to grasp. This is a guide, or cheat sheet, to give you all the bash functionalities that you need to write useful automation scripts.","tags":["bash"],"draft":false,"cover":"/covers/png/bash-essentials.png","slug":"bash-essentials","isIndexFile":false,"category":"bash","component":{},"preview":{"html":"

Bash is actually one of those languages I am most glad I learned. In my daily work, I tend to write a lot of Bash automations to ease some of my development processes. Even though the syntax might be a bit hard to understand at first, most scripts are not that difficult once you get the basics. And the best part is that Bash scripts can run on basically any environment.

","text":"Bash is actually one of those languages I am most glad I learned. In my daily work, I tend to write a lot of Bash automations to ease some of my development processes. Even though the syntax might be a bit hard to understand at first, most scripts are not that difficult once you get the basics. And the best part is that Bash scripts can run on basically any environment."},"readingTime":"12 min read","body":"

Why Bash

This guide will begin with some very basics, and continue with some more specific things you can do.

Basic usage

First, let’s go through some of the basics before we move onto the more exciting stuff.

Getting started

First of all, create a file. In this example, I will use a file called auto.sh. It will surve no special purpose besides showing some of the functionalities that you can use in your own scripting.

Create a shebang at the top, so that the environment knows how to run the script.

#! /bin/bash

Basics to run the script.

# add execution rights\nchmod +x ./auto.sh\n\n# run the script\n./auto.sh

Arguments

All arguments passed into a script (or a function) can be accessed in different ways.

# run commando\n./auto.sh first second\n\n# specific arguments\necho \"$0\"   # ./auto.sh\necho \"$1\"   # first\necho \"$2\"   # second\n\n# all arguments\necho \"$@\"   # first second\n\n# number of arguments\necho \"$#\"   # 2

Variables

Being able to save output into a variable is probably one of the most important steps. There are some different ways to save into a variable, and also to echo them out.

# save a string to a variable (no space)\nNAME=\"Anton\"\n\n# echo the NAME variable (qoutes are preferred)\necho $NAME\necho \"$NAME\"\necho \"${NAME}\"\n\n# echo with single qoutes will break the variable\necho 'hi $NAME' # => Hi $NAME

If an argument might be a bash command, you can execute it with the eval command.

# create command variable\nCOMMAND=\"ls -a\"\n\n# execute command\neval \"$COMMAND\"

Functions

Functions work like in any other languages, it’s an easy way to reuse code. The only difference is that there are no return statements. Instead, you have to echo to output and catch it outside of the function. You can add arguments to a function, exactly like above. Remeber to use the local keyword before a variable in a function, or else it will be in the global scope.

# create function with argument\ngreet() {\n    local person=\"$1\"\n\n    # echo without returning\n    echo \"Echo value to terminal\" >&2\n\n    # echo to return value\n    echo \"Hello ${person}\"\n}\n\n# call function\ngreet Anton\n\n# save output to a variable\ngreeting=$(greet Anton)\necho \"$greeting\"    # => Hello Anton

Loops

I basically only use the for loop, which looks like this. You’ll get a better usage example below.

# loop through an array of files\nfor file in $FILES; do\n    echo \"$file\"\ndone

Conditionals

Conditionals are… different with Bash. There are a lot of different options and possibilities, so I’ll just stick to the basics that I use the most.

# basic syntax\nif [[ X == Y ]]; then\n  echo \"same\"\nfi\n\n# file conditions\n[[ -z \"$STRING\" ]]      # empty string\n[[ -n \"$STRING\" ]]      # not empty string\n\n[[ STRING == STRING ]]  # equal\n[[ NUM -eq NUM ]]       # equal\n\n[[ STRING != STRING ]]  # not equal\n[[ NUM -ne NUM ]]       # not equal\n\n[[ -e FILE ]]           # exists\n[[ -f FILE ]]           # is a file\n[[ -d FILE ]]           # is a directory\n\n# example\nif [[ -e \"file.txt\" ]]; then\n  echo \"file exists\"\nfi

In some guides, you might see people use single [ and ]. It is preferred to use double.

Some conditionals that I tend to use in my scripts are:

# see if string includes 'Anton' somewhere\nif [[ \"$string\" == *\"Anton\"* ]]; then\n    echo \"Anton is in ${string}\"\nfi\n\n# see if a variable is set to true\nif [[ $WORK == true ]]; then\n    echo \"Is true\"\nelse\n    echo \"Is false\"\nfi\n\n# see if a package is installed\nif [[ $(command -v grep) ]]; then\n    echo \"Grep already installed\"\nfi

Advanced usage

I think that covers some of the basics, it’s time to get into the more useful stuff. Or, at least the stuff that is not basic language syntax.

Passing argument flags into a script

Sometimes, we want to pass arguments flags like --all or maybe --greeting hello into our scripts. In this example we will pass those to into a script and see how we should handle them.

In this case:

--all is a boolean that specifies that we should use all of something.
--greeting hello is the greeting we should use, which in this case is hello.

We need to save all as a boolean and the greeting as a value, which we need to fetch with a loop.

# usage\n./auto.sh --all --greeting hello\n\n# variables to save the arguments too\nALL=false\nGREETING=\n\n# fetch the variables\nwhile [ \"$1\" != \"\" ]; do\n    case $1 in\n    --all)\n        ALL=true\n        ;;\n    -g | --greeting)\n        shift\n        GREETING=$1\n        ;;\n    *)\n        echo \"Invalid parameter\"\n        exit 1\n        ;;\n    esac\n    shift\ndone\n\n# check if parameters are set\nif [[ \"$GREETING\" == \"\" ]]; then\n    echo \"You must provide a greeting\";\n    exit 1;\nfi\n\nif [[ $ALL == true ]]; then\n    # all is true\nelse\n    # all is false\nfi

This might look a bit complicated. But what we basically do is loop through the first argument ($1) in the arguments array all the time. If the argument is --all we set ALL to true and then use shift to remove the first argument and replace it with the next one. You can read more about this in my blog.

Finding files

When automating things, you’ll most likely want to find some files to work with. This is a basic way to do that.

# find all .json files in: /directory/<any folder>/<any filename>.json\nFILES=./directory/*/*.json\n\n# find all .json files in the /directory folder (nested as well)\nFILES=$(find ./directory -type f -name \"*.json\")\n\n# loop through files\nfor file in $FILES; do\n    # print the file content\n    cat \"$file\"\n\n    # save content to variable\n    content=$(cat \"$file\")\n\n    # content logic\n    ...\n\n    # save to new file\n    echo \"$new_content\" >> new_file.json\ndone

You can read more about this subject here if you need a clearer explanation of what happens.

Replacing

Another very important part is replacing strings or variables. For example, maybe we want all the greetings in a file changed from Hi to Hello, or whatever you might fancy.

We can do this in two ways, either with string manipulation or with sed.

String manipulation uses / to replace the first occurance of the word, or // to replace all occurences.

# sentence must be a variable to work\nsentence=\"hi everone, hi anton\"\necho \"${sentence/hi/hello}\"     # => hello everyone, hi anton\necho \"${sentence//hi/hello}\"     # => hello everyone, hello anton

Sed is a bit different, but more customizable.

# you can use variables or strings\nsentence=\"hi everone, hi anton\"\nsed 's/hi/hello/' <<<\"hi everyone, hi anton\"    # => hello everyone, hi anton\nsed 's/hi/hello/g' <<<\"$sentence\"               # => hello everyone, hello anton\n\n# replace in files\nsed -i 's/hi/hello/g'  sentence.txt\n\n# use another separator if you strings includes /\nsed -i 's|hi|hello|g'  sentence.txt

You can read more about replacing strings here.

Example

So that is basically it, with these basics I have created quite a lot of different automation scripts. Just to finish it off, I’ll show one very basic example.

In this example, we will search for all .txt files in a folder, and if they include the word Anton, we want to replace every word first to second.

#! /bin/bash\n\n# find all files in the current directory (and nesting) that ends with .txt\nFILES=$(find . -type f -name \"*.txt\")\n\n# loop through files\nfor file in $FILES; do\n    echo \"Looking through file: ${file}\"\n\n    content=$(cat \"$file\")\n\n    if [[ \"$content\" != *\"Anton\"* ]]; then\n        echo \"Word Anton is not in script, skipping...\"\n        continue;\n    fi\n\n    sed -i 's/first/second/g' \"$file\"\n\n    echo \"File updated!\"\ndone\n\necho \"Done!\"

The output might look something like this:

$\"Output$

This script might now be to useful right now, but as I said, this is just a simple example to get you up and running.

"}},{"author":"Anton Ödman","title":"Bash Essentials To Create Useful Automation Scripts","date":"2021-04-14","description":"Bash syntax is quite complex and can be hard to grasp. This is a guide, or cheat sheet, to give you all the bash functionalities that you need to write useful automation scripts.","tags":["bash"],"draft":false,"cover":"/covers/png/bash-essentials.png","slug":"bash-essentials","isIndexFile":false,"category":"bash","component":{},"preview":{"html":"

Why Bash

This guide will begin with some very basics, and continue with some more specific things you can do.

Basic usage

First, let’s go through some of the basics before we move onto the more exciting stuff.

Getting started

First of all, create a file. In this example, I will use a file called auto.sh. It will surve no special purpose besides showing some of the functionalities that you can use in your own scripting.

Create a shebang at the top, so that the environment knows how to run the script.

#! /bin/bash

Basics to run the script.

# add execution rights\nchmod +x ./auto.sh\n\n# run the script\n./auto.sh

Arguments

All arguments passed into a script (or a function) can be accessed in different ways.

# run commando\n./auto.sh first second\n\n# specific arguments\necho \"$0\"   # ./auto.sh\necho \"$1\"   # first\necho \"$2\"   # second\n\n# all arguments\necho \"$@\"   # first second\n\n# number of arguments\necho \"$#\"   # 2

Variables

Being able to save output into a variable is probably one of the most important steps. There are some different ways to save into a variable, and also to echo them out.

# save a string to a variable (no space)\nNAME=\"Anton\"\n\n# echo the NAME variable (qoutes are preferred)\necho $NAME\necho \"$NAME\"\necho \"${NAME}\"\n\n# echo with single qoutes will break the variable\necho 'hi $NAME' # => Hi $NAME

If an argument might be a bash command, you can execute it with the eval command.

# create command variable\nCOMMAND=\"ls -a\"\n\n# execute command\neval \"$COMMAND\"

Functions

# create function with argument\ngreet() {\n    local person=\"$1\"\n\n    # echo without returning\n    echo \"Echo value to terminal\" >&2\n\n    # echo to return value\n    echo \"Hello ${person}\"\n}\n\n# call function\ngreet Anton\n\n# save output to a variable\ngreeting=$(greet Anton)\necho \"$greeting\"    # => Hello Anton

Loops

I basically only use the for loop, which looks like this. You’ll get a better usage example below.

# loop through an array of files\nfor file in $FILES; do\n    echo \"$file\"\ndone

Conditionals

Conditionals are… different with Bash. There are a lot of different options and possibilities, so I’ll just stick to the basics that I use the most.

# basic syntax\nif [[ X == Y ]]; then\n  echo \"same\"\nfi\n\n# file conditions\n[[ -z \"$STRING\" ]]      # empty string\n[[ -n \"$STRING\" ]]      # not empty string\n\n[[ STRING == STRING ]]  # equal\n[[ NUM -eq NUM ]]       # equal\n\n[[ STRING != STRING ]]  # not equal\n[[ NUM -ne NUM ]]       # not equal\n\n[[ -e FILE ]]           # exists\n[[ -f FILE ]]           # is a file\n[[ -d FILE ]]           # is a directory\n\n# example\nif [[ -e \"file.txt\" ]]; then\n  echo \"file exists\"\nfi

In some guides, you might see people use single [ and ]. It is preferred to use double.

Some conditionals that I tend to use in my scripts are:

# see if string includes 'Anton' somewhere\nif [[ \"$string\" == *\"Anton\"* ]]; then\n    echo \"Anton is in ${string}\"\nfi\n\n# see if a variable is set to true\nif [[ $WORK == true ]]; then\n    echo \"Is true\"\nelse\n    echo \"Is false\"\nfi\n\n# see if a package is installed\nif [[ $(command -v grep) ]]; then\n    echo \"Grep already installed\"\nfi

Advanced usage

I think that covers some of the basics, it’s time to get into the more useful stuff. Or, at least the stuff that is not basic language syntax.

Passing argument flags into a script

Sometimes, we want to pass arguments flags like --all or maybe --greeting hello into our scripts. In this example we will pass those to into a script and see how we should handle them.

In this case:

--all is a boolean that specifies that we should use all of something.
--greeting hello is the greeting we should use, which in this case is hello.

We need to save all as a boolean and the greeting as a value, which we need to fetch with a loop.

# usage\n./auto.sh --all --greeting hello\n\n# variables to save the arguments too\nALL=false\nGREETING=\n\n# fetch the variables\nwhile [ \"$1\" != \"\" ]; do\n    case $1 in\n    --all)\n        ALL=true\n        ;;\n    -g | --greeting)\n        shift\n        GREETING=$1\n        ;;\n    *)\n        echo \"Invalid parameter\"\n        exit 1\n        ;;\n    esac\n    shift\ndone\n\n# check if parameters are set\nif [[ \"$GREETING\" == \"\" ]]; then\n    echo \"You must provide a greeting\";\n    exit 1;\nfi\n\nif [[ $ALL == true ]]; then\n    # all is true\nelse\n    # all is false\nfi

Finding files

When automating things, you’ll most likely want to find some files to work with. This is a basic way to do that.

# find all .json files in: /directory/<any folder>/<any filename>.json\nFILES=./directory/*/*.json\n\n# find all .json files in the /directory folder (nested as well)\nFILES=$(find ./directory -type f -name \"*.json\")\n\n# loop through files\nfor file in $FILES; do\n    # print the file content\n    cat \"$file\"\n\n    # save content to variable\n    content=$(cat \"$file\")\n\n    # content logic\n    ...\n\n    # save to new file\n    echo \"$new_content\" >> new_file.json\ndone

You can read more about this subject here if you need a clearer explanation of what happens.

Replacing

Another very important part is replacing strings or variables. For example, maybe we want all the greetings in a file changed from Hi to Hello, or whatever you might fancy.

We can do this in two ways, either with string manipulation or with sed.

String manipulation uses / to replace the first occurance of the word, or // to replace all occurences.

# sentence must be a variable to work\nsentence=\"hi everone, hi anton\"\necho \"${sentence/hi/hello}\"     # => hello everyone, hi anton\necho \"${sentence//hi/hello}\"     # => hello everyone, hello anton

Sed is a bit different, but more customizable.

# you can use variables or strings\nsentence=\"hi everone, hi anton\"\nsed 's/hi/hello/' <<<\"hi everyone, hi anton\"    # => hello everyone, hi anton\nsed 's/hi/hello/g' <<<\"$sentence\"               # => hello everyone, hello anton\n\n# replace in files\nsed -i 's/hi/hello/g'  sentence.txt\n\n# use another separator if you strings includes /\nsed -i 's|hi|hello|g'  sentence.txt

You can read more about replacing strings here.

Example

So that is basically it, with these basics I have created quite a lot of different automation scripts. Just to finish it off, I’ll show one very basic example.

In this example, we will search for all .txt files in a folder, and if they include the word Anton, we want to replace every word first to second.

#! /bin/bash\n\n# find all files in the current directory (and nesting) that ends with .txt\nFILES=$(find . -type f -name \"*.txt\")\n\n# loop through files\nfor file in $FILES; do\n    echo \"Looking through file: ${file}\"\n\n    content=$(cat \"$file\")\n\n    if [[ \"$content\" != *\"Anton\"* ]]; then\n        echo \"Word Anton is not in script, skipping...\"\n        continue;\n    fi\n\n    sed -i 's/first/second/g' \"$file\"\n\n    echo \"File updated!\"\ndone\n\necho \"Done!\"

The output might look something like this:

$\"Output$

This script might now be to useful right now, but as I said, this is just a simple example to get you up and running.

","next":{"author":"Anton Ödman","title":"Get Started With Awk in Bash","date":"2021-07-15","description":"Awk can be very useful when working with text files in Bash. This is a short cheat sheet on some of the commands you'll most often use.","tags":["bash"],"draft":false,"cover":"/covers/png/get-started-with-awk.png","slug":"get-started-with-awk","isIndexFile":false,"category":"bash","component":{},"preview":{"html":"

To use awk, you often work with textfiles. The text file could look something like this.

","text":"To use awk, you often work with textfiles. The text file could look something like this."},"readingTime":"4 min read","body":"

The Basics of awk

To use awk, you often work with textfiles. The text file could look something like this.

ajay manager account 45000\nsunil clerk account 25000\nvarun manager sales 50000\namit manager account 47000\ntarun peon sales 15000\ndeepak clerk sales 23000\nsunil peon sales 13000\nsatvik director purchase 80000

What awk basically does, is handle each line, one by one. It also separates the fields in a line so you can get your specified value. By default, you’ll use whitespace as a separator.

The syntax should look something like this

# with a file\nawk '{print}' test.txt\n\n# with pipes\necho \"some text\" | awk '{print}'

It is important to use ' instead of " to make it work.

Printing fields

 $1    $2      $3     $4\najay manager account 45000

If you want to print the whole line, you’ll use $0. Here are some examples of how you can use it.

# print whole line\nawk '{print $0}' test.txt\n\n# print only first field\nawk '{print $1}' test.txt\n\n# print first and last\nawk '{print $1, $4}' test.txt

You can also filter to write fields that only contain a specific text.

# print only lines containing the word \"manager\"\nawk '/manager/ {print}' test.txt\n\n# print only lines containing the word \"manager\" or \"clerk2\nawk '/manager|clerk/ {print}' test.txt

Built-in variables

There are some variables you can use as well.

NR - line number
NF - number of fields in each line
FS - field separator (whitespace as default)
RS - record separator (newline as default).
OFS - output field separator (blank space is default).
ORS - output record separator

Some basic usages with the variables

# display last field only\nawk '{print $NF}' test.txt\n\n# display only first line\nawk 'NR==1 {print $0}' test.txt\n\n# display line from 3 to 6\nawk 'NR==3, NR==6 {print $0}' test.txt\n\n# display each line with line number before\nawk '{print $NR,$0}' test.txt\n\n# print all lines with more than 0 fields\nawk 'NF > 0' test.txt\n\n# print lines with more than 0 characters\nawk 'length($0) > 10' test.txt\n\n# print line if first field is \"ajay\"\nawk '$1 == \"ajay\" {print $0}' test.txt

Change field separator

By dafult, each field is separated by a whitespace. If you want to use something else, you can specify it with the F flag.

# use = as separator\nawk -F '=' '{print $1}'\n\n# use + or = as separator\nawk -F '[+=]' '{print $1}'

"},"previous":{"author":"Anton Ödman","title":"How To Setup a Linux (Ubuntu) Server On Hetzner","date":"2021-04-09","description":"A remote linux server could be very useful. Hetzner provides cheap and reliable servers that are easy to maintain. This is a short guide on how to setup one easily.","tags":["hosting"],"draft":false,"cover":"/covers/png/setup-server-hetzner.png","slug":"setup-server-hetzner","isIndexFile":false,"category":"hosting","component":{},"preview":{"html":"

I have had some different services to host linux servers, but I always keep coming back to Hetzner. They offer great support, are among the cheapest, have an awesome API and host close to me in Europe.

","text":"I have had some different services to host linux servers, but I always keep coming back to Hetzner. They offer great support, are among the cheapest, have an awesome API and host close to me in Europe."},"readingTime":"3 min read","body":"

Getting started

First of, head over to their web page to create an account. Once signed in, go to their cloud console.

Create server

$\"cloud$

It might look something like this, create a new project or go to an existing one if you already have one, press the Add Server button to create your server.

Choose location, what kind of image you want to have (I’ll go with Ubuntu for this guide).

$\"create$

There are several different types of servers, depending on your needs. You’ll see their prices and details in the table. I’ll just go with the cheapest on, CX11 for now.

$\"create$

Create SSH key

I’ll skip features like Volume, Network, Firewall and Backups in this guide. It’s not necessary to get started. You’ll probably want to add a SSH Key for easier access though.

$\"create$

Create a ssh key on your local computer with the following command. Save it to the standard location and use a password if you want to.

ssh-keygen -t rsa -b 4096 -C \"your_email@example.com\"

We will need to copy the content of the public SSH key to our Hetzner server.

cat ~/.ssh/id_rsa.pub

Print the content and copy it to use it in Hetzner.

$\"hetzner$

Access the server

Name your server and press Create & Buy Now at the bottom. You’ll see the price at the bottom as well. You’ll see your server being created, it might take a few seconds. Click on it to access the console.

$\"servers$

To get the root password, press the Rescue button on the menu and select Reset Root Password.

$\"rescue$

Save your new root password. We will need it to sign in.

Go to your terminal and use the following command to access your server via SSH (you can get your IP address the the cloud console for your server, at the top, called IPv4).

ssh root@<ip-address>

This allows you to sign in to your root account. Finally, we just need to create a new account that you can sign in to instead of the root user. When signed in to the remote server, add the following commands.

# add user\nadduser <name>\n\n# add to sudo group\nusermod -aG sudo <name>\n\n# test if it works\nsu - username\nsudo ls -la /root

That’s it, you should now have a working remote Linux server. Access it with your new user like this.

ssh <name>@<ip-address>

"}},{"author":"Anton Ödman","title":"How To Setup a Linux (Ubuntu) Server On Hetzner","date":"2021-04-09","description":"A remote linux server could be very useful. Hetzner provides cheap and reliable servers that are easy to maintain. This is a short guide on how to setup one easily.","tags":["hosting"],"draft":false,"cover":"/covers/png/setup-server-hetzner.png","slug":"setup-server-hetzner","isIndexFile":false,"category":"hosting","component":{},"preview":{"html":"

Getting started

First of, head over to their web page to create an account. Once signed in, go to their cloud console.

Create server

$\"cloud$

It might look something like this, create a new project or go to an existing one if you already have one, press the Add Server button to create your server.

Choose location, what kind of image you want to have (I’ll go with Ubuntu for this guide).

$\"create$

There are several different types of servers, depending on your needs. You’ll see their prices and details in the table. I’ll just go with the cheapest on, CX11 for now.

$\"create$

Create SSH key

I’ll skip features like Volume, Network, Firewall and Backups in this guide. It’s not necessary to get started. You’ll probably want to add a SSH Key for easier access though.

$\"create$

Create a ssh key on your local computer with the following command. Save it to the standard location and use a password if you want to.

ssh-keygen -t rsa -b 4096 -C \"your_email@example.com\"

We will need to copy the content of the public SSH key to our Hetzner server.

cat ~/.ssh/id_rsa.pub

Print the content and copy it to use it in Hetzner.

$\"hetzner$

Access the server

$\"servers$

To get the root password, press the Rescue button on the menu and select Reset Root Password.

$\"rescue$

Save your new root password. We will need it to sign in.

Go to your terminal and use the following command to access your server via SSH (you can get your IP address the the cloud console for your server, at the top, called IPv4).

ssh root@<ip-address>

# add user\nadduser <name>\n\n# add to sudo group\nusermod -aG sudo <name>\n\n# test if it works\nsu - username\nsudo ls -la /root

That’s it, you should now have a working remote Linux server. Access it with your new user like this.

ssh <name>@<ip-address>

","next":{"author":"Anton Ödman","title":"Bash Essentials To Create Useful Automation Scripts","date":"2021-04-14","description":"Bash syntax is quite complex and can be hard to grasp. This is a guide, or cheat sheet, to give you all the bash functionalities that you need to write useful automation scripts.","tags":["bash"],"draft":false,"cover":"/covers/png/bash-essentials.png","slug":"bash-essentials","isIndexFile":false,"category":"bash","component":{},"preview":{"html":"

Why Bash

This guide will begin with some very basics, and continue with some more specific things you can do.

Basic usage

First, let’s go through some of the basics before we move onto the more exciting stuff.

Getting started

First of all, create a file. In this example, I will use a file called auto.sh. It will surve no special purpose besides showing some of the functionalities that you can use in your own scripting.

Create a shebang at the top, so that the environment knows how to run the script.

#! /bin/bash

Basics to run the script.

# add execution rights\nchmod +x ./auto.sh\n\n# run the script\n./auto.sh

Arguments

All arguments passed into a script (or a function) can be accessed in different ways.

# run commando\n./auto.sh first second\n\n# specific arguments\necho \"$0\"   # ./auto.sh\necho \"$1\"   # first\necho \"$2\"   # second\n\n# all arguments\necho \"$@\"   # first second\n\n# number of arguments\necho \"$#\"   # 2

Variables

Being able to save output into a variable is probably one of the most important steps. There are some different ways to save into a variable, and also to echo them out.

# save a string to a variable (no space)\nNAME=\"Anton\"\n\n# echo the NAME variable (qoutes are preferred)\necho $NAME\necho \"$NAME\"\necho \"${NAME}\"\n\n# echo with single qoutes will break the variable\necho 'hi $NAME' # => Hi $NAME

If an argument might be a bash command, you can execute it with the eval command.

# create command variable\nCOMMAND=\"ls -a\"\n\n# execute command\neval \"$COMMAND\"

Functions

# create function with argument\ngreet() {\n    local person=\"$1\"\n\n    # echo without returning\n    echo \"Echo value to terminal\" >&2\n\n    # echo to return value\n    echo \"Hello ${person}\"\n}\n\n# call function\ngreet Anton\n\n# save output to a variable\ngreeting=$(greet Anton)\necho \"$greeting\"    # => Hello Anton

Loops

I basically only use the for loop, which looks like this. You’ll get a better usage example below.

# loop through an array of files\nfor file in $FILES; do\n    echo \"$file\"\ndone

Conditionals

Conditionals are… different with Bash. There are a lot of different options and possibilities, so I’ll just stick to the basics that I use the most.

# basic syntax\nif [[ X == Y ]]; then\n  echo \"same\"\nfi\n\n# file conditions\n[[ -z \"$STRING\" ]]      # empty string\n[[ -n \"$STRING\" ]]      # not empty string\n\n[[ STRING == STRING ]]  # equal\n[[ NUM -eq NUM ]]       # equal\n\n[[ STRING != STRING ]]  # not equal\n[[ NUM -ne NUM ]]       # not equal\n\n[[ -e FILE ]]           # exists\n[[ -f FILE ]]           # is a file\n[[ -d FILE ]]           # is a directory\n\n# example\nif [[ -e \"file.txt\" ]]; then\n  echo \"file exists\"\nfi

In some guides, you might see people use single [ and ]. It is preferred to use double.

Some conditionals that I tend to use in my scripts are:

# see if string includes 'Anton' somewhere\nif [[ \"$string\" == *\"Anton\"* ]]; then\n    echo \"Anton is in ${string}\"\nfi\n\n# see if a variable is set to true\nif [[ $WORK == true ]]; then\n    echo \"Is true\"\nelse\n    echo \"Is false\"\nfi\n\n# see if a package is installed\nif [[ $(command -v grep) ]]; then\n    echo \"Grep already installed\"\nfi

Advanced usage

I think that covers some of the basics, it’s time to get into the more useful stuff. Or, at least the stuff that is not basic language syntax.

Passing argument flags into a script

Sometimes, we want to pass arguments flags like --all or maybe --greeting hello into our scripts. In this example we will pass those to into a script and see how we should handle them.

In this case:

--all is a boolean that specifies that we should use all of something.
--greeting hello is the greeting we should use, which in this case is hello.

We need to save all as a boolean and the greeting as a value, which we need to fetch with a loop.

# usage\n./auto.sh --all --greeting hello\n\n# variables to save the arguments too\nALL=false\nGREETING=\n\n# fetch the variables\nwhile [ \"$1\" != \"\" ]; do\n    case $1 in\n    --all)\n        ALL=true\n        ;;\n    -g | --greeting)\n        shift\n        GREETING=$1\n        ;;\n    *)\n        echo \"Invalid parameter\"\n        exit 1\n        ;;\n    esac\n    shift\ndone\n\n# check if parameters are set\nif [[ \"$GREETING\" == \"\" ]]; then\n    echo \"You must provide a greeting\";\n    exit 1;\nfi\n\nif [[ $ALL == true ]]; then\n    # all is true\nelse\n    # all is false\nfi

Finding files

When automating things, you’ll most likely want to find some files to work with. This is a basic way to do that.

# find all .json files in: /directory/<any folder>/<any filename>.json\nFILES=./directory/*/*.json\n\n# find all .json files in the /directory folder (nested as well)\nFILES=$(find ./directory -type f -name \"*.json\")\n\n# loop through files\nfor file in $FILES; do\n    # print the file content\n    cat \"$file\"\n\n    # save content to variable\n    content=$(cat \"$file\")\n\n    # content logic\n    ...\n\n    # save to new file\n    echo \"$new_content\" >> new_file.json\ndone

You can read more about this subject here if you need a clearer explanation of what happens.

Replacing

Another very important part is replacing strings or variables. For example, maybe we want all the greetings in a file changed from Hi to Hello, or whatever you might fancy.

We can do this in two ways, either with string manipulation or with sed.

String manipulation uses / to replace the first occurance of the word, or // to replace all occurences.

# sentence must be a variable to work\nsentence=\"hi everone, hi anton\"\necho \"${sentence/hi/hello}\"     # => hello everyone, hi anton\necho \"${sentence//hi/hello}\"     # => hello everyone, hello anton

Sed is a bit different, but more customizable.

# you can use variables or strings\nsentence=\"hi everone, hi anton\"\nsed 's/hi/hello/' <<<\"hi everyone, hi anton\"    # => hello everyone, hi anton\nsed 's/hi/hello/g' <<<\"$sentence\"               # => hello everyone, hello anton\n\n# replace in files\nsed -i 's/hi/hello/g'  sentence.txt\n\n# use another separator if you strings includes /\nsed -i 's|hi|hello|g'  sentence.txt

You can read more about replacing strings here.

Example

So that is basically it, with these basics I have created quite a lot of different automation scripts. Just to finish it off, I’ll show one very basic example.

In this example, we will search for all .txt files in a folder, and if they include the word Anton, we want to replace every word first to second.

#! /bin/bash\n\n# find all files in the current directory (and nesting) that ends with .txt\nFILES=$(find . -type f -name \"*.txt\")\n\n# loop through files\nfor file in $FILES; do\n    echo \"Looking through file: ${file}\"\n\n    content=$(cat \"$file\")\n\n    if [[ \"$content\" != *\"Anton\"* ]]; then\n        echo \"Word Anton is not in script, skipping...\"\n        continue;\n    fi\n\n    sed -i 's/first/second/g' \"$file\"\n\n    echo \"File updated!\"\ndone\n\necho \"Done!\"

The output might look something like this:

$\"Output$

This script might now be to useful right now, but as I said, this is just a simple example to get you up and running.

"},"previous":{"author":"Anton Ödman","title":"Setup a Remote Development Environment with Linux and VS Code","date":"2021-04-09","description":"Setting up a development environment can be quite tedious. Especially if you want to use it remotely. This is a quick get started guide so you can access your workspace from anywhere, using Ubuntu, VS Code, and SSH.","tags":["tools"],"draft":false,"cover":"/covers/png/remote-development-linux-vscode.png","slug":"remote-development-linux-vscode","isIndexFile":false,"category":"tools","component":{},"preview":{"html":"

Working in a remote workplace has a lot of advantages. Modern tools and internet connection allows you do so in realtime, and there are actually a lot of benefits in actually doing so:

","text":"Working in a remote workplace has a lot of advantages. Modern tools and internet connection allows you do so in realtime, and there are actually a lot of benefits in actually doing so:"},"readingTime":"3 min read","body":"

Working in a remote workplace has a lot of advantages. Modern tools and internet connection allows you do so in realtime, and there are actually a lot of benefits in actually doing so:

A cheap monthly cost for amazing performance.
Work from anywhere, access the same environment.
Work with a Linux environment, which most servers use.
It’s possible to use a “cheaper” computer as loading occurs on the server.
Faster build times and internet speed.

VS Code has an extension that’s called Remote - SSH, which allows you to do work remotely, and it’s quite easy to set up and connect to. You only use SSH which is installed as default in most server environments.

Get started

First of all, we need a server. You can read my guide on how to easily set up a Linux server, using Hetzner. It’s, in my opinion, the best you can get for a cheap price.

You also need to install the extension mentioned above, Remote - SSH, as you need it to connect to your server and use it as if it was local.

$\"remote$

Connect to your server

Connecting to your server is very easy, once the extension is installed, you’ll get a new symbol down your left corner.

$\"vs$

Press it to access the SSH menu, which allows you to do a lot of stuff.

$\"ssh$

To connect to your server, simply press Remote-SSH: Connect to Host.... You can choose to enter the SSH command directly or add a new SSH Host so you easily can save it for later.

$\"select$

Press Add new SSH Host... to add your connection and save it. You write the command like this:

ssh <user>@<ip-address> -A

The -A flag is used for port forwarding, which you probably need to forward your applications from your server to your own computer to test them out. I’ll show you how to do that later.

Once added, your server will appear in the list in the SSH menu which we accessed before. Connect to your server by simply pressing it and writing your password in the upcoming prompt.

$\"password$

To show you that you have been connected successfully, the bottom left button will show your hostname.

Access your project

$\"host$

To access your project (which you probably already have downloaded to your server using git), choose Open Folder and go to your project.

$\"open$

You might need to write in your password again, but now you have access to your server’s files like they are at your own computer. And the terminal is connected to the terminal of the server.

$\"files$

Worth mentioning is that you need to install all extensions on your remote server, which is very simple. You can actually just go to the extension bar in the side menu and browse your installed extensions. If you might need them on your remote server, it will clearly show in the list. Some are not necessary, like themes and fonts, as they are on your local computer.

$\"install$

Port forward to your local machine

To be able to use your applications when you develop remotely, you’ll need to forward to ports that are used when, for example, serving a web page. VS Code handles this automatically. Just run your command serve your web application, in this case, npm run dev for me, to get a prompt to open it on your local computer.

$\"prompt$

If you want, you can manage your port forwards down at the terminal window.

$\"ports$

That’s it. That is how you set up your remote server for development.

"}},{"author":"Anton Ödman","title":"Setup a Remote Development Environment with Linux and VS Code","date":"2021-04-09","description":"Setting up a development environment can be quite tedious. Especially if you want to use it remotely. This is a quick get started guide so you can access your workspace from anywhere, using Ubuntu, VS Code, and SSH.","tags":["tools"],"draft":false,"cover":"/covers/png/remote-development-linux-vscode.png","slug":"remote-development-linux-vscode","isIndexFile":false,"category":"tools","component":{},"preview":{"html":"

Working in a remote workplace has a lot of advantages. Modern tools and internet connection allows you do so in realtime, and there are actually a lot of benefits in actually doing so:

A cheap monthly cost for amazing performance.
Work from anywhere, access the same environment.
Work with a Linux environment, which most servers use.
It’s possible to use a “cheaper” computer as loading occurs on the server.
Faster build times and internet speed.

Get started

First of all, we need a server. You can read my guide on how to easily set up a Linux server, using Hetzner. It’s, in my opinion, the best you can get for a cheap price.

You also need to install the extension mentioned above, Remote - SSH, as you need it to connect to your server and use it as if it was local.

$\"remote$

Connect to your server

Connecting to your server is very easy, once the extension is installed, you’ll get a new symbol down your left corner.

$\"vs$

Press it to access the SSH menu, which allows you to do a lot of stuff.

$\"ssh$

To connect to your server, simply press Remote-SSH: Connect to Host.... You can choose to enter the SSH command directly or add a new SSH Host so you easily can save it for later.

$\"select$

Press Add new SSH Host... to add your connection and save it. You write the command like this:

ssh <user>@<ip-address> -A

The -A flag is used for port forwarding, which you probably need to forward your applications from your server to your own computer to test them out. I’ll show you how to do that later.

Once added, your server will appear in the list in the SSH menu which we accessed before. Connect to your server by simply pressing it and writing your password in the upcoming prompt.

$\"password$

To show you that you have been connected successfully, the bottom left button will show your hostname.

Access your project

$\"host$

To access your project (which you probably already have downloaded to your server using git), choose Open Folder and go to your project.

$\"open$

You might need to write in your password again, but now you have access to your server’s files like they are at your own computer. And the terminal is connected to the terminal of the server.

$\"files$

$\"install$

Port forward to your local machine

$\"prompt$

If you want, you can manage your port forwards down at the terminal window.

$\"ports$

That’s it. That is how you set up your remote server for development.

","next":{"author":"Anton Ödman","title":"How To Setup a Linux (Ubuntu) Server On Hetzner","date":"2021-04-09","description":"A remote linux server could be very useful. Hetzner provides cheap and reliable servers that are easy to maintain. This is a short guide on how to setup one easily.","tags":["hosting"],"draft":false,"cover":"/covers/png/setup-server-hetzner.png","slug":"setup-server-hetzner","isIndexFile":false,"category":"hosting","component":{},"preview":{"html":"

Getting started

First of, head over to their web page to create an account. Once signed in, go to their cloud console.

Create server

$\"cloud$

It might look something like this, create a new project or go to an existing one if you already have one, press the Add Server button to create your server.

Choose location, what kind of image you want to have (I’ll go with Ubuntu for this guide).

$\"create$

There are several different types of servers, depending on your needs. You’ll see their prices and details in the table. I’ll just go with the cheapest on, CX11 for now.

$\"create$

Create SSH key

I’ll skip features like Volume, Network, Firewall and Backups in this guide. It’s not necessary to get started. You’ll probably want to add a SSH Key for easier access though.

$\"create$

Create a ssh key on your local computer with the following command. Save it to the standard location and use a password if you want to.

ssh-keygen -t rsa -b 4096 -C \"your_email@example.com\"

We will need to copy the content of the public SSH key to our Hetzner server.

cat ~/.ssh/id_rsa.pub

Print the content and copy it to use it in Hetzner.

$\"hetzner$

Access the server

$\"servers$

To get the root password, press the Rescue button on the menu and select Reset Root Password.

$\"rescue$

Save your new root password. We will need it to sign in.

Go to your terminal and use the following command to access your server via SSH (you can get your IP address the the cloud console for your server, at the top, called IPv4).

ssh root@<ip-address>

# add user\nadduser <name>\n\n# add to sudo group\nusermod -aG sudo <name>\n\n# test if it works\nsu - username\nsudo ls -la /root

That’s it, you should now have a working remote Linux server. Access it with your new user like this.

ssh <name>@<ip-address>

"},"previous":{"author":"Anton Ödman","title":"Replace Text or a String in Bash","date":"2021-03-31","description":"Sometimes you might need to replace some text in a string - the bash allows you to do so easily. This is a short summary on how you can do that.","tags":["bash"],"draft":false,"cover":"/covers/png/replace-text-bash.png","slug":"replace-text-bash","isIndexFile":false,"category":"bash","component":{},"preview":{"html":"

Replacing a string in Bash can be done in several different ways. The two most common are bash string manipulation as well as sed. Here are some ways you can do that.

","text":"Replacing a string in Bash can be done in several different ways. The two most common are bash string manipulation as well as sed. Here are some ways you can do that."},"readingTime":"3 min read","body":"

Replacing a String

Replacing a string in Bash can be done in several different ways. The two most common are bash string manipulation as well as sed. Here are some ways you can do that.

The example we want to change is like this:

sentence        =   \"This is the first sentence.\"\nold             =   \"first\"\nnew             =   \"second\"\nexpected        =   \"This is the second sentence.\"

So basically, we want to make this transformation:

\"This is the first sentence.\" => \"This is the second sentence.\"

Using Bash String Manipulation

In this method, you need to sentence to be a variable, like above. You cannot pass only a string. Both echo produces the same successful result.

sentence=\"This is the first sentence.\"\nold=\"first\"\nnew=\"second\"\n\n# replace first occurance\necho \"${sentence/first/second}\"     # with normal strings\necho \"${sentence/${old}/${new}}\"    # with variables\n\n# replace all occurences\necho \"${sentence//first/second}\"     # with normal strings\necho \"${sentence//${old}/${new}}\"    # with variables

Using Sed

Using sed is not much unlike above, however, the syntax is a little bit different. And it is way more customizable. I would recommend sed when working with files and the bash string manipulation for variables.

The -i flag in the command means that we replace the original file.

sentence=\"This is the first sentence.\"\nsentenceFile=sentence.txt\nold=\"first\"\nnew=\"second\"\n\n# variables\nsed 's/first/second/g' <<<\"This is the first sentence\"\nsed \"s/${old}/${new}/g\" <<<\"$sentence\"\n\n# file\nsed -i 's/first/second/g'  sentence.txt\nsed -i \"s/${old}/${new}/g\" \"$sentenceFile\"\n\n# alternative way if your strings/variables includes '/'\nsed -i \"s|${old}|${new}|g\" \"$sentenceFile\"\nsed -i \"s:${old}:${new}:g\" \"$sentenceFile\"\n\n# replace only first occurance if multiple\nsed -i \"s/${old}/${new}/\" \"$sentenceFile\"

Notice that we use "" syntax to be able to use variables in commands, while '' only allow for strings.

You can change your separator (/ as standard) if your string includes it. You could use : or | instead. Also, the g stands for global and changes all occurences. If you omit that, only the first word will be replaced.

"}},{"author":"Anton Ödman","title":"Replace Text or a String in Bash","date":"2021-03-31","description":"Sometimes you might need to replace some text in a string - the bash allows you to do so easily. This is a short summary on how you can do that.","tags":["bash"],"draft":false,"cover":"/covers/png/replace-text-bash.png","slug":"replace-text-bash","isIndexFile":false,"category":"bash","component":{},"preview":{"html":"

Replacing a string in Bash can be done in several different ways. The two most common are bash string manipulation as well as sed. Here are some ways you can do that.

Replacing a String

Replacing a string in Bash can be done in several different ways. The two most common are bash string manipulation as well as sed. Here are some ways you can do that.

The example we want to change is like this:

sentence        =   \"This is the first sentence.\"\nold             =   \"first\"\nnew             =   \"second\"\nexpected        =   \"This is the second sentence.\"

So basically, we want to make this transformation:

\"This is the first sentence.\" => \"This is the second sentence.\"

Using Bash String Manipulation

In this method, you need to sentence to be a variable, like above. You cannot pass only a string. Both echo produces the same successful result.

sentence=\"This is the first sentence.\"\nold=\"first\"\nnew=\"second\"\n\n# replace first occurance\necho \"${sentence/first/second}\"     # with normal strings\necho \"${sentence/${old}/${new}}\"    # with variables\n\n# replace all occurences\necho \"${sentence//first/second}\"     # with normal strings\necho \"${sentence//${old}/${new}}\"    # with variables

Using Sed

The -i flag in the command means that we replace the original file.

sentence=\"This is the first sentence.\"\nsentenceFile=sentence.txt\nold=\"first\"\nnew=\"second\"\n\n# variables\nsed 's/first/second/g' <<<\"This is the first sentence\"\nsed \"s/${old}/${new}/g\" <<<\"$sentence\"\n\n# file\nsed -i 's/first/second/g'  sentence.txt\nsed -i \"s/${old}/${new}/g\" \"$sentenceFile\"\n\n# alternative way if your strings/variables includes '/'\nsed -i \"s|${old}|${new}|g\" \"$sentenceFile\"\nsed -i \"s:${old}:${new}:g\" \"$sentenceFile\"\n\n# replace only first occurance if multiple\nsed -i \"s/${old}/${new}/\" \"$sentenceFile\"

Notice that we use "" syntax to be able to use variables in commands, while '' only allow for strings.

","next":{"author":"Anton Ödman","title":"Setup a Remote Development Environment with Linux and VS Code","date":"2021-04-09","description":"Setting up a development environment can be quite tedious. Especially if you want to use it remotely. This is a quick get started guide so you can access your workspace from anywhere, using Ubuntu, VS Code, and SSH.","tags":["tools"],"draft":false,"cover":"/covers/png/remote-development-linux-vscode.png","slug":"remote-development-linux-vscode","isIndexFile":false,"category":"tools","component":{},"preview":{"html":"

Working in a remote workplace has a lot of advantages. Modern tools and internet connection allows you do so in realtime, and there are actually a lot of benefits in actually doing so:

A cheap monthly cost for amazing performance.
Work from anywhere, access the same environment.
Work with a Linux environment, which most servers use.
It’s possible to use a “cheaper” computer as loading occurs on the server.
Faster build times and internet speed.

Get started

First of all, we need a server. You can read my guide on how to easily set up a Linux server, using Hetzner. It’s, in my opinion, the best you can get for a cheap price.

You also need to install the extension mentioned above, Remote - SSH, as you need it to connect to your server and use it as if it was local.

$\"remote$

Connect to your server

Connecting to your server is very easy, once the extension is installed, you’ll get a new symbol down your left corner.

$\"vs$

Press it to access the SSH menu, which allows you to do a lot of stuff.

$\"ssh$

To connect to your server, simply press Remote-SSH: Connect to Host.... You can choose to enter the SSH command directly or add a new SSH Host so you easily can save it for later.

$\"select$

Press Add new SSH Host... to add your connection and save it. You write the command like this:

ssh <user>@<ip-address> -A

The -A flag is used for port forwarding, which you probably need to forward your applications from your server to your own computer to test them out. I’ll show you how to do that later.

Once added, your server will appear in the list in the SSH menu which we accessed before. Connect to your server by simply pressing it and writing your password in the upcoming prompt.

$\"password$

To show you that you have been connected successfully, the bottom left button will show your hostname.

Access your project

$\"host$

To access your project (which you probably already have downloaded to your server using git), choose Open Folder and go to your project.

$\"open$

You might need to write in your password again, but now you have access to your server’s files like they are at your own computer. And the terminal is connected to the terminal of the server.

$\"files$

$\"install$

Port forward to your local machine

$\"prompt$

If you want, you can manage your port forwards down at the terminal window.

$\"ports$

That’s it. That is how you set up your remote server for development.

"},"previous":{"author":"Anton Ödman","title":"How To Allow Remote Access To Your Localhost Apps With Ngrok","date":"2021-03-30","description":"Hosting your page on localhost is simple, ngrok allows you to share that connection with people outside your computer for free.","tags":["tools"],"draft":false,"cover":"/covers/png/remote-access-localhost-ngrok.png","aliases":["/remote-access-localhost-ngrok"],"slug":"remote-access-localhost-ngrok","isIndexFile":false,"category":"tools","component":{},"preview":{"html":"

Ngrok is great. It allows you to share your localhost connection to a public url, allowing your friends/coworkers to access your web apps without you having to deploy it. I have been using it for Vue, Angular, ASP.NET Core and React without problems.

","text":"Ngrok is great. It allows you to share your localhost connection to a public url, allowing your friends/coworkers to access your web apps without you having to deploy it. I have been using it for Vue, Angular, ASP.NET Core and React without problems."},"readingTime":"2 min read","body":"

Install

Installing Ngrok is easiest with a global npm install.

npm install ngrok -g

You might have some problems if you install it on Linux, in that case run:

sudo npm install --unsafe-perm -g ngrok

Add Token

To serve your page, you need to create an accout over at the ngrok webpage. Once you have created an account, you need your access token which is available when you sign in to their dashboard.

$\"ngrok$

Simply add your token with the following command:

ngrok authtoken <token>

Serve Your Page

You need to run your page locally before serving it, as it uses your local instance of the app as host when serving it.

ngrok http localhost:5001 -host-header=\"localhost:5001\"

Be sure to modify to your active port.

It should look something like this

$\"ngrok$

Stop Your Connection

In case a normal ctrl + c does not work, there are some other ways to close it.

On windows, open CMD and type

taskkill /f /im ngrok.exe

On Linux, you can find the ngrok process id by using the top command. Or you can use the ps -a command. After that, run:

kill -9 <ngrok-id>

"}},{"author":"Anton Ödman","title":"How To Allow Remote Access To Your Localhost Apps With Ngrok","date":"2021-03-30","description":"Hosting your page on localhost is simple, ngrok allows you to share that connection with people outside your computer for free.","tags":["tools"],"draft":false,"cover":"/covers/png/remote-access-localhost-ngrok.png","aliases":["/remote-access-localhost-ngrok"],"slug":"remote-access-localhost-ngrok","isIndexFile":false,"category":"tools","component":{},"preview":{"html":"

Install

Installing Ngrok is easiest with a global npm install.

npm install ngrok -g

You might have some problems if you install it on Linux, in that case run:

sudo npm install --unsafe-perm -g ngrok

Add Token

To serve your page, you need to create an accout over at the ngrok webpage. Once you have created an account, you need your access token which is available when you sign in to their dashboard.

$\"ngrok$

Simply add your token with the following command:

ngrok authtoken <token>

Serve Your Page

You need to run your page locally before serving it, as it uses your local instance of the app as host when serving it.

ngrok http localhost:5001 -host-header=\"localhost:5001\"

Be sure to modify to your active port.

It should look something like this

$\"ngrok$

Stop Your Connection

In case a normal ctrl + c does not work, there are some other ways to close it.

On windows, open CMD and type

taskkill /f /im ngrok.exe

On Linux, you can find the ngrok process id by using the top command. Or you can use the ps -a command. After that, run:

kill -9 <ngrok-id>

","next":{"author":"Anton Ödman","title":"Replace Text or a String in Bash","date":"2021-03-31","description":"Sometimes you might need to replace some text in a string - the bash allows you to do so easily. This is a short summary on how you can do that.","tags":["bash"],"draft":false,"cover":"/covers/png/replace-text-bash.png","slug":"replace-text-bash","isIndexFile":false,"category":"bash","component":{},"preview":{"html":"

Replacing a string in Bash can be done in several different ways. The two most common are bash string manipulation as well as sed. Here are some ways you can do that.

Replacing a String

Replacing a string in Bash can be done in several different ways. The two most common are bash string manipulation as well as sed. Here are some ways you can do that.

The example we want to change is like this:

sentence        =   \"This is the first sentence.\"\nold             =   \"first\"\nnew             =   \"second\"\nexpected        =   \"This is the second sentence.\"

So basically, we want to make this transformation:

\"This is the first sentence.\" => \"This is the second sentence.\"

Using Bash String Manipulation

In this method, you need to sentence to be a variable, like above. You cannot pass only a string. Both echo produces the same successful result.

sentence=\"This is the first sentence.\"\nold=\"first\"\nnew=\"second\"\n\n# replace first occurance\necho \"${sentence/first/second}\"     # with normal strings\necho \"${sentence/${old}/${new}}\"    # with variables\n\n# replace all occurences\necho \"${sentence//first/second}\"     # with normal strings\necho \"${sentence//${old}/${new}}\"    # with variables

Using Sed

The -i flag in the command means that we replace the original file.

sentence=\"This is the first sentence.\"\nsentenceFile=sentence.txt\nold=\"first\"\nnew=\"second\"\n\n# variables\nsed 's/first/second/g' <<<\"This is the first sentence\"\nsed \"s/${old}/${new}/g\" <<<\"$sentence\"\n\n# file\nsed -i 's/first/second/g'  sentence.txt\nsed -i \"s/${old}/${new}/g\" \"$sentenceFile\"\n\n# alternative way if your strings/variables includes '/'\nsed -i \"s|${old}|${new}|g\" \"$sentenceFile\"\nsed -i \"s:${old}:${new}:g\" \"$sentenceFile\"\n\n# replace only first occurance if multiple\nsed -i \"s/${old}/${new}/\" \"$sentenceFile\"

Notice that we use "" syntax to be able to use variables in commands, while '' only allow for strings.

"},"previous":{"author":"Anton Ödman","title":"Find Files in Directories in Bash","date":"2021-03-29","description":"Bash provides some great feature for you to find the files you are looking for, this is a simple way to do that.","tags":["bash"],"draft":false,"cover":"/covers/png/find-files-in-directories.png","aliases":["/find-files-in-directories"],"slug":"find-files-in-directories","isIndexFile":false,"category":"bash","component":{},"preview":{"html":"

There are two ways I mostly use to find different files in bash. One of the probably better than the other. Both ways saves all the file paths to an array which we can loop through.

","text":"There are two ways I mostly use to find different files in bash. One of the probably better than the other. Both ways saves all the file paths to an array which we can loop through."},"readingTime":"2 min read","body":"

Finding Files in Bash

There are two ways I mostly use to find different files in bash. One of the probably better than the other. Both ways saves all the file paths to an array which we can loop through.

For this example, I am going to look for all .yml in a specified directory.

The simplest way to do it would be this command:

FILES=./directory/*/*.yml

This is good if all your files are in the same directory, in this case in ./directory/<any folder>/<file>.yml. However, this is quite stale and does not allow you to find the files in a more dynamic matter. That’s why we probably should use the find command.

FILES=$(find ./directory -type f -name \"*.yml\")

This command is much more flexiable, as it looks for all files within all directories in the specifed path (./directory in this case.). the type command specifies that we are looking for a file, and we use the name flag to specify the name.We save the output to the FILES variable.

Once we have our files, we can loop through them as normal:

for file in $FILES; do\n    # do some logic\ndone

"}},{"author":"Anton Ödman","title":"Find Files in Directories in Bash","date":"2021-03-29","description":"Bash provides some great feature for you to find the files you are looking for, this is a simple way to do that.","tags":["bash"],"draft":false,"cover":"/covers/png/find-files-in-directories.png","aliases":["/find-files-in-directories"],"slug":"find-files-in-directories","isIndexFile":false,"category":"bash","component":{},"preview":{"html":"

There are two ways I mostly use to find different files in bash. One of the probably better than the other. Both ways saves all the file paths to an array which we can loop through.

Finding Files in Bash

There are two ways I mostly use to find different files in bash. One of the probably better than the other. Both ways saves all the file paths to an array which we can loop through.

For this example, I am going to look for all .yml in a specified directory.

The simplest way to do it would be this command:

FILES=./directory/*/*.yml

FILES=$(find ./directory -type f -name \"*.yml\")

Once we have our files, we can loop through them as normal:

for file in $FILES; do\n    # do some logic\ndone

","next":{"author":"Anton Ödman","title":"How To Allow Remote Access To Your Localhost Apps With Ngrok","date":"2021-03-30","description":"Hosting your page on localhost is simple, ngrok allows you to share that connection with people outside your computer for free.","tags":["tools"],"draft":false,"cover":"/covers/png/remote-access-localhost-ngrok.png","aliases":["/remote-access-localhost-ngrok"],"slug":"remote-access-localhost-ngrok","isIndexFile":false,"category":"tools","component":{},"preview":{"html":"

Install

Installing Ngrok is easiest with a global npm install.

npm install ngrok -g

You might have some problems if you install it on Linux, in that case run:

sudo npm install --unsafe-perm -g ngrok

Add Token

To serve your page, you need to create an accout over at the ngrok webpage. Once you have created an account, you need your access token which is available when you sign in to their dashboard.

$\"ngrok$

Simply add your token with the following command:

ngrok authtoken <token>

Serve Your Page

You need to run your page locally before serving it, as it uses your local instance of the app as host when serving it.

ngrok http localhost:5001 -host-header=\"localhost:5001\"

Be sure to modify to your active port.

It should look something like this

$\"ngrok$

Stop Your Connection

In case a normal ctrl + c does not work, there are some other ways to close it.

On windows, open CMD and type

taskkill /f /im ngrok.exe

On Linux, you can find the ngrok process id by using the top command. Or you can use the ps -a command. After that, run:

kill -9 <ngrok-id>

"},"previous":{"author":"Anton Ödman","title":"Full Width Container in Limited Width Parent","date":"2021-03-29","description":"A simple hack to allow the children of an limited HTML element to be full width.","tags":["css"],"draft":false,"cover":"/covers/png/full-width-container-limited-parent.png","aliases":["/full-width-container-limited-parent"],"slug":"full-width-container-limited-parent","isIndexFile":false,"category":"css","component":{},"preview":{"html":"

Many times we want an element to be larger than the max width of its parent.

","text":"Many times we want an element to be larger than the max width of its parent."},"readingTime":"2 min read","body":"

Example

Many times we want an element to be larger than the max width of its parent.

Imagine this code:

<main class=\"limited-width\">\n\t<div class=\"full-width\">\n\t\t<img />\n\t</div>\n</main>

With the following CSS for the parent:

.limited-width {\n\twidth: 500px;\n}

Solution

However, we want our full-width element to be 100% of the whole view port. This is a simple hack to make that happen:

.full-width {\n\twidth: 100vw;\n\tposition: relative;\n\tleft: 50%;\n\tright: 50%;\n\tmargin-left: -50vw;\n\tmargin-right: -50vw;\n}

This trick is originally from this source.

"}},{"author":"Anton Ödman","title":"Full Width Container in Limited Width Parent","date":"2021-03-29","description":"A simple hack to allow the children of an limited HTML element to be full width.","tags":["css"],"draft":false,"cover":"/covers/png/full-width-container-limited-parent.png","aliases":["/full-width-container-limited-parent"],"slug":"full-width-container-limited-parent","isIndexFile":false,"category":"css","component":{},"preview":{"html":"

Many times we want an element to be larger than the max width of its parent.

","text":"Many times we want an element to be larger than the max width of its parent."},"readingTime":"2 min read","body":"

Example

Many times we want an element to be larger than the max width of its parent.

Imagine this code:

<main class=\"limited-width\">\n\t<div class=\"full-width\">\n\t\t<img />\n\t</div>\n</main>

With the following CSS for the parent:

.limited-width {\n\twidth: 500px;\n}

Solution

However, we want our full-width element to be 100% of the whole view port. This is a simple hack to make that happen:

.full-width {\n\twidth: 100vw;\n\tposition: relative;\n\tleft: 50%;\n\tright: 50%;\n\tmargin-left: -50vw;\n\tmargin-right: -50vw;\n}

This trick is originally from this source.

","next":{"author":"Anton Ödman","title":"Find Files in Directories in Bash","date":"2021-03-29","description":"Bash provides some great feature for you to find the files you are looking for, this is a simple way to do that.","tags":["bash"],"draft":false,"cover":"/covers/png/find-files-in-directories.png","aliases":["/find-files-in-directories"],"slug":"find-files-in-directories","isIndexFile":false,"category":"bash","component":{},"preview":{"html":"

There are two ways I mostly use to find different files in bash. One of the probably better than the other. Both ways saves all the file paths to an array which we can loop through.

Finding Files in Bash

There are two ways I mostly use to find different files in bash. One of the probably better than the other. Both ways saves all the file paths to an array which we can loop through.

For this example, I am going to look for all .yml in a specified directory.

The simplest way to do it would be this command:

FILES=./directory/*/*.yml

FILES=$(find ./directory -type f -name \"*.yml\")

Once we have our files, we can loop through them as normal:

for file in $FILES; do\n    # do some logic\ndone

"},"previous":{"author":"Anton Ödman","title":"Clean Your Git History With Git Fixup","date":"2021-03-23","description":"The easiest way to clean up your git history by using fixup and autosquash.","tags":["git"],"draft":false,"cover":"/covers/png/git-fixup.png","aliases":["/git-fixup"],"slug":"git-fixup","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

We will clean up our git history with the help of two commands:

","text":"We will clean up our git history with the help of two commands:"},"readingTime":"2 min read","body":"

Git Fixup To Get a Clean History

We will clean up our git history with the help of two commands:

git commit --fixup <commit>
git rebase -i --autosquash

Example

It’s a pretty simple process. Imagine we have three commits like this.

We want to do some changes to Commit 2.

First of all, add your changes to the staging area

git add .

In VS Code, it looks like this.

Do your commit with the --fixup tag and the hash of the commit you want to fixup. In this case, it is the hash of Commit 2.

git commit --fixup a1633474e48c4dbafe44d85a981327e094bd7075

This will add a new commit with fixup! appended, followed by the message that the original commit had.

To finalize, we need to autosquash our work to merge the new commit to the old. We need to copy the hash of a commit before the one we fixed. In this case, Commit 1.

git rebase -i --autosquash 4be1250d7b56be16808d0a6920b60129fc7dca2e

This interactive rebase allows you to change your commits. Everything will, however, be done. The only thing you need to do is exit the editor.

Once again our git history is cleaner, and the change we did have been added to Commit 2.

"}},{"author":"Anton Ödman","title":"Clean Your Git History With Git Fixup","date":"2021-03-23","description":"The easiest way to clean up your git history by using fixup and autosquash.","tags":["git"],"draft":false,"cover":"/covers/png/git-fixup.png","aliases":["/git-fixup"],"slug":"git-fixup","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

We will clean up our git history with the help of two commands:

","text":"We will clean up our git history with the help of two commands:"},"readingTime":"2 min read","body":"

Git Fixup To Get a Clean History

We will clean up our git history with the help of two commands:

git commit --fixup <commit>
git rebase -i --autosquash

Example

It’s a pretty simple process. Imagine we have three commits like this.

We want to do some changes to Commit 2.

First of all, add your changes to the staging area

git add .

In VS Code, it looks like this.

Do your commit with the --fixup tag and the hash of the commit you want to fixup. In this case, it is the hash of Commit 2.

git commit --fixup a1633474e48c4dbafe44d85a981327e094bd7075

This will add a new commit with fixup! appended, followed by the message that the original commit had.

To finalize, we need to autosquash our work to merge the new commit to the old. We need to copy the hash of a commit before the one we fixed. In this case, Commit 1.

git rebase -i --autosquash 4be1250d7b56be16808d0a6920b60129fc7dca2e

This interactive rebase allows you to change your commits. Everything will, however, be done. The only thing you need to do is exit the editor.

Once again our git history is cleaner, and the change we did have been added to Commit 2.

","next":{"author":"Anton Ödman","title":"Full Width Container in Limited Width Parent","date":"2021-03-29","description":"A simple hack to allow the children of an limited HTML element to be full width.","tags":["css"],"draft":false,"cover":"/covers/png/full-width-container-limited-parent.png","aliases":["/full-width-container-limited-parent"],"slug":"full-width-container-limited-parent","isIndexFile":false,"category":"css","component":{},"preview":{"html":"

Many times we want an element to be larger than the max width of its parent.

","text":"Many times we want an element to be larger than the max width of its parent."},"readingTime":"2 min read","body":"

Example

Many times we want an element to be larger than the max width of its parent.

Imagine this code:

<main class=\"limited-width\">\n\t<div class=\"full-width\">\n\t\t<img />\n\t</div>\n</main>

With the following CSS for the parent:

.limited-width {\n\twidth: 500px;\n}

Solution

However, we want our full-width element to be 100% of the whole view port. This is a simple hack to make that happen:

.full-width {\n\twidth: 100vw;\n\tposition: relative;\n\tleft: 50%;\n\tright: 50%;\n\tmargin-left: -50vw;\n\tmargin-right: -50vw;\n}

This trick is originally from this source.

"},"previous":{"author":"Anton Ödman","title":"Fetch Multiple Urls at The Same Time","date":"2021-01-20","description":"Fetch multiple URLs at the same time using Promises.all","tags":["javascript"],"draft":false,"cover":"/covers/png/fetch-multiple-urls-same-time.png","aliases":["/fetch-multiple-urls-same-time"],"slug":"fetch-multiple-urls-same-time","isIndexFile":false,"category":"javascript","component":{},"preview":{"html":"

Awaiting each and every request may lead to long waiting times, a quick fix it to make all requests at the same time using Promises.all().

","text":"Awaiting each and every request may lead to long waiting times, a quick fix it to make all requests at the same time using Promises.all()."},"readingTime":"2 min read","body":"

Fetch Multiple URLs at The Same Time

Awaiting each and every request may lead to long waiting times, a quick fix it to make all requests at the same time using Promises.all().

A Bad Example

Say that we have a list of 100 requests, the normal way to iterate through and fetch would perhaps look like this.

const urls = [...];\nfor(const url of urls) {\n    const result = await fetch(url);\n    const data = await result.json();\n\n    // handle data\n    // ...\n}

This will make each request separately, which might take a long time.

The Solution

We will make this much faster with Promise.all(), which fetches all URLs at the same time. There are two ways to do it.

const arrayOfResponses = await Promise.all(\n    urls.map((url) =>\n        fetch(url)\n            .then((res) => res.json())\n    )\n);

Another approach could be like this;

const urls = [...];\nconst promises = urls.map(url => fetch(url));\n\nawait Promise.all(promises);\n\nfor (const promise of promises) {\n    const data = await promise.json();\n\n    // handle data\n    // ...\n}

"}},{"author":"Anton Ödman","title":"Fetch Multiple Urls at The Same Time","date":"2021-01-20","description":"Fetch multiple URLs at the same time using Promises.all","tags":["javascript"],"draft":false,"cover":"/covers/png/fetch-multiple-urls-same-time.png","aliases":["/fetch-multiple-urls-same-time"],"slug":"fetch-multiple-urls-same-time","isIndexFile":false,"category":"javascript","component":{},"preview":{"html":"

Awaiting each and every request may lead to long waiting times, a quick fix it to make all requests at the same time using Promises.all().

","text":"Awaiting each and every request may lead to long waiting times, a quick fix it to make all requests at the same time using Promises.all()."},"readingTime":"2 min read","body":"

Fetch Multiple URLs at The Same Time

Awaiting each and every request may lead to long waiting times, a quick fix it to make all requests at the same time using Promises.all().

A Bad Example

Say that we have a list of 100 requests, the normal way to iterate through and fetch would perhaps look like this.

const urls = [...];\nfor(const url of urls) {\n    const result = await fetch(url);\n    const data = await result.json();\n\n    // handle data\n    // ...\n}

This will make each request separately, which might take a long time.

The Solution

We will make this much faster with Promise.all(), which fetches all URLs at the same time. There are two ways to do it.

const arrayOfResponses = await Promise.all(\n    urls.map((url) =>\n        fetch(url)\n            .then((res) => res.json())\n    )\n);

Another approach could be like this;

const urls = [...];\nconst promises = urls.map(url => fetch(url));\n\nawait Promise.all(promises);\n\nfor (const promise of promises) {\n    const data = await promise.json();\n\n    // handle data\n    // ...\n}

","next":{"author":"Anton Ödman","title":"Clean Your Git History With Git Fixup","date":"2021-03-23","description":"The easiest way to clean up your git history by using fixup and autosquash.","tags":["git"],"draft":false,"cover":"/covers/png/git-fixup.png","aliases":["/git-fixup"],"slug":"git-fixup","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

We will clean up our git history with the help of two commands:

","text":"We will clean up our git history with the help of two commands:"},"readingTime":"2 min read","body":"

Git Fixup To Get a Clean History

We will clean up our git history with the help of two commands:

git commit --fixup <commit>
git rebase -i --autosquash

Example

It’s a pretty simple process. Imagine we have three commits like this.

We want to do some changes to Commit 2.

First of all, add your changes to the staging area

git add .

In VS Code, it looks like this.

Do your commit with the --fixup tag and the hash of the commit you want to fixup. In this case, it is the hash of Commit 2.

git commit --fixup a1633474e48c4dbafe44d85a981327e094bd7075

This will add a new commit with fixup! appended, followed by the message that the original commit had.

To finalize, we need to autosquash our work to merge the new commit to the old. We need to copy the hash of a commit before the one we fixed. In this case, Commit 1.

git rebase -i --autosquash 4be1250d7b56be16808d0a6920b60129fc7dca2e

This interactive rebase allows you to change your commits. Everything will, however, be done. The only thing you need to do is exit the editor.

Once again our git history is cleaner, and the change we did have been added to Commit 2.

"},"previous":{"author":"Anton Ödman","title":"Loop Through Arrays in Bash","date":"2020-09-07","description":"How to loop through arrays in Bash","tags":["bash"],"draft":false,"cover":"/covers/png/loop-array-bash.png","aliases":["/loop-array-bash"],"slug":"loop-array-bash","isIndexFile":false,"category":"bash","component":{},"preview":{"html":"

Create an array with the following syntax.

","text":"Create an array with the following syntax."},"readingTime":"1 min read","body":"

Looping through arrays in Bash

Create an array with the following syntax.

packages=(curl git wget vim)

You can simply loop through it with a for-loop.

for program in \"${apt_programs[@]}\"; do\n    sudo apt-get install ${program}\ndone

"}},{"author":"Anton Ödman","title":"Loop Through Arrays in Bash","date":"2020-09-07","description":"How to loop through arrays in Bash","tags":["bash"],"draft":false,"cover":"/covers/png/loop-array-bash.png","aliases":["/loop-array-bash"],"slug":"loop-array-bash","isIndexFile":false,"category":"bash","component":{},"preview":{"html":"

Create an array with the following syntax.

","text":"Create an array with the following syntax."},"readingTime":"1 min read","body":"

Looping through arrays in Bash

Create an array with the following syntax.

packages=(curl git wget vim)

You can simply loop through it with a for-loop.

for program in \"${apt_programs[@]}\"; do\n    sudo apt-get install ${program}\ndone

","next":{"author":"Anton Ödman","title":"Fetch Multiple Urls at The Same Time","date":"2021-01-20","description":"Fetch multiple URLs at the same time using Promises.all","tags":["javascript"],"draft":false,"cover":"/covers/png/fetch-multiple-urls-same-time.png","aliases":["/fetch-multiple-urls-same-time"],"slug":"fetch-multiple-urls-same-time","isIndexFile":false,"category":"javascript","component":{},"preview":{"html":"

Awaiting each and every request may lead to long waiting times, a quick fix it to make all requests at the same time using Promises.all().

","text":"Awaiting each and every request may lead to long waiting times, a quick fix it to make all requests at the same time using Promises.all()."},"readingTime":"2 min read","body":"

Fetch Multiple URLs at The Same Time

Awaiting each and every request may lead to long waiting times, a quick fix it to make all requests at the same time using Promises.all().

A Bad Example

Say that we have a list of 100 requests, the normal way to iterate through and fetch would perhaps look like this.

const urls = [...];\nfor(const url of urls) {\n    const result = await fetch(url);\n    const data = await result.json();\n\n    // handle data\n    // ...\n}

This will make each request separately, which might take a long time.

The Solution

We will make this much faster with Promise.all(), which fetches all URLs at the same time. There are two ways to do it.

const arrayOfResponses = await Promise.all(\n    urls.map((url) =>\n        fetch(url)\n            .then((res) => res.json())\n    )\n);

Another approach could be like this;

const urls = [...];\nconst promises = urls.map(url => fetch(url));\n\nawait Promise.all(promises);\n\nfor (const promise of promises) {\n    const data = await promise.json();\n\n    // handle data\n    // ...\n}

"},"previous":{"author":"Anton Ödman","title":"See if a Package Exists in a Bash Script","date":"2020-09-07","description":"How you can see if a package or commando exists in a Bash script.","tags":["bash"],"draft":false,"cover":"/covers/png/package-exists-bash.png","aliases":["/package-exists-bash"],"slug":"package-exists-bash","isIndexFile":false,"category":"bash","component":{},"preview":{"html":"

The simplest way to check if a commando exists is the command -v <package> command. For example, it can look like command -v brew.\nBy using it in an if-statement, we can see if the package is installed inside of a Bash script.

","text":"The simplest way to check if a commando exists is the command -v command. For example, it can look like command -v brew.\nBy using it in an if-statement, we can see if the package is installed inside of a Bash script."},"readingTime":"1 min read","body":"

Package exists in Bash

if [[ $(command -v brew) ]]; then\n    echo \"🍺 Homebrew already installed\"\nfi

"}},{"author":"Anton Ödman","title":"See if a Package Exists in a Bash Script","date":"2020-09-07","description":"How you can see if a package or commando exists in a Bash script.","tags":["bash"],"draft":false,"cover":"/covers/png/package-exists-bash.png","aliases":["/package-exists-bash"],"slug":"package-exists-bash","isIndexFile":false,"category":"bash","component":{},"preview":{"html":"

Package exists in Bash

if [[ $(command -v brew) ]]; then\n    echo \"🍺 Homebrew already installed\"\nfi

","next":{"author":"Anton Ödman","title":"Loop Through Arrays in Bash","date":"2020-09-07","description":"How to loop through arrays in Bash","tags":["bash"],"draft":false,"cover":"/covers/png/loop-array-bash.png","aliases":["/loop-array-bash"],"slug":"loop-array-bash","isIndexFile":false,"category":"bash","component":{},"preview":{"html":"

Create an array with the following syntax.

","text":"Create an array with the following syntax."},"readingTime":"1 min read","body":"

Looping through arrays in Bash

Create an array with the following syntax.

packages=(curl git wget vim)

You can simply loop through it with a for-loop.

for program in \"${apt_programs[@]}\"; do\n    sudo apt-get install ${program}\ndone

"},"previous":{"author":"Anton Ödman","title":"Save Output to a Variable in a Bash Script","date":"2020-09-07","description":"Save the output of a command in a Bash script to use it later.","tags":["bash"],"draft":false,"cover":"/covers/png/save-output-variable-bash.png","aliases":["/save-output-variable-bash"],"slug":"save-output-variable-bash","isIndexFile":false,"category":"bash","component":{},"preview":{"html":"

Saving the output of a command to a variable is quite simple - you use the $() syntax.

","text":"Saving the output of a command to a variable is quite simple - you use the $() syntax."},"readingTime":"1 min read","body":"

Save output to variable in Bash

Saving the output of a command to a variable is quite simple - you use the $() syntax.

VALUE=$(echo hello)

Then you call it as usual.

echo $VALUE

"}},{"author":"Anton Ödman","title":"Save Output to a Variable in a Bash Script","date":"2020-09-07","description":"Save the output of a command in a Bash script to use it later.","tags":["bash"],"draft":false,"cover":"/covers/png/save-output-variable-bash.png","aliases":["/save-output-variable-bash"],"slug":"save-output-variable-bash","isIndexFile":false,"category":"bash","component":{},"preview":{"html":"

Saving the output of a command to a variable is quite simple - you use the $() syntax.

","text":"Saving the output of a command to a variable is quite simple - you use the $() syntax."},"readingTime":"1 min read","body":"

Save output to variable in Bash

Saving the output of a command to a variable is quite simple - you use the $() syntax.

VALUE=$(echo hello)

Then you call it as usual.

echo $VALUE

","next":{"author":"Anton Ödman","title":"See if a Package Exists in a Bash Script","date":"2020-09-07","description":"How you can see if a package or commando exists in a Bash script.","tags":["bash"],"draft":false,"cover":"/covers/png/package-exists-bash.png","aliases":["/package-exists-bash"],"slug":"package-exists-bash","isIndexFile":false,"category":"bash","component":{},"preview":{"html":"

Package exists in Bash

if [[ $(command -v brew) ]]; then\n    echo \"🍺 Homebrew already installed\"\nfi

"},"previous":{"author":"Anton Ödman","title":"See if You Run a Bash Script in WSL","date":"2020-09-07","description":"This is how you see if you are using WSL within a Bash script.","tags":["wsl"],"draft":false,"cover":"/covers/png/see-if-wsl-bash.png","aliases":["/see-if-wsl-bash"],"slug":"see-if-wsl-bash","isIndexFile":false,"category":"wsl","component":{},"preview":{"html":"

The simplest way to see if the script is called from a WSL environment is like this.

","text":"The simplest way to see if the script is called from a WSL environment is like this."},"readingTime":"1 min read","body":"

WSL in Bash

The simplest way to see if the script is called from a WSL environment is like this.

if grep -q Microsoft /proc/version; then\n    # it's from wsl\nfi

"}},{"author":"Anton Ödman","title":"See if You Run a Bash Script in WSL","date":"2020-09-07","description":"This is how you see if you are using WSL within a Bash script.","tags":["wsl"],"draft":false,"cover":"/covers/png/see-if-wsl-bash.png","aliases":["/see-if-wsl-bash"],"slug":"see-if-wsl-bash","isIndexFile":false,"category":"wsl","component":{},"preview":{"html":"

The simplest way to see if the script is called from a WSL environment is like this.

","text":"The simplest way to see if the script is called from a WSL environment is like this."},"readingTime":"1 min read","body":"

WSL in Bash

The simplest way to see if the script is called from a WSL environment is like this.

if grep -q Microsoft /proc/version; then\n    # it's from wsl\nfi

","next":{"author":"Anton Ödman","title":"Save Output to a Variable in a Bash Script","date":"2020-09-07","description":"Save the output of a command in a Bash script to use it later.","tags":["bash"],"draft":false,"cover":"/covers/png/save-output-variable-bash.png","aliases":["/save-output-variable-bash"],"slug":"save-output-variable-bash","isIndexFile":false,"category":"bash","component":{},"preview":{"html":"

Saving the output of a command to a variable is quite simple - you use the $() syntax.

","text":"Saving the output of a command to a variable is quite simple - you use the $() syntax."},"readingTime":"1 min read","body":"

Save output to variable in Bash

Saving the output of a command to a variable is quite simple - you use the $() syntax.

VALUE=$(echo hello)

Then you call it as usual.

echo $VALUE

"},"previous":{"author":"Anton Ödman","title":"How to Override Local Files with Git Pull","date":"2020-09-04","description":"Override your local project with the latest changes from your git repository","tags":["git"],"draft":false,"cover":"/covers/png/pull-overwrite-local.png","aliases":["/pull-overwrite-local"],"slug":"pull-overwrite-local","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

If you need to discard all your local changes and just fetch the latest update from your git repository, this is the simplest way to do that.\nRemember that all local changes will be lost, so it would be recommended to stash them or save them in another branch.

","text":"If you need to discard all your local changes and just fetch the latest update from your git repository, this is the simplest way to do that.\nRemember that all local changes will be lost, so it would be recommended to stash them or save them in another branch."},"readingTime":"1 min read","body":"

Override your local project

git fetch --all\ngit reset hard <remote>/<branch_name>

For example, it could look like this:

git fetch --all\ngit reset hard origin/master

git fetch downloads all the latest changes without trying to merge or rebase anything. The git reset resets your active branch to the latest from your remote repository.

"}},{"author":"Anton Ödman","title":"How to Override Local Files with Git Pull","date":"2020-09-04","description":"Override your local project with the latest changes from your git repository","tags":["git"],"draft":false,"cover":"/covers/png/pull-overwrite-local.png","aliases":["/pull-overwrite-local"],"slug":"pull-overwrite-local","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

Override your local project

git fetch --all\ngit reset hard <remote>/<branch_name>

For example, it could look like this:

git fetch --all\ngit reset hard origin/master

git fetch downloads all the latest changes without trying to merge or rebase anything. The git reset resets your active branch to the latest from your remote repository.

","next":{"author":"Anton Ödman","title":"See if You Run a Bash Script in WSL","date":"2020-09-07","description":"This is how you see if you are using WSL within a Bash script.","tags":["wsl"],"draft":false,"cover":"/covers/png/see-if-wsl-bash.png","aliases":["/see-if-wsl-bash"],"slug":"see-if-wsl-bash","isIndexFile":false,"category":"wsl","component":{},"preview":{"html":"

The simplest way to see if the script is called from a WSL environment is like this.

","text":"The simplest way to see if the script is called from a WSL environment is like this."},"readingTime":"1 min read","body":"

WSL in Bash

The simplest way to see if the script is called from a WSL environment is like this.

if grep -q Microsoft /proc/version; then\n    # it's from wsl\nfi

"},"previous":{"author":"Anton Ödman","title":"Adding Short (and Long) Flags to Bash Scripts","date":"2020-09-03","description":"Adding flags to your bash script will probably simplify your developing experience. This is a short guide on how you can add both long and short flags without using getopts.","tags":["bash"],"draft":false,"cover":"/covers/png/flags-bash.png","aliases":["/flags-bash"],"slug":"flags-bash","isIndexFile":false,"category":"bash","component":{},"preview":{"html":"

Adding flags can be done in many different ways, the most common way is probably using getopts. However, in that case your a limited to using only short flags (-f instead of --flag, for example.). These are some simple ways on how you can do it with a simple loop instead, which allows long arguments as well as short.

","text":"Adding flags can be done in many different ways, the most common way is probably using getopts. However, in that case your a limited to using only short flags (-f instead of --flag, for example.). These are some simple ways on how you can do it with a simple loop instead, which allows long arguments as well as short."},"readingTime":"7 min read","body":"

Adding Flags

We will use a simple script that takest two arguments, --tag and --skip-verification. Those are a bit different, as tag takes a value, while --skip-verification is just a boolean. The command line using should look something like this.

Look at the bottom for a tl;dr.

./flags.sh -t latest --skip-verification

Example 1 - While Loop

# if no arguments are provided, return usage function\nif [ $# -eq 0 ]; then\n    usage # run usage function\n    exit 1\nfi\n\nSKIP_VERIFICATION=false\nTAG=\n\nwhile [ \"$1\" != \"\" ]; do\n    case $1 in\n    --skip-verification)\n        SKIP_VERIFICATION=true\n        ;;\n    -t | --tag)\n        shift # remove `-t` or `--tag` from `$1`\n        TAG=$1\n        ;;\n    -h | --help)\n        usage # run usage function\n        ;;\n    *)\n        usage\n        exit 1\n        ;;\n    esac\n    shift # remove the current value for `$1` and use the next\ndone

Explanation While Loop

We are looping through $1, which is the first passed argument. In the example code above, it will be -t.

As $1 matches -t in the case scenario, that case is used.

shift\nTAG=$1\n;;

The shift command removes the current command from the arguments array, meaning $1 will no longer be -t, but the next argument in the array, which in this case is latest. The argument latest will then be added to the TAG variable.

The shift command is necessary as we want the value of the tag. There is a differece with the --skip-verification flag, as no value is provided. In that case, we do not need a shift statement.

SKIP_VERIFICATION=true\n;;

We only set SKIP_VERIFICATION to true.

As a final step, we use the shift statement once again after the case statement. This is to further our while loop, making $1 the next argument that has been provided. If the argument is empty, the loop is done.

Example 2 - For Loop

Instead of using a while loop, we can use a for loop to loop through all arguments in the arguments array. This example does the exact same thing as the previous one.

# if no arguments are provided, return usage function\nif [ $# -eq 0 ]; then\n    usage # run usage function\n    exit 1\nfi\n\nSKIP_VERIFICATION=false\nTAG=\n\nfor arg in \"$@\"; do\n    case $arg in\n    --skip-verification)\n        SKIP_VERIFICATION=true\n        shift # Remove --skip-verification from `$@`\n        ;;\n    -t | --tag)\n        TAG=$2\n        shift # Remove argument (-t) name from `$@`\n        shift # Remove argument value (latest) from `$@`\n        ;;\n    -h | --help)\n        usage # run usage function on help\n        ;;\n    *)\n        usage # run usage function if wrong argument provided\n        ;;\n    esac\ndone

Explanation For Loop

This works the same way as above. There is not much difference in the logic. We iterature through all arguments and use the shift statement to remove the current one. The big difference is the loop as well as when we use the shift. In the end, it all comes down to preference.

Logic with Flags

The flags have been saved to variables, which you can use in your code later on. These are some examples.

if [[ \"$TAG\" == \"\" ]]; then\n    echo \"You must provide a tag\";\n    exit 1;\nfi\n\nif [[ $SKIP_VERIFICATION == false ]]; then\n    # do not verify\nelse\n    # do verify\nfi

TL;DR

This is the full code:

#! /bin/bash\n\nfunction usage() {\n    cat <<USAGE\n\n    Usage: $0 [-t tag] [--skip-verification]\n\n    Options:\n        -t, --tag:            information about argument\n        --skip-verification:  information about argument\nUSAGE\n    exit 1\n}\n\nif [ $# -eq 0 ]; then\n    usage\n    exit 1\nfi\n\nSKIP_VERIFICATION=false\nTAG=\n\nwhile [ \"$1\" != \"\" ]; do\n    case $1 in\n    --skip-verification)\n        SKIP_VERIFICATION=true\n        ;;\n    -t | --tag)\n        shift\n        TAG=$1\n        ;;\n    -h | --help)\n        usage\n        ;;\n    *)\n        usage\n        exit 1\n        ;;\n    esac\n    shift\ndone\n\nif [[ $TAG == \"\" ]]; then\n    echo \"You must provide a tag\";\n    exit 1;\nfi\n\nif [[ $SKIP_VERIFICATION == false ]]; then\n    # do not verify\nelse\n    # do verify\nfi

"}},{"author":"Anton Ödman","title":"Adding Short (and Long) Flags to Bash Scripts","date":"2020-09-03","description":"Adding flags to your bash script will probably simplify your developing experience. This is a short guide on how you can add both long and short flags without using getopts.","tags":["bash"],"draft":false,"cover":"/covers/png/flags-bash.png","aliases":["/flags-bash"],"slug":"flags-bash","isIndexFile":false,"category":"bash","component":{},"preview":{"html":"

Adding Flags

Look at the bottom for a tl;dr.

./flags.sh -t latest --skip-verification

Example 1 - While Loop

# if no arguments are provided, return usage function\nif [ $# -eq 0 ]; then\n    usage # run usage function\n    exit 1\nfi\n\nSKIP_VERIFICATION=false\nTAG=\n\nwhile [ \"$1\" != \"\" ]; do\n    case $1 in\n    --skip-verification)\n        SKIP_VERIFICATION=true\n        ;;\n    -t | --tag)\n        shift # remove `-t` or `--tag` from `$1`\n        TAG=$1\n        ;;\n    -h | --help)\n        usage # run usage function\n        ;;\n    *)\n        usage\n        exit 1\n        ;;\n    esac\n    shift # remove the current value for `$1` and use the next\ndone

Explanation While Loop

We are looping through $1, which is the first passed argument. In the example code above, it will be -t.

As $1 matches -t in the case scenario, that case is used.

shift\nTAG=$1\n;;

The shift command is necessary as we want the value of the tag. There is a differece with the --skip-verification flag, as no value is provided. In that case, we do not need a shift statement.

SKIP_VERIFICATION=true\n;;

We only set SKIP_VERIFICATION to true.

Example 2 - For Loop

Instead of using a while loop, we can use a for loop to loop through all arguments in the arguments array. This example does the exact same thing as the previous one.

# if no arguments are provided, return usage function\nif [ $# -eq 0 ]; then\n    usage # run usage function\n    exit 1\nfi\n\nSKIP_VERIFICATION=false\nTAG=\n\nfor arg in \"$@\"; do\n    case $arg in\n    --skip-verification)\n        SKIP_VERIFICATION=true\n        shift # Remove --skip-verification from `$@`\n        ;;\n    -t | --tag)\n        TAG=$2\n        shift # Remove argument (-t) name from `$@`\n        shift # Remove argument value (latest) from `$@`\n        ;;\n    -h | --help)\n        usage # run usage function on help\n        ;;\n    *)\n        usage # run usage function if wrong argument provided\n        ;;\n    esac\ndone

Explanation For Loop

Logic with Flags

The flags have been saved to variables, which you can use in your code later on. These are some examples.

if [[ \"$TAG\" == \"\" ]]; then\n    echo \"You must provide a tag\";\n    exit 1;\nfi\n\nif [[ $SKIP_VERIFICATION == false ]]; then\n    # do not verify\nelse\n    # do verify\nfi

TL;DR

This is the full code:

#! /bin/bash\n\nfunction usage() {\n    cat <<USAGE\n\n    Usage: $0 [-t tag] [--skip-verification]\n\n    Options:\n        -t, --tag:            information about argument\n        --skip-verification:  information about argument\nUSAGE\n    exit 1\n}\n\nif [ $# -eq 0 ]; then\n    usage\n    exit 1\nfi\n\nSKIP_VERIFICATION=false\nTAG=\n\nwhile [ \"$1\" != \"\" ]; do\n    case $1 in\n    --skip-verification)\n        SKIP_VERIFICATION=true\n        ;;\n    -t | --tag)\n        shift\n        TAG=$1\n        ;;\n    -h | --help)\n        usage\n        ;;\n    *)\n        usage\n        exit 1\n        ;;\n    esac\n    shift\ndone\n\nif [[ $TAG == \"\" ]]; then\n    echo \"You must provide a tag\";\n    exit 1;\nfi\n\nif [[ $SKIP_VERIFICATION == false ]]; then\n    # do not verify\nelse\n    # do verify\nfi

","next":{"author":"Anton Ödman","title":"How to Override Local Files with Git Pull","date":"2020-09-04","description":"Override your local project with the latest changes from your git repository","tags":["git"],"draft":false,"cover":"/covers/png/pull-overwrite-local.png","aliases":["/pull-overwrite-local"],"slug":"pull-overwrite-local","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

Override your local project

git fetch --all\ngit reset hard <remote>/<branch_name>

For example, it could look like this:

git fetch --all\ngit reset hard origin/master

git fetch downloads all the latest changes without trying to merge or rebase anything. The git reset resets your active branch to the latest from your remote repository.

"},"previous":{"author":"Anton Ödman","title":"Run NPM (Or Any Other) Scripts Before Build With ASP.NET","date":"2020-04-27","description":"Run any script you want (in this case NPM) before a build in ASP.NET Core.","tags":["aspnet"],"draft":false,"cover":"/covers/png/run-scripts.png","aliases":["/run-scripts"],"slug":"run-scripts","isIndexFile":false,"category":"aspnet","component":{},"preview":{"html":"

Sometimes, you might need to run a certain script before build in ASP.NET Core. This can easily be done in the .csproj folder. You can run any script you want, but in this case, I’ll use an example with npm.

","text":"Sometimes, you might need to run a certain script before build in ASP.NET Core. This can easily be done in the .csproj folder. You can run any script you want, but in this case, I’ll use an example with npm."},"readingTime":"1 min read","body":"

Running scripts

The only thing you need to do is to add a target to your .csproj file. It looks something like this:

<Target Name=\"GetTranslations\" BeforeTargets=\"Build\">\n    <Exec WorkingDirectory=\"$(SpaRoot)\" Command=\"npm run translations\" />\n</Target>

"}},{"author":"Anton Ödman","title":"Run NPM (Or Any Other) Scripts Before Build With ASP.NET","date":"2020-04-27","description":"Run any script you want (in this case NPM) before a build in ASP.NET Core.","tags":["aspnet"],"draft":false,"cover":"/covers/png/run-scripts.png","aliases":["/run-scripts"],"slug":"run-scripts","isIndexFile":false,"category":"aspnet","component":{},"preview":{"html":"

Running scripts

The only thing you need to do is to add a target to your .csproj file. It looks something like this:

<Target Name=\"GetTranslations\" BeforeTargets=\"Build\">\n    <Exec WorkingDirectory=\"$(SpaRoot)\" Command=\"npm run translations\" />\n</Target>

","next":{"author":"Anton Ödman","title":"Adding Short (and Long) Flags to Bash Scripts","date":"2020-09-03","description":"Adding flags to your bash script will probably simplify your developing experience. This is a short guide on how you can add both long and short flags without using getopts.","tags":["bash"],"draft":false,"cover":"/covers/png/flags-bash.png","aliases":["/flags-bash"],"slug":"flags-bash","isIndexFile":false,"category":"bash","component":{},"preview":{"html":"

Adding Flags

Look at the bottom for a tl;dr.

./flags.sh -t latest --skip-verification

Example 1 - While Loop

# if no arguments are provided, return usage function\nif [ $# -eq 0 ]; then\n    usage # run usage function\n    exit 1\nfi\n\nSKIP_VERIFICATION=false\nTAG=\n\nwhile [ \"$1\" != \"\" ]; do\n    case $1 in\n    --skip-verification)\n        SKIP_VERIFICATION=true\n        ;;\n    -t | --tag)\n        shift # remove `-t` or `--tag` from `$1`\n        TAG=$1\n        ;;\n    -h | --help)\n        usage # run usage function\n        ;;\n    *)\n        usage\n        exit 1\n        ;;\n    esac\n    shift # remove the current value for `$1` and use the next\ndone

Explanation While Loop

We are looping through $1, which is the first passed argument. In the example code above, it will be -t.

As $1 matches -t in the case scenario, that case is used.

shift\nTAG=$1\n;;

The shift command is necessary as we want the value of the tag. There is a differece with the --skip-verification flag, as no value is provided. In that case, we do not need a shift statement.

SKIP_VERIFICATION=true\n;;

We only set SKIP_VERIFICATION to true.

Example 2 - For Loop

Instead of using a while loop, we can use a for loop to loop through all arguments in the arguments array. This example does the exact same thing as the previous one.

# if no arguments are provided, return usage function\nif [ $# -eq 0 ]; then\n    usage # run usage function\n    exit 1\nfi\n\nSKIP_VERIFICATION=false\nTAG=\n\nfor arg in \"$@\"; do\n    case $arg in\n    --skip-verification)\n        SKIP_VERIFICATION=true\n        shift # Remove --skip-verification from `$@`\n        ;;\n    -t | --tag)\n        TAG=$2\n        shift # Remove argument (-t) name from `$@`\n        shift # Remove argument value (latest) from `$@`\n        ;;\n    -h | --help)\n        usage # run usage function on help\n        ;;\n    *)\n        usage # run usage function if wrong argument provided\n        ;;\n    esac\ndone

Explanation For Loop

Logic with Flags

The flags have been saved to variables, which you can use in your code later on. These are some examples.

if [[ \"$TAG\" == \"\" ]]; then\n    echo \"You must provide a tag\";\n    exit 1;\nfi\n\nif [[ $SKIP_VERIFICATION == false ]]; then\n    # do not verify\nelse\n    # do verify\nfi

TL;DR

This is the full code:

#! /bin/bash\n\nfunction usage() {\n    cat <<USAGE\n\n    Usage: $0 [-t tag] [--skip-verification]\n\n    Options:\n        -t, --tag:            information about argument\n        --skip-verification:  information about argument\nUSAGE\n    exit 1\n}\n\nif [ $# -eq 0 ]; then\n    usage\n    exit 1\nfi\n\nSKIP_VERIFICATION=false\nTAG=\n\nwhile [ \"$1\" != \"\" ]; do\n    case $1 in\n    --skip-verification)\n        SKIP_VERIFICATION=true\n        ;;\n    -t | --tag)\n        shift\n        TAG=$1\n        ;;\n    -h | --help)\n        usage\n        ;;\n    *)\n        usage\n        exit 1\n        ;;\n    esac\n    shift\ndone\n\nif [[ $TAG == \"\" ]]; then\n    echo \"You must provide a tag\";\n    exit 1;\nfi\n\nif [[ $SKIP_VERIFICATION == false ]]; then\n    # do not verify\nelse\n    # do verify\nfi

"},"previous":{"author":"Anton Ödman","title":"How To Install Docker On WSL","date":"2020-04-21","description":"This is the quickest way to install Docker on WSL and sync it with your Docker containers.","tags":["wsl"],"draft":false,"cover":"/covers/png/install-docker-on-wsl.png","aliases":["/install-docker-on-wsl"],"slug":"install-docker-on-wsl","isIndexFile":false,"category":"wsl","component":{},"preview":{"html":"

First, we need to expose a port in Docker for Windows for it to work in WSL.

","text":"First, we need to expose a port in Docker for Windows for it to work in WSL."},"readingTime":"3 min read","body":"

Configure Docker for Windows

First, we need to expose a port in Docker for Windows for it to work in WSL.

$\"docker$

Install Docker

This is how you install Docker in your WSL environment - it is taken from Docker’s installation docs. Just copy and paste basically. This is for Ubuntu 18.04.

# Update the apt package list.\nsudo apt-get update -y\n\n# Install Docker's package dependencies.\nsudo apt-get install -y \n    apt-transport-https \n    ca-certificates \n    curl \n    software-properties-common\n\n# Download and add Docker's official public PGP key.\ncurl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -\n\n# Verify the fingerprint.\nsudo apt-key fingerprint 0EBFCD88\n\n# Add the `stable` channel's Docker upstream repository.\n#\n# If you want to live on the edge, you can change \"stable\" below to \"test\" or\n# \"nightly\". I highly recommend sticking with stable!\nsudo add-apt-repository \n   \"deb [arch=amd64] https://download.docker.com/linux/ubuntu    $(lsb_release -cs)    stable\"\n\n# Update the apt package list (for the new apt repo).\nsudo apt-get update -y\n\n# Install the latest version of Docker CE.\nsudo apt-get install -y docker-ce\n\n# Allow your user to access the Docker CLI without needing root access.\nsudo usermod -aG docker $USER

After this, close and open a new terminal, so you can run Docker without sudo.

Install Docker Compose

Installing Docker Compose can be done via PIP or the normal apt-get way.

# Install Python 3 and PIP.\nsudo apt-get install -y python3 python3-pip\npip3 install --user docker-compose\n\n# Or install only Docker Compose\nsudo apt-get install docker-compose

Add bin to your PATH

You need to add /home/<username>/.local/bin to your PATH.

Edit your ~/.profile file with nano ~/.profile and add a new line anywhere in the file. Add the text export PATH="$PATH:$HOME/.local/bin"

Run source ~/.profile to activate your new path.

Confirm that it works by running echo $PATH.

Add DOCKER_HOST

You might need to export the following variable to make it work. You can write it either in ~/.zshrc or in ~/.bashrc.

export DOCKER_HOST=127.0.0.1:2375

Modify WSL configurations

If you are running Windows 10 18.03+ or newer, it might be good to make some changes. sudo nano /etc/wsl.conf to edit your configurations file.

[automount]\nroot = /\noptions = \"metadata\"

This will allow you to work from /c instead of /mnt/c, and also fixes some of your permissions. You need to sign out of Windows to make this work.

"}},{"author":"Anton Ödman","title":"How To Install Docker On WSL","date":"2020-04-21","description":"This is the quickest way to install Docker on WSL and sync it with your Docker containers.","tags":["wsl"],"draft":false,"cover":"/covers/png/install-docker-on-wsl.png","aliases":["/install-docker-on-wsl"],"slug":"install-docker-on-wsl","isIndexFile":false,"category":"wsl","component":{},"preview":{"html":"

First, we need to expose a port in Docker for Windows for it to work in WSL.

","text":"First, we need to expose a port in Docker for Windows for it to work in WSL."},"readingTime":"3 min read","body":"

Configure Docker for Windows

First, we need to expose a port in Docker for Windows for it to work in WSL.

$\"docker$

Install Docker

This is how you install Docker in your WSL environment - it is taken from Docker’s installation docs. Just copy and paste basically. This is for Ubuntu 18.04.

# Update the apt package list.\nsudo apt-get update -y\n\n# Install Docker's package dependencies.\nsudo apt-get install -y \n    apt-transport-https \n    ca-certificates \n    curl \n    software-properties-common\n\n# Download and add Docker's official public PGP key.\ncurl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -\n\n# Verify the fingerprint.\nsudo apt-key fingerprint 0EBFCD88\n\n# Add the `stable` channel's Docker upstream repository.\n#\n# If you want to live on the edge, you can change \"stable\" below to \"test\" or\n# \"nightly\". I highly recommend sticking with stable!\nsudo add-apt-repository \n   \"deb [arch=amd64] https://download.docker.com/linux/ubuntu    $(lsb_release -cs)    stable\"\n\n# Update the apt package list (for the new apt repo).\nsudo apt-get update -y\n\n# Install the latest version of Docker CE.\nsudo apt-get install -y docker-ce\n\n# Allow your user to access the Docker CLI without needing root access.\nsudo usermod -aG docker $USER

After this, close and open a new terminal, so you can run Docker without sudo.

Install Docker Compose

Installing Docker Compose can be done via PIP or the normal apt-get way.

# Install Python 3 and PIP.\nsudo apt-get install -y python3 python3-pip\npip3 install --user docker-compose\n\n# Or install only Docker Compose\nsudo apt-get install docker-compose

Add bin to your PATH

You need to add /home/<username>/.local/bin to your PATH.

Edit your ~/.profile file with nano ~/.profile and add a new line anywhere in the file. Add the text export PATH="$PATH:$HOME/.local/bin"

Run source ~/.profile to activate your new path.

Confirm that it works by running echo $PATH.

Add DOCKER_HOST

You might need to export the following variable to make it work. You can write it either in ~/.zshrc or in ~/.bashrc.

export DOCKER_HOST=127.0.0.1:2375

Modify WSL configurations

If you are running Windows 10 18.03+ or newer, it might be good to make some changes. sudo nano /etc/wsl.conf to edit your configurations file.

[automount]\nroot = /\noptions = \"metadata\"

This will allow you to work from /c instead of /mnt/c, and also fixes some of your permissions. You need to sign out of Windows to make this work.

","next":{"author":"Anton Ödman","title":"Run NPM (Or Any Other) Scripts Before Build With ASP.NET","date":"2020-04-27","description":"Run any script you want (in this case NPM) before a build in ASP.NET Core.","tags":["aspnet"],"draft":false,"cover":"/covers/png/run-scripts.png","aliases":["/run-scripts"],"slug":"run-scripts","isIndexFile":false,"category":"aspnet","component":{},"preview":{"html":"

Running scripts

The only thing you need to do is to add a target to your .csproj file. It looks something like this:

<Target Name=\"GetTranslations\" BeforeTargets=\"Build\">\n    <Exec WorkingDirectory=\"$(SpaRoot)\" Command=\"npm run translations\" />\n</Target>

"},"previous":{"author":"Anton Ödman","title":"How To Install Brew on WSL","date":"2020-04-20","description":"The easiest way to install Brew on WSL, in this case Ubuntu.","tags":["wsl"],"draft":false,"cover":"/covers/png/install-brew-on-wsl.png","aliases":["/install-brew-on-wsl"],"slug":"install-brew-on-wsl","isIndexFile":false,"category":"wsl","component":{},"preview":{"html":"

Installing and configuring Brew on WSL is not quite as easy as on, for example, MacOS. You need to configure some files and add paths yourself, this is how.

","text":"Installing and configuring Brew on WSL is not quite as easy as on, for example, MacOS. You need to configure some files and add paths yourself, this is how."},"readingTime":"2 min read","body":"

Brew on WSL

Installing and configuring Brew on WSL is not quite as easy as on, for example, MacOS. You need to configure some files and add paths yourself, this is how.

Start by installing Brew the normal way.

sh -c \"$(curl -fsSL https://raw.githubusercontent.com/Linuxbrew/install/master/install.sh)\"

Now we need to configure our ~/.profile and add linuxbrew to our path. Just run these 4 commands.

test -d ~/.linuxbrew && eval $(~/.linuxbrew/bin/brew shellenv)\n\ntest -d /home/linuxbrew/.linuxbrew && eval $(/home/linuxbrew/.linuxbrew/bin/brew shellenv)\n\ntest -r ~/.bash_profile && echo \"eval $($(brew --prefix)/bin/brew shellenv)\" >>~/.bash_profile\n\necho \"eval $($(brew --prefix)/bin/brew shellenv)\" >>~/.profile

Patchelf fix

You might be getting an error about patchelf, this is the simple fix:

sudo apt-get update\nsudo apt-get install build-essential

Use on another shell than Bash

Many people use other shells than Bash, for example zsh. If you use that, remember to source ~/.profile in your ~/.zshrc file.

"}},{"author":"Anton Ödman","title":"How To Install Brew on WSL","date":"2020-04-20","description":"The easiest way to install Brew on WSL, in this case Ubuntu.","tags":["wsl"],"draft":false,"cover":"/covers/png/install-brew-on-wsl.png","aliases":["/install-brew-on-wsl"],"slug":"install-brew-on-wsl","isIndexFile":false,"category":"wsl","component":{},"preview":{"html":"

Installing and configuring Brew on WSL is not quite as easy as on, for example, MacOS. You need to configure some files and add paths yourself, this is how.

Brew on WSL

Installing and configuring Brew on WSL is not quite as easy as on, for example, MacOS. You need to configure some files and add paths yourself, this is how.

Start by installing Brew the normal way.

sh -c \"$(curl -fsSL https://raw.githubusercontent.com/Linuxbrew/install/master/install.sh)\"

Now we need to configure our ~/.profile and add linuxbrew to our path. Just run these 4 commands.

test -d ~/.linuxbrew && eval $(~/.linuxbrew/bin/brew shellenv)\n\ntest -d /home/linuxbrew/.linuxbrew && eval $(/home/linuxbrew/.linuxbrew/bin/brew shellenv)\n\ntest -r ~/.bash_profile && echo \"eval $($(brew --prefix)/bin/brew shellenv)\" >>~/.bash_profile\n\necho \"eval $($(brew --prefix)/bin/brew shellenv)\" >>~/.profile

Patchelf fix

You might be getting an error about patchelf, this is the simple fix:

sudo apt-get update\nsudo apt-get install build-essential

Use on another shell than Bash

Many people use other shells than Bash, for example zsh. If you use that, remember to source ~/.profile in your ~/.zshrc file.

","next":{"author":"Anton Ödman","title":"How To Install Docker On WSL","date":"2020-04-21","description":"This is the quickest way to install Docker on WSL and sync it with your Docker containers.","tags":["wsl"],"draft":false,"cover":"/covers/png/install-docker-on-wsl.png","aliases":["/install-docker-on-wsl"],"slug":"install-docker-on-wsl","isIndexFile":false,"category":"wsl","component":{},"preview":{"html":"

First, we need to expose a port in Docker for Windows for it to work in WSL.

","text":"First, we need to expose a port in Docker for Windows for it to work in WSL."},"readingTime":"3 min read","body":"

Configure Docker for Windows

First, we need to expose a port in Docker for Windows for it to work in WSL.

$\"docker$

Install Docker

This is how you install Docker in your WSL environment - it is taken from Docker’s installation docs. Just copy and paste basically. This is for Ubuntu 18.04.

# Update the apt package list.\nsudo apt-get update -y\n\n# Install Docker's package dependencies.\nsudo apt-get install -y \n    apt-transport-https \n    ca-certificates \n    curl \n    software-properties-common\n\n# Download and add Docker's official public PGP key.\ncurl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -\n\n# Verify the fingerprint.\nsudo apt-key fingerprint 0EBFCD88\n\n# Add the `stable` channel's Docker upstream repository.\n#\n# If you want to live on the edge, you can change \"stable\" below to \"test\" or\n# \"nightly\". I highly recommend sticking with stable!\nsudo add-apt-repository \n   \"deb [arch=amd64] https://download.docker.com/linux/ubuntu    $(lsb_release -cs)    stable\"\n\n# Update the apt package list (for the new apt repo).\nsudo apt-get update -y\n\n# Install the latest version of Docker CE.\nsudo apt-get install -y docker-ce\n\n# Allow your user to access the Docker CLI without needing root access.\nsudo usermod -aG docker $USER

After this, close and open a new terminal, so you can run Docker without sudo.

Install Docker Compose

Installing Docker Compose can be done via PIP or the normal apt-get way.

# Install Python 3 and PIP.\nsudo apt-get install -y python3 python3-pip\npip3 install --user docker-compose\n\n# Or install only Docker Compose\nsudo apt-get install docker-compose

Add bin to your PATH

You need to add /home/<username>/.local/bin to your PATH.

Edit your ~/.profile file with nano ~/.profile and add a new line anywhere in the file. Add the text export PATH="$PATH:$HOME/.local/bin"

Run source ~/.profile to activate your new path.

Confirm that it works by running echo $PATH.

Add DOCKER_HOST

You might need to export the following variable to make it work. You can write it either in ~/.zshrc or in ~/.bashrc.

export DOCKER_HOST=127.0.0.1:2375

Modify WSL configurations

If you are running Windows 10 18.03+ or newer, it might be good to make some changes. sudo nano /etc/wsl.conf to edit your configurations file.

[automount]\nroot = /\noptions = \"metadata\"

This will allow you to work from /c instead of /mnt/c, and also fixes some of your permissions. You need to sign out of Windows to make this work.

"},"previous":{"author":"Anton Ödman","title":"Get The CSS Value Of A Property In Java Script","date":"2020-04-16","description":"Fetch your CSS values within your JavaScript code","tags":["javascript"],"draft":false,"cover":"/covers/png/get-css-property.png","aliases":["/get-css-property"],"slug":"get-css-property","isIndexFile":false,"category":"javascript","component":{},"preview":{"html":"

Fetching CSS styles in JavaScript is quite easy, we need to use the getComputedStyle() global function.

","text":"Fetching CSS styles in JavaScript is quite easy, we need to use the getComputedStyle() global function."},"readingTime":"1 min read","body":"

CSS styles in JavaScript

Fetching CSS styles in JavaScript is quite easy, we need to use the getComputedStyle() global function.

const element = document.querySelector(\".element\");\nconst style = getComputedStyle(element);\nstyle.color; // the value of the color

"}},{"author":"Anton Ödman","title":"Get The CSS Value Of A Property In Java Script","date":"2020-04-16","description":"Fetch your CSS values within your JavaScript code","tags":["javascript"],"draft":false,"cover":"/covers/png/get-css-property.png","aliases":["/get-css-property"],"slug":"get-css-property","isIndexFile":false,"category":"javascript","component":{},"preview":{"html":"

Fetching CSS styles in JavaScript is quite easy, we need to use the getComputedStyle() global function.

","text":"Fetching CSS styles in JavaScript is quite easy, we need to use the getComputedStyle() global function."},"readingTime":"1 min read","body":"

CSS styles in JavaScript

Fetching CSS styles in JavaScript is quite easy, we need to use the getComputedStyle() global function.

const element = document.querySelector(\".element\");\nconst style = getComputedStyle(element);\nstyle.color; // the value of the color

","next":{"author":"Anton Ödman","title":"How To Install Brew on WSL","date":"2020-04-20","description":"The easiest way to install Brew on WSL, in this case Ubuntu.","tags":["wsl"],"draft":false,"cover":"/covers/png/install-brew-on-wsl.png","aliases":["/install-brew-on-wsl"],"slug":"install-brew-on-wsl","isIndexFile":false,"category":"wsl","component":{},"preview":{"html":"

Installing and configuring Brew on WSL is not quite as easy as on, for example, MacOS. You need to configure some files and add paths yourself, this is how.

Brew on WSL

Installing and configuring Brew on WSL is not quite as easy as on, for example, MacOS. You need to configure some files and add paths yourself, this is how.

Start by installing Brew the normal way.

sh -c \"$(curl -fsSL https://raw.githubusercontent.com/Linuxbrew/install/master/install.sh)\"

Now we need to configure our ~/.profile and add linuxbrew to our path. Just run these 4 commands.

test -d ~/.linuxbrew && eval $(~/.linuxbrew/bin/brew shellenv)\n\ntest -d /home/linuxbrew/.linuxbrew && eval $(/home/linuxbrew/.linuxbrew/bin/brew shellenv)\n\ntest -r ~/.bash_profile && echo \"eval $($(brew --prefix)/bin/brew shellenv)\" >>~/.bash_profile\n\necho \"eval $($(brew --prefix)/bin/brew shellenv)\" >>~/.profile

Patchelf fix

You might be getting an error about patchelf, this is the simple fix:

sudo apt-get update\nsudo apt-get install build-essential

Use on another shell than Bash

Many people use other shells than Bash, for example zsh. If you use that, remember to source ~/.profile in your ~/.zshrc file.

"},"previous":{"author":"Anton Ödman","title":"Calculate How Many Days There Are Between Two Dates in JavaScript","date":"2020-04-15","description":"How to calculate the amount of days between two dates in JavaScript.","tags":["javascript"],"draft":false,"cover":"/covers/png/days-between-dates.png","aliases":["/days-between-dates"],"slug":"days-between-dates","isIndexFile":false,"category":"javascript","component":{},"preview":{"html":"

There are many ways to check the days between two dates - this one uses a lot to iterate through each day and just add one for each day until we get the actual value.

","text":"There are many ways to check the days between two dates - this one uses a lot to iterate through each day and just add one for each day until we get the actual value."},"readingTime":"1 min read","body":"

There are many ways to check the days between two dates - this one uses a lot to iterate through each day and just add one for each day until we get the actual value.

const nightBetweenDates = (startDate, endDate) => {\n\tconst start = new Date(startDate);\n\tconst end = new Date(endDate);\n\tlet dayCount = 0;\n\n\twhile (end > start) {\n\t\tdayCount++;\n\t\tstart.setDate(start.getDate() + 1);\n\t}\n\n\treturn dayCount;\n};

"}},{"author":"Anton Ödman","title":"Calculate How Many Days There Are Between Two Dates in JavaScript","date":"2020-04-15","description":"How to calculate the amount of days between two dates in JavaScript.","tags":["javascript"],"draft":false,"cover":"/covers/png/days-between-dates.png","aliases":["/days-between-dates"],"slug":"days-between-dates","isIndexFile":false,"category":"javascript","component":{},"preview":{"html":"

There are many ways to check the days between two dates - this one uses a lot to iterate through each day and just add one for each day until we get the actual value.

const nightBetweenDates = (startDate, endDate) => {\n\tconst start = new Date(startDate);\n\tconst end = new Date(endDate);\n\tlet dayCount = 0;\n\n\twhile (end > start) {\n\t\tdayCount++;\n\t\tstart.setDate(start.getDate() + 1);\n\t}\n\n\treturn dayCount;\n};

","next":{"author":"Anton Ödman","title":"Get The CSS Value Of A Property In Java Script","date":"2020-04-16","description":"Fetch your CSS values within your JavaScript code","tags":["javascript"],"draft":false,"cover":"/covers/png/get-css-property.png","aliases":["/get-css-property"],"slug":"get-css-property","isIndexFile":false,"category":"javascript","component":{},"preview":{"html":"

Fetching CSS styles in JavaScript is quite easy, we need to use the getComputedStyle() global function.

","text":"Fetching CSS styles in JavaScript is quite easy, we need to use the getComputedStyle() global function."},"readingTime":"1 min read","body":"

CSS styles in JavaScript

Fetching CSS styles in JavaScript is quite easy, we need to use the getComputedStyle() global function.

const element = document.querySelector(\".element\");\nconst style = getComputedStyle(element);\nstyle.color; // the value of the color

"},"previous":{"author":"Anton Ödman","title":"Check If Two Dates Are The Same Day In JavaScript","date":"2020-04-14","description":"A simple function to check if two date objects are referring to the same day.","tags":["javascript"],"draft":false,"cover":"/covers/png/check-same-date.png","aliases":["/check-same-date"],"slug":"check-same-date","isIndexFile":false,"category":"javascript","component":{},"preview":{"html":"

Unfortunately, this is not a base functionality of the date object. Instead, we can use the getDate, getMonth and getFullYear methods to check if the dates are the same.

","text":"Unfortunately, this is not a base functionality of the date object. Instead, we can use the getDate, getMonth and getFullYear methods to check if the dates are the same."},"readingTime":"1 min read","body":"

JavaScript date objects

Unfortunately, this is not a base functionality of the date object. Instead, we can use the getDate, getMonth and getFullYear methods to check if the dates are the same.

const sameDay = (firstDate, secondDate) =>\n\tfirstDate.getFullYear() === secondDate.getFullYear() &&\n\tfirstDate.getMonth() === secondDate.getMonth() &&\n\tfirstDate.getDate() === secondDate.getDate();

The usage looks like this

const isSameDay = sameDay(new Date(), new Date()); // true

"}},{"author":"Anton Ödman","title":"Check If Two Dates Are The Same Day In JavaScript","date":"2020-04-14","description":"A simple function to check if two date objects are referring to the same day.","tags":["javascript"],"draft":false,"cover":"/covers/png/check-same-date.png","aliases":["/check-same-date"],"slug":"check-same-date","isIndexFile":false,"category":"javascript","component":{},"preview":{"html":"

Unfortunately, this is not a base functionality of the date object. Instead, we can use the getDate, getMonth and getFullYear methods to check if the dates are the same.

JavaScript date objects

Unfortunately, this is not a base functionality of the date object. Instead, we can use the getDate, getMonth and getFullYear methods to check if the dates are the same.

const sameDay = (firstDate, secondDate) =>\n\tfirstDate.getFullYear() === secondDate.getFullYear() &&\n\tfirstDate.getMonth() === secondDate.getMonth() &&\n\tfirstDate.getDate() === secondDate.getDate();

The usage looks like this

const isSameDay = sameDay(new Date(), new Date()); // true

","next":{"author":"Anton Ödman","title":"Calculate How Many Days There Are Between Two Dates in JavaScript","date":"2020-04-15","description":"How to calculate the amount of days between two dates in JavaScript.","tags":["javascript"],"draft":false,"cover":"/covers/png/days-between-dates.png","aliases":["/days-between-dates"],"slug":"days-between-dates","isIndexFile":false,"category":"javascript","component":{},"preview":{"html":"

There are many ways to check the days between two dates - this one uses a lot to iterate through each day and just add one for each day until we get the actual value.

const nightBetweenDates = (startDate, endDate) => {\n\tconst start = new Date(startDate);\n\tconst end = new Date(endDate);\n\tlet dayCount = 0;\n\n\twhile (end > start) {\n\t\tdayCount++;\n\t\tstart.setDate(start.getDate() + 1);\n\t}\n\n\treturn dayCount;\n};

"},"previous":{"author":"Anton Ödman","title":"Remove Duplicates in a JavaScript Array","date":"2020-04-08","description":"A simple and clean method to remove all duplicates in a given array.","tags":["javascript"],"draft":false,"cover":"/covers/png/array-remove-duplicates.png","aliases":["/array-remove-duplicates"],"slug":"array-remove-duplicates","isIndexFile":false,"category":"javascript","component":{},"preview":{"html":"

We will be using a set, introduced in ES6. It’s a data structure with data that cannot be repeated. If we would have an array like this:

","text":"We will be using a set, introduced in ES6. It’s a data structure with data that cannot be repeated. If we would have an array like this:"},"readingTime":"1 min read","body":"

Remove duplicates using a Set

We will be using a set, introduced in ES6. It’s a data structure with data that cannot be repeated. If we would have an array like this:

const list = [1, 2, 2, 3];

We could easily remove the duplicates by combining the set syntax with the array syntax, combined with the spread operator.

const listWithoutDuplicates = [...newSet(list)]; // [1, 2, 3]

This basically creates a unique set with the given array, and uses the spread operator ... as well as the square brackets [] to create a new array from that set. Easy and clean.

"}},{"author":"Anton Ödman","title":"Remove Duplicates in a JavaScript Array","date":"2020-04-08","description":"A simple and clean method to remove all duplicates in a given array.","tags":["javascript"],"draft":false,"cover":"/covers/png/array-remove-duplicates.png","aliases":["/array-remove-duplicates"],"slug":"array-remove-duplicates","isIndexFile":false,"category":"javascript","component":{},"preview":{"html":"

We will be using a set, introduced in ES6. It’s a data structure with data that cannot be repeated. If we would have an array like this:

","text":"We will be using a set, introduced in ES6. It’s a data structure with data that cannot be repeated. If we would have an array like this:"},"readingTime":"1 min read","body":"

Remove duplicates using a Set

We will be using a set, introduced in ES6. It’s a data structure with data that cannot be repeated. If we would have an array like this:

const list = [1, 2, 2, 3];

We could easily remove the duplicates by combining the set syntax with the array syntax, combined with the spread operator.

const listWithoutDuplicates = [...newSet(list)]; // [1, 2, 3]

This basically creates a unique set with the given array, and uses the spread operator ... as well as the square brackets [] to create a new array from that set. Easy and clean.

","next":{"author":"Anton Ödman","title":"Check If Two Dates Are The Same Day In JavaScript","date":"2020-04-14","description":"A simple function to check if two date objects are referring to the same day.","tags":["javascript"],"draft":false,"cover":"/covers/png/check-same-date.png","aliases":["/check-same-date"],"slug":"check-same-date","isIndexFile":false,"category":"javascript","component":{},"preview":{"html":"

Unfortunately, this is not a base functionality of the date object. Instead, we can use the getDate, getMonth and getFullYear methods to check if the dates are the same.

JavaScript date objects

Unfortunately, this is not a base functionality of the date object. Instead, we can use the getDate, getMonth and getFullYear methods to check if the dates are the same.

const sameDay = (firstDate, secondDate) =>\n\tfirstDate.getFullYear() === secondDate.getFullYear() &&\n\tfirstDate.getMonth() === secondDate.getMonth() &&\n\tfirstDate.getDate() === secondDate.getDate();

The usage looks like this

const isSameDay = sameDay(new Date(), new Date()); // true

"},"previous":{"author":"Anton Ödman","title":"Clear All Node Modules Folders Recursively","date":"2020-04-06","description":"Remove all node_modules folders within a directory with one simple command.","tags":["javascript"],"draft":false,"cover":"/covers/png/clear-node-modules.png","aliases":["/clear-node-modules"],"slug":"clear-node-modules","isIndexFile":false,"category":"javascript","component":{},"preview":{"html":"

The node_modules folder takes up a lot of space, especially if you have several projects in a folder. This simple bash command will help you clear all node_module folders within the directory you are located in.

","text":"The node_modules folder takes up a lot of space, especially if you have several projects in a folder. This simple bash command will help you clear all node_module folders within the directory you are located in."},"readingTime":"1 min read","body":"

Clearing node_modules

find . -name \"node_modules\" -type d -prune -exec rm -rf '{}' +

find . - find in the current directory
-name "node_modules" - with the correct name
-type d - only directories
-prune - instructs find command not to descend into the current directory for it to exclude child node_modules directories.
-exec rm -rf '{}' + - execute rm -rf on the matching result. The '{}' + will append each selected file name at the end, improving performance.

"}},{"author":"Anton Ödman","title":"Clear All Node Modules Folders Recursively","date":"2020-04-06","description":"Remove all node_modules folders within a directory with one simple command.","tags":["javascript"],"draft":false,"cover":"/covers/png/clear-node-modules.png","aliases":["/clear-node-modules"],"slug":"clear-node-modules","isIndexFile":false,"category":"javascript","component":{},"preview":{"html":"

Clearing node_modules

find . -name \"node_modules\" -type d -prune -exec rm -rf '{}' +

find . - find in the current directory
-name "node_modules" - with the correct name
-type d - only directories
-prune - instructs find command not to descend into the current directory for it to exclude child node_modules directories.
-exec rm -rf '{}' + - execute rm -rf on the matching result. The '{}' + will append each selected file name at the end, improving performance.

","next":{"author":"Anton Ödman","title":"Remove Duplicates in a JavaScript Array","date":"2020-04-08","description":"A simple and clean method to remove all duplicates in a given array.","tags":["javascript"],"draft":false,"cover":"/covers/png/array-remove-duplicates.png","aliases":["/array-remove-duplicates"],"slug":"array-remove-duplicates","isIndexFile":false,"category":"javascript","component":{},"preview":{"html":"

We will be using a set, introduced in ES6. It’s a data structure with data that cannot be repeated. If we would have an array like this:

","text":"We will be using a set, introduced in ES6. It’s a data structure with data that cannot be repeated. If we would have an array like this:"},"readingTime":"1 min read","body":"

Remove duplicates using a Set

We will be using a set, introduced in ES6. It’s a data structure with data that cannot be repeated. If we would have an array like this:

const list = [1, 2, 2, 3];

We could easily remove the duplicates by combining the set syntax with the array syntax, combined with the spread operator.

const listWithoutDuplicates = [...newSet(list)]; // [1, 2, 3]

This basically creates a unique set with the given array, and uses the spread operator ... as well as the square brackets [] to create a new array from that set. Easy and clean.

"},"previous":{"author":"Anton Ödman","title":"Backup Linux Data With Rsync Over SSH","date":"2020-04-03","description":"How you can backup your data with Rsync in a Linux environment.","tags":["linux"],"draft":false,"cover":"/covers/png/rsync-backup.png","aliases":["/rsync-backup"],"slug":"rsync-backup","isIndexFile":false,"category":"linux","component":{},"preview":{"html":"

Rsync can be used for backups, internal and external. The basic usage looks like this.

","text":"Rsync can be used for backups, internal and external. The basic usage looks like this."},"readingTime":"2 min read","body":"

Rsync

Rsync can be used for backups, internal and external. The basic usage looks like this.

rsync /directory1 /directory2

This will backup your files in directory1 to directory2.

Some basics flags that can be good to use:

-a: Recursive. Recurse into directories and preserve most information.
-v: Verbose. See what you are backing up.
--delete: Delete all files in directory2 that does not exist in directory1.

Rsync over SSH

If you want to backup your data to an external source, you can use SSH.

rsync  ~/directory1 root@<ip>:/directory2

This works the same way as above. You can also import your data by “reversing” the syntax.

rsync root@<ip>:/directory2  ~/directory1

Rsync over SSH with password

More often than not, you need to write a password to allow the backup to happen. In that case, you can use sshpass.

sudo apt-get install sshpass

The new syntax should look something like this.

sshpass -p 'sshpassword' rsync ~/directory1/ root@<ip>:/directory2/

"}},{"author":"Anton Ödman","title":"Backup Linux Data With Rsync Over SSH","date":"2020-04-03","description":"How you can backup your data with Rsync in a Linux environment.","tags":["linux"],"draft":false,"cover":"/covers/png/rsync-backup.png","aliases":["/rsync-backup"],"slug":"rsync-backup","isIndexFile":false,"category":"linux","component":{},"preview":{"html":"

Rsync can be used for backups, internal and external. The basic usage looks like this.

","text":"Rsync can be used for backups, internal and external. The basic usage looks like this."},"readingTime":"2 min read","body":"

Rsync

Rsync can be used for backups, internal and external. The basic usage looks like this.

rsync /directory1 /directory2

This will backup your files in directory1 to directory2.

Some basics flags that can be good to use:

-a: Recursive. Recurse into directories and preserve most information.
-v: Verbose. See what you are backing up.
--delete: Delete all files in directory2 that does not exist in directory1.

Rsync over SSH

If you want to backup your data to an external source, you can use SSH.

rsync  ~/directory1 root@<ip>:/directory2

This works the same way as above. You can also import your data by “reversing” the syntax.

rsync root@<ip>:/directory2  ~/directory1

Rsync over SSH with password

More often than not, you need to write a password to allow the backup to happen. In that case, you can use sshpass.

sudo apt-get install sshpass

The new syntax should look something like this.

sshpass -p 'sshpassword' rsync ~/directory1/ root@<ip>:/directory2/

","next":{"author":"Anton Ödman","title":"Clear All Node Modules Folders Recursively","date":"2020-04-06","description":"Remove all node_modules folders within a directory with one simple command.","tags":["javascript"],"draft":false,"cover":"/covers/png/clear-node-modules.png","aliases":["/clear-node-modules"],"slug":"clear-node-modules","isIndexFile":false,"category":"javascript","component":{},"preview":{"html":"

Clearing node_modules

find . -name \"node_modules\" -type d -prune -exec rm -rf '{}' +

find . - find in the current directory
-name "node_modules" - with the correct name
-type d - only directories
-prune - instructs find command not to descend into the current directory for it to exclude child node_modules directories.
-exec rm -rf '{}' + - execute rm -rf on the matching result. The '{}' + will append each selected file name at the end, improving performance.

"},"previous":{"author":"Anton Ödman","title":"Using Here Docs (<<) in Linux","date":"2020-04-02","description":"","tags":["linux"],"draft":false,"cover":"/covers/png/here-docs.png","aliases":["/here-docs"],"slug":"here-docs","isIndexFile":false,"category":"linux","component":{},"preview":{"html":"

Using a here document in Linux is often used for interactive purposes, for example, the ftp, or cat command. It should look something like this:

","text":"Using a here document in Linux is often used for interactive purposes, for example, the ftp, or cat command. It should look something like this:"},"readingTime":"2 min read","body":"

Here Document

Using a here document in Linux is often used for interactive purposes, for example, the ftp, or cat command. It should look something like this:

COMMAND <<EndLine\ncommand #1\ncommand #2\n$varName\nEndLine

All commands within the EndLine will be executed and read as input to the specified command. A real example could look like this:

sudo ftp -n $HOST <<SCRIPT\nuser $USER $PASSWD\nget script.sh\nget world.zip\nget server.properties\nquit\nSCRIPT

All code above will be exected as input to the ftp command.

Wc example

The wc command is used to print different counts for a file. For example, wc -w will count all the words. It is used like this.

echo 'This is a test.' | wc -w  # 4

If we would like to count several lines, we can use here docs.

wc -w <<EOF\nThis is a test\nThis is a new line\nhello\nEOF

This will print the count of all words within the EOF.

"}},{"author":"Anton Ödman","title":"Using Here Docs (<<) in Linux","date":"2020-04-02","description":"","tags":["linux"],"draft":false,"cover":"/covers/png/here-docs.png","aliases":["/here-docs"],"slug":"here-docs","isIndexFile":false,"category":"linux","component":{},"preview":{"html":"

Using a here document in Linux is often used for interactive purposes, for example, the ftp, or cat command. It should look something like this:

","text":"Using a here document in Linux is often used for interactive purposes, for example, the ftp, or cat command. It should look something like this:"},"readingTime":"2 min read","body":"

Here Document

Using a here document in Linux is often used for interactive purposes, for example, the ftp, or cat command. It should look something like this:

COMMAND <<EndLine\ncommand #1\ncommand #2\n$varName\nEndLine

All commands within the EndLine will be executed and read as input to the specified command. A real example could look like this:

sudo ftp -n $HOST <<SCRIPT\nuser $USER $PASSWD\nget script.sh\nget world.zip\nget server.properties\nquit\nSCRIPT

All code above will be exected as input to the ftp command.

Wc example

The wc command is used to print different counts for a file. For example, wc -w will count all the words. It is used like this.

echo 'This is a test.' | wc -w  # 4

If we would like to count several lines, we can use here docs.

wc -w <<EOF\nThis is a test\nThis is a new line\nhello\nEOF

This will print the count of all words within the EOF.

","next":{"author":"Anton Ödman","title":"Backup Linux Data With Rsync Over SSH","date":"2020-04-03","description":"How you can backup your data with Rsync in a Linux environment.","tags":["linux"],"draft":false,"cover":"/covers/png/rsync-backup.png","aliases":["/rsync-backup"],"slug":"rsync-backup","isIndexFile":false,"category":"linux","component":{},"preview":{"html":"

Rsync can be used for backups, internal and external. The basic usage looks like this.

","text":"Rsync can be used for backups, internal and external. The basic usage looks like this."},"readingTime":"2 min read","body":"

Rsync

Rsync can be used for backups, internal and external. The basic usage looks like this.

rsync /directory1 /directory2

This will backup your files in directory1 to directory2.

Some basics flags that can be good to use:

-a: Recursive. Recurse into directories and preserve most information.
-v: Verbose. See what you are backing up.
--delete: Delete all files in directory2 that does not exist in directory1.

Rsync over SSH

If you want to backup your data to an external source, you can use SSH.

rsync  ~/directory1 root@<ip>:/directory2

This works the same way as above. You can also import your data by “reversing” the syntax.

rsync root@<ip>:/directory2  ~/directory1

Rsync over SSH with password

More often than not, you need to write a password to allow the backup to happen. In that case, you can use sshpass.

sudo apt-get install sshpass

The new syntax should look something like this.

sshpass -p 'sshpassword' rsync ~/directory1/ root@<ip>:/directory2/

"},"previous":{"author":"Anton Ödman","title":"How To Kill Processes in Linux","date":"2020-04-01","description":"Kill processes in Linux to keep down memory and CPU usage.","tags":["linux"],"draft":false,"cover":"/covers/png/kill-applications.png","aliases":["/kill-applications"],"slug":"kill-applications","isIndexFile":false,"category":"linux","component":{},"preview":{"html":"

To kill a process or application in Linux is quite simple, you can do it based on ID or name.

","text":"To kill a process or application in Linux is quite simple, you can do it based on ID or name."},"readingTime":"1 min read","body":"

Kill processes

To kill a process or application in Linux is quite simple, you can do it based on ID or name.

Overview

To get an overview I often use the top command using Ubuntu.

$\"top$

This is possible right out of the box, without installing any third-party software.

You can also use the ps -ef command to get something quite like it.

Kill by ID

$\"kill$

To kill by the specified ID, you simply use the kill command.

sudo kill <pid>

Kill by name

$\"kill$

To kill by name, you use the pkill command.

sudo pkill <name>

"}},{"author":"Anton Ödman","title":"How To Kill Processes in Linux","date":"2020-04-01","description":"Kill processes in Linux to keep down memory and CPU usage.","tags":["linux"],"draft":false,"cover":"/covers/png/kill-applications.png","aliases":["/kill-applications"],"slug":"kill-applications","isIndexFile":false,"category":"linux","component":{},"preview":{"html":"

To kill a process or application in Linux is quite simple, you can do it based on ID or name.

","text":"To kill a process or application in Linux is quite simple, you can do it based on ID or name."},"readingTime":"1 min read","body":"

Kill processes

To kill a process or application in Linux is quite simple, you can do it based on ID or name.

Overview

To get an overview I often use the top command using Ubuntu.

$\"top$

This is possible right out of the box, without installing any third-party software.

You can also use the ps -ef command to get something quite like it.

Kill by ID

$\"kill$

To kill by the specified ID, you simply use the kill command.

sudo kill <pid>

Kill by name

$\"kill$

To kill by name, you use the pkill command.

sudo pkill <name>

","next":{"author":"Anton Ödman","title":"Using Here Docs (<<) in Linux","date":"2020-04-02","description":"","tags":["linux"],"draft":false,"cover":"/covers/png/here-docs.png","aliases":["/here-docs"],"slug":"here-docs","isIndexFile":false,"category":"linux","component":{},"preview":{"html":"

Using a here document in Linux is often used for interactive purposes, for example, the ftp, or cat command. It should look something like this:

","text":"Using a here document in Linux is often used for interactive purposes, for example, the ftp, or cat command. It should look something like this:"},"readingTime":"2 min read","body":"

Here Document

Using a here document in Linux is often used for interactive purposes, for example, the ftp, or cat command. It should look something like this:

COMMAND <<EndLine\ncommand #1\ncommand #2\n$varName\nEndLine

All commands within the EndLine will be executed and read as input to the specified command. A real example could look like this:

sudo ftp -n $HOST <<SCRIPT\nuser $USER $PASSWD\nget script.sh\nget world.zip\nget server.properties\nquit\nSCRIPT

All code above will be exected as input to the ftp command.

Wc example

The wc command is used to print different counts for a file. For example, wc -w will count all the words. It is used like this.

echo 'This is a test.' | wc -w  # 4

If we would like to count several lines, we can use here docs.

wc -w <<EOF\nThis is a test\nThis is a new line\nhello\nEOF

This will print the count of all words within the EOF.

"},"previous":{"author":"Anton Ödman","title":"How To Use Screen On Linux","date":"2020-03-31","description":"The basics of Screen on Linux, a cheat sheet.","tags":["linux"],"draft":false,"cover":"/covers/png/screen.png","aliases":["/screen"],"slug":"screen","isIndexFile":false,"category":"linux","component":{},"preview":{"html":"

Screen is a great tool to separate your windows in a Linux environment. It enables you to switch between different screens effortlessly.

","text":"Screen is a great tool to separate your windows in a Linux environment. It enables you to switch between different screens effortlessly."},"readingTime":"2 min read","body":"

Working with Screen

Screen is a great tool to separate your windows in a Linux environment. It enables you to switch between different screens effortlessly.

Installing

First of all, you need to install Screen.

sudo apt-get screen

Basics

Start a new screen with the screen command. You will often use CTRL + A and then another key to do actions. For example, CTRL + A and ? will show you all commands.

To create a name to your Screen session, use the -S flag.

screen -S session_name

You can list all active screens with this command.

screen -ls

Detach

The easiest way to detach from a screen is CTRL + A and then D.

Reattach

Retaching can be done simplest with the -r flag.

screen -r

Will resume to the latest Screen session. You can specify name or ID after if you want to attach to a specific session.

screen -r <session>

Close

There are some ways you can close your session.

Inside the Screen

CTRL + A and then X

CTRL + A and then :quit

Outside of the Screen

screen -ls to get all sessions.

screen -XS <session> quit to quit the session.

-X - Execute command
-S - Choose session

"}},{"author":"Anton Ödman","title":"How To Use Screen On Linux","date":"2020-03-31","description":"The basics of Screen on Linux, a cheat sheet.","tags":["linux"],"draft":false,"cover":"/covers/png/screen.png","aliases":["/screen"],"slug":"screen","isIndexFile":false,"category":"linux","component":{},"preview":{"html":"

Screen is a great tool to separate your windows in a Linux environment. It enables you to switch between different screens effortlessly.

","text":"Screen is a great tool to separate your windows in a Linux environment. It enables you to switch between different screens effortlessly."},"readingTime":"2 min read","body":"

Working with Screen

Screen is a great tool to separate your windows in a Linux environment. It enables you to switch between different screens effortlessly.

Installing

First of all, you need to install Screen.

sudo apt-get screen

Basics

Start a new screen with the screen command. You will often use CTRL + A and then another key to do actions. For example, CTRL + A and ? will show you all commands.

To create a name to your Screen session, use the -S flag.

screen -S session_name

You can list all active screens with this command.

screen -ls

Detach

The easiest way to detach from a screen is CTRL + A and then D.

Reattach

Retaching can be done simplest with the -r flag.

screen -r

Will resume to the latest Screen session. You can specify name or ID after if you want to attach to a specific session.

screen -r <session>

Close

There are some ways you can close your session.

Inside the Screen

CTRL + A and then X

CTRL + A and then :quit

Outside of the Screen

screen -ls to get all sessions.

screen -XS <session> quit to quit the session.

-X - Execute command
-S - Choose session

","next":{"author":"Anton Ödman","title":"How To Kill Processes in Linux","date":"2020-04-01","description":"Kill processes in Linux to keep down memory and CPU usage.","tags":["linux"],"draft":false,"cover":"/covers/png/kill-applications.png","aliases":["/kill-applications"],"slug":"kill-applications","isIndexFile":false,"category":"linux","component":{},"preview":{"html":"

To kill a process or application in Linux is quite simple, you can do it based on ID or name.

","text":"To kill a process or application in Linux is quite simple, you can do it based on ID or name."},"readingTime":"1 min read","body":"

Kill processes

To kill a process or application in Linux is quite simple, you can do it based on ID or name.

Overview

To get an overview I often use the top command using Ubuntu.

$\"top$

This is possible right out of the box, without installing any third-party software.

You can also use the ps -ef command to get something quite like it.

Kill by ID

$\"kill$

To kill by the specified ID, you simply use the kill command.

sudo kill <pid>

Kill by name

$\"kill$

To kill by name, you use the pkill command.

sudo pkill <name>

"},"previous":{"author":"Anton Ödman","title":"How To Copy An SSH Key To Another Linux Machine","date":"2020-03-30","description":"Copy your public SSH key to a remote machine for easier access","tags":["linux"],"draft":false,"cover":"/covers/png/copy-ssh.png","aliases":["/copy-ssh"],"slug":"copy-ssh","isIndexFile":false,"category":"linux","component":{},"preview":{"html":"

Copying your SSH key is a simple and great way to allow for safe ssh communication between your devices.

","text":"Copying your SSH key is a simple and great way to allow for safe ssh communication between your devices."},"readingTime":"1 min read","body":"

Copy SSH

Copying your SSH key is a simple and great way to allow for safe ssh communication between your devices.

Create an SSH key

To create an SSH key, you use the ssh-keygen command. It will be saved at the default /.ssh location.

ssh-keygen -t rsa -b 4096 -C \"Comment here\"

Simplest way

The ssh-copy-id is the simplest way to perform copy of your public SSH key.

ssh-copy-id user@hostname -p <port>

Without password prompt

You can specify the password in the command if you use sshpass, which you need to install.

sshpass -p server_password ssh-copy-id user@IP -p port_number

Without installing anything

This is a basic command that can be run without installing any third-party applications.

cat ~/.ssh/id_rsa.pub | ssh <user>@<hostname> 'umask 0077; mkdir -p .ssh; cat >> .ssh/authorized_keys && echo \"Key copied\"'

"}},{"author":"Anton Ödman","title":"How To Copy An SSH Key To Another Linux Machine","date":"2020-03-30","description":"Copy your public SSH key to a remote machine for easier access","tags":["linux"],"draft":false,"cover":"/covers/png/copy-ssh.png","aliases":["/copy-ssh"],"slug":"copy-ssh","isIndexFile":false,"category":"linux","component":{},"preview":{"html":"

Copying your SSH key is a simple and great way to allow for safe ssh communication between your devices.

","text":"Copying your SSH key is a simple and great way to allow for safe ssh communication between your devices."},"readingTime":"1 min read","body":"

Copy SSH

Copying your SSH key is a simple and great way to allow for safe ssh communication between your devices.

Create an SSH key

To create an SSH key, you use the ssh-keygen command. It will be saved at the default /.ssh location.

ssh-keygen -t rsa -b 4096 -C \"Comment here\"

Simplest way

The ssh-copy-id is the simplest way to perform copy of your public SSH key.

ssh-copy-id user@hostname -p <port>

Without password prompt

You can specify the password in the command if you use sshpass, which you need to install.

sshpass -p server_password ssh-copy-id user@IP -p port_number

Without installing anything

This is a basic command that can be run without installing any third-party applications.

cat ~/.ssh/id_rsa.pub | ssh <user>@<hostname> 'umask 0077; mkdir -p .ssh; cat >> .ssh/authorized_keys && echo \"Key copied\"'

","next":{"author":"Anton Ödman","title":"How To Use Screen On Linux","date":"2020-03-31","description":"The basics of Screen on Linux, a cheat sheet.","tags":["linux"],"draft":false,"cover":"/covers/png/screen.png","aliases":["/screen"],"slug":"screen","isIndexFile":false,"category":"linux","component":{},"preview":{"html":"

Screen is a great tool to separate your windows in a Linux environment. It enables you to switch between different screens effortlessly.

","text":"Screen is a great tool to separate your windows in a Linux environment. It enables you to switch between different screens effortlessly."},"readingTime":"2 min read","body":"

Working with Screen

Screen is a great tool to separate your windows in a Linux environment. It enables you to switch between different screens effortlessly.

Installing

First of all, you need to install Screen.

sudo apt-get screen

Basics

Start a new screen with the screen command. You will often use CTRL + A and then another key to do actions. For example, CTRL + A and ? will show you all commands.

To create a name to your Screen session, use the -S flag.

screen -S session_name

You can list all active screens with this command.

screen -ls

Detach

The easiest way to detach from a screen is CTRL + A and then D.

Reattach

Retaching can be done simplest with the -r flag.

screen -r

Will resume to the latest Screen session. You can specify name or ID after if you want to attach to a specific session.

screen -r <session>

Close

There are some ways you can close your session.

Inside the Screen

CTRL + A and then X

CTRL + A and then :quit

Outside of the Screen

screen -ls to get all sessions.

screen -XS <session> quit to quit the session.

-X - Execute command
-S - Choose session

"},"previous":{"author":"Anton Ödman","title":"How To Run A Bash Script on A Remote Machine Using SSH","date":"2020-03-30","description":"Execute a shell script on a remote machine using SSH on bash.","tags":["linux"],"draft":false,"cover":"/covers/png/remote-script.png","aliases":["/remote-script"],"slug":"remote-script","isIndexFile":false,"category":"linux","component":{},"preview":{"html":"

It’s possible to execute remote scripts without copying the script file with these commands.

","text":"It’s possible to execute remote scripts without copying the script file with these commands."},"readingTime":"1 min read","body":"

Remote script

It’s possible to execute remote scripts without copying the script file with these commands.

Simple way

Execute a command without sudo rights.

ssh root@MachineB 'bash -s' < local_script.sh

Sudo way

If you want sudo rights, this is the right command.

ssh root@MachineB 'echo \"rootpass\" | sudo -Sv && bash -s' < local_script.sh

Interactive way

You can also do in a more interactive way. This can be used when user input is required. It is also possible to pass on arguments.

ssh user@host ARG1=$ARG1 ARG2=$ARG2 'bash -s' <<'ENDSSH'\n  # commands to run on remote host\n  echo $ARG1 $ARG2\nENDSSH

"}},{"author":"Anton Ödman","title":"How To Run A Bash Script on A Remote Machine Using SSH","date":"2020-03-30","description":"Execute a shell script on a remote machine using SSH on bash.","tags":["linux"],"draft":false,"cover":"/covers/png/remote-script.png","aliases":["/remote-script"],"slug":"remote-script","isIndexFile":false,"category":"linux","component":{},"preview":{"html":"

It’s possible to execute remote scripts without copying the script file with these commands.

","text":"It’s possible to execute remote scripts without copying the script file with these commands."},"readingTime":"1 min read","body":"

Remote script

It’s possible to execute remote scripts without copying the script file with these commands.

Simple way

Execute a command without sudo rights.

ssh root@MachineB 'bash -s' < local_script.sh

Sudo way

If you want sudo rights, this is the right command.

ssh root@MachineB 'echo \"rootpass\" | sudo -Sv && bash -s' < local_script.sh

Interactive way

You can also do in a more interactive way. This can be used when user input is required. It is also possible to pass on arguments.

ssh user@host ARG1=$ARG1 ARG2=$ARG2 'bash -s' <<'ENDSSH'\n  # commands to run on remote host\n  echo $ARG1 $ARG2\nENDSSH

","next":{"author":"Anton Ödman","title":"How To Copy An SSH Key To Another Linux Machine","date":"2020-03-30","description":"Copy your public SSH key to a remote machine for easier access","tags":["linux"],"draft":false,"cover":"/covers/png/copy-ssh.png","aliases":["/copy-ssh"],"slug":"copy-ssh","isIndexFile":false,"category":"linux","component":{},"preview":{"html":"

Copying your SSH key is a simple and great way to allow for safe ssh communication between your devices.

","text":"Copying your SSH key is a simple and great way to allow for safe ssh communication between your devices."},"readingTime":"1 min read","body":"

Copy SSH

Copying your SSH key is a simple and great way to allow for safe ssh communication between your devices.

Create an SSH key

To create an SSH key, you use the ssh-keygen command. It will be saved at the default /.ssh location.

ssh-keygen -t rsa -b 4096 -C \"Comment here\"

Simplest way

The ssh-copy-id is the simplest way to perform copy of your public SSH key.

ssh-copy-id user@hostname -p <port>

Without password prompt

You can specify the password in the command if you use sshpass, which you need to install.

sshpass -p server_password ssh-copy-id user@IP -p port_number

Without installing anything

This is a basic command that can be run without installing any third-party applications.

cat ~/.ssh/id_rsa.pub | ssh <user>@<hostname> 'umask 0077; mkdir -p .ssh; cat >> .ssh/authorized_keys && echo \"Key copied\"'

"},"previous":{"author":"Anton Ödman","title":"Serving Different CSS Files in ASP.NET Core with Angular","date":"2020-03-26","description":"Serve different CSS files based on a header parameter on an Angular application with an ASP.NET Core backend.","tags":["aspnet"],"draft":false,"cover":"/covers/png/different-css-spa.png","aliases":["/different-css-spa"],"slug":"different-css-spa","isIndexFile":false,"category":"aspnet","component":{},"preview":{"html":"

This is a guide on how to serve different CSS files based on a passed on styling header that is all made up. So, if the user passes a header called basic, one CSS file will be used, and if the header is called advanced, another CSS file is passed to an Angular application.

","text":"This is a guide on how to serve different CSS files based on a passed on styling header that is all made up. So, if the user passes a header called basic, one CSS file will be used, and if the header is called advanced, another CSS file is passed to an Angular application."},"readingTime":"7 min read","body":"

Serving different CSS files

This approach can be used with many different scenarios - you could for example use query strings - but this example will use a custom styling header.

Also, this applies to any type of SPA application used with ASP.NET Core (Vue, React, etc), but this example is used with Angular. Worth mentioning is that you can serve any types of static files, it does not have to be different CSS files. I can be logos, favicons or pictures.

Creating the files

First, we need the different CSS files. I have created a folder called StaticFiles in the root of the ASP.NET Core project, and created a folder for each file that I want.

$\"folder$

All files that we want to change depending on the header, need to have the same name. For example, the CSS file will always be named index.css.

Creating the middleware

I will create a middleware called StatisFilesHelper.cs, and the whole file looks like this.

using Microsoft.AspNetCore.Builder;\nusing Microsoft.AspNetCore.Http;\nusing Microsoft.Extensions.FileProviders;\nusing System.IO;\n\nnamespace DifferentCSS.Helpers\n{\n    public static class StaticFilesHelper\n    {\n        public static void AddCompanySpecificFiles(this IApplicationBuilder app, params string[] companies)\n        {\n            foreach (string company in companies)\n            {\n                // Add static files based on styling header for a specific company\n                app.UseWhen(\n                    context => context.Request.Headers[\"styling\"] == company,\n                    appBuilder => appBuilder.UseStaticFiles(new StaticFileOptions()\n                    {\n                        FileProvider = new PhysicalFileProvider(\n                            Path.Combine(Directory.GetCurrentDirectory(), \"staticfiles\", company)),\n                        RequestPath = new PathString(\"/staticfiles\")\n                    }));\n            }\n\n            // add base fíles if no header is specified\n            app.UseWhen(\n                context => !context.Request.Headers.ContainsKey(\"styling\"),\n                appBuilder => appBuilder.UseStaticFiles(new StaticFileOptions()\n                {\n                    FileProvider = new PhysicalFileProvider(\n                        Path.Combine(Directory.GetCurrentDirectory(), \"staticfiles\", \"base\")),\n                    RequestPath = new PathString(\"/staticfiles\")\n                }));\n        }\n    }\n}

The AddCompanySpecificFiles method needs a list of strings as a parameter, in which each string represents a company (and each company should have its own CSS).

// ...\nforeach (string company in companies)\n{\n    // Add static files based on styling header for a specific company\n    app.UseWhen(\n        context => context.Request.Headers[\"styling\"] == company,\n        appBuilder => appBuilder.UseStaticFiles(new StaticFileOptions()\n        {\n            FileProvider = new PhysicalFileProvider(\n                Path.Combine(Directory.GetCurrentDirectory(), \"staticfiles\", company)),\n            RequestPath = new PathString(\"/staticfiles\")\n        }));\n}\n//...

In this part, I loop through each string to see if it matches the styling header. If it does, I will use the UseStaticFiles method and point it to the path of the CSS with the same name. So if the header is basic, it points /staticfiles to the path StaticFiles/basic, which one of our CSS is located within.

If the styling header would be advanced, the url /staticfiles would point to StaticFiles/advanced.

// ...\n // add base fíles if no header is specified\napp.UseWhen(\n    context => !context.Request.Headers.ContainsKey(\"styling\"),\n    appBuilder => appBuilder.UseStaticFiles(new StaticFileOptions()\n    {\n        FileProvider = new PhysicalFileProvider(\n            Path.Combine(Directory.GetCurrentDirectory(), \"staticfiles\", \"base\")),\n        RequestPath = new PathString(\"/staticfiles\")\n    }));

If no header is specified, it will use the base folder and use that instead.

Adding to Startup

We need to add our middleware to the Startup.cs file. I put my middleware in a Helpers folder, so I have the include it with the using keyword to apply the middleware.

using DifferentCSS.Helpers;\n// ...\n\npublic void Configure(IApplicationBuilder app, IWebHostEnvironment env)\n{\n    // ...\n    app.AddCompanySpecificFiles(new string[] { \"basic\", \"advanced\" });\n\n}\n

I am passing in a list of strings, each string with the same name as the folders we declared earlier.

Adding to HTML

We need to add the reference in main HTML file as well. In my case, this file is served within the ClientApp, which the Angular application resides in. For me, its located in the src application, and called index.html.

In the head, I simply add a link referencing the /staticfiles url.

<link rel=\"stylesheet\" href=\"/staticfiles/index.css\" type=\"text/css\" />

This will apply the CSS file based on the styling header that is passed on.

Be sure to clear your cache if you change header in the middle of a session, or else the CSS won’t change.

"}},{"author":"Anton Ödman","title":"Serving Different CSS Files in ASP.NET Core with Angular","date":"2020-03-26","description":"Serve different CSS files based on a header parameter on an Angular application with an ASP.NET Core backend.","tags":["aspnet"],"draft":false,"cover":"/covers/png/different-css-spa.png","aliases":["/different-css-spa"],"slug":"different-css-spa","isIndexFile":false,"category":"aspnet","component":{},"preview":{"html":"

Serving different CSS files

This approach can be used with many different scenarios - you could for example use query strings - but this example will use a custom styling header.

Creating the files

First, we need the different CSS files. I have created a folder called StaticFiles in the root of the ASP.NET Core project, and created a folder for each file that I want.

$\"folder$

All files that we want to change depending on the header, need to have the same name. For example, the CSS file will always be named index.css.

Creating the middleware

I will create a middleware called StatisFilesHelper.cs, and the whole file looks like this.

using Microsoft.AspNetCore.Builder;\nusing Microsoft.AspNetCore.Http;\nusing Microsoft.Extensions.FileProviders;\nusing System.IO;\n\nnamespace DifferentCSS.Helpers\n{\n    public static class StaticFilesHelper\n    {\n        public static void AddCompanySpecificFiles(this IApplicationBuilder app, params string[] companies)\n        {\n            foreach (string company in companies)\n            {\n                // Add static files based on styling header for a specific company\n                app.UseWhen(\n                    context => context.Request.Headers[\"styling\"] == company,\n                    appBuilder => appBuilder.UseStaticFiles(new StaticFileOptions()\n                    {\n                        FileProvider = new PhysicalFileProvider(\n                            Path.Combine(Directory.GetCurrentDirectory(), \"staticfiles\", company)),\n                        RequestPath = new PathString(\"/staticfiles\")\n                    }));\n            }\n\n            // add base fíles if no header is specified\n            app.UseWhen(\n                context => !context.Request.Headers.ContainsKey(\"styling\"),\n                appBuilder => appBuilder.UseStaticFiles(new StaticFileOptions()\n                {\n                    FileProvider = new PhysicalFileProvider(\n                        Path.Combine(Directory.GetCurrentDirectory(), \"staticfiles\", \"base\")),\n                    RequestPath = new PathString(\"/staticfiles\")\n                }));\n        }\n    }\n}

The AddCompanySpecificFiles method needs a list of strings as a parameter, in which each string represents a company (and each company should have its own CSS).

// ...\nforeach (string company in companies)\n{\n    // Add static files based on styling header for a specific company\n    app.UseWhen(\n        context => context.Request.Headers[\"styling\"] == company,\n        appBuilder => appBuilder.UseStaticFiles(new StaticFileOptions()\n        {\n            FileProvider = new PhysicalFileProvider(\n                Path.Combine(Directory.GetCurrentDirectory(), \"staticfiles\", company)),\n            RequestPath = new PathString(\"/staticfiles\")\n        }));\n}\n//...

If the styling header would be advanced, the url /staticfiles would point to StaticFiles/advanced.

// ...\n // add base fíles if no header is specified\napp.UseWhen(\n    context => !context.Request.Headers.ContainsKey(\"styling\"),\n    appBuilder => appBuilder.UseStaticFiles(new StaticFileOptions()\n    {\n        FileProvider = new PhysicalFileProvider(\n            Path.Combine(Directory.GetCurrentDirectory(), \"staticfiles\", \"base\")),\n        RequestPath = new PathString(\"/staticfiles\")\n    }));

If no header is specified, it will use the base folder and use that instead.

Adding to Startup

We need to add our middleware to the Startup.cs file. I put my middleware in a Helpers folder, so I have the include it with the using keyword to apply the middleware.

using DifferentCSS.Helpers;\n// ...\n\npublic void Configure(IApplicationBuilder app, IWebHostEnvironment env)\n{\n    // ...\n    app.AddCompanySpecificFiles(new string[] { \"basic\", \"advanced\" });\n\n}\n

I am passing in a list of strings, each string with the same name as the folders we declared earlier.

Adding to HTML

In the head, I simply add a link referencing the /staticfiles url.

<link rel=\"stylesheet\" href=\"/staticfiles/index.css\" type=\"text/css\" />

This will apply the CSS file based on the styling header that is passed on.

Be sure to clear your cache if you change header in the middle of a session, or else the CSS won’t change.

","next":{"author":"Anton Ödman","title":"How To Run A Bash Script on A Remote Machine Using SSH","date":"2020-03-30","description":"Execute a shell script on a remote machine using SSH on bash.","tags":["linux"],"draft":false,"cover":"/covers/png/remote-script.png","aliases":["/remote-script"],"slug":"remote-script","isIndexFile":false,"category":"linux","component":{},"preview":{"html":"

It’s possible to execute remote scripts without copying the script file with these commands.

","text":"It’s possible to execute remote scripts without copying the script file with these commands."},"readingTime":"1 min read","body":"

Remote script

It’s possible to execute remote scripts without copying the script file with these commands.

Simple way

Execute a command without sudo rights.

ssh root@MachineB 'bash -s' < local_script.sh

Sudo way

If you want sudo rights, this is the right command.

ssh root@MachineB 'echo \"rootpass\" | sudo -Sv && bash -s' < local_script.sh

Interactive way

You can also do in a more interactive way. This can be used when user input is required. It is also possible to pass on arguments.

ssh user@host ARG1=$ARG1 ARG2=$ARG2 'bash -s' <<'ENDSSH'\n  # commands to run on remote host\n  echo $ARG1 $ARG2\nENDSSH

"},"previous":{"author":"Anton Ödman","title":"How To Setup NgRx in an Angular Application","date":"2020-03-25","description":"Setup state management with NgRx in your Angular application.","tags":["angular"],"draft":false,"cover":"/covers/png/ngrx-guide.png","aliases":["/ngrx-guide"],"slug":"ngrx-guide","isIndexFile":false,"category":"angular","component":{},"preview":{"html":"

NgRx uses the redux pattern within an Angular application. Setting it up can be quite difficult, so this is a guide following some of the best practices in setting up state management with NgRx.

","text":"NgRx uses the redux pattern within an Angular application. Setting it up can be quite difficult, so this is a guide following some of the best practices in setting up state management with NgRx."},"readingTime":"15 min read","body":"

State management with NgRx

NgRx uses the redux pattern within an Angular application. Setting it up can be quite difficult, so this is a guide following some of the best practices in setting up state management with NgRx.

Installation

First, we need to install the necessary dependencies. As we’ll go for a solid base, we will use the store, effects and store-devtools.

npm install @ngrx/effects @ngrx/store @ngrx/store-devtools --save

Configure app module

Let’s configure app.module.ts to add the NgRx to our application.

// import\nimport { StoreModule } from \"@ngrx/store\";\nimport { StoreDevtoolsModule } from \"@ngrx/store-devtools\";\nimport { environment } from \"src/environments/environment\";\nimport { EffectsModule } from \"@ngrx/effects\";\n\n//...\n@NgModule({\n    //...\n    imports: [\n        // ...\n        StoreModule.forRoot({}),\n\t\tEffectsModule.forRoot([]),\n\t\tStoreDevtoolsModule.instrument({\n\t\t\tmaxAge: 25,\n\t\t\tlogOnly: environment.production\n\t\t})\n    ]\n\n})

So basically, what we do is add an empty object to the StoreModule as well as an empty array to the EffectsModule, we will declare more in the store within a feature later on. We also add the StoreDevtoolsModule if you want to use the Redux DevTools while debugging your application.

Configure sub-module

We will be declaring our reducer in a sub-module, to be able to use lazy loading. For this example, we will use it in a sub-module called dashboard.module.ts.

// imports\nimport { StoreModule } from \"@ngrx/store\";\nimport { reducer } from \"../../state/company/company.reducer\";\nimport { EffectsModule } from \"@ngrx/effects\";\nimport { CompanyEffects } from \"src/app/state/company/company.effects\";\n\n//...\n@NgModule({\n    //...\n    imports: [\n        // ...\n\t\tStoreModule.forFeature(\"companies\", reducer),\n\t\tEffectsModule.forFeature([CompanyEffects])\n    ]\n})

In this example, we will be working with a feature in the StoreModule. This part will handle companies data, that is why the name is companies. All imports are from files that will be created soon, like the reducer and CompanyEffects.

File location

Let’s create a state folder within the app folder. We will add all the necessary folders directly. In the end, it will look like this.

$\"folder$

NgRx uses actions, effects and reducers to manage state. I won’t go in to depth on what each one of them does for now - this will simply show how to set it up.

State

Let’s create a standard state within the app.state.ts file. As we currently do not have anything to include besides the companies, we can just leave it empty.

export interface State {}

Reducer

The reducer is probably the most important, and it will include quite a lot.\nLet’s begin by importing the state we already made, add companies to it, as well as create a simple reducer. This is in the company.reducer.ts file.

import * as fromRoot from \"../app.state\";\n\nexport interface State extends fromRoot.State {\n\tcompanies: CompanyState;\n}\n\nexport interface CompanyState {\n\tcompanies: Company[]; // company is for now, only a made up interface. It can be anything.\n}\n\nexport function reducer(state: CompanyState, action: any) {\n\tswitch (action.type) {\n\t\tdefault:\n\t\t\treturn state;\n\t}\n}

So a lot is going on here. We import the empty state we defined earlier. We overwrite it and add the companies property, in which we will have the CompanyState. The company state will include a list of type Company, which we haven’t declared. This is just as an example.

The store could now look something like this, if we would populate it:

store {\n    companies: {\n        [\n            company1: {},\n            company2: {},\n            //...\n        ]\n    }\n}

However, we created an empty initialState for now.

Actions

Let’s add the actions in the company.action.ts.

import { Action } from \"@ngrx/store\";\n\nexport enum CompanyActionTypes {\n\tUpdateCompanies = \"[Company] Update All Companies\",\n\tUpdateSingleCompany = \"[Company] Update Single Company\",\n}\n\nexport class UpdateCompanies implements Action {\n\treadonly type = CompanyActionTypes.UpdateCompanies;\n\n\tconstructor(public payload: Company[]) {}\n}\n\nexport class UpdateSingleCompany implements Action {\n\treadonly type = CompanyActionTypes.UpdateSingleCompany;\n\n\tconstructor(public payload: Company) {}\n}\n\nexport type CompanyActions =\n\t| UpdateCompanies\n\t| UpdateSingleCompany

We have defined two actions. One for updating the whole array of companies, and one for updating only one company. These will be used back in our reducer to be able to strongly type our actions.

Adding actions to the reducer

We will add our actions to the reducer we just created.

//...\nimport { CompanyActions, CompanyActionTypes } from \"./company.actions\";\n\nconst initialState: CompanyState = [\n\t{\n\t\tid: \"\",\n\t\tname: \"\",\n\t},\n];\n\n// ...\nexport function reducer(state = initialState, action: CompanyActions) {\n\tswitch (action.type) {\n\t\tcase CompanyActionTypes.UpdateCompanies:\n\t\t\treturn { ...state, companies: action.payload };\n\n\t\tcase CompanyActionTypes.UpdateSingleCompany:\n\t\t\tconst updatedCompany = action.payload;\n\n\t\t\tconst dataWithoutCompany = state.filter(\n\t\t\t\t(company) => company.id !== updatedCompany.id\n\t\t\t);\n\n\t\t\tconst dataWithNewCompany = [...dataWithoutCompany, updatedCompany];\n\t\t\treturn { ...state, companies: dataWithNewCompany };\n\n\t\tdefault:\n\t\t\treturn state;\n\t}\n}

We updated our reducer with the two cases - one for each action. We also use the spread operator to merge our current state with our newly updated companies state. UpdateCompanies replaces everything. While UpdateSingleCompany in this case uses the ID to replace the single company, and updates the state with the new array. I also added an initialState, which will be the base whatever the application start, until new ones are loaded. This case, it is just an array with one, empty object.

Selectors

We use selectors to get the data from our state within our components. Let’s declare them in company.reducer.ts.

// ...\nimport { createFeatureSelector, createSelector } from \"@ngrx/store\";\n\n// ...\nconst getCompanyFeatureState =\n\tcreateFeatureSelector < CompanyState > \"companies\";\n\nexport const getCompanies = createSelector(\n\tgetCompanyFeatureState,\n\t(state) => state.companies\n);\n\nexport const getSingleCompany = createSelector(\n\tgetCompanyFeatureState,\n\t(state: CompanyState, props: { id: string }) => {\n\t\tconst stateAsArray = Object.values(state); // turn into an array\n\t\treturn stateAsArray.find((company) => company.companyId === props.id);\n\t}\n);\n\n// ...

We created two selectors, one to get all companies, and one to get a single company based on a provided ID.

Using selectors and actions in components

These are some examples how you use the selectors and actions to manage your state within your components.

// ...\nimport { Store, select } from \"@ngrx/store\";\nimport * as fromCompany from \"../../../../../state/company/company.reducer\";\nimport * as companyActions from \"../../../../../state/company/company.actions\";\n\nconstructor(private store: Store<fromCompany.State>) {}\n\nngOnInit() {\n    // get all companies\n    this.store\n        .pipe(select(fromCompany.getCompanies))\n        .subscribe(companies =>\n            console.log(\"These are all companies: \", companies)\n        );\n\n    // get single company\n    this.store\n\t\t.select(fromCompany.getSingleCompany, { id: \"1234\" })\n        .subscribe(company => console.log(\"Single company: \", company));\n\n    // Update all companies\n    this.store.dispatch(new companyActions.UpdateCompanies(this.listOfCompanies));\n}

Effects

Effects are often used to load the data, for example from an API endpoint.

Firstly, let’s create new actions for load, and load success (I won’t cover when the load fails). Add these actions to company.action.ts.

// ...\nexport class Load implements Action {\n\treadonly type = CompanyActionTypes.Load;\n}\n\nexport class LoadSuccess implements Action {\n\treadonly type = CompanyActionTypes.LoadSuccess;\n\n\tconstructor(public payload: Company[]) {}\n}\n\nexport type CompanyActions =\n\t| UpdateCompanies\n\t| UpdateSingleCompany\n\t| Load\n\t| LoadSuccess

Let’s add this to the company.effects.ts.

import { Injectable } from \"@angular/core\";\nimport { Actions, Effect, ofType } from \"@ngrx/effects\";\n\nimport * as companyAction from \"./company.actions\";\nimport { CompanyService } from \"src/app/core/service/company.service\";\nimport { mergeMap, map } from \"rxjs/operators\";\nimport { from } from \"rxjs\";\n\n\n@Injectable()\nexport class CompanyEffects {\n\tconstructor(\n\t\tprivate actions$: Actions,\n\t\tprivate companyService: CompanyService\n\t) {}\n\n\t@Effect()\n\tloadCompanies$ = this.actions$.pipe(\n\t\tofType(companyAction.CompanyActionTypes.Load),\n\t\tmergeMap((action: companyAction.Load) =>\n\t\t\tthis.companyService.getCompanies()).pipe(\n\t\t\t\tmap((companies: Company[]) => {\n\t\t\t\t\treturn new companyAction.LoadSuccess(companies);\n\t\t\t\t})\n\t\t)\n\t);\n}

What this basically does is return the LoadSuccess action with all companies. In this case, getCompanies returns an observable with the companies.

Finally, let’s add load success to our reducer, which is basically the same as updating all companies.

// ...\nexport function reducer(state = initialState, action: CompanyActions) {\n\tswitch (action.type) {\n\t\t// ...\n\t\tcase CompanyActionTypes.LoadSuccess:\n\t\t\treturn { ...state, companies: action.payload };\n\n\t\tdefault:\n\t\t\treturn state;\n\t}\n}

We call the load service like this:

this.store.dispatch(new companyActions.Load());

"}},{"author":"Anton Ödman","title":"How To Setup NgRx in an Angular Application","date":"2020-03-25","description":"Setup state management with NgRx in your Angular application.","tags":["angular"],"draft":false,"cover":"/covers/png/ngrx-guide.png","aliases":["/ngrx-guide"],"slug":"ngrx-guide","isIndexFile":false,"category":"angular","component":{},"preview":{"html":"

NgRx uses the redux pattern within an Angular application. Setting it up can be quite difficult, so this is a guide following some of the best practices in setting up state management with NgRx.

State management with NgRx

NgRx uses the redux pattern within an Angular application. Setting it up can be quite difficult, so this is a guide following some of the best practices in setting up state management with NgRx.

Installation

First, we need to install the necessary dependencies. As we’ll go for a solid base, we will use the store, effects and store-devtools.

npm install @ngrx/effects @ngrx/store @ngrx/store-devtools --save

Configure app module

Let’s configure app.module.ts to add the NgRx to our application.

// import\nimport { StoreModule } from \"@ngrx/store\";\nimport { StoreDevtoolsModule } from \"@ngrx/store-devtools\";\nimport { environment } from \"src/environments/environment\";\nimport { EffectsModule } from \"@ngrx/effects\";\n\n//...\n@NgModule({\n    //...\n    imports: [\n        // ...\n        StoreModule.forRoot({}),\n\t\tEffectsModule.forRoot([]),\n\t\tStoreDevtoolsModule.instrument({\n\t\t\tmaxAge: 25,\n\t\t\tlogOnly: environment.production\n\t\t})\n    ]\n\n})

Configure sub-module

We will be declaring our reducer in a sub-module, to be able to use lazy loading. For this example, we will use it in a sub-module called dashboard.module.ts.

// imports\nimport { StoreModule } from \"@ngrx/store\";\nimport { reducer } from \"../../state/company/company.reducer\";\nimport { EffectsModule } from \"@ngrx/effects\";\nimport { CompanyEffects } from \"src/app/state/company/company.effects\";\n\n//...\n@NgModule({\n    //...\n    imports: [\n        // ...\n\t\tStoreModule.forFeature(\"companies\", reducer),\n\t\tEffectsModule.forFeature([CompanyEffects])\n    ]\n})

File location

Let’s create a state folder within the app folder. We will add all the necessary folders directly. In the end, it will look like this.

$\"folder$

NgRx uses actions, effects and reducers to manage state. I won’t go in to depth on what each one of them does for now - this will simply show how to set it up.

State

Let’s create a standard state within the app.state.ts file. As we currently do not have anything to include besides the companies, we can just leave it empty.

export interface State {}

Reducer

import * as fromRoot from \"../app.state\";\n\nexport interface State extends fromRoot.State {\n\tcompanies: CompanyState;\n}\n\nexport interface CompanyState {\n\tcompanies: Company[]; // company is for now, only a made up interface. It can be anything.\n}\n\nexport function reducer(state: CompanyState, action: any) {\n\tswitch (action.type) {\n\t\tdefault:\n\t\t\treturn state;\n\t}\n}

The store could now look something like this, if we would populate it:

store {\n    companies: {\n        [\n            company1: {},\n            company2: {},\n            //...\n        ]\n    }\n}

However, we created an empty initialState for now.

Actions

Let’s add the actions in the company.action.ts.

import { Action } from \"@ngrx/store\";\n\nexport enum CompanyActionTypes {\n\tUpdateCompanies = \"[Company] Update All Companies\",\n\tUpdateSingleCompany = \"[Company] Update Single Company\",\n}\n\nexport class UpdateCompanies implements Action {\n\treadonly type = CompanyActionTypes.UpdateCompanies;\n\n\tconstructor(public payload: Company[]) {}\n}\n\nexport class UpdateSingleCompany implements Action {\n\treadonly type = CompanyActionTypes.UpdateSingleCompany;\n\n\tconstructor(public payload: Company) {}\n}\n\nexport type CompanyActions =\n\t| UpdateCompanies\n\t| UpdateSingleCompany

We have defined two actions. One for updating the whole array of companies, and one for updating only one company. These will be used back in our reducer to be able to strongly type our actions.

Adding actions to the reducer

We will add our actions to the reducer we just created.

//...\nimport { CompanyActions, CompanyActionTypes } from \"./company.actions\";\n\nconst initialState: CompanyState = [\n\t{\n\t\tid: \"\",\n\t\tname: \"\",\n\t},\n];\n\n// ...\nexport function reducer(state = initialState, action: CompanyActions) {\n\tswitch (action.type) {\n\t\tcase CompanyActionTypes.UpdateCompanies:\n\t\t\treturn { ...state, companies: action.payload };\n\n\t\tcase CompanyActionTypes.UpdateSingleCompany:\n\t\t\tconst updatedCompany = action.payload;\n\n\t\t\tconst dataWithoutCompany = state.filter(\n\t\t\t\t(company) => company.id !== updatedCompany.id\n\t\t\t);\n\n\t\t\tconst dataWithNewCompany = [...dataWithoutCompany, updatedCompany];\n\t\t\treturn { ...state, companies: dataWithNewCompany };\n\n\t\tdefault:\n\t\t\treturn state;\n\t}\n}

Selectors

We use selectors to get the data from our state within our components. Let’s declare them in company.reducer.ts.

// ...\nimport { createFeatureSelector, createSelector } from \"@ngrx/store\";\n\n// ...\nconst getCompanyFeatureState =\n\tcreateFeatureSelector < CompanyState > \"companies\";\n\nexport const getCompanies = createSelector(\n\tgetCompanyFeatureState,\n\t(state) => state.companies\n);\n\nexport const getSingleCompany = createSelector(\n\tgetCompanyFeatureState,\n\t(state: CompanyState, props: { id: string }) => {\n\t\tconst stateAsArray = Object.values(state); // turn into an array\n\t\treturn stateAsArray.find((company) => company.companyId === props.id);\n\t}\n);\n\n// ...

We created two selectors, one to get all companies, and one to get a single company based on a provided ID.

Using selectors and actions in components

These are some examples how you use the selectors and actions to manage your state within your components.

// ...\nimport { Store, select } from \"@ngrx/store\";\nimport * as fromCompany from \"../../../../../state/company/company.reducer\";\nimport * as companyActions from \"../../../../../state/company/company.actions\";\n\nconstructor(private store: Store<fromCompany.State>) {}\n\nngOnInit() {\n    // get all companies\n    this.store\n        .pipe(select(fromCompany.getCompanies))\n        .subscribe(companies =>\n            console.log(\"These are all companies: \", companies)\n        );\n\n    // get single company\n    this.store\n\t\t.select(fromCompany.getSingleCompany, { id: \"1234\" })\n        .subscribe(company => console.log(\"Single company: \", company));\n\n    // Update all companies\n    this.store.dispatch(new companyActions.UpdateCompanies(this.listOfCompanies));\n}

Effects

Effects are often used to load the data, for example from an API endpoint.

Firstly, let’s create new actions for load, and load success (I won’t cover when the load fails). Add these actions to company.action.ts.

// ...\nexport class Load implements Action {\n\treadonly type = CompanyActionTypes.Load;\n}\n\nexport class LoadSuccess implements Action {\n\treadonly type = CompanyActionTypes.LoadSuccess;\n\n\tconstructor(public payload: Company[]) {}\n}\n\nexport type CompanyActions =\n\t| UpdateCompanies\n\t| UpdateSingleCompany\n\t| Load\n\t| LoadSuccess

Let’s add this to the company.effects.ts.

import { Injectable } from \"@angular/core\";\nimport { Actions, Effect, ofType } from \"@ngrx/effects\";\n\nimport * as companyAction from \"./company.actions\";\nimport { CompanyService } from \"src/app/core/service/company.service\";\nimport { mergeMap, map } from \"rxjs/operators\";\nimport { from } from \"rxjs\";\n\n\n@Injectable()\nexport class CompanyEffects {\n\tconstructor(\n\t\tprivate actions$: Actions,\n\t\tprivate companyService: CompanyService\n\t) {}\n\n\t@Effect()\n\tloadCompanies$ = this.actions$.pipe(\n\t\tofType(companyAction.CompanyActionTypes.Load),\n\t\tmergeMap((action: companyAction.Load) =>\n\t\t\tthis.companyService.getCompanies()).pipe(\n\t\t\t\tmap((companies: Company[]) => {\n\t\t\t\t\treturn new companyAction.LoadSuccess(companies);\n\t\t\t\t})\n\t\t)\n\t);\n}

What this basically does is return the LoadSuccess action with all companies. In this case, getCompanies returns an observable with the companies.

Finally, let’s add load success to our reducer, which is basically the same as updating all companies.

// ...\nexport function reducer(state = initialState, action: CompanyActions) {\n\tswitch (action.type) {\n\t\t// ...\n\t\tcase CompanyActionTypes.LoadSuccess:\n\t\t\treturn { ...state, companies: action.payload };\n\n\t\tdefault:\n\t\t\treturn state;\n\t}\n}

We call the load service like this:

this.store.dispatch(new companyActions.Load());

","next":{"author":"Anton Ödman","title":"Serving Different CSS Files in ASP.NET Core with Angular","date":"2020-03-26","description":"Serve different CSS files based on a header parameter on an Angular application with an ASP.NET Core backend.","tags":["aspnet"],"draft":false,"cover":"/covers/png/different-css-spa.png","aliases":["/different-css-spa"],"slug":"different-css-spa","isIndexFile":false,"category":"aspnet","component":{},"preview":{"html":"

Serving different CSS files

This approach can be used with many different scenarios - you could for example use query strings - but this example will use a custom styling header.

Creating the files

First, we need the different CSS files. I have created a folder called StaticFiles in the root of the ASP.NET Core project, and created a folder for each file that I want.

$\"folder$

All files that we want to change depending on the header, need to have the same name. For example, the CSS file will always be named index.css.

Creating the middleware

I will create a middleware called StatisFilesHelper.cs, and the whole file looks like this.

using Microsoft.AspNetCore.Builder;\nusing Microsoft.AspNetCore.Http;\nusing Microsoft.Extensions.FileProviders;\nusing System.IO;\n\nnamespace DifferentCSS.Helpers\n{\n    public static class StaticFilesHelper\n    {\n        public static void AddCompanySpecificFiles(this IApplicationBuilder app, params string[] companies)\n        {\n            foreach (string company in companies)\n            {\n                // Add static files based on styling header for a specific company\n                app.UseWhen(\n                    context => context.Request.Headers[\"styling\"] == company,\n                    appBuilder => appBuilder.UseStaticFiles(new StaticFileOptions()\n                    {\n                        FileProvider = new PhysicalFileProvider(\n                            Path.Combine(Directory.GetCurrentDirectory(), \"staticfiles\", company)),\n                        RequestPath = new PathString(\"/staticfiles\")\n                    }));\n            }\n\n            // add base fíles if no header is specified\n            app.UseWhen(\n                context => !context.Request.Headers.ContainsKey(\"styling\"),\n                appBuilder => appBuilder.UseStaticFiles(new StaticFileOptions()\n                {\n                    FileProvider = new PhysicalFileProvider(\n                        Path.Combine(Directory.GetCurrentDirectory(), \"staticfiles\", \"base\")),\n                    RequestPath = new PathString(\"/staticfiles\")\n                }));\n        }\n    }\n}

The AddCompanySpecificFiles method needs a list of strings as a parameter, in which each string represents a company (and each company should have its own CSS).

// ...\nforeach (string company in companies)\n{\n    // Add static files based on styling header for a specific company\n    app.UseWhen(\n        context => context.Request.Headers[\"styling\"] == company,\n        appBuilder => appBuilder.UseStaticFiles(new StaticFileOptions()\n        {\n            FileProvider = new PhysicalFileProvider(\n                Path.Combine(Directory.GetCurrentDirectory(), \"staticfiles\", company)),\n            RequestPath = new PathString(\"/staticfiles\")\n        }));\n}\n//...

If the styling header would be advanced, the url /staticfiles would point to StaticFiles/advanced.

// ...\n // add base fíles if no header is specified\napp.UseWhen(\n    context => !context.Request.Headers.ContainsKey(\"styling\"),\n    appBuilder => appBuilder.UseStaticFiles(new StaticFileOptions()\n    {\n        FileProvider = new PhysicalFileProvider(\n            Path.Combine(Directory.GetCurrentDirectory(), \"staticfiles\", \"base\")),\n        RequestPath = new PathString(\"/staticfiles\")\n    }));

If no header is specified, it will use the base folder and use that instead.

Adding to Startup

We need to add our middleware to the Startup.cs file. I put my middleware in a Helpers folder, so I have the include it with the using keyword to apply the middleware.

using DifferentCSS.Helpers;\n// ...\n\npublic void Configure(IApplicationBuilder app, IWebHostEnvironment env)\n{\n    // ...\n    app.AddCompanySpecificFiles(new string[] { \"basic\", \"advanced\" });\n\n}\n

I am passing in a list of strings, each string with the same name as the folders we declared earlier.

Adding to HTML

In the head, I simply add a link referencing the /staticfiles url.

<link rel=\"stylesheet\" href=\"/staticfiles/index.css\" type=\"text/css\" />

This will apply the CSS file based on the styling header that is passed on.

Be sure to clear your cache if you change header in the middle of a session, or else the CSS won’t change.

"},"previous":{"author":"Anton Ödman","title":"Execute Commands in a Docker Container","date":"2020-03-24","description":"Execute a command within your docker container.","tags":["docker"],"draft":false,"cover":"/covers/png/command-in-container.png","aliases":["/command-in-container"],"slug":"command-in-container","isIndexFile":false,"category":"docker","component":{},"preview":{"html":"

Executing a command within a Docker container can be done in two different ways. Either directly, or interactively.

","text":"Executing a command within a Docker container can be done in two different ways. Either directly, or interactively."},"readingTime":"1 min read","body":"

Executing a command

Executing a command within a Docker container can be done in two different ways. Either directly, or interactively.

If you want to do it directly, you use the following syntax. I will explain it with the ls command as an example.

docker exec <container> ls

If you want to do it interactively, you need to use the -it tag and specify which shell, in this case bash.

docker exec -it <container> bash

This will allow you to “enter” the container and use it as if you were SSH:ing into it.

"}},{"author":"Anton Ödman","title":"Execute Commands in a Docker Container","date":"2020-03-24","description":"Execute a command within your docker container.","tags":["docker"],"draft":false,"cover":"/covers/png/command-in-container.png","aliases":["/command-in-container"],"slug":"command-in-container","isIndexFile":false,"category":"docker","component":{},"preview":{"html":"

Executing a command within a Docker container can be done in two different ways. Either directly, or interactively.

","text":"Executing a command within a Docker container can be done in two different ways. Either directly, or interactively."},"readingTime":"1 min read","body":"

Executing a command

Executing a command within a Docker container can be done in two different ways. Either directly, or interactively.

If you want to do it directly, you use the following syntax. I will explain it with the ls command as an example.

docker exec <container> ls

If you want to do it interactively, you need to use the -it tag and specify which shell, in this case bash.

docker exec -it <container> bash

This will allow you to “enter” the container and use it as if you were SSH:ing into it.

","next":{"author":"Anton Ödman","title":"How To Setup NgRx in an Angular Application","date":"2020-03-25","description":"Setup state management with NgRx in your Angular application.","tags":["angular"],"draft":false,"cover":"/covers/png/ngrx-guide.png","aliases":["/ngrx-guide"],"slug":"ngrx-guide","isIndexFile":false,"category":"angular","component":{},"preview":{"html":"

NgRx uses the redux pattern within an Angular application. Setting it up can be quite difficult, so this is a guide following some of the best practices in setting up state management with NgRx.

State management with NgRx

NgRx uses the redux pattern within an Angular application. Setting it up can be quite difficult, so this is a guide following some of the best practices in setting up state management with NgRx.

Installation

First, we need to install the necessary dependencies. As we’ll go for a solid base, we will use the store, effects and store-devtools.

npm install @ngrx/effects @ngrx/store @ngrx/store-devtools --save

Configure app module

Let’s configure app.module.ts to add the NgRx to our application.

// import\nimport { StoreModule } from \"@ngrx/store\";\nimport { StoreDevtoolsModule } from \"@ngrx/store-devtools\";\nimport { environment } from \"src/environments/environment\";\nimport { EffectsModule } from \"@ngrx/effects\";\n\n//...\n@NgModule({\n    //...\n    imports: [\n        // ...\n        StoreModule.forRoot({}),\n\t\tEffectsModule.forRoot([]),\n\t\tStoreDevtoolsModule.instrument({\n\t\t\tmaxAge: 25,\n\t\t\tlogOnly: environment.production\n\t\t})\n    ]\n\n})

Configure sub-module

We will be declaring our reducer in a sub-module, to be able to use lazy loading. For this example, we will use it in a sub-module called dashboard.module.ts.

// imports\nimport { StoreModule } from \"@ngrx/store\";\nimport { reducer } from \"../../state/company/company.reducer\";\nimport { EffectsModule } from \"@ngrx/effects\";\nimport { CompanyEffects } from \"src/app/state/company/company.effects\";\n\n//...\n@NgModule({\n    //...\n    imports: [\n        // ...\n\t\tStoreModule.forFeature(\"companies\", reducer),\n\t\tEffectsModule.forFeature([CompanyEffects])\n    ]\n})

File location

Let’s create a state folder within the app folder. We will add all the necessary folders directly. In the end, it will look like this.

$\"folder$

NgRx uses actions, effects and reducers to manage state. I won’t go in to depth on what each one of them does for now - this will simply show how to set it up.

State

Let’s create a standard state within the app.state.ts file. As we currently do not have anything to include besides the companies, we can just leave it empty.

export interface State {}

Reducer

import * as fromRoot from \"../app.state\";\n\nexport interface State extends fromRoot.State {\n\tcompanies: CompanyState;\n}\n\nexport interface CompanyState {\n\tcompanies: Company[]; // company is for now, only a made up interface. It can be anything.\n}\n\nexport function reducer(state: CompanyState, action: any) {\n\tswitch (action.type) {\n\t\tdefault:\n\t\t\treturn state;\n\t}\n}

The store could now look something like this, if we would populate it:

store {\n    companies: {\n        [\n            company1: {},\n            company2: {},\n            //...\n        ]\n    }\n}

However, we created an empty initialState for now.

Actions

Let’s add the actions in the company.action.ts.

import { Action } from \"@ngrx/store\";\n\nexport enum CompanyActionTypes {\n\tUpdateCompanies = \"[Company] Update All Companies\",\n\tUpdateSingleCompany = \"[Company] Update Single Company\",\n}\n\nexport class UpdateCompanies implements Action {\n\treadonly type = CompanyActionTypes.UpdateCompanies;\n\n\tconstructor(public payload: Company[]) {}\n}\n\nexport class UpdateSingleCompany implements Action {\n\treadonly type = CompanyActionTypes.UpdateSingleCompany;\n\n\tconstructor(public payload: Company) {}\n}\n\nexport type CompanyActions =\n\t| UpdateCompanies\n\t| UpdateSingleCompany

We have defined two actions. One for updating the whole array of companies, and one for updating only one company. These will be used back in our reducer to be able to strongly type our actions.

Adding actions to the reducer

We will add our actions to the reducer we just created.

//...\nimport { CompanyActions, CompanyActionTypes } from \"./company.actions\";\n\nconst initialState: CompanyState = [\n\t{\n\t\tid: \"\",\n\t\tname: \"\",\n\t},\n];\n\n// ...\nexport function reducer(state = initialState, action: CompanyActions) {\n\tswitch (action.type) {\n\t\tcase CompanyActionTypes.UpdateCompanies:\n\t\t\treturn { ...state, companies: action.payload };\n\n\t\tcase CompanyActionTypes.UpdateSingleCompany:\n\t\t\tconst updatedCompany = action.payload;\n\n\t\t\tconst dataWithoutCompany = state.filter(\n\t\t\t\t(company) => company.id !== updatedCompany.id\n\t\t\t);\n\n\t\t\tconst dataWithNewCompany = [...dataWithoutCompany, updatedCompany];\n\t\t\treturn { ...state, companies: dataWithNewCompany };\n\n\t\tdefault:\n\t\t\treturn state;\n\t}\n}

Selectors

We use selectors to get the data from our state within our components. Let’s declare them in company.reducer.ts.

// ...\nimport { createFeatureSelector, createSelector } from \"@ngrx/store\";\n\n// ...\nconst getCompanyFeatureState =\n\tcreateFeatureSelector < CompanyState > \"companies\";\n\nexport const getCompanies = createSelector(\n\tgetCompanyFeatureState,\n\t(state) => state.companies\n);\n\nexport const getSingleCompany = createSelector(\n\tgetCompanyFeatureState,\n\t(state: CompanyState, props: { id: string }) => {\n\t\tconst stateAsArray = Object.values(state); // turn into an array\n\t\treturn stateAsArray.find((company) => company.companyId === props.id);\n\t}\n);\n\n// ...

We created two selectors, one to get all companies, and one to get a single company based on a provided ID.

Using selectors and actions in components

These are some examples how you use the selectors and actions to manage your state within your components.

// ...\nimport { Store, select } from \"@ngrx/store\";\nimport * as fromCompany from \"../../../../../state/company/company.reducer\";\nimport * as companyActions from \"../../../../../state/company/company.actions\";\n\nconstructor(private store: Store<fromCompany.State>) {}\n\nngOnInit() {\n    // get all companies\n    this.store\n        .pipe(select(fromCompany.getCompanies))\n        .subscribe(companies =>\n            console.log(\"These are all companies: \", companies)\n        );\n\n    // get single company\n    this.store\n\t\t.select(fromCompany.getSingleCompany, { id: \"1234\" })\n        .subscribe(company => console.log(\"Single company: \", company));\n\n    // Update all companies\n    this.store.dispatch(new companyActions.UpdateCompanies(this.listOfCompanies));\n}

Effects

Effects are often used to load the data, for example from an API endpoint.

Firstly, let’s create new actions for load, and load success (I won’t cover when the load fails). Add these actions to company.action.ts.

// ...\nexport class Load implements Action {\n\treadonly type = CompanyActionTypes.Load;\n}\n\nexport class LoadSuccess implements Action {\n\treadonly type = CompanyActionTypes.LoadSuccess;\n\n\tconstructor(public payload: Company[]) {}\n}\n\nexport type CompanyActions =\n\t| UpdateCompanies\n\t| UpdateSingleCompany\n\t| Load\n\t| LoadSuccess

Let’s add this to the company.effects.ts.

import { Injectable } from \"@angular/core\";\nimport { Actions, Effect, ofType } from \"@ngrx/effects\";\n\nimport * as companyAction from \"./company.actions\";\nimport { CompanyService } from \"src/app/core/service/company.service\";\nimport { mergeMap, map } from \"rxjs/operators\";\nimport { from } from \"rxjs\";\n\n\n@Injectable()\nexport class CompanyEffects {\n\tconstructor(\n\t\tprivate actions$: Actions,\n\t\tprivate companyService: CompanyService\n\t) {}\n\n\t@Effect()\n\tloadCompanies$ = this.actions$.pipe(\n\t\tofType(companyAction.CompanyActionTypes.Load),\n\t\tmergeMap((action: companyAction.Load) =>\n\t\t\tthis.companyService.getCompanies()).pipe(\n\t\t\t\tmap((companies: Company[]) => {\n\t\t\t\t\treturn new companyAction.LoadSuccess(companies);\n\t\t\t\t})\n\t\t)\n\t);\n}

What this basically does is return the LoadSuccess action with all companies. In this case, getCompanies returns an observable with the companies.

Finally, let’s add load success to our reducer, which is basically the same as updating all companies.

// ...\nexport function reducer(state = initialState, action: CompanyActions) {\n\tswitch (action.type) {\n\t\t// ...\n\t\tcase CompanyActionTypes.LoadSuccess:\n\t\t\treturn { ...state, companies: action.payload };\n\n\t\tdefault:\n\t\t\treturn state;\n\t}\n}

We call the load service like this:

this.store.dispatch(new companyActions.Load());

"},"previous":{"author":"Anton Ödman","title":"How To Create a Multi-Step Form in Angular","date":"2020-03-23","description":"Create a form in Angular with multiple steps and validation for each step.","tags":["angular"],"draft":false,"cover":"/covers/png/multi-step-form.png","aliases":["/multi-step-form"],"slug":"multi-step-form","isIndexFile":false,"category":"angular","component":{},"preview":{"html":"

Creating a multi-step form in Angular involves setting a few things up. We will be using the ReactiveForms module.

","text":"Creating a multi-step form in Angular involves setting a few things up. We will be using the ReactiveForms module."},"readingTime":"6 min read","body":"

Multi-Step form

Creating a multi-step form in Angular involves setting a few things up. We will be using the ReactiveForms module.

Setting up the data

Firstly, let set up the data. I have created an object for each step in the form.

const USER_STEP = {\n\temail: [\"\", [Validators.required, Validators.email]],\n\t// ...\n};\n\nconst PERSONAL_STEP = {\n\tname: [\"\", [Validators.required]],\n\t// ...\n};

We will use the separation later, but now, lets import it to the formBuilder.

this.multiForm = this.formBuilder.group({\n\t...this.USER_STEP,\n\t...this.PERSONAL_STEP,\n});

I also like to create a getter for that particular form, making it easier and cleaner to get the values.

get f() {\n    return this.multiForm.controls;\n}

We also need some way to keep track of the current step, so let’s just add a property for that.

currentStep = 1;

Setting up the HTML

I will not dive deep into the form structure, only the overall structure that allows for the multi step process.

<div>\n\t<form [formGroup]=\"multiForm\">\n\t\t<div *ngIf=\"currentStep === 1\">\n\t\t\t<!-- FIRST STEP CONTENT -->\n\t\t\t<button (click)=\"next($event)\">Next</button>\n\t\t</div>\n\n\t\t<div *ngIf=\"currentStep === 2\">\n\t\t\t<!-- SECOND STEP CONTENT -->\n\t\t\t<button (click)=\"next($event)\">Next</button>\n\t\t</div>\n\t</form>\n</div>

Validation

We need to add validation to each step. It should not be possible to progress without all fields being valid.

First of all, we need the keys of each input data. Like email, and name, to see if they are valid.

We need to save them down to a property in the constructor.

this.userKeys = Object.keys(this.USER_STEP).filter((key) => key !== undefined);\n\nthis.personalKeys = Object.keys(this.PERSONAL_STEP).filter(\n\t(key) => key !== undefined\n);

This will filter out all the keys if they are not undefined.

We also need to create a validator function for each step, that checks if all forms within that specific step is valid.

allUserFieldsValid(): boolean {\n    return this.userKeys.every(key => this.f[key].valid === true);\n}\n\nallPersonalFieldsValid(): boolean {\n    return this.personalKeys.every(key => this.f[key].valid === true);\n}

We are using the f getter to look that specific key up, and if it all keys in that step are valid, this function will return true.

Next button

The final logic goes into the next button.

next(e: Event) {\n    e.preventDefault();\n\n    // check if first step is valid\n    if (this.currentStep === 1 && this.allUserFieldsValid()) {\n        this.currentStep += 1;\n    }\n\n    // check if second step is valid\n    if (this.currentStep === 2 && this.allPersonalFieldsValid()) {\n        this.currentStep += 1;\n    }\n}

"}},{"author":"Anton Ödman","title":"How To Create a Multi-Step Form in Angular","date":"2020-03-23","description":"Create a form in Angular with multiple steps and validation for each step.","tags":["angular"],"draft":false,"cover":"/covers/png/multi-step-form.png","aliases":["/multi-step-form"],"slug":"multi-step-form","isIndexFile":false,"category":"angular","component":{},"preview":{"html":"

Creating a multi-step form in Angular involves setting a few things up. We will be using the ReactiveForms module.

","text":"Creating a multi-step form in Angular involves setting a few things up. We will be using the ReactiveForms module."},"readingTime":"6 min read","body":"

Multi-Step form

Creating a multi-step form in Angular involves setting a few things up. We will be using the ReactiveForms module.

Setting up the data

Firstly, let set up the data. I have created an object for each step in the form.

const USER_STEP = {\n\temail: [\"\", [Validators.required, Validators.email]],\n\t// ...\n};\n\nconst PERSONAL_STEP = {\n\tname: [\"\", [Validators.required]],\n\t// ...\n};

We will use the separation later, but now, lets import it to the formBuilder.

this.multiForm = this.formBuilder.group({\n\t...this.USER_STEP,\n\t...this.PERSONAL_STEP,\n});

I also like to create a getter for that particular form, making it easier and cleaner to get the values.

get f() {\n    return this.multiForm.controls;\n}

We also need some way to keep track of the current step, so let’s just add a property for that.

currentStep = 1;

Setting up the HTML

I will not dive deep into the form structure, only the overall structure that allows for the multi step process.

<div>\n\t<form [formGroup]=\"multiForm\">\n\t\t<div *ngIf=\"currentStep === 1\">\n\t\t\t<!-- FIRST STEP CONTENT -->\n\t\t\t<button (click)=\"next($event)\">Next</button>\n\t\t</div>\n\n\t\t<div *ngIf=\"currentStep === 2\">\n\t\t\t<!-- SECOND STEP CONTENT -->\n\t\t\t<button (click)=\"next($event)\">Next</button>\n\t\t</div>\n\t</form>\n</div>

Validation

We need to add validation to each step. It should not be possible to progress without all fields being valid.

First of all, we need the keys of each input data. Like email, and name, to see if they are valid.

We need to save them down to a property in the constructor.

this.userKeys = Object.keys(this.USER_STEP).filter((key) => key !== undefined);\n\nthis.personalKeys = Object.keys(this.PERSONAL_STEP).filter(\n\t(key) => key !== undefined\n);

This will filter out all the keys if they are not undefined.

We also need to create a validator function for each step, that checks if all forms within that specific step is valid.

allUserFieldsValid(): boolean {\n    return this.userKeys.every(key => this.f[key].valid === true);\n}\n\nallPersonalFieldsValid(): boolean {\n    return this.personalKeys.every(key => this.f[key].valid === true);\n}

We are using the f getter to look that specific key up, and if it all keys in that step are valid, this function will return true.

Next button

The final logic goes into the next button.

next(e: Event) {\n    e.preventDefault();\n\n    // check if first step is valid\n    if (this.currentStep === 1 && this.allUserFieldsValid()) {\n        this.currentStep += 1;\n    }\n\n    // check if second step is valid\n    if (this.currentStep === 2 && this.allPersonalFieldsValid()) {\n        this.currentStep += 1;\n    }\n}

","next":{"author":"Anton Ödman","title":"Execute Commands in a Docker Container","date":"2020-03-24","description":"Execute a command within your docker container.","tags":["docker"],"draft":false,"cover":"/covers/png/command-in-container.png","aliases":["/command-in-container"],"slug":"command-in-container","isIndexFile":false,"category":"docker","component":{},"preview":{"html":"

Executing a command within a Docker container can be done in two different ways. Either directly, or interactively.

","text":"Executing a command within a Docker container can be done in two different ways. Either directly, or interactively."},"readingTime":"1 min read","body":"

Executing a command

Executing a command within a Docker container can be done in two different ways. Either directly, or interactively.

If you want to do it directly, you use the following syntax. I will explain it with the ls command as an example.

docker exec <container> ls

If you want to do it interactively, you need to use the -it tag and specify which shell, in this case bash.

docker exec -it <container> bash

This will allow you to “enter” the container and use it as if you were SSH:ing into it.

"},"previous":{"author":"Anton Ödman","title":"Using a Sidebar And a Topbar In The Same Web App Using CSS","date":"2020-03-20","description":"Create an application that uses both a top bar and a sidebar for navigation using CSS and Bootstrap.","tags":["css"],"draft":false,"cover":"/covers/png/sidebar-and-topbar.png","aliases":["/sidebar-and-topbar"],"slug":"sidebar-and-topbar","isIndexFile":false,"category":"css","component":{},"preview":{"html":"

Navigation often occurs via a topbar and/or a sidebar. This is a simple example on how you can implement this using CSS. I will be using bootstrap as well as they make it relatively simple to create a top bar without adding too much CSS.

","text":"Navigation often occurs via a topbar and/or a sidebar. This is a simple example on how you can implement this using CSS. I will be using bootstrap as well as they make it relatively simple to create a top bar without adding too much CSS."},"readingTime":"3 min read","body":"\n

HTML layout

First, the HTML layout. It’s quite simple, we need to divide it into 3 parts: the topbar, the sidebar and the main content area.

<div>\n\t<nav class=\"navbar navbar-expand-lg navbar-light bg-light\">\n\t\t<!-- TOPBAR CONTENT  -->\n\t</nav>\n\n\t<div class=\"page-container\">\n\t\t<nav class=\"sidenav\"></nav>\n\t\t<div id=\"main\"></div>\n\t</div>\n</div>

This is just the main content to get this layout working.

CSS body layout

CSS is the most important part to make this work.

First, we need to prepare the body layout.

html,\nbody {\n\theight: 100vh;\n}

This will allow the body of our have a height of 100%, which is important for the sidebar.

\n\n

Next up is the CSS for the sidebar, which should look something like this.

.sidenav {\n\tposition: fixed;\n\tpadding-top: var(--navbar-height);\n\twidth: var(--sidebar-width);\n\tleft: 0;\n\theight: 100vh;\n}

The padding will drop down the amount of space necessary height so I won’t be behind the topbar.

As I will reuse some of these lengths, I have declared them in at the :root.

:root {\n\t--navbar-height: 56px;\n\t--sidebar-width: 12rem;\n}

The navbar height, in this case, is the Bootstrap standard. The sidebar width I choose myself.

CSS main

The CSS for the main element should look something like this.

#main {\n\tpadding-top: var(--navbar-height);\n\theight: 100vh;\n}

Once again, we need to add padding to the top to allow the width of the navbar.

"}},{"author":"Anton Ödman","title":"Using a Sidebar And a Topbar In The Same Web App Using CSS","date":"2020-03-20","description":"Create an application that uses both a top bar and a sidebar for navigation using CSS and Bootstrap.","tags":["css"],"draft":false,"cover":"/covers/png/sidebar-and-topbar.png","aliases":["/sidebar-and-topbar"],"slug":"sidebar-and-topbar","isIndexFile":false,"category":"css","component":{},"preview":{"html":"

HTML layout

First, the HTML layout. It’s quite simple, we need to divide it into 3 parts: the topbar, the sidebar and the main content area.

<div>\n\t<nav class=\"navbar navbar-expand-lg navbar-light bg-light\">\n\t\t<!-- TOPBAR CONTENT  -->\n\t</nav>\n\n\t<div class=\"page-container\">\n\t\t<nav class=\"sidenav\"></nav>\n\t\t<div id=\"main\"></div>\n\t</div>\n</div>

This is just the main content to get this layout working.

CSS body layout

CSS is the most important part to make this work.

First, we need to prepare the body layout.

html,\nbody {\n\theight: 100vh;\n}

This will allow the body of our have a height of 100%, which is important for the sidebar.

\n\n

Next up is the CSS for the sidebar, which should look something like this.

.sidenav {\n\tposition: fixed;\n\tpadding-top: var(--navbar-height);\n\twidth: var(--sidebar-width);\n\tleft: 0;\n\theight: 100vh;\n}

The padding will drop down the amount of space necessary height so I won’t be behind the topbar.

As I will reuse some of these lengths, I have declared them in at the :root.

:root {\n\t--navbar-height: 56px;\n\t--sidebar-width: 12rem;\n}

The navbar height, in this case, is the Bootstrap standard. The sidebar width I choose myself.

CSS main

The CSS for the main element should look something like this.

#main {\n\tpadding-top: var(--navbar-height);\n\theight: 100vh;\n}

Once again, we need to add padding to the top to allow the width of the navbar.

","next":{"author":"Anton Ödman","title":"How To Create a Multi-Step Form in Angular","date":"2020-03-23","description":"Create a form in Angular with multiple steps and validation for each step.","tags":["angular"],"draft":false,"cover":"/covers/png/multi-step-form.png","aliases":["/multi-step-form"],"slug":"multi-step-form","isIndexFile":false,"category":"angular","component":{},"preview":{"html":"

Creating a multi-step form in Angular involves setting a few things up. We will be using the ReactiveForms module.

","text":"Creating a multi-step form in Angular involves setting a few things up. We will be using the ReactiveForms module."},"readingTime":"6 min read","body":"

Multi-Step form

Creating a multi-step form in Angular involves setting a few things up. We will be using the ReactiveForms module.

Setting up the data

Firstly, let set up the data. I have created an object for each step in the form.

const USER_STEP = {\n\temail: [\"\", [Validators.required, Validators.email]],\n\t// ...\n};\n\nconst PERSONAL_STEP = {\n\tname: [\"\", [Validators.required]],\n\t// ...\n};

We will use the separation later, but now, lets import it to the formBuilder.

this.multiForm = this.formBuilder.group({\n\t...this.USER_STEP,\n\t...this.PERSONAL_STEP,\n});

I also like to create a getter for that particular form, making it easier and cleaner to get the values.

get f() {\n    return this.multiForm.controls;\n}

We also need some way to keep track of the current step, so let’s just add a property for that.

currentStep = 1;

Setting up the HTML

I will not dive deep into the form structure, only the overall structure that allows for the multi step process.

<div>\n\t<form [formGroup]=\"multiForm\">\n\t\t<div *ngIf=\"currentStep === 1\">\n\t\t\t<!-- FIRST STEP CONTENT -->\n\t\t\t<button (click)=\"next($event)\">Next</button>\n\t\t</div>\n\n\t\t<div *ngIf=\"currentStep === 2\">\n\t\t\t<!-- SECOND STEP CONTENT -->\n\t\t\t<button (click)=\"next($event)\">Next</button>\n\t\t</div>\n\t</form>\n</div>

Validation

We need to add validation to each step. It should not be possible to progress without all fields being valid.

First of all, we need the keys of each input data. Like email, and name, to see if they are valid.

We need to save them down to a property in the constructor.

this.userKeys = Object.keys(this.USER_STEP).filter((key) => key !== undefined);\n\nthis.personalKeys = Object.keys(this.PERSONAL_STEP).filter(\n\t(key) => key !== undefined\n);

This will filter out all the keys if they are not undefined.

We also need to create a validator function for each step, that checks if all forms within that specific step is valid.

allUserFieldsValid(): boolean {\n    return this.userKeys.every(key => this.f[key].valid === true);\n}\n\nallPersonalFieldsValid(): boolean {\n    return this.personalKeys.every(key => this.f[key].valid === true);\n}

We are using the f getter to look that specific key up, and if it all keys in that step are valid, this function will return true.

Next button

The final logic goes into the next button.

next(e: Event) {\n    e.preventDefault();\n\n    // check if first step is valid\n    if (this.currentStep === 1 && this.allUserFieldsValid()) {\n        this.currentStep += 1;\n    }\n\n    // check if second step is valid\n    if (this.currentStep === 2 && this.allPersonalFieldsValid()) {\n        this.currentStep += 1;\n    }\n}

"},"previous":{"author":"Anton Ödman","title":"Hosting a MySQL/MariaDB Server On a VPS With Remote Access","date":"2020-03-19","description":"Setup a MySQL/MariaDB server easily on Ubuntu VPS with remote access to use in your projects.","tags":["hosting"],"draft":false,"cover":"/covers/png/sql-on-ubuntu.png","aliases":["/sql-on-ubuntu"],"slug":"sql-on-ubuntu","isIndexFile":false,"category":"hosting","component":{},"preview":{"html":"

Most projects you create often need a database. If you prefer working with MySQL (or MariaDB), this is a guide on how to set it up on a ubuntu VPS and allow remote access.

","text":"Most projects you create often need a database. If you prefer working with MySQL (or MariaDB), this is a guide on how to set it up on a ubuntu VPS and allow remote access."},"readingTime":"2 min read","body":"

Database for your project

Most projects you create often need a database. If you prefer working with MySQL (or MariaDB), this is a guide on how to set it up on a ubuntu VPS and allow remote access.

I have been using Hetzner Cloud when hosting my VPS, and it has been working great. But any VPS will do.

So set up your VPS with Ubuntu and log in to it.

1. Update

Always make sure it is up to date with

sudo apt update

2. Install MySQL or MariaDB

Install the necessary server depending on which language.

# MySQL\nsudo apt install mysql-server mysql-client\n\n# MariaDB\nsudo apt install mariadb-server mariadb-client

3. Remote bind-address

To enable remote connections, we need to remove the bind-address. Edit this file and remove/comment out bind-address

# MySQL\nsudo nano /etc/mysql/mysql.conf.d/mysqld.cnf\n\n# MariaDB\nsudo nano /etc/mysql/mariadb.conf.d/50-server.cnf

4. Restart

Restart the service with the following command.

# MySQL\nsudo systemctl restart mysql\n\n# MariaDB\nsudo systemctl restart mariadb

\n\n

# Without password\nsudo mysql -u root\n\n# With password\nsudo mysql -u root -p

6. Create a user

Create a user that will be used to access the server remotely.

CREATE USER 'your_username'@'%' IDENTIFIED BY 'your_password';

7. Grant privileges

You need to grant your user all privileges.

GRANT ALL PRIVILEGES ON *.* TO 'your_username'@'%';

To apply the changes, we need to do a flush.

FLUSH PRIVILEGES;

8. Quit and find IP

Use the quit command to exit MySQL/MariaDB. Type in ip a to get your IP that you will use to access your server.

"}},{"author":"Anton Ödman","title":"Hosting a MySQL/MariaDB Server On a VPS With Remote Access","date":"2020-03-19","description":"Setup a MySQL/MariaDB server easily on Ubuntu VPS with remote access to use in your projects.","tags":["hosting"],"draft":false,"cover":"/covers/png/sql-on-ubuntu.png","aliases":["/sql-on-ubuntu"],"slug":"sql-on-ubuntu","isIndexFile":false,"category":"hosting","component":{},"preview":{"html":"

Most projects you create often need a database. If you prefer working with MySQL (or MariaDB), this is a guide on how to set it up on a ubuntu VPS and allow remote access.

Database for your project

Most projects you create often need a database. If you prefer working with MySQL (or MariaDB), this is a guide on how to set it up on a ubuntu VPS and allow remote access.

I have been using Hetzner Cloud when hosting my VPS, and it has been working great. But any VPS will do.

So set up your VPS with Ubuntu and log in to it.

1. Update

Always make sure it is up to date with

sudo apt update

2. Install MySQL or MariaDB

Install the necessary server depending on which language.

# MySQL\nsudo apt install mysql-server mysql-client\n\n# MariaDB\nsudo apt install mariadb-server mariadb-client

3. Remote bind-address

To enable remote connections, we need to remove the bind-address. Edit this file and remove/comment out bind-address

# MySQL\nsudo nano /etc/mysql/mysql.conf.d/mysqld.cnf\n\n# MariaDB\nsudo nano /etc/mysql/mariadb.conf.d/50-server.cnf

4. Restart

Restart the service with the following command.

# MySQL\nsudo systemctl restart mysql\n\n# MariaDB\nsudo systemctl restart mariadb

\n\n

# Without password\nsudo mysql -u root\n\n# With password\nsudo mysql -u root -p

6. Create a user

Create a user that will be used to access the server remotely.

CREATE USER 'your_username'@'%' IDENTIFIED BY 'your_password';

7. Grant privileges

You need to grant your user all privileges.

GRANT ALL PRIVILEGES ON *.* TO 'your_username'@'%';

To apply the changes, we need to do a flush.

FLUSH PRIVILEGES;

8. Quit and find IP

Use the quit command to exit MySQL/MariaDB. Type in ip a to get your IP that you will use to access your server.

","next":{"author":"Anton Ödman","title":"Using a Sidebar And a Topbar In The Same Web App Using CSS","date":"2020-03-20","description":"Create an application that uses both a top bar and a sidebar for navigation using CSS and Bootstrap.","tags":["css"],"draft":false,"cover":"/covers/png/sidebar-and-topbar.png","aliases":["/sidebar-and-topbar"],"slug":"sidebar-and-topbar","isIndexFile":false,"category":"css","component":{},"preview":{"html":"

HTML layout

First, the HTML layout. It’s quite simple, we need to divide it into 3 parts: the topbar, the sidebar and the main content area.

<div>\n\t<nav class=\"navbar navbar-expand-lg navbar-light bg-light\">\n\t\t<!-- TOPBAR CONTENT  -->\n\t</nav>\n\n\t<div class=\"page-container\">\n\t\t<nav class=\"sidenav\"></nav>\n\t\t<div id=\"main\"></div>\n\t</div>\n</div>

This is just the main content to get this layout working.

CSS body layout

CSS is the most important part to make this work.

First, we need to prepare the body layout.

html,\nbody {\n\theight: 100vh;\n}

This will allow the body of our have a height of 100%, which is important for the sidebar.

\n\n

Next up is the CSS for the sidebar, which should look something like this.

.sidenav {\n\tposition: fixed;\n\tpadding-top: var(--navbar-height);\n\twidth: var(--sidebar-width);\n\tleft: 0;\n\theight: 100vh;\n}

The padding will drop down the amount of space necessary height so I won’t be behind the topbar.

As I will reuse some of these lengths, I have declared them in at the :root.

:root {\n\t--navbar-height: 56px;\n\t--sidebar-width: 12rem;\n}

The navbar height, in this case, is the Bootstrap standard. The sidebar width I choose myself.

CSS main

The CSS for the main element should look something like this.

#main {\n\tpadding-top: var(--navbar-height);\n\theight: 100vh;\n}

Once again, we need to add padding to the top to allow the width of the navbar.

"},"previous":{"author":"Anton Ödman","title":"Reactive Forms in Angular","date":"2020-03-18","description":"How to build forms and manage validation easy in Angular","tags":["angular"],"draft":false,"cover":"/covers/png/reactive-forms.png","aliases":["/reactive-forms"],"slug":"reactive-forms","isIndexFile":false,"category":"angular","component":{},"preview":{"html":"

Reactive forms are great, but they may be a bit more complex to set up. However, once everything is done, it’s very easy to work. It also makes validation much simpler, as it allows for custom validation as well as changing validation dynamically.

","text":"Reactive forms are great, but they may be a bit more complex to set up. However, once everything is done, it’s very easy to work. It also makes validation much simpler, as it allows for custom validation as well as changing validation dynamically."},"readingTime":"5 min read","body":"

Reactive forms

Import ReactiveFormsModule

To get started, you need to import the ReactiveFormsModule to your AppModule.

import { BrowserModule } from \"@angular/platform-browser\";\nimport { NgModule } from \"@angular/core\";\nimport { ReactiveFormsModule } from \"@angular/forms\"; // import it\nimport { HttpModule } from \"@angular/http\";\n\nimport { AppComponent } from \"./app.component\";\n\n@NgModule({\n\t// ...\n\timports: [\n\t\tBrowserModule,\n\t\tReactiveFormsModule, // add it to imports\n\t\tHttpModule,\n\t],\n\t// ...\n})\nexport class AppModule {}

Creating the form data with `FormBuilder`

We need to declare each form input we want with the FormBuilder. At the declaring stage, we can add both the initial value of the input, as well as which validators we want.

import { Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormGroup, Validators } from '@angular/forms';\n\n@Component({\n  // ...\n})\nexport class AppComponent implements OnInit {\n  myForm: FormGroup;\n\n  constructor(private formBuilder: FormBuilder) {}\n\n  ngOnInit() {\n  this.myForm = this.formBuilder.group({\n    name: ['ValueAtStart', Validators.required],\n    email: ['', [Validators.required, Validators.email]],\n    message: ['', [Validators.required, Validators.minLength(15)]]\n  });\n  }\n}

We create a FormGroup in the MyForm. Using FormBuilder, we add three input parameters.

The name input has a modified value (ValueAtStart), which will be present at the start within the form.

The validators are also declared, you can read more about them here.

Adding to the HTML

We need to connect the form to HTML. This is done using [formGroup].

<form [formGroup]=\"myForm\" (ngSubmit)=\"onSubmit()\">\n\t<input formControlName=\"name\" placeholder=\"Your name\" />\n\t<input formControlName=\"email\" placeholder=\"Your email\" />\n\t<input formControlName=\"message\" placeholder=\"Your message\" />\n\n\t<button type=\"submit\">Send</button>\n</form>

Each input element is connected to the formBuilder we created earlier. To make the next part, error messages, easier, I’ll add a getter.

//...\nget f() {\n    return this.myForm.controls;\n}

This way, we can access the form writing f[formElement] (or f.formsElement) instead of this.myForm.controls[formElement] all the time, which makes it easier to read.

Adding validation

Adding visualized error feedback to the user is easy using our new f getter.

<!-- ...  -->\n\n<input formControlName=\"name\" placeholder=\"Your name\" />\n\n<div *ngIf=\"f.name.errors\" class=\"invalid-feedback\">\n\t<div *ngIf=\"f.name.errors.required\">Username is required</div>\n</div>\n\n<!-- ...  -->

"}},{"author":"Anton Ödman","title":"Reactive Forms in Angular","date":"2020-03-18","description":"How to build forms and manage validation easy in Angular","tags":["angular"],"draft":false,"cover":"/covers/png/reactive-forms.png","aliases":["/reactive-forms"],"slug":"reactive-forms","isIndexFile":false,"category":"angular","component":{},"preview":{"html":"

Reactive forms

Import ReactiveFormsModule

To get started, you need to import the ReactiveFormsModule to your AppModule.

import { BrowserModule } from \"@angular/platform-browser\";\nimport { NgModule } from \"@angular/core\";\nimport { ReactiveFormsModule } from \"@angular/forms\"; // import it\nimport { HttpModule } from \"@angular/http\";\n\nimport { AppComponent } from \"./app.component\";\n\n@NgModule({\n\t// ...\n\timports: [\n\t\tBrowserModule,\n\t\tReactiveFormsModule, // add it to imports\n\t\tHttpModule,\n\t],\n\t// ...\n})\nexport class AppModule {}

Creating the form data with `FormBuilder`

We need to declare each form input we want with the FormBuilder. At the declaring stage, we can add both the initial value of the input, as well as which validators we want.

import { Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormGroup, Validators } from '@angular/forms';\n\n@Component({\n  // ...\n})\nexport class AppComponent implements OnInit {\n  myForm: FormGroup;\n\n  constructor(private formBuilder: FormBuilder) {}\n\n  ngOnInit() {\n  this.myForm = this.formBuilder.group({\n    name: ['ValueAtStart', Validators.required],\n    email: ['', [Validators.required, Validators.email]],\n    message: ['', [Validators.required, Validators.minLength(15)]]\n  });\n  }\n}

We create a FormGroup in the MyForm. Using FormBuilder, we add three input parameters.

The name input has a modified value (ValueAtStart), which will be present at the start within the form.

The validators are also declared, you can read more about them here.

Adding to the HTML

We need to connect the form to HTML. This is done using [formGroup].

<form [formGroup]=\"myForm\" (ngSubmit)=\"onSubmit()\">\n\t<input formControlName=\"name\" placeholder=\"Your name\" />\n\t<input formControlName=\"email\" placeholder=\"Your email\" />\n\t<input formControlName=\"message\" placeholder=\"Your message\" />\n\n\t<button type=\"submit\">Send</button>\n</form>

Each input element is connected to the formBuilder we created earlier. To make the next part, error messages, easier, I’ll add a getter.

//...\nget f() {\n    return this.myForm.controls;\n}

This way, we can access the form writing f[formElement] (or f.formsElement) instead of this.myForm.controls[formElement] all the time, which makes it easier to read.

Adding validation

Adding visualized error feedback to the user is easy using our new f getter.

<!-- ...  -->\n\n<input formControlName=\"name\" placeholder=\"Your name\" />\n\n<div *ngIf=\"f.name.errors\" class=\"invalid-feedback\">\n\t<div *ngIf=\"f.name.errors.required\">Username is required</div>\n</div>\n\n<!-- ...  -->

","next":{"author":"Anton Ödman","title":"Hosting a MySQL/MariaDB Server On a VPS With Remote Access","date":"2020-03-19","description":"Setup a MySQL/MariaDB server easily on Ubuntu VPS with remote access to use in your projects.","tags":["hosting"],"draft":false,"cover":"/covers/png/sql-on-ubuntu.png","aliases":["/sql-on-ubuntu"],"slug":"sql-on-ubuntu","isIndexFile":false,"category":"hosting","component":{},"preview":{"html":"

Most projects you create often need a database. If you prefer working with MySQL (or MariaDB), this is a guide on how to set it up on a ubuntu VPS and allow remote access.

Database for your project

Most projects you create often need a database. If you prefer working with MySQL (or MariaDB), this is a guide on how to set it up on a ubuntu VPS and allow remote access.

I have been using Hetzner Cloud when hosting my VPS, and it has been working great. But any VPS will do.

So set up your VPS with Ubuntu and log in to it.

1. Update

Always make sure it is up to date with

sudo apt update

2. Install MySQL or MariaDB

Install the necessary server depending on which language.

# MySQL\nsudo apt install mysql-server mysql-client\n\n# MariaDB\nsudo apt install mariadb-server mariadb-client

3. Remote bind-address

To enable remote connections, we need to remove the bind-address. Edit this file and remove/comment out bind-address

# MySQL\nsudo nano /etc/mysql/mysql.conf.d/mysqld.cnf\n\n# MariaDB\nsudo nano /etc/mysql/mariadb.conf.d/50-server.cnf

4. Restart

Restart the service with the following command.

# MySQL\nsudo systemctl restart mysql\n\n# MariaDB\nsudo systemctl restart mariadb

\n\n

# Without password\nsudo mysql -u root\n\n# With password\nsudo mysql -u root -p

6. Create a user

Create a user that will be used to access the server remotely.

CREATE USER 'your_username'@'%' IDENTIFIED BY 'your_password';

7. Grant privileges

You need to grant your user all privileges.

GRANT ALL PRIVILEGES ON *.* TO 'your_username'@'%';

To apply the changes, we need to do a flush.

FLUSH PRIVILEGES;

8. Quit and find IP

Use the quit command to exit MySQL/MariaDB. Type in ip a to get your IP that you will use to access your server.

"},"previous":{"author":"Anton Ödman","title":"Responsive Sidebar Using CSS","date":"2020-03-17","description":"Create a sidebar (navbar) with navigation, that on smaller screens, will turn to a bottom bar with icons using only CSS and HTML.","tags":["css"],"draft":false,"cover":"/covers/png/responsive-sidebar.png","aliases":["/responsive-sidebar"],"slug":"responsive-sidebar","isIndexFile":false,"category":"css","component":{},"preview":{"html":"

People tend to use the phone more surfing the web nowadays. As the screens often are so small, a sidebar is not the best idea. This is a quick on guide how you can use only CSS to make your sidebar to a bottom bar on phone screens.

","text":"People tend to use the phone more surfing the web nowadays. As the screens often are so small, a sidebar is not the best idea. This is a quick on guide how you can use only CSS to make your sidebar to a bottom bar on phone screens."},"readingTime":"5 min read","body":"\n

1. Setup HTML

We need a basic HTML setup, something like this.

<body>\n\t<nav class=\"sidenav\">\n\t\t<ul class=\"sidenav-nav\">\n\t\t\t<li class=\"sidenav-item\">\n\t\t\t\t<a class=\"sidenav-link\">\n\t\t\t\t\t<span class=\"las la-3x la-home icon\"></span>\n\t\t\t\t\t<span class=\"link-text\">Dashboard</span>\n\t\t\t\t</a>\n\t\t\t</li>\n\n\t\t\t<!-- MORE NAV LINKS  -->\n\t\t</ul>\n\t</nav>\n\n\t<main>\n\t\t<!-- MAIN CONTENT GOES HERE  -->\n\t</main>\n</body>

The first span item within the nav is an icon, using the Line Awesome icons, in case you were wondering.

\n\n

We will use CSS to position our sidebar to the left as standard.

main {\n\tpadding: 1rem;\n\tmargin-left: 10rem; /* SIDEBAR WIDTH  */\n\theight: 100vh;\n}\n\n.sidenav {\n\tposition: fixed;\n\twidth: 10rem; /* SIDEBAR WIDTH  */\n\tleft: 0;\n\tbackground-color: white;\n\theight: 100vh;\n}\n\n.sidenav-nav {\n\tlist-style: none;\n\tpadding: 0;\n\tmargin: 0;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: left;\n\theight: 100%;\n}\n\n.sidenav-item {\n\twidth: 100%;\n}\n\n.sidenav-link {\n\tdisplay: flex;\n\talign-items: center;\n\theight: 4rem;\n\ttext-decoration: none;\n}\n\n.link-text {\n\tmargin-left: 0.5rem;\n}\n\n.icon {\n\tmargin: 0 0.5rem;\n}

Ok, so there is a lot of styling going on here. The 2 first are the most important. They allow the sidebar to be fixed to the left side, moving the main container over the same width to the right.

The rest is basically styling to align the sidebar more nicely. Use the code if you want, or modify it the way you want to have it.

3. Make it responsive (a bottom bar) on smaller screens

We want to make it appear as a bottom bar on smaller screens, for this, we will use media queries.

/* Small screen  */\n@media only screen and (max-width: 600px) {\n\tmain {\n\t\theight: calc(100vh - 5rem); /* BOTTOM BAR HEIGHT */\n\t}\n\n\t.sidenav {\n\t\tbottom: 0;\n\t\twidth: 100vw;\n\t\theight: 5rem; /* BOTTOM BAR HEIGHT */\n\t\talign-items: flex-start;\n\t\tpadding-top: 0.4rem;\n\t}\n\n\t.sidenav-nav {\n\t\tflex-direction: row;\n\t\tmargin-top: 0;\n\t\talign-items: flex-start;\n\t}\n\n\t.sidenav-link {\n\t\tjustify-content: center;\n\t}\n\n\t.link-text {\n\t\tdisplay: none;\n\t}\n}

Once again, the two top ones are the most important. We use the same technique as previously, by moving up main by 5rem, which is the height of the bottom bar. The rest is styling to make it look good.

"}},{"author":"Anton Ödman","title":"Responsive Sidebar Using CSS","date":"2020-03-17","description":"Create a sidebar (navbar) with navigation, that on smaller screens, will turn to a bottom bar with icons using only CSS and HTML.","tags":["css"],"draft":false,"cover":"/covers/png/responsive-sidebar.png","aliases":["/responsive-sidebar"],"slug":"responsive-sidebar","isIndexFile":false,"category":"css","component":{},"preview":{"html":"

1. Setup HTML

We need a basic HTML setup, something like this.

<body>\n\t<nav class=\"sidenav\">\n\t\t<ul class=\"sidenav-nav\">\n\t\t\t<li class=\"sidenav-item\">\n\t\t\t\t<a class=\"sidenav-link\">\n\t\t\t\t\t<span class=\"las la-3x la-home icon\"></span>\n\t\t\t\t\t<span class=\"link-text\">Dashboard</span>\n\t\t\t\t</a>\n\t\t\t</li>\n\n\t\t\t<!-- MORE NAV LINKS  -->\n\t\t</ul>\n\t</nav>\n\n\t<main>\n\t\t<!-- MAIN CONTENT GOES HERE  -->\n\t</main>\n</body>

The first span item within the nav is an icon, using the Line Awesome icons, in case you were wondering.

\n\n

We will use CSS to position our sidebar to the left as standard.

main {\n\tpadding: 1rem;\n\tmargin-left: 10rem; /* SIDEBAR WIDTH  */\n\theight: 100vh;\n}\n\n.sidenav {\n\tposition: fixed;\n\twidth: 10rem; /* SIDEBAR WIDTH  */\n\tleft: 0;\n\tbackground-color: white;\n\theight: 100vh;\n}\n\n.sidenav-nav {\n\tlist-style: none;\n\tpadding: 0;\n\tmargin: 0;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: left;\n\theight: 100%;\n}\n\n.sidenav-item {\n\twidth: 100%;\n}\n\n.sidenav-link {\n\tdisplay: flex;\n\talign-items: center;\n\theight: 4rem;\n\ttext-decoration: none;\n}\n\n.link-text {\n\tmargin-left: 0.5rem;\n}\n\n.icon {\n\tmargin: 0 0.5rem;\n}

Ok, so there is a lot of styling going on here. The 2 first are the most important. They allow the sidebar to be fixed to the left side, moving the main container over the same width to the right.

The rest is basically styling to align the sidebar more nicely. Use the code if you want, or modify it the way you want to have it.

3. Make it responsive (a bottom bar) on smaller screens

We want to make it appear as a bottom bar on smaller screens, for this, we will use media queries.

/* Small screen  */\n@media only screen and (max-width: 600px) {\n\tmain {\n\t\theight: calc(100vh - 5rem); /* BOTTOM BAR HEIGHT */\n\t}\n\n\t.sidenav {\n\t\tbottom: 0;\n\t\twidth: 100vw;\n\t\theight: 5rem; /* BOTTOM BAR HEIGHT */\n\t\talign-items: flex-start;\n\t\tpadding-top: 0.4rem;\n\t}\n\n\t.sidenav-nav {\n\t\tflex-direction: row;\n\t\tmargin-top: 0;\n\t\talign-items: flex-start;\n\t}\n\n\t.sidenav-link {\n\t\tjustify-content: center;\n\t}\n\n\t.link-text {\n\t\tdisplay: none;\n\t}\n}

","next":{"author":"Anton Ödman","title":"Reactive Forms in Angular","date":"2020-03-18","description":"How to build forms and manage validation easy in Angular","tags":["angular"],"draft":false,"cover":"/covers/png/reactive-forms.png","aliases":["/reactive-forms"],"slug":"reactive-forms","isIndexFile":false,"category":"angular","component":{},"preview":{"html":"

Reactive forms

Import ReactiveFormsModule

To get started, you need to import the ReactiveFormsModule to your AppModule.

import { BrowserModule } from \"@angular/platform-browser\";\nimport { NgModule } from \"@angular/core\";\nimport { ReactiveFormsModule } from \"@angular/forms\"; // import it\nimport { HttpModule } from \"@angular/http\";\n\nimport { AppComponent } from \"./app.component\";\n\n@NgModule({\n\t// ...\n\timports: [\n\t\tBrowserModule,\n\t\tReactiveFormsModule, // add it to imports\n\t\tHttpModule,\n\t],\n\t// ...\n})\nexport class AppModule {}

Creating the form data with `FormBuilder`

We need to declare each form input we want with the FormBuilder. At the declaring stage, we can add both the initial value of the input, as well as which validators we want.

import { Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormGroup, Validators } from '@angular/forms';\n\n@Component({\n  // ...\n})\nexport class AppComponent implements OnInit {\n  myForm: FormGroup;\n\n  constructor(private formBuilder: FormBuilder) {}\n\n  ngOnInit() {\n  this.myForm = this.formBuilder.group({\n    name: ['ValueAtStart', Validators.required],\n    email: ['', [Validators.required, Validators.email]],\n    message: ['', [Validators.required, Validators.minLength(15)]]\n  });\n  }\n}

We create a FormGroup in the MyForm. Using FormBuilder, we add three input parameters.

The name input has a modified value (ValueAtStart), which will be present at the start within the form.

The validators are also declared, you can read more about them here.

Adding to the HTML

We need to connect the form to HTML. This is done using [formGroup].

<form [formGroup]=\"myForm\" (ngSubmit)=\"onSubmit()\">\n\t<input formControlName=\"name\" placeholder=\"Your name\" />\n\t<input formControlName=\"email\" placeholder=\"Your email\" />\n\t<input formControlName=\"message\" placeholder=\"Your message\" />\n\n\t<button type=\"submit\">Send</button>\n</form>

Each input element is connected to the formBuilder we created earlier. To make the next part, error messages, easier, I’ll add a getter.

//...\nget f() {\n    return this.myForm.controls;\n}

This way, we can access the form writing f[formElement] (or f.formsElement) instead of this.myForm.controls[formElement] all the time, which makes it easier to read.

Adding validation

Adding visualized error feedback to the user is easy using our new f getter.

<!-- ...  -->\n\n<input formControlName=\"name\" placeholder=\"Your name\" />\n\n<div *ngIf=\"f.name.errors\" class=\"invalid-feedback\">\n\t<div *ngIf=\"f.name.errors.required\">Username is required</div>\n</div>\n\n<!-- ...  -->

"},"previous":{"author":"Anton Ödman","title":"Setup Debugging in VS Code with ASP.NET Core and Angular","date":"2020-03-16","description":"When working with ASP.NET Core and Angular, debugging is much easier in, for example, Visual Studio. This is a short guide on how to make debugging work in VS Code.","tags":["tools"],"draft":false,"cover":"/covers/png/vscode-debugging-asp-net.png","aliases":["/vscode-debugging-asp-net"],"slug":"vscode-debugging-asp-net","isIndexFile":false,"category":"tools","component":{},"preview":{"html":"

When working with an ASP.NET Core + SPA (in this case Angular) application, debugging might be quite difficult in VS Code. There is however a way to set it up.

","text":"When working with an ASP.NET Core + SPA (in this case Angular) application, debugging might be quite difficult in VS Code. There is however a way to set it up."},"readingTime":"3 min read","body":"

VS Code

When working with an ASP.NET Core + SPA (in this case Angular) application, debugging might be quite difficult in VS Code. There is however a way to set it up.

1. Download Debugger For Chrome and C# extension

Debugger for Chrome is a great plugin that allows for JavaScript debugging in Chrome. C# is also necessary to download.

2. Add a new configuration

We need to add a custom configuration to make it run.\n $\"add$

This will allow you to edit launch.json.

3. Add compounds

We will add a compound that will run two configurations simoutanuesly.

// ...\n\"compounds\": [\n    {\n        \"name\": \".Net+Browser\",\n        \"configurations\": [\".NET Core Launch (console)\", \"Launch Chrome\"]\n    }\n],\n//...

We need to create the two configurations that will run.

4. Create configurations

We need to add the configurations for .NET Core Launch (console) and Launch Chrome.

/...,\n\"configurations\": [\n    {\n        \"type\": \"chrome\",\n        \"request\": \"launch\",\n        \"name\": \"Launch Chrome\",\n        \"url\": \"http://localhost:5000\",\n        \"webRoot\": \"${workspaceRoot}/ClientApp\"\n    },\n    {\n        \"name\": \".NET Core Launch (console)\",\n        \"type\": \"coreclr\",\n        \"request\": \"launch\",\n        \"preLaunchTask\": \"build\",\n        \"program\": \"${workspaceFolder}/bin/Debug/netcoreapp3.1/path.to.project.dll\",\n        \"args\": [],\n        \"cwd\": \"${workspaceRoot}\",\n        \"stopAtEntry\": false,\n        \"console\": \"internalConsole\"\n    },\n//...

Notice that your paths may not be the same as my paths, be sure that program, webRoot and cwd points to the right places.

5. Run debugging

Now simply start debugging with the following button.

$\"toggle$

EXTRA: Save Chrome configurations

If you want to save your data and extensions between is debugging session, add the following line to the Launch Chrome configuration.

\"userDataDir\": \"${workspaceRoot}/.vscode/chrome\"

"}},{"author":"Anton Ödman","title":"Setup Debugging in VS Code with ASP.NET Core and Angular","date":"2020-03-16","description":"When working with ASP.NET Core and Angular, debugging is much easier in, for example, Visual Studio. This is a short guide on how to make debugging work in VS Code.","tags":["tools"],"draft":false,"cover":"/covers/png/vscode-debugging-asp-net.png","aliases":["/vscode-debugging-asp-net"],"slug":"vscode-debugging-asp-net","isIndexFile":false,"category":"tools","component":{},"preview":{"html":"

When working with an ASP.NET Core + SPA (in this case Angular) application, debugging might be quite difficult in VS Code. There is however a way to set it up.

VS Code

When working with an ASP.NET Core + SPA (in this case Angular) application, debugging might be quite difficult in VS Code. There is however a way to set it up.

1. Download Debugger For Chrome and C# extension

Debugger for Chrome is a great plugin that allows for JavaScript debugging in Chrome. C# is also necessary to download.

2. Add a new configuration

We need to add a custom configuration to make it run.\n $\"add$

This will allow you to edit launch.json.

3. Add compounds

We will add a compound that will run two configurations simoutanuesly.

// ...\n\"compounds\": [\n    {\n        \"name\": \".Net+Browser\",\n        \"configurations\": [\".NET Core Launch (console)\", \"Launch Chrome\"]\n    }\n],\n//...

We need to create the two configurations that will run.

4. Create configurations

We need to add the configurations for .NET Core Launch (console) and Launch Chrome.

/...,\n\"configurations\": [\n    {\n        \"type\": \"chrome\",\n        \"request\": \"launch\",\n        \"name\": \"Launch Chrome\",\n        \"url\": \"http://localhost:5000\",\n        \"webRoot\": \"${workspaceRoot}/ClientApp\"\n    },\n    {\n        \"name\": \".NET Core Launch (console)\",\n        \"type\": \"coreclr\",\n        \"request\": \"launch\",\n        \"preLaunchTask\": \"build\",\n        \"program\": \"${workspaceFolder}/bin/Debug/netcoreapp3.1/path.to.project.dll\",\n        \"args\": [],\n        \"cwd\": \"${workspaceRoot}\",\n        \"stopAtEntry\": false,\n        \"console\": \"internalConsole\"\n    },\n//...

Notice that your paths may not be the same as my paths, be sure that program, webRoot and cwd points to the right places.

5. Run debugging

Now simply start debugging with the following button.

$\"toggle$

EXTRA: Save Chrome configurations

If you want to save your data and extensions between is debugging session, add the following line to the Launch Chrome configuration.

\"userDataDir\": \"${workspaceRoot}/.vscode/chrome\"

","next":{"author":"Anton Ödman","title":"Responsive Sidebar Using CSS","date":"2020-03-17","description":"Create a sidebar (navbar) with navigation, that on smaller screens, will turn to a bottom bar with icons using only CSS and HTML.","tags":["css"],"draft":false,"cover":"/covers/png/responsive-sidebar.png","aliases":["/responsive-sidebar"],"slug":"responsive-sidebar","isIndexFile":false,"category":"css","component":{},"preview":{"html":"

1. Setup HTML

We need a basic HTML setup, something like this.

<body>\n\t<nav class=\"sidenav\">\n\t\t<ul class=\"sidenav-nav\">\n\t\t\t<li class=\"sidenav-item\">\n\t\t\t\t<a class=\"sidenav-link\">\n\t\t\t\t\t<span class=\"las la-3x la-home icon\"></span>\n\t\t\t\t\t<span class=\"link-text\">Dashboard</span>\n\t\t\t\t</a>\n\t\t\t</li>\n\n\t\t\t<!-- MORE NAV LINKS  -->\n\t\t</ul>\n\t</nav>\n\n\t<main>\n\t\t<!-- MAIN CONTENT GOES HERE  -->\n\t</main>\n</body>

The first span item within the nav is an icon, using the Line Awesome icons, in case you were wondering.

\n\n

We will use CSS to position our sidebar to the left as standard.

main {\n\tpadding: 1rem;\n\tmargin-left: 10rem; /* SIDEBAR WIDTH  */\n\theight: 100vh;\n}\n\n.sidenav {\n\tposition: fixed;\n\twidth: 10rem; /* SIDEBAR WIDTH  */\n\tleft: 0;\n\tbackground-color: white;\n\theight: 100vh;\n}\n\n.sidenav-nav {\n\tlist-style: none;\n\tpadding: 0;\n\tmargin: 0;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: left;\n\theight: 100%;\n}\n\n.sidenav-item {\n\twidth: 100%;\n}\n\n.sidenav-link {\n\tdisplay: flex;\n\talign-items: center;\n\theight: 4rem;\n\ttext-decoration: none;\n}\n\n.link-text {\n\tmargin-left: 0.5rem;\n}\n\n.icon {\n\tmargin: 0 0.5rem;\n}

Ok, so there is a lot of styling going on here. The 2 first are the most important. They allow the sidebar to be fixed to the left side, moving the main container over the same width to the right.

The rest is basically styling to align the sidebar more nicely. Use the code if you want, or modify it the way you want to have it.

3. Make it responsive (a bottom bar) on smaller screens

We want to make it appear as a bottom bar on smaller screens, for this, we will use media queries.

/* Small screen  */\n@media only screen and (max-width: 600px) {\n\tmain {\n\t\theight: calc(100vh - 5rem); /* BOTTOM BAR HEIGHT */\n\t}\n\n\t.sidenav {\n\t\tbottom: 0;\n\t\twidth: 100vw;\n\t\theight: 5rem; /* BOTTOM BAR HEIGHT */\n\t\talign-items: flex-start;\n\t\tpadding-top: 0.4rem;\n\t}\n\n\t.sidenav-nav {\n\t\tflex-direction: row;\n\t\tmargin-top: 0;\n\t\talign-items: flex-start;\n\t}\n\n\t.sidenav-link {\n\t\tjustify-content: center;\n\t}\n\n\t.link-text {\n\t\tdisplay: none;\n\t}\n}

"},"previous":{"author":"Anton Ödman","title":"Component Communication in Angular with @Input and @Output","date":"2020-03-13","description":"There are a few methods to share data between child and parent components in Angular. This is how using the @Input and @Output method.","tags":["angular"],"draft":false,"cover":"/covers/png/communication-input-output.png","aliases":["/communication-input-output"],"slug":"communication-input-output","isIndexFile":false,"category":"angular","component":{},"preview":{"html":"

To be able to pass data via the parent, we use two different types of data binding.

","text":"To be able to pass data via the parent, we use two different types of data binding."},"readingTime":"3 min read","body":"

Parent component

To be able to pass data via the parent, we use two different types of data binding.

inputData - data that we give to the component, specified in the parent component.
outputData - data we get from the child.

<app-child [inputData]=\"person\" (outputData)=\"getStory($event)\"></app-child>

The parent component probably looks something like this.

export class ParentComponent {\n\tperson: Person;\n\tstory: string = \"\";\n\n\tgetStory(story) {\n\t\tthis.story = story;\n\t}\n\n\t// ...\n}

In this case, we pass person to the child component, and receive a story from the child, and thus add it to the story property.

Child component

The child component might look something like this.

import { Component, Input, OnInit } from '@angular/core';\n\n@Component({\n  selector:  'app-child',\n  template: ''\n})\nexport class AppChild implements OnInit {\n  @Input() inputData: Person;\n  @Output() outputData  = new EventEmitter<string>()\n\n  constructor() {}\n\n  onSubmit(story: string) {\n      this.outputData.emit(story);\n  }\n}

We receive the inputData, which in this case is a Person type. We also emit the outputData using the onSubmit method, which most likely, in this case, is a button.

We can also choose to rename the inputData if we want it to have another name in the child component.

@input(\"inputData\") person: string;

In this case, the inputData property is aliased to person.

"}},{"author":"Anton Ödman","title":"Component Communication in Angular with @Input and @Output","date":"2020-03-13","description":"There are a few methods to share data between child and parent components in Angular. This is how using the @Input and @Output method.","tags":["angular"],"draft":false,"cover":"/covers/png/communication-input-output.png","aliases":["/communication-input-output"],"slug":"communication-input-output","isIndexFile":false,"category":"angular","component":{},"preview":{"html":"

To be able to pass data via the parent, we use two different types of data binding.

","text":"To be able to pass data via the parent, we use two different types of data binding."},"readingTime":"3 min read","body":"

Parent component

To be able to pass data via the parent, we use two different types of data binding.

inputData - data that we give to the component, specified in the parent component.
outputData - data we get from the child.

<app-child [inputData]=\"person\" (outputData)=\"getStory($event)\"></app-child>

The parent component probably looks something like this.

export class ParentComponent {\n\tperson: Person;\n\tstory: string = \"\";\n\n\tgetStory(story) {\n\t\tthis.story = story;\n\t}\n\n\t// ...\n}

In this case, we pass person to the child component, and receive a story from the child, and thus add it to the story property.

Child component

The child component might look something like this.

import { Component, Input, OnInit } from '@angular/core';\n\n@Component({\n  selector:  'app-child',\n  template: ''\n})\nexport class AppChild implements OnInit {\n  @Input() inputData: Person;\n  @Output() outputData  = new EventEmitter<string>()\n\n  constructor() {}\n\n  onSubmit(story: string) {\n      this.outputData.emit(story);\n  }\n}

We receive the inputData, which in this case is a Person type. We also emit the outputData using the onSubmit method, which most likely, in this case, is a button.

We can also choose to rename the inputData if we want it to have another name in the child component.

@input(\"inputData\") person: string;

In this case, the inputData property is aliased to person.

","next":{"author":"Anton Ödman","title":"Setup Debugging in VS Code with ASP.NET Core and Angular","date":"2020-03-16","description":"When working with ASP.NET Core and Angular, debugging is much easier in, for example, Visual Studio. This is a short guide on how to make debugging work in VS Code.","tags":["tools"],"draft":false,"cover":"/covers/png/vscode-debugging-asp-net.png","aliases":["/vscode-debugging-asp-net"],"slug":"vscode-debugging-asp-net","isIndexFile":false,"category":"tools","component":{},"preview":{"html":"

When working with an ASP.NET Core + SPA (in this case Angular) application, debugging might be quite difficult in VS Code. There is however a way to set it up.

VS Code

When working with an ASP.NET Core + SPA (in this case Angular) application, debugging might be quite difficult in VS Code. There is however a way to set it up.

1. Download Debugger For Chrome and C# extension

Debugger for Chrome is a great plugin that allows for JavaScript debugging in Chrome. C# is also necessary to download.

2. Add a new configuration

We need to add a custom configuration to make it run.\n $\"add$

This will allow you to edit launch.json.

3. Add compounds

We will add a compound that will run two configurations simoutanuesly.

// ...\n\"compounds\": [\n    {\n        \"name\": \".Net+Browser\",\n        \"configurations\": [\".NET Core Launch (console)\", \"Launch Chrome\"]\n    }\n],\n//...

We need to create the two configurations that will run.

4. Create configurations

We need to add the configurations for .NET Core Launch (console) and Launch Chrome.

/...,\n\"configurations\": [\n    {\n        \"type\": \"chrome\",\n        \"request\": \"launch\",\n        \"name\": \"Launch Chrome\",\n        \"url\": \"http://localhost:5000\",\n        \"webRoot\": \"${workspaceRoot}/ClientApp\"\n    },\n    {\n        \"name\": \".NET Core Launch (console)\",\n        \"type\": \"coreclr\",\n        \"request\": \"launch\",\n        \"preLaunchTask\": \"build\",\n        \"program\": \"${workspaceFolder}/bin/Debug/netcoreapp3.1/path.to.project.dll\",\n        \"args\": [],\n        \"cwd\": \"${workspaceRoot}\",\n        \"stopAtEntry\": false,\n        \"console\": \"internalConsole\"\n    },\n//...

Notice that your paths may not be the same as my paths, be sure that program, webRoot and cwd points to the right places.

5. Run debugging

Now simply start debugging with the following button.

$\"toggle$

EXTRA: Save Chrome configurations

If you want to save your data and extensions between is debugging session, add the following line to the Launch Chrome configuration.

\"userDataDir\": \"${workspaceRoot}/.vscode/chrome\"

"},"previous":{"author":"Anton Ödman","title":"Save a Modified Docker Container As An Image Using Commit","date":"2020-03-13","description":"It's easy to find a good Docker container online. Sometimes, it does require some minor changes to make it perfect. This is how you can modify a Docker container, and then save it as a new Docker image using commit","tags":["docker"],"draft":false,"cover":"/covers/png/commit-container.png","aliases":["/commit-container"],"slug":"commit-container","isIndexFile":false,"category":"docker","component":{},"preview":{"html":"

Download or create the container you want to use as your base.

","text":"Download or create the container you want to use as your base."},"readingTime":"1 min read","body":"

Modify container

1. Download / Create

Download or create the container you want to use as your base.

2. Modify

Make the changes you want to do to it. It can be anything from adding files to updating software, etc.

3. Commit

The most important part, committing your changes to a new Docker image.

docker commit <name-of-container> <username>/<new-image-name>:<tag>

For example, it might look something like this.

docker commit my-container banjoanton/my-image:latest

4. Push

If you want to push your work to Docker Hub, you can do it like this.

docker push <username>/<new-image-name>

Which, in my case, would look like this.

docker push banjoanton/my-image

"}},{"author":"Anton Ödman","title":"Save a Modified Docker Container As An Image Using Commit","date":"2020-03-13","description":"It's easy to find a good Docker container online. Sometimes, it does require some minor changes to make it perfect. This is how you can modify a Docker container, and then save it as a new Docker image using commit","tags":["docker"],"draft":false,"cover":"/covers/png/commit-container.png","aliases":["/commit-container"],"slug":"commit-container","isIndexFile":false,"category":"docker","component":{},"preview":{"html":"

Download or create the container you want to use as your base.

","text":"Download or create the container you want to use as your base."},"readingTime":"1 min read","body":"

Modify container

1. Download / Create

Download or create the container you want to use as your base.

2. Modify

Make the changes you want to do to it. It can be anything from adding files to updating software, etc.

3. Commit

The most important part, committing your changes to a new Docker image.

docker commit <name-of-container> <username>/<new-image-name>:<tag>

For example, it might look something like this.

docker commit my-container banjoanton/my-image:latest

4. Push

If you want to push your work to Docker Hub, you can do it like this.

docker push <username>/<new-image-name>

Which, in my case, would look like this.

docker push banjoanton/my-image

","next":{"author":"Anton Ödman","title":"Component Communication in Angular with @Input and @Output","date":"2020-03-13","description":"There are a few methods to share data between child and parent components in Angular. This is how using the @Input and @Output method.","tags":["angular"],"draft":false,"cover":"/covers/png/communication-input-output.png","aliases":["/communication-input-output"],"slug":"communication-input-output","isIndexFile":false,"category":"angular","component":{},"preview":{"html":"

To be able to pass data via the parent, we use two different types of data binding.

","text":"To be able to pass data via the parent, we use two different types of data binding."},"readingTime":"3 min read","body":"

Parent component

To be able to pass data via the parent, we use two different types of data binding.

inputData - data that we give to the component, specified in the parent component.
outputData - data we get from the child.

<app-child [inputData]=\"person\" (outputData)=\"getStory($event)\"></app-child>

The parent component probably looks something like this.

export class ParentComponent {\n\tperson: Person;\n\tstory: string = \"\";\n\n\tgetStory(story) {\n\t\tthis.story = story;\n\t}\n\n\t// ...\n}

In this case, we pass person to the child component, and receive a story from the child, and thus add it to the story property.

Child component

The child component might look something like this.

import { Component, Input, OnInit } from '@angular/core';\n\n@Component({\n  selector:  'app-child',\n  template: ''\n})\nexport class AppChild implements OnInit {\n  @Input() inputData: Person;\n  @Output() outputData  = new EventEmitter<string>()\n\n  constructor() {}\n\n  onSubmit(story: string) {\n      this.outputData.emit(story);\n  }\n}

We receive the inputData, which in this case is a Person type. We also emit the outputData using the onSubmit method, which most likely, in this case, is a button.

We can also choose to rename the inputData if we want it to have another name in the child component.

@input(\"inputData\") person: string;

In this case, the inputData property is aliased to person.

"},"previous":{"author":"Anton Ödman","title":"How To Create a Docker Image, Build and Push It To Docker Hub","date":"2020-03-12","description":"This is a simple explanation of the Docker workflow. From creating the first Dockerfile to pushing it to Docker.","tags":["docker"],"draft":false,"cover":"/covers/png/create-docker-image.png","aliases":["/create-docker-image"],"slug":"create-docker-image","isIndexFile":false,"category":"docker","component":{},"preview":{"html":"

without going into any details, this simply describes the workflow when creating a Docker image and all code that is necessary to know.

","text":"without going into any details, this simply describes the workflow when creating a Docker image and all code that is necessary to know."},"readingTime":"3 min read","body":"

Docker workflow

without going into any details, this simply describes the workflow when creating a Docker image and all code that is necessary to know.

1. Create a Dockerfile in the root directory, modify it

This is an example of a simple node application. Nothing I will get into now. This is just about the workflow.

Create the file with touch Dockerfile.

FROM node:10\n\nWORKDIR /usr/src/app\n\nCOPY package*.json ./\n\nRUN npm install\n\nCOPY . .\n\nEXPOSE 8080\nCMD [ \"node\", \"server.js\" ]

You can also include a .dockerignore file to prevent local modules to be copied into Docker.

node_modules\nnpm-debug.log

2. Build the image

Based on the Dockerfile, we can build an image with the following command. We need to include the username so that we can push it to Docker Hub later.

docker build -t <username>/<image-name>:<tag> .

. - means the current working directory, will use the dockerfile in that directory.
-t - will add a tag to the image
image-name - the name of the image
tag - the tag of the image your creating, latest is standard.

Other important build flags

Some other flags you might use when building a Docker image.

-f, --file - path to Dockerfile if another name or in another directory
--no-cache - force rebuild without using cache
--rm - remove intermediate containers after build

3. Run the Docker container

You can run the container (based on the image we created) locally with the following command.

docker run -d -p 49160:8080 <image-name>:<tag>

-d - means detached, it will happen in the background.
-p - specifies which port to use. In this case 49160 locally, and 8080 within the container.

Other important run flags

--name - set a name to the container
--rm - remove container when it exists

If you want to enter the container, you can use the exec command. You will need to use the container id which you can get by writing docker ps.

docker exec -it <container-id> /bin/bash

4. Push the Docker container to Docker Hub

Finally, you can push the image to Docker Hub to share it.

docker push <username>/<image-name>

"}},{"author":"Anton Ödman","title":"How To Create a Docker Image, Build and Push It To Docker Hub","date":"2020-03-12","description":"This is a simple explanation of the Docker workflow. From creating the first Dockerfile to pushing it to Docker.","tags":["docker"],"draft":false,"cover":"/covers/png/create-docker-image.png","aliases":["/create-docker-image"],"slug":"create-docker-image","isIndexFile":false,"category":"docker","component":{},"preview":{"html":"

without going into any details, this simply describes the workflow when creating a Docker image and all code that is necessary to know.

","text":"without going into any details, this simply describes the workflow when creating a Docker image and all code that is necessary to know."},"readingTime":"3 min read","body":"

Docker workflow

without going into any details, this simply describes the workflow when creating a Docker image and all code that is necessary to know.

1. Create a Dockerfile in the root directory, modify it

This is an example of a simple node application. Nothing I will get into now. This is just about the workflow.

Create the file with touch Dockerfile.

FROM node:10\n\nWORKDIR /usr/src/app\n\nCOPY package*.json ./\n\nRUN npm install\n\nCOPY . .\n\nEXPOSE 8080\nCMD [ \"node\", \"server.js\" ]

You can also include a .dockerignore file to prevent local modules to be copied into Docker.

node_modules\nnpm-debug.log

2. Build the image

Based on the Dockerfile, we can build an image with the following command. We need to include the username so that we can push it to Docker Hub later.

docker build -t <username>/<image-name>:<tag> .

. - means the current working directory, will use the dockerfile in that directory.
-t - will add a tag to the image
image-name - the name of the image
tag - the tag of the image your creating, latest is standard.

Other important build flags

Some other flags you might use when building a Docker image.

-f, --file - path to Dockerfile if another name or in another directory
--no-cache - force rebuild without using cache
--rm - remove intermediate containers after build

3. Run the Docker container

You can run the container (based on the image we created) locally with the following command.

docker run -d -p 49160:8080 <image-name>:<tag>

-d - means detached, it will happen in the background.
-p - specifies which port to use. In this case 49160 locally, and 8080 within the container.

Other important run flags

--name - set a name to the container
--rm - remove container when it exists

If you want to enter the container, you can use the exec command. You will need to use the container id which you can get by writing docker ps.

docker exec -it <container-id> /bin/bash

4. Push the Docker container to Docker Hub

Finally, you can push the image to Docker Hub to share it.

docker push <username>/<image-name>

","next":{"author":"Anton Ödman","title":"Save a Modified Docker Container As An Image Using Commit","date":"2020-03-13","description":"It's easy to find a good Docker container online. Sometimes, it does require some minor changes to make it perfect. This is how you can modify a Docker container, and then save it as a new Docker image using commit","tags":["docker"],"draft":false,"cover":"/covers/png/commit-container.png","aliases":["/commit-container"],"slug":"commit-container","isIndexFile":false,"category":"docker","component":{},"preview":{"html":"

Download or create the container you want to use as your base.

","text":"Download or create the container you want to use as your base."},"readingTime":"1 min read","body":"

Modify container

1. Download / Create

Download or create the container you want to use as your base.

2. Modify

Make the changes you want to do to it. It can be anything from adding files to updating software, etc.

3. Commit

The most important part, committing your changes to a new Docker image.

docker commit <name-of-container> <username>/<new-image-name>:<tag>

For example, it might look something like this.

docker commit my-container banjoanton/my-image:latest

4. Push

If you want to push your work to Docker Hub, you can do it like this.

docker push <username>/<new-image-name>

Which, in my case, would look like this.

docker push banjoanton/my-image

"},"previous":{"author":"Anton Ödman","title":"How To Stop and Remove All Docker Containers","date":"2020-03-12","description":"Sometimes you start a lot of containers and the same time, this is a simple way to stop and delete them all.","tags":["docker"],"draft":false,"cover":"/covers/png/remove-all-docker-containers.png","aliases":["/remove-all-docker-containers"],"slug":"remove-all-docker-containers","isIndexFile":false,"category":"docker","component":{},"preview":{"html":"

When stopping/removing all containers, you have to select them within a stop or rm command.

","text":"When stopping/removing all containers, you have to select them within a stop or rm command."},"readingTime":"1 min read","body":"

Select all Docker containers

When stopping/removing all containers, you have to select them within a stop or rm command.

${docker container ls -aq}

ls - list all
a - include all, (not just running)
q - quiet, only display numeric IDs

Stop all Docker containers

We need to use the stop command in combination with the select command above.

docker container stop $(docker container ls -aq)

Remove all Docker containers

Same as above, we need to use the rm command in combination with the select command.

docker container rm $(docker container ls -aq)

"}},{"author":"Anton Ödman","title":"How To Stop and Remove All Docker Containers","date":"2020-03-12","description":"Sometimes you start a lot of containers and the same time, this is a simple way to stop and delete them all.","tags":["docker"],"draft":false,"cover":"/covers/png/remove-all-docker-containers.png","aliases":["/remove-all-docker-containers"],"slug":"remove-all-docker-containers","isIndexFile":false,"category":"docker","component":{},"preview":{"html":"

When stopping/removing all containers, you have to select them within a stop or rm command.

","text":"When stopping/removing all containers, you have to select them within a stop or rm command."},"readingTime":"1 min read","body":"

Select all Docker containers

When stopping/removing all containers, you have to select them within a stop or rm command.

${docker container ls -aq}

ls - list all
a - include all, (not just running)
q - quiet, only display numeric IDs

Stop all Docker containers

We need to use the stop command in combination with the select command above.

docker container stop $(docker container ls -aq)

Remove all Docker containers

Same as above, we need to use the rm command in combination with the select command.

docker container rm $(docker container ls -aq)

","next":{"author":"Anton Ödman","title":"How To Create a Docker Image, Build and Push It To Docker Hub","date":"2020-03-12","description":"This is a simple explanation of the Docker workflow. From creating the first Dockerfile to pushing it to Docker.","tags":["docker"],"draft":false,"cover":"/covers/png/create-docker-image.png","aliases":["/create-docker-image"],"slug":"create-docker-image","isIndexFile":false,"category":"docker","component":{},"preview":{"html":"

without going into any details, this simply describes the workflow when creating a Docker image and all code that is necessary to know.

","text":"without going into any details, this simply describes the workflow when creating a Docker image and all code that is necessary to know."},"readingTime":"3 min read","body":"

Docker workflow

without going into any details, this simply describes the workflow when creating a Docker image and all code that is necessary to know.

1. Create a Dockerfile in the root directory, modify it

This is an example of a simple node application. Nothing I will get into now. This is just about the workflow.

Create the file with touch Dockerfile.

FROM node:10\n\nWORKDIR /usr/src/app\n\nCOPY package*.json ./\n\nRUN npm install\n\nCOPY . .\n\nEXPOSE 8080\nCMD [ \"node\", \"server.js\" ]

You can also include a .dockerignore file to prevent local modules to be copied into Docker.

node_modules\nnpm-debug.log

2. Build the image

Based on the Dockerfile, we can build an image with the following command. We need to include the username so that we can push it to Docker Hub later.

docker build -t <username>/<image-name>:<tag> .

. - means the current working directory, will use the dockerfile in that directory.
-t - will add a tag to the image
image-name - the name of the image
tag - the tag of the image your creating, latest is standard.

Other important build flags

Some other flags you might use when building a Docker image.

-f, --file - path to Dockerfile if another name or in another directory
--no-cache - force rebuild without using cache
--rm - remove intermediate containers after build

3. Run the Docker container

You can run the container (based on the image we created) locally with the following command.

docker run -d -p 49160:8080 <image-name>:<tag>

-d - means detached, it will happen in the background.
-p - specifies which port to use. In this case 49160 locally, and 8080 within the container.

Other important run flags

--name - set a name to the container
--rm - remove container when it exists

If you want to enter the container, you can use the exec command. You will need to use the container id which you can get by writing docker ps.

docker exec -it <container-id> /bin/bash

4. Push the Docker container to Docker Hub

Finally, you can push the image to Docker Hub to share it.

docker push <username>/<image-name>

"},"previous":{"author":"Anton Ödman","title":"How To Delete a Git Branch - Locally and Remotely","date":"2020-03-11","description":"Branching is great, it does, however, look much better if you remember to remove your old branches so they don't take up unnecessary space. This is how.","tags":["git"],"draft":false,"cover":"/covers/png/delete-branch.png","aliases":["/delete-branch"],"slug":"delete-branch","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

Deleting a local branch is the simplest of the two.

","text":"Deleting a local branch is the simplest of the two."},"readingTime":"1 min read","body":"

Delete a local branch

Deleting a local branch is the simplest of the two.

git branch -d branchToDelete

If you have unstaged changes, you need to force the removal with a capital D instead.

git branch -D branchToDelete

Delete a remote branch

Deleting a branch remotely actually requires a push, but it’s quite simple as well.

git push origin --delete branchToDelete

"}},{"author":"Anton Ödman","title":"How To Delete a Git Branch - Locally and Remotely","date":"2020-03-11","description":"Branching is great, it does, however, look much better if you remember to remove your old branches so they don't take up unnecessary space. This is how.","tags":["git"],"draft":false,"cover":"/covers/png/delete-branch.png","aliases":["/delete-branch"],"slug":"delete-branch","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

Deleting a local branch is the simplest of the two.

","text":"Deleting a local branch is the simplest of the two."},"readingTime":"1 min read","body":"

Delete a local branch

Deleting a local branch is the simplest of the two.

git branch -d branchToDelete

If you have unstaged changes, you need to force the removal with a capital D instead.

git branch -D branchToDelete

Delete a remote branch

Deleting a branch remotely actually requires a push, but it’s quite simple as well.

git push origin --delete branchToDelete

","next":{"author":"Anton Ödman","title":"How To Stop and Remove All Docker Containers","date":"2020-03-12","description":"Sometimes you start a lot of containers and the same time, this is a simple way to stop and delete them all.","tags":["docker"],"draft":false,"cover":"/covers/png/remove-all-docker-containers.png","aliases":["/remove-all-docker-containers"],"slug":"remove-all-docker-containers","isIndexFile":false,"category":"docker","component":{},"preview":{"html":"

When stopping/removing all containers, you have to select them within a stop or rm command.

","text":"When stopping/removing all containers, you have to select them within a stop or rm command."},"readingTime":"1 min read","body":"

Select all Docker containers

When stopping/removing all containers, you have to select them within a stop or rm command.

${docker container ls -aq}

ls - list all
a - include all, (not just running)
q - quiet, only display numeric IDs

Stop all Docker containers

We need to use the stop command in combination with the select command above.

docker container stop $(docker container ls -aq)

Remove all Docker containers

Same as above, we need to use the rm command in combination with the select command.

docker container rm $(docker container ls -aq)

"},"previous":{"author":"Anton Ödman","title":"How To Delete Your Last Commit","date":"2020-03-10","description":"Sometimes things just go wrong, and thankfully we have Git to save some time. This is a short guide on some ways you can delete (or remove) or last commit","tags":["git"],"draft":false,"cover":"/covers/png/delete-commit.png","aliases":["/delete-commit"],"slug":"delete-commit","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

Remove your latest local commit and keep the changes you have made. The changes will still appear the same as before you staged them.

","text":"Remove your latest local commit and keep the changes you have made. The changes will still appear the same as before you staged them."},"readingTime":"1 min read","body":"

Remove a local commit

Remove your latest local commit and keep the changes you have made. The changes will still appear the same as before you staged them.

git reset --soft HEAD^

HEAD^ means go back one commit from where HEAD is now.

Remove a pushed commit

If you already have pushed your commit to the repo, the safest way to remove it is probably reverting it. Find the commit hash of the commit you want to revert and type the following.

git revert <commit-hash>

This will create a completely new commit that will undo all the changes in the selected commit. Just push it up to remote and you are good to go.

"}},{"author":"Anton Ödman","title":"How To Delete Your Last Commit","date":"2020-03-10","description":"Sometimes things just go wrong, and thankfully we have Git to save some time. This is a short guide on some ways you can delete (or remove) or last commit","tags":["git"],"draft":false,"cover":"/covers/png/delete-commit.png","aliases":["/delete-commit"],"slug":"delete-commit","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

Remove your latest local commit and keep the changes you have made. The changes will still appear the same as before you staged them.

","text":"Remove your latest local commit and keep the changes you have made. The changes will still appear the same as before you staged them."},"readingTime":"1 min read","body":"

Remove a local commit

Remove your latest local commit and keep the changes you have made. The changes will still appear the same as before you staged them.

git reset --soft HEAD^

HEAD^ means go back one commit from where HEAD is now.

Remove a pushed commit

If you already have pushed your commit to the repo, the safest way to remove it is probably reverting it. Find the commit hash of the commit you want to revert and type the following.

git revert <commit-hash>

This will create a completely new commit that will undo all the changes in the selected commit. Just push it up to remote and you are good to go.

","next":{"author":"Anton Ödman","title":"How To Delete a Git Branch - Locally and Remotely","date":"2020-03-11","description":"Branching is great, it does, however, look much better if you remember to remove your old branches so they don't take up unnecessary space. This is how.","tags":["git"],"draft":false,"cover":"/covers/png/delete-branch.png","aliases":["/delete-branch"],"slug":"delete-branch","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

Deleting a local branch is the simplest of the two.

","text":"Deleting a local branch is the simplest of the two."},"readingTime":"1 min read","body":"

Delete a local branch

Deleting a local branch is the simplest of the two.

git branch -d branchToDelete

If you have unstaged changes, you need to force the removal with a capital D instead.

git branch -D branchToDelete

Delete a remote branch

Deleting a branch remotely actually requires a push, but it’s quite simple as well.

git push origin --delete branchToDelete

"},"previous":{"author":"Anton Ödman","title":"How To Rename Multiple Keys In A JavaScript Object","date":"2020-03-10","description":"Renaming the keys in a Javascript (or JSON) object can be quite tricky, this is a simple trick to rename all the keys you want.","tags":["javascript"],"draft":false,"cover":"/covers/png/rename-keys.png","aliases":["/rename-keys"],"slug":"rename-keys","isIndexFile":false,"category":"javascript","component":{},"preview":{"html":"

This function will help you rename the keys of an existing object, it is based on the use of Object.keys() in a combination with Array.prototype.reduce(). This function is originally from this website.

","text":"This function will help you rename the keys of an existing object, it is based on the use of Object.keys() in a combination with Array.prototype.reduce(). This function is originally from this website."},"readingTime":"2 min read","body":"

Renaming Keys

const renameKeys = (keysMap, obj) =>\n\tObject.keys(obj).reduce(\n\t\t(acc, key) => ({\n\t\t\t...acc,\n\t\t\t...{ [keysMap[key] || key]: obj[key] },\n\t\t}),\n\t\t{}\n\t);

Usage

Let’s use a basic example and how we can rename it. We have this object with some basic values.

const person = { name: \"Joe\", gender: \"Male\", age: 30 };

We want to rename name to firstName and age to lifeExperience.

const updated = renameKeys({ firstName: \"joe\", age: \"lifeExperience\" }, person);\n// {firstName: 'Joe', gender: 'Male', lifeExperience: 30}

The new person object will now have updated keys.

"}},{"author":"Anton Ödman","title":"How To Rename Multiple Keys In A JavaScript Object","date":"2020-03-10","description":"Renaming the keys in a Javascript (or JSON) object can be quite tricky, this is a simple trick to rename all the keys you want.","tags":["javascript"],"draft":false,"cover":"/covers/png/rename-keys.png","aliases":["/rename-keys"],"slug":"rename-keys","isIndexFile":false,"category":"javascript","component":{},"preview":{"html":"

Renaming Keys

const renameKeys = (keysMap, obj) =>\n\tObject.keys(obj).reduce(\n\t\t(acc, key) => ({\n\t\t\t...acc,\n\t\t\t...{ [keysMap[key] || key]: obj[key] },\n\t\t}),\n\t\t{}\n\t);

Usage

Let’s use a basic example and how we can rename it. We have this object with some basic values.

const person = { name: \"Joe\", gender: \"Male\", age: 30 };

We want to rename name to firstName and age to lifeExperience.

const updated = renameKeys({ firstName: \"joe\", age: \"lifeExperience\" }, person);\n// {firstName: 'Joe', gender: 'Male', lifeExperience: 30}

The new person object will now have updated keys.

","next":{"author":"Anton Ödman","title":"How To Delete Your Last Commit","date":"2020-03-10","description":"Sometimes things just go wrong, and thankfully we have Git to save some time. This is a short guide on some ways you can delete (or remove) or last commit","tags":["git"],"draft":false,"cover":"/covers/png/delete-commit.png","aliases":["/delete-commit"],"slug":"delete-commit","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

Remove your latest local commit and keep the changes you have made. The changes will still appear the same as before you staged them.

","text":"Remove your latest local commit and keep the changes you have made. The changes will still appear the same as before you staged them."},"readingTime":"1 min read","body":"

Remove a local commit

Remove your latest local commit and keep the changes you have made. The changes will still appear the same as before you staged them.

git reset --soft HEAD^

HEAD^ means go back one commit from where HEAD is now.

Remove a pushed commit

If you already have pushed your commit to the repo, the safest way to remove it is probably reverting it. Find the commit hash of the commit you want to revert and type the following.

git revert <commit-hash>

This will create a completely new commit that will undo all the changes in the selected commit. Just push it up to remote and you are good to go.

"},"previous":{"author":"Anton Ödman","title":"Using Async/Await Within an Angular Interceptor","date":"2020-03-09","description":"Async/Await is great, it makes the code much more readable and clean. It is, however, quite tricky to use it within an Angular interceptor. This is how you do it.","tags":["angular"],"draft":false,"cover":"/covers/png/interceptor-async-await.png","aliases":["/interceptor-async-await"],"slug":"interceptor-async-await","isIndexFile":false,"category":"angular","component":{},"preview":{"html":"

I like working with promises, and interceptors (and Angular) usually use observables. Async/await also makes promises so much easier to read and maintain, so that’s why I prefer working with it. It’s, however, a bit complicated to set up and work with, this is one way you can accomplish it.

","text":"I like working with promises, and interceptors (and Angular) usually use observables. Async/await also makes promises so much easier to read and maintain, so that’s why I prefer working with it. It’s, however, a bit complicated to set up and work with, this is one way you can accomplish it."},"readingTime":"5 min read","body":"

Angular interceptors with async/await

Scroll to the bottom for a TL;DR.

Full example

Like most other Angular function, we will use an RxJS operator called from, which turns a promise into an observable.

Let’s say this is our base interceptor.

import { HttpInterceptor } from \"@angular/common/http\";\nimport { Injectable } from \"@angular/core\";\n\n@Injectable()\nexport class ExampleInterceptor implements HttpInterceptor {\n\tintercept(\n\t\trequest: HttpRequest<any>,\n\t\tnext: HttpHandler\n\t): Observable<HttpEvent<any>> {\n\t\t// ...\n\t}\n}

In this example, we will try to catch a 401 error, and handle that asynchronously with async/await. For this, we will also use the catchError operator from RxJS.

return next.handle(request).pipe(\n\tcatchError((error) => {\n\t\tif (error instanceof HttpErrorResponse && error.status === 401) {\n\t\t\t// ...\n\t\t}\n\t})\n);

The most important logic, the one which lets us use promises. We need to create a new asynchronous method and call it with the from operator.

from(this.handle401Error(request, next));

The function might look something like this.

private async handle401Error(request: HttpRequest<any>, next: HttpHandler) {\n    const newRequest = await this.someService.asyncChange(request);\n    return next.handle(newRequest).toPromise();\n}

We need to use the toPromise() function to turn it into a promise, which the from operator will turn back to an observable.

This is the final code.

import { HttpInterceptor} from '@angular/common/http';\nimport { Injectable } from '@angular/core';\n\n@Injectable()\nexport class ExampleInterceptor implements HttpInterceptor {\n   intercept(request: HttpRequest<any>, next: HttpHandler):   Observable<HttpEvent<any>> {\n\n        return next.handle(request).pipe(catchError(error => {\n\n            if (error instanceof HttpErrorResponse && error.status === 401) {\n                from(this.handle401Error(request, next));\n            }\n        }))\n   }\n\n    private async handle401Error(request: HttpRequest<any>, next: HttpHandler) {\n        const newRequest = await await this.someService.asyncChange(request);\n        return next.handle(newRequest).toPromise();\n    }\n}

TL;DR

The code above might look a bit cluttered. The most important parts are these two:

if (error instanceof HttpErrorResponse && error.status === 401) {\n\tfrom(this.handle401Error(request, next));\n}

private async handle401Error(request: HttpRequest<any>, next: HttpHandler) {\n    const newRequest = await await this.someService.asyncChange(request);\n    return next.handle(newRequest).toPromise();\n}

"}},{"author":"Anton Ödman","title":"Using Async/Await Within an Angular Interceptor","date":"2020-03-09","description":"Async/Await is great, it makes the code much more readable and clean. It is, however, quite tricky to use it within an Angular interceptor. This is how you do it.","tags":["angular"],"draft":false,"cover":"/covers/png/interceptor-async-await.png","aliases":["/interceptor-async-await"],"slug":"interceptor-async-await","isIndexFile":false,"category":"angular","component":{},"preview":{"html":"

Angular interceptors with async/await

Scroll to the bottom for a TL;DR.

Full example

Like most other Angular function, we will use an RxJS operator called from, which turns a promise into an observable.

Let’s say this is our base interceptor.

import { HttpInterceptor } from \"@angular/common/http\";\nimport { Injectable } from \"@angular/core\";\n\n@Injectable()\nexport class ExampleInterceptor implements HttpInterceptor {\n\tintercept(\n\t\trequest: HttpRequest<any>,\n\t\tnext: HttpHandler\n\t): Observable<HttpEvent<any>> {\n\t\t// ...\n\t}\n}

In this example, we will try to catch a 401 error, and handle that asynchronously with async/await. For this, we will also use the catchError operator from RxJS.

return next.handle(request).pipe(\n\tcatchError((error) => {\n\t\tif (error instanceof HttpErrorResponse && error.status === 401) {\n\t\t\t// ...\n\t\t}\n\t})\n);

The most important logic, the one which lets us use promises. We need to create a new asynchronous method and call it with the from operator.

from(this.handle401Error(request, next));

The function might look something like this.

private async handle401Error(request: HttpRequest<any>, next: HttpHandler) {\n    const newRequest = await this.someService.asyncChange(request);\n    return next.handle(newRequest).toPromise();\n}

We need to use the toPromise() function to turn it into a promise, which the from operator will turn back to an observable.

This is the final code.

import { HttpInterceptor} from '@angular/common/http';\nimport { Injectable } from '@angular/core';\n\n@Injectable()\nexport class ExampleInterceptor implements HttpInterceptor {\n   intercept(request: HttpRequest<any>, next: HttpHandler):   Observable<HttpEvent<any>> {\n\n        return next.handle(request).pipe(catchError(error => {\n\n            if (error instanceof HttpErrorResponse && error.status === 401) {\n                from(this.handle401Error(request, next));\n            }\n        }))\n   }\n\n    private async handle401Error(request: HttpRequest<any>, next: HttpHandler) {\n        const newRequest = await await this.someService.asyncChange(request);\n        return next.handle(newRequest).toPromise();\n    }\n}

TL;DR

The code above might look a bit cluttered. The most important parts are these two:

if (error instanceof HttpErrorResponse && error.status === 401) {\n\tfrom(this.handle401Error(request, next));\n}

private async handle401Error(request: HttpRequest<any>, next: HttpHandler) {\n    const newRequest = await await this.someService.asyncChange(request);\n    return next.handle(newRequest).toPromise();\n}

","next":{"author":"Anton Ödman","title":"How To Rename Multiple Keys In A JavaScript Object","date":"2020-03-10","description":"Renaming the keys in a Javascript (or JSON) object can be quite tricky, this is a simple trick to rename all the keys you want.","tags":["javascript"],"draft":false,"cover":"/covers/png/rename-keys.png","aliases":["/rename-keys"],"slug":"rename-keys","isIndexFile":false,"category":"javascript","component":{},"preview":{"html":"

Renaming Keys

const renameKeys = (keysMap, obj) =>\n\tObject.keys(obj).reduce(\n\t\t(acc, key) => ({\n\t\t\t...acc,\n\t\t\t...{ [keysMap[key] || key]: obj[key] },\n\t\t}),\n\t\t{}\n\t);

Usage

Let’s use a basic example and how we can rename it. We have this object with some basic values.

const person = { name: \"Joe\", gender: \"Male\", age: 30 };

We want to rename name to firstName and age to lifeExperience.

const updated = renameKeys({ firstName: \"joe\", age: \"lifeExperience\" }, person);\n// {firstName: 'Joe', gender: 'Male', lifeExperience: 30}

The new person object will now have updated keys.

"},"previous":{"author":"Anton Ödman","title":"Angular Interceptors - Requests And Responses","date":"2020-03-09","description":"Angular interceptors are great when it comes to handling outgoing HTTP requests and incoming HTTP responses, this is a short guide on how to separate the two, and how to handle each type","tags":["angular"],"draft":false,"cover":"/covers/png/interceptor-requests.png","aliases":["/interceptor-requests"],"slug":"interceptor-requests","isIndexFile":false,"category":"angular","component":{},"preview":{"html":"

Interceptors are great to handle your HTTP events, they are very similar to middleware. You hand them an HTTP request or response, they modify it, and then pass it on. They are often used to add custom headers or tokens, log HTTP activity or format the body of the event.

","text":"Interceptors are great to handle your HTTP events, they are very similar to middleware. You hand them an HTTP request or response, they modify it, and then pass it on. They are often used to add custom headers or tokens, log HTTP activity or format the body of the event."},"readingTime":"3 min read","body":"

Interceptors

There is a slight difference in how to handle request and responses with an interceptor, so without further ado:

Requests

Requests are probably the “easiest” to handle, as they are the standard. They are all the outgoing HTTP events you’ll send. The type is HttpRequest.

import { HttpInterceptor } from \"@angular/common/http\";\nimport { Injectable } from \"@angular/core\";\n\n@Injectable()\nexport class ExampleInterceptor implements HttpInterceptor {\n\tintercept(\n\t\trequest: HttpRequest<any>,\n\t\tnext: HttpHandler\n\t): Observable<HttpEvent<any>> {\n\t\t// HttpRequests logic goes here\n\t}\n}

All events that pass the intercept method will be requests. Logic regarding requests will be written here.

Responses

To handle responses, you need to use the HttpHandler to convert the HttpRequest to a stream of HttpEvents, some of them are most likely an HttpResponse. For this, we will use the next parameter.

import { HttpInterceptor } from \"@angular/common/http\";\nimport { Injectable } from \"@angular/core\";\n\n@Injectable()\nexport class ExampleInterceptor implements HttpInterceptor {\n\tintercept(\n\t\trequest: HttpRequest<any>,\n\t\tnext: HttpHandler\n\t): Observable<HttpEvent<any>> {\n\t\t// HttpRequests logic goes here\n\n\t\treturn next.handle(request).pipe(\n\t\t\tmap((event: HttpEvent<any>) => {\n\t\t\t\tif (event instanceof HttpResponse) {\n\t\t\t\t\t// HttpResponse logic goes here\n\t\t\t\t}\n\t\t\t})\n\t\t);\n\t}\n}

As you can see, we need to use RxJS to access the response, with the map operator. We look through each element to find an instance of the HttpResponse, and then modify it.

"}},{"author":"Anton Ödman","title":"Angular Interceptors - Requests And Responses","date":"2020-03-09","description":"Angular interceptors are great when it comes to handling outgoing HTTP requests and incoming HTTP responses, this is a short guide on how to separate the two, and how to handle each type","tags":["angular"],"draft":false,"cover":"/covers/png/interceptor-requests.png","aliases":["/interceptor-requests"],"slug":"interceptor-requests","isIndexFile":false,"category":"angular","component":{},"preview":{"html":"

Interceptors

There is a slight difference in how to handle request and responses with an interceptor, so without further ado:

Requests

Requests are probably the “easiest” to handle, as they are the standard. They are all the outgoing HTTP events you’ll send. The type is HttpRequest.

import { HttpInterceptor } from \"@angular/common/http\";\nimport { Injectable } from \"@angular/core\";\n\n@Injectable()\nexport class ExampleInterceptor implements HttpInterceptor {\n\tintercept(\n\t\trequest: HttpRequest<any>,\n\t\tnext: HttpHandler\n\t): Observable<HttpEvent<any>> {\n\t\t// HttpRequests logic goes here\n\t}\n}

All events that pass the intercept method will be requests. Logic regarding requests will be written here.

Responses

import { HttpInterceptor } from \"@angular/common/http\";\nimport { Injectable } from \"@angular/core\";\n\n@Injectable()\nexport class ExampleInterceptor implements HttpInterceptor {\n\tintercept(\n\t\trequest: HttpRequest<any>,\n\t\tnext: HttpHandler\n\t): Observable<HttpEvent<any>> {\n\t\t// HttpRequests logic goes here\n\n\t\treturn next.handle(request).pipe(\n\t\t\tmap((event: HttpEvent<any>) => {\n\t\t\t\tif (event instanceof HttpResponse) {\n\t\t\t\t\t// HttpResponse logic goes here\n\t\t\t\t}\n\t\t\t})\n\t\t);\n\t}\n}

As you can see, we need to use RxJS to access the response, with the map operator. We look through each element to find an instance of the HttpResponse, and then modify it.

","next":{"author":"Anton Ödman","title":"Using Async/Await Within an Angular Interceptor","date":"2020-03-09","description":"Async/Await is great, it makes the code much more readable and clean. It is, however, quite tricky to use it within an Angular interceptor. This is how you do it.","tags":["angular"],"draft":false,"cover":"/covers/png/interceptor-async-await.png","aliases":["/interceptor-async-await"],"slug":"interceptor-async-await","isIndexFile":false,"category":"angular","component":{},"preview":{"html":"

Angular interceptors with async/await

Scroll to the bottom for a TL;DR.

Full example

Like most other Angular function, we will use an RxJS operator called from, which turns a promise into an observable.

Let’s say this is our base interceptor.

import { HttpInterceptor } from \"@angular/common/http\";\nimport { Injectable } from \"@angular/core\";\n\n@Injectable()\nexport class ExampleInterceptor implements HttpInterceptor {\n\tintercept(\n\t\trequest: HttpRequest<any>,\n\t\tnext: HttpHandler\n\t): Observable<HttpEvent<any>> {\n\t\t// ...\n\t}\n}

In this example, we will try to catch a 401 error, and handle that asynchronously with async/await. For this, we will also use the catchError operator from RxJS.

return next.handle(request).pipe(\n\tcatchError((error) => {\n\t\tif (error instanceof HttpErrorResponse && error.status === 401) {\n\t\t\t// ...\n\t\t}\n\t})\n);

The most important logic, the one which lets us use promises. We need to create a new asynchronous method and call it with the from operator.

from(this.handle401Error(request, next));

The function might look something like this.

private async handle401Error(request: HttpRequest<any>, next: HttpHandler) {\n    const newRequest = await this.someService.asyncChange(request);\n    return next.handle(newRequest).toPromise();\n}

We need to use the toPromise() function to turn it into a promise, which the from operator will turn back to an observable.

This is the final code.

import { HttpInterceptor} from '@angular/common/http';\nimport { Injectable } from '@angular/core';\n\n@Injectable()\nexport class ExampleInterceptor implements HttpInterceptor {\n   intercept(request: HttpRequest<any>, next: HttpHandler):   Observable<HttpEvent<any>> {\n\n        return next.handle(request).pipe(catchError(error => {\n\n            if (error instanceof HttpErrorResponse && error.status === 401) {\n                from(this.handle401Error(request, next));\n            }\n        }))\n   }\n\n    private async handle401Error(request: HttpRequest<any>, next: HttpHandler) {\n        const newRequest = await await this.someService.asyncChange(request);\n        return next.handle(newRequest).toPromise();\n    }\n}

TL;DR

The code above might look a bit cluttered. The most important parts are these two:

if (error instanceof HttpErrorResponse && error.status === 401) {\n\tfrom(this.handle401Error(request, next));\n}

private async handle401Error(request: HttpRequest<any>, next: HttpHandler) {\n    const newRequest = await await this.someService.asyncChange(request);\n    return next.handle(newRequest).toPromise();\n}

"},"previous":{"author":"Anton Ödman","title":"How To Center With CSS","date":"2020-03-09","description":"Centering with CSS is actually more difficult than one might think. Here are some different ways to center your elements within a container with CSS and HTML","tags":["css"],"draft":false,"cover":"/covers/png/center-css.png","aliases":["/center-css"],"slug":"center-css","isIndexFile":false,"category":"css","component":{},"preview":{"html":"

The basic HTML should look like this.

","text":"The basic HTML should look like this."},"readingTime":"3 min read","body":"

HTML

The basic HTML should look like this.

<div class=\"parent\">\n\t<div class=\"child\"></div>\n</div>

Below are many different methods to center your content with CSS.

Flexbox

.parent {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}

Position

.parent {\n\tposition: relative;\n}\n.child {\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%);\n}

Grid

.parent {\n\tdisplay: grid;\n\tjustify-content: center;\n\talign-items: center;\n}

Table

.parent {\n\tdisplay: table;\n\twidth: 100px;\n\theight: 100px;\n}\n.child {\n\tdisplay: table-cell;\n\tvertical-align: middle;\n\twidth: 50px;\n\theight: 50px;\n\ttext-align: center;\n}

Text align

.parent {\n\tdisplay: block;\n\ttext-align: center;\n}\n.child {\n\tdisplay: inline-block; //key point\n}

Auto margin

.child {\n\twidth: 50%;\n\tmargin: 0 auto;\n}

"}},{"author":"Anton Ödman","title":"How To Center With CSS","date":"2020-03-09","description":"Centering with CSS is actually more difficult than one might think. Here are some different ways to center your elements within a container with CSS and HTML","tags":["css"],"draft":false,"cover":"/covers/png/center-css.png","aliases":["/center-css"],"slug":"center-css","isIndexFile":false,"category":"css","component":{},"preview":{"html":"

The basic HTML should look like this.

","text":"The basic HTML should look like this."},"readingTime":"3 min read","body":"

HTML

The basic HTML should look like this.

<div class=\"parent\">\n\t<div class=\"child\"></div>\n</div>

Below are many different methods to center your content with CSS.

Flexbox

.parent {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}

Position

.parent {\n\tposition: relative;\n}\n.child {\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%);\n}

Grid

.parent {\n\tdisplay: grid;\n\tjustify-content: center;\n\talign-items: center;\n}

Table

.parent {\n\tdisplay: table;\n\twidth: 100px;\n\theight: 100px;\n}\n.child {\n\tdisplay: table-cell;\n\tvertical-align: middle;\n\twidth: 50px;\n\theight: 50px;\n\ttext-align: center;\n}

Text align

.parent {\n\tdisplay: block;\n\ttext-align: center;\n}\n.child {\n\tdisplay: inline-block; //key point\n}

Auto margin

.child {\n\twidth: 50%;\n\tmargin: 0 auto;\n}

","next":{"author":"Anton Ödman","title":"Angular Interceptors - Requests And Responses","date":"2020-03-09","description":"Angular interceptors are great when it comes to handling outgoing HTTP requests and incoming HTTP responses, this is a short guide on how to separate the two, and how to handle each type","tags":["angular"],"draft":false,"cover":"/covers/png/interceptor-requests.png","aliases":["/interceptor-requests"],"slug":"interceptor-requests","isIndexFile":false,"category":"angular","component":{},"preview":{"html":"

Interceptors

There is a slight difference in how to handle request and responses with an interceptor, so without further ado:

Requests

Requests are probably the “easiest” to handle, as they are the standard. They are all the outgoing HTTP events you’ll send. The type is HttpRequest.

import { HttpInterceptor } from \"@angular/common/http\";\nimport { Injectable } from \"@angular/core\";\n\n@Injectable()\nexport class ExampleInterceptor implements HttpInterceptor {\n\tintercept(\n\t\trequest: HttpRequest<any>,\n\t\tnext: HttpHandler\n\t): Observable<HttpEvent<any>> {\n\t\t// HttpRequests logic goes here\n\t}\n}

All events that pass the intercept method will be requests. Logic regarding requests will be written here.

Responses

import { HttpInterceptor } from \"@angular/common/http\";\nimport { Injectable } from \"@angular/core\";\n\n@Injectable()\nexport class ExampleInterceptor implements HttpInterceptor {\n\tintercept(\n\t\trequest: HttpRequest<any>,\n\t\tnext: HttpHandler\n\t): Observable<HttpEvent<any>> {\n\t\t// HttpRequests logic goes here\n\n\t\treturn next.handle(request).pipe(\n\t\t\tmap((event: HttpEvent<any>) => {\n\t\t\t\tif (event instanceof HttpResponse) {\n\t\t\t\t\t// HttpResponse logic goes here\n\t\t\t\t}\n\t\t\t})\n\t\t);\n\t}\n}

As you can see, we need to use RxJS to access the response, with the map operator. We look through each element to find an instance of the HttpResponse, and then modify it.

"},"previous":{"author":"Anton Ödman","title":"Add Meta Description To Your Hugo Posts For SEO","date":"2020-03-09","description":"SEO is important if you want people to find your articles on Google. This is a simple way to make sure you have a custom meta description for each article you publish.","tags":["hugo"],"draft":false,"cover":"/covers/png/meta-description.png","aliases":["/meta-description"],"slug":"meta-description","isIndexFile":false,"category":"hugo","component":{},"preview":{"html":"

The meta description is probably the hardest part of writing a good article. It’s probably the most important, as it is the only content they will come in contact with before opening your article.

","text":"The meta description is probably the hardest part of writing a good article. It’s probably the most important, as it is the only content they will come in contact with before opening your article."},"readingTime":"2 min read","body":"

Meta description

The meta description is probably the hardest part of writing a good article. It’s probably the most important, as it is the only content they will come in contact with before opening your article.

$\"meta$

Adding a custom meta description to your posts

Let’s start by adding a custom site-wide summary that will show if you don’t specify anything for your posts. This will go into config.toml.

[params]\n    description = \"This is the fallback description if nothing is specified\"

Let’s also add a description for each new article you write, it should look like this

author: \"...\"\ntitle: \"...\"\ndate: ...\ndescription: \"Post specific meta description\"

The last part is adding the content to head. This can be done by either modifying the theme files or overwriting the file ourselves. The last one is probably the best as we don’t have to mess with the theme files.

Copy the file

themes/your-theme/layouts/partials/head.html

to the following path

layouts/partials/head.html

This will create a file that will override the theme file, which you can modify without affecting the theme files. Add the following line to include the meta description or the site-wide description if nothing else is specified.

<meta\n\tname=\"description\"\n\tcontent=\"{{ if .Params.description }}{{ .Params.description }}{{ else if .Site.Params.Description }}{{ .Site.Params.Description }}{{ end }}\"\n/>

"}},{"author":"Anton Ödman","title":"Add Meta Description To Your Hugo Posts For SEO","date":"2020-03-09","description":"SEO is important if you want people to find your articles on Google. This is a simple way to make sure you have a custom meta description for each article you publish.","tags":["hugo"],"draft":false,"cover":"/covers/png/meta-description.png","aliases":["/meta-description"],"slug":"meta-description","isIndexFile":false,"category":"hugo","component":{},"preview":{"html":"

The meta description is probably the hardest part of writing a good article. It’s probably the most important, as it is the only content they will come in contact with before opening your article.

Meta description

The meta description is probably the hardest part of writing a good article. It’s probably the most important, as it is the only content they will come in contact with before opening your article.

$\"meta$

Adding a custom meta description to your posts

Let’s start by adding a custom site-wide summary that will show if you don’t specify anything for your posts. This will go into config.toml.

[params]\n    description = \"This is the fallback description if nothing is specified\"

Let’s also add a description for each new article you write, it should look like this

author: \"...\"\ntitle: \"...\"\ndate: ...\ndescription: \"Post specific meta description\"

Copy the file

themes/your-theme/layouts/partials/head.html

to the following path

layouts/partials/head.html

<meta\n\tname=\"description\"\n\tcontent=\"{{ if .Params.description }}{{ .Params.description }}{{ else if .Site.Params.Description }}{{ .Site.Params.Description }}{{ end }}\"\n/>

","next":{"author":"Anton Ödman","title":"How To Center With CSS","date":"2020-03-09","description":"Centering with CSS is actually more difficult than one might think. Here are some different ways to center your elements within a container with CSS and HTML","tags":["css"],"draft":false,"cover":"/covers/png/center-css.png","aliases":["/center-css"],"slug":"center-css","isIndexFile":false,"category":"css","component":{},"preview":{"html":"

The basic HTML should look like this.

","text":"The basic HTML should look like this."},"readingTime":"3 min read","body":"

HTML

The basic HTML should look like this.

<div class=\"parent\">\n\t<div class=\"child\"></div>\n</div>

Below are many different methods to center your content with CSS.

Flexbox

.parent {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}

Position

.parent {\n\tposition: relative;\n}\n.child {\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%);\n}

Grid

.parent {\n\tdisplay: grid;\n\tjustify-content: center;\n\talign-items: center;\n}

Table

.parent {\n\tdisplay: table;\n\twidth: 100px;\n\theight: 100px;\n}\n.child {\n\tdisplay: table-cell;\n\tvertical-align: middle;\n\twidth: 50px;\n\theight: 50px;\n\ttext-align: center;\n}

Text align

.parent {\n\tdisplay: block;\n\ttext-align: center;\n}\n.child {\n\tdisplay: inline-block; //key point\n}

Auto margin

.child {\n\twidth: 50%;\n\tmargin: 0 auto;\n}

"},"previous":{"author":"Anton Ödman","title":"Auto Fill With CSS Grid To Adjust For Mobile","date":"2020-03-08","description":"CSS Grid is a great tool for styling your web pages. This neat trick will let you adjust your grids with a minimum size so it will look better on phones.","tags":["css"],"draft":false,"cover":"/covers/png/auto-fill.png","aliases":["/auto-fill"],"slug":"auto-fill","isIndexFile":false,"category":"css","component":{},"preview":{"html":"

CSS Grid is quite simple, you just declare display: grid in a parent container and then declare which pattern you want. Usually with grid-template-columns or grid-template-rows. You can specify the values in any unit possible, however, if you need to resize it based on size, I usually do like this.

","text":"CSS Grid is quite simple, you just declare display: grid in a parent container and then declare which pattern you want. Usually with grid-template-columns or grid-template-rows. You can specify the values in any unit possible, however, if you need to resize it based on size, I usually do like this."},"readingTime":"1 min read","body":"

CSS Grid

.container {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n}

In this case, the minimum with is 300px, meaning no container will be smaller than that, else, all elements will take up 1fr, or 1 fraction of the space.

In my case, this is on a bigger screen:\n $\"Big$

And this is on a phone screen:\n $\"Phone$

"}},{"author":"Anton Ödman","title":"Auto Fill With CSS Grid To Adjust For Mobile","date":"2020-03-08","description":"CSS Grid is a great tool for styling your web pages. This neat trick will let you adjust your grids with a minimum size so it will look better on phones.","tags":["css"],"draft":false,"cover":"/covers/png/auto-fill.png","aliases":["/auto-fill"],"slug":"auto-fill","isIndexFile":false,"category":"css","component":{},"preview":{"html":"

CSS Grid

.container {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n}

In this case, the minimum with is 300px, meaning no container will be smaller than that, else, all elements will take up 1fr, or 1 fraction of the space.

In my case, this is on a bigger screen:\n $\"Big$

And this is on a phone screen:\n $\"Phone$

","next":{"author":"Anton Ödman","title":"Add Meta Description To Your Hugo Posts For SEO","date":"2020-03-09","description":"SEO is important if you want people to find your articles on Google. This is a simple way to make sure you have a custom meta description for each article you publish.","tags":["hugo"],"draft":false,"cover":"/covers/png/meta-description.png","aliases":["/meta-description"],"slug":"meta-description","isIndexFile":false,"category":"hugo","component":{},"preview":{"html":"

The meta description is probably the hardest part of writing a good article. It’s probably the most important, as it is the only content they will come in contact with before opening your article.

Meta description

The meta description is probably the hardest part of writing a good article. It’s probably the most important, as it is the only content they will come in contact with before opening your article.

$\"meta$

Adding a custom meta description to your posts

Let’s start by adding a custom site-wide summary that will show if you don’t specify anything for your posts. This will go into config.toml.

[params]\n    description = \"This is the fallback description if nothing is specified\"

Let’s also add a description for each new article you write, it should look like this

author: \"...\"\ntitle: \"...\"\ndate: ...\ndescription: \"Post specific meta description\"

Copy the file

themes/your-theme/layouts/partials/head.html

to the following path

layouts/partials/head.html

<meta\n\tname=\"description\"\n\tcontent=\"{{ if .Params.description }}{{ .Params.description }}{{ else if .Site.Params.Description }}{{ .Site.Params.Description }}{{ end }}\"\n/>

"},"previous":{"author":"Anton Ödman","title":"Add Custom CSS Or Javascript To Your Hugo Site","date":"2020-03-08","description":"Hugo themes are great - some do, however, not include custom CSS and JS from start. This is a simple guide on how to add it to your own Hugo site.","tags":["hugo"],"draft":false,"cover":"/covers/png/custom-css.png","aliases":["/custom-css"],"slug":"custom-css","isIndexFile":false,"category":"hugo","component":{},"preview":{"html":"

Adding custom CSS or Javascript to a theme is quite simple, you don’t even need to change the theme files.

","text":"Adding custom CSS or Javascript to a theme is quite simple, you don’t even need to change the theme files."},"readingTime":"3 min read","body":"

Adding custom CSS or Javascript to a theme is quite simple, you don’t even need to change the theme files.

1. Overwrite the `head.html` file

It’s best to make changes to your own Hugo repo, without touching the theme files. Therefore we need to overwrite the layout files.

In this case, the file we want to edit is located in the following path (within the theme repo).

hugo -> themes -> actual-theme -> layouts -> partials -> head.html

To make a local copy of it, just create a new file with the same name in the following folder and copy the content.

layouts -> partials -> head.html

2. Add path the files in the `config.toml` file

We want to specify which files we want within the config.toml file to make it easy to add new files. We just need to add the following lines:

custom_css = [\"css/custom.css\"]\ncustom_js = [\"js/custom.js\"]

This will point to a css and a js file that we will create soon.

3. Add to `head.html`

Time for the actual logic, we just place this line of code somewhere within the head.html.

// css\n{{ range .Site.Params.custom_css -}}\n    <link rel=\"stylesheet\" href=\"{{ . | absURL }}\">\n{{- end }}\n\n// javascript\n{{ range .Site.Params.custom_js -}}\n    <script type=\"text/javascript\" src=\"{{ . | absURL }}\"></script>\n{{- end }}

For each file we have declared in our config.toml, it will add a link to that in our head.

4. Add the CSS and Javascript files

The files need to be added to the static folder within our Hugo repo. CSS files in the css folder, and Javascript files in the js folder.

$\"static$

"}},{"author":"Anton Ödman","title":"Add Custom CSS Or Javascript To Your Hugo Site","date":"2020-03-08","description":"Hugo themes are great - some do, however, not include custom CSS and JS from start. This is a simple guide on how to add it to your own Hugo site.","tags":["hugo"],"draft":false,"cover":"/covers/png/custom-css.png","aliases":["/custom-css"],"slug":"custom-css","isIndexFile":false,"category":"hugo","component":{},"preview":{"html":"

Adding custom CSS or Javascript to a theme is quite simple, you don’t even need to change the theme files.

","text":"Adding custom CSS or Javascript to a theme is quite simple, you don’t even need to change the theme files."},"readingTime":"3 min read","body":"

Adding custom CSS or Javascript to a theme is quite simple, you don’t even need to change the theme files.

1. Overwrite the `head.html` file

It’s best to make changes to your own Hugo repo, without touching the theme files. Therefore we need to overwrite the layout files.

In this case, the file we want to edit is located in the following path (within the theme repo).

hugo -> themes -> actual-theme -> layouts -> partials -> head.html

To make a local copy of it, just create a new file with the same name in the following folder and copy the content.

layouts -> partials -> head.html

2. Add path the files in the `config.toml` file

We want to specify which files we want within the config.toml file to make it easy to add new files. We just need to add the following lines:

custom_css = [\"css/custom.css\"]\ncustom_js = [\"js/custom.js\"]

This will point to a css and a js file that we will create soon.

3. Add to `head.html`

Time for the actual logic, we just place this line of code somewhere within the head.html.

// css\n{{ range .Site.Params.custom_css -}}\n    <link rel=\"stylesheet\" href=\"{{ . | absURL }}\">\n{{- end }}\n\n// javascript\n{{ range .Site.Params.custom_js -}}\n    <script type=\"text/javascript\" src=\"{{ . | absURL }}\"></script>\n{{- end }}

For each file we have declared in our config.toml, it will add a link to that in our head.

4. Add the CSS and Javascript files

The files need to be added to the static folder within our Hugo repo. CSS files in the css folder, and Javascript files in the js folder.

$\"static$

","next":{"author":"Anton Ödman","title":"Auto Fill With CSS Grid To Adjust For Mobile","date":"2020-03-08","description":"CSS Grid is a great tool for styling your web pages. This neat trick will let you adjust your grids with a minimum size so it will look better on phones.","tags":["css"],"draft":false,"cover":"/covers/png/auto-fill.png","aliases":["/auto-fill"],"slug":"auto-fill","isIndexFile":false,"category":"css","component":{},"preview":{"html":"

CSS Grid

.container {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n}

In this case, the minimum with is 300px, meaning no container will be smaller than that, else, all elements will take up 1fr, or 1 fraction of the space.

In my case, this is on a bigger screen:\n $\"Big$

And this is on a phone screen:\n $\"Phone$

"},"previous":{"author":"Anton Ödman","title":"How To Use Conditional Classes in Angular","date":"2020-03-06","description":"Conditional classes are great. Use one CSS class if one condition is fulfilled, or another class if not. This is a quick guide on how to do that in Angular.","tags":["angular"],"draft":false,"cover":"/covers/png/conditional-classes.png","aliases":["/conditional-classes"],"color":"angular","slug":"conditional-classes","isIndexFile":false,"category":"angular","component":{},"preview":{"html":"

Conditional classes have been possible for a very long time in Angular with the ngClass syntax. There are several different ways to use it.

","text":"Conditional classes have been possible for a very long time in Angular with the ngClass syntax. There are several different ways to use it."},"readingTime":"1 min read","body":"

Conditional classes

Conditional classes have been possible for a very long time in Angular with the ngClass syntax. There are several different ways to use it.

First version

[class.css-class]=\"true\"

Second version

// single\n[ngClass] = \"{'css-class': true}\"\n\n// multiple same condition\n[ngClass] = \"{'css-class css-class2': true}\"\n\n// multiple different conditions\n[ngClass] = \"{'css-class': true, 'css-class2': false }\";

Third version

[ngClass] = \"(true)?'css-class1':'css-class2'\";

"}},{"author":"Anton Ödman","title":"How To Use Conditional Classes in Angular","date":"2020-03-06","description":"Conditional classes are great. Use one CSS class if one condition is fulfilled, or another class if not. This is a quick guide on how to do that in Angular.","tags":["angular"],"draft":false,"cover":"/covers/png/conditional-classes.png","aliases":["/conditional-classes"],"color":"angular","slug":"conditional-classes","isIndexFile":false,"category":"angular","component":{},"preview":{"html":"

Conditional classes have been possible for a very long time in Angular with the ngClass syntax. There are several different ways to use it.

","text":"Conditional classes have been possible for a very long time in Angular with the ngClass syntax. There are several different ways to use it."},"readingTime":"1 min read","body":"

Conditional classes

Conditional classes have been possible for a very long time in Angular with the ngClass syntax. There are several different ways to use it.

First version

[class.css-class]=\"true\"

Second version

// single\n[ngClass] = \"{'css-class': true}\"\n\n// multiple same condition\n[ngClass] = \"{'css-class css-class2': true}\"\n\n// multiple different conditions\n[ngClass] = \"{'css-class': true, 'css-class2': false }\";

Third version

[ngClass] = \"(true)?'css-class1':'css-class2'\";

","next":{"author":"Anton Ödman","title":"Add Custom CSS Or Javascript To Your Hugo Site","date":"2020-03-08","description":"Hugo themes are great - some do, however, not include custom CSS and JS from start. This is a simple guide on how to add it to your own Hugo site.","tags":["hugo"],"draft":false,"cover":"/covers/png/custom-css.png","aliases":["/custom-css"],"slug":"custom-css","isIndexFile":false,"category":"hugo","component":{},"preview":{"html":"

Adding custom CSS or Javascript to a theme is quite simple, you don’t even need to change the theme files.

","text":"Adding custom CSS or Javascript to a theme is quite simple, you don’t even need to change the theme files."},"readingTime":"3 min read","body":"

Adding custom CSS or Javascript to a theme is quite simple, you don’t even need to change the theme files.

1. Overwrite the `head.html` file

It’s best to make changes to your own Hugo repo, without touching the theme files. Therefore we need to overwrite the layout files.

In this case, the file we want to edit is located in the following path (within the theme repo).

hugo -> themes -> actual-theme -> layouts -> partials -> head.html

To make a local copy of it, just create a new file with the same name in the following folder and copy the content.

layouts -> partials -> head.html

2. Add path the files in the `config.toml` file

We want to specify which files we want within the config.toml file to make it easy to add new files. We just need to add the following lines:

custom_css = [\"css/custom.css\"]\ncustom_js = [\"js/custom.js\"]

This will point to a css and a js file that we will create soon.

3. Add to `head.html`

Time for the actual logic, we just place this line of code somewhere within the head.html.

// css\n{{ range .Site.Params.custom_css -}}\n    <link rel=\"stylesheet\" href=\"{{ . | absURL }}\">\n{{- end }}\n\n// javascript\n{{ range .Site.Params.custom_js -}}\n    <script type=\"text/javascript\" src=\"{{ . | absURL }}\"></script>\n{{- end }}

For each file we have declared in our config.toml, it will add a link to that in our head.

4. Add the CSS and Javascript files

The files need to be added to the static folder within our Hugo repo. CSS files in the css folder, and Javascript files in the js folder.

$\"static$

"},"previous":{"author":"Anton Ödman","title":"Deploy Any SPA + Express App to Heroku For Free","date":"2020-03-06","description":"When you have created a full-stack web application (with React, Vue or Angular) and Express, it is quite difficult to host it for free. This guide will help you do that on Heroku","tags":["hosting"],"draft":false,"cover":"/covers/png/deploy-spa-express-heroku.png","aliases":["/deploy-spa-express-heroku"],"slug":"deploy-spa-express-heroku","isIndexFile":false,"category":"hosting","component":{},"preview":{"html":"

Whichever framework you use; React, Vue or Angular, with an Express backend, this guide will cover how you deploy your site for free to Heroku. It was mainly written with React in mind, so “Deploying React + Express to Heroku” would be a more fitting name, but the same principles do apply to the other frameworks as well, as most logic is created within the Express file and package.json file.

","text":"Whichever framework you use; React, Vue or Angular, with an Express backend, this guide will cover how you deploy your site for free to Heroku. It was mainly written with React in mind, so “Deploying React + Express to Heroku” would be a more fitting name, but the same principles do apply to the other frameworks as well, as most logic is created within the Express file and package.json file."},"readingTime":"3 min read","body":"

Information

Getting started

This guide is divided into 5 steps:

1. Add endpoint for `index.html` file in Express

Create a wildcard path in Express, pointing all GET-requests to your index.html file. Be sure that it points to the correct folder, like dist, or build.

app.get(\"*\", (req, res) => {\n\tres.sendFile(path.join(__dirname, \"../../dist/index.html\"));\n});

2. Serve from your correct folder

Include this line to serve from the correct folder.

app.use(express.static(\"dist\"));

3. Add proxy to localhost

If your server, for example, listens to port 5000, make the proxy listen to that port.

Express

server.listen(process.env.PORT || 5000, () => {\n\tconsole.log(`Server running on port ${process.env.PORT || 5000}`);\n});

package.json

\"proxy\": \"http://localhost:5000\"

4. Add scripts to `package.json`

Heroku runs some script before deploying your application. The heroku-postbuild runs before anything else, installing all necessary requirements. The build builds the actual application. The start script is what launches the application.

Be aware that your scripts may look different, the naming is the important part.

\"scripts\": {\n        \"build\": \"webpack --mode production\",\n        \"start\": \"node src/server/index.js\",\n        \"heroku-postbuild\": \"npm install && npm run build\"

5. Deploying to Heroku

Now to the last part, deploying your application to Heroku. We will do it using their CLI which you can read about here.

# remove git build (optional)\n$ rm -rf .git\n\n# make new git config\n$ git init\n$ git add .\n$ git commit -m \"Initial commit\"\n\n# create heroku server\n$ heroku create\n\n# add environment variables (optional)\n$ heroku config:set VAR1=variable1\n\n# push to server\n$ git push heroku master

If you already have a server and need to add that remote instead of creating a new one:

$ heroku git:remote -a <name-of-server>

"}},{"author":"Anton Ödman","title":"Deploy Any SPA + Express App to Heroku For Free","date":"2020-03-06","description":"When you have created a full-stack web application (with React, Vue or Angular) and Express, it is quite difficult to host it for free. This guide will help you do that on Heroku","tags":["hosting"],"draft":false,"cover":"/covers/png/deploy-spa-express-heroku.png","aliases":["/deploy-spa-express-heroku"],"slug":"deploy-spa-express-heroku","isIndexFile":false,"category":"hosting","component":{},"preview":{"html":"

Information

Getting started

This guide is divided into 5 steps:

1. Add endpoint for `index.html` file in Express

Create a wildcard path in Express, pointing all GET-requests to your index.html file. Be sure that it points to the correct folder, like dist, or build.

app.get(\"*\", (req, res) => {\n\tres.sendFile(path.join(__dirname, \"../../dist/index.html\"));\n});

2. Serve from your correct folder

Include this line to serve from the correct folder.

app.use(express.static(\"dist\"));

3. Add proxy to localhost

If your server, for example, listens to port 5000, make the proxy listen to that port.

Express

server.listen(process.env.PORT || 5000, () => {\n\tconsole.log(`Server running on port ${process.env.PORT || 5000}`);\n});

package.json

\"proxy\": \"http://localhost:5000\"

4. Add scripts to `package.json`

Be aware that your scripts may look different, the naming is the important part.

\"scripts\": {\n        \"build\": \"webpack --mode production\",\n        \"start\": \"node src/server/index.js\",\n        \"heroku-postbuild\": \"npm install && npm run build\"

5. Deploying to Heroku

Now to the last part, deploying your application to Heroku. We will do it using their CLI which you can read about here.

# remove git build (optional)\n$ rm -rf .git\n\n# make new git config\n$ git init\n$ git add .\n$ git commit -m \"Initial commit\"\n\n# create heroku server\n$ heroku create\n\n# add environment variables (optional)\n$ heroku config:set VAR1=variable1\n\n# push to server\n$ git push heroku master

If you already have a server and need to add that remote instead of creating a new one:

$ heroku git:remote -a <name-of-server>

","next":{"author":"Anton Ödman","title":"How To Use Conditional Classes in Angular","date":"2020-03-06","description":"Conditional classes are great. Use one CSS class if one condition is fulfilled, or another class if not. This is a quick guide on how to do that in Angular.","tags":["angular"],"draft":false,"cover":"/covers/png/conditional-classes.png","aliases":["/conditional-classes"],"color":"angular","slug":"conditional-classes","isIndexFile":false,"category":"angular","component":{},"preview":{"html":"

Conditional classes have been possible for a very long time in Angular with the ngClass syntax. There are several different ways to use it.

","text":"Conditional classes have been possible for a very long time in Angular with the ngClass syntax. There are several different ways to use it."},"readingTime":"1 min read","body":"

Conditional classes

Conditional classes have been possible for a very long time in Angular with the ngClass syntax. There are several different ways to use it.

First version

[class.css-class]=\"true\"

Second version

// single\n[ngClass] = \"{'css-class': true}\"\n\n// multiple same condition\n[ngClass] = \"{'css-class css-class2': true}\"\n\n// multiple different conditions\n[ngClass] = \"{'css-class': true, 'css-class2': false }\";

Third version

[ngClass] = \"(true)?'css-class1':'css-class2'\";

"},"previous":{"author":"Anton Ödman","title":"Print On The Same Line With Python","date":"2020-03-06","description":"Printing on the same line with Python is useful if you, for example, want to use a progress bar or download status in a CLI program. This is a simple way to do that.","tags":["python"],"draft":false,"cover":"/covers/png/print-same-line.png","aliases":["/print-same-line"],"slug":"print-same-line","isIndexFile":false,"category":"python","component":{},"preview":{"html":"

Printing on the same with Python is not that difficult, it did, however, take some time before I managed to find the best way to do it myself. This is a neat little trick and I tend to use it quite a lot in my programs.

","text":"Printing on the same with Python is not that difficult, it did, however, take some time before I managed to find the best way to do it myself. This is a neat little trick and I tend to use it quite a lot in my programs."},"readingTime":"1 min read","body":"

Print on the same line

print(\"hello\", end=\"\r\", flush=True)

Example

I have written a quick example, with the following code:

import time\n\nfor i in range(10):\n    print(i, end=\"\r\", flush=True)\n    time.sleep(0.5)

It looks like this.

$\"Flush$

"}},{"author":"Anton Ödman","title":"Print On The Same Line With Python","date":"2020-03-06","description":"Printing on the same line with Python is useful if you, for example, want to use a progress bar or download status in a CLI program. This is a simple way to do that.","tags":["python"],"draft":false,"cover":"/covers/png/print-same-line.png","aliases":["/print-same-line"],"slug":"print-same-line","isIndexFile":false,"category":"python","component":{},"preview":{"html":"

Print on the same line

print(\"hello\", end=\"\r\", flush=True)

Example

I have written a quick example, with the following code:

import time\n\nfor i in range(10):\n    print(i, end=\"\r\", flush=True)\n    time.sleep(0.5)

It looks like this.

$\"Flush$

","next":{"author":"Anton Ödman","title":"Deploy Any SPA + Express App to Heroku For Free","date":"2020-03-06","description":"When you have created a full-stack web application (with React, Vue or Angular) and Express, it is quite difficult to host it for free. This guide will help you do that on Heroku","tags":["hosting"],"draft":false,"cover":"/covers/png/deploy-spa-express-heroku.png","aliases":["/deploy-spa-express-heroku"],"slug":"deploy-spa-express-heroku","isIndexFile":false,"category":"hosting","component":{},"preview":{"html":"

Information

Getting started

This guide is divided into 5 steps:

1. Add endpoint for `index.html` file in Express

Create a wildcard path in Express, pointing all GET-requests to your index.html file. Be sure that it points to the correct folder, like dist, or build.

app.get(\"*\", (req, res) => {\n\tres.sendFile(path.join(__dirname, \"../../dist/index.html\"));\n});

2. Serve from your correct folder

Include this line to serve from the correct folder.

app.use(express.static(\"dist\"));

3. Add proxy to localhost

If your server, for example, listens to port 5000, make the proxy listen to that port.

Express

server.listen(process.env.PORT || 5000, () => {\n\tconsole.log(`Server running on port ${process.env.PORT || 5000}`);\n});

package.json

\"proxy\": \"http://localhost:5000\"

4. Add scripts to `package.json`

Be aware that your scripts may look different, the naming is the important part.

\"scripts\": {\n        \"build\": \"webpack --mode production\",\n        \"start\": \"node src/server/index.js\",\n        \"heroku-postbuild\": \"npm install && npm run build\"

5. Deploying to Heroku

Now to the last part, deploying your application to Heroku. We will do it using their CLI which you can read about here.

# remove git build (optional)\n$ rm -rf .git\n\n# make new git config\n$ git init\n$ git add .\n$ git commit -m \"Initial commit\"\n\n# create heroku server\n$ heroku create\n\n# add environment variables (optional)\n$ heroku config:set VAR1=variable1\n\n# push to server\n$ git push heroku master

If you already have a server and need to add that remote instead of creating a new one:

$ heroku git:remote -a <name-of-server>

"},"previous":{"author":"Anton Ödman","title":"How To Get Query Parameters in Angular","date":"2020-03-04","description":"Query parameters in Angular allows for passing data across routes in your web application. They are often also mixed with the path variables - here I'll show the difference and how to get both of them.","tags":["angular"],"draft":false,"cover":"/covers/png/query-parameters.png","aliases":["/query-parameters"],"slug":"query-parameters","isIndexFile":false,"category":"angular","component":{},"preview":{"html":"

Query params are the most usual to work with within web development, they follow this pattern:

","text":"Query params are the most usual to work with within web development, they follow this pattern:"},"readingTime":"2 min read","body":"

Query params

Query params are the most usual to work with within web development, they follow this pattern:

/app?param1=hello&param2=hi

You can get them via an observable, within the ActivatedRoute, using the queryParams method.

success: string;\n\nconstructor(private route: ActivatedRoute) {\n    this.route.queryParams.subscribe(params => {\n        this.success = params[\"success\"];\n    });\n}

Path variables

Path variables are those that you create within your Angular application.

/user/:id

These can simply be accessed using the route’s snapshot method.

id: string;\nconstructor(private route: ActivatedRoute) {\n    this.id = this.route.snapshot.params.id;\n}

"}},{"author":"Anton Ödman","title":"How To Get Query Parameters in Angular","date":"2020-03-04","description":"Query parameters in Angular allows for passing data across routes in your web application. They are often also mixed with the path variables - here I'll show the difference and how to get both of them.","tags":["angular"],"draft":false,"cover":"/covers/png/query-parameters.png","aliases":["/query-parameters"],"slug":"query-parameters","isIndexFile":false,"category":"angular","component":{},"preview":{"html":"

Query params are the most usual to work with within web development, they follow this pattern:

","text":"Query params are the most usual to work with within web development, they follow this pattern:"},"readingTime":"2 min read","body":"

Query params

Query params are the most usual to work with within web development, they follow this pattern:

/app?param1=hello&param2=hi

You can get them via an observable, within the ActivatedRoute, using the queryParams method.

success: string;\n\nconstructor(private route: ActivatedRoute) {\n    this.route.queryParams.subscribe(params => {\n        this.success = params[\"success\"];\n    });\n}

Path variables

Path variables are those that you create within your Angular application.

/user/:id

These can simply be accessed using the route’s snapshot method.

id: string;\nconstructor(private route: ActivatedRoute) {\n    this.id = this.route.snapshot.params.id;\n}

","next":{"author":"Anton Ödman","title":"Print On The Same Line With Python","date":"2020-03-06","description":"Printing on the same line with Python is useful if you, for example, want to use a progress bar or download status in a CLI program. This is a simple way to do that.","tags":["python"],"draft":false,"cover":"/covers/png/print-same-line.png","aliases":["/print-same-line"],"slug":"print-same-line","isIndexFile":false,"category":"python","component":{},"preview":{"html":"

Print on the same line

print(\"hello\", end=\"\r\", flush=True)

Example

I have written a quick example, with the following code:

import time\n\nfor i in range(10):\n    print(i, end=\"\r\", flush=True)\n    time.sleep(0.5)

It looks like this.

$\"Flush$

"},"previous":{"author":"Anton Ödman","title":"How To Use Git Stash","date":"2020-03-04","description":"Git stash temporarily saves your changes and stashes them. You usually do it if you quickly need to work on something else without committing your current code.","tags":["git"],"draft":false,"cover":"/covers/png/git-stash.png","aliases":["/git-stash"],"slug":"git-stash","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

The git stash command takes all your uncommitted changes (both staged and unstaged) and saves them in a pile.

","text":"The git stash command takes all your uncommitted changes (both staged and unstaged) and saves them in a pile."},"readingTime":"1 min read","body":"

Stash your work

The git stash command takes all your uncommitted changes (both staged and unstaged) and saves them in a pile.

git stash

This is how it looks before…

$\"Before$

And this is after…

$\"After$

Pop back your work

At any time, you can pop back your work. You do however need to commit or remove all changes you have made to the document.

git stash pop

And simple as that, our work is back, exactly the same as before.

$\"Before$

"}},{"author":"Anton Ödman","title":"How To Use Git Stash","date":"2020-03-04","description":"Git stash temporarily saves your changes and stashes them. You usually do it if you quickly need to work on something else without committing your current code.","tags":["git"],"draft":false,"cover":"/covers/png/git-stash.png","aliases":["/git-stash"],"slug":"git-stash","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

The git stash command takes all your uncommitted changes (both staged and unstaged) and saves them in a pile.

","text":"The git stash command takes all your uncommitted changes (both staged and unstaged) and saves them in a pile."},"readingTime":"1 min read","body":"

Stash your work

The git stash command takes all your uncommitted changes (both staged and unstaged) and saves them in a pile.

git stash

This is how it looks before…

$\"Before$

And this is after…

$\"After$

Pop back your work

At any time, you can pop back your work. You do however need to commit or remove all changes you have made to the document.

git stash pop

And simple as that, our work is back, exactly the same as before.

$\"Before$

","next":{"author":"Anton Ödman","title":"How To Get Query Parameters in Angular","date":"2020-03-04","description":"Query parameters in Angular allows for passing data across routes in your web application. They are often also mixed with the path variables - here I'll show the difference and how to get both of them.","tags":["angular"],"draft":false,"cover":"/covers/png/query-parameters.png","aliases":["/query-parameters"],"slug":"query-parameters","isIndexFile":false,"category":"angular","component":{},"preview":{"html":"

Query params are the most usual to work with within web development, they follow this pattern:

","text":"Query params are the most usual to work with within web development, they follow this pattern:"},"readingTime":"2 min read","body":"

Query params

Query params are the most usual to work with within web development, they follow this pattern:

/app?param1=hello&param2=hi

You can get them via an observable, within the ActivatedRoute, using the queryParams method.

success: string;\n\nconstructor(private route: ActivatedRoute) {\n    this.route.queryParams.subscribe(params => {\n        this.success = params[\"success\"];\n    });\n}

Path variables

Path variables are those that you create within your Angular application.

/user/:id

These can simply be accessed using the route’s snapshot method.

id: string;\nconstructor(private route: ActivatedRoute) {\n    this.id = this.route.snapshot.params.id;\n}

"},"previous":{"author":"Anton Ödman","title":"Web Scraping Behind Authentication with Python","date":"2020-03-03","description":"Python is a great tool for web scraping, however, getting behind authentication (being signed in) might be a bit difficult. This is a guide on how to do that with the Requests library","tags":["python"],"draft":false,"cover":"/covers/png/scrape-authenticated.png","aliases":["/scrape-authenticated"],"slug":"scrape-authenticated","isIndexFile":false,"category":"python","component":{},"preview":{"html":"

The goal with this short guide is to scrape while being signed in to a web page. I will for this guide use the GitHub webpage as it probably is familiar to most people reading this.

","text":"The goal with this short guide is to scrape while being signed in to a web page. I will for this guide use the GitHub webpage as it probably is familiar to most people reading this."},"readingTime":"4 min read","body":"

Goal

The goal with this short guide is to scrape while being signed in to a web page. I will for this guide use the GitHub webpage as it probably is familiar to most people reading this.

This approach does not work for all web pages, and every site’s authentication is different, but this might be a good start if you are trying this yourself.

Preparing the file

As mentioned, I will use Python for this, with the requests library. I will only focus on this in this guide.

Create a file, I’ll call it scrape.py for now. Install necessary requirements (well, only requests) and import it.

Installation

pip install requests

Python file

import requests

Session

We will use a Session object within the request to persist the user session. The session is later used to make the requests.

All cookies will then persist within the session for each forthcoming request. Meaning, if we sign in, the session will remember us and use that for all future requests we make.

# Create the session object\ns = requests.Session()\n\n# Example request\nresponse = s.get(\"www.google.com\")

Getting the data we need

Ok, so basically, we need to know what data to pass to which URL. This will be done within Chrome.

We need to know two things:

The URL to which the POST request (sign in) will be sent
The payload, or data that will be sent.

Let’s just open the Developer tools, go to the Network tab and log in so we can catch the URL.

A tip is to go to the login URL, clear the network tab so all previous requests disappear, making your login request probably show up at the top.

The arrow points at the clear button, while the square marks the login request. Click it to get information about it.

The URL is clearly shown to be https://github.com/session, so let’s save that. This is where our first request will go.

scrape.py

import requests\n\nurl = \"https://github.com/session\"\n\ns = requests.Session()\n\nresponse = s.post(url)

This won’t work, because we are not sending the correct data. Let’s scroll down on the session request we caught before to see the data sent.

I did remove some of my personal data. But this is quite a lot of data we need to pass when making the request. There is, however, a great tool to use. You can access it here.

With this, you can just copy the request and get all the data necessary to make the request.

Copy the request data and paste it into the left field on the link. You’ll get a complete request with headers, cookies and all on the right side.

So we need two things, the cookies and the data. Let’s just paste those two into our python file. You could take the headers as well, but I won’t for now.

scrape.py

import requests\n\ndata = {\n    # ...\n}\n\ncookies = {\n    # ...\n}\n\nurl = \"https://github.com/session\"\n\ns = requests.Session()\n\nresponse = s.post(url, data=data, cookies=cookies)

So we basically just pass them into the request. We won’t do much with that response for now, so you don’t even need to save it to a variable if you don’t want to.

Now you are done with your first part. You have made the request to sign in. All other requests you make in the same script will be considered signed in.

Signed in

So now that we are signed in, we can, for example, make a request to a private repo. I’ll make a request to the repository of this specific blog, as it is private on my Github.

scrape.py

# ...\ns = requests.Session()\ns.post(url, data=data, cookies=cookies)\nresponse = s.get(\"https://github.com/banjo/code\")

Scraping

So now, the actual scraping. This guide won’t cover that. But if you want, you can read my other guide on how to scrape with Beautiful Soup. It’s very easy to just pick up where you left off here.

"}},{"author":"Anton Ödman","title":"Web Scraping Behind Authentication with Python","date":"2020-03-03","description":"Python is a great tool for web scraping, however, getting behind authentication (being signed in) might be a bit difficult. This is a guide on how to do that with the Requests library","tags":["python"],"draft":false,"cover":"/covers/png/scrape-authenticated.png","aliases":["/scrape-authenticated"],"slug":"scrape-authenticated","isIndexFile":false,"category":"python","component":{},"preview":{"html":"

The goal with this short guide is to scrape while being signed in to a web page. I will for this guide use the GitHub webpage as it probably is familiar to most people reading this.

Goal

The goal with this short guide is to scrape while being signed in to a web page. I will for this guide use the GitHub webpage as it probably is familiar to most people reading this.

This approach does not work for all web pages, and every site’s authentication is different, but this might be a good start if you are trying this yourself.

Preparing the file

As mentioned, I will use Python for this, with the requests library. I will only focus on this in this guide.

Create a file, I’ll call it scrape.py for now. Install necessary requirements (well, only requests) and import it.

Installation

pip install requests

Python file

import requests

Session

We will use a Session object within the request to persist the user session. The session is later used to make the requests.

All cookies will then persist within the session for each forthcoming request. Meaning, if we sign in, the session will remember us and use that for all future requests we make.

# Create the session object\ns = requests.Session()\n\n# Example request\nresponse = s.get(\"www.google.com\")

Getting the data we need

Ok, so basically, we need to know what data to pass to which URL. This will be done within Chrome.

We need to know two things:

The URL to which the POST request (sign in) will be sent
The payload, or data that will be sent.

Let’s just open the Developer tools, go to the Network tab and log in so we can catch the URL.

A tip is to go to the login URL, clear the network tab so all previous requests disappear, making your login request probably show up at the top.

The arrow points at the clear button, while the square marks the login request. Click it to get information about it.

The URL is clearly shown to be https://github.com/session, so let’s save that. This is where our first request will go.

scrape.py

import requests\n\nurl = \"https://github.com/session\"\n\ns = requests.Session()\n\nresponse = s.post(url)

This won’t work, because we are not sending the correct data. Let’s scroll down on the session request we caught before to see the data sent.

I did remove some of my personal data. But this is quite a lot of data we need to pass when making the request. There is, however, a great tool to use. You can access it here.

With this, you can just copy the request and get all the data necessary to make the request.

Copy the request data and paste it into the left field on the link. You’ll get a complete request with headers, cookies and all on the right side.

So we need two things, the cookies and the data. Let’s just paste those two into our python file. You could take the headers as well, but I won’t for now.

scrape.py

import requests\n\ndata = {\n    # ...\n}\n\ncookies = {\n    # ...\n}\n\nurl = \"https://github.com/session\"\n\ns = requests.Session()\n\nresponse = s.post(url, data=data, cookies=cookies)

So we basically just pass them into the request. We won’t do much with that response for now, so you don’t even need to save it to a variable if you don’t want to.

Now you are done with your first part. You have made the request to sign in. All other requests you make in the same script will be considered signed in.

Signed in

So now that we are signed in, we can, for example, make a request to a private repo. I’ll make a request to the repository of this specific blog, as it is private on my Github.

scrape.py

# ...\ns = requests.Session()\ns.post(url, data=data, cookies=cookies)\nresponse = s.get(\"https://github.com/banjo/code\")

Scraping

","next":{"author":"Anton Ödman","title":"How To Use Git Stash","date":"2020-03-04","description":"Git stash temporarily saves your changes and stashes them. You usually do it if you quickly need to work on something else without committing your current code.","tags":["git"],"draft":false,"cover":"/covers/png/git-stash.png","aliases":["/git-stash"],"slug":"git-stash","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

The git stash command takes all your uncommitted changes (both staged and unstaged) and saves them in a pile.

","text":"The git stash command takes all your uncommitted changes (both staged and unstaged) and saves them in a pile."},"readingTime":"1 min read","body":"

Stash your work

The git stash command takes all your uncommitted changes (both staged and unstaged) and saves them in a pile.

git stash

This is how it looks before…

$\"Before$

And this is after…

$\"After$

Pop back your work

At any time, you can pop back your work. You do however need to commit or remove all changes you have made to the document.

git stash pop

And simple as that, our work is back, exactly the same as before.

$\"Before$

"},"previous":{"author":"Anton Ödman","title":"How To Commit with Git","date":"2020-03-02","description":"To commit your work is probably the thing you do the most with git. It's basically to save a snapshot of your current project, making it possible to go back to that specific snapshot of your code.","tags":["git"],"cover":"/covers/png/git-commit.png","draft":false,"slug":"git-commit","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

You can either add single files or all files that have been modified at the same time.

","text":"You can either add single files or all files that have been modified at the same time."},"readingTime":"1 min read","body":"

Add file

You can either add single files or all files that have been modified at the same time.

# Single files\ngit add <filename1> <filename2>\n\n# All files\ngit add .

Commit message

You always have to specify a short message for each commit.

git commit -m \"This is the commit message\"

"}},{"author":"Anton Ödman","title":"How To Commit with Git","date":"2020-03-02","description":"To commit your work is probably the thing you do the most with git. It's basically to save a snapshot of your current project, making it possible to go back to that specific snapshot of your code.","tags":["git"],"cover":"/covers/png/git-commit.png","draft":false,"slug":"git-commit","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

You can either add single files or all files that have been modified at the same time.

","text":"You can either add single files or all files that have been modified at the same time."},"readingTime":"1 min read","body":"

Add file

You can either add single files or all files that have been modified at the same time.

# Single files\ngit add <filename1> <filename2>\n\n# All files\ngit add .

Commit message

You always have to specify a short message for each commit.

git commit -m \"This is the commit message\"

","next":{"author":"Anton Ödman","title":"Web Scraping Behind Authentication with Python","date":"2020-03-03","description":"Python is a great tool for web scraping, however, getting behind authentication (being signed in) might be a bit difficult. This is a guide on how to do that with the Requests library","tags":["python"],"draft":false,"cover":"/covers/png/scrape-authenticated.png","aliases":["/scrape-authenticated"],"slug":"scrape-authenticated","isIndexFile":false,"category":"python","component":{},"preview":{"html":"

The goal with this short guide is to scrape while being signed in to a web page. I will for this guide use the GitHub webpage as it probably is familiar to most people reading this.

Goal

The goal with this short guide is to scrape while being signed in to a web page. I will for this guide use the GitHub webpage as it probably is familiar to most people reading this.

This approach does not work for all web pages, and every site’s authentication is different, but this might be a good start if you are trying this yourself.

Preparing the file

As mentioned, I will use Python for this, with the requests library. I will only focus on this in this guide.

Create a file, I’ll call it scrape.py for now. Install necessary requirements (well, only requests) and import it.

Installation

pip install requests

Python file

import requests

Session

We will use a Session object within the request to persist the user session. The session is later used to make the requests.

All cookies will then persist within the session for each forthcoming request. Meaning, if we sign in, the session will remember us and use that for all future requests we make.

# Create the session object\ns = requests.Session()\n\n# Example request\nresponse = s.get(\"www.google.com\")

Getting the data we need

Ok, so basically, we need to know what data to pass to which URL. This will be done within Chrome.

We need to know two things:

The URL to which the POST request (sign in) will be sent
The payload, or data that will be sent.

Let’s just open the Developer tools, go to the Network tab and log in so we can catch the URL.

A tip is to go to the login URL, clear the network tab so all previous requests disappear, making your login request probably show up at the top.

The arrow points at the clear button, while the square marks the login request. Click it to get information about it.

The URL is clearly shown to be https://github.com/session, so let’s save that. This is where our first request will go.

scrape.py

import requests\n\nurl = \"https://github.com/session\"\n\ns = requests.Session()\n\nresponse = s.post(url)

This won’t work, because we are not sending the correct data. Let’s scroll down on the session request we caught before to see the data sent.

I did remove some of my personal data. But this is quite a lot of data we need to pass when making the request. There is, however, a great tool to use. You can access it here.

With this, you can just copy the request and get all the data necessary to make the request.

Copy the request data and paste it into the left field on the link. You’ll get a complete request with headers, cookies and all on the right side.

So we need two things, the cookies and the data. Let’s just paste those two into our python file. You could take the headers as well, but I won’t for now.

scrape.py

import requests\n\ndata = {\n    # ...\n}\n\ncookies = {\n    # ...\n}\n\nurl = \"https://github.com/session\"\n\ns = requests.Session()\n\nresponse = s.post(url, data=data, cookies=cookies)

So we basically just pass them into the request. We won’t do much with that response for now, so you don’t even need to save it to a variable if you don’t want to.

Now you are done with your first part. You have made the request to sign in. All other requests you make in the same script will be considered signed in.

Signed in

So now that we are signed in, we can, for example, make a request to a private repo. I’ll make a request to the repository of this specific blog, as it is private on my Github.

scrape.py

# ...\ns = requests.Session()\ns.post(url, data=data, cookies=cookies)\nresponse = s.get(\"https://github.com/banjo/code\")

Scraping

"},"previous":{"author":"Anton Ödman","title":"Using Virtual Environments with Python","date":"2020-03-02","description":"Working with Virtual Environments is very handy. It allows you to create a self-contained directory that contains a Python installation for a particular version of Python. Install all your dependencies in an environment that you can easily modify or remove. ","tags":["python"],"cover":"/covers/png/virtual-environments.png","draft":false,"slug":"virtual-environments","isIndexFile":false,"category":"python","component":{},"preview":{"html":"

Create a folder for a virtual environment inside your project.

","text":"Create a folder for a virtual environment inside your project."},"readingTime":"2 min read","body":"

Gettings started

Create a folder for a virtual environment inside your project.

python3 -m venv venv

The last venv could be anything, it will be the name of the folder that is created for the virtual environment. The name of the environment. Inside this, all dependencies will be installed.

Activate and deactivate

You need to activate your virtual environment to use it. Virtual environments are activated differently.

# Bash\nsource venv/bin/activate\n\n# CMD\nvenvScriptsactivate.bat\n\n# Powershell\nvenvScriptsActivate.ps1

With this activated, you’ll only use your virtual environment, meaning that you probably miss a few dependencies you need to install again. None of the dependencies you already have installed on your computer will be used in this environment.

If you need to deactivate your environment, you can do that with the deactivate command.

Requirements

Python projects use the requirements.txt to handle all dependencies. You can create a file like that based on what you already have installed, or you can install everything to your environment that is written in the file.

# Save installed dependencies to file\npip freeze > requirements.txt\n\n# Install from file\npip install -r requirements.txt

"}},{"author":"Anton Ödman","title":"Using Virtual Environments with Python","date":"2020-03-02","description":"Working with Virtual Environments is very handy. It allows you to create a self-contained directory that contains a Python installation for a particular version of Python. Install all your dependencies in an environment that you can easily modify or remove. ","tags":["python"],"cover":"/covers/png/virtual-environments.png","draft":false,"slug":"virtual-environments","isIndexFile":false,"category":"python","component":{},"preview":{"html":"

Create a folder for a virtual environment inside your project.

","text":"Create a folder for a virtual environment inside your project."},"readingTime":"2 min read","body":"

Gettings started

Create a folder for a virtual environment inside your project.

python3 -m venv venv

The last venv could be anything, it will be the name of the folder that is created for the virtual environment. The name of the environment. Inside this, all dependencies will be installed.

Activate and deactivate

You need to activate your virtual environment to use it. Virtual environments are activated differently.

# Bash\nsource venv/bin/activate\n\n# CMD\nvenvScriptsactivate.bat\n\n# Powershell\nvenvScriptsActivate.ps1

If you need to deactivate your environment, you can do that with the deactivate command.

Requirements

# Save installed dependencies to file\npip freeze > requirements.txt\n\n# Install from file\npip install -r requirements.txt

","next":{"author":"Anton Ödman","title":"How To Commit with Git","date":"2020-03-02","description":"To commit your work is probably the thing you do the most with git. It's basically to save a snapshot of your current project, making it possible to go back to that specific snapshot of your code.","tags":["git"],"cover":"/covers/png/git-commit.png","draft":false,"slug":"git-commit","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

You can either add single files or all files that have been modified at the same time.

","text":"You can either add single files or all files that have been modified at the same time."},"readingTime":"1 min read","body":"

Add file

You can either add single files or all files that have been modified at the same time.

# Single files\ngit add <filename1> <filename2>\n\n# All files\ngit add .

Commit message

You always have to specify a short message for each commit.

git commit -m \"This is the commit message\"

"},"previous":{"author":"Anton Ödman","title":"Web Scraping with Python","date":"2020-03-02","description":"Python makes it simple to grab data from the web. This is a guide (or maybe cheat sheet) on how you can scrape the web easily with Requests and Beautiful Soup 4.","tags":["python"],"draft":false,"cover":"/covers/png/web-scraping.png","aliases":["/web-scraping"],"slug":"web-scraping","isIndexFile":false,"category":"python","component":{},"preview":{"html":"

First, you need to install the right tools.

","text":"First, you need to install the right tools."},"readingTime":"4 min read","body":"

Getting started

First, you need to install the right tools.

pip install beautifulsoup4\npip install requests\npip install lxml

These are the ones we will use for the scraping. Create a new python file and import them at the top of your file.

from bs4 import BeautifulSoup\nimport requests

Fetch with Requests

The Requests library will be used to fetch the pages. To make a GET request, you simply use the GET method.

result = requests.get(\"www.google.com\")

You can get a lot of information from the request.

# Get the status code\nresult.status_code\n\n# Get the headers\nresult.headers

To be able to scrape your page, you need to use the Beautiful Soup library. You need to save the response content to turn it into a soup object.

# Save the content\ncontent = result.content\n\n# Create soup\nsoup = BeautifulSoup(content, features=\"lxml\")

You can see the HTML in a readable format with the prettify method.

print(soup.prettify())

Scrape with Beautiful Soup

Now to the actual scraping. Getting the data from the HTML code.

Using CSS Selector

The easiest way is probably to use the CSS selector, which can be copied within Chrome.

Here, I have selected the first Google result. Inspected the HTML. Right clicked the element, selected copy and choose the Copy selector alternative.

samples = soup.select(\"div > div:nth-child(4) > div:nth-child(4)\")

The select element will, however, return an array. If you only want one object, you can use the select_one method instead.

Using Tags

You can also scrape by tags (a, h1, p, div) with the following syntax.

# All a elements\nsamples = soup.select(\"a\")\n\n# Chain tags in the following order: (html -> head -> a)\nsamples = soup.select(\"html head a\")\n\n# Chain tags in the exact following order: (html -> head -> a)\nsamples = soup.select(\"html > head > a\")

It is also possible to use the id or class attribute to scrape the HTML.

sample_id = soup.select(\"#id\")\nsample_class = soup.select(\".class\")

Using find_all

Another method you can use is find_all. It will basically return all elements that match.

# Return all elements with an a tag\nsamples = soup.find_all(\"a\")\n\n# Return all elements with a specific ID\nsamples = soup.find_all(id=\"specific_id\")\n\n# Return all elements with a \"a\" tag with a specific CSS class\nsamples = soup.find_all(\"a\", \"specific_css_class\")\n\n# Same as above, more specific\nsamples = soup.find_all(\"a\", class_=\"specific_css_class\")\n\n# Search for any attribute within an a tag\nsamples = soup.find_all(\"a\", attrs={\"class\": \"specific_css_class\"})

You can also use the find method, which will return a single element instead of an array.

Get the values

The most important part of scarping is getting the actual values (or text) from the element.

<h3 class=\"LC20lb DKV0Md\" href=\"https://someurl.com/\">Beautiful Soup</h3>

Get the inner text (the actual text printed on the page) with this method.

sample = element.get_text()

If you want to get a specific attribute of an element, like the href, use this syntax:

sample = element.get(\"href\")

"}},{"author":"Anton Ödman","title":"Web Scraping with Python","date":"2020-03-02","description":"Python makes it simple to grab data from the web. This is a guide (or maybe cheat sheet) on how you can scrape the web easily with Requests and Beautiful Soup 4.","tags":["python"],"draft":false,"cover":"/covers/png/web-scraping.png","aliases":["/web-scraping"],"slug":"web-scraping","isIndexFile":false,"category":"python","component":{},"preview":{"html":"

First, you need to install the right tools.

","text":"First, you need to install the right tools."},"readingTime":"4 min read","body":"

Getting started

First, you need to install the right tools.

pip install beautifulsoup4\npip install requests\npip install lxml

These are the ones we will use for the scraping. Create a new python file and import them at the top of your file.

from bs4 import BeautifulSoup\nimport requests

Fetch with Requests

The Requests library will be used to fetch the pages. To make a GET request, you simply use the GET method.

result = requests.get(\"www.google.com\")

You can get a lot of information from the request.

# Get the status code\nresult.status_code\n\n# Get the headers\nresult.headers

To be able to scrape your page, you need to use the Beautiful Soup library. You need to save the response content to turn it into a soup object.

# Save the content\ncontent = result.content\n\n# Create soup\nsoup = BeautifulSoup(content, features=\"lxml\")

You can see the HTML in a readable format with the prettify method.

print(soup.prettify())

Scrape with Beautiful Soup

Now to the actual scraping. Getting the data from the HTML code.

Using CSS Selector

The easiest way is probably to use the CSS selector, which can be copied within Chrome.

Here, I have selected the first Google result. Inspected the HTML. Right clicked the element, selected copy and choose the Copy selector alternative.

samples = soup.select(\"div > div:nth-child(4) > div:nth-child(4)\")

The select element will, however, return an array. If you only want one object, you can use the select_one method instead.

Using Tags

You can also scrape by tags (a, h1, p, div) with the following syntax.

# All a elements\nsamples = soup.select(\"a\")\n\n# Chain tags in the following order: (html -> head -> a)\nsamples = soup.select(\"html head a\")\n\n# Chain tags in the exact following order: (html -> head -> a)\nsamples = soup.select(\"html > head > a\")

It is also possible to use the id or class attribute to scrape the HTML.

sample_id = soup.select(\"#id\")\nsample_class = soup.select(\".class\")

Using find_all

Another method you can use is find_all. It will basically return all elements that match.

# Return all elements with an a tag\nsamples = soup.find_all(\"a\")\n\n# Return all elements with a specific ID\nsamples = soup.find_all(id=\"specific_id\")\n\n# Return all elements with a \"a\" tag with a specific CSS class\nsamples = soup.find_all(\"a\", \"specific_css_class\")\n\n# Same as above, more specific\nsamples = soup.find_all(\"a\", class_=\"specific_css_class\")\n\n# Search for any attribute within an a tag\nsamples = soup.find_all(\"a\", attrs={\"class\": \"specific_css_class\"})

You can also use the find method, which will return a single element instead of an array.

Get the values

The most important part of scarping is getting the actual values (or text) from the element.

<h3 class=\"LC20lb DKV0Md\" href=\"https://someurl.com/\">Beautiful Soup</h3>

Get the inner text (the actual text printed on the page) with this method.

sample = element.get_text()

If you want to get a specific attribute of an element, like the href, use this syntax:

sample = element.get(\"href\")

","next":{"author":"Anton Ödman","title":"Using Virtual Environments with Python","date":"2020-03-02","description":"Working with Virtual Environments is very handy. It allows you to create a self-contained directory that contains a Python installation for a particular version of Python. Install all your dependencies in an environment that you can easily modify or remove. ","tags":["python"],"cover":"/covers/png/virtual-environments.png","draft":false,"slug":"virtual-environments","isIndexFile":false,"category":"python","component":{},"preview":{"html":"

Create a folder for a virtual environment inside your project.

","text":"Create a folder for a virtual environment inside your project."},"readingTime":"2 min read","body":"

Gettings started

Create a folder for a virtual environment inside your project.

python3 -m venv venv

The last venv could be anything, it will be the name of the folder that is created for the virtual environment. The name of the environment. Inside this, all dependencies will be installed.

Activate and deactivate

You need to activate your virtual environment to use it. Virtual environments are activated differently.

# Bash\nsource venv/bin/activate\n\n# CMD\nvenvScriptsactivate.bat\n\n# Powershell\nvenvScriptsActivate.ps1

If you need to deactivate your environment, you can do that with the deactivate command.

Requirements

# Save installed dependencies to file\npip freeze > requirements.txt\n\n# Install from file\npip install -r requirements.txt

"},"previous":{"author":"Anton Ödman","title":"Working With Hugo Themes and Git Submodules","date":"2020-02-29","description":"Working with Hugo themes you probably use git submodules. These are basically subrepositories within your repository. They can be used for several different reasons, but the main one is probably so you can download updates.","tags":["hugo"],"cover":"/covers/png/hugo-theme-submodules.png","draft":false,"slug":"hugo-theme-submodules","isIndexFile":false,"category":"hugo","component":{},"preview":{"html":"

You also need a submodule theme to be able to host on Netlify.

","text":"You also need a submodule theme to be able to host on Netlify."},"readingTime":"1 min read","body":"

You also need a submodule theme to be able to host on Netlify.

Adding a submodule theme

Execute this in your root folder to add the theme to the theme folder.

git submodule add https://github.com/name/my-theme.git themes/my-theme

You also need to configure the config.toml file to be able to use the theme.

theme = \"my-theme\"

Update your theme to the latest release

If you want to download the latest release of the theme to your Hugo site, you can to that with this command.

git submodule update --remote --merge

You also need to add, commit and push to changes in your main Hugo repo for them to work.

Download your submodule on a new computer

If you git clone your Hugo repo on a new computer, you won’t get the theme because it is a submodule. You can download it by executing this command in your root folder:

git submodule update --init --recursive

"}},{"author":"Anton Ödman","title":"Working With Hugo Themes and Git Submodules","date":"2020-02-29","description":"Working with Hugo themes you probably use git submodules. These are basically subrepositories within your repository. They can be used for several different reasons, but the main one is probably so you can download updates.","tags":["hugo"],"cover":"/covers/png/hugo-theme-submodules.png","draft":false,"slug":"hugo-theme-submodules","isIndexFile":false,"category":"hugo","component":{},"preview":{"html":"

You also need a submodule theme to be able to host on Netlify.

","text":"You also need a submodule theme to be able to host on Netlify."},"readingTime":"1 min read","body":"

You also need a submodule theme to be able to host on Netlify.

Adding a submodule theme

Execute this in your root folder to add the theme to the theme folder.

git submodule add https://github.com/name/my-theme.git themes/my-theme

You also need to configure the config.toml file to be able to use the theme.

theme = \"my-theme\"

Update your theme to the latest release

If you want to download the latest release of the theme to your Hugo site, you can to that with this command.

git submodule update --remote --merge

You also need to add, commit and push to changes in your main Hugo repo for them to work.

Download your submodule on a new computer

If you git clone your Hugo repo on a new computer, you won’t get the theme because it is a submodule. You can download it by executing this command in your root folder:

git submodule update --init --recursive

","next":{"author":"Anton Ödman","title":"Web Scraping with Python","date":"2020-03-02","description":"Python makes it simple to grab data from the web. This is a guide (or maybe cheat sheet) on how you can scrape the web easily with Requests and Beautiful Soup 4.","tags":["python"],"draft":false,"cover":"/covers/png/web-scraping.png","aliases":["/web-scraping"],"slug":"web-scraping","isIndexFile":false,"category":"python","component":{},"preview":{"html":"

First, you need to install the right tools.

","text":"First, you need to install the right tools."},"readingTime":"4 min read","body":"

Getting started

First, you need to install the right tools.

pip install beautifulsoup4\npip install requests\npip install lxml

These are the ones we will use for the scraping. Create a new python file and import them at the top of your file.

from bs4 import BeautifulSoup\nimport requests

Fetch with Requests

The Requests library will be used to fetch the pages. To make a GET request, you simply use the GET method.

result = requests.get(\"www.google.com\")

You can get a lot of information from the request.

# Get the status code\nresult.status_code\n\n# Get the headers\nresult.headers

To be able to scrape your page, you need to use the Beautiful Soup library. You need to save the response content to turn it into a soup object.

# Save the content\ncontent = result.content\n\n# Create soup\nsoup = BeautifulSoup(content, features=\"lxml\")

You can see the HTML in a readable format with the prettify method.

print(soup.prettify())

Scrape with Beautiful Soup

Now to the actual scraping. Getting the data from the HTML code.

Using CSS Selector

The easiest way is probably to use the CSS selector, which can be copied within Chrome.

Here, I have selected the first Google result. Inspected the HTML. Right clicked the element, selected copy and choose the Copy selector alternative.

samples = soup.select(\"div > div:nth-child(4) > div:nth-child(4)\")

The select element will, however, return an array. If you only want one object, you can use the select_one method instead.

Using Tags

You can also scrape by tags (a, h1, p, div) with the following syntax.

# All a elements\nsamples = soup.select(\"a\")\n\n# Chain tags in the following order: (html -> head -> a)\nsamples = soup.select(\"html head a\")\n\n# Chain tags in the exact following order: (html -> head -> a)\nsamples = soup.select(\"html > head > a\")

It is also possible to use the id or class attribute to scrape the HTML.

sample_id = soup.select(\"#id\")\nsample_class = soup.select(\".class\")

Using find_all

Another method you can use is find_all. It will basically return all elements that match.

# Return all elements with an a tag\nsamples = soup.find_all(\"a\")\n\n# Return all elements with a specific ID\nsamples = soup.find_all(id=\"specific_id\")\n\n# Return all elements with a \"a\" tag with a specific CSS class\nsamples = soup.find_all(\"a\", \"specific_css_class\")\n\n# Same as above, more specific\nsamples = soup.find_all(\"a\", class_=\"specific_css_class\")\n\n# Search for any attribute within an a tag\nsamples = soup.find_all(\"a\", attrs={\"class\": \"specific_css_class\"})

You can also use the find method, which will return a single element instead of an array.

Get the values

The most important part of scarping is getting the actual values (or text) from the element.

<h3 class=\"LC20lb DKV0Md\" href=\"https://someurl.com/\">Beautiful Soup</h3>

Get the inner text (the actual text printed on the page) with this method.

sample = element.get_text()

If you want to get a specific attribute of an element, like the href, use this syntax:

sample = element.get(\"href\")

"},"previous":{"title":"How To Use Git Branches with Git Merge","date":"2020-02-28","publishdate":"2020-02-28T00:00:00.000Z","lastmod":"2020-02-28T00:00:00.000Z","description":"Branching with git is a great feature, this is a simple workflow for how to branch and merge different branches.","tags":["git"],"cover":"/covers/png/git-branches.png","aliases":["how-to-git-branches-with-merge"],"slug":"git-branches","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

Many times you want to create a new branch for a feature.

","text":"Many times you want to create a new branch for a feature."},"readingTime":"1 min read","body":"

Many times you want to create a new branch for a feature.

This is usually the case if you want to merge your current branch with the master branch. The workflow is like this:

Create new branch
Commit changes
Pull latest master
Merge

This is how you do it in bash / git bash.

# create branch and switch to it\n> git checkout -b branch_name\n\n# commit changes\n> ...\n\n# change back to master/dev\n> git checkout master\n\n# pull latest changes\n> git pull\n\n# merge with branch\n> git merge branch_name

"}},{"title":"How To Use Git Branches with Git Merge","date":"2020-02-28","publishdate":"2020-02-28T00:00:00.000Z","lastmod":"2020-02-28T00:00:00.000Z","description":"Branching with git is a great feature, this is a simple workflow for how to branch and merge different branches.","tags":["git"],"cover":"/covers/png/git-branches.png","aliases":["how-to-git-branches-with-merge"],"slug":"git-branches","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

Many times you want to create a new branch for a feature.

","text":"Many times you want to create a new branch for a feature."},"readingTime":"1 min read","body":"

Many times you want to create a new branch for a feature.

This is usually the case if you want to merge your current branch with the master branch. The workflow is like this:

Create new branch
Commit changes
Pull latest master
Merge

This is how you do it in bash / git bash.

# create branch and switch to it\n> git checkout -b branch_name\n\n# commit changes\n> ...\n\n# change back to master/dev\n> git checkout master\n\n# pull latest changes\n> git pull\n\n# merge with branch\n> git merge branch_name

","next":{"author":"Anton Ödman","title":"Working With Hugo Themes and Git Submodules","date":"2020-02-29","description":"Working with Hugo themes you probably use git submodules. These are basically subrepositories within your repository. They can be used for several different reasons, but the main one is probably so you can download updates.","tags":["hugo"],"cover":"/covers/png/hugo-theme-submodules.png","draft":false,"slug":"hugo-theme-submodules","isIndexFile":false,"category":"hugo","component":{},"preview":{"html":"

You also need a submodule theme to be able to host on Netlify.

","text":"You also need a submodule theme to be able to host on Netlify."},"readingTime":"1 min read","body":"

You also need a submodule theme to be able to host on Netlify.

Adding a submodule theme

Execute this in your root folder to add the theme to the theme folder.

git submodule add https://github.com/name/my-theme.git themes/my-theme

You also need to configure the config.toml file to be able to use the theme.

theme = \"my-theme\"

Update your theme to the latest release

If you want to download the latest release of the theme to your Hugo site, you can to that with this command.

git submodule update --remote --merge

You also need to add, commit and push to changes in your main Hugo repo for them to work.

Download your submodule on a new computer

If you git clone your Hugo repo on a new computer, you won’t get the theme because it is a submodule. You can download it by executing this command in your root folder:

git submodule update --init --recursive

"},"previous":{"title":"How To Use Git Rebase","date":"2020-02-28","publishdate":"2020-02-28T00:00:00.000Z","lastmod":"2020-02-28T00:00:00.000Z","description":"Keep a clean history with rebase, instead of cluttering your teams commit history. This is the simplest way how to use git rebase.","tags":["git"],"cover":"/covers/png/git-rebase.png","aliases":["how-to-use-git-rebase"],"slug":"git-rebase","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

I will use these two branches in this example:

","text":"I will use these two branches in this example:"},"readingTime":"1 min read","body":"

I will use these two branches in this example:

dev - the main branch
feature - the newly created branch

Always rebase before a merge

# checkout new branch\n> git checkout -b feature\n\n# make commits\n> ...\n\n# make a pull with rebase before merge (if long branch, do occasional rebases)\n> git checkout dev\n> git pull --rebase\n> git checkout feature\n> git rebase dev\n\n# merge when done\n> git checkout dev\n> git merge feature\n\n# delete branch\n> git branch -d feature

"}},{"title":"How To Use Git Rebase","date":"2020-02-28","publishdate":"2020-02-28T00:00:00.000Z","lastmod":"2020-02-28T00:00:00.000Z","description":"Keep a clean history with rebase, instead of cluttering your teams commit history. This is the simplest way how to use git rebase.","tags":["git"],"cover":"/covers/png/git-rebase.png","aliases":["how-to-use-git-rebase"],"slug":"git-rebase","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

I will use these two branches in this example:

","text":"I will use these two branches in this example:"},"readingTime":"1 min read","body":"

I will use these two branches in this example:

dev - the main branch
feature - the newly created branch

Always rebase before a merge

# checkout new branch\n> git checkout -b feature\n\n# make commits\n> ...\n\n# make a pull with rebase before merge (if long branch, do occasional rebases)\n> git checkout dev\n> git pull --rebase\n> git checkout feature\n> git rebase dev\n\n# merge when done\n> git checkout dev\n> git merge feature\n\n# delete branch\n> git branch -d feature

","next":{"title":"How To Use Git Branches with Git Merge","date":"2020-02-28","publishdate":"2020-02-28T00:00:00.000Z","lastmod":"2020-02-28T00:00:00.000Z","description":"Branching with git is a great feature, this is a simple workflow for how to branch and merge different branches.","tags":["git"],"cover":"/covers/png/git-branches.png","aliases":["how-to-git-branches-with-merge"],"slug":"git-branches","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

Many times you want to create a new branch for a feature.

","text":"Many times you want to create a new branch for a feature."},"readingTime":"1 min read","body":"

Many times you want to create a new branch for a feature.

This is usually the case if you want to merge your current branch with the master branch. The workflow is like this:

Create new branch
Commit changes
Pull latest master
Merge

This is how you do it in bash / git bash.

# create branch and switch to it\n> git checkout -b branch_name\n\n# commit changes\n> ...\n\n# change back to master/dev\n> git checkout master\n\n# pull latest changes\n> git pull\n\n# merge with branch\n> git merge branch_name

"},"previous":{"title":"How To Git Squash Earlier Commits","date":"2020-02-28","publishdate":"2020-02-28T00:00:00.000Z","lastmod":"2020-02-28T00:00:00.000Z","description":"Sometimes you want to squash, or combine, earlier commits back in your history. This is one way you can do that.","tags":["git"],"cover":"/covers/png/git-squash-earlier.png","aliases":["how-to-git-squash-earlier-commits"],"slug":"git-squash-earlier","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

These are the two messages we want to squash into the earlier one (2 - added one file and squashed).

","text":"These are the two messages we want to squash into the earlier one (2 - added one file and squashed)."},"readingTime":"1 min read","body":"

These are the two messages we want to squash into the earlier one (2 - added one file and squashed).

Do an interactive rebase on at least 2 commits before the ones you want to squash, in this case 1 - removed all files.

> git rebase -i <hash-commit>

Use either s or f to the commits (or squash or fixup).

squash - modify commit message
fixup - remove commit message

The two commits that should be changed are now added. Save and exit to go to the next file.

Comment out the commit messages that you want to change and rewrite the earlier commit (earlier named 2 - added one file and squashed), now named whatever you want.

Save and the files will now be squashed with the earlier commit. This is how it looks now:

"}},{"title":"How To Git Squash Earlier Commits","date":"2020-02-28","publishdate":"2020-02-28T00:00:00.000Z","lastmod":"2020-02-28T00:00:00.000Z","description":"Sometimes you want to squash, or combine, earlier commits back in your history. This is one way you can do that.","tags":["git"],"cover":"/covers/png/git-squash-earlier.png","aliases":["how-to-git-squash-earlier-commits"],"slug":"git-squash-earlier","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

These are the two messages we want to squash into the earlier one (2 - added one file and squashed).

","text":"These are the two messages we want to squash into the earlier one (2 - added one file and squashed)."},"readingTime":"1 min read","body":"

These are the two messages we want to squash into the earlier one (2 - added one file and squashed).

Do an interactive rebase on at least 2 commits before the ones you want to squash, in this case 1 - removed all files.

> git rebase -i <hash-commit>

Use either s or f to the commits (or squash or fixup).

squash - modify commit message
fixup - remove commit message

The two commits that should be changed are now added. Save and exit to go to the next file.

Comment out the commit messages that you want to change and rewrite the earlier commit (earlier named 2 - added one file and squashed), now named whatever you want.

Save and the files will now be squashed with the earlier commit. This is how it looks now:

","next":{"title":"How To Use Git Rebase","date":"2020-02-28","publishdate":"2020-02-28T00:00:00.000Z","lastmod":"2020-02-28T00:00:00.000Z","description":"Keep a clean history with rebase, instead of cluttering your teams commit history. This is the simplest way how to use git rebase.","tags":["git"],"cover":"/covers/png/git-rebase.png","aliases":["how-to-use-git-rebase"],"slug":"git-rebase","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

I will use these two branches in this example:

","text":"I will use these two branches in this example:"},"readingTime":"1 min read","body":"

I will use these two branches in this example:

dev - the main branch
feature - the newly created branch

Always rebase before a merge

# checkout new branch\n> git checkout -b feature\n\n# make commits\n> ...\n\n# make a pull with rebase before merge (if long branch, do occasional rebases)\n> git checkout dev\n> git pull --rebase\n> git checkout feature\n> git rebase dev\n\n# merge when done\n> git checkout dev\n> git merge feature\n\n# delete branch\n> git branch -d feature

"},"previous":{"title":"How To Use Git Squash","date":"2020-02-27","description":"Git squash can be used to combine several commits into one. This is the easy way to do it.","tags":["git"],"cover":"/covers/png/git-squash.png","aliases":["how-to-use-git-squash"],"slug":"git-squash","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

If you’re at a branch with a lot of commits, be sure to checkout to the latest, or the actual branch.

","text":"If you’re at a branch with a lot of commits, be sure to checkout to the latest, or the actual branch."},"readingTime":"2 min read","body":"

If you’re at a branch with a lot of commits, be sure to checkout to the latest, or the actual branch.

This is the commit history.\nWe only want to include the 3 latest commits, including the current one. Meaning we will merge these three.

The code is very simple. You have two different alternatives.

# this will take the 3 latest commits, including the current one.\n> git rebase -i HEAD~3\n\n# you can also use the commit hash before the one you want to use\n> git rebase -i b1e1d4f

If you choose to use the commit hash, for example, these three will be included if you use the hash with the arrow.

Your text editor will open and look something like this. These are the 3 commits we choose.

Replace pick with squash (or s) for those you want to combine. The main one should still have pick. Save and exit.

Now, a window with all commit messages will pop up.

Comment out the commit messages of the commits you want to squash and edit the message of the one you want to persist.

Comment out all the commits you don’t want to use, and only leave the one you want. Save and exit. Done, now you can merge or rebase.

This is what the commit history looks like now:

"}},{"title":"How To Use Git Squash","date":"2020-02-27","description":"Git squash can be used to combine several commits into one. This is the easy way to do it.","tags":["git"],"cover":"/covers/png/git-squash.png","aliases":["how-to-use-git-squash"],"slug":"git-squash","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

If you’re at a branch with a lot of commits, be sure to checkout to the latest, or the actual branch.

","text":"If you’re at a branch with a lot of commits, be sure to checkout to the latest, or the actual branch."},"readingTime":"2 min read","body":"

If you’re at a branch with a lot of commits, be sure to checkout to the latest, or the actual branch.

This is the commit history.\nWe only want to include the 3 latest commits, including the current one. Meaning we will merge these three.

The code is very simple. You have two different alternatives.

# this will take the 3 latest commits, including the current one.\n> git rebase -i HEAD~3\n\n# you can also use the commit hash before the one you want to use\n> git rebase -i b1e1d4f

If you choose to use the commit hash, for example, these three will be included if you use the hash with the arrow.

Your text editor will open and look something like this. These are the 3 commits we choose.

Replace pick with squash (or s) for those you want to combine. The main one should still have pick. Save and exit.

Now, a window with all commit messages will pop up.

Comment out the commit messages of the commits you want to squash and edit the message of the one you want to persist.

Comment out all the commits you don’t want to use, and only leave the one you want. Save and exit. Done, now you can merge or rebase.

This is what the commit history looks like now:

","next":{"title":"How To Git Squash Earlier Commits","date":"2020-02-28","publishdate":"2020-02-28T00:00:00.000Z","lastmod":"2020-02-28T00:00:00.000Z","description":"Sometimes you want to squash, or combine, earlier commits back in your history. This is one way you can do that.","tags":["git"],"cover":"/covers/png/git-squash-earlier.png","aliases":["how-to-git-squash-earlier-commits"],"slug":"git-squash-earlier","isIndexFile":false,"category":"git","component":{},"preview":{"html":"

These are the two messages we want to squash into the earlier one (2 - added one file and squashed).

","text":"These are the two messages we want to squash into the earlier one (2 - added one file and squashed)."},"readingTime":"1 min read","body":"

These are the two messages we want to squash into the earlier one (2 - added one file and squashed).

Do an interactive rebase on at least 2 commits before the ones you want to squash, in this case 1 - removed all files.

> git rebase -i <hash-commit>

Use either s or f to the commits (or squash or fixup).

squash - modify commit message
fixup - remove commit message

The two commits that should be changed are now added. Save and exit to go to the next file.

Comment out the commit messages that you want to change and rewrite the earlier commit (earlier named 2 - added one file and squashed), now named whatever you want.

Save and the files will now be squashed with the earlier commit. This is how it looks now:

"}}]