DEV Community: Kevin Woblick

Easy date and time localization with the time HTML element

Kevin Woblick — Wed, 03 May 2023 11:56:46 +0000

Did you know there is quite easy way to show localized dates and times on your website? You can use the HTML time element to display dates and times in the user's locale and timezone without having to guess the user's locale, rely on profiles or settings, or doing any backend work.

Let's start with the basics. The time element is used to represent either a time on a 24-hour clock or a precise date in the Gregorian calendar (with optional time and timezone information). The time element can be used with the datetime attribute to represent a machine-readable date/time/period which improves accessibility for both bots and impaired users. The time element is supported by all modern browsers and even Internet Explorer 11.

We use it like this, in this example with a database model from Laravel. Of course, any input can be used.

<time datetime="{{ $post->created_at->toIso8601String() }}">
    {{ $post->created_at->toDateTimeLocalString('minute') }}
</time>

The output will be something like this before doing any magic with JavaScript:

<time datetime="2023-04-16T08:07:28+00:00">
    2023-04-16T08:07
</time>

Even though we will overwrite the content of the time element (2023-04-16T08:07) with JavaScript, it is still important to have some content as a fallback. In case the user has JavaScript disabled, the original date and time will be displayed.

Localizing the date and time

JavaScript offers a convenient method to localize dates and times with the toLocaleDateString() and toLocaleTimeString() methods of the Date object. We can use them to localize the date and time output from above:

document.querySelectorAll('time').forEach($e => {
  const date = new Date($e.dateTime);
  // output the localized date and time
  $e.innerHTML = date.toLocaleString();
  // or output the localized date only
  $e.innerHTML = date.toLocaleDateString();
  // or output the localized time only
  $e.innerHTML = date.toLocaleTimeString();
});

The displayed text will automatically be converted into the user's locale format and timezone, for example:

<time datetime="2023-04-16T08:07:28+00:00">
    16.04.2023, 10:07:28
</time>

That's it. You just enhanced your website with localized dates and times.

This article was first posted on blog.kovah.de

Versionfeeds: Custom RSS feeds for releases of your favorite software

Kevin Woblick — Sat, 18 Mar 2023 10:55:09 +0000

This is my second product launching, and I am quite excited. As with so many useful tools and services, they are born out of a problem that needs a solution. Versionfeeds is exactly that.

I was quite annoyed by the fact, that I had no central place where I could see all the software releases. I use software a lot, be it at my job, to build my side projects, or tools hosted on my NAS at home. It's literally dozens, if not hundreds of tools, packages or even programming languages. And most of them receive updates regularly.

That is why I build Versionfeeds.

What is Versionfeeds

On Versionfeeds, you can create custom RSS feeds, add your favorite software to it and then stay up-to-date with all new releases right in your feed reader.

1. Create a custom RSS Feed

Create your own RSS feeds with a custom title and description. Both the title and the description are used for the actual RSS feed and displayed in your feed reader.

2. Add your favorite Software

To add software to your feed, search for it across multiple providers. All public Github, Gitlab, NPM and Packagist projects are supported. Releases are fetched twice a day. If a project doesn't use releases, tags are fetched if possible.

3. Access your Feed

Each feed has its own, unique RSS URL. The feeds adhere to the official Atom Feed standard and were tested with the W3C Validator. They can be used with any tool that is capable of reading RSS feeds, no matter if it's a commercial service, a desktop app or a self-hosted web application.

Versionfeeds Professional

Versionfeeds offers a free plan, that will stay free forever. The number of feeds and software you can add to them is limited. To add unlimited feeds and software, you can upgrade to the Professional plan at any time. The Professional plan costs $4.90 per month or $49 per year.

👉 Create your first feed on Versionfeeds

Please let me know what your think!

This article was first published on my blog.

How to get all user sessions in Laravel from Redis

Kevin Woblick — Fri, 01 Oct 2021 07:48:11 +0000

I wanted to access all session data for all users in Laravel while using the Redis cache driver. If you have all session data, you can inspect the data associated to that session, do some calculations based on averages across all session, or whatever else you want to do.
Unfortunately, Laravel does not offer any way to just get all user sessions at once. I searched the web for solutions, only to find out that users recommend switching to the database to store user sessions. Obviously, not a solution for any production system, and really not a good solution if you consider the mediocre performance of any database compared to Redis.

