Свежие ресурсы для веб-дизайнеров и разработчиков (июнь 2015 г.)
Можете ли вы поверить, что эта серия работает уже почти 3 года? За это короткое время мы представили не менее 30 списков самых свежих ресурсов для веб-дизайнеров и разработчиков. И мы собираемся продолжать это с новой компиляцией на июнь.
В этой компиляции мы рассмотрим несколько библиотек JavaScript для отображения ползунков, плавной прокрутки таблиц данных, классного эффекта лифта для кнопки прокрутки вверх и многое другое..
Давайте проверим их.
Средний стиль подтверждения
Medium получил высокую оценку за свой дизайн; макет и пользовательский интерфейс, кажется, были тщательно продуманы. Кроме того, он также вдохновляет веб-разработчиков на разработку библиотек JavaScript или CSS для репликации пользовательского интерфейса. Medium Style Confirm - это одна библиотека JavaScript, которая напоминает всплывающее окно или диалоговое окно в Medium..
![](http://savtec.org/img/images_1/fresh-resources-for-web-designers-and-developers-june-2015.jpg)
пингвин
Penguin - это новый интерфейс, который вы можете использовать в качестве основы для своих сайтов. С такими инструментами, как Grunt и Sass, вы можете легко добавлять или удалять библиотеки или CSS, которые вам не нужны, из фреймворка, делая его максимально легким. Это также хорошая альтернатива для Bootstrap и Foundation.
![](http://savtec.org/img/images_1/fresh-resources-for-web-designers-and-developers-june-2015_2.jpg)
Elevator.js
Вы видели эту кнопку на веб-сайте, который позволяет вам скользить вверх по верху страницы? Большинство кнопок просто поднимают вас наверх, но с Elevator.js вы получаете эффект ускорения скольжения, похожий на лифт, музыку и “звенеть!” звук, как только вы достигли верхнего этажа. Действительно мило!
![](http://savtec.org/img/images_1/fresh-resources-for-web-designers-and-developers-june-2015_3.jpg)
X-Instagram
X-Instagram - это пользовательский элемент Polymer, который тянет и показывает изображения из Instagram по тегам. Этот элемент делает весь процесс намного проще. Мы просто добавляем элемент, как обычный элемент HTML, и указываем ключевое слово tag в качестве атрибутов элемента..
И пусть магия начнется!
![](http://savtec.org/img/images_1/fresh-resources-for-web-designers-and-developers-june-2015_4.jpg)
CamanJS
CamanJS отличная библиотека JavaScript для работы с изображениями Он поставляется с набором функций, который вы обычно найдете в редакторе изображений. Вы можете включить размытие изображения, черно-белое и даже увеличить контраст.
![](http://savtec.org/img/images_1/fresh-resources-for-web-designers-and-developers-june-2015_5.jpg)
ClusterizeJS
Clusterize.js - это библиотека JavaScript, которая повышает производительность при работе с большим количеством данных в таблицах. Когда вы прокручиваете таблицу с, скажем, 5000 в списке, обычно опыт становится медленным и прерывистым. Эти библиотеки JavaScript решат эту проблему, сделав прокрутку плавной.
![](http://savtec.org/img/images_1/fresh-resources-for-web-designers-and-developers-june-2015_6.jpg)
Сядьте тест
Сядьте тест это набор вопросов для оценки ваших навыков и знаний по CSS3, HTML5 и JavaScript. Каждому тесту дается ряд вопросов и ограниченное время для выполнения всех этих вопросов. Это хороший источник, чтобы узнать, насколько мы хороши с этими языками.
![](http://savtec.org/img/images_1/fresh-resources-for-web-designers-and-developers-june-2015_7.jpg)
HTML-стрелки
Это коллекция специальных нативных символов Unicode, которые вы можете встраивать в HTML и CSS. Эти символы включают стрелки, валюту и пунктуацию. Вы обнаружите, что иногда вам не нужен значок шрифта для отображения этих символов.
![](http://savtec.org/img/images_1/fresh-resources-for-web-designers-and-developers-june-2015_8.jpg)
Flickity
Flickity - это библиотека JavaScript для отображения каруселей, галерей или слайдеров на вашем веб-сайте. Оптимизирован для сенсорного экрана; Вы можете легко перемещать карусели пальцем или трекпадом, если вы находитесь на ноутбуке. Он также поставляется с кучей опций, позволяющих полную настройку любым удобным вам способом..
![](http://savtec.org/img/images_1/fresh-resources-for-web-designers-and-developers-june-2015_9.jpg)
Typeslab
Typeslab - это удобный инструмент для создания постеров в виде плиты. Просто напишите содержание и выберите шрифт, Typeslab мгновенно создаст плакат. Затем вы можете скачать его или опубликовать в Imgur.
![](http://savtec.org/img/images_1/fresh-resources-for-web-designers-and-developers-june-2015_10.jpg)
MatchMedia
Matchmedia - это библиотека, которая копирует медиа-запросы CSS. Библиотека на самом деле не такая свежая, но это действительно полезная библиотека, которую я решил включить в список. Если вам нужно создавать сценарии в зависимости от размера области просмотра пользователя или типа носителя, это библиотека, которую вы хотите.
Ниже приведен пример, используемый для запуска сценария с размером окна 320px и ниже:
if (matchMedia ('только экран и (max-width: 320px)'). соответствия)
![](http://savtec.org/img/images_1/fresh-resources-for-web-designers-and-developers-june-2015_11.jpg)
Sass Burger
Sass Burger поставляется с Mixin, который позволяет вам создавать “Гамбургер” значок и превратить его в крестик с меньшими хлопотами.
![](http://savtec.org/img/images_1/fresh-resources-for-web-designers-and-developers-june-2015_12.jpg)
Маркс
Marx - это набор правил стилей CSS, чтобы сделать стили элементов более согласованными. Это настраиваемый (с Sass), легкий и работает из коробки. Хорошая альтернатива уже популярным инструментам сброса CSS, таким как Normalize.css.
![](http://savtec.org/img/images_1/fresh-resources-for-web-designers-and-developers-june-2015_13.jpg)
CSS.js
CSS.js используется для разбора CSS-файлов для объявления стиля. Библиотека изначально использовалась для команды в Jotform для создания WYSIWYG-опыта для редактирования форм с помощью CSS. Теперь они открыли его для всех нас. Стоит сэкономить, на случай, если вам понадобится позже.
![](http://savtec.org/img/images_1/fresh-resources-for-web-designers-and-developers-june-2015_14.jpg)