Show HN: Pick a better background pattern for your website

http://bradjasper.com/subtle-patterns-bookmarklet/

by Jasber • 13 years ago

347 52 13 years ago

Jasber8• 13 years ago

This is a little bookmarklet I built that lets you preview the great patterns from http://subtlepatterns.com directly on your website.

Feedback and comments welcome :)

technojunkie• 13 years ago

This is pretty amazing! If only I could apply this to something other than body for a certain site, I'd be set!

Jasber8• 13 years ago

Thanks, I'll add this as an advanced option since I agree the default "body" selector doesn't always work.

damncabbage• 13 years ago

This is really timely and really damn useful. The bookmarklet in particular is great. Nice work!

Bockit• 13 years ago

Thanks for sharing, this is cool.

Is it possible to preload the image before applying the style? The flashes to what I think is the normal bg image and image loading progress thing makes it harder to compare backgrounds.

Jasber8• 13 years ago

Absolutely––this is high on the priority list.

chrisbumgardner• 13 years ago

This rocks! I just added one to (one of) my for-fun side projects here http://quantumrandom.com/ after playing with the bookmarklet. Thanks for sharing this.

jjm• 13 years ago

Cool man! What in store for the future? More Patterns? Customizable anything?

jtokoph• 13 years ago

The bookmarklet tries to load the script and possibly other assets (I didn't check) from an insecure domain. This will cause any sane browser (I'm using Chrome) to block those assets from loading on any site served via https.

I would suggest you serve those assets via https if at all possible.

josephwesley• 13 years ago

This is awesome. I'm impressed with how easy it is to use.

abcd_f• 13 years ago

Don't forget to ping the SubtlePatterns guy as this takes away a fraction of his pageviews (the site is ad-supported) and piggybacks on his content. I'm sure he wouldn't mind, but it'd be a nice gesture to make.

Jasber8• 13 years ago

Already done––Atle (the owner) has been very helpful. But thanks for the suggestion.

holic• 13 years ago

Awesome! Much needed.

Though I'm seeing some requests blocked in Chrome (maybe AdBlock? or something else) when trying to use the bookmarklet on an HTTPS site.

ChadNYC• 13 years ago

Absolutely fantastic. Thanks for taking the time to develop.

Nowyouknow• 13 years ago

Hi! This couldn't have come at a better time as this is something on my ToDo list. However the bookmarklet isn't working on my site. The URL is www.randomdailyness.com. Any insight would be awesome!

jawns• 13 years ago

SubtlePatterns has been a great resource for me -- especially when I'm trying to turn something around really quick -- and this bookmarklet makes the process of selecting a good background MUCH faster. Thanks so much!

rpwverheij• 13 years ago

second that!

spellboots• 13 years ago

Looks useful, but unfortunately doesn't work on sites that require https.

Jasber8• 13 years ago

I'll get this corrected tonight–-thanks for pointing it out.

vinothgopi• 13 years ago

Really? I tried it on a few sites: Stripe, Bank of America and they all seem to work fine

hydralist• 13 years ago

having recently created a blog i was looking to test various backgrounds. i'll play around with it, cheers

benhebert• 13 years ago

I've been using subtlepatterns for a while now and have to say that you guys rock. Thank you for creating something awesome for the internet.

Jasber8• 13 years ago

Wanted to clarify this isn't officially from SubltePatterns. I reached out to Atle (the creator) and got his permission to create this.

He deserves 100% of the credit for the patterns, I just created the bookmarklet. And I agree, SubtlePatterns does rock :)

mcintyre1994• 13 years ago

This is great! Any chance of a random button to join next/previous?

Jasber8• 13 years ago

This shouldn't be a problem––at the very least I can add it as a keyboard shortcut.

bhauer• 13 years ago

I applaud the work and appreciate what you and the Subtlepatterns guys are doing. Thank you!

I do have a plea to users of some of these backgrounds. Perhaps I am a tinge obsessive compulsive, but the backgrounds that include uneven specks always make me think I have dust on my monitor that I need to wipe off. So when making a selection, might I ask you to choose a regular pattern rather than ones that are intended to look like spotty paper fiber? That is, of course, unless you are a paper products company. :)

