10 Free and Fun Filler Text Generators

Even if you absolutely love your job as a web developer or designer, there are still times when we could benefit from adding a little more whimsy to our day. A great way to do this is with a free, fun, and harmless filler text generator. It’s a standard practice to use the old Latin Lorem Ipsum… text as a placeholder for actual test in a preliminary design or product, so why not spice it up a bit? What follows is a list of fun and free text generators that are sure to put a smile on the face of anyone who comes across them.

1. Bacon Ipsum

Screen Shot 2017-02-20 at 6.08.24 PM

Bacon Ipsum is one of the more popular alternate text filler generators. Basically what it does is insert the names of meats, cuts of meat, and meat dishes into an otherwise standard Lorem Ipsum passage.

2. Samuel L. Ipsum

Screen Shot 2017-02-20 at 6.10.46 PM

Instead of the standard Lorem Ipsum, this generator gives you text straight out of a Samuel L. Jackson movie. It’s definitely not suitable for work, but if you’re really determined to use it in a project, there’s a “lite” version of the plugin that generates text sans any profanities (there’s also a “classic” version that generates the quotes sprinkled in with some Lorem Ipsum, if you’re a traditionalist).

3. Cat Ipsum

Screen Shot 2017-02-20 at 6.15.06 PM

If you’re not a cat person then you might not appreciate this one. Cat Ipsum generates text that reads like a stream of consciousness from a cat. It also gives you the option to start it off with a little Latin or to just dive straight into the mind of a feline.

4. Yorkshire Ipsum

Screen Shot 2017-02-20 at 6.17.42 PM

This generator provides text meant to mimic the accent of a person from Yorkshire, England. The accent is famously hard to understand, so depending on where you’re from and you who are, Yorkshire Ipsum could be more difficult to decipher than classic Latin.

5. Hodor Ipsum

Screen Shot 2017-02-20 at 6.20.51 PM

Unless you’re a Game of Thrones fan, this text generator probably won’t interest you. The only word that the generator provides for you is, naturally, Hodor. But at least the passages are punctuated. Choose from the dropdown list how many Hodors you want — each Hodor corresponds to another paragraph of, yeah, Hodor.

6. Hipster Ipsum

Screen Shot 2017-02-20 at 6.23.21 PM

Hipster Ipsum generates paragraphs of text that only include hipster words — quinoa, listicle, venmo, bicycle, sriracha, williamsburg, etc.

7. Pirate Ipsum

Screen Shot 2017-02-20 at 6.26.18 PM

Pirate Ipsum will generate a block of text that is all in “pirate speak” — think a lot of “ayes,” “scaleywags,” and “mateys.”

8. Office Ipsum

Screen Shot 2017-02-20 at 6.27.55 PM

Office Ipsum generates a collection of text having to do with work and office environments. Basically, it’s a huge list of business buzzwords that you’ve probably heard a thousand times before in hundreds of meetings or conference calls.

9. Cheese Ipsum

Screen Shot 2017-02-20 at 6.29.53 PM

Because you can never have too much cheese in your life, this text generator gives you a list of so many different types of cheeses that your mouth will be watering just reading it. This isn’t just a list of snotty, high-brow cheese either — queso is listed right next to camembert.

10. Hairy Ipsum

Screen Shot 2017-02-20 at 6.31.58 PMThis generator is for those who want to add a little manly ruggedness to their projects. The generator will provide you with a list of words that are the pinnacle of masculinity — mustache, boxing champion, etc.

8 CSS Snippets for Animal Lovers

One of the most fun (and least practical, if you care about not wasting time) ways to use CSS is to create shapes and colors out of regular HTML elements to make them look like real things — like food, objects, or animals. Today we’re going to take a look at some of the best CSS snippets that can be used to turn boring old divs into creations that resemble real live animals. Some of them are even animated! If you love cats and CSS, then keep reading, this one is for you.

  1. Pure CSS Black Cat

Screen Shot 2017-03-07 at 4.24.41 PM

Let’s start with a black cat because it’s a classic. This black cat is created purely with CSS, and it even includes CSS animations so that its eyes and ears both move in sync with each other (the ears move up and down, the eyes move from left to right).

2. CSS Dog

Screen Shot 2017-03-07 at 4.28.04 PM

If you’re not a cat person, maybe this dog will appeal to you. This pure CSS dog silhouette is a sophisticated representation of man’s best friend. It even comes complete with a bone and a collar.

3. Teddy Bear

Screen Shot 2017-03-07 at 4.32.54 PM

This snippet doesn’t create a realistic looking bear, the bear resembles more of a teddy bear, but it’s still really cute and has a nice little animation (the little arm waves at you). Besides, realistic-looking bears are kind of scary anyway. The snippet is pure CSS — no JavaScript or jQuery required.

4. Dog and Ball

Screen Shot 2017-03-07 at 4.38.04 PM

This awesome animated CSS snippet features a very enthusiastic dog and his very enthusiastically wagging tail. In front of the dog is a brightly colored ball, which bounces when you click on it. This snippet is really well done. Not only is the quality of the animation great, but the overall CSS is aesthetically pleasing and realistic looking.

5. Loading Cat

Screen Shot 2017-03-07 at 4.45.13 PM

