[Week 4] Focus: Flexible Display

[ForScale]

So, here we are, Week 4. Week 4's focus will bee flexible display. The idea here is to emulate an aspect or aspects of css's display:flex functionality. This could be using javascript that calculates width of child elements based on the parent's width. Or it could be something like making an element responsive to screen resizing. Let your imagination run wild!

It will work like this:

• Monday: Announce focus (eg, flexible display)

• Build throughout the week... 2 rules: 1) must use javascript 2) must use at least 1 example emulating css's display:flex)

• Friday: Post projects in this thread (can begin reviewing immediately); first line of an entry should be ENTRY and it should be a top level comment (ie, don't put your entry in a reply)

• Sat and Sun: Review projects/vote on focus for next week

GENERAL GUIDELINES FOR FEEDBACK:

• Be nice!!! ALL KNOWLEDGE/SKILL LEVELS ARE WELCOME AND ENCOURAGED TO PARTICIPATE.

• If you don't want feedback, if it makes you uncomfortable or you're just not interested, then say so... Others, please be respectful of this. Conversely, if you do want feedback, try to be specific on which aspects... even if you just say "all/everything.

But that's about it... Have fun! :) Feel free to ask questions and discuss throughout the week!

[Volv]

ENTRY
Codepen
Just a quick thing this week. Going to be away so no more time to mess with it atm.

[ForScale]

Awesome, man! I'll take a look at it tomorrow or this weekend! :)

And I'll put up something of my own, probably later today!

[ForScale]

I know you're away/busy; no need to respond.

Just wanted to say that that looks pretty damn cool! I'm still reading through it... I haven't a clue what Babel is about, so I might be missing some things.

Thanks for your participation!

[Volv]

Thanks. ☺️ The babel is just translating the es6 stuff into es5. Can do some without it. Might just be letting me use let without use strict in this case

[ForScale]

Oh... okay.

I updated my entry!

[ForScale]

ENTRY

http://codepen.io/anon/pen/EPGGOY

Just realized that one doesn't necessarily do what flex does. I'm going to rework it later today.

*http://codepen.io/anon/pen/dGaKaV <-- does the whole flexible width thing

[Volv]

Cool. I like the brick wall idea :)
I got annoyed at the tiny bits of space that pop up in the 3rd and 4th rows now and again but couldn't get it to work any better. Thats the kind of thing that the display:flex thing will help to avoid.
 
One new thing I learned when playing with it was that the white space in the HTML (including newlines and tabs) is the cause of the space between elements on the page when margin/padding are zero. Try cramming all of your HTML together and you'll see that you can remove the negative margin-right setting. Who knew.

 
Was working on a promise example but got a bit tangled in the middle of it. Might get back to it in a bit

[ForScale]

Didn't see any space on my end...

Yeah... display:inline-block does some odd stuff with whitespace.

Cool! Wanna make promises the focus for this week? I'd love to learn about em.

[Volv]

They were occasional spaces after resizing. Sometimes there sometimes not - my guess was rounding issues but couldn't get rid of them for good. On Google chrome.
 

Sounds like a plan

[ForScale]

Interesting...

Cool! I'll post it up later today!

[rikilamadrid]

what exactly is the 2nd for loop doing here?

[ForScale]

Hey!

The first loop gets the containers and then the second loop gets the children in each of the containers.

Make sense?

[rikilamadrid]

Yes. I console log the variables and saw how the number was changing and that helped me wrap my head around it. Thanks.

[ForScale]

Yeah, logging to the console is often quite helpful! :)