Timesaving Tools and Services for Web Developers: "
Web developers should always be abreast of the latest news. And to make their work easier and to help in saving their time a lot of talented web developers from all around the world always try to bring some new decisions and tools. To your attention, we would like to showcase some fresh timesaving tools among which you’ll find useful services, resources, generators and frameworks that you might find very interesting.
HTML/CSS Tools
Initializr
Initializr by Jonathan Verrecchia is an HTML5 templates generator based on HTML5 Boilerplate, a powerful HTML5 template created by Paul Irish and Divya Manian. Initializr – simple way to generate a clean customizable template based on Boilerplate.
HTML5 Boilerplate
HTML5 Boilerplate – professional and very powerful tool for web development. It’s HTML/CSS/JS template with best hacks for cross-browser compatibility, true HTML5( you can use new tags right now), support for mobile browsers, special classes for Internet Explorer and many other features!
HTML Email Boilerplate
This website and its sample code creates a template of sorts, absent of design or layout, that will help you avoid some of the major rendering problems with the most common email clients out there. HTML Email Boilerplate will provide some helpful examples and snippets that will keep your email design rendering as true-to-form as possible. Download
CSS shadow generator
A fantastic CSS shadow generator free for use and with tons of features, including more than 8 shadow styles, opacity, blur and position handlers, real-time preview of both design and source code. The generator features a very intuitive control section where you can switch between the different shadow styles and adjust their position, opacity and blur values.
CSSWARP
CSS3Warp is a proof of concept: create Illustrator like “warped” text (text following an irregular path) with pure CSS and HTML. CSS3 brings new text-transform options: rotation, skew, matrix, transform-origin… By applying the right transformations to every single letter it is possible to create the illusion of text following a path. Type your text into the webform, click “Warp it!”, then alter the path as you like. You can attach your text to a circle or a bezier. Add or delete points, or change position, angle and radius of the circle. When your done, click “Generate code”. Copy the CSS and HTML into your document.
CSS Lint
CSS Lint is a tool to help point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.
CSS3 Pie
CSS3 Pie makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features. Download
Schema.org
This site provides a collection of schemas, i.e., html tags, that webmasters can use to markup their pages in ways recognized by major search providers. Search engines including Bing, Google and Yahoo! rely on this markup to improve the display of search results, making it easier for people to find the right web pages.
CSS Font Stack
Google Swiffy
Swiffy converts Flash SWF files to HTML5, allowing you to reuse Flash content on devices without a Flash player (such as iPhones and iPads).
Fractal
A simple HTML and CSS Validator for email designers and marketers.
Spritecow
Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css.
CSS3 Buttonize Framework
The Light-Weight, Flexable Instant Button Framework.
Normalize.css
Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards.
CSS3 Simple Shapes – Cheat Sheet
Textify.it
Textify.it visualizes images using text. Lots of text. Drag and drop images on to the page to start, every image produces a unique result!
Layerstyles
This handy tool lets you add drop shadow, inner shadow, background, border and border radius and generates cross-browser CSS code with Photoshop-like interface.
css-x-fire
Allows editing CSS properties in the IDE from Firebug CSS editor. Download
Skeleton
Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.
Kotatsu
Kotatsu – a simple html table generator
Spritemapper
Spritemapper is an application that merges multiple images into one and generates CSS positioning for the corresponding slices.
Ultimate CSS Gradient Generator
A powerful Photoshop-like CSS gradient editor from ColorZilla.
Fructose
Fructose is a subset of Ruby that’s designed to be compiled into PHP 5.x. The generated code should run on any PHP version above 5.0. Most major Ruby features are supported, including operator overloading and blocks.
FFFFALLBACK
A simple tool for bulletproof web typography.
Laker
Laker is a compendium of files, frameworks, styles and tips for designing digital publications in HTML5.
Holmes
Holmes is stand-alone diagnostic CSS stylesheet that can highlight potentially invalid, inaccessible or erroneous HTML(5) markup by adding one class.
LiveReload
LiveReload applies CSS and JavaScript file changes without reloading a page + automatically reloads a page when any other file changes (html, image, server-side script, etc).
Vogue
Auto-reload stylesheets whenever CSS files are saved.
HTML5 formbuilder
Simple generator for creating html5 forms.
CSS3menu.com
Creating a nice looking menu no longer needs all the code and time it use to, thanks to CSS3. Using this FREE CSS3Menu you can create great looking buttons using just CSS3 in a few clicks.
CSS3 Button Maker from css-tricks.com
CSSPrefixer
You hate writing vendor prefixes for all browsers? Just let CSSPrefixer do it for you!
CSSsitemap System
CSS Pivot
Add CSS styles to any website, and share the result with a short link. Invite others to submit improvements for your website.
PCSS
Shortcut-oriented Server-side CSS3 Preprocessor.
Needle
Needle is a tool for testing your CSS with Selenium and nose. It checks that CSS renders correctly by taking screenshots of portions of a website and comparing them against known good screenshots. It also provides tools for testing calculated CSS values and the position of HTML elements.
Less Boilerplate
Lorempixum
Placeholder Images for every case.
CSS3 Generator
320 and up
‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Try this page at different window sizes and on different devices to see it in action.
CopyPasteCharacter.com
CopyPasteCharacter – handy tool for copying & pasting those HTML entities.
Html-ipsum
Lorem ipsum snippets with HTML markup for test your CSS.
CSS Prism
Enter The url of any CSS file to view and modify its color spectrum.
Gridless
Gridless is an awesome HTML5 and CSS3 framework for making responsive, cross-browser websites with beautiful typography.
JavaScript Tools and Libraries
Modernizr 2
Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.
FitText
FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
IE7.js
IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.
Paper.js
Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.
Boombox.js
Use HTML5
Popcorn.js
The HTML5 Media Framework
Treesaver.js
Bibliotype
Bibliotype is a (very) simple HTML, CSS and JS based library for rapid prototyping long-form typography and reading on tablets.
HIGHLIGHT.JS v6.0
Highlight.js highlights syntax in code examples on blogs, forums and in fact on any web pages. It’s very easy to use because it works automatically: finds blocks of code, detects a language, highlights it.
jquery.easie.js
Css3-like easings for jQuery animations.
Adapt.js
Adapt.js is a lightweight (845 bytes minified) JavaScript file that determines which CSS file to load before the browser renders a page. If the browser tilts or resizes, Adapt.js simply checks its width, and serves only the CSS that is needed, when it is needed.
Live.js
Say goodbye to Alt-Tab. Live.js makes sure you’re always looking at the latest version of the page you’re working on, whether you’re writing HTML, CSS or Javascript.
Microjs
Micro-frameworks are definitely the pocketknives of the JavaScript library world: short, sweet, to the point. And at 5k and under, micro-frameworks are very very portable. A micro-framework does one thing and one thing only — and does it well. No cruft, no featuritis, no feature creep, no excess anywhere.
Ninja UI
A jQuery plugin enabling beautiful web interface objects efficiently and unobtrusively.
Morf.js
Morf.js – Custom Easing Functions for CSS3 Transition.
Simple Overlay
A jQuery Plugin for easily adding lightweight, flexible overlays to your projects. Use custom effects, customize using CSS hooks, define custom callbacks for further action, take advantage of CSS3 and more.
Grids
Columnal
The Columnal CSS grid system is a “remix” of a couple others with some custom code thrown in. The elastic grid system is borrowed from cssgrid.net, while some code inspiration (and the idea for subcolumns) are taken from 960.gs.
Griddle.it
A clean and simple way to align your website layout. No complex grid frameworks necessary.
Susy
Susy is different – a simple grid system that is fully customized to your markup, your grid, your designs, the way you want them.
Modulargrid
Gridcalculator
Javascriptgrid
Just drag the snipplets into your bookmarks bar, open your URL and click the bookmark.
Tinyfluidgrid
A Fluid Grid Calculator by Harry Roberts
Bonus
Chop
Nice service that allows you to quickly and easily paste and share a piece of code. Just copy and paste the lines in question, add your notes and share them with a unique URL.
GeneratePrivacyPolicy.com
With GeneratePrivacyPolicy.com you may create professional privacy policies with our user friendly tools. Privacy policy agreements are tailored specifically for your website, your business and your requirements.
Author: AndrewG
"