Visual game to learn Flexbox • Hacker News Board

Re: Visual game to learn Flexbox

#11

Post by pcl » Wed, Apr 13, 2016, 7:52 PM UTC

callmevlad wrote: post #10

pcl wrote: post #9

I love the tool itself... have you guys thought about some way to integrate it into Chrome or FF as a development / debugging tool?

We've been advocating moving our visual implementation (or something similar) to dev tools in both FF and Chrome. Here are some before/after examples to show you how a more abstract input method can really speed up development: http://things-that-web-inspectors-should-have.webflow.io/

Feature request: I understand your goal of visual tooling, but it'd be neat if I could turn on a mode in which the css for a given operation showed up in the tooltip, instead of english descriptions.

Re: Visual game to learn Flexbox

#12

Post by neil_s » Wed, Apr 13, 2016, 11:23 PM UTC

I cannot crack the last 3 :( Any hints anyone?

Re: Visual game to learn Flexbox

#13

Post by soperj » Wed, Apr 13, 2016, 11:49 PM UTC

neil_s wrote: post #12

I cannot crack the last 3 :( Any hints anyone?

26 gave me a hard time because I kept trying to do them vertically. Once I completed 27 & 28 w/ horizontal tiling I finally cracked 26.

Re: Visual game to learn Flexbox

#14

Post by soperj » Wed, Apr 13, 2016, 11:50 PM UTC

tsumnia wrote: post #8

Very cool, though I'd love to have an option to reset if possible

There is an undo button.

Re: Visual game to learn Flexbox

#15

Post by metasean » Thu, Apr 14, 2016, 2:14 AM UTC

In a similar vain:

- Flexbox Froggy - http://flexboxfroggy.com/

- CSS Diner - https://flukeout.github.io/

Re: Visual game to learn Flexbox

#16

Post by vamega » Thu, Apr 14, 2016, 3:51 AM UTC

Is there a technical reason Firefox isn't supported?

Re: Visual game to learn Flexbox

#17

Post by callmevlad » Fri, Apr 15, 2016, 6:11 AM UTC

vamega wrote: post #16

Is there a technical reason Firefox isn't supported?

Yep, more background here: https://news.ycombinator.com/item?id=9325796

(We're working around this soon though by moving away from native scrollbars, since it's very unlikely that Firefox will fix this anytime soon.)

Re: Visual game to learn Flexbox

#18

Post by jbotch » Wed, Apr 20, 2016, 9:27 AM UTC

neil_s wrote: post #12

I cannot crack the last 3 :( Any hints anyone?

(Spoiler coming)

For 26:

- Changed the order to have 1 at the end, aligned it at the bottom, then set its width to 100%. Then, for the parent container, click "Wrap children", so that 1 gets its own line. 1 should now be done. - Next, click the parent container. For the row layout, align them the right end. This gets 2 and 3 properly aligned on the right side. - Finally, click 3, and click "Align Self: End". This gets 3 properly positioned vertically.

The key insight for me was to realize the easiest way is to get it to work with the row layout. If 1 is at the beginning there's no magic mix of widths that will work, which means 1 needs its own line & therefore must be at the end position-wise. Haven't done 27 and 28 yet :).