It was a friend’s birthday recently and I wanted to make her something special. She had recently gotten really into playing the Pixel Art mobile game where you just color numbered boxes to make a pixel art drawing. I ended up developing a colourable drawing similar to this!
A brief process of how I did it is as follows:
- Generate Pixel Art using http://pixelartcss.com/ and grab it’s CSS
- Wrote a barebone HTML document with an empty table
- Wrote a script to convert the box-shadow parameters to individual table cells with background colors based on box-shadow
This wasn’t a hard process, but would’ve been a lot of manual labor if I didn’t write the script to do it for me. So I got an idea, why not just write a script to generate the entire website directly from the Pixel Art CSS code.
Aaaaaaand that’s what I did 😀
Introducing Pixel Art to Drawing 😀
NOTE: This does not yet work on touchscreens.
For those of you here who don’t know, I recently made HadYouBought.com – a website where you can check how much money you could’ve earned had you bought $100 of a coin the other day.
The idea for this web-app came to me while I was giving some investment advice to a friend of mine. I had been asking him to purchase some VeChain (VEN) for a while. One day, the coin experienced a gain of over 20% and it was a classic “I told you so” moment for me. However, I realized I’ve been through this so many times before. Multiple times have I suggested my friends or my family to invest in a specific cryptocurrency but they didn’t and eventually it experienced gains in price. This gave me the idea of putting those gains in numbers – because visual representations speak more than words.
In the back of my head I sort of remembered visiting a website which showed you how much your investment in Bitcoin would’ve been today had you bought it on a past date – but upon a couple quick minutes of Google-ing I could not find that – so I decided to make my own.
The first step was to look for a good pricing API which offered historical pricing data for a wide range of coins. Initially, the website used CoinMetrics.io but I switched to CryptoCompare a couple of days later mainly because they have more data and just more coins in their database as well. Plus, with CryptoCompare, I didn’t have to cache the datasets anymore.
After the backbone scripts were done began the hard part. Being a backend software developer, designing good looking websites is always a struggle for me. I wanted to use a lightweight CSS framework which would assist me. I haven’t been a huge fan of Bootstrap recently so I went with MaterializeCSS instead. After a couple hours of struggling with some jQuery, I was able to make a working website.
I wish I had a screenshot of it, but the initial design looked horrible compared to what it looks like at the time of writing. I ended up adding preloader animations, switched the coin dropdown to a modal with buttons, added a FOMO warning label, and made the project open source on GitHub
Finally, I took to Reddit to promote the website. I posted links of the website to subreddits of cryptocurrencies where it’s allowed and within a couple days I stirred up some interest in the website. It has been less than a week I launched it and the website has generated over 5,000 views. I honestly didn’t even expect it to gain this much interest, it was just a tool for me to get my friends into crypto ASAP but hey, it worked 😀