Giter VIP home page Giter VIP logo

dummy's Introduction

Dummy

Dummy is a content generation toolkit designed to make the development, testing and presentation of web prototypes less time consuming and more realistic. It does so by making it easy to populate static HTML with dynamic content, and by randomizing elements within a layout on subsequent loads of a document, in a way, simulating connectivity to a live database.

Originally conceived as a tool for helping to simulate the high volume, rapidly changing content characteristics of online newspapers and magazines, it's generalized enough to benefit the early stage front-end development of any website or application with content that frequently changes in length, form or nature.

Dummy can be useful in the early stages of a project's development, where basic questions and assumptions about how to architect the front-end must be tested and resolved to conclusion before engineers further down the Gantt diagram can begin their work of obfuscating yours.

It can also been seen as a support tool for designers and front-end artisans ready to embrace the dark art of designing in-browser, as vastly different layout permutations can be generated and evaluated rapidly with each load of the page. Problems and shortcommings can be more quickly exposed.

Dummy can…

  • Insert randomly selected strings of placeholder text in various lengths and formats (e.g. headline, teaser, paragraph).
  • Automagically crop and size high quality, news worthy, Creative Commons licensed placeholder images from a default pool – or from a specific folder or subset of folders that you provide.
  • Flesh out highly variable, asset rich layouts quickly with friendly, human-readable logic for building loops and controlling probability.
  • Allow you to focus on the important things – namely, the design and the code – not on copying and pasting (static) Lorem Ipsum, or hunting down plausible placeholder images.
  • More. Not lots more, but a bit more!

You can…

More Info

Dummy's primary goal is to provide tools that speed front-end prototyping and QA. Whether you're meticulously crafting a fully responsive site with a myriad of CSS breakpoints, or just slapping together a half-baked idea – using Dummy should make it easier at the earliest stages of development to visualize, test and present something much closer to what your actual front-end will become under a variety of different conditions.

Dummy is for the front-end web worker who wonders…

  • How does this layout hold up with and without an image, or with multiple images?
  • What is the maximum number of items that can appear in this list before it breaks the layout, or before it just stops looking good?
  • How do the columns align and balance as the amount of content changes – or what's the longest word that can fit into this column without triggering unwanted overflow?
  • What is the easiest way to demo the signed-in and signed-out states of this page?
  • Do these CSS breakpoints hold water?
  • How will this script perform within the DOM when it needs to process over 100 images? 1000 images?

Why?

Using Dummy in the early stages of front-end development can give you a new perspective on your work every time your document is reloaded in the browser, shortening and improving your test cycle by more quickly exposing weak-points or trouble areas as you go about marking up a new design. It's like watching a time-lapse video of your layout performing with real data.

Subscribing to the belief that the earlier a problem can be made to surface, the easier and less painful it will be to deal with and debug, this is especially useful in projects with front-end code that should be delivered to another team for implementation as part of a phased hand-off.

Dummy also supports designers and front-end artisans who find themselves increasingly attracted to In-Browser Design as a viable process for the creation, iteration, and client approval of their work. As does @beardedstudio. (http://blog.bearded.com/post/21447195970/mocking-up-is-hard-to-do)

Requirements

You need a development environment running Apache + PHP and compiled with support for GD (this covers most of them). If you want to play with URL segments or other advanced techniques then you'll need to have mod_rewrite enabled, and you'll need to enable the .htaccess file (included in /dummy/extras/), but again, this probably covers most local development environments. If you're not developing locally, …why aren't you developing locally?

TODO

  • Optimize performance and memory usage.
  • Integrate a Lorem Ipsum generator, together with some intuitive syntax for specifying parameters of the text you want generated (length in chars or words, casing, etc)
  • Ability to call and define image crops from within CSS (i.e. ability to post image requests in the URL to dummy.php)
  • Develop an easy way to link our broadcast dumb_luck outcomes, so that one outcome could bubble-over to another.
  • Clean up the way errors and messages are formatted (i.e. abstract the HTML and inline styles that surround them)
  • The image assets that ship with Dummy are highly geared for usage in editorial design. One could imagine separate asset packages for different types of projects (e.g. a commerce package with commercial product shots, a portfolio or gallery package with images that showcase art, architecture, or design).

License

Dummy is released under a Creative Commons Attribution-Share Alike 3.0 United States license (http://creativecommons.org/licenses/by-sa/3.0/us/). Be a doll and let us know how you're using Dummy, or if you've used it to help build, test or demo anything interesting.

Credits

Credits and image license information can be found in dummy/CREDITS.md

dummy's People

Contributors

kerns avatar keanpedersen avatar shadowinek avatar wolfiezero avatar robflaherty avatar tddewey avatar

Watchers

James Cloos avatar m.zysk avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.