\n```\n\nIn css modules we work with objects like any object in javascript:\n\n```javascript\nimport styles from './article-overview.module.css' \n```\n\n```jsx\n
\n```\n\nAnd.. we can even use named imports:\n\n```javascript\nimport {classname1, classname2 } from './article-overview.module.css' \n```\n\nWhich would give us warnings or errors(configurable) when for example misspelling an import after a rename:\n\n\n\n## Naming\n\nThe rendered css content might be more clear when using global css depending on how you name your css classes.\nWhen using global css I like to prefix classes with the filename to make sure it's unique. In example:\n\n```css\n.article-overview-container {\n border-bottom: 1px solid #f1f1f1;\n margin-bottom: 30px;\n padding-bottom: 30px;\n}\n```\n\n`article-overview` is the prefix and `container` is the intended name.\n\nWith css-modules a prefix and suffix is automatically added to the css classnames.\n\n```css\n.container {\n border-bottom: 1px solid #f1f1f1;\n margin-bottom: 30px;\n padding-bottom: 30px;\n}\n```\n\n\n`Red = filename + module. blue = classname, teal = hash.`\n\nNote that this is the default naming convention for gatsby. There are other ways to set up your naming conventions by configuring the css-loader.\nSee `localIdentName` at \n\nMy convention in this example is: `[filename]-module--[classname]--[hash]`\n\n## Conclusion\n\nCss modules give us a way to ensure that a css file is unique across components and not accidentally accessed elsewhere. This can be especially useful when working in bigger solution across many different teams. It can also gives us type-safety when using named imports to reduce the chance of importing a class that isn't defined.\nIt can though be a bit harder to find the actual css file from a classname. Nonetheless, knowing the naming convention would help a lot to resolve that.\n\nHappy Coding!\n"},{"slug":"wordpress-to-gatsby","title":"Moving from wordpress to gatsby","date":"2021-03-14","tags":["gatsby","react","graphql","css"],"url":"https://www.rasmusolsson.dev/posts/wordpress-to-gatsby/","excerpt":"I few weeks ago I decided to move on from wordpress and build my own site. Wordpress have served me well for the past 2 years but as a developer it has always felt a bit to much bl...","content":"\nI few weeks ago I decided to move on from wordpress and build my own site.\nWordpress have served me well for the past 2 years but as a developer it has always felt a bit to much black-box.\n\nIn this post I will go through my new setup with gatsby.\n\n## Gatsby\n\nGatsby is a framework that is particularly used to build static pre-compiled websites.\nIt is built on top of react and you can extend it to render dynamic pages like any react application.\nIt:\n\n- has flexible graphql api with graphiql (a helpful interface) to query and mutate data\n- offers a rich amount of plugins that can be configured\n- supports both Typescript(@types) and Javascript\n- describe posts through .md or .mdx files. Regular markdown files(.md) and markdown combined with custom react components(.mdx) for more customization.\n\n## Hosting the site\n\nI went with Netlify.\nNetlify has great supports for gatsby, pre-configured build templates, a generous free tier, let's encrypt(free SSL), dns, github integration and easy to configure CI/CD.\n\n\n\n## Daily usage\n\nWhen I write a post with gatsby I write it as a .md file in vscode. After that I push the code to github. This then notified netlify which starts the CI/CD builds. The artifacts are then uploaded to the new site with the added post.\n\nThis means that I need to redeploy the site in order to add a post. I don't use any database, and the deploy only takes a few minutes so I think that is a good trade of(to not pay for a database).\nThere are options to integrate gatsby with data sources. You can then store the .md files in a database and use the graphQL API to query it.\n\nMore about different data sources can be found here: \n\n## Site speed\n\nThere are many benefits of using gatsby for good site speed. It's pre-compiling the site into static pages and a lot of the computation is made on compile time. \nGatsby also benefits from SPA and only re-renders parts of the application on route changes.\n\n## Costs\n\n- Netlify free tier\n- Let's encrypt (free SSL)\n- Domain name (still using Godaddy from my previous wordpress setup)\n\nWhen down from about 150-200$ to around 10£ a year.\n\n## Gatsby plugins\n\nAt the time of writing, I use a the following gatsby plugins:\n\n```javascript\ngatsby-plugin-typescript //typescript support\ngatsby-plugin-sharp //gatsby-transformer-sharp for loading .md files and images\ngatsby-plugin-react-helmet //to manipulate the tag in html (mostly) for SEO\ngatsby-plugin-feed //RSS feed\ngatsby-plugin-manifest //manifest file, PWA, add to home screen and logo's\ngatsby-plugin-offline //offline mode, pre-caching\ngatsby-plugin-sitemap //sitemap\ngatsby-plugin-google-gtag //google analytics\n```\n\n## Conclusion\n\nGatsby is a great choice if you know a bit of frontend web-development. Its easy to get started and setup and offers a wide range of plugins. Its very fast, backed by a big community and built on top of react.\n\nMore about gatsby:\n\n- Home \n- Tutorial: \n- Course: \n\nHappy Coding!\n"},{"slug":"productive-with-the-terminal","title":"Productive with the Terminal","date":"2021-02-07","tags":["powershell","productivity","devops"],"url":"https://www.rasmusolsson.dev/posts/productive-with-the-terminal/","excerpt":"When I’m working on a long running project, It’s not unusual to be working in a specific area of the code base for a while. Being productive with the terminal and take time to set...","content":"\nWhen I’m working on a long-running project, It’s not unusual to be working in a specific area of the code base for a while. Being productive with the terminal and take time to set up terminal automation may save a lot of time in the long run.\n\nIn this post I will show some of my techniques I do to be more productive. I will be using PowerShell on Windows Terminal in this example.\n\nImagine we are focusing the upcoming months in an area involving the following:\n\n- A MSSQL database\n- An .NET Core API\n- A React SPA frontend\n- A normal morning would include:\n\nA normal morning could like something like:\n\n1. Turn on computer.\n1. Login\n1. Start PowerShell\n1. Cd to git repositories for what I’m working on\n1. Git fetch/pull/rebase to make sure I have the latest code\n1. Start Build + Start IDE’s + Run\n1. Open up available MR’s/PR’s\n1. Open up the issue management system for example JIRA\n1. Open up the chat\n\nThat’s quite a lot of manual steps.\n\nLet’s look at how we can automate that.\n\nIn PowerShell, you can add global functions to your profile.\n\n1. Open up PowerShell and edit $PROFILE, for example code $PROFILE\n2. Add a function called Good-Morning\n\n```powershell\nfunction Good-Morning {\n}\n```\n\n3. Step, 3-6 (cd repo, get the latest code, build code, start IDE, run code)\n\n```powershell\nfunction Good-Morning {\n Morning-Frontend\n Morning-Backend\n Morning-Database\n};\nfunction Morning-Frontend {\n wt.exe PowerShell.exe, \"-NoExit\", \"-Command\",\n \"& {\n Push-Location C:\\git-frontend-project \\;\n git pull \\;\n npm install \\;\n code . \\;\n npm start \\;\n }\"\n}\nfunction Morning-Backend {\n wt.exe PowerShell.exe, \"-NoExit\", \"-Command\",\n \"& {\n Push-Location C:\\git-backend-project \\;\n git pull \\;\n dotnet build \\;\n start your-solution-file \\;\n dotnet watch run your-cs-proj\n }\"\n}\nfunction Morning-Database {\n wt.exe PowerShell.exe, \"-NoExit\", \"-Command\",\n \"& {\n Push-Location C:\\git-database-project \\;\n git pull \\;\n docker build -t database . && docker run -it database\n }\"\n}\n```\n\nOk great! Now that we have that out of the way, the rest of the steps will be easy.\n\nStep 7 and 8. Accessing MR/PR’s on github.com and JIRA with chrome.\n\n```powershell\nchrome.exe \"https://github.com\" \"https://jira.com\"\n```\n\nStep 9. Accessing Chat, lets say we use Slack. We bind and access the environment variable.\n\n```powershell\nslack\n```\n\nThat pretty much it, now we have the following morning routine:\n\n1. Turn on computer.\n2. Login\n3. Start PowerShell\n4. Good-Morning\n\nAnd when we feel comfortable, we can add it to start-up resulting in:\n\n1. Turn on computer.\n2. Login\n\nFull script below:\n\n```powershell\nfunction Good-Morning {\n Morning-Frontend\n Morning-Backend\n Morning-Database\n chrome.exe \"https://github.com\" \"https://jira.com\"\n slack\n};\n\n# New Terminal, latest code, build npm, open code, run\nfunction Morning-Frontend {\n wt.exe PowerShell.exe, \"-NoExit\", \"-Command\",\n \"& {\n Push-Location C:\\git-database-project \\;\n git pull \\;\n npm install \\;\n code . \\;\n npm start \\;\n }\"\n}\n\n# New Terminal, latest code, build dotnet, open rider, run\nfunction Morning-Backend {\n wt.exe PowerShell.exe, \"-NoExit\", \"-Command\",\n \"& {\n Push-Location C:\\git-database-project \\;\n git pull \\;\n dotnet build \\;\n start your-solution-file \\;\n dotnet watch run your-cs-proj\n }\"\n}\n\n# New Terminal, latest code, build dockerfile and run\nfunction Morning-Database {\n wt.exe PowerShell.exe, \"-NoExit\", \"-Command\",\n \"& {\n Push-Location C:\\git-database-project \\;\n git pull \\;\n docker build -t database . && docker run -it database\n }\"\n}\n```\n\nHappy Coding!\n"},{"slug":"productive-with-git-aliases","title":"Productive with git aliases","date":"2021-01-31","tags":["git","productivity","devops"],"url":"https://www.rasmusolsson.dev/posts/productive-with-git-aliases/","excerpt":"When I started working as a developer I didn’t actually start with git but with TFS. Nowadays, everywhere I go git is standard and based on google trends (picture below) and my exp...","content":"\nWhen I started working as a developer I didn’t actually start with git but with TFS. Nowadays, everywhere I go git is standard and based on google trends (picture below) and my experience with both of them I will be doubtful that will change anytime soon.\n\n\n\nIn the past weeks, I’ve invested some extra time in revisiting my git aliases and this is my result:\n\n```bash\n[alias]\n a = add\n ac = !\"git a . && git c -m\"\n amend = !\"git c --amend\"\n oops = !\"git commit --amend --no-edit\"\n oopsf = commit -a --fixup\n ap = add --patch\n back = !\"git reset HEAD^1\"\n b = branch\n ba = \"!git for-each-ref --sort='-authordate' --format='%(authordate)%09%(objectname:short)%09%(refname)' refs/heads | sed -e 's-refs/heads/--'\"\n c = commit\n cam = !\"git c -a -m\"\n cm = !\"git c -m\"\n co = checkout\n conf = !\"git config --global --edit\"\n cb = \"!git ba | git grep {$1}\"\n cob = checkout -b\n create = \"!bt() { git co -b BT-$1-$2; git push -u -o merge_request.create -o merge_request.remove_source_branch -o merge_request.title=\\\"Draft: BT-$1 $3\\\"; }; bt\"\n navigate = !git add . && git commit -m 'WIP-mob' --allow-empty --no-verify && git push -u --no-verify\n drive = !git pull --rebase && git log -1 --stat && git reset HEAD^ && git push --force-with-lease\n cleanit = !\"g co . && g clean -df\"\n d = diff\n dt = difftool --dir-diff\n f = fetch\n last = log -1 HEAD --stat\n lg1 = log --graph --abbrev-commit --decorate --format=format:'%C(bold blue)%h%C(reset) - %C(bold green)(%ar)%C(reset) %C(white)%s%C(reset) %C(dim white)- %an%C(reset)%C(bold yellow)%d%C(reset)' --all\n la = \"!git config -l | grep alias | cut -c 7-\"\n p = push -u\n pu = pull --rebase\n r = reset\n rl = reflog\n rs = reset --soft\n rsl = reset --soft HEAD~1\n rh = reset --hard\n rhl = reset --hard HEAD~1\n rb = rebase --interactive\n rbas = rebase --autosquash --interactive \n rba = rebase --abort\n rbc = rebase --continue\n rbs = rebase --skip\n please = push --force-with-lease\n t = !\"git lg1\"\n st = status\n```\n\nMany of them are self-explanatory but some might need some explanations.\n\nIf you noticed closely, I didn’t have any git merge aliases. I have been dropping them out going forward. From 1 of Jan 2021, I’ll go with git rebase completely due to cleaner git history and to have more control over what’s going on.\n\nWhen I’m playing around locally, I sometimes want a simple restart button.\n\n```bash\ncleanit = !\"g co . && g clean -df\"\n```\n\n`git ba` Will list all branches order by last modified\n\n```bash\nba = \"!git for-each-ref --sort='-authordate' --format='%(authordate)%09%(objectname:short)%09%(refname)' refs/heads | sed -e 's-refs/heads/--'\"\n```\n\nThe `git lg1/lg2` is just some nice git log formats that I found on stackoverflow.\n\n```bash\nlg1 = log --graph --abbrev-commit --decorate --format=format:'%C(bold blue)%h%C(reset) - %C(bold green)(%ar)%C(reset) %C(white)%s%C(reset) %C(dim white)- %an%C(reset)%C(bold yellow)%d%C(reset)' --all\n\nlg2 = log --graph --abbrev-commit --decorate --format=format:\"%C(bold blue)%h%C(reset) - %C(bold cyan)%aD%C(reset) %C(bold green)(%ar)%C(reset)%C(bold yellow)%d%C(reset)%n'\"\n```\n\nThe `git la` will list all git aliases.\n\n```\nla = \"!git config -l | grep alias | cut -c 7-\"\n```\n\nLastly, I have bind `g = git`.\nIn bashrc:\n\n```bash\n#g for git\nalias g='git'\nsource /usr/share/bash-completion/completions/git\ncomplete -o default -o nospace -F _git g\n```\n\nIn Powershell, open `$PROFILE`\n\n```powershell\nSet-Alias g git\n```\n\nHappy coding!\n"},{"slug":"advent-of-code-2020-typescript-deno","title":"Advent of Code 2020 – TypeScript & Deno","date":"2020-12-25","tags":["aoc","deno","typescript"],"url":"https://www.rasmusolsson.dev/posts/advent-of-code-2020-typescript-deno/","excerpt":"I’ve been quite busy the past month attending Advent of Code 2020 and spent a lot of time to do the assignments. Advent of code is a puzzle game that occurs during advent, from Dec...","content":"\nI’ve been quite busy the past month attending `Advent of Code 2020` and spent a lot of time to do the assignments.\n\nAdvent of code is a puzzle game that occurs during advent, from December 01-25 and each day has two puzzles.\n\nI decided to go with TypeScript as the programming language on the Deno platform. For the past 6 months, my main programming language at work has been TypeScript and I really like it so far.\n\nWhy deno then..?\n\nTypeScript is a first-class citizen on Deno. It’s made with Rust which makes it fast and secure but on the downside, it doesn’t have a lot of libraries and utilities(yet..) compared to Node.\n\nThe biggest advantage I had doing deno was that you simply do `deno run --allow-read index.ts` to run the TypeScript file directly without having to compile it into js first. You can do this on Node as well by doing for example `tsc index.ts | node index.js` . But deno has the compiler built-in and linting was provided out of the box which in my opinion made deno a better fit.\n\nAll in all, I think `Advent of Code 2020` was very fun and I will definitely attend it again in 2021. I provide some links below if you are interested to have a closer look at the code or the event itself.\n\nAdvent of Code: https://adventofcode.com/2020/\n\nGithub: https://github.com/raholsn/advent-of-code\n\nHappy Coding!\n"},{"slug":"redux-toolkit-typescript-example","title":"Redux Toolkit Typescript Example","date":"2020-11-30","tags":["redux","react"],"url":"https://www.rasmusolsson.dev/posts/redux-toolkit-typescript-example/","excerpt":"In my previous post, I wrote about the new standard of using Redux Toolkit and the beauty it gives on integrating the Redux guidelines into a framework. In Redux Toolkit the last s...","content":"\nIn my previous post, I wrote about the new standard of using Redux Toolkit and the beauty it gives on integrating the Redux guidelines into a framework.\n\nIn Redux Toolkit the last section, advanced tutorials, you can find how to use Redux Toolkit with TypeScript.\n\nhttps://redux-toolkit.js.org/tutorials/advanced-tutorial\n\nIt’s a comprehensive tutorial and covers a lot of details so I thought I could share my experience through a GitHub repository example which puts a lot of pieces together in a basic working application.\n\nFeel free to have a look and if you have any ideas, please let me know in a pull request.\n\nhttps://github.com/raholsn/redux-toolkit-typescript-example\n\nHappy coding!\n"},{"slug":"redux-toolkit-the-new-standard","title":"Redux toolkit the new standard","date":"2020-10-14","tags":["redux","react"],"url":"https://www.rasmusolsson.dev/posts/redux-toolkit-the-new-standard/","excerpt":"As a developer, we regularly read and learn about new frameworks. We read the API documentation and start implementing. After that or in the best case before we even start, we disc...","content":"\nAs a developer, we regularly read and learn about new frameworks.\nWe read the API documentation and start implementing. After that or in the best case before we even start, we discuss the implementation plan with the team. Some questions that maybe be raised:\n\n- Where should we put the logic\n- Should we normalize the data\n- What naming convention should we use\n- Should we use tabs or spaces…?\n\nIf you’ve done Redux before you might have come across the Redux style guide. The style guide is a set of best practices and conversions on how to use Redux. It helps us as developers to come to a convention that is opinionated by the developer of Redux. It helps us come together, clear out unknowns and liking, and produce good code faster.\n\nRedux toolkit is such a guideline, even if it’s not directly part of the “Redux” style guide documentation, it’s still something that the creator of Redux opinionated.\n\n> Redux Toolkit our official, opinionated, batteries-included toolset for efficient Redux development. It is intended to be the standard way to write Redux logic, and we strongly recommend that you use it.\n>\n> - https://redux.js.org/redux-toolkit/overview\n\nThe Redux Toolkit contains utilities and defaults that we usually use in our setup of Redux. For example, including Redux DevTools during store setup and redux thunk out of the box.\n\nIt also comes with great utility functions such as CreateSlice which helps export reducer and action creators with implicit type names which reducing the boiler-plating that Redux can be famous for.\n\nThe Redux Toolkit is designed with openness and flexibility in mind and can be customized in various ways to handle advanced scenarios while still proving default and best practices of Redux, directly inside the framework itself.\n\nIf you haven’t checked out The Redux Toolkit, I highly recommend going through the tutorial, link provided below.\n\nhttps://redux-toolkit.js.org/tutorials/basic-tutorial\n\nHappy coding!\n"},{"slug":"why-docker-dotnet-changes-the-way-we-test-our-applications","title":"Why Docker.DotNet changes the way we test our applications","date":"2020-09-27","tags":["dotnet","docker","devops"],"url":"https://www.rasmusolsson.dev/posts/why-docker-dotnet-changes-the-way-we-test-our-applications/","excerpt":"Docker.Dotnet is a library that you can use to interact with the docker host Remote API. It’s a great library to use if we want to dynamically create containers that need to be con...","content":"\nDocker.Dotnet is a library that you can use to interact with the docker host Remote API. It’s a great library to use if we want to dynamically create containers that need to be controlled within the application.\nSuch as spinning up a local database, RabbitMQ cluster, or an API, while for example, doing integration- and performance-testing.\n\nIf you haven’t heard about Docker.Dotnet, great and don’t worry, I will go through it in this post.\n\nYou might be familiar with using the Docker CLI to pull down and create images on which you start and create container with.\n\nFor example, we can use it to spin up a local Postgres database that our application connects to. We simply open up our terminal and enter this command:\n\n```bash\ndocker run --name some-postgres -e POSTGRES_PASSWORD=mysecretpassword -d postgres\n```\n\nThis works very well while we locally test out applications, as they do not interfere with any shared database such as the databases in the dev environment. We may keep it running after the application restarts- it will just be there when we need it.\n\nThings get a bit more tricky when we want it to happen more dynamically…\n\nLet’s say we want to set up the database precisely before we start our integration- or performance-tests. We will have to manually start it before we run and also remove it when the tests are completed, to make sure it’s in a fresh state for each run. Maybe we can have a custom pre-start build event in our csproj that will setup the database through a command line. But that will also decouple the application tests with the database, which will make it harder to troubleshoot and maintain, especially in the CI environment.\n\nIf the integration- and performance-test could have full control over its external dependencies and replace them with containers, we would have a perfect environment that does not interfere with anyone, is immutable, and fully customizable for our test scenarios. This is where Docker.Dotnet can help us.\n\n## Setting up Docker.Dotnet\n\nAs I want to use this in particular for integration- and performance-testing, my idea is to create a library called Docker.Library that my test project can refer to for spinning up external dependencies.\n\nFirst, we need to download the NuGet package.\n\n```\nInstall-Package Docker.DotNet -Version 3.125.4\n```\n\nWe then create a new class, I call it `DockerHost.cs`\n\n```csharp\npublic class DockerHost : IAsyncDisposable\n {\n private readonly DockerClient _dockerClient;\n public DockerHost()\n {\n _dockerClient = new DockerClientConfiguration(new Uri(DockerApiUri())).CreateClient();\n }\n }\n```\n\nThe DockerClientConfiguration takes a Uri which should point to the docker socket. This varies based on the operation system. I extracted it as a private method.\n\n```csharp\nprivate static string DockerApiUri()\n {\n var isWindows = RuntimeInformation.IsOSPlatform(OSPlatform.Windows);\n\n if (isWindows)\n {\n return \"npipe://./pipe/docker_engine\";\n }\n\n var isLinux = RuntimeInformation.IsOSPlatform(OSPlatform.Linux);\n\n if (isLinux)\n {\n return \"unix:///var/run/docker.sock\";\n }\n\n throw new Exception(\n \"Default socket location was not found. Please review your docker socket location\");\n }\n```\n\nNext thing is to start interacting with docker. We need to be able to pull an image if it does not exist.\n\n```csharp\nprivate async Task PullImageIfNotExist(string image, CancellationToken ct = default)\n {\n var existingContainers = await _dockerClient.Containers.ListContainersAsync(new ContainersListParameters\n {\n All = true\n }, ct);\n\n var exists = existingContainers.Any(x => x.Image == image);\n\n if (!exists)\n {\n await _dockerClient.Images.CreateImageAsync(new ImagesCreateParameters\n {\n FromImage = image,\n }, null, null, ct);\n }\n }\n```\n\nThis will list all images and check if the image exists. If not, it will download and create the new image. The default download location is from docker hub. If you want to use a custom docker repository location, you can provide it as one of the CreateImageAsync parameters.\n\nWe now need to be able to create a container from the image.\n\n```csharp\nprivate async Task CreateContainer(string image,string containerName, CancellationToken ct = default)\n {\n await PullImageIfNotExist(image, ct);\n\n return (await _dockerClient.Containers.CreateContainerAsync(new CreateContainerParameters\n {\n Image = image,\n Name = containerName,\n HostConfig = new HostConfig\n {\n PublishAllPorts = true,\n AutoRemove = true\n }\n }, ct)).ID;\n }\n```\n\nAnd finally we need to start the Container which we created.\n\n```csharp\npublic async Task StartContainer(string image,string containerName, CancellationToken ct = default)\n {\n var containerId = await CreateContainer(image,containerName,ct);\n await _dockerClient.Containers.StartContainerAsync(containerId, new ContainerStartParameters(), ct);\n }\n```\n\nUsing the Docker.Library would look like:\n\n```csharp\nclass Program\n {\n static async Task Main(string[] args)\n {\n\n try\n {\n var dockerHost = new DockerHost();\n await dockerHost.StartContainer(\"postgres\", $\"integrationtest-{Guid.NewGuid()}\");\n }\n catch (Exception e)\n {\n Console.WriteLine(e);\n throw;\n }\n\n }\n }\n```\n\nThis will start a Postgres container.\n\nThat concludes setting up a Docker.Library.\n\nThe source: https://gist.github.com/raholsn/8ab21851341d91f9bd0c7af947765404\n\nDocker.Dotnet: https://github.com/dotnet/Docker.DotNet\n\nIf you would like to take it further by integrating it with your integration-tests. I would recommend using it in conjunction with Microsoft.AspNetCore.Mvc.Testing.\n\nhttps://docs.microsoft.com/en-us/aspnet/core/test/integration-tests?view=aspnetcore-3.1\n\nHappy Coding!\n"},{"slug":"pop_os-system-76","title":"My Pop_OS! & System 76 Laptop","date":"2020-08-27","tags":["geekout","linux","pop_os!"],"url":"https://www.rasmusolsson.dev/posts/pop_os-system-76/","excerpt":"A few months ago I was looking for a new laptop. My demands were quite high… I wanted a super light, easy to carry around laptop that I can do programming on. I also wanted it to h...","content":"\nA few months ago I was looking for a new laptop. My demands were quite high… I wanted a super light, easy to carry around laptop that I can do programming on. I also wanted it to have a pre-installed and hardware adapted Linux distro which could be my primary programming laptop for ad hoc work.\n\nAfter looking around, I come across System76 and my choice was to go with a Lemur Pro.\n\nWhen you buy a laptop from System76 you have to choice to go with either Ubuntu or Pop_OS!. Pop_OS! is basically a fork from Ubuntu which is developed and maintained by System76. The distribution is free to use on any computer but primary adapted to their own made computers. It features a custom gnome desktop and offers out of the box support for both AMD and Nvidia GPUs.\n\n\n\nMy gnome desktop. Downloading the Gnome Tweaks really lets you customize anything you want. It can be found in the Pop!\\_Shop, which in general, is the easiest way to install and maintain applications on Pop_OS.\n\n\n\nThe lemur pro can get quite warm. It runs around 60 C while just browsing the web. It’s on the other hand very quiet – it’s make you wonder if you even have fans running. The problem is that the fans output are located in the gap between the laptop display, which make me feels that the hot air have a hard time escaping.\n\n\n\nOne thing that may be a downfall for most people is that the Lemur pro can’t be order with other keyboard layouts than the EN layout.\nSo writing an arrow function (=>) maybe be hard if you don’t have the ambition to learn EN key layout or plan to use an external keyboard.\n\nI’m in general very satisfied with my Lemur Pro laptop. I think it has some great benefits over my previous Windows 10 laptop. Taking advantage of the fast file system that Linux offers(no time grabbing a coffee while waiting for NPM install 🙂 ). The Pop!\\_store really takes care of the boiler plating app installations that you may be exposed to running Linux.\n\nIf you need a laptop that is easy to carry around while ad hoc, Lemur Pro could be a good choice. I would recommend though, grabbing a bit juicier variant, for example Oryx pro if you’re planning on having it more stationary.\n\nhttps://system76.com/\n\nhttps://github.com/pop-os\n\nhttps://github.com/pop-os/shop\n"},{"slug":"quality-matters-setting-up-sonarqube","title":"Quality matters – Setting up Sonarqube","date":"2020-07-17","tags":["dotnet","sonarqube","devops"],"url":"https://www.rasmusolsson.dev/posts/quality-matters-setting-up-sonarqube/","excerpt":"As a developer you regularly find bad code. The definition of bad code is a very broad topic and many books have been written to cover different techniques to write better code… an...","content":"\nAs a developer you regularly find bad code. The definition of bad code is a very broad topic and many books have been written to cover different techniques to write better code… and reading them is great for learning how to do that.\n\nThe main problem I’ve experience when reading about these techniques is that in practice the single outstanding argument for not writing good code is not that you don’t know how to do it, but rather that you don’t take or have the time to do it.\n\nYou may have a hard deadline, that if you don’t deploy this on Monday morning your business will lose money. That’s a valid argument. So you, the product manager or scrum master is pointing out to create a task in the backlog to clean up that technical dept after the release. This is also a great approach! We have now fulfilled the business needs and the technical dept. But what about those tech debts that you as a developer may have missed or the team conventions that you didn’t follow or that OWASP top 10 issue that you didn’t know about? How can we minimize the risk of them occurring without spending time during a rushed project?\n\nOne tool that can help here is Sonarqube.\n\nSonarqube is a continuous code inspection tool. Whose idea is to statically analyze the source code to prompt for hints, quality improvements, conventions and potential bugs. You can and have to configure Sonarqube to meet your teams expectations and convention. Sonarqube supports many languages and is easy to get continuous by integrating it with your CI pipelines.\n\nTo get started, we need to set up the sonarqube server.\nThe docker-compose file below will set up sonarqube together with the dependent PostgreSQL database.\n\n```yml\nversion: '3'\n\nservices:\n sonarqube:\n image: sonarqube\n expose:\n - 9000\n ports:\n - '127.0.0.1:9000:9000'\n networks:\n - sonarnet\n environment:\n - SONARQUBE_JDBC_URL=jdbc:postgresql://db:5432/sonar\n - SONARQUBE_JDBC_USERNAME=sonar\n - SONARQUBE_JDBC_PASSWORD=sonar\n volumes:\n - sonarqube_conf:/opt/sonarqube/conf\n - sonarqube_data:/opt/sonarqube/data\n - sonarqube_extensions:/opt/sonarqube/extensions\n - sonarqube_bundled-plugins:/opt/sonarqube/lib/bundled-plugins\n\n db:\n image: postgres\n networks:\n - sonarnet\n environment:\n - POSTGRES_USER=sonar\n - POSTGRES_PASSWORD=sonar\n volumes:\n - postgresql:/var/lib/postgresql\n - postgresql_data:/var/lib/postgresql/data\n\nnetworks:\n sonarnet:\n\nvolumes:\n sonarqube_conf:\n sonarqube_data:\n sonarqube_extensions:\n sonarqube_bundled-plugins:\n postgresql:\n postgresql_data:\n```\n\nCopy and paste this into a docker-compose.yml file\n\n```bash\ndocker-compose up\n```\n\nGreat we now have the server running!\n\nNext step is to upload the data. Sonarqube team provides a concept called “scanners” which will help with that.\n\nFor .NET core we can use the dotnet-sonnarscanner which I will show you in this example.\nFor more scanners’ checkout https://docs.sonarqube.org/latest/analysis/overview/\n\nTo install the .NET core scanner we can simply add it though the dotnet CLI.\n\n```bash\ndotnet tool install --global dotnet-sonarscanner\n```\n\nNext step is to use the scanner to upload data to sonarqube server.\n\nTo start, we will tell the scanner to attach itself to the Roslyn compiler.\nWe need to provide /k: “project-key” where project-key is the name of the project on which sonarqube server will place its analysis.\n\n```\ndotnet-sonarscanner begin /k:\"project-key\"\n```\n\nWe trigger the build.\n\n```\ndotnet build\n```\n\nAnd lastly, we turn off the scanner and upload the result. By default, the scanner will look for localhost:9000 which is the same port specified in the docker-compose file.\n\n```\ndotnet-sonarscanner end\n```\n\nThat’s pretty much it. You can now start configuring the rules together with your team. Note though, that you may find already preconfigured templates that can give you a headstart on this. The configuration of rules may be an iterative process so don’t give your self high hopes on the first iteration.\n\nhttps://www.sonarqube.org/\n\nHappy Coding!\n"}]}