All my online work(mostly open-sourced) can be found on my Github Profile

varunmalhotra.xyz

This is my personal website, HYDE smelted static and responsive HTML site and each blogpost page has been authored in Markdown to avoid hand-authoring HTML. This site uses template language simlar to that of the popular Django framework, implemented through the Jinja2 project for rendering HTML pages into static content. If you look at my weblogs, more than half of the HTML of each page is boilerplate replicated across all entries. A template allows me to express that 50 percent of content only once and have it automatically applied to all the pages.

HYDE provides me beautiful Syntax Highlighting Plugin to post all my code-snippets in my weblogs according to the language's taste. It not only makes code-snippets more readable but also helps in understanding the main points being highlighted.

Technologies Implemented: Python, HYDE, HTML, CSS, Bootstrap, JS, Jinja2, Markdown

Color Schemr

Generate your always aspiring Color Schemes by simply hitting spacebar (on desktop) or swiping (on mobile).

Features:

Generate Palettes - Hit spacebar to generate new palettes.
Add / Remove Strips - Add to front / last (Upto a maximum of 10 strips), remove any strip.
Color Range - Get Colors from a specified range of [R, G, B]. Just select your preference.
Lock / Unlock - Control whether hitting spacebar should update strip's color.
Color Codes - Each strip color in Hex and RGB code.
Adjust Opacity - Adjust strip opacity by dragging the slider.
Random Quote - A color quote with each new palette generation.
Global Settings - Lock / Unlock / Adjust Color Range for all Strips.
Disco Mode - Automatic palette generation in a loop.
Piano Mode - Automatic random strip changes color in a loop.
Preview Mode - Preview how colors would look on a minimalistic template.
Gradient Mode - Blend colors to view it as gradient strip (works best with two colors).
Key bindings - Change particular strip color by pressing number keys (0-9). 1 for first strip...0 for tenth.
Responsive - Cross platform responsive app.

Technologies Implemented: AngularJs 2, Materialize framework (MDL), TypeScript, ES6, Webpack, HTML5, CSS3 and FontAwesome

secure-ls

Secure LocalStorage data with high level of encryption and data compression.

Features:

Secure data with various types of Encryption techniques including AES, DES, Rabbit and RC4 (defaults to Base64 encoding). Secret key, if not provided, is also secured and generated using PBKDF2 password key genration.
Compress data before storing it to localStorage to save extra bytes (defaults to true).
Advanced API wrapper over localStorage API, providing other basic utilities.
Save data in multiple keys inside localStorage and secure-ls will always remember it's creation.


Technologies Implemented: ES6, Webpack, crypto-js, lz-string for library; HTML5, CSS3 and Materialize framework (MDL) for Landing Page

Translatr

It's a cross platform, online translation tool. It helps in translating a text or a short paragraph into different multiple languages.

Who is this for? There's no such free online API which fulfils the desired requirements. Google Translate API is not free and this tool fetches result from it's older API only and parses the data accordingly.

Features:

It helps in translating multiple languages at once. The service translates a string one by one and then outputs the desired output once all being done.
It can be used as an API for multiple languages translation for small personal needs.
It stores current options(in LocalStorage) thereby speeding usage for later.
Directly copy the JSON formatted response to your clipboard.
Select / Unselect `All` countries.
Filter countries quickly using search-bar.


Technologies Implemented: AngularJs 1.4, Materialize framework, HTML5, CSS3 Python, Flask, and Google Translate API

Visualization of ProductHunt Users worldwide

The primary challenge of this project was figuring out how to get the desired data.

The secondary challenge of this project was figuring out how to draw several thousand 3D data spikes as quickly and smoothly as possible.

Script was written in NodeJS to fetch all the PH users data, Twitter API was used over the collected PH data to get the location of all users. Google Maps Geocoding API helped in converting addresses (like "1600 Amphitheatre Parkway, Mountain View, CA") into geographic coordinates (like latitude 37.423021 and longitude -122.083739), which can be used to place markers on a map, or position the map. Data modelling and normalization of data followed after proper screening of Geocodes data.

Blog: Data modelling, screening and visualization Technologies Implemented: JavaScript, NodeJS, WebGL, HTML5, CSS3

json2html

json2html is an open-source project which helps to convert JSON Object to HTML representation.

