

Show HN: Pick a better background pattern for your website - Jasber
http://bradjasper.com/subtle-patterns-bookmarklet/

======
Jasber
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 :)

~~~
abcd_f
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.

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

------
jawns
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
second that!

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

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

------
timrogers
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!

------
BadCookie
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
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...](https://github.com/bradjasper/subtle-patterns-
bookmarklet/blob/master/bookmarklet/bookmarklet.coffee#L134). That’s the code
for the bookmarklet – does the website use that exact same code?

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

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

~~~
Jasber
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.

~~~
BayAreaDev
Cool - will try it out!

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

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

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

------
pkorzeniewski
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 :)

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

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

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

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

~~~
Jasber
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 :)

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

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

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

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

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

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

------
mieubrisse
Love it! The perfect combination of simple and helpful.

------
chinchang
You'll make lot of lives easier :)

------
jarcoal
So useful! Thank you so much.

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

------
josephjrobison
This is perfect.

------
n0mad01
this is awesome

------
companyhen
Swag.

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

