stefanjudis / tiny-helpers

A collection of useful online web development tools

tiny-helpers.dev

A collection of useful online web development tools.

Contributing

Make sure you have a recent version of Node.js installed (we recommend at least version v12.14.). After installing Node.js you'll have the node but also the npm command available. npm is Node.js' package manager.

Additionally, please have a look at the CONTRIBUTING.md including further information about what counts as a tiny helper.

Fork and clone this repository. Head over to your terminal and run the following command:

git clone [email protected]:[YOUR_USERNAME]/tiny-helpers.git
cd tiny-helpers
npm ci
npm run helper:add

Add a new helper

npm run helper:add will ask a few questions and create a file in helpers/. Commit the changes and open a pull request.

Run the project locally

This project uses Vercel's routing configuration. The / route doesn't work locally. To start, navigate to localhost:8080/home/ after running npm run dev.

npm run dev

Contributors ✨

Stefan Judis	Frederic Hemberger	Nikita Hlopov	Aarni Koskela	0xADADA	Marouane R	Benjamin Mahr	Alexander Lichter	Can Rau	Benedict Juretko
Kilian Valkhof	Phil Nash	Remy Sharp	Ron Valstar	Thomas Taschauer	Benedikt Rötsch	Nico König	Anton Ilchuk	Austin Pray	Casey Hunt
Christian Grieger	Christophe Coevoet	Christopher Geary	Dylan Smith	Enzo Innocenzi	Florian Reuschel	James Nash	James Ross	Jan Kohlbach	Gonçalo Morais

tiny-helpers's Issues

Error in GitHub contributer icons

One of the GitHub contributers has a icon error

I have this issue reproducable with Firefox developer 83.0b2

bug: spaces after social profiles

Thanks for putting this handy website together! This is a small visual bug that I saw on the website.

There are spaces at the end of the social profiles.

Add proper meta tags

Update screenshot for https://haveibeenpwned.com/

Current screenshot:

Error running "npm run helper:add"

Trying to add a helper, following the instructions from the readme. All is well until I run npm run helper:add, and I get the following error:

TypeError: Object.fromEntries is not a function
    at getHelpersFromHelpersJSON (/Users/alexharris/Sites/tiny-helpers/lib/helpers.js:22:17)
    at getHelpers (/Users/alexharris/Sites/tiny-helpers/lib/helpers.js:9:15)
    at /Users/alexharris/Sites/tiny-helpers/scripts/add-helper.js:6:32
    at Object.<anonymous> (/Users/alexharris/Sites/tiny-helpers/scripts/add-helper.js:59:3)
    at Module._compile (internal/modules/cjs/loader.js:721:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:774:12)

In the meantime, can I add a helper by just adding JSON directly to helpers.json?

Offer alternative to similar tools

Many tools have alternatives or closely related projects.

Eg. for viewing npm files there are at least 3 alternatives:

• npmview
• npmfs/package-name
• unpkg.com/package-name/
• runpkg.com/?package-name

Would be helpful to have them consolidated or mentioned, wouldn't it?

Add tag "YAML"

YAML is well-know (especially in the context of Docker) and there are already helpers here for YAML:

• https://github.com/stefanjudis/tiny-helpers/blob/primary/helpers/yaml-checker.json

SVG Cloud generator

https://www.nephele.cloud/

Does https://www.stefanjudis.com/blog/how-to-use-headless-chrome-in-serverless-functions/ still work for you?

Thanks for that article!

I'm in a similar situation.

I'd love to use the free Vercel Hobby plan. I could use my $6/mo Digital Ocean server, but I'd need to upgrade its Ubuntu, which would be a pain.

To get your https://www.stefanjudis.com/blog/how-to-use-headless-chrome-in-serverless-functions/ solution working I needed this advice: puppeteer/puppeteer#11052 (comment)

Now it builds fine.

But when I try on Vercel, I still get the timeout.

