Thoughts and Notes

Here you can find all my thoughts and notes on various topics regarding this website.

Lets get the W's out of the way first ...

Why

Honestly the reason for me making this website is not that interesting but its also not that obvious. In December I noticed that my programming skills were getting Rusty, so I wanted a project I could work on, it all started after I talked with a coworker about social media like to follow ratios, so this tool became the first that I built. Thereafter I quickly came up with the Idea to make a lot of tools on this website.

What

What is this website about? Well, its a collection of tools that I have built, and will build in the future. I have a lot of ideas for tools that I want to build, and I will build them all here. I will also write about my thoughts and notes on various topics regarding this website.

When

When did I start this project? I started this project in December 2024, and I have been working on it ever since. I have built a lot of tools, and I have a lot of ideas for tools that I want to build in the future.

Where

Where can you find the tools? You can find all the tools a the root of the website. The website is hosted at vercel and the domain/subdomain resides at hostpoint.ch.

How

How did I build this website? I built this website using Svelte/SvelteKit, TailwindCSS, and Vercel. An of course not to forget the many helpful packages that made the tools possible in the first place, if I used such a tool it will say so at the bottom of the tool ("Courtesy Of").

Who

Who am I? I am Maxim Maeder, a programmer from Switzerland. I have been programming since 2021 and I'm having a lot of fun, you can read more about me on my Blog.

Now for some other thoughts and notes ...

Tool Chains

While browsing the web for inspiration for new tools to add to my website, I came across https://onlinetools.com/, where they not only have a lot of smaller utilities, but also a feature that allows you to chain tools together. I found this astonishing and wanted to implement something similar on my website. However, at the moment, the code is not structured in a way that would make this easy to implement. Maybe in the future. Such Inputs would most likely utilize something like https://svelteflow.dev/. Each tool would define Input and Outputs with their respective types (String, Number, Date, Float, StringArray, NumberArray, DateArray, FloatArray, Coordinates, CoordinateArray). Of course these tools would still work on their own while they are part of the chain of tools that transforms data as the user wishes. I would also implement logic like If, Else If, Else, Loops and so on. (26.02.2025).

Quickly loading the Tools

To dynamically create a sitemap for my SvelteKit project, I have opted to use https://github.com/jasongitmail/super-sitemap. I quickly came up with the idea to further utilize this package to retrieve the paths of all my tools along with their metadata.

All production-ready tools are located in /t/, so while developing the website, I have a Node script running that parses all the +page.svelte files located in the immediate subfolders of /t/. You can find all the parsed data as JSON here: https://tools.maximmaeder.com/tool_infos.json.

This way, I can quickly access information about all the tools without having to regenerate a sitemap for the thousands of possible pages. (27.02.2025)

New and Updated Tools

... will show either a New or Updated badge next to the tool description, if this date is less than 7 Days behind. (12.03.2025) It will also show the last 6 updated and new tools.

Tips

This website will show tips for small functionalities. (4.4.2025)

