January 23, 2012 at 09:36A selection of html / javascript / css tools and libraries from SmashingMagazine
- Transfer
Designing web interfaces is not an easy task. Moreover, it seems to be easy to start, but to achieve perfection is truly problematic. There are so many things to consider. Just a ton of settings and nuances in which it is easy to get confused and do something wrong. Fortunately, developers and designers tend to simplify this difficult work and constantly invent all sorts of tools to do more and better in the same time, and most importantly, not get bogged down in the details and focus on something more important.
Many convenient tools found by the team of the popular online magazine SmashingMagazine are listed under the cut
HTML Email Boilerplate A
site containing a considerable number of templates and examples for creating messages sent by e-mail, avoiding most of the problems with displaying these messages in popular client applications.
Initializr
HTML 5 Template Generator. Choose a sample, raw js or jQuery, specify the level of compatibility of your future application with devices, server settings and get a ready-made template from which you can start your project.
Layer Styles
A simple and fairly effective tool for creating cross-browser CSS effects (such as shadow, background, borders with rounded corners). It has a user interface similar to similar tools in graphic editors.
Mobile boilerplate
A template for creating web applications for a wide range of mobile devices, from the most modern smartphones to the old models on Blackberry, Symbian and IE Mobile.
Kotatsu
A simple HTML table designer. Anyone interested in a similar list generator can also take a look here .
Vogue A
local server based on Node JS, which avoids the problem of constantly clearing the browser cache when editing css.
LiveReload
A tool that automatically applies CSS / JS changes to browsers such as Safari and Chrome and reloads the entire page if the HTML changes. You can also take a look at the alternative tool Live.js
media.smashingmagazine.com/uploads/2011/06/useful-tools-141.jpg
css-x-fire
A tool for editing CSS rules in a convenient IDE and without having to reload the browser page during debugging.
Ffffallback
A tool for testing your web applications for compatibility with various font sets.
Less-Boilerplate
CSS Boilerplate rewritten to LESS
Needle v0.1a1 Layout
testing tool. Takes screenshots and allows them to compare them with other screenshots. It also provides tools for testing the calculated CSS rules, as well as the positions of HTML elements on the
inuit.css page .
Another CSS framework in which the author tried to collect the best practices he had accumulated in a single file.
Spritemapper
CSS sprite generator. Combines a large number of images into one and generates CSS rules for displaying them separately. This technique reduces the number of connections to the server needed to load the page, which can reduce the total time of this download.
CSSsitemap System
An interesting project to create a sitemap on css
Normalize.css
The result of the work of Jonathan Neal and Nicholas Gallagher on reset.css. Instead of traditionally resetting all browser default settings, they offer to reset only those that interfere with the use of the same CSS rules for all browsers, and save other convenient defaults.
Holmes
A set of CSS rules that allows you to highlight blocks on a page with a dubious, erroneous, or unstable layout. It is proposed to use with a bookmarklet.
Zen Coding A
plug-in for a large number of code editors that offers faster typing and editing of CSS rules with special abbreviations.
CSS Stress Testing and Performance Profiling
A tool for testing performance and profiling CSS.
CSS Crush
PHP preprocessor for CSS avoids the need for vendor prefixes, as well as some other verbose constructs when creating CSS rules. You can also take a look at PCSS "> this similar CSSPrefixer tool
Automation tool for adding vendor prefixes to CSS.
Modernizr 2
The second version of the wonderful framework that allows you to use the delights of HTML5 and CSS3 without the risk of losing users of not very fresh browsers.
yepnope.js A
library that allows you to load only the js files you need on this page.
FitText
Module for jQuery, flexibly changing the font size for convenient placement of the same text on a wide range of devices from the small screen of a mobile device to a professional thirty-inch monitor.
jQuery Waypoints
The module that allows you to execute certain code at the moment when the user scrolls the page to a specific element.
jQuery Plugin Boilerplate
A handy wrapper for writing plug-ins for jQuery
ligature-js
Function to add typographic ligatures to text
Placeholder jQuery Plugin / Polyfill
Module for supporting HTML5 placeholder attribute in old or not supporting this property browsers.
StronglyTyped
Trying as cross-browser as possible to add more stringent typing of variables in javascript
Kaffeine
Syntactic sugar for writing complex javascript applications. Compiled into regular javascript code.
Crossroads.js
The mechanism for calling certain js functions depending on specific URLs is similar to the similar mechanisms in server frameworks such as Rails, Pyramid, Django, CakePHP, CodeIgniter, etc.
Hivelogic
The library allows relatively safe (in terms of parsing by spam programs) to publish e-mail on your site.
JavaScript Garden
Js code analyzer that allows even inexperienced users to eliminate frequently occurring errors in using javascript even before the stage of code publishing.
Syntaclet
Bookmarklet for highlighting js syntax in html pages
Bookmarkleter
A tool for converting js code into a bookmarklet with the possibility of reformatting (removing extra spaces, replacing unicode characters, etc.)
The JavaScript Grid
A grid generator with a simple bookmark viewer mechanism.
Grid Calculator
Convenient grid designer with import into Adobe Illustrator or Adobe Photoshop
GridCalc Grid
Calculator Calculator of possible grid options for given page width, block width and gap between blocks, as well as a code generator for selected options.
Modular Grid Pattern Grid
generator for graphic editors. There is also a corresponding extension for Photoshop
Susy
Rails framework that allows you to create a grid, as flexible as possible to adapt to your layout, design and wishes.
Griddle.it
A simple and convenient mechanism that allows you to generate the background of the page on which the rulers will be applied to align the elements of the site design.
ASCII Pronunciation Rules for Programmers
Website - ASCII Pronunciation Guide for English Names.
PS: Not all the tools described in the original article are included in the translation - some simply did not work, some seemed to me completely inappropriate here. But the translations turned out to be quite a lot, so respect to those who got to these lines :-)
Many convenient tools found by the team of the popular online magazine SmashingMagazine are listed under the cut
CSS and HTML Tools
HTML Email Boilerplate A
site containing a considerable number of templates and examples for creating messages sent by e-mail, avoiding most of the problems with displaying these messages in popular client applications.
Initializr
HTML 5 Template Generator. Choose a sample, raw js or jQuery, specify the level of compatibility of your future application with devices, server settings and get a ready-made template from which you can start your project.
Layer Styles
A simple and fairly effective tool for creating cross-browser CSS effects (such as shadow, background, borders with rounded corners). It has a user interface similar to similar tools in graphic editors.
Mobile boilerplate
A template for creating web applications for a wide range of mobile devices, from the most modern smartphones to the old models on Blackberry, Symbian and IE Mobile.
Kotatsu
A simple HTML table designer. Anyone interested in a similar list generator can also take a look here .
Vogue A
local server based on Node JS, which avoids the problem of constantly clearing the browser cache when editing css.
LiveReload
A tool that automatically applies CSS / JS changes to browsers such as Safari and Chrome and reloads the entire page if the HTML changes. You can also take a look at the alternative tool Live.js
media.smashingmagazine.com/uploads/2011/06/useful-tools-141.jpg
css-x-fire
A tool for editing CSS rules in a convenient IDE and without having to reload the browser page during debugging.
Ffffallback
A tool for testing your web applications for compatibility with various font sets.
Less-Boilerplate
CSS Boilerplate rewritten to LESS
Needle v0.1a1 Layout
testing tool. Takes screenshots and allows them to compare them with other screenshots. It also provides tools for testing the calculated CSS rules, as well as the positions of HTML elements on the
inuit.css page .
Another CSS framework in which the author tried to collect the best practices he had accumulated in a single file.
Spritemapper
CSS sprite generator. Combines a large number of images into one and generates CSS rules for displaying them separately. This technique reduces the number of connections to the server needed to load the page, which can reduce the total time of this download.
CSSsitemap System
An interesting project to create a sitemap on css
Normalize.css
The result of the work of Jonathan Neal and Nicholas Gallagher on reset.css. Instead of traditionally resetting all browser default settings, they offer to reset only those that interfere with the use of the same CSS rules for all browsers, and save other convenient defaults.
Holmes
A set of CSS rules that allows you to highlight blocks on a page with a dubious, erroneous, or unstable layout. It is proposed to use with a bookmarklet.
Zen Coding A
plug-in for a large number of code editors that offers faster typing and editing of CSS rules with special abbreviations.
CSS Stress Testing and Performance Profiling
A tool for testing performance and profiling CSS.
CSS Crush
PHP preprocessor for CSS avoids the need for vendor prefixes, as well as some other verbose constructs when creating CSS rules. You can also take a look at PCSS "> this similar CSSPrefixer tool
Automation tool for adding vendor prefixes to CSS.
Javascript tools
Modernizr 2
The second version of the wonderful framework that allows you to use the delights of HTML5 and CSS3 without the risk of losing users of not very fresh browsers.
yepnope.js A
library that allows you to load only the js files you need on this page.
FitText
Module for jQuery, flexibly changing the font size for convenient placement of the same text on a wide range of devices from the small screen of a mobile device to a professional thirty-inch monitor.
jQuery Waypoints
The module that allows you to execute certain code at the moment when the user scrolls the page to a specific element.
jQuery Plugin Boilerplate
A handy wrapper for writing plug-ins for jQuery
ligature-js
Function to add typographic ligatures to text
Placeholder jQuery Plugin / Polyfill
Module for supporting HTML5 placeholder attribute in old or not supporting this property browsers.
StronglyTyped
Trying as cross-browser as possible to add more stringent typing of variables in javascript
Kaffeine
Syntactic sugar for writing complex javascript applications. Compiled into regular javascript code.
Crossroads.js
The mechanism for calling certain js functions depending on specific URLs is similar to the similar mechanisms in server frameworks such as Rails, Pyramid, Django, CakePHP, CodeIgniter, etc.
Hivelogic
The library allows relatively safe (in terms of parsing by spam programs) to publish e-mail on your site.
JavaScript Garden
Js code analyzer that allows even inexperienced users to eliminate frequently occurring errors in using javascript even before the stage of code publishing.
Syntaclet
Bookmarklet for highlighting js syntax in html pages
Bookmarkleter
A tool for converting js code into a bookmarklet with the possibility of reformatting (removing extra spaces, replacing unicode characters, etc.)
Nets
The JavaScript Grid
A grid generator with a simple bookmark viewer mechanism.
Grid Calculator
Convenient grid designer with import into Adobe Illustrator or Adobe Photoshop
GridCalc Grid
Calculator Calculator of possible grid options for given page width, block width and gap between blocks, as well as a code generator for selected options.
Modular Grid Pattern Grid
generator for graphic editors. There is also a corresponding extension for Photoshop
Susy
Rails framework that allows you to create a grid, as flexible as possible to adapt to your layout, design and wishes.
Griddle.it
A simple and convenient mechanism that allows you to generate the background of the page on which the rulers will be applied to align the elements of the site design.
Well, a little more
ASCII Pronunciation Rules for Programmers
Website - ASCII Pronunciation Guide for English Names.
PS: Not all the tools described in the original article are included in the translation - some simply did not work, some seemed to me completely inappropriate here. But the translations turned out to be quite a lot, so respect to those who got to these lines :-)
