What we have for you today is 50 web-based apps and tools that will either offer, in one way or another, a time-saving solution to many modern development issues or will help speed up your working day.
The post has been split into into the following categories: CSS, JS & HTML Tools, Web Editors & Playgrounds, Responsive Design Tools, and Just Useful.
So, even if you didn’t know you were looking for something today, we guarantee that you will find something really useful here.
CSS, JS & HTML Tools
SpritePad – Create and Edit CSS Sprites
SpritePad will create your CSS sprites within minutes. Simply drag & drop your images and have them immediately available as a PNG sprite plus the CSS code.
On/Off Flipswitch HTML5/CSS3 Generator
A beautifully designed and super-easy-to-use tool for generating pure CSS3 on/off flipswitches with optional animated transitions.
Adobe Edge Free Web Fonts
Adobe Edge Web Fonts, powered by Typekit, features hundreds of free web fonts, including some fonts from the Adobe library as well as a large collection of open source fonts.
Form Builder/Generator
Form Builder, as its name suggests, is a useful tool for creating forms. It gives you the freedom to customize your form in any way that you can imagine with its multitude of options.
Css2Less – CSS to LessCSS converter
Css2Less will quickly convert your old CSS files to fresh new LESS files. As simple as copy/paste.
CSSComb – Sort CSS Properties in a Specific Order
CSSComb is an intelligent tool that will sort the CSS properties from your stylesheet and, from the settings, allows you to sort them in a specific order. Check this video for a quick overview:
cssUpdater – Live Sync CSS Changes
cssUpdater is a must for any designer. It will sync any CSS changes made with FireBug with your actual local/online CSS files. This way when you reload your site, your layout is preserved.
CSS3Gen – Generate Useful Snippets of CSS3
CSS3Gen allows you to easily generate useful snippets of CSS3 and copy them straight into your projects. There are tools for generating border-radius, box-shadow, text-shadow and gradients.
CSS load.net – Loading CSS Spinners and Bars Generator
Loading CSS Spinners and Bars Generator →
Typecast
Typecast lets you design and experiment, all in the browser, with web fonts and real content. You can try the most popular web fonts all in one place, including all weights and compare font combinations.
Fontello – Easy Iconic Fonts Composer
Fontello lets you combine iconic webfonts for your own project. With fontello you can shrink glyph collections (minimizing font size) and merge symbols from several fonts into a single file. You can choose from four icon fonts, they are: Entypo, Font Awesome, Iconic and Brandico.
HTML5 Please
HTML5 Please offers recommendations for polyfills and implementation so you can decide if and how to put each of the HTML5 features to use.
Stylie – A Graphical CSS Animation Tool
Stylie is an app that lets you graphically generate CSS3 transform animations.
Colllor – Color Palette Generator
With Colllor it is much easier to generate a consistent web color palette so you have a common look and feel throughout your design. All the alternative proposals produced by Colllor derive from the same color and they all have a common denominator sharing hue, lightness or saturation values.
Ribbon Builder/Generator
Stitches – An HTML5 Sprite Sheet Generator
Stitches is a really easy-to-use HTML5 sprite sheet generator. Simply drag and drop image files onto the app, click "Generate" and your sprite and stylesheet will be good to go.
Stitches – An HTML5 Sprite Sheet Generator →
HTML5 Template Generator
JavaScript Console – Debugging JavaScript Tool
JSconsole is a simple tool for debugging Javascript and remote debugging mobile web apps.
Bootstrap Generator – Twitter Bootstrap Generator
The Twitter Bootstrap Generator will allow you to quickly kick-start your Twitter Bootstrap project the way you want. Simply alter the options and click "Generate" to get your compiled Bootstrap CSS file.
Minify and GZip Compress JavaScript & CSS
Minify and GZip Compress JavaScript & CSS →
SnipSave – Save Code Snippets Online
SnipSave lets you save snippets of code online for future reference. SnipSave features a very easy-to-use interface where you can quickly create, edit and delete code snippets.
ZenBG
ZenBG is a small web app that allows you to create backgrounds for websites or desktops. It includes a large collection of textures – wood, rust, paper, concrete and more – which can be combined with linear-gradients or colors to create a wide assortment of themes.
CSS FilterLab
ZenBG is a small web app that allows you to create backgrounds for websites or desktops. It includes a large collection of textures – wood, rust, paper, concrete and more – which can be combined with linear-gradients or colors to create a wide assortment of themes.
Web Editors & Playgrounds
Intype Text Editor
Intype is a fast and easy text editor. It has smart select & edit, snippet insertion and management, auto-paired characters, fast syntax highlighting and code-coloring themes. Snippets, themes or even language grammars can be changed or added in the comfy extension editor.
Codeanywhere – Online Code Editor
Codeanywhere is a code editor in a browser with support for all popular web formats including HTML, PHP, JavaScript, CSS, and XML.
EpicEditor – An Embeddable JavaScript Markdown Editor
EpicEditor is an embeddable JavaScript Markdown editor with split fullscreen editing, live previewing, automatic draft saving, offline support, and more.
Dirty Markup – Tidy and Beautify your HTML, CSS, and JS
Dirty Markup combines the power of HTML Tidy, CSS Tidy, JS Beautify, and the Ace editor to effortlessly clean up your messy code. Just paste your code into the editor and press “clean”.
dabblet – A Playground for Testing CSS and HTML
dabblet is an interactive playground for quickly testing snippets of CSS and HTML code. It uses -prefix-free, so that you won't have to add any prefixes in your CSS code.
Liveweave – HTML5, CSS3 & JavaScript Playground
Liveweave, similar to JSFiddle and Tinkerbin, is a new playground for developers and designers to test HTML, CSS and Javascript.
CodePen
CodePen is useful for showing off your work, troubleshooting, demonstrating bugs, or anything else you can think of.
Shiny Demos
Shiny Demos is a growing set of demos of the latest Open Web Standards, made by the Opera developer relations team.
Moqups – HTML5 App For Creating Wireframes
Moqups is a HTML5 web app for creating wireframes, mockups or UI concepts.
Moqups – HTML5 App For Creating Wireframes →
MockNow – An Online Wireframing Sharing Tool
Responsive Design Tools
Responsify.it – A Responsive Template Generator
Responsify allows you to quickly generate your own responsive grid framework and customise it (how many columns, the amount of gutter width etc.) as you need.
RWD Calculator – Turning Pixels into Percentages
RWD Calculator is a simple calculator to help turn your PSD web template into the start of your responsive website.
Screenqueri.es – Responsive Design Testing Tool
Screenqueri.es is a responsive design testing tool. It allow you to test your responsive design on 30 different device resolutions presets or check with custom resolution by resizing window.
responsivepx – Find that Tricky Breakpoint
responsivepx is a responsive web design testing tool where you enter the URL to your site (local or online) and use the controls to adjust the height and width of your viewport to find the exact breakpoint widths in pixels.
Gridpak – The Responsive Grid Generator
Gridpak is a generator for creating a responsive grid system. Use the simple interface to design your grid and then let Gridpak do the heavy lifting by generating PNGs, CSS and JavaScript. Check out this video for a detailed overview:
Just Useful…
Mixpanel Flow
Mixpanel Flow is a simple and free app that works out where your users go and when they leave, all in real-time. Instead of a line graph or a table, you get a diagram of the actual paths people take as they browse your site.
WP Remote
WP Remote allows you to monitor and manage all of your WordPress powered sites from one central location.
Payhip
Payhip is an e-commerce platform that enables anyone to sell ebooks directly to their fans and followers using just a link. You can simply upload your product, enter the price and start selling on Twitter, Facebook or your own website.
Plunk
Plunk is a handy tool for finding out if your designs work within a mobile setting. You can create click tests that give immediate feedback and efficiently visualize where mobile users respond.
Erlywarn Site Monitoring
Erlywarn is a web service that will send you instant notification whenever your website is responding unusually allowing you to minimize your downtime. Not free, although it is only $1 a month.
Icon Builder/Generator
Timeline JS
Timeline is a useful tool for creating timelines that are easy and intuitive to use. It can pull media from Twitter, YouTube, Flickr, Vimeo, Google Maps and SoundCloud.
Termsfeed Privacy Policy Generator
Termsfeed Privacy Policy Generator →
facturandum – Online Invoicing System
facturandum is a beautifully designed and easy-to-use online invoicing service with all of the features you would ever need if you are a freelancer.
Word2cleanhtml – Convert Word Documents to Clean HTML
Word2cleanhtml cleans up HTML pasted from Word documents. It applies filters to fix various things that Microsoft Office puts in its HTML and gives you a well formatted result that you can paste directly into a web page or content editing system.
TagMyDoc
TagMyDoc offers a free cloud service that allows you to add a tag to a document of practically any format, scan it and retrieve it instantly through any mobile device. Check out this video for an overview:
0 yorum:
Yorum Gönder