How to access all session data in Laravel

So, here's how to access all user sessions stored in Redis. I assume that you use Laravel 8 with PHP 8. You may use this with older PHP versions if you replace the function shorthand with a full function.

use \Illuminate\Support\Facades\Redis;

$keys = array_map(fn($key) => str_replace('laravel_database_', '', $key), Redis::keys('*'));
$data = array_map(fn($data) => unserialize(unserialize($data)), Redis::mget($keys));

If you changed your APP_NAME, replace laravel in the laravel_database_ string with your value.

Example: If your application name is MyApp you should use myapp_database_.

It's really just two lines of code, which should get you something like this:

array:2 [▼
  0 => array:3 [▼
    "_token" => "1jMe1...oWSJe"
    "_previous" => array:1 [▶]
    "_flash" => array:2 [▶]
  ]
  1 => array:9 [▼
    "_token" => "z29O...W3lT"
    "url" => []
    "_previous" => array:1 [▶]
    "_flash" => array:2 [▶]
    "login" => []
    "login_web_59ba...989d" => 1
    "password_hash_web" => "$2y$10$6H...bnS"
    "password_hash_sanctum" => "$2y$10$6H...bnS"
  ]
]

Explanation of the Code

Let us walk through the two lines to get a better understanding of the code.

Redis has no feature to get all data at once. First, we need to get all keys from Redis. Laravel automatically builds the Redis keys based the application name and other parts. To work with the "real keys" later, we have to remove this Laravel-internal string from the key. We do this in the str_replace part, where we remove laravel_database_ from all returned keys. The $keys array then holds the keys for all user sessions.

$keys = array_map(fn($key) => str_replace('laravel_database_', '', $key), Redis::keys('laravel_database_*'));

The next step is to get the data for all those keys. Thankfully, Redis has the MGET command, which lets you get the data for an array of keys. For whatever reason, the data returned is serialized twice. I guess it's one serialization for storing data in Redis and one for actually serializing the session data. Whatever the reason might be, we get the data via Redis::mget($keys) and then loop through all returned datasets and unserialize the string we got from Redis twice.

$data = array_map(fn($data) => unserialize(unserialize($data)), Redis::mget($keys));

The result is an array stored in $data that holds all user sessions as arrays with their corresponding data.

This article was first published on my blog.

The Relaunch of my Portfolio for 2021

Kevin Woblick — Thu, 15 Apr 2021 14:20:16 +0000

My old portfolio at Kovah.de has not received any big updates for years. The design was basically the same. I had fancy browser mockups which contained full screenshots of the websites I made. A few weeks ago I decided that it was about time to relaunch my website together with a new logo.

The new Logo

The logo represents my primary profession as being a Web Developer: the lower/greater signs (< and >) are used in HTML, so I wanted them to be the main part of my logo. I tried various other shapes, variations and also colors. But in the end, I found this new logo the most beautiful thing I've created.

The font used for the logotype and the website is called Nexa, which I bought years ago.

The new Website

The new website was built many years ago and the basic layout, the colors and the overall design didn't change much in the past years. The new version comes with fresher colors, modern soft gradients and bold typography.

While the previous version was built with Hugo as the static site generator, I decided to give Eleventy a chance as I am not that satisfied with Hugo. Instead of writing CSS on my own, 99% of the site is built with Tailwind CSS. Only a few effects are custom styles.

There is not a single line of Javascript.

Performance-wise, I am really satisfied with the results, which is not a miracle if you keep in mind that the site is HTML and CSS with some images and a custom font. In fact, images and the fonts are responsible for 90% of the size of the site. However, fonts contain only a small subset of all available characters in the Latin charset. Images are delivered as jpg, webp and avif so the browser can pick the most suitable format.

Googles Lighthouse testifies the performance with a solid 100. 🥳

If you have any questions, feel free to ask!

Why I have chosen to rewrite one of my Projects from Scratch

Kevin Woblick — Wed, 14 Apr 2021 19:10:34 +0000

