

Fixie.js - Automatic filler content for HTML documents. - zacharytamas
http://fixiejs.com/

======
duopixel
I dislike using lorem ipsum or other non-sensical text for mockups, but I
admit that it fills a very real need for designing content-centric websites
when the content isn't ready yet.

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.

~~~
splatzone
Would you object if I tried to implement this? Seems like a fun weekend
project.

~~~
duopixel
No objection at all, I'd be willing to design the landing page if you come
around to implementing this :)

------
stephenhandley
awesome. maybe an alternative api would be to allow for something like

    
    
      fixie.init([".array", "#of .selectors", ".that", ".should", "#be .populated .with .lorem"])
    

or just a string like

    
    
      fixie.init(".string, #of .comma .separated .selectors, .that, .should, #be .populated .with .lorem")
    

I think that would address the class proliferation issue and still be explicit
about which dom nodes should be populated. easier to maintain / comment out.

~~~
rthprog
Nice! I added it as an issue just a second after you.

I'll definitely give it a try, though I invite anyone else to send a pull
request.

------
JohnnyFlash
This would be so much more awesome if you could assign the class to a
container div. Then on each page reload it would randomly add content - be it
paragraphs, headers, imgs, lists, tables etc.

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.

~~~
rthprog
You can now assign the class to a container div - you must still provide some
empty tags to specify what kind of content you want.

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> ```

------
kwamenum86
Depending on what browsers you're supports it's probably far easier to use
generated content (:before, :after). Maybe combined with calc or CSS
expressions.

~~~
rthprog
Sure, but it's hard to get a variety of content in that way. If you have a
paragraph that begins with lorem ipsum over and over again, you'll quickly
notice.

~~~
taitems
Then add some :nth-of-type() wizardry to it.

~~~
rthprog
Good point.

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.

------
raingrove
I like how the words generated are totally hipster!

~~~
rthprog
Thanks! It's actually kind of funny how small the dictionary is...

------
juddlyon
Great idea!

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

------
SirensOfTitan
Very cool. However, I don't particularly like the fact that I need to add a
class to each applicable container.

Maybe a configuration file that allows for selection of specific classes/ids
instead?

~~~
rthprog
Now you can use a specific class instead. Just call fixie(myclassname);

~~~
rthprog
This has been replaced by `fixie.init(["CSS-selector"]);`

------
nXqd
I don't this is a good idea. Because even if you want quick design but later
you will have to fix them all. And nowadays designers are familiar with html (
the most basic skill ). But it's nice btw

~~~
rthprog
The point isn't to write content for you - it's to automatically add temporary
content so you can test out your design before writing copy.

------
minikomi
Thought this might be something like <http://jsfiddle.net/MNFV8/1/> but I like
the addition of the paragraph generators too.

------
teuobk
This looks pretty cool. It would be a great companion to <http://placehold.it>
(which fills a similar role for images).

~~~
dag11
It uses placehold.it, actually: <http://ryhan.me/fixie/sample.html>

------
abrichr
I can't remember the number of times I've wished for something like this. I'll
be sure to check it out for the next web project :)

------
kailashbadu
Like it. The only nuisance is the class attribute you have to repeat across
all tags that you need to fill in.

~~~
jberryman
What is the better alternative?

~~~
kailashbadu
don't know. But the smart folk behind should be able to figure something out.

~~~
tolmasky
Just auto-filling all <p>'s and <h_>'s might be an interesting option. You
could also have the API allow you to list tag names to be auto-filled. It can
even be smart and first check whether the tag in question already contains
text content, and if it doesn't, only then auto-fill it.

~~~
rthprog
I considered doing that, but the problem is that I've noticed that _some_
people use <p> tags as breaks between paragraphs. Requiring a class makes sure
that the developer/designer knows where their filler content is going.

~~~
grey-area
If you're going to require classnames anyway, it might be more flexible to use
those to define the type of content to insert. Personally I'd prefer adding a
simple bit of js to a page to define the fixie behaviour, something like :

    
    
      fixie.fill('.my_header_class','head');
      fixie.fill('#my_id','paragraphs');
    
    

etc, as otherwise I have to have a special layout with lots of 'fixie'
everywhere and perhaps a special structure using certain tags in order to use
the js, and can't define what sort of content goes where except by changing
the type of html element which contains it.

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.

~~~
rthprog
As mentioned elsewhere, this is now implemented as `fixie.init(["CSS-
selectors"]);`

------
franciscoapinto
Won't work with javascript disabled, obviously. This makes it unusable for me.

