Свежие ресурсы для веб-дизайнеров и разработчиков (июнь 2015 г.)

Можете ли вы поверить, что эта серия работает уже почти 3 года? За это короткое время мы представили не менее 30 списков самых свежих ресурсов для веб-дизайнеров и разработчиков. И мы продолжим эту работу с новым сборником на июнь.

В этой компиляции мы рассмотрим несколько библиотек JavaScript для отображения ползунков, плавной прокрутки таблиц данных, классного эффекта лифта для кнопки прокрутки вверх и многое другое.

Давайте проверим их.
Средний стиль подтверждения
Medium получил высокую оценку за свой дизайн; макет и пользовательский интерфейс, кажется, были тщательно продуманы. Кроме того, это также вдохновляет веб-разработчиков на разработку библиотек JavaScript или CSS для репликации пользовательского интерфейса. Medium Style Confirm – это одна библиотека JavaScript, которая напоминает всплывающее окно или диалоговое окно в Medium.
пингвин
Penguin – это новая интерфейсная среда, которую вы можете использовать в качестве основы своих сайтов. С такими инструментами, как Grunt и Sass, вы можете легко добавлять или удалять библиотеки или CSS, которые вам не нужны, из фреймворка, делая его максимально легким. Это также хорошая альтернатива для Bootstrap и Foundation.
Elevator.js
Вы видели эту кнопку на веб-сайте, который позволяет вам скользить вверх по верху страницы? Большинство кнопок просто поднимают вас наверх, но с Elevator.js вы получаете эффект ускорения скольжения, похожий на лифт, музыку и «Ding!» звук, как только вы достигли верхнего этажа. Действительно мило!
X-Instagram
X-Instagram – это пользовательский элемент Polymer, который тянет и показывает изображения из Instagram по тегам. Этот элемент делает весь процесс намного проще. Мы просто добавляем элемент как обычный элемент HTML и указываем ключевое слово tag в качестве атрибутов элемента.

И пусть магия начнется!
CamanJS
CamanJS – отличная библиотека JavaScript для работы с изображениями. Он поставляется с набором функций, который вы обычно найдете в редакторе изображений. Вы можете включить размытие изображения, черно-белое и даже увеличить контраст.
ClusterizeJS
Clusterize.js – это библиотека JavaScript, которая повысит производительность при работе с большим количеством данных в таблицах. Когда вы прокручиваете таблицу с, скажем, 5000 в списке, обычно опыт становится медленным и прерывистым. Эти библиотеки JavaScript решат эту проблему, сделав прокрутку полностью плавной.
Сядьте тест
Sit the Test – это набор вопросов для оценки ваших навыков и знаний по CSS3, HTML5 и JavaScript. Каждому тесту дается ряд вопросов и ограниченное время для выполнения всех этих вопросов. Это хороший источник, чтобы узнать, насколько мы хороши с этими языками.
HTML-стрелки
Это коллекция специальных нативных символов Unicode, которые вы можете встраивать в HTML и CSS. Эти символы включают стрелки, валюту и пунктуацию. Вы обнаружите, что иногда вам не нужен значок шрифта для отображения этих символов.
Flickity
Flickity – это библиотека JavaScript для отображения каруселей, галерей или слайдеров на вашем веб-сайте. Оптимизирован для сенсорного экрана; Вы можете легко перемещать карусели пальцем или трекпадом, если находитесь на ноутбуке. Он также поставляется с кучей опций, позволяющих полную настройку любым удобным вам способом.
Typeslab
Typeslab – это удобный инструмент для создания плаката в виде плиты. Просто напишите содержание и выберите шрифт, Typeslab мгновенно создаст плакат. Затем вы можете скачать его или опубликовать в Imgur.
MatchMedia
Matchmedia – это библиотека, которая копирует медиа-запросы CSS. Библиотека на самом деле не такая свежая, но это действительно полезная библиотека, которую я решил включить в список. Если вам нужно создавать сценарии в зависимости от размера области просмотра пользователя или типа носителя, это библиотека, которую вы хотите.

Ниже приведен пример, используемый для запуска скрипта с размером окна 320px и ниже:

if (matchMedia (‘только экран и (max-width: 320px)’). соответствия) {

}

Sass Burger
Sass Burger поставляется с миксином, который позволяет вам создать значок «Гамбургер» и превратить его в крестик с меньшими хлопотами.
Маркс
Marx – это набор правил стилей CSS, чтобы сделать стили элементов более согласованными. Это настраиваемый (с Sass), легкий и работает из коробки. Хорошая альтернатива уже популярным инструментам сброса CSS, таким как Normalize.css.
CSS.js
CSS.js используется для анализа CSS-файлов для объявления стиля. Изначально библиотека использовалась для команды в Jotform для создания WYSIWYG-опыта для редактирования форм с помощью CSS. Теперь они открыли его для всех нас. Стоит сэкономить, на случай, если оно понадобится вам позже.