Most inputs on this website are saved in your browser, so you can return at a later time with the same values still in place.
You can share a Permalink of most tools so your coworkers, friends or whoever you are sending it to, receives a tool with the Input data already filled out.
You can press ctrl + d to bookmark this webpage.
You can set the theme of this website to your liking (lightmode, darkmode or system settings).
At the bottom of each tool page there is a qr code, using this you can quickly open the current tool on your phone.
In the footer you'll find a link that will take you to a random tool.
You can hide these tips in the settings.
You can buy me a coffee.
You can contact me via e-mail.
Almost all code blocks have a download and a copy button.
All the color outputs allow you to specify the color space.
At the bottom of most tools you'll find the packages and external resources that were used.
You can delete all the data that this website saved from the inputs on the manage data page. Here you can also export and import all of your data.
The search bar on the homepage allows you to sort, filter and group tools
You can follow me on linkedin or go to my website.
I already have a lot of tools, but if you have an idea for a new one, please let me know!
I have worked on this project for .
Some of the color inputs allow you to create a random color.
Some of the tools allow you to reset the input values to their default state.
None of the tools require you to create an account, but most of them allow you to save your data in your browser.
All tools are 100% free.
This website will save the three most recent used tools in your browser, so you can quickly access them again.
Check out the new tools that were added recently:
- property gross yield calculator
- Calculate Grade based on Points
- International Meeting Planner
- Timer
- Number to HEX Translator
- Set Intersection Calculator
- Set Union Calculator
- Subset Calculator
Check out the tools that were updated recently:
- property net yield calculator
- property gross yield calculator
- Calculate Grade based on Points
- Text to Speech
- Color Contrast Checker
- Countries
- Swiss communes snapshots
- Like to follow ratio calculator
- Linux Chmod Generator
- CSS Glitched Text Generator
- ICS Viewer
- Text Difference checker
- Blood Alcohol Concentration Calculator
- Text Analyzer
- Progressive Web app manifest generator
- Swiss communes mutations
- WHOIS Lookup
- Google Campaign URL Builder
- HTML SEO Meta Tag Generator
- Regional Holidays
- Placeholder image generator
- Hash Generator
- Get Random Number in Range
- Subset Calculator
- Set Intersection Calculator
- Set Union Calculator
- Date Calculator
- Ceasar Cipher Translator
- Compound Interest Calculator
- Calculate Discount
- Calculate Break Even Price
- Urlify Text to HTML or Markdown
- Calculate Age
- Generate Color Scheme
- Generate Semantic Version String
- Swiss Law Citation Generator
- Get Text Reading Time
- Text Search and Replace
- Share Link Generator
- Analyze Text Readability
- Text Case Converter
- Explain Cron
- Generate direct WhatsApp message
- Get the Nato Alphabet
- UUID Generator
- Text Slug Generator
- BMI Calculator
- Checksum Calculator
- Check if String is a Palindrome
- Check SEO Meta Description Length
- Generate Gradient Colors Between Two Colors
- Inverted Color Generator
- Color Shades Generator
- Bionic Text Generator
- Stopwatch
- Check Password Strength
- Generate Corporate Lorem ipsum
- Lorem Ipsum Generator
- Mailto Link Generator
- Barcode Generator
- Create Google Calendar Share URL
- Password Generator
- QR code generator
- Get Timezone By Coordinates
- Time Formatting Tester
- CSS Box Shadow Generator
- CSS Filter Generator
- Base64 to Image Converter
- International Meeting Planner
- Timer
- Extract filenames from Text
- Extract IP Addresses from Text
- Extract domains from Text
- Extract Colors from Text
- Extract Social Media Handles from Text
- Extract hashtags from Text
- Extract IBANs from Text
- Extract Emails from Text
- Extract Numbers from Text
- Extract Phones Numbers from Text
- Extract URL's from Text
- Image Comparison Slider
- List Guess Gender
- Flip Image
- Rotate Image
- Greyscale Image
- Invert Image
- CSS Border Radius Generator
- List get average
- List get mean value
- List check palindromes
- List get product
- List get sum
- My Browser Info
- JSON Viewer
- Counter
- Screen Recorder
- Coin Toss
- Keyboard Shortcuts
- CSV Viewer
- Word Reverser
- Word Scrambler
- Current Time
- Time Progress
- List Create Random Groups
- List Add Numbering
- List Add Prefix
- List Randomizer
- List Reverser
- List Select Random Items
- List Sorter
- When will be easter
- CSS Gradient Text Generator
- Image to Base64 Converter
- CSS Gradient Pattern Generator
- URL Encoder and Decoder
- Markdown to HTML translator
- Color Picker
- Get website meta tags
- Number to HEX Translator
- Text to HEX Translator
- Force Converter
- Generate Markdown Table
- Color Spaces
- Decimal to roman numerals converter
- Energy Converter
- Angle Converter
- Area Converter
- Mass Converter
- Metric Prefix Converter
- Speed Converter
- Voltage Converter
- Data Converter
- Time Converter
- Volume Converter
- Length Converter
- Named CSS Colors
- Current Lunar Phase
- List Remove Duplicates
- Morse Code Translator
- CSS Cursor Viewer
- Get Audio Outputs
- Text to binary
- Text to piglatin

At the moment the tips are enabled. Also some of the tips are dynamically generated for example the new and updated tools.

Input Element(s)

I build a single Input component which does most of the heavy lifting (4.4.2025)

All Input Element Variants

Text

Text (Min)

Text is too short

Text (Max)

Text (Min-Max)

Text is too short

Text (Placeholder)

Color

Tel

Password

Url

Number

Number (min)

Value is below minimum

Number (max)

Number (min-max)

Value is below minimum

Number (steps)

Checkbox

Checkbox (Checked)

Select

File

File (Accept) (image/*)

File (Multiple)

Textarea

Range

0 % 100

Date

Time

Datetime

Text (Clear functions)

Text (Random functions)

Text (Random/Clear functions)

Icons

The Icons for the tools and the UI in general are mostly from https://lucide.dev/ and https://icones.js.org/ (13.2.2025)

Permalinks

Permalinks are available, it was somewhat easy to implement since I mostly use peristend local storage stores in the background, so I can get the data for any page in the layout, it also uses https://github.com/zerodevx/zipurl. (16.3.2025) Later on I noticed that that this also enables me to create a reset buttons on all the pages with persistent data. (20.4.2025)

Inspiration

Here are some websites that have inspired me to create my own tools:

Placeholder Image

This image of the Alps is used for placeholder purposes (13.3.2025)

Reused Components

To make the development of the tools easier, I have created a lot of reusable components that I can use in multiple tools. (13.03.2025)

Showcase of the Components

Language one

Language two

Convert

to

Unit Based Translator Units

Unit	Symbol	Description
Unit 1		()
Unit 2		()

Background

Foreground

1 lines of "js"

console.log('Ich bin cool')

rgb(0% 0% 0%)

Width

Height

Input

Seperator

Remove Duplicates

Remove Empty Lines

Resulting List

Meta data

Key	Value
original_length	1
deduplicated_length	1
without_empty_lines_length	1
resulting_length	1

Text

Remove Duplicates

Extracted

Full Screen Container

Mask-Image with linear gradient is awesome

At several locations throughout the website, I wanted to include gradients to create smooth transitions between different sections or to conceal hidden overflowing elements. Initially, I used a separate <div> element that was absolutely positioned and had a semi-transparent background gradient. However, over time, this approach led to some issues—mainly that I had to be very careful with the background of the underlying element. After some research, I came across the mask-image property, which allowed me to apply gradients as masks without needing to worry about the background. (17.5.2025)

Here are some examples where this came in useful:

The description and tags can overflow.

The progress bar is masked behind the % indicator.

The mask creates a smooth transition between the moving gradient and the rest of the page.