This cat snippet is probably slightly more useful than the other snippets on this list. The animated cat in this snippet also doubles as a loading effect. The cat moves around in a counter-clockwise circle that could easily be used in place of other circular loading animations that might be used in a project.

6. Rabbit

Screen Shot 2017-03-07 at 4.47.37 PM

This adorable bunny is created purely using CSS and even includes a really cool animated hover effect (when you hover over the bunny, balloons start to rise in the background).

7. SVG Bird

Screen Shot 2017-03-07 at 4.49.50 PM

SVG animations are super useful and versatile in creating any sort of shape and being able to animate it. In this case, the shape that’s been created is a bird, and the animation it’s achieving is a slight flapping of the wings (it’s eyes also move from left to right).

8. CSS Fat Cat

Screen Shot 2017-03-07 at 4.54.02 PM

One more cat for good measure. This pure CSS cat is, as you might be able to tell from the title, a little fat. He’s also wearing a suit because, why not? The cat does have a little animation — the tail is wagging, but based on the serious angry eyebrows this cat is sporting, it’s probably not in a happy way.

Optimize Images with Responsive Breakpoints Generator

Using one image for every possible viewpoint variation of a design (desktop, laptop, tablet, mobile, and all the non-standard browser window sizes in between) isn’t exactly ideal in terms of design and maintaining the image’s resolution. With the Responsive Breakpoints Generator, however, you can now use actual equations to tell your images when to break.

screen-shot-2016-11-01-at-1-36-58-pm

Instead of guessing or choosing arbitrary breakpoints for your images, you can use the Responsive Breakpoints Generator tool to come up with breakpoints that have been calculated based upon the original dimensions of your image at full size using the generator’s advanced algorithms.

screen-shot-2016-11-01-at-1-37-27-pm

The key to the algorithm being able to find suitable breakpoints is that it finds image width values and accompanying dimensions that offer reductions in file size. After the breakpoints have been created, the generator also provides you with an HTML img tag that lists all of the breakpoint values and the option of downloading a zip file with the original image sized down to all of the breakpoints.

screen-shot-2016-11-01-at-1-37-36-pm

This is a great tool to use, especially if you find yourself doing a lot of design or development for mobile. The tool is also open source, so you can use and/or modify it however you choose. Read more about how the algorithm works here.

5 Simple Ways to Speed Up Your Website

Looking for some new ways to optimize your code and increase the speediness of your site? Here are some simple ways to streamline your site that you may have overlooked.

1. Minimize HTTP Requests

HTTP requests are a big reason why a site’s load time can be so slow. The best way to reduce these requests is to really make sure your code is super efficient by only using one stylesheet, reducing the number of scripts you use, and don’t use unnecessary images (use CSS or HTML in place of images when at all possible).

2. Enable Caching

When a resource (stylesheets, scripts) is cached, that means it’s stored so that in can be easily and, most importantly, quickly accessed to save time when your site loads.

3. Minify Your Resources

Minifying your HTML, CSS, or JavaScript can really streamline your code and get rid of anything that might be there unnecessarily, which will definitely help with the speed of your pages. There are many tools available online that can be used to minify your HTML, CSS, and JS for free, so it’s definitely worth a shot to optimize your site’s speed.

4. Use Stylesheets Over Inline Styling

Not only is inline styling impractical and not dynamic, but it can also increase the size of your HTML files by a lot. Save yourself some load time and put all of your CSS in one stylesheet (but only use one to keep the HTTP requests down!)

5. Limit the Number of Plugins on Your Site

This one is our least favorite, but the fact is that plugins will add extra code to your site that can slow things down. Try to only use the most lightweight plugins possible, and delete any superfluous ones that you might not need.

Best Chrome Extensions for Developers

If you’re a web developer, chances are you prefer to develop and work on Google Chrome over any other browser. The reason for this is probably because not only is Google’s Developer Tools dashboard and console an invaluable tool to help with development, but also because of the many helpful and useful extensions that are available for Google Chrome that can help streamline the process of web development and design. Here’s a list of some of our favorites:

1. Marmoset

Screen Shot 2016-08-30 at 11.09.08 AM

This extension can be used to take beautiful, clean snapshots of your code that you can use for demos and tutorials.

2. CSS-Shack

Screen Shot 2016-08-30 at 11.13.41 AM

CSS-Shack is a web and desktop application that allows you to create layered styles (much like you would in photo editing software like photoshop) and then it’ll export the styles for you into a CSS file — great for designers who want to learn more about coding/CSS.

3. Font Playground

Screen Shot 2016-08-30 at 11.16.20 AM

Font Playground is a really useful extension that allows you to change the font on any live webpage to one of 1000+ Google Font options or to any fonts you have loaded locally on your machine. The extension is updated with new fonts often.

4. Window Resizer

Screen Shot 2016-08-30 at 11.21.17 AM

This one might be pretty obvious, but the Window Resizer extension will resize your browser window to help you optimize your designs for any device or viewport size. A similar function is built into Google Developer Tools, but with the extension you can actually resize the entire browser window to simulate the size of a different device.

5. ColorZilla

Screen Shot 2016-08-30 at 11.23.44 AM

ColorZilla is a really great tool that allows you to use a color dropper feature to identify any color on a live site — there’s no need to download any images or open PhotoShop, it can all be done on your browser window.