​fontstorage.com/ru/ - бесплатные шрифты

Представляет собой большую коллекцию бесплатных шрифтов. Включает обширный список настроек для онлайн подбора шрифта: начертание, семейство, поддержка языка, размер и так далее. В разделе "ПОЛИГОН" можно наглядно подобрать несколько шрифтов и увидеть, как они будут сочетаться на одной странице.

#сайт #шрифты

​get.foundation - адаптивный фронтенд фреймворк

Позволяет быстро создавать красивые и адаптивные интерфейсы сайтов и шаблоны электронных писем. Является семантическим, читабельным, гибким и полностью настраиваемым. Поддерживает "Mobile First" способ разработки сайтов. Предоставляет возможность включить в сборку как только необходимые элементы, так и настроить элементы под себя(цвета, размеры, шрифты и т.п.).

#фреймворк #frontend

​Normalize.css - приведение стилей к единому во всех браузерах

Представляет собой одиночный CSS-файл, который исправляет ошибки и общие несоответствия в браузерах и приводит отображение к единому виду. То есть нормализует стили для широкого диапазона элементов, при этом сохраняет полезные стили по умолчанию. Для использования достаточно подключить к проекту до основного файла стилей. Поддерживается всеми современными браузерами.

#библиотека #css

​jsFiddle - "песочница" для веб-разработчиков

Является одной из самых популярных онлайн сред разработки. Позволяет писать, редактировать и запускать JavaScript, HTML и CSS коды. Есть возможность подключить JavaScript библиотеку для работы. Ключевые особенности: вставка фрагментов кода, возможность расшаривания, а так же совместная работа.

#сайт #javascript #html #css

​bouncejs.com - конструктор CSS-анимаций

Является JavaScript-файлом и предназначен для создания анимаций на CSS3. На сайте можно выбрать шаблон, настроить параметры анимации, а после скопировать URL-ссылку на демонстрационный результат. И соответственно поделиться им. Так же можно просто скачать результат сгенерированной анимации в виде CSS-кода.

#библиотека #css

​Skeleton - легковесный CSS-фреймворк

Представляет собой стартовый шаблон и 2 файла стилей: normalize.css и skeleton.css. Последний содержит всего 400 строк кода в несжатом виде. Он включает в себя сеточную систему и стили для стандартных HTML-элементов(ссылки, кнопки, таблицы, формы и т.п.).

#библиотека

​Sticker.js - эффект отклеивающегося стикера

Представляет собой простую JavaScript-библиотеку, которая создает анимированный эффект отклеивания стикера у выбранного элемента. Не требует дополнительных зависимостей. Поддерживается всеми популярными браузерами. Распространяется по лицензии MIT. Сам эффект отклеивания показан на скриншоте ниже.

#библиотека #javascript

​Parallax.js - эффект параллакса на сайте

Работает как в браузере, так и на смартфонах. Ориентация эффекта в одном случае зависит от позиции курсора, а во втором от положения устройства. Если вы не знаете, что означает этот эффект, то просто перейдите на сайт разработчиков. Там весьма наглядно и красиво показано. Сама библиотека весьма популярна и включает обширные настройки для создания нужного эффекта.

#библиотека #javascript

​jsnice.org - преобразует JavaScript-код в читабельный вид

Сервис анализирует загруженный JavaScript код и превращает его в человеческий вид, переименовывая переменные и параметры. Сервис использует данные, основанные на сотнях open source проектах.

#сайт #javascript

​type.method.ac - настройка межбуквенного расстояния

Это игра, которая развивает восприятие правильного расстояния между буквами в зависимости от их формы. Ваша задача подвинуть буквы в правильное положение и нажать кнопку "Next". После этого покажется верный результат, ваши баллы и ошибки. Очень полезно для дизайнеров и фронтендщиков при применении CSS-свойства letter-spacing.

#сайт #css

​pxtoem.com - конвертер из PX в EM

Сайт представляет собой онлайн калькулятор преобразования из PX в EM и обратно, а так же наглядную таблицу конвертации. Помимо пикселей и EM в таблице представлены значения в процентах и PT. Для подсчета значений от 6 до 24 пикселей достаточно в левой таблице выбрать значение шрифта по умолчанию.

#сайт #css

​d3js.org - библиотека визуализация данных

Является большим и мощным инструментов для интерактивной визуализации сложных данных. Представляет собой JavaScript-библиотеку. Включает в себя множество модулей, каждый из которых решает свою задачу. На сайте показаны некоторые примеры сложной визуализации. В противовес своим возможностям, является не простой библиотекой для понимания и изучения.

#библиотека #javascript

Zeplin.io - лучший помощник для дизайнера и верстальщика

Последний опрос показал, что вам интересен более подробный обзор сервиса zeplin.io. Собственно его мы и подготовили.

👨🏻‍💻 ИЗУЧИТЬ УРОК | #статья

​swiperjs.com - мобильный слайдер

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

#библиотека #javascript

​fonts.google.com – шрифты для сайтов

Сайт содержит одну из крупнейших коллекций шрифтов, адаптированных к использованию в веб разработке. На сайте представлено более 1000 различных семейств шрифтов, в том числе с поддержкой русского языка. Доступны удобные фильтры и наглядный предпросмотр шрифтов. Присутствует возможность скачать как отдельный шрифт, так и архив с несколькими семействами.

#сайт #шрифты

​PagePiling.js — прокрутка разделов на странице наложенных друг на друга

Библиотека позволяет делать удобные переходы при скроле между блоками. Эффект анимации выглядит особенно красиво на сенсорных устройствах. Библиотека работает как во всех современных браузерах, так и в более старых версиях. Например, IE 8 либо Opera 12. Наглядный эффект показан на самом сайте библиотеки.

#библиотека #javascript

​bulma.io - адаптивный CSS- фреймворк

Он основан на Flexbox для максимально удобной резиновой верстки. Не требует использования JavaScript библиотеки. Для работы достаточно подключить CSS-файл. Очень прост в изучении. Большинство разработчиков начинает его использовать спустя первые минуты знакомства. Включает большое количество SASS переменных для гибкой настройки.

#фреймворк #css

Pixi JS - библиотека для создания и управления графикой в браузере

Кроссплатформенный 2D-движок с открытым исходным кодом, которая помогает создавать игры и интерактивные веб-сайты на основе анимации. Disney - один из многих, которые используют его для создания своего цифрового контента.

Pixi надежен и прост, поскольку он скрывает функциональность некоторых из самых сложных функций в простой, готовой к использованию библиотеке. Если вы знакомы с Adobe Flash, вам будет проще изучить Pixi.

#библиотека #javascript

Live server - расширение VS Code для автообновления страницы

Внести изменения в редакторе кода, переключиться в браузер и обновить, чтобы увидеть изменения. Это бесконечный цикл разработчика, но что, если ваш браузер будет автоматически обновляться каждый раз, когда вы вносите изменения? Вот где на помощь приходит Live Server!

Он также запускает ваше приложение на локальном сервере. Есть некоторые вещи, которые вы можете протестировать только при запуске приложения с сервера, так что это приятное преимущество.

#расширение #vscode