- PVSM.RU - https://www.pvsm.ru -

Несколько интересностей и полезностей для веб-разработчика (выпуск 7)

Доброго времени суток уважаемые читатели. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

Browserhacks [1]

Несколько интересностей и полезностей для веб разработчика (выпуск 7) [1]
Название говорит самое за себя. Данный ресурс — хранилище всевозможных хаков к существующим браузерам. Увидев этот сайт, сам Paul Irish мудро произнес: "Holy shit amazing [2]".

5 замечательных изобретений от David DeSandro (Twitter, H5BP)

Несколько интересностей и полезностей для веб разработчика (выпуск 7)Masonry [3] — в переводе «каменная кладка» — идеальное решение для создания Grid Layout. Качественная «замена» для неутвержденной Flexbox спецификации. Простой синтаксис дает возможность без труда создавать Pinterest/Surfingbird подобные макеты. Существует на нативном JavaSciprt и как jQuery плагин.

Isotope [4] — «изысканный jQuery плагин для магических лэйаутов. Позволяет с легкостью фильтровать, сортировать и придавать динамичность макету».

imagesLoaded.js [5] — определяет когда изображения были загружены. Включает в себя 4 события: always, done, fail, progress. Простой в использовании.

Draggabilly [6] — аналог jQuery UI Draggable на нативном JavaScript в лучших традициях автора кода. Работает с touch интерфейсом.
Close Pixelate [7] — «пикселизация» изображений в Canvas аля потаённые места в некоторых работах жанра НЮ.

Юзабилити билета в кинотеатр

Несколько интересностей и полезностей для веб разработчика (выпуск 7) [8]
Прочитав недавний пост "Юзабилити посадочного талона: как спасти две человеческие жизни в год [9]", захотелось поделиться одним пэном на Codepen [8].

Ionicons [10] — симпотичный иконочный шрифт

Несколько интересностей и полезностей для веб разработчика (выпуск 7) [10]

Kraken [11] и JPGmini [12]

Несколько интересностей и полезностей для веб разработчика (выпуск 7)
JPEGmini — замечательное приложение для Windows и Mac, в котором используются интеллектуальные алгоритмы сжатия без видимого эффекта. Бесплатная версия приложения позволяет оптимизировать не более 20мб в сутки, чего вполне достаточно блогерам. Но если говорить о "реальной" оптимизации изображений в проекте, то выбирать нужно Kraken [11], который обладает API и работает с JPG, PNG, GIF и SVG файлами. Стоит также сказать, что Кракен сотрудничает с Microsoft в проекте Modern.ie [13].

PSD Fonts [14]

Несколько интересностей и полезностей для веб разработчика (выпуск 7) [14]

Данный сервис синхронизируется с вашим Dropbox аккаунтом, после чего отображает все существующие шрифты в выбранном .PSD и показывает где их купить на MyFont. Проект на GitHub [15], все работает благодаря замечательному PSD.rb [16]

Нужная красивая CSS ленточка? В «интернетах» даже существует генератор [17] к этому случаю:
Несколько интересностей и полезностей для веб разработчика (выпуск 7) [17]

UCSS [18] и Helium [19]

Оба инструмента анализируют сайт и информируют о неиспользуемых CSS классах. Разница в том, что UCSS [18] для Node.js, а Helium [19] это клиентский JavaScript и судя по количеству старов популярнее аналога от Opera Software. Пока не получилось у себя решить проблему с npm зависимостями, чтобы протестить UCSS и предположить, что лучше.

Devtools Terminal [20]

image [20]

А еще можно красиво оформить свои контакты в консоле:

Signet на GitHub [21]
image [22]

Напоследок:

  • RethinkDB [23] построена для хранения JSON документов и способна масштабироваться на несколько машин.
  • slidr [24] — очень простой и удобный слайдер.
  • Responsiveicons [25] — интересная мысль, а еще интереснее было бы увидеть полноценный иконочный шрифт к этой затее.
  • Ratchet [26] и Clank [27] — быстрое прототипирование мобильных приложений на HTML, CSS и JS
  • Rimg.js [28] — простой скрипт упрощает верстку отзывчивых изображений.
  • Mobify.js [29] — универсальный помощник в создании отзывчивой верстки.
  • Grunticon [30] — Grunt плагин для работы с иконками
  • "Sails.js [31] make it easy to build custom, enterprise-grade Node.js apps."
  • Montage JS [32] — An HTML5 framework for building modern Web Apps.
  • slash-lang [33] — новый язык программирования для веба. Со слов авторов проекта: «вдохновлен Ruby, Perl и старым добрым PHP.
  • TrifleJS [34] — эмуляция работы движка Trident (Internet Explorer) с помощью V8 и PhantomJS.

                                                          Предыдущая подборка (Выпуск 6) [35]

Автор: ilusha_sergeevich

Источник [36]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/47281

Ссылки в тексте:

[1] Browserhacks: http://browserhacks.com/

[2] Holy shit amazing: https://twitter.com/paul_irish/status/307636394061332480

[3] Masonry: http://masonry.desandro.com/

[4] Isotope: http://isotope.metafizzy.co/

[5] imagesLoaded.js: http://desandro.github.io/imagesloaded/

[6] Draggabilly: https://github.com/desandro/draggabilly

[7] Close Pixelate: http://close-pixelate.desandro.com/

[8] Image: http://codepen.io/verpixelt/pen/cEJLa

[9] Юзабилити посадочного талона: как спасти две человеческие жизни в год: http://habrahabr.ru/post/198896/

[10] Ionicons: http://ionicons.com/

[11] Kraken: https://kraken.io/

[12] JPGmini: http://www.jpegmini.com/

[13] Modern.ie: http://www.modern.ie

[14] PSD Fonts: http://psdfonts.com/

[15] Проект на GitHub: https://github.com/samjbmason/psdfonts

[16] PSD.rb: http://cosmos.layervault.com/psdrb.html

[17] генератор: http://livetools.uiparade.com/ribbon-builder.html

[18] UCSS: https://github.com/operasoftware/ucss

[19] Helium: https://github.com/geuis/helium-css

[20] Devtools Terminal: https://github.com/petethepig/devtools-terminal

[21] Signet на GitHub: https://github.com/HubSpot/signet

[22] Image: http://github.hubspot.com/signet/

[23] RethinkDB: http://www.rethinkdb.com/

[24] slidr: https://github.com/bchanx/slidr

[25] Responsiveicons: http://www.responsiveicons.co.uk/

[26] Ratchet: http://maker.github.io/ratchet/

[27] Clank: http://getclank.com/

[28] Rimg.js: http://joeyvandijk.github.io/rimg/

[29] Mobify.js: http://www.mobify.com/mobifyjs/

[30] Grunticon: https://github.com/filamentgroup/grunticon

[31] Sails.js: http://sailsjs.org

[32] Montage JS: http://montagejs.org/

[33] slash-lang: https://github.com/slash-lang/slash

[34] TrifleJS: http://triflejs.org/

[35] Предыдущая подборка (Выпуск 6): http://habrahabr.ru/post/198942/

[36] Источник: http://habrahabr.ru/post/199210/