Projects

Unit circle to explain sine and cosine

An explainer to go along with the definitions of basic trigonometric concepts, sine and cosine, with a unit circle, using p5.js.

Drawing game

A pictionary game you can play online with your friends! Written in plain javascript, using HTML5 canvas and Firebase real time database.

Posts

Recreating Noisli's colour-changing background using CSS Animations

August 16, 2019

Noisli is a background noise generator that has subtle background colour changes. In this post, we use CSS animations to recreate the background colour changes.

How to highlight search terms in your search results

April 29, 2019

Have you noticed how search pages highlight your search terms in their results? Google bolds them, Facebook highlights these terms with a pale blue background colour, and Chrome highlights them in a…

Notes on Kyle Simspon's YDKJS

April 03, 2019

When I was in college, I mostly stuck to programming in C and C++, apart from occasional fiddling with Java, C#, and Python. I got a job as a Python programmer, and I read this book called Think…

Why does setState() not work in my React app?

February 28, 2019

In React, we use the setState() function whenever we need to update a component’s internal state. (Here’s an intro to state, props, and setState() in React.) But sometimes, setState() doesn’t work as…

Build a Medium clapper with React

February 21, 2019

In this post, we’ll build a simple Medium clapper with React. But before we get to the clapper, let’s go over some basic concepts of React..

Videos

Styling a list with ::before and ::after pseudoelements and CSS grid

For advice bot, I wanted to make the list of previously submitted advice look like zulip, but it was a dynamically generated list and I didn’t want to add too many elements using JS. Here’s my solution for styling the dynamically generated list with the ::before and ::after pseudoelements and CSS grid!

Check it out on codepen

Advice bot (part 3)

At recurse center, I made a zulip bot that gives recursers one piece of advice from an alum everyday, and a webapp to collect advice.

Here’s the link to advice bot on github.

Advice bot 2 - RC presentation

Advice bot (part 1) - RC presentation

Wiggly caterpillar - Creative Coding - RC presentation

I made a wiggly caterpillar during one of the creative coding events at Recurse Center, using p5.js.

Check out the caterpillar sketch.