• Stars
    star
    686
  • Rank 65,892 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 14 years ago
  • Updated almost 8 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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.

More Repositories

1

sketch.js

Cross-Platform JavaScript Creative Coding Framework
JavaScript
4,086
star
2

fit.js

Fit things into other things
JavaScript
1,888
star
3

Makisu

CSS 3D Dropdown Concept
CSS
1,532
star
4

Coffee-Physics

A simple, lightweight physics engine written in CoffeeScript
CoffeeScript
1,059
star
5

Muscular-Hydrostats

Tentacle simulation using inverse kinematics
JavaScript
491
star
6

FoldScroll

Experimental CSS 3D scroll behavior
JavaScript
419
star
7

WebGL-GPU-Particles

1 million+ particles being moved around on the GPU via WebGL
JavaScript
380
star
8

Recursion-Toy

A tool for exploring and visualising recursion / branching systems, written in JavaScript
JavaScript
207
star
9

Springboard

Springboard helps you setup web projects in seconds and easily manage concatenation, minification and compilation of scripts and styles. The idea behind Springboard is to provide a universal build system for HTML/CSS/JS projects that works with your own project template library (whichever boilerplates you may use) and helps you get going with projects of any size quickly and easily.
JavaScript
195
star
10

FontMetrics

A lightweight JavaScript library for computing accurate font metrics such as x-height, cap height, ascent, descent and tittle for any loaded web font.
JavaScript
175
star
11

Plasmatic-Isosurface

A 2 dimensional plasma simulation running on the GPU, written in GLSL and CoffeeScript and rendered with WebGL.
CoffeeScript
138
star
12

SoulwireAS3Framework

Soulwire AS3 Framework
ActionScript
87
star
13

Worms

Experimenting with Inverse kinematics, Catmull-Rom Splines & Wander Behaviors
JavaScript
43
star
14

Unwrapageddon

The gift that keeps on giving...
JavaScript
32
star
15

organis.ms

An exploration of simulated evolution, movement and behavior
JavaScript
30
star
16

Crystallisation

A JavaScript / CoffeeScript & 2D Canvas experiment, exploring the recursive subdivision of polygons to form crystallisation patterns.
JavaScript
20
star
17

ParticleNodeSequencer

An experimental particle based audio sequencer, created in Flash using Tonfall; the new open source AS3 audio engine produced by Andre Michelle
ActionScript
16
star
18

Coffee-Percolator

Use import directives in CoffeeScript to manage dependancies with this tasty CakeFile
CoffeeScript
15
star
19

alfred-hash-workflow

Generate hashes for strings via Alfred using various algorithms including MD5, SHA1, SHA224, SHA256, SHA384 and SHA512
7
star
20

NeuroSynth

Synthesiser and sequencer based somewhat on the concept of neural networks
JavaScript
7
star
21

TensorField

A small interactive experiment with gravitational forces
JavaScript
6
star
22

KineticCanvas

Kinetic Canvas
JavaScript
3
star
23

superlativ.es

Emancipate your verbal lexicon from monotonous and hackneyed superlatives with this preeminent compendium of atypical utterances.
3
star