The CSS3 Test is a web-based test suite for finding out which CSS3 properties are supported by the browser being used.
It checks many features like backgrounds/borders, transitions, media queries, fonts, animations and much more.
Multiple testcases are ran on each element and this can be displayed by simply clicking to items.
The application is a must-bookmark to quickly check the issues on each property for shaping our styles accordingly.
When creating/designing a web page, we either start with the HTML, build the structure and style it later or style-while-structuring.
If you design with the 1st approach and bored of creating a CSS file with copy-pasting all those class + id names, here is a quick solution:
Bear CSS is a free-to-use web application that generates a stylesheet with all the elements, ids and classes from a given HTML file.
The app is mostly useful for projects with a pretty long HTML and it would be better if Bear CSS had asked which items to include inside the stylesheet just after the upload -feature request : )-.
HTML5 Please is an interactive compatibility chart of HTML5/CSS3 features to find out "in which browsers they are supported (or not)".
Using a smart search bar, it is possible to filter the results with browser or device support, type (HTML5 or CSS3 elements/properties) and more.
Every item is described shortly and an opinion on whether they should be used with fallbacks or polyfills (with links to them) are shared.
The site is simply a must-bookmark for anyone designing with the new web technologies and need a guide for quickly checking the support for each property/element.
Grid Builder is a web application handy for anyone looking to create a base HTML-CSS grid quickly.
On a canvas with a 3*4 grid, you simply drag 'n' drop the given grid units to create the desired template (like a 3 column design with a header and footer).
After that, just click the "Show me the code" button and get the HTML-CSS output of the designed grid.
P.S. You can also check out "The 892 unique ways to partition a 3 x 4 grid" article andget the PDF provided to find more about the 3*4 grids.
Building mobile web apps already became pretty easy with user-friendly and high quality frameworks
Mobjectify is a free web application which makes it so much simpler by offering an awesome web-based mockup builder.
The application enables us to create pages and add various web elements (like forms, buttons, content areas, footers, etc.) with few clicks.
It also offers multiple themes to choose from or you can create new themes. There is a live preview and results can be exported as a single HTML file anytime.
Mobjectify powers the mobile web pages with jQuery Mobile + its theme engine and only leaves the custom coding to you.
Fount is a free-to-use bookmarklet that instantly identifies fonts used in a web page.
Once activated, just click on any text and it displays the font name, size and weight in a growl-like notification.
It doesn't requires re-activation and any number of text can be clicked repeatedly. For disabling it, clicking the bookmarklet is enough.
Fount is a useful and tiny companion for typography inspiration and works in all major browsers.
CompareNinja is a free-to-use web application for generating comparison tables very quickly.
It simply requires several variables to get started like "the title of the tables" or "number of items to be compared" and then asks for the details of the comparison.
There are few skins provided to choose from, new columns and rows can always be added and the HTML output is generated instantly.
After that, you can always edit the source and improve the table further.
And, yes, creating tables is not hard but, sometimes, a quick method that doesn't require any web editor is handy.
If you own an e-reader, you probably agree that it is easier and less tiring to read there compared to devices without e-ink screens.
dotEPUB is a free-to-use web application (and it is open source) for converting web pages into e-books with a click to read them offline.
The application creates the e-books in EPUB format and comes in 3 flavors:
For further customization or any custom implementations, dotEPUB has an API as well.
P.S. The e-books created are supported in all major devices and e-readers.
The official W3C validator is a great place for checking if our website's HTML/XHTML is standards compliant. However, it can validate a single URL at a time.
W3Clove is a free to use web service which crawls any given website to generate the sitemap of it (or accepts sitemaps directly) and validates each URL through the W3C's validator.
The errors and warnings for each URL is stored and displayed as a list. And, it compiles a basic report of the most common errors and warnings as a summary.
W3Clove also remembers the recent checks you have made and present them to you quickly.
It seems like there is almost no limit in minimizing the weight of the web pages we are creating.
For the JavaScript part, 140byt.es (a tweet-sized, fork-to-play, community-curated collection of JavaScript) is sharing a set of very useful tips for saving bytes.
They are simply smart replacements for the functions, equations, loops, etc that we are regularly using.
An example from conditionals:
if(a)if(b)return creturn a&&b&&cA good number of bytes saved : ). The bytes saved are definitely minimal but trying to keep things small and focusing on this is definitely a good habit (but also it is worth considering that such usage can make the code unreadable for other coders).
