Coding Challenge #75: Wikipedia API

[@kmeadows100]

This video was a boost to my self confidence. I was working with the Wikipedia API for the first time and thought I must be doing something wrong because it was so many steps. Then I found this video and thought, "Hey, it's not me, it's Wikipedia."

[@edazpotato4908]

1:28 : *...* - most big brain moment in the history of web development

[@ShadowDev6969]

could have been avoided if he used visual studio 2019

[@zackydev]

@@ShadowDev6969 oooooof

[@KangJangkrik]

@@ShadowDev6969 Visual Studio Code to be precise

[@ShadowDev6969]

@@KangJangkrik vs code is bloat.

[@KangJangkrik]

(surprised pikachu face)

[@NicolaiWeitkemper]

Using all those "shortcuts" but writing counter = counter + 1

[@ilijaradosavljevic7166]

Nicolai Weitkemper loool

[@kaio37k]

What would you use instead? I assume "counter+=;" ?

[@ilijaradosavljevic7166]

Anernermus contuer+=1;

[@kaio37k]

Thanks!

[@pulloutking]

counter++?

[@akshatjain2157]

You sir are a gift to humanity.

[@xzero01501]

userimput gave me a headache.

[@_keano]

same

[@okay-bro1]

same

[@beyondcatastrophe_]

So unnerving...

[@requiitas]

too ... :D

[@courtneyhackshaw3420]

I really don't know what to make of that loool

[@devjimmy]

9 times... (counter = 0, counter = counter + 1, counter < 10). I like you're doing little mistakes, feels more natural ot rehearsed.

[@steffenderfreak1]

There are no bug, just happy little accidents

[@pythonSefer]

Yes, there is a Wikipedia article for "P": en.wikipedia.org/wiki/P

[@slick8509]

Coding challenge : pacman

[@riguidixrodriguez1090]

I actually like and enjoy to see your coding challenges, the way that you explaind, the way that a programmer thinks it's a cool things. Nice job in every single video. Keep it good, and stay good as always, seeing this far from a computer to start coding, lol

[@yuliaberezina1752]

Thank you so much! I like your way of telling the code and allowing to have a mess in your thoughts, it helps to focus and see that Programmers don't have to be perfectly focused people!!!

[@CCcrafted]

Dear god man, you have no idea how much that probably just helped me with my a level computer science coursework! Thankyou!

[@QW3RTYUU]

Guys! Set the playback speed at 0.5 And seek to 22:06 and enjoy the trainwreck! :) 22:06 to 22:20, I'm crying this is way too funny

[@zen2081]

QW3RTYUU Looool

[@MrMeszaros]

Totally sounds like drunk

[@koetter_boater]

Hey Dan, would you ever consider doing separate videos where you go into depth explaining topics that you briefly touch on in the coding challenges? For instance, jsonp, or something similar. I think it would be very beneficial to have a separate video for those that want to go in and learn the details about what you are talking about.

[@TheCodingTrain]

Yes! In this case, however, I would check out my playlist about data in JS, it goes through lots of pieces of how things work in this video in more detail.

[@jhuluan-jyun2594]

for those who cant get result from loadJSON() function with 'jsonp' parameter, change your p5.js cdn to version 0.6.0 or eariler. In ver0.6.1 p5 will throw an error if you try to load a json file with jsonp format. It should work then :D

[@ignacioalamo4303]

Thanks! I was stuck with that

[@gregfletcher2360]

Any reason why the new version of p5.js hasn't fixed this issue?

[@OmarOviedo]

Thanks you help a lot with that!

[@ggcadc]

thank you for doing these, reminding me when im stressed that coding is fun! and im proud to say I finally know enough vanilla js that I could write this, and follow what the p5 lib is doing for you, slick stuff, useful indeed.

[@PianoCat-Music]

hey Daniel, as always great Video! could you do an episode on the KZbin API? I think that would be fun - and also maybe go deeper into how to secure the API-Key? I really struggle a lot with this security stuff.

[@PianoCat-Music]

Thanks for the explanation. I figured I can request the API data with cURL in php - and I passed the json object in a variable to a javascript and can call this javascript via AJAX. I think this is secure, right? But what can I do if I want to change the php request after it loaded to make a new request?

[@archie6498]

12:54 that's why I don't have a beard

[@slevig415]

Don't lie, you can't even grow one lol

[@geekyprogrammer4831]

I feel beard is a form of blessing. Otherwise, we wont be able to differentiate girls and guys!

[@RandoSpear]

I love your videos! Keep it up!

[@saadrahman5626]

one of the best tutorials! keep it up!!!

[@RicoGalassi]

Man I wish i had coding skills like this. I LOVE designing interfaces, but this just seems so much cooler with the right knowledge and skill

[@Typhoon860]

Okay it's been 3 years. Have you learned the skills yet?

[@RicoGalassi]

@@Typhoon860 😂 not nearly as much as Dan knows, but I am a developer working full time!!

[@steffenderfreak1]

This is how I use Wikipedia. I search for something about IT stuff and 2 hours later, I end on a page about "8-Oxo-2'-deoxyguanosine"

[@aryamankejriwal5959]

Moral of the story: Wikipedia programmers must watch tom Scott’s programming videos...

[@flashgames1273]

you inspired me to start learning javascript and p5 !! thanks :D

[@ianprado1488]

Your end product was surprisingly very awesome

[@kevnar]

It goes from "Unicorn" to "Violence in the Quran" in only 3 steps. Wow.

[@incernpakistan]

plz read translation of Quran in your native language bro. i hope you will change your mind

[@incernpakistan]

dont go with explanations of scholars. quran is in v.easy language and common man can understand easily

[@faizkhairi3165]

More like from "school" to "shooting range"

[@kaio37k]

I read it, but all I see is page after page of violence, oppression of women, murder of gays and non-believers and other messed up things. Are you sure you're not reading a story book?

[@shakos4105]

Anernermus I don't know if you've bothered to even look at the Bible or Torah before but all of these holy scriptures talk about violence, blood, death etc. They all have stories behind them , simply looking at it without knowing and understanding it's context, does not make you knowledgeable enough to judge the Quran.

[@paddym27]

first time i have watched one of these videos, but i can totally relate to this processes as he goes through the problem. It's almost like exactly how i'd approach it. Love it - subscribed.

[@FMpundit]

Love that first random word is just an average word.

[@ThommyKane]

where the fuck has this channel been my whole life?

[@JordanMSeverns]

Sometimes i wonder how this guy codes anything without chat pointing out his typos lol

[@buffetglider]

Amazing effect of presenting with the screen behind you. Well done.

[@critstixdarkspear5375]

Saint Codius of KZbin. ❤️

[@forgoroe]

Back when I tried using the wikipedia API, I sorta hated it. So convoluted for no reason.

[@TheCalax]

Forgoroe things tend to get complicated when you're that big of a website/webservice and have hundreds of people work on open source software

[@rainaw0924]

It’s so funny to watch you coding

[@franzjosephliszt1555]

I thought it said "Return of Satan" at first

[@sebastiansosa3072]

I get this error after implementing loadJSON(..):TypeError: res.text is not a function at p5.js:60536? anyone know what is happening.

[@ignacioalamo4303]

Same here!

[@sebastiansosa3072]

It was that he has p5 library installed or linked to the html so instead i just used the jquery version: getJSON(..).

[@Codejoy]

@@sebastiansosa3072 Where? instead of loadJSON? I did that and same error...

[@orduan3020]

Adding "&formatversion=2" to the query string will solve the insane json format :)

[@TheCodingTrain]

Thank you!

[@ColaBeGaming]

This was a great Coding Challenge! I loved it! You still seem to mix up var and let a bit, I guess old habits are hard to break :D

[@ColaBeGaming]

BurgerBob Check out the Coding Train video on this exact topic! 😊

[@willemschipper7736]

The fact that this is a challenge does not make the Wikipedia API seem very user-friendly

[@edwinhighdefinition]

why i don't get any description in index 1 off the json array, that's empty

[@kirtanmagan3023]

same

[@edwinhighdefinition]

@@kirtanmagan3023 and nope... I solve my problem, if you want to get too, you can get it in my api luckedwin.herokuapp.com/wikipedia/en?q=unicorn

[@joshuavillenadiaz402]

You make me happy. Nice video

[@toastyPredicament]

The bell makes me euphoric

[@grainfrizz]

Hey Dan. It turned out to be so great!

[@charliedinerman7941]

Yoooo just found this video congrats on 1m

[@mohsinjaved6140]

1:25 😂😂

[@CuongNguyen-le5ic]

You see that /, it’s a ledge to next level, lol.

[@gjcarrow]

You can also avoid the CORS error by adding an options parameter to the URL. Set its value to * (action=opensearch&origin=*&format=json) More info on that can be found at www.mediawiki.org/wiki/API:Cross-site_requests

[@rezabavarikor8060]

Hey, How u doing? That's a good approach for using Wikipedia API.Happy Coding!

[@gritkit]

Thanks so much for all your great tutorials! I wanted to experiment with the API of xeno-canto.org, a site that collects birds sounds: xeno-canto.org/article/153 However I am getting stuck trying to request the data. Using the search examples given there I get the "No 'Access-Control-Allow-Origin' header..." error. Adding 'jsonp' as a paramter in loadJSON doesn't help, but gives me yet another error: "Uncaught SyntaxError: Unexpected token :". Adding 'json' instead doesn't help either. Could you give me a hint how to solve this? Thanks again and kind regards.

