Список плагинов, с которыми должен быть знаком front-end/верстальщик

[Zverushka]

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

Fancybox - первый плагин, с которым должен познакомится верстальщик http://fancyapps.com/fancybox/
jquery form (отправка форм, в том числе ajax отправка файлов - очень удобная штука) http://www.malsup.com/jquery/form/#getting-started
bxslider - гибконастраиваемый слайдер http://bxslider.com/
roundabout - http://fredhq.com/projects/roundabout/ еще один слайдер, но который крутит по кругу - часто пригождался.
Countdown - Счетчик времени, очень гибкий. http://keith-wood.name/countdown.html
Validate - плагин для валидации форм http://jqueryvalidation.org/
qTip - всплывающие подсказки - например об ошибках при отправке форм qtip2.com. Желательно с ним ознакомится, но не обязательно.
ddscrollspy - плавная навигация по странице с помощью меню (возможно есть более популярный - как-то я с ним познакомилась на заре верстки, так им и пользуюсь) http://www.dynamicdrive.com/dynamicindex1/ddscrollspymenu.htm
masketinput - тот самый плагин, который позволяет вводить номер телефона по маске http://digitalbush.com/projects/masked-input-plugin
equalize - одинаковая высота слоев http://tsvensen.github.io/equalize.js/ Этот плагин может их сделать вам одинаковую высоту слоев на всех строках (несколько строк будут иметь одинаковую высоту)
eqheight - то, что не может первый плагин - может второй http://jsliang.com/eqHeight.coffee/ В отличии от первого - если у вас несколько строк, то этот плагин будет делать одинаковую высоту на каждой строке свою. Тоже клевая в этом плане вещь.

 

Кто может еще что посоветовать? Есть ли какие-то ошибки в моем списке (в плане более удобных и более популярных аналогов)?

Из-за глюка форума пришлось в тег цитаты засунуть.
 

Edited April 22, 2014 by Zverushka

[Great Rash]

Чтобы уметь настраивать любые плагины надо обязательно прокачать один очень важный скилл - умение читать документацию. В прокачивании этого скилла помогает одно несложное упражнение: написание своего собственного плагина (любого, не обязательно сложного) и составление документации к нему.

[npofopr]

Главное уметь правильно гуглить и корректно задавать вопросы, причем и на английском тоже) 

 

одинаковая высота блоков - http://brm.io/jquery-match-height/

слайдер - http://docs.dev7studios.com/caroufredsel-old/

[swandev]

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

Fancybox - первый плагин, с которым должен познакомится верстальщик http://fancyapps.com/fancybox/

jquery form (отправка форм, в том числе ajax отправка файлов - очень удобная штука) http://www.malsup.com/jquery/form/#getting-started

bxslider - гибконастраиваемый слайдер http://bxslider.com/

roundabout - http://fredhq.com/projects/roundabout/ еще один слайдер, но который крутит по кругу - часто пригождался.

Countdown - Счетчик времени, очень гибкий. http://keith-wood.name/countdown.html

Validate - плагин для валидации форм http://jqueryvalidation.org/

qTip - всплывающие подсказки - например об ошибках при отправке форм qtip2.com. Желательно с ним ознакомится, но не обязательно.

ddscrollspy - плавная навигация по странице с помощью меню (возможно есть более популярный - как-то я с ним познакомилась на заре верстки, так им и пользуюсь) http://www.dynamicdrive.com/dynamicindex1/ddscrollspymenu.htm

masketinput - тот самый плагин, который позволяет вводить номер телефона по маске http://digitalbush.com/projects/masked-input-plugin

equalize - одинаковая высота слоев http://tsvensen.github.io/equalize.js/

eqheight - то, что не может первый плагин - может второй http://jsliang.com/eqHeight.coffee/ Отличия не помню. Каждый по-своему полезен.

 

Кто может еще что посоветовать? Есть ли какие-то ошибки в моем списке (в плане более удобных и более популярных аналогов)?

Из-за глюка форума пришлось в тег цитаты засунуть.

 

lightslider http://sachinchoolur.github.io/lightslider/examples.html

GoUP http://ryuk87.github.io/jquery-goup/

skrollr  http://prinzhorn.github.io/skrollr/

bootstrap validator https://github.com/nghuuphuoc/bootstrapvalidator

вообще все что нужно, можно загуглить (иногда может не получатся, значит не то ищите)

[Zverushka]