dgreensp• 13 years ago

I find that any amount of random pixel noise just makes my screen look dirty. Unfortunately, most of the patterns have pixel noise.

It kills compression too if you use large tiles.

kijin• 13 years ago

Yes, pixel noise can be annoying. But it can be easily removed with a couple of clicks in Photoshop. Even simply resizing the pattern to 50% (some of the patterns are HUGE, and do you really need Retina resolution in your background texture?) will get rid of most pixel noise. Subtle Patterns are licensed under CC-BY-SA, so you can modify them as you see fit. It would be cool if OP's tool had the option to apply a few simple transformations to the patterns, such as CSS background-size.

BayAreaDev2• 13 years ago

I found it less usable than Subtle Patterns - reason is to switch to new background, I have to 'click', where as on Subtle Patterns I can scroll and see more backgrounds (given that it shows me only the rectangle of background instead of full site background).

If there is a way you can make it keyboard friendly, it would be great.

Jasber8• 13 years ago

Try your left/right keyboard keys––they should be very quick.

I'll try to make it more clear you can do this on the landing page.

BayAreaDev2• 13 years ago

Cool - will try it out!

dkhenry• 13 years ago

Really neat Bookmark. Commenting on this as a way of keeping my eye on it for later tonight.

lightyrs• 13 years ago

This is really useful, thank you!

I built this tool to test out Adobe webfonts. I'd like to convert it into a bookmarklet like you did here. Thanks for the inspiration!

http://harrisnovick.com/cygni (move mouse to left browser edge for menu).

BadCookie• 13 years ago

Just FYI, the "try it now" feature jumps you to the top of the page every time you click on the next/previous buttons. (You might not be handling the click event correctly.) Otherwise, I like it!

roryokane• 13 years ago

I thought the code might be missing `event.preventDefault()` (http://api.jquery.com/event.preventDefault/), but I see it in the code: https://github.com/bradjasper/subtle-patterns-bookmarklet/bl.... That’s the code for the bookmarklet – does the website use that exact same code?

n0mad01• 13 years ago

this is awesome

josephjrobison• 13 years ago

This is perfect.

jarcoal• 13 years ago

So useful! Thank you so much.

thesadwol• 13 years ago

subtlepatterns.com doesn't seem to be loading the css?

ngokevin• 13 years ago

Sick! Picking SubtlePattern backgrounds has always been a tedious process, will be using this across all my stuff.

jjjeffrey• 13 years ago

I'm going to try using this next time I find a web site that I can't read because the background and foreground mix together.

timrogers• 13 years ago

Looks like a pretty good tool. It's always a lot of effort to try out lots of different backgrounds, going through downloading the .zip archives and putting them into the CSS. This will definitely encourage me to actually experiment!

companyhen• 13 years ago

Swag.

justjohn• 13 years ago

You rock. This is crazy useful for trying out styles on stuff i'm building. I'd echo one of the suggestions here, there needs to be a way to apply to non-body elements.

potbota• 13 years ago

This is great, thanks for making it! Definitely will save me time.

robbles• 13 years ago

Really handy tool, thanks! I second the suggestion of allowing the background to be applied to another element.

mieubrisse• 13 years ago

Love it! The perfect combination of simple and helpful.

ollysb• 13 years ago

That's pretty sweet. Being able to give it a css selector though, now that would rock!

bradsmithinc• 13 years ago

Nice work Brad, This is really cool. Now I want to hook something like this up to an A/B testing framework and see if I can improve site metrics simply by swapping out the background. Adding some basic image manipulation (hue, saturation, blur, etc) on top of the patterns would be nice to, as I imagine that how most people use that resource.

spirit23• 13 years ago

Can't find a close button to hide the dialog box after clicking the bookmarked subblepatterns button

chinchang• 13 years ago

You'll make lot of lives easier :)

pkorzeniewski• 13 years ago

Great stuff, I love SubtlePatterns and use it quite often but usually it takes some time to try several patterns and find the right one, so this bookmarklet surely will come in handy :)

Show HN: Pick a better background pattern for your website

Related Stories