​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

Красивые анимации с bounce.js

Bounce.js - это библиотека JS для создания красивой анимации ключевых кадров на основе CSS3. Инструмент на bouncejs.com позволяет вам создавать статические ключевые кадры, которые можно использовать без какого-либо дополнительного JS, но если вы хотите, чтобы ваше приложение генерировало их на лету, вы можете использовать библиотеку bounce.js.

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

Color Hunt - сервис для выбора цветовых палитр

Color Hunt - это бесплатная и открытая платформа с тысячами цветовых палитр, подобранных вручную. Имеется система лайков, с помощью которой можно сохранить себе цвет и увидеть, какие палитры понравились большинству.

Каждый цвет отображается в формате hex, что облегчает его использование. Есть фильтр где можно выбрать палитры по разным тематикам: закат, зима, лето, рождество, неон, ретро и др.

#сайт #цвета

Sass - метаязык на основе CSS

Sass - самый зрелый и надежный язык расширений CSS. Он позволяет использовать переменные, вложенные правила, миксины, функции и многое другое с полностью совместимым с CSS синтаксисом.

Он простой и легкий в использовании интерфейсный инструмент для написания любого кода, имеет множество полезных функций для управления цветами. Sass помогает сохранять большие таблицы стилей хорошо организованными и упрощает совместное использование дизайна внутри и между проектами.

#препроцессор #css

React Select - элемент управления Select для React.

Изначально построено для использования в KeystoneJS. Гибкий и красивый элемент управления Select Input для React с поддержкой множественного выбора, автозаполнения, асинхронности и создания.

Он представляет собой совершенно новый подход к разработке мощных компонентов React.js, которые просто работают «из коробки», но при этом легко настраиваются.

#компонент #react

icons8.com - сайт c картинками и иконками

Полезный сервис для разработчиков и дизайнеров, где можно найти бесплатные иконки, картинки, музыку, векторные иллюстрации по категориям. В сайте есть рубрика "Халява дня", которая позволяет скачать платную иконку/картинку/др. бесплатно и блог с полезными статьями.

C помощью сервиса можно создать коллажи, удалить фон картинки, собрать свою векторную иллюстрацию, увеличить качество изображения с помощью искусственного интеллекта.

#сайт #иконки

Высокоскоростная библиотека Pixi.js

Есть несколько библиотек, на которые стоит обратить внимание, если вы хотите создать что-то интерактивное с помощью HTML5 Canvas. В этом уроке мы рассмотрим основы Pixi.js.

Что вы узнаете?
- Преимущества Pixi.js
- Как рисовать базовые фигуры с помощью Pixi.js
- Как добавить формы на холст
- Как использовать moveTo(), lineTo(), pivot.set(), drawCircle(), drawRect() и другие

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

Chrome DevTools - инструмент для облегчения веб-разработки

Chrome по-прежнему является популярным браузером, он имеет инструменты разработчика прямо в браузере, и они готовы к вашим потребностям в веб-разработке. Инструменты предназначены для отладки JavaScript, применения стилей к элементам HTML, сообщений, указывающих, как работает оптимизации скорости веб-сайта.

Использование инструментов для разработчиков Chrome бесплатно, а также поддержка доступна через активное сообщество DevTools.

#инструмент #chrome

Foundation - адаптивный интерфейсный фреймворк

Всегда проще что-то спроектировать, когда заложены основы. Foundation использует этот подход, предлагая «семейство гибких интерфейсных фреймворков», которые можно применять для дизайна веб-сайтов и электронной почты, и каждая из них настраивается для получения нужного вида. Disney, HP, Amazon, Adobe используют этот фреймворк.

Он предлагает серию HTML-шаблонов, каждый из которых оптимизирован для конкретного приложения, например для блога или веб-сайта о недвижимости. Затем это может быть расширено с помощью «строительных блоков», которые добавляются на веб-сайт. Разработчики сервиса постоянно добавляют новые ресурсы, фрагменты кода и HTML-шаблоны.

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