Game Quotes is one of my oldest projects. It was launched back in 2013 as a small side project. At that time there was a site similar to what Game Quotes is now: an archive of funny, inspiring or awfully weird quotes from video games. I loved browsing through the archives, but the site seemed abandoned, as no new quotes were added over months. Today, the old archive is gone and with it a handful of great content. Besides that archive, there was no other place on the internet where you could find curated quotes from video games. Game Quotes was born.

Drowning in tech debt

After switching from Wordpress to a custom Laravel application in 2013, the site was basically in a maintenance-only mode. I rarely added new games and only a couple of quotes through the year. The system was first built with Laravel 4.2, which ran out of support and maintenance years ago. Development of the site took quite a while because I had to do so much stuff entirely on my own. But I learned a lot and then the site launched successfully. The following is a screenshot of the site displaying some video game quotes.

I started rebuilding the website with a newer version of Laravel, because the framework made some significant changes, so upgrading was not that easy. Around 2016 I started working on Game Quotes 2 and invested a lot of time into it. Unfortunately, I was too motivated and wanted to build a very sophisticated new site, with some community features like friend requests, teams and chat. Video game quotes should be translatable, and I built a large admin dashboard.
The relaunch was too sophisticated, I spent too much time with details and was just exhausted after some time. Burnout. Game Quotes had to wait, I abandoned the new version, and the old site became a pile of old technical debt. Laravel 4.2 had literally no supported packages anymore and adding new features was risky as I had no tests at all.

Refactoring or Rewrite from scratch?

At the end of 2020 I thought a lot about the future of the project. The old version was unmaintainable, difficult to deploy, and I wasn't motivated to work on it any further. I asked myself a very essential question: does it make sense to refactor the application and slowly move to a newer version of Laravel, or would it make more sense to just start from scratch and port the existing content to the new system?

Refactoring is a long and sometimes painful process. If you are not careful enough, you end in a deep hole of code chaos. I published an article with tips for refactoring code last week. Reading over the list of tips I collected, it became clear pretty fast that it would be too much work to refactor Game Quotes and move to a fresh foundation.

Rewriting, on the other side, was a lot of work too, because you would have to build everything from scratch and then port the old content. However, I am used to the latest versions of Laravel as well as the frontend stack with Tailwind CSS. I am able to build a custom application in a matter of days.

Rewriting Game Quotes from scratch

In February 2021 I made the final decision to throw the old Game Quotes into the trash and start from scratch. I set up Laravel 8 based on my Docker stack together with a minimal Tailwind configuration for the frontend, and then started porting the content.

The first step was to rebuild the current structure of the database together with all models. The current structure was absolutely fine, as it would allow me to migrate the database without any changes in the database fields.
Recreating the models was one of the largest tasks. Laravel 8 makes a lot of things easier than the old Laravel 4. Relations and all database fields were defined in a couple of hours.
After importing the old database, I was able to access the old content without larger issues. I had to change some field types. In just a few hours of work I was able to use the old content within the new foundation.
Fast-forward a few days of work: I crafted the base layout, and most of the existing pages with a first version of the new design.
Next step: admin panel and moderation stuff. This was the largest task, because the old version only had a very minimal, custom-built admin dashboard that allowed me to edit all content. I went with Voyager, because it had all features I needed, and I didn't want to pay a ton of money for a project that has no income yet.
Translations are actually handled via a middleware. I moved from a locale based on the subdomain to a path-based approach. Currently, Game Quotes is available in German and English.
Another big task was to migrate the old URL structure to the new one, which is based on the standard Laravel resource controllers. Quotes, for example, are located under game-quotes.com/en/quote/quote-id.
Last but not least: tests. I wrote a lot of tests for numerous parts of the site. Not everything is tested, but the most important parts.

After two weeks of work, I had the first fully working version of Game Quotes based on the completely new foundation.

The new Game-Quotes.com

Just three weeks after the initial decision I published the new version of Game Quotes. I had done additional stuff to clean up the content, implement proper Schema.org markup and optimize the design. I got a lot of positive feedback and the first submissions for quotes from random strangers on the internet. It was the right decision to rewrite Game Quotes from scratch. I had quickly moved from a pile of tech debt to a modern application that is also more performant.
A week later I released a new feature that was planned for years already: marking quotes as spoilers or NSFW content. The feature is already available and can be used.

In the next weeks I will add more features and finally enable public profiles, so anyone can register. Stay tuned.

This article was first published on my blog

7 things to consider before starting to refactor Code

Kevin Woblick — Sat, 03 Apr 2021 11:32:15 +0000

Refactoring code isn't easy. It is probably one of the hardest things to do in programming. Here are 7 things to consider before starting to refactor any code.

1. Get to know your Code

Take a look at the whole code first and find out its strengths and weaknesses. Make notes about what problems are actually solved very well and where the original writers took shortcuts or hacks to make the thing work and which solutions are actually holding your further development back. Only if you get the whole picture you are able to make reasonable decisions where to start first. You probably want to fix the hacky solutions first before doing "cosmetic" changes.

2. If it's not broken, don't fix it.

Code that works properly without decreasing performance or impacting the application in a highly negative way can probably left as it is. Hacks mentioned in point 1 can result in a poor performance or bugs nobody understands, so fix those. If a solution just looks not nice to you but works, leave it as it is for now.

3. Leave out personal preferences

Personal preferences are not a reason to refactor code! Just because you don't like the structure it doesn't mean it is wrong and needs to be changed.

4. You don't need that new fancy library / framework!

New technology isn't a reason to refactor code, too. Just because there's something new it doesn't mean it is better. A new technology should come with a highly positive impact on the application to be justified. Don't ride the hype train. also consider that new things may not be as battle proven as they should be to be used in production environments.

5. Resist the urge to just rewrite everything.

Existing code, especially if it was shipped to production, may contain sensible workarounds and fixed bugs you don't know. Rewriting everything from scratch can lead to serious issues you can't even imagine yet. Only fix something if it's really broken or results in a poor performance.

6. Take small steps

Many small and easy changes will push the refactoring forward faster than doing one big change. Make incremental changes to the codebase. One big change might consume too much work and time to be completed properly, so you quickly loose the motivation to continue working on it. Collect the "low-hanging fruits" first.

7. Make sur all tests pass

Before committing and shipping any refactored code, make sure all tests pass. Resist the urge to find workarounds and cheat on tests. If tests fail, find out why. Old tests might have some clues on obscure bugs.

This article was first published on my Blog.

Using Laravel Scout with global query scopes

Kevin Woblick — Thu, 11 Feb 2021 08:53:08 +0000

I recently implemented Laravel Scout, Laravel's own full text search package, into one of my projects. One of the models which Scout was enabled for had global query scopes implemented. They are used to defining specific query constraints for all queries run on this model. You must be careful with defining them, as they affect everything done with the model.

Let's say, you have an Article model, which has some database fields that should be indexed, and a language field which is used to query articles per language, because our site is multilingual.

class Article extends Model
{
    public $fillable = [
        'title',
        'body',
        'language',
    ];
}

A global query scope is defined as a separate class and then added to the model. The following scope will add a where() clause to the query, in which the language field is specified, and the current application locale is used.

class LanguageScope implements Scope
{
    public function apply(Builder $builder, Model $model)
    {
        $builder->where($model->getTable() . '.language', app()->getLocale());
    }
}

To make the scope usable for every model, I decided to make it depend on the Model class itself, instead of a specific model. To prevent any issues with relations in other queries, the scope uses a table prefix, which we can get by using $model->getTable(). In our case with the Article model, the where() clause would look like this: $query->where('article.language', 'en').

To enable this global scope, add it to the models booted() method:

class Article extends Model
{
    public $fillable = [
        'title',
        'body',
        'language',
    ];

    protected static function booted()
    {
        static::addGlobalScope(new LanguageScope);
    }
}

If you run a query like Article::all() now, you will get all articles which match the current language.

Importing models with Scout

After installing Scout and preparing the model for it, you must import all models into the index to be able to search them. While testing the import of my models, I noticed that only a fraction of models has been imported. Actually, global scopes are the reason. Because they affect all queries made to the model, Scout is not able to retrieve all entries for the import.

Disabling global query scopes for the Scout import

