Freecodecamp: Show weather location challenge is not solvable in Chrome v51

[vramana]

In Chrome v51, the geolocation API is only available with secure connections i.e, a camper has to connect to codepen, jsbin etc., via secure connection. So all the http request to openweather API are blocked and only http version of openweather API is free. Also, there are no good free alternatives. The challenge as it stands is impossible to solve in Chrome v51.

So how should this challenge be modified ?? Simplest modification to makes this work will be to ask campers to solve the challenge with city name as an input from the user.

[raisedadead]

@vramana

Yes and I agree we definitely need an alternative here. Open to suggestions as well.

We have been trying to updgrade the codepen.io examples to https. Refer #7700
And I have been having a hard to get that working for this challenge and some other similar examples.

Open to all suggestions in this regard! I haven't had the time to check but if you or anyone else willing to look at this could go through the https://github.com/toddmotto/public-apis and check if we have any promising candidate.

Thanks.

[caravinci]

Arguably, 51 is not the current production/public release, and all these dev versions do come with a disclaimer on how you should not use them as your main browser.

Though I do agree we should find alternatives, I do not believe this is an issue of priority.

[vramana]

@hallaathrad I agree that it is not a priority issue. But in less than (12 weeks / 3months) a lot of people will notice that their old code isn't working. I don't know how people will react to that. May be show a notice. I don't know the best way to resolve this issue.

[fattox]

I saw someone asking about this issue today on the subreddit, because Chrome v50 just released and has broken anyone's project that uses OpenWeather (if viewed through Chrome, of course).

I have given Wunderground a try, and it seems fine enough to me - https://www.wunderground.com/weather/api/d/pricing.html?MR=1

Here's my new version using this API - https://codepen.io/Fattox/pen/mPxzgg

Would it be enough to update the description pointing to this as the new API to be used?

[vramana]

@fattox Leaving API keys like that is not good practice. So, I don't like this option that.

[fattox]

@vramana I see your point, but i'm not sure that detail is intended for the scope of this early project? The current example also shows the API key in public form - https://www.freecodecamp.com/challenges/show-the-local-weather (your point is mentioned in "7" also)

Unless FCC want to add in the steps on early projects, explaining how to config + forward them from a server. If they do, that's cool too.

[hutstep]

Since Chrome 50 Geolocation API is not working anymore with unsecured connections. Weather apps using Openweathermaps API are broken in Chrome 50, but work in Firefox and Opera.
https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only
https://mobiforge.com/news-comment/no-https-then-bye-bye-geolocation-in-chrome-50

[raisedadead]

@hutstep thanks for the update.

[tparikka]

Can I suggest two things for this issue:

1. Update step 7 to suggest use of forecast.io instead of OpenWeatherMap.org. Forecast.io's API seems a bit simpler as there are less weather "descriptions" to handle as opposed to the numerous codes that OWM uses. Additionally Forecast.io feeds a specific "icon" attribute in the JSON that can be targeted in a switch statement (or if/else if you're feeling masochistic)
2. Update the Zipline to include use of a CORS proxy. Once I got to actually using forecast.io, I got a CORS rejection when making the request that I had to work around by using https://crossorigin.me/ - I wasn't able to find any way around this.

My functioning zipline: https://codepen.io/tparikka/pen/bpQEeP

[hutstep]

@tparikka thanks for https://crossorigin.me/ . My OpenWeatherMap-App is working again in Chrome.

So the solution is to open the Codepen URL with https:// in front, and use https://crossorigin.me/ in front of the unsecured API calls like from OpenWeatherMaps.

Here's my weather app using OWM-API
https://codepen.io/hutstep/full/qZKxxr/

[raisedadead]

Thanks everyone.

This one is bit tricky with the CSP restrictions on CodePen. It will keep breaking for non-secure resources. Considering so many browser types as well.

Also we can't actively endorse any website or resource such as crossorigin in the challenges, its really up to the campers to use any similar proxies.

@FreeCodeCamp/issue-moderators Can we go for a second opinion and sort this out, like @tparikka is suggesting.

[Cu3bIu]

Hi Everyone.

