A collection of tools for developers served as a PWA
Home Page: https://www.developertools.tech
License: MIT License
A collection of tools for developers.
Take a look at the Contributors' Guide to get started!
If you have any questions about contributing after reading the guide, please create an issue so it can be improved.
I'm also looking for co-maintainers, if you are interested please contact me via the contact form on dlford.io.
No response
Lorem ipsum tool
No response
No response
No response
Add a text contrast tool to the color tool page for testing accessibility of text colors over background colors. Something similar to this tool - https://webaim.org/resources/contrastchecker/
No response
No response
No response
Format and validate YAML
No response
We should also add options to convert YAML to JSON and TOML, this can be a added as a separate PR if not built into the original PR.
GitHub @ message 👍
For Hacktoberfest, I have been adding GitHub Codespaces / VS Code Remote Containers configuration for OSS projects to make it easier for contributors to the project to get up and running with the correct developer setup. Including the appropriate configuration for a project allows contributors to work entirely within a web browser via GH Codespaces, or inside of fully, and correctly configured containers on their own computer with VS Code Remote Containers (both of these use the same configuration, as GH Codespaces leverages the Remote Containers features under the hood).
For reference, here are two other repositories for whom I've opened PRs to do the same:
If you're amenable, I would love to get your project set up with devcontainer configuration as well as a Hacktoberfest contribution.
Allow contributors to work on the project with the same developer setup, fully built up and completed on their behalf with no work required.
N/A
No response
Using the color picker fills an RGB value into the HEX field, producing the error "Invalid HEX Color"
Color picker fills the HEX value into the HEX field
Chrome (Arch Linux)
107.0.5304.110
No response
No response
Add a search field to the top of the navigation menu
As the list of tools grows, it will become harder to find the tool you want, a search field will help make it easier to find.
Requirements:
Not exactly a feature, more of a nice-to-have for the repo. We can configure git hooks to trigger lint-staged on every commit, which in turn would run eslint and prettier on the staged files. This should give more immediate feedback to the developer on the changes they are committing. As an added plus they won't need to remember to run cq on every push to the repo.
As an aside, I'd also suggest removing eslint-plugin-prettier and running prettier as a separate command. Using this plugin is discouraged by prettier themselves and on a more personal note, I find it a bit distracting (your mileage may vary).
Looking forward to your feedback!
cq:ciNo response
A tool to show the difference between two chunks of text.
This would be used to determine what has changed in two versions of a file (or any piece of text) that are not stored in version control, or to verify that they are the same.
Some ideas to play with but not necessarily requirements - controls for displaying the diff side by side or unified, blank space sensitivity, feel free to get creative here if you like.
No response
When typing some characters into the "Encoded" field such as %, a console error is thrown and the input does not add the character.
The input should have added the character, and a user friendly error message should have been displayed on the page, without throwing an error in the browser console.
Chrome
105.0.5195.134
URIError: URI malformed
at decodeURIComponent (<anonymous>)
at onChange (url-encode-505d800127204f42.js:1:3489)
at as (939-761c0c3295da9d71.js:1:19457)
at G (939-761c0c3295da9d71.js:1:13804)
at Object.aP (framework-9b5d6ec4444c80fa.js:11:16687)
at aV (framework-9b5d6ec4444c80fa.js:11:16841)
at framework-9b5d6ec4444c80fa.js:11:35726
at dt (framework-9b5d6ec4444c80fa.js:11:35825)
at du (framework-9b5d6ec4444c80fa.js:11:36239)
at framework-9b5d6ec4444c80fa.js:11:41698
onChange @ url-encode-505d800127204f42.js:1
as @ 939-761c0c3295da9d71.js:1
G @ 939-761c0c3295da9d71.js:1
aP @ framework-9b5d6ec4444c80fa.js:11
aV @ framework-9b5d6ec4444c80fa.js:11
(anonymous) @ framework-9b5d6ec4444c80fa.js:11
dt @ framework-9b5d6ec4444c80fa.js:11
du @ framework-9b5d6ec4444c80fa.js:11
(anonymous) @ framework-9b5d6ec4444c80fa.js:11
h1 @ framework-9b5d6ec4444c80fa.js:11
aK @ framework-9b5d6ec4444c80fa.js:11
dA @ framework-9b5d6ec4444c80fa.js:11
bR @ framework-9b5d6ec4444c80fa.js:11
bP @ framework-9b5d6ec4444c80fa.js:11No response
I can add support for dockerizing the application so that the users can run the application on any given system.
No response
No response
We can have an online sorting tool which can sort given words (or sentences) in ascending. descending, and reverse order on the basis of lexicographical or length basis.
Useful when you need a quick sorted list of something.
No response
No response
Allow the user to input some text and get a robotic text-to-speech version of it. The user can then download the speech audio generated. Everything will be generated in the browser itself using the SpeechSynthesis Web API.
This could be useful to developers who want to quickly add some voice lines to their app. This speech synthesis tool will be free, since it uses the developer's built in speech synthesis tool to create text-to-speech lines, instead of relying on an outside service.
No response
No response
A tool that converts numbers between different bases.
No response
The tool should have an input that takes a number, a control for setting the output (e.g. hex, binary, octal, or "base 2", "base 6", "base 8", etc.), and an output field.
No response
Regular expression testing tool
An interactive regular expression writing tool
At minimum this tool should:
Possible extra features that are not required:
Add a section to explain the process of claiming issues to prevent multiple contributors working on the same issue as in #47.
No response
The text diff tool (https://www.developertools.tech/text-diff) could be more useful if there were options for different types of text diffing. The package in use has many options and I think we could pass most if not all of them through to the user interface (https://www.npmjs.com/package/diff)
This will of course require new test cases as well.
No response
No response
No response
JSON Web Token debugger/decoder tool
For debugging, validating, and testing JWTs
At minimum this tool should:
No response
A tool for working with URL query strings (e.g. https://somesite.com/?querystring=somevalue&anotherquerystring=somethingelse).
Query strings can be very long and difficult to parse when debugging complex API calls, having a more human readable format to parse and modify for testing can save a lot of time.
The tool should at the very least convert a query string to a list of key/values and build a query string from a list of key/values.
For example, the URL above would output the following
querystring=somevalue
anotherquerystring=somethingelseAdditional features that are not required might include:
somesite.com/?json={"this": "is JSON"}No response
A new tool to convert JSON data to TypeScript types, should have the following features:
Pasting raw data to quickly create a TypeScript type for it
No response
No response
This project will benefit from displaying in many languages, but first we need a system to handle translations.
Not everyone speaks or reads the english language, and even those who do may prefer another for ease of use.
A PR for this issue should:
It is not required to add any other languages in the PR for this issue, I will open a new issue for that, but if you know another language please feel free to add it.
The pages aren't centred properly, don't know if this is intentional or not
Home:
Tools:
No response
The JSON tool currently works in strict mode, would be nice if it would accept JavaScript objects as well and format them as JSON, and vice/versa.
No response
Also, we should add options to convert JSON to YAML and TOML
No response
Convert time between timezones, unix time, and other common formats
No response
No response
No response
A tool that takes a desired color, which will generate a CSS filter that will convert any color to the desired color.
This is useful for changing the colors of SVG icons in an img tag instead of refactoring or keeping multiple copies of the SVG file.
No response
No response
Markdown preview tool
No response
No response
No response
No response
This PR should:
No response
Use Ace Editor instead of textarea where appropriate
This would give a better typing experience by handling auto-indent and some other niceties
No response
No response
Add a language picker to the header (app bar)
No response
This would be a drop down menu in the header that lists locales from next-i18next.config.js, clicking on any option would redirect to the correct URL (/{short-language-code}).
No response
A new tool that can generate TOTP secret keys and the OTP codes for them, or accept a user secret.
When developing applications that utilized TOTP, it would be nice to have a web tool instead of enrolling a bunch of temporary secrets for testing
No response
No response
A tool with a searchable list of emojis that when clicked will copy to the clipboard.
Available emojis - https://unicode.org/emoji/charts/full-emoji-list.html
Adding unicode symbols would be a nice addition, but not required for this PR.
Unicode character sets - https://unicode-table.com/en/sets/
No response
This PR should:
emoji tool that meets the description aboveThe return type should be [T, Dispatch<SetStateAction<T>>] to match the type of the useState setter function.
No response
Tool for converting colors between Hex/RGB/HSL/etc. A color picker would also be nice.
No response
No response
No response
Add minifier to HTML format tool
No response
No response
No response
A tool for writing JavaScript functions and showing the output.
It's sometimes easier to write a function in it's own context, this would provide an easy to access sandbox for testing and developing functions in their own context.
This tool at minimum should:
Possible but not required improvements:
codemirror-poc branch of this projectNo response
URL encode and decode strings tool
No response
No response
No response
Add avif format to image converter tool (#28, #43)
No response
Blocked by browser support for avif in canvas elements - https://stackoverflow.com/questions/61206083/create-image-from-canvas-with-avif-image-format
No response
The sorting tool is in currently in development, but upon completion it would add a lot of utility if we could add a field for the output separator so you could change a newline separated list to comma separated, etc. (This would also require a sort option of "keep order").
No response
Blocked by #35
No response
CopyLeft date in footer shows 2022
CopyLeft date in footer should be dynamic and show the current year
Chrome
117.0.5938.149
N/AThis issue is for tracking all translations needed, please feel free to comment if you'd like to see a language added to the list below, or contribute by adding translations from the list below.
Instructions and further information can be found in the Contributors' Guide
Please base your work and PR against the dev branch.
All translation related pull requests will be counted for Hacktoberfest during the month of October.
enenassigned to @Akash190104
enassigned to @fahadashiq12
enAssigned to @goobric
No response
Choosing an extremely low width or height causes the preview window to show an inaccurate representation of that aspect ratio
Aspect ratio preview should show an accurate representation of the selected ratio
Firefox
104.0.2
No response
A tool for optimizing and reformatting images.
No response
This can't likely be done in browser alone, it may be possible to do using server-less functions which should be explored.
This tool should at minimum:
No response
A tool to encode and decode all HTML character codes (e.g. " <=> ") in a string of text.
No response
This PR should:
html.spec.tsx fileNo response
A tool that formats and minifies CSS, and optionally SASS/SCSS/LESS as well
No response
Add a character counter. We can paste or type text into an input (like a textarea), and the characters will automatically be counted.
We often have to add a description truncation length to collections. This would help with that.
No response
At the moment in the input forms on the site are set to 1 line. I would increase the footprint of them so that you have more room to enter code from the beginning.
Gives the user more room to see their input
No response
No response
A tool that will convert a string of space separated text with the following options:
No response
This PR will:
case-converter toolNo response
A tool to format and validate TOML
No response
We should also add options to convert TOML to YAML and JSON, this can be added as a second PR if not built into the first PR.
I think we can, but I'm not entirely sure, hoping someone with more experience in WASM than myself can chime in.
For some users this error is happening. This is happening because many editors let you change between CRLF and LF line-ending modes.
We can easily fix that issue.
In .eslintrc.json file, we need to configure rules option.
Add the following configuration and it will fix the problem.
prettier/prettier": ["error", { "endOfLine": "auto" }]
Firefox, Chrome, Safari, Microsoft Edge
No response
No response
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.