DEV Community: Jon Stødle

Paying For Search

Jon Stødle — Thu, 16 Feb 2023 23:00:00 +0000

I've been using DuckDuckGo for years, and I've been happy with the search results. However, I recently tried to search for places that sold the Sami flag, but DuckDuckGo was stumped. Google however found 2 places immediately. This coincided with a discussion at work about search engines and which ones people were using. Long story short, after some browsing I landed on trying out Kagi.

Kagi has a free trial of 50 searches per month, for more than that you'll have to pay for a subscription. After trying 50 searches - including a search for places that sell the Sami flag - I was satisfied with the results it gave me. I took the leap and paid for a monthly subscription.

While a yearly subscription is cheaper, I'll stick with the monthly for now, before taking an even bigger leap of faith and comit to a whole year.

One of the things I like about Kagi is the ability to use !bangs, just like I did with DuckDuckGo. In fact, Kagi reuses the !bangs from DuckDuckGo, saving me from unlearning a habit I've become incredibly fond of and reliant on.

Kagi also let's you use different "lenses" when searching. As a programmer I frequently search for problems related to my work. By turning on the Programming lens, Kagi will prioritize results related to programming. A search for rust with the programming lens on filters away results related to Rust the game and Rust the movie. Kagi also has lenses called Academic, World News, and Forums, to mention some.

You're also able to manually rank websites. You can raise or lower the ranking, block the site entirely, or pin it, to make it show up at the top of the results every time.

The price of the subscription is $10, which is steep, but they have a whole FAQ answer on why the price is so high: they know the price of a single search and based on an estimated average number of searches per paying user, they've set a price that should cover the cost. That also includes covering the cost of the free trial searches. While paying users are searching more than the estimate at the moment, they hope that number will fall to make the $10 price point viable.

I can actually see what my consumption is costing them. Of the $10 I've paid them for the current billing cycle, I've spent $1.41. I get a little heart and a thank you for my contribution to further development.

Will I keep paying? We'll see, but so far I'm very happy with Kagi. I'm also the kind of person who pays for their email provider, so paying for search isn't a huge leap.

Tiny Container Images With Distroless Containers

Jon Stødle — Sat, 16 Oct 2021 00:00:00 +0000

When deploying applications using containers, it's usually a goal to minimize the size of the container image.

Achieving a small container size varies a lot between different languages and technologies. There is no single solution that will work for everyone, as usual, but there’s a pretty interesting alternative if you’re deploying Rust, D, Go, Java or node.js applications.

Google maintains a repo of what they call distroless containers. These are container base images that contain as little as possible. They’ve stripped away pretty much everything until you’re basically left with libc and not much more. There isn’t even a shell included!

Another nice benefit of the distroless images, apart from the size consideration, is the security. With so few tools and executables inside the container it increases the difficulty of being able to do much if you manage to get access to it. Less code, means less bugs and vulnerabilities.

To start using one is pretty simple. Build your application and copy the final binary into the image based on one of the distroless images:


FROM golang:1.13-buster as build

WORKDIR /src

COPY . /src

RUN go get -d -v ./...

RUN go build -o /go/bin/app

FROM gcr.io/distroless/base-debian10

COPY --from=build /go/bin/app /

CMD ["/app"]

It’s important to note that you have to use the for [“/app”] when defining a CMD or ENTRYPOINT command in the docker file. If you use the “bare” form, e.g. CMD “/app” , Docker will prepend the command with a shell which will not work, as there’s not shell inside the distroless container.

And that’s it!

Check out their repo on Github for more information.

Happy coding!

How the useState Hook Works

Jon Stødle — Tue, 12 Jan 2021 00:00:00 +0000

I recently tried to explain to a friend how the useState hook works in React. I thought my analogy was quite a good one, so here goes!

Imagine React has a large warehouse where it can store information you don't want to reset every time React updates the view. We'll call this warehouse Central Storage.

To be able to store information in Central Storage, we'll have to reserve shelf space. We reserve shelf space by calling useState. useState takes a value which will be the default information stored in your shelf space.

useState returns an array with two items:

A fresh copy of the information stored in your shelf space. We'll receive a fresh copy every time React updates the view.
A function which let's us overwrite the information stored in your shelf space. To permanently change the information, which we receive a copy of in 1, we have to call this function with the new information.

Our code will look something like this:


const shelfSpace = useState("Hello World!");// ^ ^ ^ // | | | // ∟ Array containing a copy of the information stored in your shelf space, and a function to overwrite // the information stored in your shelf space // | | // ∟ "Reserve shelf space" // | // ∟ Store "Hello World!" in the shelf space when reserving the shelf spaceconst message = shelfSpace[0];// ^ ^ // | | // ∟ Store the copy of the information in your shelf space in a more conveniently named variable. It has a // name which better describe the information. // | // ∟ The copy of the information will always be the first item in the array returned by // useState. At index 0, in other wordsconst overwriteMessage = shelfSpace[1];// ^ ^ // | | // ∟ Store the function for overwriting the information in your shelf space in a more conveniently // named variable. It better describes what the function does. // | // ∟ The function for overwriting the information in your shelf space will always // be the second item in the array returned by useState. // At index 1, in other words

We don't have to use three lines of code for every reservation i Central Storage. We can shorten it to this:


const [message, overwriteMessage] = useState("Hello World!");// ^ ^ // | | // ∟ "Unpack" the list returned by useState and store the first item in the array (index 0) // in a variable named `message` // | // ∟ Store the second item in the array (index 1) in a variable named `overwriteMessage`

When making changes to our copy of the information we've received from Central Storage, those changes will not show up in your shelf space in Central Storage automatically. We have to explicitly ask for the information in your shelf space in Central Storage to be overwritten.

Even if we update the variable message in your code...


const [message, overwriteMessage] = useState("Hello World!");message = "Hello Programming!";

... it won't change the information in your shelf space in Central Storage. We've just modified our copy of the information. The next time React updates the view, it will fetch a fresh copy of the information in Central Storage - not containing the changes you just made.

To store your changes, we'll have to explicitly overwrite the changes in your shelf space in Central Storage:


const [message, overwriteMessage] = useState("Hello World!");message = "Hello Programming!";overwriteMessage(message)// ^ // | // ∟ Overwrite the information in your shelf space in Central Storage with our changed copy

Hope this helps someone better understand the concept of the useState hook.

Happy coding!

Set Up A Global .gitignore

Jon Stødle — Sat, 09 Jan 2021 00:00:00 +0000

If you've been using git for any amount of time, you've come across .gitignore. I'm not going to go through how it works, but did you know you can set up a global .gitignore?

What do you put in this global .gitignore? My recommendation is caches and auto-generated files and directories created by your operating system, and your editor/IDE of choice. I share my .gitignore across multiple operating systems, so I've ended up with quite a comprehensive one.

As a starting point, I think this one works pretty well: global .gitignore starting point

What to put in the repository .gitignore? I recommend putting caches and auto-generated files and directories created by tooling used by your code or on your code, and auto-generated files and directories specific to the repository.

My rule of thumb for where to put a specific ignore clause is to consider at what "level" the choice was made to use the tool that creates the files and directories I want to ignore were made. Personal choices, like what operating system to use, which editor or IDE, etc are ignored in the global .gitignore. Choices made for a specific repository is put in the local .gitignore.

Even though a lot of you repositories share the same ignore clauses (all your JavaScript repositories ignore node_modules, for example) - don't put that in your global ignore. That just means that someone else is going to commit node_modules by accident.

You can put your global .gitignore wherever you like in your file system. Personally I prefer my home directory. Then you tell git where the global .gitignore file is located by saving it to the git config:


# macOS / Linuxgit config --global core.excludesfile ~/.gitignore# Windowsgit config --global core.excludesfile %USERPROFILE%\.gitignore\*\*

Happy coding!

Alpine.js

Jon Stødle — Thu, 31 Dec 2020 00:00:00 +0000

jQuery has been a great way to quite easily add some interaction to your static HTML, but it might start to feel a bit heavy-handed once you start trying to coordinate multiple parts of the page.

Wouldn't it be nice if there was a way to set up this interactivity a bit more declaratively?