The Searchable trait which is added to models to enable Scout, ships with a function called makeAllSearchableUsing(). This method is used to get all model entries for the import. By default, the method is protected and can't be accessed in any way while running the import. However, you can override it inside your model. If you do this, you can add the withoutGlobalScopes() method to the query to disable all global scopes for the import query.

class Article extends Model
{
    use Searchable;

    public static function makeAllSearchableUsing(Builder $query): Builder
    {
        return $query->withoutGlobalScopes();
    }
}

After adding this to the model, I was able to import all entries, and not just a fraction.

Global scopes while searching with Scout

Searching for entries with Scout is a bit special, because you can't apply any regular database queries to the search by default and also don't prepend any constraints to the search. However, Scout allows us to add simple where() clauses to the search. See the documentation of Scout for reference.
While testing the search, I was wondering why I got no results for my model despite having entered a string correctly. Of course my global scope was applied to the search query. After digging through the code for a while, I found a way to access the underlying database query builder.

Disable global scopes while searching

It is indeed possible to disable global scopes while running a search with scout. Let's say you want to search an article for something.

$results = Article::search($searchQuery)->paginate();

Right now our global scope would affect the search and only return entries for like English, if you are on the English version of your site. If you want to search across all languages, modify the code like this:

$results = Article::search($searchQuery)
    ->query(function ($builder) {
        $builder->withoutGlobalScopes();
    })
    ->paginate();

The query method allows us to modify the query builder and disable all global scopes while searching for our articles.

This article was first published on my blog.

LinkAce - Your self-hosted bookmark archive

Kevin Woblick — Wed, 16 Dec 2020 20:38:16 +0000

About one and a half year ago I was deeply dissatisfied with my personal bookmarks collections. The links saved in my browser piled up to a bloated mess of outdated websites with only little structure. I tested Shaarli for a few weeks but it never "clicked", so I turned it off. After some thinking, I decided to build my own bookmarks archive. And today is the big day: the release of LinkAce 1.0.

What is LinkAce?

LinkAce is a bookmark archive. It wasn't built to manage the bookmarks of your browser but has its very own philosophy. My browser bookmarks contain only websites I regularly use and access. LinkAce, in contrast, is meant to provide a long-term archive of links to websites, media files or anything else which has a valid URL. I store interesting articles, neat web tools or libraries I may use sometime in the future. All saved links are added together with proper tags and some are added to lists which contain links across multiple smaller topics. Every now and then I come back to search for something specific I know I saved in the past.

This workflow allows me to keep my browser bookmarks clean, but also store interesting stuff in a way so they can be found easily when I need them.

Feature Spotlight

Because I created LinkAce from scratch, I was able to include many features not present in other bookmark managers, that are really useful.

The most important feature is the automated backup of all sites and regular checks if the websites are still available. Instead of making a backup on your own server, LinkAce relies on the Internet Archive, which already saved billions of websites across the internet. After you saved a link in LinkAce, it will automatically tell the Internet Archive to do a backup of this site.

Links are also checked on a regular base. LinkAce tries to connect to the website. If something went wrong, you will be notified, so you can check what happened to the site.

If you want to share your link collection with the world, you can enable the guest mode. All links, tags and lists that are not marked as private will be accessible by guests visiting your site.

Links can be added with the help of a browser bookmarklet. It sits in your bookmarks bar and with a click, the current website will be added to LinkAce.

LinkAce also features a full API, so you can connect other tools to LinkAce if you want. The API is accessible with a simple API key.

Try LinkAce today

Of course, the application is completely free and the whole code is available on Github. Before you install LinkAce on your own server, you can fiddle around with the Demo. If you like the app, you can install it by using Docker, or like many other PHP apps on your web server.

If you don’t want to host LinkAce on your own, sign up for to be notified when our hosting service launches. I currently have no schedule for the release but I’m working on it.

If you need help, you can talk to other users in the Community forum. I offer prioritised support if you become a Patreon or Github Sponsor.

This article was first published on my blog.

Transactional Emails for Developers: A comparison of 5 services

Kevin Woblick — Tue, 20 Oct 2020 20:05:10 +0000

