1egoman/funnies

:stuck_out_tongue_winking_eye: Make users laugh when your app loads.

Funnies

A flexible way to add funny loading messages to webapps with optional react support.

Examples and Demo

As of funnies 1.2.0, funnies ships with examples. Take a look at https://1egoman.github.io/funnies/ or build them locally by cloning down this repository, then running npm install && gulp example. This will start up a local server on port 8080.

Usage

Javascript

import Funnies from 'funnies';
let funnies = new Funnies();
funnies.message(); // "Reticulating Splines..."
funnies.message(); // "Generating witty dialog..."
funnies.message(); // "Go ahead -- hold your breath!"

React Component

import {FunniesComponent} from 'funnies';
ReactDOM.render(<FunniesComponent />, node);
ReactDOM.render(<FunniesComponent interval={1000} />, node); // a new message every second
ReactDOM.render(<FunniesComponent customMessages={["You're too funny", "Thinking really hard..."]} />, node); // Add a few of your own messages

React Styles

Here's some css to properly animate funnies in the react component. Totally not required!

.funnies-text {
  transition: opacity 250ms ease-in-out;
}
.funnies-text.funnies-enter {
  opacity: 0;
}
.funnies-text.funnies-enter-active {
  opacity: 0;
}
.funnies-text.funnies-leave {
  display: none;
}
.funnies-text.funnies-leave-active {
  opacity: 0;
}

jQuery

Odan wrote a great jQuery plugin for Funnies!

import $ from 'jquery';
// (include js/jquery.funnies.js)

$('element').funnies();

Troubleshooting/FAQ

• Does this work in both the client and server-side?

  Yes. Either include dist/funnies.min.js within your page and use window.Funnies, or use node/browserify/webpack to require the module.

• Can I return a funny message within preformatted HTML?

  Yes, try funnies.messageHTML().

• I want to add a funny message!

  Create a fork, add your message to src/funnies.js, then create a pull request.

• Something isn't working properly.

  • Send me a tweet @rgausnet and I'll help you out asap.
  • Use Github's issue tracker.

Areas to improve

• Angular bindings would be great.

funnies's Issues

Browserified funnies.min.js throws error

Not sure if just me, but the bundled funnies.min.js does not work for me 😢

Was playing around with your project and got thrown this error in chrome:

I have a feeling this is because we haven't defined the entry point for browserification. Seems to work for me if I define src/index.js as the entry point for browserify.

Write an angular directive for funnies!

Funnies has a raw javascript, react, and jquery bindings. I've had many requests for Angular bindings too.

It's been a while since I used Angular, but I'm pretty sure that we'd want to make a directive called funnies, and have it render one of the funny phrases in here (probably in a span with a custom classname so it can be styled). Behind the scenes, you can consume this api to generate a random funny message to display. Bonus points if you can make the phrase change every couple seconds! 😄

Thanks for your help!

Consider supporting custom react component?

Currently, I believe everything's hardcoded in the React component.

Add more funny phrases!

We can always use more funny phrases!

Add them to the array in here, as strings. Make sure you add a trailing comma to the end of the array to attempt to make each merge as clean as possible, though it's unlikely that the merge will be 100% clean with this issue.

This is a great first pull-request for those unfamiliar with Github. Feel free to ask for assistance if you need some help!

Allow the react component animation duration to be configurable

Currently, the animation duration in our react component is set at 200ms. This is hardcoded. It would be great if the duration could be broken out into a property that could be customized by the user.

• Add a property for animation in length and animation out length
• Give them a default value of 200ms by adding to the property default values here.

Thanks!

Uncaught Error: Cannot find module "funnies/react"

I think the react example is wrong.

Duplicated funnies?

the Didn't know paint dried so quickly. is duplicated in the funnies.js

Disable react components?

I am using VueJS and it is complaining that it cannot resolve "React".

Is there any way to make it pick a random message string without trying to use react?

Thanks

Any desire to update the React component + testing?

Cute project! I took a look at the React component and testing and I was wondering if you had any interesting updating it to be a functional component with hooks and to update the testing to use jest and snapshot tests?

couple typos

Couple / few typos! And one dupe.

original comment:

funnies/src/funnies.js

Line 216 in de2bed6

"Everything is this universe is either a potato or not a potato",

Suggest "Everything in this universe is either a potato or not a potato"

I have a degree in political communication, so yeah, I know stuff.
``

Gulp watch task

There currently isn't a good way to build funnies in the background as one works. Ideally, we'd have a workflow where one runs gulp watch and as gulp sees changes to the filesystem it would automatically build any changes.

What's involved:

• Add a gulp task called watch that when invoked watches for filesystem changes and rebuilds.
• Use something like watchify to take advantage of delta updates to make the build process happen faster.

Thanks for taking a look!

Revise build system to use gulp

This package's build scripts need some work. I set up the build very fast and I think it's time to move to something like gulp to build this with instead of the mismatch of scripts that are in the package.json.

What this task entails:

• A super simple Gulpfile:
  • Use babel to transpile react/es2015
  • Bundles into one file with browserify
  • Minifies and removes dead code with uglifyjs
• Update "main" in the package.json to point to the compiled output.