Several interesting and useful things for a web developer (release 4)
Good day, dear habravchane. Recently, I saw some 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. For Pace there are several themes that are described only in CSS. There are two more universal projects on GitHub from Hubspot: Vex and Messenger - “Dialogs for the 21st century” and “Alerts for the 21st century”, respectively. Recommend.
Flat UI Free 2.1
Popular information resource Designmodo has published on GitHub an extensive set of interface elements in trendy flat design styles. About it in March wrote habrauzer ilya42 . And this week the project has been updated to version 2.1. Now in Flat UI there is support for Bootstrap 3, a number of new elements, icons have appeared, fonts have been updated. The number of olds is already more than 5000.
')
Framer
Awesome invention developer Koen Bok . Framer is a free tool for prototyping interactive and animated interfaces. The application is synchronized with Photoshop, cuts the layout layers to .png (of course, for the layout you have to cut a little with your hands, but everything depends on the designer’s meticulousness to the layout) and everything imposes on z-index and matrix3d ​​trasnform. And interactive and animation designers will add with this simple syntax directly in the browser (unfortunately only Chrome). PSD.Logo, PSD.OverviewButton - these are the names of PNG files. Speaking about the Framer developer, I would also like to mention his Cactus project - a generator of statistical Python sites using the Django template.
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 right 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
With the help of Editr you can organize on your server a playground for working with HTML, CSS, JavaScript. High-quality and beautiful project: based on ACE Editor, support for Emmet, Base64, LESS and CofeeScript, validation of JS and CSS, many themes.
Usable jQuery plugin for creating responsive menus. A very beautiful demo page will not leave you indifferent to this scriptsmile . There is also a similar, perhaps even more functional script on the native JS - Responsive-nav
Above, I have already talked about the tool for "interactive prototyping." Composite is something similar: At the moment, this application is for iOS only, which connects remotely to Photoshop and allows designers to create interactive prototypes. Another difference is that it is paid for and is more stable.
"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 an “interestingness” and, perhaps, for someone a convenient service for demonstrating the layout to clients.
Many thanks to all for your attention.
Next Collection (Release 5) Previous Collection (Release 3)
Pace.js is the easiest way ( documentation here ) to add a progress bar to your project. For Pace there are several themes that are described only in CSS. There are two more universal projects on GitHub from Hubspot: Vex and Messenger - “Dialogs for the 21st century” and “Alerts for the 21st century”, respectively. Recommend. Flat UI Free 2.1Popular information resource Designmodo has published on GitHub an extensive set of interface elements in trendy flat design styles. About it in March wrote habrauzer ilya42 . And this week the project has been updated to version 2.1. Now in Flat UI there is support for Bootstrap 3, a number of new elements, icons have appeared, fonts have been updated. The number of olds is already more than 5000.
')
FramerAwesome invention developer Koen Bok . Framer is a free tool for prototyping interactive and animated interfaces. The application is synchronized with Photoshop, cuts the layout layers to .png (of course, for the layout you have to cut a little with your hands, but everything depends on the designer’s meticulousness to the layout) and everything imposes on z-index and matrix3d ​​trasnform. And interactive and animation designers will add with this simple syntax directly in the browser (unfortunately only Chrome). PSD.Logo, PSD.OverviewButton - these are the names of PNG files. Speaking about the Framer developer, I would also like to mention his Cactus project - a generator of statistical Python sites 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 right 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
With the help of Editr you can organize on your server a playground for working with HTML, CSS, JavaScript. High-quality and beautiful project: based on ACE Editor, support for Emmet, Base64, LESS and CofeeScript, validation of JS and CSS, many themes.
Responsive Elements
Simple and at the same time very usable plugin on jQuery. In order to make the element responsive, we add the data-respond attribute to it and set the CSS classes .gt and .lt with the appropriate dimensions by analogy 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
Usable jQuery plugin for creating responsive menus. A very beautiful demo page will not leave you indifferent to this script
Composite
Above, I have already talked about the tool for "interactive prototyping." Composite is something similar: At the moment, this application is for iOS only, which connects remotely to Photoshop and allows designers to create interactive prototypes. Another difference is that it is paid for and is 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 an “interestingness” and, perhaps, for someone a convenient service for demonstrating the layout 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 intended for the functioning of the latest elements of the web platform on modern browsers. Roughly speaking, this is a huge set of polyfiles to create 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 other things than the existing H5BP
- Maybe someone did not see my post about SVG.js
- Browserswarm is like Browserstack , but for testing JS
- CLNDR.js is one of the highest quality and functional calendars on JS.
- Two freshly baked beautiful fonts: Mozilla's Fira 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 in Automattic (Wordpress, Gravatar, etc.)
- Learnyounode is another Node.js tutorial, but console .
Many thanks to all for your attention.
Next Collection (Release 5) Previous Collection (Release 3)
Source: https://habr.com/ru/post/195076/
All Articles