Email support is one of the most basic things almost any webservice need. It should work, be reliable and doesn't cost a ton of money. In this comparison I take a look at the 5 most popular providers and what services they offer.

Please notice that this guide focuses on transactional and regular marketing emails you send directly from your service, like password reset emails. Providers like Mailchimp which are specialized on email campaigns and advanced marketing are out of scope right now. As you are more likely to just get started with sending emails, I focus on the smallest plans too. Besides a free plan I share details about the first pricing tier with you.

Transactional Email Providers

Mailgun
Amazon SES
Sendgrid
Postmark
Sparkpost

Mailgun

I am using Mailgun for years now and still use it for many services, as it simply works and provides all needed tools to send all the emails I need. If you are dealing with EU citizens, you should set up your domains in the EU zone, which is fully GDPR compliant.

Mailgun provides a basic transactional email service. There are no fancy marketing features present, you send just your emails through them. In their trial plan you get 5000 emails per month for the first 3 months. After that you pay for what you send.

Technical Details

SMTP sending: yes
API available: yes
Laravel/PHP support: yes
Other programming languages: Java, Kotlin, Node, Python, Go, Ruby, C#, Perl, Curl

Pricing

	Plan: Flex	Plan: Foundation
Included emails	5000	50000
Price per month	none	$35
Price per 1000 emails	$0.8	$0.7
Price per 1 email	$0.0008	$0.0007
Price per 1000 emails after limit	$0.80	$0.80
Price per 1 email after limit	$0.0008	$0.0008
Notable restrictions	No inbound routing, no dedicated IPs, restricted support	none

Amazon SES (Simple Email Service)

If you just need email sending and incoming mails, without any other features like statistics or email tracking, Amazon SES might be the best solution for you. Instead of offering plans, the Amazon Simple Email Service is entirely based on the pay per use model.

SES is probably the most valuable service to use, if you are already using AWS services or plan to use them. If you send any emails from Amazon EC2 servers, you get a whopping 62000 emails per month for free.

Attention: while other email providers do not charge for outgoing traffic, Amazon SES does! Based on the region, you have to calculate the traffic for your outgoing emails.

Receiving emails also costs extra, but you get 1000 incoming emails for free each month.

Last but not least: there are basically no detailed logs of what emails you send and receive. If you need deep insights, you would have to configure additional logging with other Amazon products.

Technical Details

SMTP sending: yes
API available: yes
Laravel/PHP support: yes
Other programming languages: via Amazon SDK (C++, Go, Java, Javascript, .NET, Python, Ruby)

Pricing

	Pay per use
Price per month	none
Price per 1000 emails	$0.10
Price per 1 email	$0.0001
Price per outgoing GB	$0.12
Price per 1000 incoming emails	$0.10
Price per 1 incoming email	$0.0001

Sendgrid

As a part of the Twilio universe, Sendgrid offers transactional email support via their Email API service. In their free plan you get 100 emails per day free of charge, forever. The first paid plan starts after reaching the free limit, and offers up to 40 thousand emails per month.

If you decide to use advanced marketing features, their Marketing Email service got you covered. It allows you to build campaigns with a visual builder.

Technical Details

SMTP sending: yes
API available: yes
Laravel/PHP support: yes (via SMTP)
Other programming languages: Java, Node, Python, Go, Ruby, C#

Pricing

	Plan: Free	Plan: Essentials
Included emails	3000	40000
Price per month	none	$14.95
Price per 1000 emails	none	$0.374
Price per 1 email	none	$0.000374
Price per 1000 emails after limit	none	$1.00
Price per 1 email after limit	none	$0.001
Notable restrictions	none	none

Postmark

Similar to Mailgun, Postmark offers basic transactional emails without all the marketing features or campaigns, however it does have an email template builder available. They offer analytics for their emails and advertise a secure service which is fully GDPR compliant.

Technical Details

SMTP sending: yes
API available: yes
Laravel/PHP support: yes
Other programming languages: Ruby, .NET, Java, Node.js

Pricing

	Plan: Free	Plan: 10k Emails
Included emails	100	10000
Price per month	none	$10
Price per 1000 emails	none	$1.00
Price per 1 email	none	$0.001
Price per 1000 emails after limit	none	$1.25
Price per 1 email after limit	none	$0.00125
Notable restrictions	none	none