Does it still work for you these days?

Thanks!

`now` Deprecated

now Deprecated

instead use vercel

npm WARN deprecated [email protected]: 
 
 "now" is deprecated and will stop receiving updates on December 31, 2020.
  Please use "vercel" instead.

❤️ ✊

Issues

Expect search and get answer: ENOENT: no such file or directory, open '/var/folders/z9/7lnm0tg91rqbrvf0wvs18gh80000gn/T/chromium-pack/fonts.tar.br'

not able to clone

Maybe I'm doing it wrong, but with GitHub desktop I'm getting this error:

While when trying to contribute on Codespaces I'm seeing this after running npm ci:

Change preview images to work as a link

Improvement idea:
Improve usability by changing preview image to work as a link. Makes it faster to access tools as the small link on the bottom of the each tool is relatively small compared to the main preview image.

Go to tool -type of links are useful, but it could be better to combine them to the header images for each of the tools. It would reduce height of each card, increasing amount of content people can see at once. Hover/Active -state for images could still include the Go to -text as an CSS layer on top of an image.

Cannot run npm run helper:add

npm run helper:add

[email protected] helper:add /Users/geongeorge/Code/tiny-helpers
node ./scripts/add-helper.js

(node:32597) ExperimentalWarning: The fs.promises API is experimental
TypeError: Object.fromEntries is not a function
at getHelpersFromHelpersJSON (/Users/geongeorge/Code/tiny-helpers/lib/helpers.js:22:17)
at getHelpers (/Users/geongeorge/Code/tiny-helpers/lib/helpers.js:9:15)
at /Users/geongeorge/Code/tiny-helpers/scripts/add-helper.js:6:32
at Object. (/Users/geongeorge/Code/tiny-helpers/scripts/add-helper.js:59:3)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)

bug: exo font not loaded

When opening the website the console spits out a 404 error that the Exo font can not be loaded.

Along, the favicons (32x32 and 16x16) can't be found.

Details browser: Chrome latest version.

No images, api/screenshot down?

There seems to be an error with https://tiny-helpers.dev/api/screenshot/ :

Fix the preview builds

For some reason the PR preview is missing the helper screenshots.

google-webfonts-helper has been shut down

Heroku shows an "There's nothing here, yet." error for https://google-webfonts-helper.herokuapp.com/

Seems like this site has been taken down and can be removed from your list.

Improve mobile experience

The experience on mobile is not great yet (I shipped too early 🙈).

Things that needs fixing:

• https://twitter.com/AnTheMaker/status/1216833314604158980
• the burger is not closing on safari

• the social row could be improved (I'm up for ideas)
• make top corner logo a link

a11y: logo not clickable to go to main page

To improve accessibility and adhere conventions, I would recommend to make the logo clickable so you can easily return to the main page. See more details here.

required older node version (should update node.js version?)

Hi there 👋

• first i fork
• then run below to clone from my github
  $ git clone https://github.com/miko-github/tiny-helpers.git
• next, i use $ cd on tiny-helpers to change current directory
• and run
  $ npm install
• but this not work and show me error (i think, that need the update node.js? 🤔 )

Error message

npm ERR! code EBADENGINE
npm ERR! engine Unsupported engine
npm ERR! engine Not compatible with your version of node/npm: [email protected]
npm ERR! notsup Not compatible with your version of node/npm: [email protected]
npm ERR! notsup Required: {"node":"^12.14.0"}
npm ERR! notsup Actual:   {"npm":"7.9.0","node":"v14.16.0"}

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/admin/.npm/_logs/2021-04-22T18_18_39_733Z-debug.log

• i searching in google but not found anything, actually, are you can update node version for newer things! 🤗

Open Source only?

I'm about to add a helper which I find vastly useful (crontab.guru) but which is not open source (and for which I cannot add a maintainer's GitHub handle). Even worse, there's no single known maintainer but only the company that created the tool (which is discouraged in the CLI).

