A few interesting and useful things for a web developer (issue 4)

Good day, dear Khabravchians. Recently, I saw several interesting and useful tools / libraries / events that I want to share with Habr. Pace.js is the easiest way ( documentation here ) to add a progress bar to your project. There are several topics for Pace that are described only in CSS. From Hubspot there are two more universal projects on GitHub: Vex and Messenger - “Dialogs for the 21st century” and “Alerts for the 21st century”, respectively. Recommend. Flat UI Free 2.1 A popular information resource Designmodo published on GitHub




Extensive set of interface elements in trendy flat design styles. About this back in March, the habrayuzer ilya42 wrote . And this week the project was updated to version 2.1. Now Flat UI has support for Bootstrap 3, a number of new elements, icons, and fonts have been updated. The number of starters is already more than 5000. Framer An amazing invention of the developer Koen Bok . Framer is a free tool for prototyping interactive and animated interfaces. The application synchronizes with Photoshop, slices the layout layers into .png (of course, for layout you will have to cut it a little by hand, but it all depends on the pedantry of the designer to the layout) and everything layouts on z-index and trasnform matrix3d. And designers will add interactive and animation using


this simple syntax right in the browser (unfortunately only Chrome). PSD.Logo, PSD.OverviewButton are the names of PNG files. Speaking about the developer Framer , I would also like to mention about his project Cactus - a generator of statistical sites in Python using the Django template.

Blendme.in

Just the other day, one very convenient extension for Photoshop appeared - Blendme.in. Thanks to him, all the most popular icon sets will be available directly in the Photoshop window. Image files are distributed under the Creative Commons Attribution 3.0 Unported License.

                                          Version for Photoshop CC      Version for Photoshop CS6

Editr.js

Using Editr, you can organize on your server playground for working with HTML, CSS, JavaScript. High-quality and beautiful project: based on ACE Editor, support for Emmet, Base64, LESS and CofeeScript, JS and CSS validation, many topics.

Responsible elements

Simple and at the same time very usable jQuery plugin. In order to make the element responsive, add the data-respond attribute to it and prescribe the .gt and .lt classes in CSS with the appropriate sizes, similar to min-width and max-width in media-queries:

.quote.lt500 {background: blue}
.quote.gt150.lt300 {background: red} /* min-width: 150, max-width: 300 */

Trunk.js

A usable jQuery plugin for creating responsive menus. A very beautiful demo page will not leave you indifferent to this smile script . There is also a similar, perhaps even more functional script in native JS - Responsive-nav

Composite

I have already talked about the tool for "interactive prototyping." Composite is something like: At the moment, this is an iOS-only application that remotely connects to Photoshop and allows designers to create interactive prototypes. Another difference is that it is paid and possibly more stable.

Brace

"Brace is the new way to host websites." This is actually an interesting way to host simple sites. You can even do something with XML-based CMS. But so far this is only “interesting” and, possibly, for some people a convenient service for demonstrating layouts to clients.

Finally:

• Polymer is a very ambitious project. This is a new type of library for the web based on web components , which is designed to operate the latest elements of the web platform on modern browsers. Roughly speaking, this is a huge set of polyfiles for creating support for the latest standards and cross-browser compatibility in browsers.
• Fireshell - I would say that this is a more complete Boilerplate with Grunt, SCSS / SASS and more than the existing H5BP
• Maybe someone did not see my post about SVG.js
• Browserswarm is like a Browserstack , but for testing JS
• CLNDR.js is one of the most high-quality and functional calendars on JS.
• Two freshly baked beautiful fonts: Fira from Mozilla for FirefoxOS ( GitHub ) and The Exo , which appeared thanks to Kickstarter
• Simperium is a realtime service, a good competitor for Pusher . More cross-platform and less expensive. Developed by Automattic (Wordpress, Gravatar, etc.)
• Learnyounode is another tutorial for Node.js, but a console one .

Many thanks to all for your attention.

                             Next Collection (Issue 5)       Previous Collection (Issue 3)