Рубрика «html» - 94

image Приветствую. Представляю сообществу проект Konva.js.

Konva.js — это фреймворк, который позволяет работать c canvas 2d в объектном стиле с поддержкой событий.

Кратко список особенностей выглядит так:

  1. Объектное API
  2. Вложенные объекты и «всплытие» событий
  3. Поддержка нескольких слоёв (нескольких canvas элементов)
  4. Кэширование объектов
  5. Поддержка анимаций
  6. Настраиваемый drag&drop
  7. Фильтры
  8. Готовые к использованию объекты, включая прямоугольник, круг, изображение, текст, линия, SVG путь, ..
  9. Простое создание собственных фигур
  10. Событийная архитектура, которая позволяет разработчикам подписываться на события изменений аттрибутов, отрисовки, и так далее
  11. Сериализация и десериализация
  12. Продвинутый поиск с помощью селекторов stage.get('#foo') и layer.get('.bar')
  13. Десктоп и мобильные события
  14. Встроенная подержка HDPI устройств
  15. и еще много разного

Далее подробней рассмотрим возможности фреймворка с примерами кода.
Читать полностью »

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости

Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №147 (9 — 15 февраля 2015) - 1
Читать полностью »

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

Приятная сборка frontend проекта - 1
Читать полностью »

10 февраля Консорциум Всемирной паутины объявил о том, что стандарт, описывающий API для управления вибрацией, получил статус рекомендованного. Сама по себе возможность заставить браузер повибрировать устройством была доступна уже некоторое время, но только сейчас она была наконец-то оформлена рекомендованной спецификацией, так что пришла пора подумать, как и где это можно использовать на повседневной основе. Впрочем, уже в самом начале авторы стандарта предупреждают, что API разработан специально для тех случаев, когда требуется простая тактильная обратная связь, и он не предназначен для использования в качестве общего механизма уведомления пользователя. Для уведомлений рекомендуется использовать Notifications API.

Желающие приобщиться к официальной спецификации со всеми её нюансами могут это сделать на сайте W3C, а здесь мы лишь бегло посмотрим на то, как всё это можно использовать, а также осветим некоторые моменты, не раскрытые в документации.
Читать полностью »

Буквально недавно Крис написал про «Эффект капельного преобразования в CSS». Эффект реально крутой и сама техника реализована по-умному, но данный подход через обычные CSS фильтры имеет определенные недостатки: нельзя использовать непрозрачность, добавлять контент внутрь капель, проблемы с фоновыми цветами.

В последние дни я достаточно много экспериментировал с SVG фильтрами и заметил, что с их помощью можно решить вышеописанные проблемы в CSS реализации. Посмотрите на липкое меню, которое я сделал для демонстрации:

CodePen
Липкий эффект - 1

Читать полностью »

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

Языки пламени в CSS - 1

Читать полностью »

На определенном этапе развития программной системы неизбежно возникает задача разработки пользовательской документации. И тут возникает технический вопрос выбора форматов и инструментов разработки документации.
Читать полностью »

Я люблю использовать SVG везде, где это только возможно.

При создании front-end я разделяю всю графику на две категории:

  1. “контент” — изображения, которые меняются в зависимости от содежимого
  2. “UI” — всё, что интегрировано в сайт

Названия не сильно важны, а вот распознавать эти две категории важно. Мы можем объединять все иконки в один спрайт (что будет рассмотрено во второй части), но никогда такого не сделаешь для изображений, используемых в статье.
Читать полностью »

Совсем недавно мы запустили Foundation for Apps. Было замечательно получать от вас отзывы и предложения по поводу нашего последнего фреймворка!

За это небольшое время мы уже успели узнать многое. Здесь первые 10 вещей, которые нам кажутся немаловажными:

1. Flexbox — это здорово, но сложно

Мы начали строить наш фреймворк с использованием Flexbox вместо традиционной сетки float. Это позволило нам аккуратнее выполнять некоторые вещи вроде смешения fixed- и fluid-width, существенно улучшить исходный код, и переориентировать сетку. Мы поняли, что Flexbox просто замечателен, и у него также есть поддержка множества разных браузеров. Пришлось разбираться во всех его тонкостях, делать его доступным для разного ПО, но у нас получилась просто замечательная сетка!
Читать полностью »

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости

Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №146 (2 — 8 февраля 2015) - 1
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js