Про гугл так отвечу. Да можно загуглить и найти, допустим, вместо fancybox - lightbox - который не все умеет, нормально не поддерживается и в целом хуже фенсибокса. Осознание ошибки приходит со временем - путем просмотра кода чужих сайтов или их доработки, когда ты вдруг понимаешь насколько удобно то, что использовали они. Не все плагины, у которых есть документация - хороши и удобны, такие иногда по полчаса читаешь и ничего не получается или не получается какая-то конкретная фишка, которая вдруг оказывается нужна, но этот плагин ее не предусматривает и время выкинуто в трубу. Почему лучше с многими плагинами ознакомится заранее (с частоиспользуемыми), чтобы потом не попасть в просак. К, примеру, ты портишь разметку на сайте - вставляешь какие-то омфг классы, которые зачем-то нужны плагину, чтобы он работал, ворочаешь стили (к примеру для карусели bxslider margin ставится только справа, который указывается в настройках - мелочь, а не сразу вникнешь, почему у тебя слайдер дергается криво), потому, что и их он искажает, подгоняешь все. И тут бац - "сделайте мне fade эффект типа crossfade" (fade бывает двух типов), а у этого чертого плагина этого эффекта нету. И тут начинается порочный круг, когда ты находишь crossfade, но не находишь настройку еще одной важной фишки. А все потому, что ты не знаешь о существовании прекрасных гибких слайдеров, в которых есть почти все, что нужно =)...

Edited April 21, 2014 by Zverushka

[DivMan]

спасибо за слайдер 

[Great Rash]

Да можно загуглить и найти, допустим, вместо fancybox - lightbox - который не все умеет, нормально не поддерживается и в целом хуже фенсибокса. Осознание ошибки приходит со временем - путем просмотра кода чужих сайтов или их доработки, когда ты вдруг понимаешь насколько удобно то, что использовали они. Не все плагины, у которых есть документация - хороши и удобны, такие иногда по полчаса читаешь и ничего не получается или не получается какая-то конкретная фишка, которая вдруг оказывается нужна, но этот плагин ее не предусматривает и время выкинуто в трубу.

Именно по-этому я пишу, что надо прокачивать скилл чтения документации. Прежде чем тупо взять и установить плагин (тем более на продакшн) нужно изучить его документацию, изучить насколько просто его использовать, какие возможности он поддерживает, а какие нет. А не тыкаться в каждый плагин как слепой котёнок пока не найдёшь, то что тебе надо.

[Zverushka]

Вот еще, если кто захочет паралакс от мышки, то очень неплохой плагин http://matthew.wagerfield.com/parallax/
В отличии от его собрата http://stephband.info/jparallax/ - имеет плавные изинги, не подтормаживает и использует для смещения объектов трансформацию (через аппаратное ускорение) - от чего не так нагружает страницу. Главное осторожнее с большими слоями - в хроме может быть баг с белым экраном. Работает по принципу - сначала идет слой сцены, потом слой паралакса и уже внутри него должен быть ваш базовый слой или картинка, которая должна двигаться. Печалит только то, что внутри сцены дать личные настройки слою невозможно (такие как, не двигаться по оси х, например) - и нужно городить несколько сцен.

Заодно расписала в первом посте отличия плагинов с одинаковой высотой строк - один все строки одинаковыи делает, другой построчно высоту равняет.

Edited April 22, 2014 by Zverushka

[nerv]

если кто захочет паралакс от мышки

мышка, мышка, дай мне паралакс 

 

Не понимаю, зачем давать ссылку на демо, если можно дать ссылку на github, где в настоящее время лежит почти все.

Кроме того, на данный момент, почти все разработчики используют bower, что делает поиск еще проще.

 

UPD: оказывается мой модуль на втором месте по популярности =)

Edited April 22, 2014 by nerv

[swandev]

 

если кто захочет паралакс от мышки

мышка, мышка, дай мне паралакс 

 

Не понимаю, зачем давать ссылку на демо, если можно дать ссылку на github, где в настоящее время лежит почти все.

Кроме того, на данный момент, почти все разработчики используют bower, что делает поиск еще проще.

 

UPD: оказывается мой модуль на втором месте по популярности =)

 

А зачем? Лучше посмотреть демо, а потом уже решать, устанавливать или нет

[nerv]

А зачем? Лучше посмотреть демо, а потом уже решать, устанавливать или нет

Потому, что:

1. очень часто делают несколько демок и оформляют их отдельными страницами

2. зачастую демо не всегда дает понять, насколько удобно то, с чем предстоит иметь дело. Демо красивое, код говно. Я лучше буду иметь дело с некрасивым демо и с хорошим кодом.

3. демо !== документация

4. ... продолжать?

[swandev]