Non-technical audience and sometimes even developers too, find it difficult to understand JSON representation when it goes viral in terms of its depthness. This app aids them in learning and better understanding of deploying JSON. The final representation can be viewed as HTML tables with just normal looks or glorified with awesome front-end framework, Bootstrap. This project has been developed using an open-source technology, a so called python library - FLASK.

Technologies Implemented: Python, Flask, Bootstrap, HTML, CSS and JSON

Bridge The Gap

A simple HTML5 game where a player has to create bridges in order to cross buildings. Here's the video link - https://youtu.be/wBhNJL-zXXM?t=424

Technologies Implemented: HTML5, CSS3, JS

Simplegist

Github-Gist Api - python wrapper for GitHub's Gist API.

Below are some cool features:

Creating gists returning the url, script and clone link for copy-paste purpose
Checkout one's gists - Name(s), Description and Content
Edit and Delete a gist
Search GitHub user's gist - fork, star and unstar them
List-all comments of any gist, make/edit a comment on a gist, delete a comment

Read Full Documention at READTHEDOCS/PYTHONHOSTED

Technologies Implemented: Python, Github-APi(v3), Requests

Resumizr

Real time Resume Builder, auto-filling data from connected social networking sites

Technologies Implemented: Django, Python, Jinja2, HTML5, CSS3, JS, JQuery, Bootstrap, OAuth Integration

PyShare

PyShare is an open-source client-server model based application. It's a local, event-driven and multi-user application which provides asynchronous File Sharing. The backend runs over Twisted Networking Engine.

This project aims to bring down the tedious amount of work to integrate and collaborate team;s work. Though it doen't provide any such mechanism to enhance collaborativeness, but it let users to know the work status of others, let syncing of work.

Technologies Implemented: Python, Kivy Framework, Twisted Library and Bash

embed-jsfiddle

Web Component wrapper for jsFiddle's widgets using Polymer.

Technologies Implemented: JavaScript

GistHub

GistHub is an HTML5 app for managing Github Gists and was designed solely for the purpose of Firefox-OS app. It's a packaged and free app to be downloaded from Firefox Marketplace GistHub.

Some Features include:

View all github-gists
Edit a gist
Delete a particular gist
Create numbers of gists
Search any github users' gists
Fork, Star, Unstar any number of gists

Technologies Implemented: HTML, CSS3, JavaScript, JQuery, Twitter-Bootstrap, IndexedDB, AJAX, Github API v3 and JSON

Calculator

A Simple HTML5 based Calculator providing all the basic functionalities. It was developed for Firefox Marketplace.

Technologies Implemented: HTML5, CSS3, JavaScript

Melange

Melange, yeah, most of you might be thinking of Google-Melange, right ? But this is totally different and was given this name, actually before I have heard about Google-melange .

Melange is a webapp providing a very flexible and user-friendly interface for building static websites, that automates real-time website code deployment. Moreover, features like Button glorify, HTML text-formatter and crawling of techie words not only provides an efficient and easy wrok-flow to hack on, but also, actually prooves it's ambigious name 'Melange' - a mixture.

Melange is currently beta version and supports only a few HTML tags. A User can drag and drop various images, can play with some random texts, providing numerous styling options with dynamic re-positioing. Choice of removing the elements can be carried by dragging them onto the trashbox. Custom static pages can be a product out of it in no time.

Technologies Implemented: HTML, CSS, JS, PHP, JQuery, AJAX, MYSQL and FB-SDK.

Proword

Proword is a basic Text-Editor, fully Implemented in C/C++ using Borland graphics. Proword was my first project with so called Data Structurlly. It's dual mode i.e Console mode or general notepad mode provides a soothing environment to work on.

It also empasses the User Authentication feature which allows a user can save and reload their work. The usual workflow in writing is thoroughly achieved using multi-level link-lists and structures.

Technologies Implemented: Data-Structures, C/C++

Gold Miner

Gold Miner is a very basic Game, fully implemented in C/C++ using Borland graphics, and my first ever project with my journey of Computers.

It's a game in which an excavator tries to find the hidden Gold using his magical stick. The stick can move in any direction with it's flexible length. Obstacles in between makes the situation a bit trickier.

Technologies Implemented: C/C++, Borland Graphics