The Joke List

Doesn't every pandemic need some good jokes?

• Check out: The Joke List

As I was building API-Harness I tested many free Joke APIs with unsatisfactory results. So I thought it would be a good idea to provide a free Joke website and API for public consumption.

The jokes are from a dataset of English plaintext jokes by Taivo Pungas, published in 2017.

My ulterior motive was to get some technology in place for coming projects. So there is a lot more tech here than required:

• Sequelize, and SQLite for data management
• Prompts for console app development
• Express.js, GraphQL, Morgan, and PM2 for traditional web application development
• Netlify and DBHub.io for serverless public cloud deployment
• CI/CD: PM2, Netlify-cli, vscode-live-sass-compiler
• UI testing with Gherkin/Cucumber-js and selenium-webdriver

Features

• public website and API: thejokelist.netlify.com
• deploy a local website and API with Express.js web server and GraphQL endpoints
• contains a SQLite database (db/jokelist.sqlite) with a ~100 row table of jokes. This is significantly smaller than the 200K JSON dataset because it’s filtered so my Mom can use the website. Will add more jokes over time.

UI Feature Tests (in Gherkin syntax)

Feature: Random Joke

  Scenario: Retrieve a random joke.
    Given the home page is displayed
    And  the Question Mark is clicked
    Then a new joke appears

Feature: Next Joke

  Scenario: Retrieve the next joke by joke.id.
    Given the home page is displayed
    And  the Right Arrow is clicked
    Then the next joke with an id larger than the last appears

Feature: Prior Joke

  Scenario: Retrieve the prior joke by joke.id.
    Given the home page is displayed
    And  the Left Arrow is clicked
    Then the next joke with an id smaller than the last appears

Technical Notes

Data

• Jokes from the JSON data files at joke-dataset. Files included in folder: import/
• important: many jokes in the joke-dataset are not suitable for a general audience
• import/import.js is an app to automatically import jokes based on data length and rating into import/import.sqlite. Resulting database contains 99 records, but the content is not suitable for a general audience
• import/review.js is an app to view JSON jokes and add them to import/review.sqlite
• db/jokelist.sqlite created by copying import/review.sqlite
• DBHub.io database manually updated with db/jokelist.sqlite

Public Netlify API

• http://thejokelist.netlify.com/.netlify/functions/random
• http://thejokelist.netlify.com/.netlify/functions/next?id=22
• http://thejokelist.netlify.com/.netlify/functions/prior?id=22
• JSON returned:

{
  "id": 121,
  "title": "You know what they say about jokes",
  "body": "The cheesier the grater!"
}

Private Express GraphQL API

• http://localhost:4000/graphql?query={ random {id title body} }
• http://localhost:4000/graphql?query={ next( id: 20) {id title body} }
• http://localhost:4000/graphql?query={ prior( id: 20) {id title body} }
• console request with curl:

curl -X POST \
-H "Content-Type: application/json" \
-d '{"query": "{ random }"}' \
http://localhost:4000/graphql

• JSON returned:

{
  "data": {
    "random": {
      "id": 121,
      "title": "You know what they say about jokes",
      "body": "The cheesier the grater!"
    }
  }
}

Netlify CLI Development

• references:
  -- Local Development
  -- CLI get-started
  -- CLI command ref
• start server (using local installation of CLI; default port 8888):

$ npx netlify dev

Netllify Deploy

# 1. deploy draft website
$ npx netlify deploy

# 2. test draft

# 3. deploy to production
$ npx netlify deploy --prod

Thanks To

• Axios HTTP client
• Chai a BDD/TDD assertion library
• cucumber-js automated tests in plain language, for Node.js
• DBHub.io cloud storage for SQLite databases
• Express web application framework
• express-graphql HTTP Server Middleware
• Favicon checker
• GraphQL query language for APIs
• joke-dataset of English plaintext jokes
• Mocha test framework
• Morgan HTTP request logger middleware
• MDN Web Docs
• Netlify web development platform
• Node.js
• Noun Project SVG icons, modified by Chris DeFreitas:
  -- Bird by Oksana Latysheva
  -- Email by rex
  -- Facebook by Saloni Sinha
  -- Linkedin by rivda
  -- Playful by Alice Design
  -- smartphone call by cakslankers
  -- Sms by Arafat Uddin
• PM2 daemon process manager
• Prompts, CLI prompts to enquire users for information
• RealFaviconGenerator
• Sass CSS extension language
• Selenium-webdriver browser automation library
• Sequelize ORM
• Share Link Generator by Patrick St. John
• SQLite database engine
• The Open Graph protocol
• vscode-live-sass-compiler

Updates

20220428

• added send by SMS function

20220425

• added icons from RealFaviconGenerator
• verified icons with Favicon checker

20220422

• change document.URL to document.location.origin
• new api endpoint to return joke by id: api.id( id )
• added favicon.png; tweaked svg version
• added social media share icons
• added Open Graph protocol headers to index.html

20220331

• installed netlify-cli locally as per: netlify docs
• refactored index.html to remove javascript, and tweaked UI
• created public.js with code from index.html; combined netlify, netlify-cli, and graphql server handling code
• removed npm script commands build.graphql, and build.netlify with associated html files
• updated cucumber UI tests to work with netlify-cli
  -- added firefox.world.sleep() because netlify-cli server is very slow
• updated readme

20220329

• implemented UI testing with cucumber.js and selenium webdriver
• created selenium webdriver harness: firefox.world.js
  -- code to make default world failed; using as: browser = new require(...)
• updated index.html to work locally (GraphQL) and remotely (Netlify)

ToDo

• test failure return values from api.next(), api.find(), api.id()
• verify share links; linkedin requires jokeid: http...?jokeid=nnn
• finish Netlify testing
• replace Mocha/Chai with Cucumber-js