WebDevHub - A place for developers
WebDevHub is designed to be one central place for developers, that offers a variety of tools to help with any developing needs. This includes code formatters, file converters, image compressors etc.
https://webdevhub.herokuapp.com/
A central hub with all the tools a developer might need makes it easier to focus on developing, rather then searching for different sites to find a working tool. WebDevHub eliminates this hassle. The site is open-source, designed to be made by the users. If there a feature you want to add, a bug you want to fix etc, simply open a pull request.
Implemented Features
- Hex to css
filter:converter - Word Counter
- Lorem Ipsum Generator
- Code Formatter (HTML, CSS, JS, etc.)
- JSON to XML converter.
- Color Converter (Hex to RGB etc.)
- Epoch Converter
Planned Features
- Image Converter - UI implemented but needs server-side code to fix
- URL Shortner
- File Compressors
- Site/code templates.
- Expansion to provide tools for other programming languages (C, C++, Python etc.)
- CSS grid generator
- JWT encoder / decoder
- Link to Regex101
- Colour palette generator from a base colour
- Text & JSON diff
- JS repl
- ESLint & Prettier config generators
- .MD formatter/preview
If you like, you can fork the repo and create a pull request to contribute one of these features to the site. These are only some of the features planned to be added, and more will be listed here in the future. Check out the Projects page to see a more in-depth board of potential features to be added, or create a pull request and suggest your own feature.
Frameworks Used
How to Contribute
To contribute to the site:
- Clone the repository via terminal or github desktop.
- Run
npm ito install all needed node packages. - In a terminal window opened in the main project directory, run
npm run devStartto active nodemon, which will restart the test server whenever a change is made. The server can be acessed atlocalhost:3000 - Create a new file in the
/viewsdirectory titledyour-feature.ejsand a new JS file in the/publicdirectory titledyour-feature.jsin a relevent subfolder. - Add a new
app.getrequest in theserver.jsfile, as such:
app.get("/your-feature", (req, res) => {
// Render the page with given paramaters.
res.render("your-path/your-feature", { // The name of the .ejs file you created including the path
title: "Your Feature", // The title of the webpage, usually the same as the feature name.
});
});
- Code your feature.
- Add a link to the feature on the home page under a relevant subcategory.
- (Optional) - Credit yourself at the bottom of your feature using this sample code. Have a look here for an example of how it is done.
<!-- User Credit -->
<hr class="credit-hr">
<span class="credit-link">Feature added by <a href="https://github.com/your-username">@your-username</a></span>
- Create a pull request for your new feature.
Rules/Guidelines for contributing
- Try to follow the site's colour scheme.
- Comment your code as you go and use readable variable names. Its hard to debug code when it looks like Latin.
- Dont delete or change other people's code without a good explanation, or your pull-request wont be approved.
We want to make our documentation (including this README) the best it can be. If you have any suggestions, please open an issue or join our Discord for discussion.
Screenshots
4 Oct 25, 2022
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
8 May 29, 2022
17 Dec 2, 2022
14 Dec 15, 2022
4 Apr 4, 2022
2 Nov 11, 2022
23 Dec 23, 2022
3 Jun 7, 2022
52 Dec 31, 2022
3 Oct 6, 2022
6 Mar 29, 2022
3 Jan 27, 2022
3 Jun 28, 2022
1.6k Dec 31, 2022
2 Jan 14, 2022
149 Jan 3, 2023