Fitting Flappy Bird Into a Tweet

Gameplay of 278-byte Flappy Bird

Since Twitter recently extended the character limit to 280, I’ve challenged myself to write programs or patterns within 280 bytes such as a tweet-sized Flappy Bird (game by dotGEARS about flying a bird through pipes without touching them) I’ll share in this post. I once thought about writing functional apps under 140, but there was just too little room to do anything significant.

Read more…

Posted in: JavaScript


Trick for Resizable and Responsive CSS Images

Every once in a while in CodePen’s Popular or Picked section, you’ll come across a Pen name containing #dailycssimages. These Pens are vector images created using only HTML elements and CSS. These images usually consist of absolutely positioned elements formed using a variety of properties including border-radius, box-shadow, and sometimes clip-path. For plenty of examples, just do a search for the hashtag. I have been drawing some myself including this Longcat and radar animation. Yet, I’ve always wondered if there was a way to make them resizable or responsive.

Read more…

Posted in: CSS


Creating a Circular Pinwheel in CSS

pinwheel step 3

In this post, I’ll show you how to create a circular pinwheel that’s easily customizable using Jade (HTML preprocessor) and Sass (CSS preprocessor). By using them for the HTML and CSS, we’ll easily be able to change how many colors the pinwheel uses and the number of times to repeat the pattern of colors with just a couple variables.

Read more…

Posted in: CSS