Modern 100% height divs

In 2011 I published a popular article, 100% height Divs with 2 lines of code, which showed how to use JavaScript to get around the difficult layout problem of having two elements side-by-side both at 100% height of their container. In 2012, an update was published which showed a similar solution using jQuery. Both of these methods are now obsolete, and modern css solves the problem quite simply.

Enter flex-box.

Flex-box, now widely supported, allows complex layouts Рlike the 100% problem Рto be solved simply and elegantly. A great post (CSS-Tricks has a great guide to flex-box (which I reference frequently))

Here is an example of a simple 2 column layout using flex-box:

See the Pen bpzQjo by Michael Jasper (@mdjasper) on CodePen.

And another example of a more complex layout using flex-box:

See the Pen XdOyay by Michael Jasper (@mdjasper) on CodePen.

And finally, an example of flex-box to build an entire page layout:

See the Pen Flexbox golden layout by Michael Jasper (@mdjasper) on CodePen.

 

ES6 Depth-first object (tree) search

A co-worker recently asked about searching for properties in a JavaScript object, where the properties could be located in unspecified locations within the object (not nested though). This was the job for a depth-first tree search! I don’t get to post about more traditional computer science topics very frequently, so I thought I’d share my little ES6 recursive search function:

Explanation (commented source)

Example

This code can be used like so: