The Game of Life with CSS3 Flexible Boxes and React

Published on by Morgan Ney

The game of life is an example of cellular automaton and a popular programming assignment for computer science students. I wanted to put together a basic implementation of the algorithm using CSS3 Flexbox and React. Below is a gist of a React component encapsulating the game logic and a demonstration of a running example.

Thanks to CSS3 Flexbox (and browsers that support it) positioning and sizing the cells in the grid across a spectrum of user agents and viewport sizes is easy. Once you define an element to be a flex container using the flex value of the display property, i.e. display: flex; all child elements become flexible boxes, including text. All that is left to do is specify how these flex box children should orient themselves inside the container and adapt to available display space.

First, here is the HTML for a 2x2 game grid. The classes are for coloring the live from the dead cells, and sizing the cells based on the selected grid size so that flex-wrap: wrap; breaks the "rows" at the correct cell.

Here is the associated CSS for styling the flex container <section> and the flex items <span>. The CSS units for viewport-percentage lengths vw, vh, and vm can help keep the flex container square. In this case I just used vw.

Finally, a CSS preprocessor can help generate the styles needed to properly size the <span> flex items for different grid sizes. Since I already use node I generate the styles in less to avoid the extra sass dependency on ruby.

Of course the bounds on the grid size are arbitrary and only limited by available time and space. Maybe next time I'll explore creating the cell grid with the Canvas API. The source code for the game of life just demonstrated is hosted on github.

Relevant to  CSS3 Flexible Box, Less, React

Recent Posts

ES6 Iterators and Generators

Published on by Morgan Ney

Two great new language features of ES6 are Iterators and Generators. These constructs allow you to define custom looping behaviors over objects and conserve memory resources with lazy evaluation of large or even infinite collections.

Relevant to  JavaScript, ES6, Iterator, Generator, Generator Comprehension, Symbol, Spread operator

D3 Treemap From Resource Timing Performance Entries

Published on by Morgan Ney

Performance is always a concern for front-end engineers. Fortunately browsers are starting to implement the Resource Timing API to get key networking milestones for each resource embedded in your web app. This data combined with a D3 Treemap can offer useful insights into tweaking page performance, or at the very least a pretty picture of whats under the hood.

Relevant to  Resource Timing API, D3 Treemap, JavaScript

JSON API for Social Media Share Counts

Published on by Morgan Ney

Want to create a custom look for social media buttons from Facebook, Twitter and Google? Are you tired of the vendor supplied widget styles when you use their embed scripts? socoapi is a JSON API for obtaining share counts of your website on social media sites like Facebook, Twitter, Google+ and Pinterest.

Relevant to  Node.js, JSON, API, Social Media

A RESTful JSON API for the NextBus XML Feed

Published on by Morgan Ney

The NextBus XML feed provides useful data for real-time transit applications but the service isn't very friendly to web developers. Use "restbus" to access the NextBus XML feed over a RESTful JSON API.

Relevant to  REST, JSON, API, Node.js

Dynamic Gists Using MutationObservers and Promises

Published on by Morgan Ney

GitHub Gists are great for your blog if they're part of the initial payload before the browser's window has fired its onload event; just use the provided embed script. If you need to embed Gists into XHR loaded content, it's still possible with a bit more work. MutationObservers and Promises can make coordinating the retrieval of the Gist and its subsequent DOM placement a lot easier.

Relevant to  MutationObserver, Promise, Backbone, jQuery

Simple CSS3 Ribbons

Published on by Morgan Ney

Browsers have come a long way in their support for CSS3, in particular generated content of pseudo-elements ::before and ::after. Using these two pseudo-elements it's simple to create a CSS3 ribbon using only one HTML element.

Relevant to  HTML5, CSS3

Installing CouchDB 1.5 on AWS EC2 CentOS 6 (x86_64)

Published on by Morgan Ney

As of January 21st, 2014 the CentOS 6 EPEL repository only supports version 1.0.4 of CouchDB which is currently on version 1.5. Luckily, installing CouchDB from source on an Amazon EC2 instance running CentOS 6 is pretty simple.

Relevant to  CouchDB, EC2, CentOS

Using JavaScript Promises with Backbone.sync

Published on by Morgan Ney

Backbone is a great MVC library for JavaScript, but applications involving fetch() sequences can start to get ugly with deeply nested callbacks. Using ES6 Promises with Backbone can prevent ugly callback chains and make your code more understandable and flexible.

Relevant to  JavaScript, Backbone, Promise, jQuery

HTML Excerpt with PHP

Published on by Morgan Ney

HTML excerpts or previews of an article can reuse the CSS developed to style the entire article, making for a more eye-catching experience. However, it is not always clear how to prevent breaking your HTML when building the excerpt so most authors tend to deliver plain text excerpts. Using PHP's DOMDocument class, it's possible to create a valid HTML excerpt.

Relevant to  PHP, HTML, DOM
Get in Touch

BizzyBtyes is owned by Morgan Ney, a father, husband, and web developer originally from the San Francisco Bay Area and now living in Coarsegold, Ca. just south of Yosemite.