Web Developer Tools

I rarely have to touch HTML and CSS the majority of the time - one of the things that comes with being an infrastructure engineer and dealing with back-end systems on a day to day basis. However, when I do need to build something, it is often that I don’t have all the pieces needed to do so. Perhaps I don’t have the images or text and have to use placeholders for them.

So here is a roundup of some useful bits and pieces that I sometimes use when I am building stuff online.

Lorempixel

Put simply, lorempixel provides placeholder images for your designs.For example:

It automatically slices the images to the correct size which rocks for quick mockups of layouts. The images used are all creative-commons (BY-SA) licensed, so there shouldn’t be a problem using them in your layouts for mockups (if you are selling the layouts, copying the images locally or putting them live on the net then please do understand the license terms)

This isn’t the only option for placeholder images though…

Placehold.it

Another alternative is placehold.it, the images are simple rectangles in various colours and with whatever text you desire, but for some layouts this is better since you can see at a glance which images still need replacing.

These don’t have the same limitations on licensing, they appear to be 100% free for whatever use you want to use them for, which is nice…

Images aren’t the only things you may want placeholder data for though…

Lipsum.com

Lorem ipsum text has been a staple placeholder text in the printing industry for the last few centuries. The basic idea is that by having text that is not human readable (few people read latin) then the user wont get hung up on the content and will pay more attention to the layout.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum turpis eu dolor aliquam non lacinia metus scelerisque. Mauris commodo lobortis commodo. Vivamus non lectus odio. Quisque suscipit est congue massa dictum at feugiat mi tincidunt. Aliquam risus metus, rhoncus sit amet elementum nec, dignissim at enim. Morbi lacinia sagittis lacus et auctor. Mauris ac metus metus, dictum pulvinar velit. Aliquam quis viverra est. Aenean at nisl non velit tristique venenatis. Maecenas semper, justo in condimentum ultricies, massa lectus dapibus nulla, ut cursus metus elit non quam. Pellentesque tristique eleifend lorem, id tincidunt purus varius quis.

This is great for static content, but what if you want to retrieve stuff dynamically?

Bacon ipsum

This is a humorous attempt at something a little different. Bacon ipsum is an api that produces JSON encoded content on demand. This is ideal where you are wanting to test pulling of content via AJAX. (linebreaks added for readability)

["Bacon ipsum dolor sit amet short loin biltong prosciutto
tenderloin jowl bresaola sausage rump. Jerky doner pastrami
venison, tail meatball sirloin biltong."]

I hope that you have found these site useful. I am aiming to produce a few more lists of useful sites soon.