I’ve used the p5.js online editor with my students for remote teaching during the covid19 period. And it’s really a great tool that simplify programming learning! Thanks a lot all its developpers!
Teaching not only programming but also HTML/CSS, p5js editor is also very nice to create a first HTML/CSS page, to test it and publish it online. After having learned how to make an HTML page formatted with a .css file, we then create other HTML pages and a small website. So we’ve got a p5.js sketch into online editor with multiple web pages, all of them applying the same ‘styles.css’ styles :
when we click in the first html loaded page on a link to another web page of this mini website, the other HTML page loads in the browser BUT the ‘styles.css’ files is not applied to this second HTML page (even if apparently the browser loads it correctly). The problem is the same for all the other web page of the site/sketch. Chrome warns this problem in its console: “Resource interpreted as Stylesheet but transferred with MIME type text/html”
when running the sketch from editor or accessing to the mini website with the shared fullscreen link of the project, it’s not the index.html page that is loaded (it’s another HTML page, always the same one, but not the default
It would be great if we could use editor.p5js.org to also learn a little bit of HTML/CSS and make small sample mini website in order to learn these topics. That means, making little project with multiples HTML pages and css file applying to all of them.
Instead if we go to “Elements” tab we’ll find the CSS file’s content inside the HTML file at tag <style> inside tag <head>.
Now clicking at any of those 6 links we’ll get pages w/o any CSS style applied.
Starting by going to “Console” tab we’ll see the following warning logged: Resource interpreted as Stylesheet but transferred with MIME type text/html:
Going back to “Elements” tab we can spot the following <link> tag inside <head>: <link rel="stylesheet" href="styles.css" type="text/css">
That didn’t exist on the the 1st entry page which uses a <style> tag instead.
Investigating it further I went to “Network” tab and clicked at the loaded “styles.css” entry.
On the 1st tab “Headers” at “Response Headers” I see: content-type: text/html; charset=utf-8
But at “Request Headers” I’ve got: accept: text/css,/;q=0.1
That means the <link> tag requests a file of type “text/css” but the server editor.p5js.org returns a “text/html” type instead!
So it’s not your HTML files which are buggy but editor.p5js.org itself doesn’t know how to serve CSS file requests using the proper “text/css” type!
Instead that online editor resorts on transferring the content of CSS files to its HTML file inside <style> tags as a workaround!
But that hack fails for the other HTML files linked by the main HTML!
You may try to bring this glitch to their attention by going here:
@GoToLoop Thanks a lot for detailed and sharp insight! I’ve come to the same conclusion making the same investigations. I’ve opened an issue ticket on p5js Editor on Github. What I’ve observed is that the .css file is merged into a element dynamically inserted into the default returned main .html page, as well as JS code. That makes an all inclusive html+css+js .html page sent to the browser. It’s certainly a developpers’ choice. Maybe this way of doing needs .css file considered as an ‘html/text’ file. But I hope it isn’t and it can also work with a ‘text/css’ mime type file so that the problem could be correctly easily with a correct file header. Thanks again!
