Author Topic: CF's Coding Challenges!  (Read 4909 times)

Chaotic Fear

CF's Coding Challenges!
« on: August 28, 2014 (02:07 PM) »
Why not.

Using CSS, center `div.inner` in this jsfiddle: http://jsfiddle.net/Lp42qe0c/

It must be centered 1) Without defining a width, as that could vary in both the outer and inner div, 2) With the red border properly spaced on the sides of the text, and 3) Without changing or adding any HTML code.

Hit the Run button to see if your code works, hit Update to generate a new URL to post back in this thread.

There's multiple ways to do this with modern CSS, probably none of which are supported by IE7. Too bad IE7, no one wants you.

Edit: Picture of the result to clarify.
« Last Edit: August 28, 2014 (02:37 PM) by Chaotic Fear »

celebi

Re: CF's Coding Challenges!
« Reply #1 on: August 28, 2014 (05:20 PM) »
plaudite amici

Chaotic Fear

Re: CF's Coding Challenges!
« Reply #2 on: September 05, 2014 (09:39 AM) »
Of course the border does not appear proper on the sides of the long text in your attempt. There's no situation where you would expect the border to be broken like that. The obvious fix is to change `display` to `inline-block` instead of `inline`. You also added a side-effect of centering the text itself when that might be better left left-aligned, and that's to any child of `.outer`. To better exemplify how the `.inner`with long text is still centered I've added a max-width (which is still variable, the element will remain centered regardless of the width): http://jsfiddle.net/Lp42qe0c/7/

A better method, if you don't mind dropping support for IE8, is by using `margin-left: 50%` with `transform: translateX(-50%)`: http://jsfiddle.net/Lp42qe0c/5/

Another awesome method is Flexbox. By simply setting the display to flex, margins now work as expected even without using the other powerful flexbox properties. This has less IE support though. http://jsfiddle.net/Lp42qe0c/6/

There's also the 'absolute' method of centering, but that requires a defined height. And it's possible using `display: table`.

Sorry for not replying sooner, sleep deprivation has been getting to me.
« Last Edit: September 05, 2014 (09:41 AM) by Chaotic Fear »

Chaotic Fear

Re: CF's Coding Challenges!
« Reply #3 on: September 05, 2014 (12:46 PM) »
Alright. Here's a little app I whipped up this morning to introduce you to NPM and Browserify: http://requirebin.com/?gist=415ea8a463949eec0ae9

The `require` statements pull in library from the npm repository. Moment, for instance, formats dates into strings like '7 hours ago'.

Here's the challenge: Write a function which, on an interval, updates the date strings inside the `<time>` elements using moment. Perhaps every 20 seconds or whatever.

I couldn't get this script to save with RequireBin, it must be something about one of the modules I required and a glitch in requirebin or something. I only got it up by manually generating the source and putting it in a gist myself. You can test your solution there though, then paste your added code here.