Collection of posts and projects related to technology, web development, and some other things.
Introduction We encounter voting in some form around us all the time. We rate our Uber drivers, they rate us back. We up-vote and down-vote posts and trolls on Reddit. We give stars to movies and restaurants. We vote on who gets kicked out of our favorite reality television show. We vote for Presidents. All these voting systems seem a bit different from one another, but one thing that's definitely…
Introduction No one likes it when you go to a web page and it automatically starts playing a video loudly. Browsers have changed their auto-play policies to let JavaScript auto-play a video only if it's inline and muted. (See posts for Safari and Chrome ). Problem: Playing a video queue This change in policy is great, but it may restrict some use cases. Say, you have created a queue of videos (or…
Introduction If you have ever used a visual editor — a WYSIWYG designer or a Graphics editor, you'd expect to be able to resize and rotate the selected shape or element. These are common operations, and yet when applied together can cause a bit of an itchy head. The Problem Let's take the most common use case - a rectangle ( Elements on a web page have a bounding rectangle, and vectors in graphics…
Introduction Computers are inherently not good at randomness. The thing is, you can program a machine to generate numbers which may be considered random, but the machine is at the mercy of its programming. You cannot really call something truly random if it follows an algorithm to generate the random numbers. Truly random numbers can be generated but they usually rely on unpredictable physical…
Introduction RoughJS is a small-ish (<9kB) JavaScript graphics library that lets you draw in a sketchy, hand-drawn-like style. It lets you draw on <canvas> and with SVG . This blog post is to address the most common issue filed with RoughJS: How does it work? A bit of history Charmed by images of hand-drawn graphs, diagrams, and sketches; like I true nerd, I wondered what if there were a way to…
Introduction An image can be rendered on a computer screen using millions of colors. In a traditional bitmap, every pixel is represented by a RGB value — the red , green , and blue channels. The value of each color can vary between 0-255 . This means there are over 16 million (256 * 256 * 256 = 16,777,216) possible colors! What if you did not have millions of colors at your disposal? Think about…
Introduction An image is represented on a digital screen using pixels. A pixel is the smallest addressable unit of a digital screen, which means, when controlling a screen, we cannot control anything visually smaller than a pixel. Most screens are composed of a 2-dimensional array of pixels. Rasterization is the task of turning an image, described in vector graphics, into a pixel-map (bitmap) on…