solved-by-flexbox

The article makes it look simple. The actual code that deals with various browsers is here: https://github.com/philipwalton/solved-by-flexbox/blob/maste...

> the CSS required to make this demo work cross-browser is slightly different from the CSS shown in the example above, which assumes a fully spec-compliant browser. See the comments in the source for more details. The code: https://github.com/philipwalton/solved-by-flexbox/blob/maste... It've been great if he'd hooked up the page with caniuse to determine the best css to use for a individual's use case. See also his own flexbugs (https://github.com/philipwalton/flexbugs), which ironically is linked directly from caniuse's 'known issues'.

I took a look at cssnext while going through the source for the 'Solved by Flexbox' website which was front page last week (https://github.com/philipwalton/solved-by-flexbox/). It looks like it does a lot of what sass does, except that it will actually be CSS soon. I suppose it's kind of like using an ES7-to-ES5 transpiler rather than using some other compile-to-JS language; it's a matter of preference, but the ES7 will eventually run without dependencies as well when the transpile step is no longer needed. It'd be nice to see CSS frameworks rewritten using pure CSS (transpiled with cssnext); in fact I might give it a try if I get motivated :)

I rebuilt my personal site on Flexbox in December last year after making the call that it was widely supported enough [1]. There were a few hiccups: 1. Safari's requirement to use the webkit- prefix is a pain. Thankfully there are SASS libraries that work around that [2], but you aren't using Flexbox directly. 2. Google's pagespeed tools doesn't support it. It's an ancient version of Webkit -- your mobile score will suffer. If that matters to you, you'll have to do some hacking to ensure that it doesn't affect things on the mobile side. [1] for a personal site. [2] https://github.com/philipwalton/solved-by-flexbox

> I wonder if there's a good reason for the madness Well the reason is that CSS originally wasn't intended for layout…. But since there was no other tool for layout, once the web design community decided to remove tables from layout it got drafted despite being severely insufficient. Layout modules have just started being developed, fought upon and implemented in the last few years. Here's how vertical centering looks like when using flexbox (http://philipwalton.github.io/solved-by-flexbox/demos/vertic...): .parent { display: flex; align-items: center; justify-content: center; } .centered { max-width: 50%; } (note: this ignores prefixing, specs differences and browser-specific issues, here's the component https://github.com/philipwalton/solved-by-flexbox/blob/maste... which is itself expan

Great question. I use Google Analytics to track where users are clicking, specifically, when users click on external links that aren't otherwise tracked by the GA tracking code. The problem is that if you click on a link that opens a new page, the functionality in the click handler may or may not run depending on how long it takes to redirect the request. That means that if I'm tracking clicks, I very well may be losing a good deal of data. The alternative is to hijack the click event, wait for say 100ms, and then load the new page via JavaScript, but that also break the open in a new tab functionality. In other words, there are no good options to track external click events via Google Analytics and still give users complete control over where the links go. The best option I could come up with is to always open external links in a new tab