Wednesday, October 6, 2010

Dummy Content

When designing or developing a website or even a desktop application you should put some dummy text to make it presentable rather than inserting the word "test". Its boring, senseless, and it is not applicable in testing paragraphs.

Try to use dummy text generators, I have compiled some websites and browser add-ons to help you insert a dummy text.

  • Lipsum.com - a Lorem Ipsum generator that you can copy freely and paste it in your application.
  • Fillerati - a great text generator using quotes from books. Also has an interactive interface using HTML5 and CSS3.
  • Blind Text Generator - provides different types of dummy text to select from Lorem Ipsum, Cicero, etc.
  • Adhesion Text - lets you input a set of letters or words and it will reorder those letters/words to create a dummy text.
  • Dummy Lipsum - a Mozille Firefox add-on in which lets you insert dummy text just by right clicking a text field from a website.
  • Lorem Ipsum Generator for Chrome - a Google Chrome extension that provides a Lorem Ipsum generator right inside the browser.
Bonus:
  • Dummy Image - lets you create a dummy image to insert into your website. This is excellent since you will never search images in Google or create using an image editor for the right image to insert to your website

Sunday, July 25, 2010

Open-source/Free icons

Question:
Want to put icons on your website without having to violate some copyright with other websites or people?

Tuesday, July 20, 2010

Custom Fonts for your website

Do you want to add custom fonts on your website?
You can declare @font-face inside your CSS.

@font-face {
    font-family: custom_font;
    src: url('/fonts/custom_font.ttf');
}

h1 {
    font-family: custom_font;
}



This works for all browsers except for Internet Explorer, because it does not support TrueType Fonts (TTF)[wiki] it uses Embedded OpenType (EOT)[wiki] fonts. To do that, you must first convert you TTF fonts into EOT.

Applications:
Free online converters:
Next you need to include both EOT and TTF fonts.

@font-face {
    font-family: custom_font;
    src: url('/fonts/custom_font.eot'); /* IE reads only this line */
    src: local(custom_font), url('/fonts/custom_font.ttf') format('opentype');
    /* since IE does not know the "local" keyword it will skip this line */
}
h1 {
    font-family: custom_font;
}



Browsers supported:


Sources: