Полезные ссылки и материалы


#1

Нашли интересный сервис или инструмент – поделитесь им!
В общем, ссылки, ссылки, ссылки!


Интересные ссылки на сторонние ресуры
Ваши идеи для новых курсов
Теория
спрайты
Дополнительная практика
Помогите с выбором литературы HTML5,CSS.
Какие полезные (Русскоязычные/Англоязычные) ресурсы с информацией о IT вы знаете?
[Вопрос] CSS в SCSS [да наоборот]c
#2

##На страже Перфекционизма##

  1. Проверка CSS свойств на кроссбраузерность - Такой ресурс обязан использовать каждый уважающий себя, как начинающий так и гуру - верстальщик!
  2. Window Resizer - По-моему самое лучшее расширение из представленных для Хрома. Как видно из названия - плагин незамысловатый, однако очень удобен в использовании. Верстай кроссбраузерно с WR. Так же расширение позволяет настраивать свои собственные размеры экрана. Еще удобной фичей является показ не только win size, но и viewport size. Что немаловажно
  3. Поделись своим кодом - Хочешь поделиться с кем-то кодом или попросить о помощи, тогда это то, что тебе нужно! Никому не хочется читать на форуме кучу кода. Систематизируй - и тебе удобней объяснить, и другим разбираться.
  4. Поделись своим кодом(2) - Если не работает предыдущий, то jsfiddle вроде не дает отказов. Да он круче по функционалу, но первый пошустрее будет для простых постов.
  5. Наикрутейший генератор CSS3 - Ускорь написание кода с помощью CSS3 Generator’а. По кнопке Gradien предложит перейти на другой сайт, смело переходи, там отдельный ресурс, который позволяет извращаться с градиентами, почти как только душа пожелает.
  6. Еще один Мощный CSS3 Генератор - Действительно мощный генератор, чего только стоит возможность добавления теней, мало какой Генератор может похвастаться этим. По поводу поддержки старых браузеров (ИЕ) Я ничего не скажу - сам не проверял. + Можно публиковать свои элементы.
  7. оптимизация PNG - Хороший сайт - быстрый сайт, пока на сайте используются картинки вопрос о скорости всегда остается открытым. Данный ресурс удаляет все ненужное из изображений. Пользуюсь сам и советую.
  8. оптимизация всех остальных форматов - Почему именно так?! да потому что TinyPNG основывается только на формате .png и это у него получается лучше остальных.

##Полезные плагины##

  1. Кастомный scrollBar - Частенько бывает так, что дизайнер любит стилизовать стандартный скроллер, так этот плагин jQuery поможет Вам в этом.
  2. Удобный слайдер диапазонов - опять же jQuery в помощь. Плагин позволяет создавать, настраивать, кастомизировать такие популярные слайдеры, которые обычно используются в фильтрах интернет-магазинов. А в целом плагин можно использовать где Вам удобно.
  3. ionDen plugins - Общий список, откуда и был взял “слайдер диапозонов”. В этом списке почти все, что необходимо для частого использования в Ваших проектах: Ion.Tabs, Ion.Sound, Ion.Calendar, Ion.Zoom, Ion.CheckRadio, Ion.ImageSlider. По названиям, конечно же все должно быть предельно ясно.
  4. Гридстер - плагин сам говорит за себя. Аля WIN8 дизайн

##Работа со шрифтами##

  1. Самый популярный сервис от гугла, как всегда пользуется огромным спросом. Удобный поиск, простое подключение. Есть кириллические шрифты.
  2. Шрифты от Алексея Климанова - Это просто что-то с чем-то, нашел там те шрифты, которых нет на Гугл фонтс. Ресурс нереальный! Всем советую. Кстати можно предварительно оценить шрифт на готовом сайте =)
  3. WebFont - мощнейший ресурс для работы со шрифтами.
  4. Генератор шрифтов - если на всех перечисленных выше ресурсах нет необходимого шрифта, то вам сюда. Достаточно найти шрифт в удобном формате.

Анимации — это круто!##

  1. Animate.css — название говорит само за себя. Скачивайте, пробуйте. Может кто-то вдохновится. P.s. Обычно используют вместе с плагином wow.js.
  2. snabbt.js — js-плагин для анимации элементов на странице.
  3. velocity.js — еще один js-плагин =). Анимируйте. Примеры использования тут.
  4. hover.css:hover-анимация. Можно применять для оживления элементов форм.
  5. Сервис для создания анимации — на данный момент работает в beta-режиме. Но многообещающий ресурс. Стоит внимания.

##За гранью реального##

  1. Анимируем градиенты - даже и сказать нечего, просто задайте пару цветов и нажмите preview.

#3

Название: Сюрреализм на JavaScript
Автор: Бахирев Алексей Михайлович
ISBN: 978-5-9905660-7-1
Издательство: СИНЭЛ
Год: 2014
Город: Санкт-Петербург
Формат: PDF
Количество страниц: 288
Описание: Книга о разработке игр и приложений на JavaScript. В книге встречается множество отсылок к авторам различных публикаций и экспертам фронтенд-разработки. Также затрагивается тема кроссплатформенной разработки на JavaScript для различных устройств, XSS атаки, обфускация кода, и конвертирования HTML в EXE, HTA, CHM и т.п.

Скачать в PDF: http://bakhirev.biz/book/files/Surrealism_on_JavaScript.pdf.max.zip
Читать онлайн: http://bakhirev.biz/book/index.html


#4

ИМХО для верстки эта книга бесполезна. Для няшек по разработкам на JS, мне кажется надо новую тему.


#6

Нашел в статье хабры этот сайт, наверно это называется snippets.
Может кто знает, есть ли аналоги ?


#7

Что именно? - Если ты про плиточное расположение - то вот


#8

Спасибо большое за Статью на хабре. замечательнейший ресурс оказался этот MDN (от мозилы)
js неплохо разъясняется


#9

Я имел ввиду аналоги этого сайта http://thecodeplayer.com/, где не нужно искать кусок кода как в codepen и они все уже готовы и доработанные. :smiley:


#10

не понимаю о чем речь в фразе “Искать кусок кода”, в тут сайт ссылается на видеоплеер коддинга) это совсем другое)


#11

Я просто ищу аналог http://thecodeplayer.com :smiley:


#12

Кстати, вот http://codepen.io/patterns/ что-то в этом духе.


#14

Это жe FLAT UI ) даже сайт так называется =)

Кажется где-то это уже было =)

:smile:

[quote=“SergeyBosak, post:13, topic:378”]
Вот такие каракули автоматически переводятся
[/quote] Не советую прогу, ибо пароли тоже переводит =)


#18

http://www.spritebox.net/ - хороший бесплатный сервис для генерации спрайтов, после регистрации можно сохранять проекты


#19
  • :smiley: Большое спасибо за ссылку на сайт со шрифтами Александра Климанова! Нашла нужный мне шрифт, которого не было на других сайтах!*

#20

#22

http://pepelsbey.net/pres/
Просто карточки.


#23

Скорее презентации =)


#24

Да, да ;). Но сайт может быть весьма полезен.


#25

Очень часто пользуюсь этим сервисом: http://www.color-hex.com/
Из названия можно понять для чего он.


#26

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