Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Show the Local Weather - getCurrentPosition not working over http #9145

Closed
pedrosaisse opened this issue Jun 15, 2016 · 20 comments
Closed

Show the Local Weather - getCurrentPosition not working over http #9145

pedrosaisse opened this issue Jun 15, 2016 · 20 comments
Assignees
Labels
help wanted Open for all. You do not need permission to work on these.

Comments

@pedrosaisse
Copy link

Challenge Name

Show the Local Weather

https://www.freecodecamp.com/challenges/show-the-local-weather

Issue Description

getCurrentPosition does not work over http. I think that changing the url to codepen.io in that particular challenge would help others campers not thinking their code isn't correct.

Browser Information

  • Browser Name, Version: Chrome 51.0.2704.84 m
  • Operating System: Windows 10
  • Mobile, Desktop, or Tablet: Desktop

Your Code

// If relevant, paste all of your challenge code in here

Screenshot

image

@DealPete
Copy link

You're right, that message is little confusing. Usually you label something as "deprecated" to communicate to your users that it still works, but may be removed in the future. Here these two functions just don't work over http. However, I expect anyone reading this message will figure out themselves to change their url to "https".

@raisedadead
Copy link
Member

raisedadead commented Jun 16, 2016

I think that changing the url to codepen.io in that particular challenge would help others campers not thinking their code isn't correct.

The pen in the challenge uses a resource that itself is served over http. Hence the URL to the pen is kept as http.

Although it would be great if someone can point us to a https resource. Or an alternate pen that does the job.

@stricknein
Copy link

Google will not allow you to get geo location anymore over http. And unfortunately the free version of the suggested API to use (Openweathermap) cannot use https unless you pay for it. Instead I would suggest bypassing google altogether to get geolocation and use http://ip-api.com/json to get the information you need based off the IP address.

@raisedadead
Copy link
Member

@stricknein that is precisely the resource that is used in the pen

@stricknein
Copy link

@raisedadead Ok? Point is people are trying to complete the challenge going off what they were taught prior to the challenge and they will not be able to unless the pay for open weather map and know that the issue is from using http and not https. Some one with some time on their hands should add that as a note on the challenge in order to ease people's frustration. I was just pointing out another API that would work with OWM. That was the only one out of several that I tried that was free and got the job done.

@sthodup1
Copy link
Contributor

@stricknein There are some other weather APIs available, but they seem to have the same http issue. I think an easy fix to this issue would be to tell people not to use Chrome just for this challenge. Otherwise, is there some API provider that could donate resources to FreeCodeCamp?

@stricknein
Copy link

As I said earlier just use the one I mentioned. Free and works well. No
need to worry if that is the one used in the example project. Obviously
right your own implementation.

On Monday, June 20, 2016, sthodup1 notifications@github.com wrote:

@stricknein https://github.com/stricknein There are some other weather
APIs available, but they seem to have the same http issue. I think an easy
fix to this issue would be to tell people not to use Chrome just for this
challenge. Otherwise, is there some API provider that could donate
resources to FreeCodeCamp?


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#9145 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AH_RHI1CfzGATQE4KHjla5Xp5ATLcNLMks5qNtA9gaJpZM4I17Sb
.

@pedrosaisse
Copy link
Author

As @sthodup1 said, to complete this challenge, avoid Chrome. I used Firefox and set the urls to http and everything was fine for now.

@stricknein
Copy link

I'm not installing Mozilla just to complete a challenge and many others
will not either. Good thing the API I linked will work as well. I'm not
sure why you guys are making a big deal out of nothing.

On Monday, June 20, 2016, Pedro notifications@github.com wrote:

As @sthodup1 https://github.com/sthodup1 said, to complete this
challenge, avoid Chrome. I used Firefox and set the urls to http and
everything was fine for now.


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#9145 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AH_RHFclwdFGNm1Q2sYmh_4sXnOGjwFwks5qNtKRgaJpZM4I17Sb
.

@pedrosaisse
Copy link
Author

I know this isn't the best solution. And in my opinion you won't be installing just to complete a challenge but as a frontend developer you have to be sure that your code will work exactly the same in all the major browsers.

@sthodup1
Copy link
Contributor

If you're using OS X/Windows, you should have Safari/IE available. I agree that the ip-based geolocation is a good solution for people that want to use Chrome.

@stricknein
Copy link

Right... Which mine does... Like I said not sure why you guys are so
against using that API. Works well for on browsers and gets the job done
for free. No need to try and make it more complicated then it needs to be.
I mean technically your guys approach will only work for Mozilla. Meanwhile
everyone with chrome will not be able to use your app. And with cross
browser compatabilty being important to web developers I don't see how how
can say just use Mozilla as an answer. Pretty hypocritical statement
considering your suggestion.

On Monday, June 20, 2016, Pedro notifications@github.com wrote:

I know this isn't the best solution. And in my opinion you won't be
installing just to complete a challenge but as a frontend developer you
have to be sure that your code will work exactly the same in all the major
browsers.


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#9145 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AH_RHAYn1ivTG-1xsAXJ8FqHpF_f2aXLks5qNtUigaJpZM4I17Sb
.

