paulcollett / dummyjs

dummyjs.com placeholder text & images for HTML prototyping

Dummy.js – Crash test your front-end builds with:

Dynamic, ever changing, dummy text, placeholder images and more

Speed up and crash test your front-end builds and HTML prototypes with a range of dynamic placeholder content that helps you test for all the edge cases with image and text sizes. Throw in easy repeatable & cloning of elements and you have the perfect companion for your battle tested builds.

😎 Why

Going through the front-end creation process requires the frequent need to test with dynamic images and text of various sizes to battle test the html + css styling. This can be a time consuming manual step, but also a crucial one to simulating user generated content, testing word wrapping, repeating of elements, etc. To battle test the front end for these edge cases not only quicker, but more thoroughly, the first version of DummyJs was realized to add a layer of automation to this process.

From here DummyJS has extended to double as a robust tool in JS first development environments, like React and Vue and also Node JS.

Latest documentation and examples can be found at:

https://dummy.paulcollett.com/

😄 Usage

Intall for use in React and JS apps:

yarn add dummyjs --dev # for use with yarn, or:
npm install dummyjs --save-dev # for use with npm

And, import:

const Dummy = require('dummyjs'); // es5 or node
import Dummy from 'dummyjs'; // es6

Or simply, add the script to your html page:

<script src="https://dummy.paulcollett.com/js"></script>

📖 Dummy Text

<p data-dummy></p>

Dummy.text()

Choose the amount of words:

<p data-dummy="150"></p>

Dummy.text(150)

Choose a random amount of words between 3 and 10:

<p data-dummy="3,10"></p>

Dummy.text(3,10)

🎨 Dummy Images

DummyJs Images are rendered client side so NO one can to log your data. It's secure for your piece of mind to keep your unreleased product secret

<img data-dummy="400x300" />

Dummy.img(400,300)

Defaults to the size of the parent container

<img data-dummy />

Random size

<img data-dummy="400,100x100,400" />

Dummy.img('400,100x100,400')

Custom Text

<img data-dummy="400x300" data-text="person" />

Custom Colors

<img data-dummy="400x300" data-color="#0000ff" data-text-color="#fff" />

Output a Kitchen Sick of HTML

Useful for quick Base styling or testing CMS outputted HTML. Tags like ul, select, table, forms and more are automatically outputted with suitable contents.

Output a kitchen sick of headings, tables, images & form elements

<div data-html></div>

Dummy.html() // returns a string of html elements

Output a specific element:

<div data-html="table"></div>

Dummy.html('table') // returns a string of html elements

Or, multiple elements:

<div data-html="h1,table,form,ul,p"></div>

Dummy.html('h1,table,form,ul,p') // returns a string of html elements

Repeat Elements

<div data-repeat="3">Team Member</div>

Repeat a random amount of times between 3 and 10:

<p data-repeat="3,10"></p>

Copy Elements

Duplicate elements into other areas of your webpage. Pass a CSS selector like .myelement or .post h3

<div data-copy=".pagination"></div>

More Docs and Examples are available at:

https://dummy.paulcollett.com/

• Bootstrap examples https://dummy.paulcollett.com/docs/bootstrap.html
• Shh.. New features https://dummy.paulcollett.com/docs/undocumented.html

Usage with jQuery and Vue

jQuery:

jQuery('p').dummy(30)

Vue.js: https://www.npmjs.com/package/vue-dummy

Issues and suggestions: https://github.com/paulcollett/dummyjs

dummyjs's Issues

feature, data-dummy on select boxes

populate <select data-dummy></select> with <options>

landing, make resposive

* Low priority issue *

Seeing a number of mobile visits, so it's time to consider cleaning up the mobile experience a little. While the landing page (and script) remains a developer tool, and would mainly be used in a desktop environment, readability is always nice across devices.

crazy ways to use placeholder content

This is the task to add the list of contributed crazy scenarios someone could use placeholder content to the home page at http://dummyjs.com/

Contribute your own wild ideas easily (auto makes new PR) by visiting:
https://github.com/paulcollett/dummyjs/edit/master/FUN_USAGES.txt

