Flexbugs: CodePen does NOT support Internet Explorer 11 (IE11)

[akaustav]

This is more of an inconvenience than a problem. All examples in this repository are on Codepen. CodePen displays the following warning message when I attempt to open the bug and workaround examples provided on this repository in the Internet Explorer 11 (IE11) browser on a Windows 10 machine.

[akaustav]

At the moment, I am resorting to doing one of the following:

1. Copying code locally

On my local machine, I:

• Create a temporary CSS file and copy your CSS content from CodePen into it.
• Create a temporary HTML file and copy your HTML content from CodePen into it.
• Link the temporary CSS file as a stylesheet in the temporary HTML file.
• Open the temporary HTML file inside IE11 browser to preview the output.

2. Fork your Pen

On a supported browser (like Google Chrome), I:

• Sign-up for an account on CodePen.
• Login into CodePen.
• Fork your pen.
• Switch to CodePen's Debug Mode using the Change view button.
• Copy the Debug Mode URL.

Then, in IE11, I paste the Debug Mode URL into the address bar and open the page.

Is there a better way to get past this warning message and preview the bugs and their workarounds in IE11 apart from the steps which I have mentioned above?

[mreinstein]

It might make sense to move all of the codepen hosted examples into static html and host them on github pages. This would enable the samples to run in ie, and it also means the information in this repo is not dependent on some external resource for hosting part of it's content, making it more resilient in the long run.

[akaustav]

@mreinstein I like that idea. Would you happen to have one (or two) such examples using static html hosted on GitHub pages (in a separate branch/fork, maybe)? If yes, perhaps I can devote some time to eventually add all other examples using the same idea to GitHub pages.

[mreinstein]

I don't have any examples handy, but github has very nice tutorials for using github pages. It's pretty straightforward I think.

The bigger issue is if this is a strategy that the maintainer(s) would like to pursue (it requires setup by the repo owner.) @philipwalton is hosting these examples via github pages something you'd be open to?

[philipwalton]

@mreinstein yes, totally open! Also, I haven't had much time to maintain this repo lately, but if others wanted to help contribute, I'd be happy to give admin rights to people. Let me know!

[akaustav]

@philipwalton - Let me (@akaustav) and/or @mreinstein try doing the initial setup and an example on a fork. That way you can be sure that we are worthy of becoming admins on this repository.

[akaustav]

@philipwalton / @mreinstein:
I have started some preliminary work on my fork here.
See the corresponding GitHub page here.

Things completed so far:

• [x] Test if the GitHub page corresponding to README.md opens in IE11.
• [x] Create 2.1.a-bug using GitHub pages.
• [x] Create 2.1.b-workaround using GitHub pages.
• [x] Test the GitHub page versions of 2.1.a-bug in IE11.
• [x] Test the GitHub page versions of 2.1.b-workaround in IE11.
• [x] Decide on a suitable folder structure and move the code examples if necessary.
• [x] Add the links of 2.1.a-bug and 2.1.b-workaround in README.md to respectively point to the new GitHub pages versions of those examples.
• [x] Test if the new links work - taking the user to GitHub pages.

[akaustav]

@philipwalton / @mreinstein:
See the working example for Flexbug#2 in GitHub pages here: https://akaustav.github.io/flexbugs/#flexbug-2

Any feedback is welcome.

[akaustav]

@philipwalton / @mreinstein:
I have opened PR #276 as a proof of concept solution to this issue. Feel free to put any code review comments there.

[akaustav]

@philipwalton / @mreinstein / @gregwhitworth
Do you have any comments on PR #276 ?

[mreinstein]

Hey, sorry for the reply delay. I just tried this in ie11 on a virtual machine, works great!

[akaustav]

@mreinstein - Thanks for confirming the functionality. Do you have any specific feedback on the GitHub pages theme which I use? Or perhaps on the files inside src/ folder on my fork (folder structure, file naming convention, file contents, etc.)?

@philipwalton - I presume you are busy at the moment. Until you get some time to review, I am going to continue on the same approach for the remainder of the bugs and workaround on my fork. And perhaps you (or I - if I am granted admin rights) can merge my PR #276 into this repo.

[philipwalton]

Sorry for the slow reply! Left a few comments in the PR.

(Again, thanks so much for helping with this!)

[akaustav]

I have verified that examples load from GitHub pages now instead of codepen. Thanks for your support @philipwalton, @mreinstein and @gregwhitworth.