Enter Alpine.js

Add Alpine to your page like this


<script src="<https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js>" defer></script>

You're then able to declare simple components, directly inside your HTML:


<div x-data="{ open: false }"> <button @click="open = true">Open Dropdown</button> <ul x-show="open" @click.away="open = false" > Dropdown Body </ul> </div>

x-data indicates the root element, and the initial state of your component. The children of that element are now able to listen to events with the @<event name> syntax. Alpine also has some shortcuts, such as x-show which hides or shows an element.

Alpine's choice in style is lifted straight from Vue, so if you're somewhat familiar with Vue, you should feel right at home with Alpine's vocabulary.

Speaking of Vue, it's also possible to create reusable components:


<div x-data="dropdown()"> <button x-on:click="open">Open</button> <div x-show="isOpen()" x-on:click.away="close"> // Dropdown </div> </div> <script> function dropdown() { return { show: false, open() { this.show = true }, close() { this.show = false }, isOpen() { return this.show === true }, } } </script>

dropdown returns an object which contains all the component code: state is defined using fields and functions are declared in the standard way.

Setting x-data to the result of dropdown makes the fields and functions available to all child elements. Use this to easily reuse some logic.

Stimulus

Another framework trying to do much of the same thing is Stimulus: Use your existing HTML and sprinkle in some JavaScript.

I'm not completely sold on Stimulus. I think it's the right idea, but it's not executed as elegantly. Alpine feels a bit less in your way, but that's just a personal preference.

Closing thoughts

If you're in need of some interactivity on your so far static page, really give Alpine a look. I've had success with it so far when all I need is a bit of sprucing up in my static HTML.

Happy coding!

You're Allowed To Write Slow Rust Code

Jon Stødle — Thu, 01 Oct 2020 06:31:19 +0000

There's a thing that comes up from time to time in the Rust community: people wanting to optimize their code. Make the code run faster. Make it allocate less memory. These are worthy goals, but maybe not necessary for all projects. Just because your program is written in Rust, it doesn't have to be optimized to the moon and back to do it's job. In a lot of cases, you'll be fine using .clone().

There's a fantastic quote from a discussion on the Rust user forums which I always think of when these discussions emerge:

Just because Rust allows you to write super cool non-allocating zero-copy algorithms safely, doesn't mean every algorithm you write should be super cool, zero-copy and non-allocating.

-- trentj on The Rust Programming Language Forum

Of course there's a time and place for super cool no-allocating zero-copy algorithms, but very often it's not the time, nor the place. You can write fantastically effective code with Rust, but you don't have to! A lot of the time it's entirely fine to just write code that works with minimal effort. You don't have to spend 4 days trying to figure out how lifetimes work just to avoid calling .clone() a few times.

Don't spend time trying to make micro optimizations now. Take the easy route. You'll probably come back to that piece of code in a few months time, smile, and change that .clone() to something more efficient.

Happy coding!

NB: Watch this video by Jon Gjengset if you want a good, pragmatic walk through of lifetimes in Rust.

An Analogy for Multi Tasking

Jon Stødle — Tue, 15 Sep 2020 13:44:02 +0000

A lot of times the words concurrency and parallelism are used interchangeably or used incorrectly. I'd like to present this analogy as a way to understand the difference.

Synchronous Work

Let's start with the most straight forward term: synchronous. In programming this means that work is done in a sequential order, no working on multiple tasks at once. In the context of code, this means each line is executed after the one before it (disregarding loops, and what not).

Imagine a carpenter making a simple wooden chair: They saw and cut the different pieces, sand them down, paint them, wait for the paint to dry, then assembles the pieces, creating a finished product.

All of this is done in sequence, one after the other. Even waiting for the paint to dry is done in sequence, meaning that no other actions are done while waiting - not even working on other chairs.

Concurrency

Concurrency is a sort of time share. Instead of waiting for a process to resume work, we'll do something else in the meantime. Why sit around waiting for a mouse click from the user while there's other work to do? We can get back to handling mouse clicks once there are any mouse clicks to handle.

