Whenever I watch a video lesson here , I am convinced - JavaScript is a super language Just watching the lesson calmly provides very clear explanations to so many topics Thanks Steve 👍
You will have to use LESS as a true preprocessor to generate the css on the server-side, not on the client side. This is a CSS capability, not intended for other formats.
I found I could not load css modules where media=print. I am just learning and experimenting and thought you might confirm whether this is a limitation.
As of a couple months ago import maps were finally added to Safari - caniuse.com/import-maps and now be used in all browsers. tbh, I have not done any testing with media restrictions on the css though.
@@SteveGriffith-Prof3ssorSt3v3 Thanks for the feedback. You explain things well. It appears that type=importmap only applies to SCRIPT files and not CSS files. Following thistutorial, I was doing fine until I tried to import a CSS file needed to be defined as media=print. It wouldn't work, so, all my CSS links are happily install back in the HEAD.
Is there any support for type: 'html'? Or at least, do you think that's coming in the future? I was going to use HTML5 Imports to replace my tags, but it seems like Google has declared that deprecated since no other browser adopted it. And everywhere I look, people are saying that ES6 Modules are replacing HTML imports, but I haven't seen any guides on how to replace tags with ES6 Modules.
I don't see much of a push for including html in this. There is so much more work going into systems that use JAMStack approaches and SSR and SSG techniques. Web Components and HTML templates being populated with minimized JSON data coming from multiple sources seems to be the direction of choice.
@@SteveGriffith-Prof3ssorSt3v3 Thanks for responding!! Sorry, a lot of what you said went over my head, but if you don't mind, what would you say is the modern way to replace tags?
@@leviuzodike9061 To be honest, I haven't used an iFrame on any site in over 10 years. I use fetch( ) to get data and update the current page to show that data. What is the reason you are using s?
Hello Steve, thank you for all the videos that you are creating. I wanted to try importing a data.json using import and got this error in console: "Uncaught SyntaxError: Cannot use import statement outside a module". I am executing in Chrome 98. Any idea about what is causing this issue? Thanks.
Hello, very nice video. I did it and in chrome works perfectly, but in safari, i get an error:: SyntaxError: Unexpected identifier 'assert'. Expected a ';' following a targeted import declaration. Could you help me with this? Thank you very much.
@@SteveGriffith-Prof3ssorSt3v3 Are there any solutions to this? I am a new developer and I just made my first project-Website. I imported data from a JSON file and displayed it in HTML . Google Chrome works perfectly but on safari, it doesn't show the data from the JSON file. Thank you very much for your time.
Is this server side rendering of css and json, beacause css isnt directed included in html file it is in js file and js rendering i to html page. Please explain it to me.
Not Server-side. This is client side importing of CSS and JSON files into your JavaScript just like ES Modules. Then you have access to the files in your JavaScript
Whenever I watch a video lesson here , I am convinced - JavaScript is a super language
Just watching the lesson calmly provides very clear explanations to so many topics
Thanks Steve 👍
I like your channel ....you constantly push updated the course all the time ....by the way i like your react
Super practical
Thank you. Useful.
love u for forever
Hi, thank you for you help it works perfectly with CSS file.
Do you have any clue for .LESS file ? In my case all inheritance class are ignored :/
You will have to use LESS as a true preprocessor to generate the css on the server-side, not on the client side. This is a CSS capability, not intended for other formats.
@@SteveGriffith-Prof3ssorSt3v3 Got it, thank you
I found I could not load css modules where media=print. I am just learning and experimenting and thought you might confirm whether this is a limitation.
As of a couple months ago import maps were finally added to Safari - caniuse.com/import-maps and now be used in all browsers. tbh, I have not done any testing with media restrictions on the css though.
@@SteveGriffith-Prof3ssorSt3v3 Thanks for the feedback. You explain things well. It appears that type=importmap only applies to SCRIPT files and not CSS files. Following thistutorial, I was doing fine until I tried to import a CSS file needed to be defined as media=print. It wouldn't work, so, all my CSS links are happily install back in the HEAD.
Is there any support for type: 'html'? Or at least, do you think that's coming in the future? I was going to use HTML5 Imports to replace my tags, but it seems like Google has declared that deprecated since no other browser adopted it. And everywhere I look, people are saying that ES6 Modules are replacing HTML imports, but I haven't seen any guides on how to replace tags with ES6 Modules.
I don't see much of a push for including html in this. There is so much more work going into systems that use JAMStack approaches and SSR and SSG techniques. Web Components and HTML templates being populated with minimized JSON data coming from multiple sources seems to be the direction of choice.
@@SteveGriffith-Prof3ssorSt3v3 Thanks for responding!! Sorry, a lot of what you said went over my head, but if you don't mind, what would you say is the modern way to replace tags?
@@leviuzodike9061 To be honest, I haven't used an iFrame on any site in over 10 years. I use fetch( ) to get data and update the current page to show that data.
What is the reason you are using s?
Hello Steve, thank you for all the videos that you are creating. I wanted to try importing a data.json using import and got this error in console: "Uncaught SyntaxError: Cannot use import statement outside a module". I am executing in Chrome 98. Any idea about what is causing this issue? Thanks.
In your tag you need to add type="module"
@@SteveGriffith-Prof3ssorSt3v3 Thank you very much!!! It works now. So useful.
Hello, very nice video.
I did it and in chrome works perfectly, but in safari, i get an error:: SyntaxError: Unexpected identifier 'assert'. Expected a ';' following a targeted import declaration.
Could you help me with this?
Thank you very much.
Yeah. Safari doesn't support them. Since IE disappeared they are often the last one to support things
@@SteveGriffith-Prof3ssorSt3v3 Are there any solutions to this?
I am a new developer and I just made my first project-Website.
I imported data from a JSON file and displayed it in HTML .
Google Chrome works perfectly but on safari, it doesn't show the data from the JSON file.
Thank you very much for your time.
Is this server side rendering of css and json, beacause css isnt directed included in html file it is in js file and js rendering i to html page.
Please explain it to me.
Not Server-side. This is client side importing of CSS and JSON files into your JavaScript just like ES Modules. Then you have access to the files in your JavaScript
@@SteveGriffith-Prof3ssorSt3v3 Yea, but if I want to import a JSON with data, and that data display html elements via DOM, that is SSR?
@@BalkanLeaksArchive SSR is an alternative
@@SteveGriffith-Prof3ssorSt3v3 Would you record some video about various web apps rendering, for seo?
@@BalkanLeaksArchive you can add video requests here ruclips.net/video/LCezax2uN3c/видео.html
Why do this instead of
fetch("/data.json").then(r => r.json())
?
If the json file is local.
In that case why not simply
fs.readFile('data.json').then(JSON.parse)
?
@@SteveGriffith-Prof3ssorSt3v3
Thanks u ❤
This won't work in Safari
This and many other things