Front End Web Dev Online Tools

While I was cleaning up my bookmarks I remembered lots of nifty online tools I have used over the previous years while developing web applications. You will probably know many of these tools already, or have the same functionality built-in in your favorite text editor, but it is always useful to have a quick alternative just in case.

Code creation and testing on the browser

• JSFiddle – Test and share JavaScript, CSS, HTML or CoffeeScript online.
• CodePen – Front End Developer Playground & Code Editor in the Browser.

Responsive Design & Cross-Browser Testing

• BrowserStack – Test your website for cross browser compatibility on real browsers. Instant access to multiple desktop and mobile browsers.
• Modern IE – Free browser testing tools, cross platform testing tools and virtual machines from the Microsoft Internet Explorer team.
• Screenify by Quirk Tools – Test your website on any screen size including desktops, tablets, televisions, and mobile phones.
• Responsivator – View & share how sites look at different screen sizes.
• deCSS3 – A bookmarklet for testing your graceful degradation.

Color Scheme Designers & Color Pickers

• Paletton – The Color Scheme Designer
• Adobe Color CC – (Former: Adobe Kuler) Create color schemes with the color wheel or browse thousands of color combinations from the community.
• HSL Color Picker – Pick a color via its HSL values, get its HEX and RGB values too.
• Flat UI Colors – A click-and-copy collection of modern Flat UI colors.

Various Generators

• Initializr – Start an HTML5 Boilerplate project in 15 seconds!
• Patternify – CSS Pattern Generator.
• Stripe Generator – Stripes Background Designer (it produces PNG files).
• Mother Effing Text Shadow – CSS text shadow generator.
• Twitter Bootstrap Button Generator – Generate buttons for twitter bootstrap v3.
• CSS Triangle Generator – A generator for pure CSS triangle.
• Ultimate CSS Gradient Generator – A powerful Photoshop-like CSS gradient editor from ColorZilla.
• Grandientoo – Easy CSS3 Gradient Generator.
• Noise Texture Generator – Generate your noise texture pattern easy and fast within 3 steps!
• Ceaser – An interactive CSS easing animation tool. It lets you build any kind of ease you want, and comes with many of the Penner Easing Equations.
• IcoMoon – It provides a package of vector icons, along with a free HTML5 app for making custom icon fonts. Browse among thousands of pixel perfect icons or import your own vectors.
• MapBuildr – Enrich your website with a Google Map.

Image Tools

• Bitmap to Vector Converter – Easily convert Bitmap images to clean vector art online.
• Compress PNG – Use this PNG compression and optimization tool to compress PNG images for your sites and applications. It will make your website running faster and use less bandwidth.
• Pixlr – Online Photo Editor
• VintageJS – Create stunning photos with a vintage effect.

Miscellaneous

• Web Developer Checklist – (+Chrome extension) The ultimate checklist for all serious web developers building modern websites.
• CSS Explain – Analyzes any css selector.
• MinifyCSS – Online CSS Compressor & Minifier.

In case you know any more tools that work just fine for you, please message me so I can further enrich the list.