So, to get some clarification on this: Are non-OSS tools welcome on the page? If not, that should probably go into the Contributing section.

Suggestion: Add ref query parameter to outgoing links

Hey 👋🏻

Adding a query parameter to help identifying traffic to helper from the website could be beneficial for site owners.

Instead of https://foobar.com/ links would point to https://foobar.com/?ref=tiny-helpers (or similar). It seems that this is a common practice as pages like ProductHunt or LapaNinja are doing the same ☺️

I got an error when running "npm run helper:add"

Hey,

I liked the idea behind tiny-helpers, and I wanted to submit one of my tools. After installing npm ci, and running npm run helper:add, I get the following error:

TypeError: Cannot destructure property `writeFile` of 'undefined' or 'null'.
    at Object.<anonymous> (C:\OS\tiny-helpers\scripts\add-helper.js:2:36)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Function.Module.runMain (module.js:694:10)
    at startup (bootstrap_node.js:204:16)
    at bootstrap_node.js:625:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] helper:add: `node ./scripts/add-helper.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] helper:add script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\pyahy\AppData\Roaming\npm-cache\_logs\2020-01-17T03_43_22_176Z-debug.log

System Info

• OS: Windows 10 Pro

Search/Filter within a category

• Implement the search within the category by tags or keywords in order for the users to be able to somehow filter the list within (for ex) Accessibility category, etc.

Add Pull request template

Add rules around helpers that will be accepted. :)

Implement a rating system

• Just as maybe, as an idea, one could have implemented a rating system (something like start on github) or just parse the amount of start from Github and align the order of the tiles by that value, in order for the newcomers to see which ones are the most used and which are less effective/helpful.

Add page for other developers resources

I'd like the focus of tiny-helpers to be very narrow. It is a good idea though to include links to other developer resources collections to the site.

Resources in mind:

• https://thebomb.dev/

Implement a search

After discussing the possibility of an in-page search (#61), it can now be added. :)

Requirements for a search are that it's:

• accessible
• reflected in the URL
• in best case works without JS

Tablericons

I'll just leave it here
https://tablericons.com/

Feature Request: Search and Date View

While I love navigating by Tags, perhaps adding Search would be a good idea? Would also like the ability to have another View, such as By Date/Newest vs the Alphabetical view presented now.

thank you!

New Helper– UTM Tag Generator

I found this list last week and thought it'd be a good place to share my UTM Tag generator. I re-wrote it this weekend to simplify it and make other improvements so now I'm ready to share it. I apologize that I do not use npm, so I can't submit a pull request per the instructions.

Here's the URL: https://gearside.com/utm/

Here's what I'd think the appropriate JSON would be:

{
	"name": "Easy UTM Tag Generator",
	"desc": "Creating UTM tags doesn't have to be so complicated! This simple tool will help guide you through generating a superior URL for your campaigns.",
	"url": "https://gearside.com/utm/",
	"tags": [
		"HTTP",
		"Misc"
	],
	"maintainers": [
		"chrisblakley"
	],
	"addedAt": "2020-01-18"
}

New helper CyberChef

Hi!
Take a look at https://github.com/gchq/CyberChef , I think it's a beautiful app for encrypt\decrypt data
Sorry, but now I haven't opportunities to fork and create pull request

Improve Readme and documentation

I think we're guilty of this. :/

I'd love to extend the docs and add more explanation around everything. 😊

Favor/bookmark tools

I would like to see that you can bookmark (locally) your favourite tools. In this way you can find them even faster next time on tiny-helpers. Yeaaah you could bookmark them in your browser too, but it would be a nice feature.

Make helper links open in a new tab

Basis : I was looking for different favicon generators at Tiny Helpers and decided to try to them all to see the different results they generate. I know I can always do an open in tab/window via a right-click but having it as the default behavior could be more convenient.

Digital filter playground

https://borismus.github.io/filter-playground