[@RedHair651]

Did you find a solution in the end?

[@gritkit]

@@RedHair651 Unfortunately not. After trying this or that I gave up on it.

[@jasperreichardt]

"Your Bank account is -5000$, you cannot buy food right now" .... hmm let me just do 'jsonp' there and .............MAGIC! trolololo

[@Rolo-Tony]

[@denisschulz3814]

Your Videos are awesome! Ever thought about making a video about the Amazon Echo / Alexa API? I think it's in JavaScript too, and it would be great!

[@TheCodingTrain]

Yes it's on my list!

[@denisschulz3814]

Wow! I did not expect you would respond to this at all, let alone this fast! Well, this makes you even more awesome! Thank You for all the great Videos :) I am really looking forward to see you dealing with the Alexa API, since I am going to study Software Engineering starting next year and I eventually want to found a company in this whole smart-connected-home field, so I think your video will help me to better understand how cutting-edge technology like Amazon's API is scripted and scripted with. Again, thank you for your quick Answer! Have a nice day

[@ledues3336]

@@denisschulz3814 what are you up to these days?

[@alsacchi]

I will improve this version, one user input(target), add the random wiki page api,and the code have to go to the target using link in the first random page loaded before

[@igotapochahontas]

Wheres the jsonp video? I'd like to check that one out next. I've been doing a lot of node and api stuff because of these inspiring videos. Keep up the good work, bro.

[@AncientPixel_AP]

let it stop when finding "Kevon_Bacon" ^^

[@TheCoolSquare]

I just tried changing the source to do this and it went for a while before just crashing

[@akashsapiens8157]

Soo cute... You're really a cool developer 😊 I just wanna work with such guyz like you... Continue your service here its really inspiring us💕

[@amey7064]

Hey Daniel, next coding challenge : GitHub Bot It can pick random repositories, but also choose them based upon stars.

[@poonamdevi2901]

where do you get this app from please tell i should also do it

[@subzeronitro4686]

I was screaming at my screen when I saw instead of

[@carljorgensen8489]

I have serious problems downloading p5 on my pc. Or not exactly the download but how to set it up

[@Sejiko]

hi go to this site:p5js.org/download/ hit the full package extract the zip and link the html with that p5.js just like javascript files .... now you have to link your own script.js and write this 2 functions setup and draw then u are ready

[@eugen189763987689379]

I was wondering if it impacts performance if I use a „global“ variable instead of passing it as argument to a function. In your case you made the method goWiki() read from the input field instead of passing the content of the input field to the method. So, is this (in JS world) different performance wise or is it semantically equal?

[@nirmalmattmusic3993]

For first time in the history of programming, Daniel Shiffman wrote noCanvas()

[@HdRFan7]

11:38 No you couldn't because this would only replace the first whitepace.

[@carlospita556]

I've ran his code copied from github both locally and from a server, and I always get this error: TypeError: res.text is not a function at p5.js:60536 pls help

[@TheCodingTrain]

Would you mind asking at discourse.processing.org/! It's a better platform for Processing and p5.js related code questions. You can share code there easily! Feel free to link from here to your post.

[@TheCalax]

Damn, you're pretty fun and awesome at presenting this stuff! I'd kinda love to do something with you some time :p

[@ac130kz]

How do I avoid Access-Control-Allow-Origin with POST requests (as jsonp works only with GET)? I've been using a chrome extension to do this, but I need another method to do it within javascript or python

[@POGOLAUNCHER]

If it is for a small experimental project you could make your request using cors.now.sh/

[@POGOLAUNCHER]

Or google making your own proxy that allows CORS, probably using php or something.

[@ac130kz]

thanks! I got it working with this handy script pastebin.com/gWgwcF77

[@rje613]

Stresses me out how hard he hits enter

[@mii3939]

open h1 and close h2... Logic? :'D Nice vid man!

[@flashgames1273]

How would you make a "wait for data function" (maybe with a loading bar) if your internet connection is really slow?

[@TheAbsoluteProduction]

progress ?

[@charbelsarkis3567]

Ohh these videos without the es6 arrow function are nostalgic

[@chuck.rincon]

Does anyone knows what JSON extensión is using for view the formated JSON on the browser?

[@ac130kz]

JSON Formatter

[@juicepops7819]

7:27 Tony Stark gets a anxiety attack

[@xiaoqi200268146]

is there a way to overwrite and result instead of appending to the end of the last result on html page?

[@ankk98]

how you remember so much syntax? I am so confused and forget the syntax over time and how you type so fast? Is it just experiance and practice ??

[@Maric18]

yeah it is ... if you work with something a lot, you get familiar, dont give up

[@SocksYTTV]

Does anyone know how I would go about doing a breadth first search type of program for Wikipedia hyper links so I can see the fastest way to go from one article to another by only clicking hyperlinks ?

[@ali-ahmed.]

There should be a KZbin bot that likes every video you upload.

[@sandywyper]

But how do you parse the ruddy wikiText?!? Was waiting for ages for that. I eventually gave in and just used the link from the JSON to the desired article.

[@sweetberries4611]

Why did you close tag?

[@kunjchoksi]

Great Video sir. Is it possible to fetch data using vanilla JS and solving error "No 'Access-Control-Allow-Origin'" . cause i'm stuck in this error. I do not want to use p5.js.

[@miroslavsafin]

fetch(url).then(r => r.json()) .then(data => console.log(data)) .catch(e => console.log("Booo"))

[@MediaCoastline]

Some of these functions such as select do not work in codepen.io! Also, where are you calling setup() ? I am sorry I'm so confused how this works

[@TheCodingTrain]

you have to import the p5.js library! You can try some of these workflow videos: sublime text: kzbin.info/www/bejne/i3Srq5-Lnql3Z5I atom editor: kzbin.info/www/bejne/mmSylHmbrcpsf80 brackets: kzbin.info/www/bejne/pJ69k5uDltOJmbs codepen: kzbin.info/www/bejne/a5jJhpqEpbhpobs

[@MediaCoastline]

Wow, thanks! Love the way you teach by the way. Your series on regular expressions is a masterpiece.

[@Karl93rus]

The most hard part of this all was to get through the most complicated api description EVER! )) You should make a video about how to understand what the hell should a person do to make a query to wikipedia )) by the way, did u sell ur soul for this knowledge? ))

[@l2ubio]

21:30 lol of all the 2000 words ofc you got the word "average" from a random() function

[@youchuanwang1738]

5:52 You are welcome :)

[@breeneehuson5159]

I watch many of your video, and you manner to present videos attrack me to continue, although, that I am looking for how to handle data from a json file using javascript. Here I try to use datatable but, I have a problem of iterate over the json file which is a compelxed (contain an object of array and object with repetitive keys in different level). It seems easy :))

[@samuelcoelho5267]

I get this error -- "Origin null is not allowed by Access-Control-Allow-Origin" when trying to connect to the API. Anyone have any idea how can I fix this? (I get the same error when hosting a local server as well)

[@Maric18]

see video

[@surekhalate4207]

Keep it up sir

[@wilkins7407]

Why do you use `let` so much when you're not reassigning? you should use `const`

[@wilkins7407]

you also make a page variable which is `data.query.pages` but you don't replace that call in `Object.keys(data.query.pages)` to be `Object.keys(page)` :'(

[@TheRealKitWalker]

This was fun! I was sceptical of this video but it turned out really really fun 🤓 Thanks

[@krishgarg2806]

Fun Fact: You can pretty easily do this without p5js and with just browser apis like fetch and document.querySelector

[@Jackfromstatefarm]

10:45 the story of my god damn life lmao

[@etemkaandelibas3649]

Great video

[@notnooryno]

How do you get Processing.py sketches to display in a web page?

[@LeeWalton_1999]

Maybe a game where you have to try to pick a word that calls back the highest number of other terms before it encounters an error and ends, would have to test on average how many times it would though haha.

[@vcothur7]

There's an Unicorn cricket team 😂

[@ytsks]

I like how this dude looks like he is on speed, even tho I am sure he isn't.

[@geraldbustos]

Something With Google Maps???

[@hermannbarbato]

I think my brain crashed somewhere between the callbacks and the regular expressions.

[@alonattar3836]

Great work Dan ! :) Can you please next time program in CSS :D Thanks alon :)

[@TheCalax]

You don't really "program" in CSS

[@rivarelven4129]

make google maps api challenge

[@twistedsim]

Nice video, you should try using only the embedded Wikipédia links instead of random word in the page.

[@TheMrInfantaria]

Daniel, do you still update the patreon page? Last post i see there from you is from 2016....

[@TheCodingTrain]

I am using Patreon as a service but really only to process payments, I release the content here and correspond with Patrons via slack and e-mail.

[@amirmekk9649]

I hate CORS so much that I stopped learning to code because of it for a while , anyway awesome workman

[@DimGG]

cors.now.sh

[@amirmekk9649]

Dim this seems awesome I am gonna use it thanks

[@not2day646]

@@DimGG wait dim? How good to see you here. I know you'd from discord.js discord server xD