I found your site on Hacker News today: https://beta.observablehq.com/collection/@observablehq/generative-art
unfortunately this does not render in Firefox, Chrome, or IE on my win7 machine. What does it take to make this work? The images I can get from google look great. I want the details!
What versions of Firefox, Chrome and IE are you using? Make sure you have javascript enabled, too.
Chrome and IE are wide open, allowing anything they want to do. No javascript blocking at all. Chrome even keeps running 7 processes after I close it! (stealing my $$$ bandwidth) IE is version 11.0.9600.19129. Chrome is version 69.0.3497.100. Firefox is forced to stay at 45.9 so plugins still work. I am ok if Firefox never works. I am very surprised chrome will not work.
When you say “this does not render”, what exactly do you mean? What do you see when you click on e.g. https://beta.observablehq.com/@mbostock/two-grids ?
I was curious and tried it with IE 11 (Win7) in a vm and got this error:
which lead me to:
might be a problem on older browsers that don’t support class syntax
besides older browsers and IE 11 (which I don’t think are supported by observable at the moment), I think it would help if @thirdtry posted some pics and web console/dev tools logs from his/her FF/Chrome.
I can ‘render’ those observable notebooks on win7 in FF Quantum v62 and Chrome v69 64-bit just fine, if that helps.
Generative Art is an Observable collection for learning and this is what you should see in those browsers on win7:
the way this thread started and going I feel like it’s just a pointless older browsers and IE11 ping from an anonymous user.
I am sure observable team will do their best to support those browsers in the future, but I don’t think it’s their target audience for beta given limited team resources.
I got to work today, tried observable on Chrome 69.xxx under Windows 10, and it works fine. The only difference is Win7 vs. Win10. It is the same version of Chrome. Surprising it can’t work the same on both platforms. If it can’t be fixed in beta, I understand.
I would be surprised if the blank page is purely due to using Windows 7 versus Windows 10. Note that @RandomFractals has gotten the page to load in both Firefox and Chrome on Windows 7.
From your screenshot, I see that the html from beta.observablehq.com is loading. What seems to be happening is that the scripts from static.observablehq.com are being blocked somehow.
Try opening the developer console (Menu: View… Developer… JavaScript Console) and then refreshing the page. What messages do you see there? Do you have any Chrome extensions enabled on your Windows 7 machine that aren’t on your Windows 10 machine or very aggressive adblock settings? Any custom security settings or firewall settings that you might have set up on your computer or router that could block certain pages loading?
Thanks for the detailed dive. Something is blocking additional scripts. I have made no modifications at all to Chrome, so I have no idea why “has been blocked by CORS policy”
I am going to go learn about CORS now.
Thanks.
SOLVED
Thanks to bgchen for getting me into the Chrome developer’s screen where it complained about CORS policy. I started chrome like this:
chrome --args --disable-web-security --user-data-dir=/tmp/chrome
and now I can see the generative art just fine.
If I am not careful, I learn something new every day.
Thanks for the help!
I would be very, very careful when running a browser with those options on, as disabling web security can expose you to nasty attacks that can intercept your login data from other sites (e.g. email, banking, etc.) or even steal your personal files from your computer. It could be particularly dangerous on sites like Observable which host user-written scripts. For that reason, I don’t consider the problem solved.
Is it possible you have an overeager firewall or other security program that’s messing with your traffic? Or are you using some kind of web proxy? I found this page which shows that at least some such products can interfere with proper functioning of CORS.
This is a freshly-reformatted Win7 laptop. There was some old adver-ware running (McAfee/Norton or such), but it seems to be gone. I installed Chrome, Libre Office, Firefox, mingw, and visual c++. There is a ton of unknown Lenovo pre-installed stuff, but nothing screams security. I have not configured security or firewall options. No web proxy either. Just out-of-the box Win7 on a Lenovo T430.
yeah, I would not call it resolved and per @bgchen suggestion I would also advise you don’t run chrome like that.
I am using same version of Chrome as you are on win7 for testing notebooks (Version 69.0.3497.100 (Official Build) (64-bit)
Can you share your dev tools XHR output for that two-grids notebook? Do you see any requests there that have http status code other than 200? Also, do you get any errors in dev tools when you click and view Console output? Pics please! 
This is what I get for that notebook:
You should see the same, unless you run some weird extensions on your end. And my win7 build has lots of things on it, so I doubt it’s win7 issue or Chrome for that matter.
I appreciate you taking me deeper into web protocols than I have ever done before. I have only used the dev tools to get past unclickable popups. I found the XHR screen, but it does nothing. It quickly populates from 0/1 requests to 0/10 requests, 60B transferred, but nothing is displayed.![observable-xhr|690x421]
should I try this with the web security disabled?It does seem like you might be getting MITM’d … perhaps by the old antivirus stuff that you mentioned was present on your system.
Can you try clicking on the lock icon in the browser URL bar, and then Certificate -> Details, and then posting a screenshot of what it tells you … first for https://beta.observablehq.com/, and then for https://static.observablehq.com/?
For example, mine are:
Those certificates look alright to me — let’s investigate the CORS problem a bit further…
Loading https://beta.observablehq.com/, open the developer tools, then the Network tab, and choose JS (refreshing the page at this point if you have to), then choose bundle.b4412… on the left, and headers on the right.
Mine looks like this:
