So I have a site I'm a little proud of. It's just a dad joke api and front end all in one

Connect
1

But I think it’s pretty great. I would love your suggestions to improve it.

Link to the site: https://joke.jace.pro
Link to the repo: GitHub - jacebenson/joke-api

It uses static site in /public to serve the page. The next joke button just fetches a joke of the 700+ . That payload of the jokes isn’t loaded on page load though, just one from the api .netlify/functions/server

4 Likes
2

I have a few suggestions, all meant to be constructive and in the interest of bringing things perhaps a little more up to date and some good learning:

  • Bootstrap is on v4.3.1 now, you’re using very little functionality so if you wanted to learn a bit of SASS it’s a good oppotunity
  • You need jQuery for Bootstrap but perhaps try doing the same with vue.js it would be pretty easy and good learning just using their standard documentation (no need for the CLI tools)
  • Try using axios for your API calls in conjunction with the above

Thankfully I haven’t used any of the jokes on my kids… yet!

1 Like
3

I love the ideas. I’ll look into vue.js. Yea, I could also just go w/o all the things I may try that first. Thanks!

4

Very cool, but what is/are the benefit(s) to doing it this way as opposed to having a JavaScript file with your jokes and doing something like:

  var randomNumber = Math.floor(Math.random() * (jokes.length));
  document.getElementById("displayJoke").innerHTML = jokes[randomNumber];

There seems to be a lot of code here (and kudos for that), and you seem to have a special procedure for running this locally, which would not be necessary if you just JavaScript.

I’m pretty new to all this, so I apologize if this is a silly question.

1 Like
5

Well no one is going to go through the hundreds of jokes / puns. So it only loads the ones requested. It is def. something you could do by loading them all. I just didn’t want to to see how it would work.

6

OK, I must not understand how this all works. I would think that before a joke could be selected, the whole file would have to be opened – AKA loaded – if for no other reason so that the random function could count the number of jokes and select the one to be displayed. And if the whole file is loaded, it should be cached (or, at least, cacheable), eliminating re-load time.

1 Like
7

Page loads, initially hits the api for a joke. Renders it on page. In the “new joke” it just hits the api for a random joke.

So the jokes are never all downloaded. Browsers do things to cache results when you hit an api with no differences. However if you ask for a joke it’s just one object coming back (it’s still console logged iirc)

8

It must be way over my head, because this seems to be a distinction without a difference. If the variable components are in a JSON variable in a JavaScript file that loads and grabs one of the JSON objects at random, that JavaScript file should be in cache too. So subsequent calls to that JavaScript file require no further transfer aside from the random JSON object chosen at that invocation.

9

Yep, I could I guess load the whole json payload on each payload, but that seems like overkill. This just loads one to keep the payload of the whole page small.