feature, dummy videos

Initial version could link to a generic video file that still looks ok when scaled to an array of scaled formats (could save files in github repo)

<video data-dummy></video>

Feature: valid dummy dates

Feature
Auto generate a dummy date, with the option to pass some config to constrict the date range.

Possible Implementation

<div data-dummy:date></div> <!-- random date in time -->
<div data-dummy:date="2000, 2010"></div> <!-- random date between years -->
<div data-dummy:date="2020-12-01, 2020-12-31"></div> <!-- random date dates -->
<div data-dummy:date="future"></div> <!-- random date in the future (or "past") -->

Not too sure if date formatting is worth exploring here too.

image, allow for randomally generated sizes

Possible various input methods:
<img data-dummy="200,600" />
<img data-dummy="200,600x100" />
<img data-dummy="200,600x100,350" />

image bug, hidden parent breaks image

when el.parentNode is hidden offsetWidth is 0 resulting in a broken image. Fallback needed

perf, reduce DOM querying

While the aim of this tool is to allow for the quickest way to get placeholder content in a dev environment, there could be some easy performance wins.

It's possible to remove multiple queries to the DOM without too much added code. Can also kill full execution when no data-dummy attributes are found.

With this, explore quicker ways of accessing data- attributes & and values (eg. els.dataset.dummy)

expose function to return dummy image src & text

something like:
Dummy.src(100,300) / Dummy.src('300,500x300')
Dummy.text(30) / Dummy.text(30,50) / Dummy.text('30,50')

feature, alternate attribute names

While using a prefixed data- attribute (data-dummy) is regarded to be a more valid syntax, considering the common use case for DummyJs in a dev environment we could get away with using other attributes to simplify the interface down:

dummy="200"
or maybe even shorter..
dd="200"

Both data- prefix would be available along with any shorthands so the option is still a choice of the developer

feature, more variation when using random ranges

Currently when using a range between big numbers...

<div data-dummy="100,300"></div>

...the random amount of outputted words will usually land somewhere in the middle of that range.

Ideally we want to output high and lows more often to better test our layouts - which is the overall goal of dummyjs

more related prototyping tools

Bootstap examples

Would be nice to show some examples with bootstrap markup

feature, tags

Possible Interface:
<dummy /> default number of words
<dummy text="23" /> 23 words
<dummy src="200" /> Image
<dummy text /> default number of words
<dummy src /> Image
<dummy img /> Image

Also work for copy:
<dummy copy=".element-name" /> or, <copy el=".element-name" />

Could also provide a shortcut...

<dummy 23 /> 23 words
<dummy 200x300 /> Image

Probably not valid attribute names, though they can be accessed correctly at least in chrome
document.querySelectorAll('dummy').forEach(el => console.log(el, el.attributes[0].name));

readme, correct spelling

Numerous typos and poor grammer which should be reviewed at some point in:

• readme.md
• index.html (docs)
• docs/bootstrap.html (more docs)

feature, allow for different dummy text libraries

Possible interfaces:
<script src="https://dummyjs.com/dummy.js?lib=bacon"></script>
<script src="https://dummyjs.com/dummy.js" data-lib="bacon"></script>

Allowing external libraries:
<script src="https://dummyjs.com/dummy.js" data-lib="http://bacon.gen/bacon.js"></script>

Providing custom text:
<script>window.dummyjs_lib = 'custom text lipsum bacon';</script>
<script>window.dummyjs_lib = { words: 'custom text lipsum bacon', join: 'in on' };</script>

header graphic

could also add a graphic to the readme

landing, og image/icon tags

for search/linking reasons

feature, image should use width="" height="" attributes when present

data-dummy on images should use width="" height="" attributes when present for requesting an image of that size

npm, code highlighting

convert readme code language to lowercase. This will then show highlighting on npm

provide a jQuery interface

A simple jQuery interface could wrapper features like #14, which would allow an alternative way to dynamically generate dummy text, etc.. with the familiarity of jQuery.

jQuery will always be optional and never a requirement to use dummy.js

