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)
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 some of them allow you to save your data in your browser.
- All tools are 100% free.
- Check out the new tools that were added recently:
- Check out the tools that were updated recently:
At the moment the tips are enabled.
Input Element(s)
I build a single Input component which does most of the heavy lifting (4.4.2025)
Text is too short
Text is too short
Value is below minimum
Value is below minimum
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)
Inspiration
Here are some websites that have inspired me to create my own tools:
- https://onlinetools.com/
- https://60tools.com/de
- https://onlinetoolkit.co/
- https://www.commontools.org/
- https://tools.box/
- https://webfree.tools/
- https://yours.tools/
- https://pinetools.com/
- https://10015.io/
- https://www.terrific.tools/
- https://app.diagrams.net/
- https://cloudtoolz.com/
- https://www.omnitools.net/
- https://onlineminitools.com/
- https://toolnest.io/
- https://tools.ranblogs.com/
- https://tool-online.com/
- https://goonlinetools.com/
- https://wtool.dev/
- https://yours.tools/
- https://www.greattools.io/
- https://onlinealltools.com/
- https://audioalter.com/
- https://onlinetonegenerator.com/
- https://www.iloveimg.com/de
- https://www.a-coding-project.de/ratgeber/css/generator/border-radius
- https://www.cssportal.com/
- https://www.freeformatter.com/
- https://www.shopify.com/de/tools
- https://www.webtoolkitonline.com/
- https://onlinetoolz.net/
- https://github.com/janstk/Awesome-online-tools?tab=readme-ov-file
- https://devtoolcafe.com/tools/cron
- https://crontab.cronhub.io/
- https://directmsg.app/
- https://www.uuidgenerator.net/
- https://tools360.net/de
- https://getrandomgenerator.com/
- https://iotools.cloud/de/
- https://wooorm.com/write-music/
- https://alexjs.com/#demo
- https://wooorm.com/readability/
- https://www.calculator.net/
- https://imagecolorpicker.com/
- https://redketchup.io/
- https://ga-dev-tools.google/ga4/
- https://toools.app/
- https://webaim.org/resources/
- https://colourcontrast.cc/
- https://color.adobe.com/de/create/color-contrast-analyzer
- https://color-contrast-checker.com/
- https://colorffy.com/contrast-checker?colors=d6e84a-07360f
- https://passwordmeter.com/
- https://cssgenerator.org/
- https://codeshack.io/tools/
- https://html-css-js.com/
- https://whycalculator.com/
- https://gorby.app/tools/
- https://www.madeintext.com/
- https://qrcodeveloper.com/de/
- https://wee.tools/
- https://www.tablesgenerator.com/
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
Convert
to
Unit Based Translator Units
| Unit | Symbol | Description |
|---|---|---|
| Unit 1 | () | |
| Unit 2 | () |
console.log('Ich bin cool')