A hub for web developers that offers a variety of tools to help with any developing needs.

  • By Thomas Hamilton-Smith
  • Last update: Dec 11, 2022
  • Comments: 13

WebDevHub - A place for developers

GitHub issues GitHub stars GitHub license

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.)

Planned Features

  • XML - JSON - ymal converter
  • Image Converter - UI implemented but needs server-side code to fix
  • Color Converter (Hex to RGB etc.)
  • 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

These are only some of the features planned to be added. 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:

  1. Clone the repository via terminal or github desktop.
  2. Run npm i to install all needed node packages.
  3. In a terminal window opened in the main project directory, run npm run devStart to active nodemon, which will restart the test server whenever a change is made. The server can be acessed at localhost:3000
  4. Create a new file in the /views directory titled your-feature.ejs and a new JS file in the /public directory titled your-feature.js
  5. Add a new app.get request in the server.js file, as such:
app.get("/your-feature", (req, res) => {
    // Render the page with given paramaters.
    res.render("your-feature", {    // The name of the .ejs file you created
        title: "Your Feature",      // The title of the webpage, usually the same as the feature name.
    });
});
  1. Code your feature.
  2. Add a link to the feature on the home page under a relevant subcategory.
  3. (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>
  1. 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.

 

Screenshots

Screenshot 2022-06-25 at 9 18 18 pm

Screenshot 2022-06-28 at 11 51 51 pm

Screenshot 2022-06-29 at 12 15 32 am

Github

https://github.com/THHamiltonSmith/webdevhub

Comments(13)

  • 1

    Image Converter (Not functional)

    I tried to make it work but it seems a server-side is needed to process the uploaded file. I added all the HTML, CSS and other Javascript parts so that only the Convert-Format function is required on the server-side.

  • 2

    Add a copy results button to the Code Formatter screen

    A copy/select all button for the formatted code would be handy, so the user can just click a button to select their formatted code rather than having to highlight it themselves.

    Screenshot of the page

    Screenshot 2022-06-28 at 11 51 51 pm
  • 3

    Reskin of home page major components

    Made a couple of design changes to the home page and a few backend technical changes.

    • Removed the text from most feature links and replaced it with an icon to indicate that features 'category'.
    • Make the feature take up less space since it doesn't have text, meaning more features can show up on mobile.
    • Added a disclaimer box around the home page WebDevHub disclaimer.
    • Updated the luna framework to the latest version for some technical and design improvements.
    • From now on, the luna-framework.css shouldn't be modified; just overwrite any styling in the style.css file if needed,
    • Organised all feature js files and page files into relevant folders for organisation.
  • 4

    Colour converter

    Added a colour converter system.

    A HEX, RGB, HSL or HWB colour code can be entered, and will be converted to the four different types, with a little preview showing the result colour.

    Individual colour codes can be copied to clipboard.

  • 5

    Create an XML - JSON - ymal conversion system

    Create a feature that allows the user to convert the three data types of XML, JSON and ymal from one to the other.

    This might be a difficult feature to implement without server-side features, so it may need to be added sometime in the future.

    Helpful Links: https://www.delftstack.com/howto/javascript/javascript-xml-to-json/

  • 6

    Create a colour converter

    Create a colour converter feature to convert different types. Types should include:

    • HEX - #1f2630
    • HSL - hsl(215, 22%, 15%)
    • HWB - hwb(215 12% 82%)
    • RGB - rgb(31, 37, 46)
  • 7

    Users cant scroll across feature rows on the home page

    Non-trackpad users can't scroll across the feature rows on the home page to see links that may be hidden. (Most Mac's allow a swipe on the trackpad to scroll, while mouses don't have this feature.)

    Adding a drag click-to-scroll feature to the rows should help fix this. Another solution would be to show the scrollbar and customise it to be uniform across all platforms.

  • 8

    Image Conversion

    Sorry for the delay, I have been travelling a lot. I am a beginner developer and tried my best to implement image conversion. Please suggest any changes to be made.

    I have used multer to upload the file to a buffer and sharp to convert the format.

    The only issue I am facing is when the user wants to change the format for the same image without re-uploading, the download doesn't work. It only works if the image is uploaded again. I am out of options on what to do.

  • 9

    Bump mongoose from 6.4.4 to 6.4.6

    Bumps mongoose from 6.4.4 to 6.4.6.

    Release notes

    Sourced from mongoose's releases.

    6.4.6 / 2022-07-20

    • fix(schema): disallow setting proto when creating schema with dotted properties #12085
    • fix(document): avoid mutating original object passed to $set() when applying defaults to nested properties #12102
    • fix(query): apply lean transform option to top-level document #12093
    • docs(migrating_to_6): correct example for isObjectIdOrHexString() #12123 LokeshKanumoori

    6.4.5 / 2022-07-18

    • fix(model+timestamps): set timestamps on subdocuments in insertMany() #12060
    • fix: correct isAtlas check #12110 skrtheboss
    • fix(types): fix various issues with auto typed schemas #12042 mohammad0-0ahmad
    • fix(types): allow any value for AddFields #12096
    • fix(types): allow arbitrary expressions for ConcatArrays #12058
    • fix(types): make $addToSet fields mutable to allow programatically constructing $addToSet #12091
    • fix(types): add $let as a possible expression to $addFields #12087 AbdelrahmanHafez
    • fix(types): fix $switch expression type #12088 AbdelrahmanHafez
    • fix(types): correct options type for syncIndexes() #12101 lpizzinidev
    • fix(types): avoid treating | undefined types as any in Require_id to better support _id: String with auto-typed schemas #12070
    • docs: fix up various jsdoc issues #12086 hasezoey
    • docs: add sanitizeFilter to mongoose.set() options #12112 pathei-kosmos
    Changelog

    Sourced from mongoose's changelog.

    6.4.6 / 2022-07-20

    • fix(schema): disallow setting proto when creating schema with dotted properties #12085
    • fix(document): avoid mutating original object passed to $set() when applying defaults to nested properties #12102
    • fix(query): apply lean transform option to top-level document #12093
    • docs(migrating_to_6): correct example for isObjectIdOrHexString() #12123 LokeshKanumoori

    6.4.5 / 2022-07-18

    • fix(model+timestamps): set timestamps on subdocuments in insertMany() #12060
    • fix: correct isAtlas check #12110 skrtheboss
    • fix(types): fix various issues with auto typed schemas #12042 mohammad0-0ahmad
    • fix(types): allow any value for AddFields #12096
    • fix(types): allow arbitrary expressions for ConcatArrays #12058
    • fix(types): make $addToSet fields mutable to allow programatically constructing $addToSet #12091
    • fix(types): add $let as a possible expression to $addFields #12087 AbdelrahmanHafez
    • fix(types): fix $switch expression type #12088 AbdelrahmanHafez
    • fix(types): correct options type for syncIndexes() #12101 lpizzinidev
    • fix(types): avoid treating | undefined types as any in Require_id to better support _id: String with auto-typed schemas #12070
    • docs: fix up various jsdoc issues #12086 hasezoey
    • docs: add sanitizeFilter to mongoose.set() options #12112 pathei-kosmos
    Commits
    • 5449ab9 chore: release 6.4.6
    • b8c99cf Merge pull request #11892 from Automattic/netlify-functions-example
    • 2751883 fix tests
    • eced2c7 Merge branch 'master' into netlify-functions-example
    • 92cb6fb Merge branch 'master' into vkarpov15/gh-12085
    • 422f9da test(schema): add coverage for calling plugin() with options
    • 2262a77 fix(document): avoid mutating original object passed to $set() when applying ...
    • 2e6b064 made requested changes
    • b70a0dc Merge pull request #12123 from LokeshKanumoori/patch-1
    • 086bd9f fix(query): apply lean transform option to top-level document
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 10

    Create a search system

    A search system will make it easier for users to search for a feature they want that they cant find on the homepage. This will be great once the number of supported features on the site greatly increases and it becomes harder to navigate.

    #19

  • 11

    Easier way to plan/suggest new features

    Currently, any new feature suggestions or ideas are heard through word of mouth by me, and I will then add them to the planned features section of the README or a user creates an issue with a feature suggestion. If I think the site is ready for a feature I put on the README, I will create an issue for it.

    It is probably better to save issue creation for bugs, enhancement/improvement suggestions etc. and limit the number of feature requests submitted so it doesn't get clogged up. A better way for users to suggest features is needed for this.

    This could include a google doc, emaling me, trello board etc. If you have any ideas, comment them here.

  • 12

    Create a search system

    A search system will make it easier for users to search for a feature they want that they cant find on the homepage. This will be great once the number of supported features on the site greatly increases and it becomes harder to navigate.

    I will work on this feature, but if you would like to help, that would be great!

  • 13

    Add favourite features

    Add a feature that allows the user to favourite features for quick access instead of needing to constantly search for something they might use all the time.

    I will work on adding this feature, but some help would be great! Here are my current thoughts:

    • The best way to do this would be to create an account system that will store the user's favourites, which will also allow for expansion of more features in the future.
    • Each user will have an array in this database which contains their favourite features which can easily be changed by button press.
    • This data can be stored in two ways:
    • Local JSON file
    • MongoDB Database

    These two options cause some problems though, as a local JSON file will expose account data and all users favourites to anybody who looks at the repo. A MongoDB database would be great, but it creates problems with API keys being exposed and will make it difficult for users to test any changes involving accounts locally.

    If you have any suggestions on how to tackle this problem, leave a comment on the issue!

Popular Tag

Related