@RayBB
Copy link

RayBB commented Jun 25, 2016

I have found another weather api that is free and works over https.
https://developer.forecast.io/docs/v2
I found it after doing some research but have no idea how reputable the website is. However, the api seems to work well.

In my opinion, it would be better to encourage campers to use the geolocation tools over https and then a secure api rather than having them use a workaround (the ip lookup api).

Edit: That api doesn't have a city name. This could be used to find city if necessary.
https://maps.googleapis.com/maps/api/geocode/json?latlng=40.714224,-73.961452

@raisedadead
Copy link
Member

@RayBB thanks a lot for finding these for us.

Just in case if you have been able to use them in a project, we could quickly fork that and replace the existing one.

Let us know!

@raisedadead raisedadead added the help wanted Open for all. You do not need permission to work on these. label Jun 25, 2016
@RayBB
Copy link

RayBB commented Jun 25, 2016

@raisedadead I managed to make a simple working example.
https://codepen.io/RayBB/full/ZOQpoN/

@raisedadead raisedadead self-assigned this Jun 26, 2016
@dhcodes
Copy link
Contributor

dhcodes commented Jun 28, 2016

As discussed in #9079, forecast.io (Dark Sky) doesn't have city/country in the API, which limits some appeal by showing the user where it's pulling weather from. Also, I'm getting a 500 error on your example @RayBB.

So far, the workaround I've found to work best is to prepend: https://crossorigin.me/ to the openweather API as shown in this quickly thrown together example: https://codepen.io/dhcodes/pen/RRaGjG?editors=1111

@dhcodes
Copy link
Contributor

dhcodes commented Jun 28, 2016

Disregard what I just said as I see in the thread for issue #7853 that FCC won't recommend using https://crossorigin.me/ so maybe forecast.io is the only option. As mentioned, forecast.io does lack a city record so the best users could get is a timezone unless they want to use the Google geocoder API too. Here's a quick example I made with forecast.io: https://codepen.io/dhcodes/pen/GqWEaQ

Note that users will also need to add ?callback=? to the end of the URL (similar to the wikipedia project) in order to avoid a 'Access-Control-Allow-Origin' header error.

@LuisGonzaga
Copy link

LuisGonzaga commented Jul 27, 2016

Hi, just finished the code (will now start the design), the solution was easy enough, https://www.wunderground.com API, it's free (but requires registration to get the API Key ... 500 free connections a day if I remember well) and you can get the weather conditions using coordinates with an address like this (but I didn't find it on their instructions):
https://api.wunderground.com/api/YOUR_KEY_HERE/conditions/q/38.72187429,-9.2286898.json
... and I'll have to include their logo too with very precise instructions for doing it.
Best regards,

@ghost
Copy link

ghost commented Oct 11, 2016

@raisedadead, update on this in regards to updating codepen?

@ghost ghost closed this as completed in #10341 Oct 11, 2016
@ghost ghost removed the status: waiting review To be applied to PR's that are ready for QA, especially when additional review is pending. label Oct 11, 2016
@jaketripp
Copy link

For any of my friends having trouble with this:

I was using the IP api and using openweathermap.org, and when i ran it locally as a file saved on my computer it worked fine, when i tried to run it off of codepen, it threw errors at me.

Mixed Content: The page at 'https://codepen.io/jaketripp/full/gWdKXz/' was loaded over HTTPS, but requested an insecure script 'http://ip-api.com/json/?callback=blah blah blah'. This request has been blocked; the content must be served over HTTPS.

Guess what worked? I went up to the url bar of my codepen and MANUALLY REMOVED THE S from the url. Now it works. go figure. good enough for me.

rarmatei pushed a commit to rarmatei/freeCodeCamp that referenced this issue Sep 3, 2017
The Open Weather Map API was not serving over HTTPS, leading to mixed content issues, since geolocation requires HTTPS. Forecast.io's API is also free, requires sign up, but up to 1k hits per day w/ no charge or card on file.

I'm (unsurprisingly) not the first person to notice this. Seems to intersect w/ freeCodeCamp#7853 and freeCodeCamp#9145.

squash! updated forecast.io references to 'dark sky'

updated forecast.io references to 'dark sky'
mhatout pushed a commit to mhatout/freeCodeCamp that referenced this issue Feb 9, 2018
The Open Weather Map API was not serving over HTTPS, leading to mixed content issues, since geolocation requires HTTPS. Forecast.io's API is also free, requires sign up, but up to 1k hits per day w/ no charge or card on file.

I'm (unsurprisingly) not the first person to notice this. Seems to intersect w/ freeCodeCamp#7853 and freeCodeCamp#9145.

squash! updated forecast.io references to 'dark sky'

updated forecast.io references to 'dark sky'
This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Open for all. You do not need permission to work on these.
Projects
None yet
Development

No branches or pull requests

10 participants