Update: These projects have now matured and moved to their own domain. You can learn about them here. Source code of initial version of these sites can still be accessed using the links below.

In my earlier post, I wrote about two new open source projects that I started in 2016, namely: MM.css - A CSS Framework & MMpilot - A Static Site Builder.

However, those two were not the only projects I open sourced, there are two more projects that I started in 2016 for our site SuperDevResources, and made them open sourced on GitHub.

As you may already know, SuperDevResources is aimed at web and app developers and we plan to add as many resources as possible on the site related to web design and development of apps and websites. To enhance the features offered by the site, we added one new section - SDR Tools and reimagined an existing section - SDR News. I open sourced the code behind these two web based projects and you can find more details about them below:

SDR Tools - Web based tools for Developers

SDR Tools contains handy little web based tools for helping developers and designers in accomplishing some of their day-to-day tasks. Find below a peek of the site and a list of tools currently available.

Tools Available

While we will keep on adding new tools, these are some of the tools that have been added already:

• Image Cropper - Online tool for cropping images
• Markdown Writer - Online Markdown editor with real-time preview.
• Image to Base64 - Convert Image to base64 string online for use in HTML img tag and in CSS files as data URI.
• Color Shades - Generate shades of a color. Enter color in rgb, hex, hsl or hsv and get different shades of the color.
• Color Converter - Convert colors from RGB to HEX, HEX to RGB, RGB to HSL, HSL to RGB, RGB to HSV etc.
• Color Extractor - Extract colors from an Image. Builds a color palette from dominant colors in an image.
• JSON Viewer - An online JSON viewer. Display JSON data in tree view and with syntax highlighting.

How is SDR Tools built?

While the project utilizes my static site builder as well as CSS framework, there are a lot of other wonderful open source projects used in building these web based tools.

You can find credit given to these open source projects in every tool page. For example: The image cropper is built mainly using CropperJS.

Wherever possible, I have tried to use plain JavaScript instead of using a JavaScript Framework to keep the web tools light. However, in some cases, I did use jQuery and VueJS in few others. The project is hosted on GitHub Pages currently.

SDR News - News for Developers

SDR News aggregates news from multiple sources such as subreddits, hacker news, as well as some popular web design and development blogs. It is mainly built keeping my own reading habit in mind and I do hope that other developers will find it useful too.

How is SDR News built?

SDR News also utilizes my static site builder as well as CSS framework, but the main componet used is VueJS framework along axios library for fetching news asynchronously.

Want to Learn VueJS? Check out these VueJS Tutorials

I am currently utilizing YQL for converting RSS feeds to JSON, but am looking for a suitable replacement in case the YQL project is deprecated in future.

Contributing

As with any Open Source Project, I welcome isssues and pull requests. If you have any feedback then do get in touch with me on Twitter.