Skip to content

An HTML / CSS / JavaScript template for creating WhatTheFuckIsMyMashup.com style web sites

License

Notifications You must be signed in to change notification settings

devs-devs-devs/WTFEngine

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

43 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

WTF Engine

Inspired by WhatTheFuckShouldIMakeForDinner.com, in 2011 I made WhatTheFuckIsMyMashup.com and released this simple tool, the WTFEngine, for generating similar websites.

It's very simple to use and now allows you to populate it using either vanilla JavaScript objects, JSON files or direct feeds from Google spreadsheets.

How to use it

To make your own, simply clone or download this repository and start populating the engine with your content.

You can populate it using one of three different methods. Each is controlled from main.js (where you will find commented examples of each technique.)

  1. JavaScript Object literal
  2. A JSON file
  3. A live feed from a Google spreadsheet

If you choose to use a Google spreadsheet, you must publish it first and be sure to manually republish it after editing if you want changes to propagate immediately, otherwise they will take around 15 minutes.

Here's an example spreadsheet, which you can clone and use a base for your data source.

Note: For local testing (when using loaded JSON or Google spreadsheet data), you'll need to serve the site from a local webserver. You can easily do this using tools like SimpleHTTPServer for Python or http-server for Node.

How it works

The process is very simple. The WTF Engine takes a sentence template and fills in different types of blanks with different types of words, much like the game Mad Libs. You can nominate any amount of templates and as many different categories of words or phrases as you like.

For example, here is a basic corpus

{
    template: [ "Big @color @animal", "Silly @animal with @color fur" ],
    animal: [ "dog", "cat", "rabbit" ],
    color: [ "red", "blue", "green", "yellow" ]
};

As you can see, in a template you use the @ symbol, followed by the type of word you wish to use to tell the WTF Engine to pick a random word of that type from the corpus and insert it at that point.

Showcase

I've been pleasantly surprised to find several people using this template to create their own sites. Among them are:

If you have made one, or know of any, please let me know.

Notes

This was written simply as a bit of fun. Zach's site was so popular that it inspired references based on other subjects, such as What The Fuck Is My Social Media Strategy? (and consequently What The Fuck Is My Mashup?). As far as I am aware, this idea was Zach's alone and so credit to him for the inspiration. As a meme, there are doubtlessly many topics that could do with the WTF treatment; which is why I decided to create this (very) simple platform.

About

An HTML / CSS / JavaScript template for creating WhatTheFuckIsMyMashup.com style web sites

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 65.1%
  • HTML 17.7%
  • CSS 17.2%