To continue the analogy with the carpenter: This time when the carpenter makes the chair the steps are the same, but multiple chairs are made at the same time. After sawing, sanding and painting the wooden pieces, instead of waiting idly while the paint is drying the carpenter starts working on a new chair.

When there's time to spare, and there's work to do, we can do that concurrently.

Parallelism

Parallelism only became a thing when CPUs gained multiple cores. Now computers were truly able to do multiple things at the same time. Instead of jumping back and forth between tasks when there are a bit of spare time, parallelism is doing multiple things at the exact same moment.

This time, the carpenter has been cloned. There are now multiple copies of the carpenter, all making chairs at the same time. They saw, sand, paint, wait and assemble at the same time.

Remember that each individual carpenter is still capable of working concurrently. They don't need to wait idly while the paint dries. Each carpenter works concurrently, while working in parallel with the other carpenters.

Hope this helps clearing the terms up a bit.

Happy coding!

PSA: delegate is a Thing

Jon Stødle — Mon, 31 Aug 2020 21:35:46 +0000

This is just a short reminder to all C# developers defining and implementing interfaces with a single method:

What you are looking for is delegate

A delegate is a way to define the signature of a method. It can then be implemented by a Func, an Action or class method, whichever fits the best.

They even work nicely with dependency injection: a delegate is just a definition, not an implementation. If you want to preserve testability, that's taken care of: in tests you can just pass in a dummy implementation by way of a Func or Action; no mocking framework needed.

Here's an example

// Definition
public delegate void SendEmail(string recipient, string sender, string subject, string message);

// Registering with a DI system
services.AddTransient(_ => (recipient, sender, subject, message) => { /* Implementation */ });
// or
services.AddTransient(_ => StaticClassWithImplementation.StaticMethodImplementingDelegate);

// In testing
var systemUnderTest = new ClassThatNeedsToSendEmails((_, __, ___, ____) => { log.Info("Sent email"); });

Don't overcomplicate with interfaces and classes, what could simply be a delegate.

Type Safety Doesn't have to be All or Nothing

Jon Stødle — Mon, 27 Apr 2020 19:51:38 +0000

One argument I sometimes hear against Rust is that if you have to use unsafe, there's no point in using Rust, you might as well go with the old familiar C++, or some other performant/preferred language of choice.

This argument always annoys me. As if the fact that you sometimes need (or want) to go outside of the safety net of the compiler, means that all the other benefits of the Rust type system, borrow checker and compiler is null and void.

unsafe is kind of a misnomer, because what the keyword gives you is not necessarily an unsafe block of code. What it does give you is a block of code that has been error checked by a human, not the compiler. unsafe is more appropriately compiler, I know what I'm doing, skip checking this code. This is similar to how an entire program might be written in other languages.

The huge benefit with Rust, on the other hand, is that the code that's manually checked by a human is contained within clearly sectioned blocks, and they are usually (but might not be) fairly small. Most Rust programmers prefer not to spend too much time outside the safety of the compiler checks.

Another way to put this, in a crass way, is saying that wearing a seat belt has no benefit; you might die from a crash anyways, so what's the point of the hassle of putting it on?

This short post was inspired by a person's colleagues not seeing the benefit of strict checking of 90% of the program, because 10% had to be manually checked.

Happy coding!

You Need to Know About Git Worktree

Jon Stødle — Mon, 30 Mar 2020 18:24:06 +0000

I’ve been using Git for source control for many years, but there’s still lots of things you can do in Git that I haven’t even discovered yet. git-worktree was one of those things. Thanks to codingblocks.net for mentioning this in one of their episodes.

The problem

I often find it’s useful to explain the problem before describing the solution; so here goes:

If you are working in a team or on an open source project with multiple contributers, you might get the need to check out another branch. This is easily done, but it becomes a bit of a hassle if you have a lot of uncomitted changes. You could put all those changes in a stash, but then you usually end up with a huge pile of stashes over time because you never take the time to clean up. What you really want is the ability to check out two (or maybe more) branches at the same time.

The solution

Enter git-worktree!

With this simple command you’ll be able to check out a different branch in your repository, in a seperate directory. It looks like and is used like a regular git repository, but it allows you to have multiple active working trees in the same repository at the same time. Here’s how to get going:

git worktree add ../another-directory

This will create a new worktree in another-directory, which is a sibling of the current directory. At the same time it will also create a new branch with the same name as the directory.

If you’d like to specify the branch name, you can use the -b <branch-name> option:

git worktree add -b new-branch ../another-directory

It’s also easy to check out an existing branch in the new directory by specifying the name of the branch:

git worktree add ../another-directory existing-branch

In this case existing-branch already exists in the repository. You can actually specify anything commit-ish (as it’s called in the documentation) as the last argument, be that a branch name or a commit hash for example.

If you want to remove the worktree you call… eh, remove:

git worktree remove ../another-directory

All your commited changes will be present in the main repository, as if you had done the work there.

For me, this has been a life saver in hassle when checking out branches for code review, or for doing a quick fix on a branch that’s been reviewed. Hope it helps you too.

Happy coding!

If Statements With Nullable Bools

Jon Stødle — Mon, 17 Feb 2020 19:04:56 +0000

Nullable bool in C# might sometimes feel a bit of a hassle to work with. I’m here to give you a few tips that took me embarrassingly long to pick up on. I’m hoping this saves you some hassle too.

`HasValue` and `Value`

These properties are present on Nullable<T> and have been since generics where introduced. It took me too long to notice them, so here they are. No need to write

bool? nullableBool = true;
bool regularBool;

if (nullableBool != null)
{
    regularBool = (bool)nullableBool;
}

when you can write

bool? nullableBool = true;
bool regularBool;

if (nullableBool.HasValue)
{
    regularBool = nullableBool.Value;
}

HasValue returns true if nullableBool is not null and Value returns a regular bool if nullableBool is not null.

Value also works a lot better when chaining methods:

bool? nullableBool = true;

((bool)nullableBool).ToString();
// or, simply
nullableBool.Value.ToString();

I think the second option is a lot more readable.

`GetValueOrDefault`

This method on Nullable<T> might not always save characters, but it’s very clear in it’s intent, which I believe accounts for a lot.GetValueOrDefault makes it clear what your code does.So instead of the generic null coalescing

bool? nullableBool = true;
bool regularBool;

if (nullableBool ?? false)
{
    regularBool = nullableBool.Value;
}

you can explicitly say that you want a default value

bool? nullableBool = true;
bool regularBool;

if (nullableBool.GetValueOrDefault(false))
{
    regularBool = nullableBool.Value;
}

As I said, GetValueOrDefault doesn’t necessarily save on characters, but it’s clearly states what you want. This too works better when chaining methods:

bool? nullableBool = true;

(nullableBool ?? false).ToString();
// alternatively
nullableBool.GetValueOrDefault(false).ToString();

Direct variant checking

Again, this is one of those things that took me too long to figure out, so here goes. A simple boolean check might look like this:

bool regularBool;

if (regularBool)
{
    // some code...
}

but that doesn’t work with a bool?, so I used to do something like this

bool? nullableBool = true;

if (nullableBool.HasValue && nullableBool.Value)
{
    // some code...
}

bool? nullableBool = true;

if (nullableBool ?? false)
{
    // some code...
}

Turns out, you can just do this instead:

bool? nullableBool = true;

if (nullableBool == true)
{
    // some code...
}

nullableBool == true will evaluate to false if nullableBool is either false or null, in other words: not true. It seems so obvious in retrospect, but I’d become so accustomed to writing if (regularBool) ..., instead of if (regularBool == true) ..., that it didn’t occur to me to write it out in full for bool?s.

The other `Nullable<T>`s

This does work for the other nullable primitive types too. You can for example shorten this

int? nullableInt = null;
int regularInt;

if (nullableInt.HasValue && nullableInt == 100)
{
    regularInt = nullableInt.Value;
}

int? nullableInt = null;
int regularInt;

if (nullableInt == 100)
{
    regularInt = nullableInt.Value;
}

There’s also this case:

int? nullableInt = null;
int regularInt;

if (nullableInt < 100)
{
    regularInt = nullableInt.Value;
}

