Fixie.js - Automatic filler content for HTML documents.
fixiejs.com
fixiejs.com
I've encountered just too many cases where the design looks great as a mock-up but when you start plugging in real data the layout start breaking apart, either because the content is too short, too long, or the designer didn't consider long usernames.
My dream for a filler content generator would be a large database of real content types, so you would have a list of real twitter handles, facebook names, blog post titles, world news articles and so on. You could then do stuff like h1 class="fixie worldnews title" or class="fixie twitter username".
Designers often argue that the purpose of Lorem Ipsum is to help the client focus on the look and not the content. I think this posture is wrong because you need the client thinking about content as early as posible.
Front-end developers also need the randomness of real world data to test the sturdiness of their layouts and account for edge cases as early as posible.
fixie.init([".array", "#of .selectors", ".that", ".should", "#be .populated .with .lorem"])
fixie.init(".string, #of .comma .separated .selectors, .that, .should, #be .populated .with .lorem")
I'll definitely give it a try, though I invite anyone else to send a pull request.
This would be a fantastic tool for testing templates against a wide variety of random content. When making a template for clients to use you can never be too sure what they are going to add so you do your best to style everything. Getting random content on each page load would really solidify this testing.
Adding a class to individual elements... I don't find this too useful.
For example, if you need a couple paragraphs of text, you can use `<article class="fixie"></article>`. If you need exactly 1 header followed by 3 paragraphs, you can use ``` <article class="fixie"> <h1></h1> <p></p> <p></p> <p></p> </article> ```
While there are some situations where that makes more sense, doing that for things like paragraphs is kind of silly - you're just moving junk copy to your CSS. You either have a giant CSS file, or some rather repetitive paragraphs.
I'd use this on client projects if:
- I could pass a selector rather than adjusting my markup (maybe I can add 'fixie' via jQuery?)
- There's an easy way to swap out the word list - I've had Bacon Ipsum, Hipster Ipsum, and Gangster Ipsum all slip through before and it's embarrassing (depending on the client).
Maybe a configuration file that allows for selection of specific classes/ids instead?
fixie.fill('.my_header_class','head');
fixie.fill('#my_id','paragraphs');
I'd prefer to start with an html document which has already been made, and consider how to add fixie to it in the least obtrusive way - and how to remove it later when it was not required, without impacting the document structure or classes etc at all. So if I can add a bit of js which adds fixie in an unobtrusive way to any existing page, and then remove it by simply commenting out that js, that would be preferable to having to set up a special template just to use fixie, or having to consider fixie use from the start. Fixie should really IMHO adapt to the html it is used on, not force that html to be adapted to it.
``` <div class="fixie"> <p></p> <p>Hello <a></a></p> </div> ``` The above will cause only the first `<p>` tag to be filled, and the `<a>` tag.
In addition, you can now use `fixie.init(["CSS-selector"]);` to target arbitrary tag names, class names, and ids. If the tag in question contains text content, it will not auto-fill it (though it will auto-fill children, if need be).