Sparkpost

Sparkpost aligns with Mailgun and Postmark. Their simple transactional email service offers all features you need to get started with sending emails to your users.

It's notable, that overuse of the email sending limits more than double the price per email. Make sure to select the right plan for you.

Technical Details

SMTP sending: yes
API available: yes
Laravel/PHP support: yes (via SMTP)
Other programming languages: Curl, Node.js, Python, Go, Java, Elixir, C#, Ruby

Pricing

	Plan: Test	Plan: 50k
Included emails	?	50000
Price per month	none	$20
Price per 1000 emails	none	$0.4
Price per 1 email	none	$0.0004
Price per 1000 emails after limit	none	$1.00
Price per 1 email after limit	none	$0.001
Notable restrictions	none	none

Providers I do not personally recommend

Sadly, there is a provider I personally do not recommend, and it's Mailjet. I had to work with this service while doing a client project, and it was a pain to work with the API, the email templates and the support took ages to respond to any tickets despite having a paid high volume plan for the client. Not to mention the multiple account issues with "lost" passwords. Simply stay away from this service.

(If anyone from Mailjet reads this: work on your customer support.)

Conclusion for Transactional Email Provider

It's not that easy to choose a service when it comes to transactional emails, or later on marketing emails including template builders and campaigns. It starts with guessing the correct volume and calculate your costs based on that.

When it comes to money, you can go with the following list as a reference, which has all the above providers sorted by their price per 1000 emails for volumes up to 30k to 50k emails per month. Keep in mind, that Sendgrid, Postmark and Sparkpost charge a fixed amount per month regardless of how many emails you send.

To calculate the costs for Amazon SES which charges for traffic, I assumed an average email size of 250kb, which leads to additional costs of $0.00003 per email. As this is such a small amount of money, I left it out to keep the numbers small. This probably won't pile up to huge costs anyway if you only send 10k emails per month.

	Provider	Price per 1000 emails
1.	Amazon SES	$0.10
2.	Sendgrid	$0.374
3.	Sparkpost	$0.40
4.	Mailgun	$0.70
5.	Postmark	$1.00

If you liked this post, please share it with your friends and followers.

This article was first published on my blog.

How I built a web tool for gamers

Kevin Woblick — Tue, 13 Oct 2020 14:16:53 +0000

As a passionate gamer I play a lot of different games which involve trading, like No Man's Sky. I often end up with a bunch of papers filled with prices for items the merchants offer, so I could find the best trades between them. I stepped up the trading game by using Excel, filled sheets with the numbers. But it felt just way too difficult.

Fortunately, I am also a web engineer who builds stuff when he needs something to work with. I did that with a lot of tools, including my web-based Taboo game and LinkAce, my personal bookmarks archive. As I wanted to learn React for quite some time I thought that would be a perfect opportunity.

Please welcome the Tradefinder.

The idea behind the Tradefinder

The basic idea behind this tool is to help someone find profitable trades. In my case those trades happen between space stations in No Man's Sky, or cities in Windward. Those video games offer a full-blown trading system that include a ton of different merchants, and a dynamic supply and demand system. Prices are different for all those merchants, they buy or sell different amounts of the goods.

I thought the best way to deal with this system and make trading as efficient as possible, is to track the goods and prices for all merchants and then find matching buy-sell constellations. It started with a bunch of papers filled with the data, then I used Excel to change prices faster and without wasting paper. It was a tedious task, I noticed how I entered the same data again and again, and I finally lost the interest in trading because it became too complicated. I knew that a tool built specifically for this task was needed. So I built one.

The development process

The tool needed to have a screen where you enter your merchants and add the items they buy or sell, including available or wanted amounts with the corresponding prices. Then the tool should find and calculate the possible trades. To make this as fast as possible, a single page application (SPA) that works directly in the users' browser sounded just right for this.

I had worked with Vue in the past, but in my recent job search I noticed that positions for Vue were very rare, but the amount of React positions were astonishing. React was on my learning to-do list for quite some time now, but I never felt the urge to learn it. Now was the time to dive into it.

React with Redux...