the https://crossorigin.me/ doesn't seem to very liable service as it doesn't work often. Would you mind suggesting some free HTTPS weather API to use for the challenge ? https://codepen.io/olv1do/pen/KzbdMe/ this page works fine and does the task but only in case if the crossorigin.me site is up.

I really would not want to submit the project that works in 20% of cases

Thanks!

[fattox]

@Cu3bIu I suggested Wunderground ~4 weeks ago (see my reply above). Changing to this API was quite trivial, and i imagine would also be for anyone else who has already made the weather app.

The API also provides a URL to the relevant Wunderground weather icon, also. So no need for an external icon pack, though it is still supported by packs such as - https://erikflowers.github.io/weather-icons/api-list.html ... if you prefer those icons.

[tparikka]

@Cu3bIu I would suggest forecast.io as per my last comment - it includes an HTTPS endpoint that you can use. My pen at https://codepen.io/tparikka/pen/bpQEeP uses forecast.io and I haven't run into any issues.

[raisedadead]

As pointed in the comment here by @benschac, we could add a hint or warning on the challenge about the ongoing issues with this challenge until resolved.

/cc @FreeCodeCamp/issue-moderators thoughts?

[raisedadead]

I agree this particular challenge is getting frustrating to many, we apologize for the inconveniences.

For a resolution:

1. Evaluate SSL and CSP issues all the major browsers: Latest Global (Stable) release edition of Chrome, Firefox and IE
2. Compare forecast.io performance on the above.

We are definitely not going to recommend crossorigin.me officially, campers may or may not use that at their own discretion.

Alternatively, come up with a plan to scrap this challenge to be replaced with any alternate, using some APIs available at https://github.com/toddmotto/public-apis

[149203]

I just got this working today thanks to this thread and some other digging around. Here's what I did, without using crossorigin or another CORS proxy. Thought I'd post for other campers.

1. Make sure my pen on codepen has an https address. It should look like this in the address bar: https://codepen.io/YOUR_USERNAME/pen/YOUR_PEN_ID
2. Now navigator.geolocation will work just fine (it needed the https). However, I began by digging through the MDN docs on navigator.geolocation because FCC skipped (and automatically passed) the lesson Get Geo-Location Data for me and I didn't know where else to start. I mention this if you also arrived at the Show The Local Weather challenge without completing Get Geo-Location Data. Go take a look at that lesson for a big help first if you haven't seen it yet.
3. Now that we're using https you have to make sure that your external CSS and JS in codepen (Bootstrap, jQuery, etc.) are also coming from https sources.
4. You will have to use a weather API that has an https connection. Two free ones are mentioned in this thread, wunderground and forecast.io. I chose wunderground and was happy with how easy it was to implement. Thanks to @fattox for the recommendation. I'm sure forecast.io would be fine as well if you like their features more.
5. $.getJSON() will work just fine. No need to use $.ajax or learn something new. I mention this because none of the other working pens in this thread use $.getJSON() in their code, yet that's what we learned in the FCC challenges. You can use $.getJSON. Here's what that looked like with the wunderground API and variables for latitude and longitude:

$.getJSON("https://api.wunderground.com/api/YOUR_API_KEY/conditions/q/" + lat + "," + lon + ".json", function(response) {
    console.log(response);
  });

[149203]

@tparikka Nice code! You are able to use the forecast.io API without crossorigin.me.

You have to use a $.ajax() request instead of the $.getJSON() request and specify jsonp for the dataType. I learned this from the second answer here: http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource

"The advent of JSONP — essentially a consensual cross-site scripting hack — has opened the door to powerful mashups of content."

So you'd code (with variables for the latitude and longitude):

var url = "https://api.forecast.io/forecast/YOUR_API_KEY/" + lat + "," + lon;
$.ajax({
    url: url,
    dataType: 'jsonp',
    success: function(results) {
        console.log(results);
    }
});

[vramana]

@raisedadead May be we should close this issue in favour of #9145

[raisedadead]

@vramana Yup. Thanks for pointing out.

[danielokeyokoro]

getting this error...Missing required request header. Must specify one of: origin,x-requested-with