feature, images, allow for 1 dimension to inherit parents dimension

Exactly how data-dummy sizes to the parent container

<img data-dummy />

We could extend to allow one side, maybe like:

<img data-dummy="autox350" />

feature, dummy background images

Could follow the current text attribute behaviour:
<div data-dummy:placeholder="3"></div>

Though render as a background image detecting when the "bg" suffix is passed
<div data-dummy:bg="300x300"></div>
would do: el.style.backgroundImage = 'url(' + Dummy.src(arg) + ')'

browser build, disable auto parsing of tags

This would be for the browser build of dummy.js

We could do something like setting a global var, before the inclusion of the script file
window.dummy_auto_disable = false -> to disable all

feature, ability to dupe elements in different places

Allow duplicating elements into different places within the markup

<div data-include=".element-selector"></div>

Should work with existing repeats etc....
<div data-include=".element-selector" data-repeat="3"></div>

[help needed] fun ideas of where to use placeholder content

To some people the reasons behind using Dummy text and placeholder images can sometimes be a little on the boring side ..building websites.. bla.. bla..

Lets think up some fun situations and usages that someone can use placeholder content!
The goal is to add it to the home page at https://dummyjs.com/

Add your out-there idea to our list (FUN_USAGES.txt), along with your github handle which will also appear with a link on the home page.

Whats needed:

• One "placeholder usage situation" per line
• 3/4 words max
• Add your GitHub username prefixed with the @ symbol (optional)
• Add as many as you like!

[Usage] @[GitHub Name]

Add Yours simply by visiting:
https://github.com/paulcollett/dummyjs/edit/master/FUN_USAGES.txt

vue.js, dummy data attribute (directive)

Allow for dummy.js placeholder content to work with Vue.js. Maybe the best method is by using a directive eg. <div v-dummy></div> for familiar syntax

Inititally aim for basic text & image support

https://vuejs.org/v2/guide/custom-directive.html

feature, data-dummy for attributes

Maybe with the syntax:
data-dummy:(prop)

<input data-dummy:placeholder="3" data-dummy:value="3" />

Wildcard would be nice, though if we need a whitelist we could include:
placeholder value alt title ..Others?

repeater, allow unique random parsing of nested `data-repeat`

IE10/11 Support

As a dev tool, it would be nice to support at least IE11+

Currently there is the following issue(s)

• IE11 doesn't support .forEach on a nodeList

feature, provide range for amount of words to be outputted

Possible interface:
`

images, transparent background reveals text shadow

REPO:

<img data-dummy="800x800" data-color="transparent" data-text="hero image" />

feature, data-dummy inputs values

Using data-dummy on inputs should populate the value attribute. (Textarea already works as intended)

<input type="text" data-dummy="3">

make script work with NPM/Package inclusion

this comes after features like #14 but would be handy for people using bundlers that can include npm scripts.

npm install dummyjs --save-dev

eg. var Dummy = require('dummyjs');

feature, toggle classname/styles

not sure of the interface, or whether an existing or dynamically generated button is to be the trigger..

Maybe something like:
<div data-toggle="nav-sidebar--active"></div>
<div data-toggle"></div> (display: block/hide)

Auto generate button?:
[toggle ".nav-sidebar--active"]
[toggle div]

landing, add in google analytics

landing, add title to the landing page

Currently no title on the landing page (http://dummyjs.com)

feature, more informative landing page

Could test out using a separate branchgh-pages to output information

text, outputs one less than the provided word count

data-dummy="30" will only output 29 words

landing, add favicon

nice to have!

images, crosshair tweaks with custom text

Currently some issues, which could be help tweaked by:

• change text outline to have sans-serif font
• reduce outline size

Load DummyJS in console

((d,u) => {u = d.createElement('script');u.src = "https://dummyjs.com/js";d.getElementsByTagName('head')[0].appendChild(u)})(document);

Dummy.parse.all(); // <= todo
Dummy.text(3, 5);

text, dont output 1 or 2 char words in short word counts (< ~5)

dev note: could spit library and append smaller words when word could is above a certain number