A selection of html / javascript / css tools and libraries from SmashingMagazine
The development of web interfaces is not the easiest. Moreover, it seems to be easy to start, but to achieve perfection is truly problematic. There is a lot to consider. Just a lot of settings and nuances in which it is easy to get confused and do something wrong. Fortunately, developers and designers tend to simplify this hard work and constantly invent all sorts of tools to do more and better at the same time, and most importantly not to get bogged down with trifles and focus on something more important.
A lot of handy tools found by the team of the popular online magazine SmashingMagazine are brought under the cut.
')
HTML Email Boilerplate
The site contains a considerable number of templates and examples for creating messages sent by e-mail to avoid most of the problems with the display of these messages in popular client applications.
Initializr
HTML generator 5 templates. 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 to 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, ranging from the most modern smartphones to old models on Blackberry, Symbian and IE Mobile.
Kotatsu
A simple HTML table builder. Who is interested in a similar generator of lists, you can also look here .
Vogue
Local server based on Node JS, which allows to avoid the problem of constant cleaning of the browser cache when editing css.
LiveReload
A tool that automatically applies CSS / JS changes in browsers such as Safari and Chrome and reloads the entire page if the HTML has changed. 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 to test your web applications for compatibility with various font sets.
Less-boilerplate
CSS Boilerplate rewritten to LESS
Needle v0.1a1
A tool for testing layout. Makes screenshots and allows them to compare them with other screenshots. Also provides tools for testing calculated CSS rules, as well as positions of HTML elements on the page.
inuit.css
Another CSS framework in which the author tried to collect the best practical techniques he had accumulated in one 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 required to load the page, which can reduce the overall time of the download itself.
CSSsitemap System
An interesting project to create a site map on css
Normalize.css
The result of the work of Jonathan Neal and Nicholas Gallagher on reset.css. Instead of the traditional resetting of all default settings of browsers, they offer to reset only those that prevent the use of the same CSS rules for all browsers, and keep other convenient defaults.
Holmes
A set of CSS rules allows to highlight blocks on the page with questionable, erroneous or unstable layout. It is proposed to use with bookmarklet.
Zen coding
A plug-in for a large number of code editors offering speeding up the typing and editing of CSS rules using special abbreviations.
CSS Stress Testing and Performance Profiling
A tool for testing performance and CSS profiling.
CSS crush
PHP preprocessor for CSS to avoid the need to use vendor prefixes, as well as some other verbose constructs when creating CSS rules. You can also take a look at <a href=" PCSS "> this similar tool
CSSPrefixer
A tool to automate the process of adding vendor prefixes to CSS.
Modernizr 2
The second version of the wonderful framework allows you to use the charms of HTML5 and CSS3 without the risk of losing users of not so fresh browsers.
yepnope.js
The library allows you to load only the js files on this page.
FitText
A jQuery module that flexibly changes font sizes to conveniently place the same text on a wide range of devices, from a small screen of a mobile device to a professional thirty-inch monitor.
jQuery Waypoints
A module that allows you to execute a certain code at the moment when the user scrolls the page to a specific element.
jQuery Plugin Boilerplate
Convenient wrapper for writing plugins to jQuery
ligature-js
Funtion adding typographical ligatures to text
Placeholder jQuery Plugin / Polyfill
Module for supporting HTML5 placeholder attribute in old or non-supporting browsers.
Stronglytyped
Attempt to maximally cross-browser to add more strict typing of variables in javascript
Kaffeine
Syntactic sugar for writing complex javascript applications. It is compiled into plain javascript code.
Crossroads.js
The mechanism for invoking certain js functions depending on certain URLs is similar to similar mechanisms in server-side frameworks like Rails, Pyramid, Django, CakePHP, CodeIgniter, etc.
Hivelogic
The library allows relatively safe (in terms of parsing spamming programs) publish e-mail on your site.
JavaScript Garden
The js code analyzer allows you to eliminate frequently encountered errors in the use of javascript language by inexperienced users even before the code is published.
Syntaclet
Bookmarklet for syntax highlighting js on 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
Mesh generator with a simple browsing mechanism through bookmarks.
Grid calculator
Convenient mesh constructor with import in Adobe Illustrator or Adobe Photoshop
GridCalc
Calculator of possible grid options for given sizes of page width, block width and the gap between blocks, as well as a code generator for selected options.
Modular Grid Pattern
Mesh generator for graphic editors. There is also an appropriate Photoshop extension.
Susy
Rails framework allows you to create a grid, maximally adapting to your layout, design and wishes.
Griddle.it
A simple and convenient mechanism allows you to generate the background of the page, which will be applied to the ruler to align the design elements of the site.
ASCII Pronunciation Rules for Programmers
The site is a guide to the names of ASCII characters in English.
PS: Not all the tools described in the original article are included in the translation - some simply did not work, some seemed completely out of place here. But the fact that translated turned out very much, so that respect to those who got to these lines :-)
A lot of handy tools found by the team of the popular online magazine SmashingMagazine are brought under the cut.
Tools for CSS and HTML
')
HTML Email Boilerplate
The site contains a considerable number of templates and examples for creating messages sent by e-mail to avoid most of the problems with the display of these messages in popular client applications.
Initializr
HTML generator 5 templates. 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 to 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, ranging from the most modern smartphones to old models on Blackberry, Symbian and IE Mobile.
Kotatsu
A simple HTML table builder. Who is interested in a similar generator of lists, you can also look here .
Vogue
Local server based on Node JS, which allows to avoid the problem of constant cleaning of the browser cache when editing css.
LiveReload
A tool that automatically applies CSS / JS changes in browsers such as Safari and Chrome and reloads the entire page if the HTML has changed. 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 to test your web applications for compatibility with various font sets.
Less-boilerplate
CSS Boilerplate rewritten to LESS
Needle v0.1a1
A tool for testing layout. Makes screenshots and allows them to compare them with other screenshots. Also provides tools for testing calculated CSS rules, as well as positions of HTML elements on the page.
inuit.css
Another CSS framework in which the author tried to collect the best practical techniques he had accumulated in one 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 required to load the page, which can reduce the overall time of the download itself.
CSSsitemap System
An interesting project to create a site map on css
Normalize.css
The result of the work of Jonathan Neal and Nicholas Gallagher on reset.css. Instead of the traditional resetting of all default settings of browsers, they offer to reset only those that prevent the use of the same CSS rules for all browsers, and keep other convenient defaults.
Holmes
A set of CSS rules allows to highlight blocks on the page with questionable, erroneous or unstable layout. It is proposed to use with bookmarklet.
Zen coding
A plug-in for a large number of code editors offering speeding up the typing and editing of CSS rules using special abbreviations.
CSS Stress Testing and Performance Profiling
A tool for testing performance and CSS profiling.
CSS crush
PHP preprocessor for CSS to avoid the need to use vendor prefixes, as well as some other verbose constructs when creating CSS rules. You can also take a look at <a href=" PCSS "> this similar tool
CSSPrefixer
A tool to automate the process of adding vendor prefixes to CSS.
Javascript tools
Modernizr 2
The second version of the wonderful framework allows you to use the charms of HTML5 and CSS3 without the risk of losing users of not so fresh browsers.
yepnope.js
The library allows you to load only the js files on this page.
FitText
A jQuery module that flexibly changes font sizes to conveniently place the same text on a wide range of devices, from a small screen of a mobile device to a professional thirty-inch monitor.
jQuery Waypoints
A module that allows you to execute a certain code at the moment when the user scrolls the page to a specific element.
jQuery Plugin Boilerplate
Convenient wrapper for writing plugins to jQuery
ligature-js
Funtion adding typographical ligatures to text
Placeholder jQuery Plugin / Polyfill
Module for supporting HTML5 placeholder attribute in old or non-supporting browsers.
Stronglytyped
Attempt to maximally cross-browser to add more strict typing of variables in javascript
Kaffeine
Syntactic sugar for writing complex javascript applications. It is compiled into plain javascript code.
Crossroads.js
The mechanism for invoking certain js functions depending on certain URLs is similar to similar mechanisms in server-side frameworks like Rails, Pyramid, Django, CakePHP, CodeIgniter, etc.
Hivelogic
The library allows relatively safe (in terms of parsing spamming programs) publish e-mail on your site.
JavaScript Garden
The js code analyzer allows you to eliminate frequently encountered errors in the use of javascript language by inexperienced users even before the code is published.
Syntaclet
Bookmarklet for syntax highlighting js on 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
Mesh generator with a simple browsing mechanism through bookmarks.
Grid calculator
Convenient mesh constructor with import in Adobe Illustrator or Adobe Photoshop
GridCalc
Calculator of possible grid options for given sizes of page width, block width and the gap between blocks, as well as a code generator for selected options.
Modular Grid Pattern
Mesh generator for graphic editors. There is also an appropriate Photoshop extension.
Susy
Rails framework allows you to create a grid, maximally adapting to your layout, design and wishes.
Griddle.it
A simple and convenient mechanism allows you to generate the background of the page, which will be applied to the ruler to align the design elements of the site.
Well, a little more
ASCII Pronunciation Rules for Programmers
The site is a guide to the names of ASCII characters in English.
PS: Not all the tools described in the original article are included in the translation - some simply did not work, some seemed completely out of place here. But the fact that translated turned out very much, so that respect to those who got to these lines :-)
Source: https://habr.com/ru/post/136654/
All Articles