From my work with Vue I knew some basic requirements, like to use some sort of state to handle all the data. In case of React, I decided to go with Redux because it is the most popular I know of. It took quite some time to get the base of the app ready for further development, because the concept of JSX elements provided by classes or functions is different, than I was used to it with Vue. Especially the integration with Redux, passing data around and working with the state was hard to learn. To be honest, I find the VueX (Vue's state library) documentation far better than the documentation of Redux. Especially the examples given in the docs seem very inconsistent, using different file and folder structures and introducing advanced features while learning the basics. In the end, I managed to get the state working and got a tool to add and edit both merchants and items.

More details about the Tradefinder

Today I released the Tradefinder. This first version has all core features that I need and supports the import and export of data. The foundation is solid and ready to get more features in the future.

Here's a list of what the tool is currently capable of.

Add, edit and delete locations as well as items.
Item handling for all locations: amounts and prices for both buying and selling.
Automated trade finding and calculation of the amounts you can buy/sell, including profits.
All data is stored in your browser via Localstorage. No data is sent to any servers.
Data can be exported and imported.
The number formatting can be toggled between the US and EU standards.
The tool has a built-in migration system to update the data once a newer version is released.
No analytics, no tracking, no social sign ups.
Reset or completely wipe all data to make a fresh start.

The tool is completely open source, the repository can be found on Github. I already created some issues with ideas for the future:

Keyboard shortcuts for some actions.
Presets that can be loaded for different games like No Man's Sky.
Option to load different "saves", to be able to jump between games.

Feel free to take the Tradefinder for a test ride and share your ideas in the repository, or via Twitter or Hacker News.

This post was first published on my Blog.

.nvmrc or .node-version - Which one do you prefer?

Kevin Woblick — Tue, 18 Aug 2020 18:46:14 +0000

There are many different version managers out there for always getting the right Node version ready for a project. This can be incredibly helpful when working with older projects which do not support a new Node version.

The most used managers are nvm, n, or nodenv. All of them let you specify a specific Node version, but how do you know which one to use for a project? Stage enter: .nvmrc and .node-version. Both contain a Node version, but are not equally supported by the different tools.

How do you define Node versions for your projects? Do you prefer using NVM with .nvmrc or nodenv with .node-version? Or do you even use a completely other approach or tool?

DevLorem: Rewritten from the ground up in Go

Kevin Woblick — Fri, 24 Jul 2020 08:53:02 +0000

About 3 weeks ago my good old DevLorem project was a simple PHP website that generated Lorem Ipsum text made from movie quotes of famous actors and actresses. I decided to rewrite the whole thing with Go to dive into the language and its features.

Yesterday I released version 2, the complete rewrite with many more features. A demo of the website and API is available on devlorem.kovah.de.

Using Go to develop a feature-rich application

The main idea was to have one single binary that could be used as a web server handling the website, as well as a CLI tool to generate quotes right in the terminal. The first steps of getting a simple website up and running with Go were fairly straight forward. I used the gorilla/mux package, which provides a set of tools to run a HTTP web server. The examples have given me a good direction to build both the website itself, and the API.

Adding CLI commands were a bigger task as I also had to implement the generation in the terminal. The Cobra package, also used by famous projects like Hugo, has given me the perfect framework to build all command line options.

One binary for 7 platforms, and a Docker image

One of the most important features after the rewrite: DevLorem is now available as a single binary for 7 different platforms, including Linux, macOS and Windows. With the help of the go.rice package, I was able to bundle all assets, from the quote sources to the static CSS and JavaScript for the website, into one binary.

Besides of that, I built a Docker image that is now available as kovah/devlorem on the Docker Hub. It provides all features of the tool itself.

You can download the executables from the latest release.

The first steps with Go

Go itself is an amazing language. After writing the dynamically typed PHP and Python, using a strict type system was a great step forward. I already worked with static types in Rust, which was more a pain than a help because I spent more time fighting with type abstractions than writing productive code. Go has a clear and easy to understand type system and I was able to work with it right from the start. If you want to learn Go and come from another programming language, your best way to start is the Go by Example website. It has all the important aspects of Go packed into simple examples.

I will probably use Go more in the feature, and update the CorporateLorem tool too.