Sharing is Caring: Let's See Your Favorite Single Purpose Web Resources & Tools

Support
#1

Have you ever stumbled across a web page or app that does one thing really well and thought to yourself, “I didn’t even realize I needed this until just now?” I love finding those destinations that serve a singular purpose, which can either be a great resource to reference something or help kickstart inspiration for a project.

For instance, with regards to designing and color, it could be a curated app to get your creative juices flowing:

Or it could be a functional tool that helps you adhere to a particular standard:

Or if you’re a developer, it could be a fun resource that helps you solve common JavaScript tasks without the aid of jQuery (unthinkable, I know).

What are some of your favorite single purpose destinations that you like to frequent?

10 Likes
#2

Does this count?

http://www.nooooooooooooooo.com/

8 Likes
#3

Just in case it doesn’t, I don’t know where I’d be without my tinypng.

6 Likes
#4

Yes, that absolutely counts.

#5

Javascript in WordPress without jQuery? Blasphemy :wink:

Lightweight Icon Fonts for sites: http://fontello.com/

Animations for non-CSS demigods: http://animista.net/

3 Likes
#6

Need placeholder text and like cats? Then you need: http://www.catipsum.com/

Alternatively, need placeholder images and like cats? You need: https://placekitten.com/

Don’t like cats? You need: a cat.

7 Likes
#7

www.codepen.io

1 Like
#8

A couple of simple colour resources to ensure brand and website/interface consistency (adhering to Material Design):

materialui.co/colors
sankk.in/material-mixer/

3 Likes
#9

A go-to guide to keep your web copy consistent and inviting to read:

material.io/guidelines/style/writing

3 Likes
#10

I’m crazy about centralized documentation. The tool I use today is http://devdocs.io/, with tons of useful frameworks/libraries docs/apis that can be cached for ofline browsing.

4 Likes
#11

A simple and easy to use serialized data editor, https://serializededitor.com/ a great interface and nothing to download which is an added bonus!

Perfect for those times when you accidentally destroy page builder data when migrating.

1 Like
#12

http://thepatternlibrary.com/
https://www.toptal.com/designers/subtlepatterns/

1 Like
#13

Also enjoy @michaelbourne’s blog https://xthemetips.com/ :wink:

2 Likes
#14

There are a handful of regular expression tools out there, but I keep coming back to this one:

#15

Here is some more resources.

reate and export CSS code for a custom box with an arrow extending out from the side. Great for tooltips, flyouts and the like.
http://www.cssarrowplease.com/

CSS Triangle Generator
http://triangle.designyourcode.io/

#16

For time saved when doing small projects (large projects handle this through SASS on a gulp build) -> https://autoprefixer.github.io

1 Like
#18

http://bennettfeely.com/clippy/ - For fast clipping paths

#19

My2Cents :

Gradient generator : http://www.colorzilla.com/gradient-editor/
Text-shadow generator : https://css3gen.com/text-shadow/
Box shadow generator (yeah, lot of generator, I’m lazy) : https://css3gen.com/box-shadow/
Free flex guide (nice and fun to learn) : http://geddski.teachable.com/p/flexbox-zombies
Regex tester : already posted

This page is awesome…

#20

Just found it today
Chrome Extension Emmet Re:view
Link
Pretty much works like Device Toolbar in Dev tools, but lets you have side by side comparison. Quite handy.

1 Like
#21

Came across this site for image optimisation the other day