Before anyone asks, yes, I have permission from the National Weather Service to use this:
https://www.spc.noaa.gov/products/outlook/
I need a part of their website embeded into my website. I could just take a screenshot, but that updates several times a day. Here's the part that I need embedded on mine:
I've tried with iframe, and a div, and I can't seem to figure it out. I thought I almost had it, but when I mess with the css code, it screws up things on my website: https://www.arklahomaw.com/outlook.html (this is the page I want to put it on).
1 Correct answer
I am! It's not 100% like or how I want it, but it'll do
25
Replies
As @Nancy OShea has stated, the current method for retrieving or in any way interacting with data across the internet is by using API's. <iframe>'s are certainly not the way to go.
If you want a more friendly development environment for API's, then I suggest using Wappler as you tool of choice. The following allows you to create the data set
where you need to enter the authorisation and define your schema.
I know nothing about APIs.
By @jamedlock83
=========
You should learn. API's are powerful tools based on JavaScript programming -- a fundamental website language.
- https://www.w3schools.com/js/
APIs are sets of definitions and protocols that allow software components to talk and interact with each other using a simple set of commands.
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction
You should learn. API's are powerful tools based on JavaScript programming --
By @Nancy OShea
When you put it that way, it sounds exclusive... which it isn't... Python, Ruby, C# and PHP, among others, can also deal with APIs.
https://rapidapi.com/blog/how-to-use-an-api-with-php/
https://rapidapi.com/blog/how-to-use-an-api-with-python/
https://rapidapi.com/blog/how-to-use-an-api-with-ruby/
i.e also https://github.com/open-meteo/open-meteo propose SDK for .net, kotlin, Android, Rust, Laravel, Symfony...
When you put it that way, it sounds exclusive... which it isn't... Python, Ruby, C# and PHP, among others, can also deal with APIs.
https://rapidapi.com/blog/how-to-use-an-api-with-php/
https://rapidapi.com/blog/how-to-use-an-api-with-python/
https://rapidapi.com/blog/how-to-use-an-api-with-ruby/
i.e also https://github.com/open-meteo/open-meteo propose SDK for .net, kotlin, Android, Rust, Laravel, Symfony...
By @B i r n o u
Although they can all connect to APIs and bring back the goodies they can't do much else, unless you like page reloads. If you are dealing with APIs I personally think javascript is an 'ALL IN ONE' workflow, a streamlined no page reload solution.
that's not the point, I was just saying that APIs are powerful tools that aren't exclusively based on JavaScript programming.
By @B i r n o u
Whilst they are not exclusively based on javascript programming, javascript is probably the most convienient way to handle the data once you get it back from the API. These other programs (server-side) can be useful for hiding stuff you dont want to be public facing and may need to send to the API to get the data back, as javascript can't do that........with the exception of a javascript back-end solution like node.js of course. So if the API doesnt require any token/key etc I would use javascript, if on the other hand you are sending information which shouldn't be shared and could compromise your position, particuarly if you are paying for the data and not using a javascript back-end I'd use one of the other programs you mention and then manipulate the returned data with javascript as there are more options available, given you want a smooth user experience.
Having used RESTful API's for some time now, I can assure you that there are plenty of ways to communicate with the API as this image shows:
The great part is that they all return the data in JSON or XML format as shown:
This can all be done on the server, so no exposure to the outside world. I have only used the JSON data format which acts in conjunction with App Connect to provide a seamless user experience.
Having the right development environment provides an easy way to incorporate RESTful API's. My tools of choice, Wappler and Postman.
How comes you are using php server side and not node.js to pull back the data, I was under the impression that you had totally moved away from using php?
By @osgood_
I do develop using Node. The example above not only shows PHP but a raft of other languages including JavaScript (Node).
But yes, l sometimes use php to even pull data from a local database and return it as json then manipulate it with vanilla javascript rather than using php. It really depends on what lm doing.
By @osgood_
That is an excellent workflow. But why only sometimes?.
How comes you are using php server side and not node.js to pull back the data, I was under the impression that you had totally moved away from using php?
By @osgood_
I do develop using Node. The example above not only shows PHP but a raft of other languages including JavaScript (Node).
But yes, l sometimes use php to even pull data from a local database and return it as json then manipulate it with vanilla javascript rather than using php. It really depends on what lm doing.
By @osgood_
That is an excellent workflow. But why only sometimes?.
By @BenPleysier
I still find php is quick to set up and get going, that's why l prefer to use it for server side coding. Having said that lm probably much more familiar with vanilla javascript these days as it offer a better front end experience for the user. php is still fine for front end but obviously it requires a page reload for it to do anything worthwhile so l mainly use it these days for querying databases, maybe to get data from an API, form validation, etc
I still find php is quick to set up and get going, that's why l prefer to use it for server side coding.
By @osgood_
The same reason why I now use Node. If I were using a different development environment, like Dreamweaver, I would also prefer to use PHP. In fact, if the environment was such, I would love to use CFML (ColdFusion)
That's probably because you are using a deployment of node that is done for you rather than having to manually go through the tedious process of having to gather, import/require all the necessary middleware for it to do anything, thats before you then need to set up the routing and maybe even divide that into several files so it doesn't all become one big overly complex js file etc etc.
By @osgood_
I can't believe that I am saying this, but I agree with you. Wappler is the only reason why I have adopted NodeJS.
I don't know how Wappler handles all of that processing but l would not feel comfortable unless l knew what was going on behind the scenes, which l guess is probably not the most important priority for some developers.
By @osgood_
That is one of the challenges that is easily overcome. The process that Wappler follows is the same as if it were handcoded. The difference is that my Wappler mate writes all of the boring stuff allowing me to keep my mind fixed on what matters.
The alternative is to follow a course like this excellent playlist.
But hey! For an average website, might as well stay with PHP if that is your forte.
But hey! For an average website, might as well stay with PHP if that is your forte.
By @BenPleysier
Two lines of thought really, many above a certain age won't unnecessarily get dragged into a 'flavour of the month' workflow. Most gen Z now cut their teeth on frameworks, libraries and mostly javascript, therefore are far more likely to gravitate to a javascript back end solution, without the knowledge of comparing it with another back end solution. Why learn something else when your three quarters of the way there anyway. This stupid debate about which is better is fueled by those who probably only know one solution rather than basing their opinions on actually having explored other options. I don't listen to this nonsense noise any longer it's interesting but mostly based on hot air. I don't think it helps to bring the web development community together though, which is the negative downside of so many variations being available, all of which are capable, in most cases, of producing exactly the same results.
I've tried with iframe, and a div, and I can't seem to figure it out. I thought I almost had it, but when I mess with the css code, it screws up things on my website:
By @jamedlock83
in fact, to avoid any spillover from one to the other, make a clear distinction between the two: your page and your weather space.
So, CSS code your site as you would, remembering to integrate only the container block for displaying your external weather content (no matter how it's fed, iFrame, API, include, Rest, whatever...)... but it's represented by an ID (#foo), and only its display surface is taken into account in mobile mode up to 5K widescreens.
Once everything is ok and responsive, then you add a new CSS where all the rules start with #foo and which will only take into account the content of your weather area.
AdChoices