Я не говорю что документацию читать не нужно.  Кому-то удобней для начала посмотреть на демо, а уже потом читать документацию (как мне).

 

А разницы как давать ссылку нет, с демо можно попасть на гитхаб, или с гитхаба на демо страницу.

[nerv]

А разницы как давать ссылку нет

Действительно, какая разница:

https://google.ru

https://github.com/wagerfield/parallax

 

Я не сказал главного (как мне кажется): в большинстве случаев гитхаб - первоисточник. Иными словами, если есть ссылка на репозиторий, то оттуда можно попасть на все остальные страницы (как правило).

 

Кому-то удобней для начала посмотреть на демо, а уже потом читать документацию (как мне).

а я думал, ты смотришь демо, а потом устанавливаешь

Лучше посмотреть демо, а потом уже решать, устанавливать или нет

 

ты уж определись =)

[swandev]

 

А разницы как давать ссылку нет

Действительно, какая разница:

https://google.ru

https://github.com/wagerfield/parallax

 

Я не это имел ввиду.

 

Простой пример:

http://prinzhorn.github.io/skrollr/ ссылки на гитхаб в начале и внизу страницы

https://github.com/Prinzhorn/skrollr  собственно сам гитхаб, чтобы  перейти на демо нужно пару раз поскролить и несколько раз кликнуть

[Zverushka]

@nerv,ну я блин не думала, что это чисто демо - мне показалось, что это официальная страница плагина, от которой можно уже и на гитхаб зайти и куда-то еще. Мне лично удобнее смотреть на официальной странице, где и покажут плагин в действии и тут же краткое руководство дадут. 

Edited April 22, 2014 by Zverushka

[cyklop77]

masonry плотная упаковка блоков

Edited April 23, 2014 by cyklop77

[amelice]

почти все разработчики используют bower, что делает поиск еще проще.

 

можешь посвятить какого вида информации ищет?  только среди проектов в гитхабе?

[Николя223]

AjaxFileUpload     - Вот тоже неплохой плагин, отправляет просто файлы без формы

jQuery Easing      - Настройка пользовательской анимации. работает  не только с animate, но и fadeIn, fadeOut и т.д.

jquery.transform   - Кроссбраузерные трансформации. 2d - работают и с восьмым ослом. Если мне память не изменяет - ещё и анимацию поддерживает. (хоть и ослик 8 уже в прошлом, но вдруг кому то понадобится) 

noUISlider            - Интерессный Слайдер. 

 

 

jQuery.autoComplete.js  Для тех, кому лень организовывать самостоятельно аяксопоиск при вводе в текстовое поле

jquery.cookie.js    - собственно простая работа с кукками

History.js             - наверно многие читали статью на htmlbook про маскировку URL при аяксе, собственно вот он.

 

 

Вопрос - никому на глаза не попадался крутой колорпикер с возможностью получения цвета не только HEX, но и rgb,rgba,hsl, ну и чтобы стильно выглядел)) Думаю уже самому делать ...

 

UPD: думаю это нужная тема. Копилка опыта 

Edited April 25, 2014 by Николя223

[npofopr]

UPD: думаю это нужная тема. Копилка опыта 

не надо думать) надо создавать. И лучше бы на Гитхабе, удобнее редактировать и все на одной странице 

[ryter]

http://yuilibrary.com/yui/docs/color/hsl-picker.html

Edited April 25, 2014 by ryter

[Николя223]

не надо думать) надо создавать

\

Ты уже создал? ) 

[npofopr]

 

не надо думать) надо создавать

\

Ты уже создал? ) 

 

Ну я и не думал) 

Но создал https://github.com/npofopr/plugins-for-web

Хотел поставить http://habrahabr.ru/post/218433/ но в винде ошибки пошли. Может починю)

 

А вообще. Недавно нашел вот такой проект https://develop.re/ 

Он как раз о том же. Там собираются хорошие вещи) Правда не только о верстке)

 

В общем свой репозиторий я тоже допилю, и для себя хоть буду собирать)

[nerv]

можешь посвятить какого вида информации ищет?

ищет по имени пакета, ключевым словам и т.п. Словом, всему тому, что указано в конфиге (описании пакета) *

 

можешь посвятить какого вида информации ищет?  только среди проектов в гитхабе?

среди "зарегистрированных в bower пакетов"

http://bower.io/#finding-packages

 

*насколько знаю

[nerv]

sly - слайдер/карусель/паралакс (тач, физика)

[swandev]

sly - слайдер/карусель/паралакс (тач, физика)

ох какой интересный плагин)