paulcollett / dummyjs Goto Github PK

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]

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

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

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) + ')'

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

Possible interface:
`

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?

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));

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

* 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.

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

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" />

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

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

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>

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

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)

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

for search/linking reasons

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

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

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

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');

Currently some issues, which could be help tweaked by:

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

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

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

nice to have!

could also add a graphic to the readme

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

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

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

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

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

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

REPO:

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

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>

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

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

Would be nice to show some examples with bootstrap markup

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.

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>