nullableInt < 100 will evaluate to true if nullableInt has a value, and that value is less than 100. It will however evaluate to false if nullableInt is null. Which one could argue is correct, as nullableInt isn’t a number lower than 100, it’s null (which isn’t a number at all).

I hope you found this interesting, or at least helpful.

Happy coding!

Running Personal Projects for Free

Jon Stødle — Fri, 31 Jan 2020 16:07:14 +0000

I have some personal projects, which consists of some simple web apps and some data they need to store, and I’ve always wanted to run them as cheap as possible. My current solution has them running at no cost at all.

Requirements

It’s worth mentioning that these projects don’t have very high requirements. They’re mostly used by me and some of my family, which doesn’t amount to much traffic or storage at all.

Frontend

I have a couple of sites which are just statically generated web pages (like my blog), and a few web apps written with Svelte. All of this I host on Netlify.

Netlify is easy to set up and get started with, but they have a lot of nice advanced features too. You can get started for free and host as many sites as you like.

They have built-in support for automatic deploys from Github. It’s easy to set up and they even build your frontend project for you.

Backend

My backend is split in two: the logic and the database.

The logic

I have some code that I want to run on a server. It’s basically a few REST APIs fetching and formatting some data. All of this logic I’m running as serverless functions through Netlify Functions.

They support writing the functions in Javascript or Go. And you get 125,000 free requests to the functions each month with each site you host on Netlify. I’m not going to hit that limit for a while yet.

Netlify Dev

Netlify recently launched a new feature with their Netlify CLI tool called Netlify Dev. Netlify Dev let’s you spin up their server backend locally, making it very easy to develop your site with Netlify in mind.

Netlify Dev hosts your web app and any associated serverless functions in your project, locally. It even fetches any secret/environment variables you have stored for the site from Netlify and exposes them to the local environment.

I use this all the time when working on my web apps.

I originally intended to write the serverless functions in Go, but Netlify Dev only support Javascript functions, and will do so for the forseeable future 😔.

The database

And, finally, the database. I’ve only recently found a proper (in my mind) solution for this.

I started out using Airtable for storage. They have a nice mobile app which made it easy for my significant other to enter new data, and they expose a pretty decent API for getting the records out of the database.

My problem with Airtable, however, have always been their unwieldy query syntax and the fact that users of a table can change the names of the fields the JSON object you get from the REST API. If my significant other changes the name of a column from Description to description my frontend code breaks…

So, for a while I’ve been wanting to move over to a “proper” database, and I recently made the move to MongoDB. They have a, relatively, new offering called MongoDB Atlas which let’s you run managed MongoDB servers on any of the three big cloud providers (Azure, AWS, Google Cloud).

When I first heard about it I didn’t even consider it an option, until I realised they have a free tier! Up to 512MB of storage. Which, again, is more than enough for me. At the moment I’m consuming something akin to 1MB.

MongoDB Atlas is super easy to set up too. You specify you want the free tier, which provider you want to use and which region to run the server in. After that, you’re up and running in a couple of minutes.

MongoDB also has a nice data explorer called Compass which let’s you view and edit your database structure and documents.

My current running cost for my 10 web apps/sites is the total of NOK 0. I’m pretty happy with that, I have to say 😁

DEV Community: Jon Stødle

Paying For Search

Tiny Container Images With Distroless Containers

How the useState Hook Works

Set Up A Global .gitignore

Alpine.js

Enter Alpine.js

Stimulus

Closing thoughts

You're Allowed To Write Slow Rust Code

An Analogy for Multi Tasking

Synchronous Work

Concurrency

Parallelism

PSA: delegate is a Thing

What you are looking for is delegate

Type Safety Doesn't have to be All or Nothing

You Need to Know About Git Worktree

The problem

The solution

If Statements With Nullable Bools

HasValue and Value

GetValueOrDefault

Direct variant checking

The other Nullable<T>s

Running Personal Projects for Free

Requirements

Frontend

Backend

The logic

Netlify Dev

The database

What you are looking for is `delegate`

`HasValue` and `Value`

`GetValueOrDefault`

The other `Nullable<T>`s