HTML *

Тут мелькнула статья, как чувак, выбирая инструментарий, ничего не мог написать. Это про меня! Под Новый год нашёл ViewModel.org. А внутри прекрасный Two-Way Binding. Но не проходит ощущение ящика в гараже, заваленного гаечными ключами вперемешку с "лишними" деталями. Наглядный пример, как в собственной же демке пришлось ввернуть костыль, гы-гы. И я застрял на четыре месяца — хобби по вечерам после работы. Перебрал все пакеты, хоть как-то полезные для Blaze. Приставал к авторам с мольбами… Собрал в итоге новый велосипед с громким именем Template2.

Очень сложно сделать просто, как известно. Зацените:

Пару лет назад я впервые услышал про веб-компоненты (Web Components). Сперва меня это действительно заинтересовало, но как только шумиха вокруг них приутихла, они тут же вылетели у меня из головы. Но, как оказалось, в последнее время прошло интересное движение и поддержка этой технологии значительно выросла. Отзывчивые веб-компоненты, в частности, призваны упростить наш подход к адаптивному дизайну. Как многообещающе звучит!
Вот четыре пункта, с которыми стоит ознакомиться любому разработчику перед началом использования данной технологии:

• Поддержка технологии;
• Кроссбраузерная работа;
• Возможность адаптации в среде удельного проекта;
• Модульный подход.

В этой статье мы рассмотрим каждый из этих пунктов в отдельности…

Доброго времени суток, харбачитатель.

В этой статье мне хотелось бы рассказать об одном придуманном когда-то алгоритме (или скорее всего — переизобретённом велосипеде) построения плавного графика по заданным точкам, используя кривые Безье. Статья была написана под влиянием вот этой статьи и очень полезного комментария товарища lany, за что им отдельное спасибо.

Постановка задачи
Есть массив Y-ков точек, расположенных равномерно по оси X. Нужно получить плавный график, который проходит через все заданные точки. Пример на рисунке ниже:



Всех, кому интересно, прошу под кат.

Веб станет намного лучше, когда мы сможем использовать изображения.

Веб станет намного лучше, когда мы сможем использовать больше 216 цветов.

Веб станет намного лучше, когда у нас появятся каскадные таблицы стилей.

И снова привет, Хабр! Сегодня поговорим о разработке 3D-игр на HTML5 в Intel XDK с использованием BabylonJS. Возможности Intel XDK позволят как создать игру, так и протестировать её во встроенном эмуляторе и на различных мобильных платформах, таких, как iOS, Android и Windows.

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

body{
	background: url("../images/bg.jpg") no-repeat center center / cover fixed;
}

и довольный нажал F5. Красота, да и только!

Начал скроллить страничку вниз и чувствую, что-то не то…


Такое чувство, как будто я играю в Crysis на очень старом компьютере. Почему же на сайте начались «тормоза» и прокрутка проходит рывками?

Я начал свое расследование…

Изобретение своего «уникального» велосипеда считаю делом весьма полезным, если: это не отвлекает от работы (или отвлекает, но не сильно); дает некий новый положительный опыт; результаты можно где-то как-то использовать; сам процесс в кайф. От того я и отталкивался, начав конструировать свой «велик» года 3 назад и, наверное, раза 3-4 переписав его к сегодняшнему дню.

А началось все с загрузчика и JQ

Сразу после конференции Build (трансляцию открытия мы делали на Хабре: день 1 и день 2) наши коллеги провели в Сан-Франциско еще одну конференцию, но более фокусную — про клиентские веб-технологии и новинки в браузере Microsoft Edge.


Looking back: One year of Microsoft Edge

В рамках конференции Microsoft Edge Web Summit 2016 инженеры из Edge-команды делились опытом разработки нового браузера, рассказывали о новых поддерживаемых стандартах и планах на будущее.

Так же в рамках конференции был анонсирован ряд инструментов, делающих развитие Microsoft Edge и веб-платформы в нем более прозрачной для сообщества:

• Platform Issues — новое место, чтобы сообщаться о багах и узнавать об уже известных проблемах в EdgeHTML (cм. также статью "Introducing the Microsoft Edge Platform Issue Tracker").
• Platform Data — каталог API и телеметрии по глобальному использованию CSS-свойств (см. также статью "Introducing Global CSS Property Usage on Microsoft Edge Dev").
• Обновленные виртуальные машины для тестирования Microsoft Edge на OSX и Linux

Часть 1 » Часть 2 » Часть 3 » Часть 4 » Часть 5 » Часть 6 » Часть 7 // Конец )


В прошлый раз у нас получилась почти готовая игра. Теперь осталось лишь навести красоту. А именно: сделать систему подсчёта очков, экраны меню и завершения игры, поработать над сложностью. Всем этим сегодня и займёмся.

Часть 1 » Часть 2 » Часть 3 » Часть 4 » Часть 5 » Часть 6 » Часть 7 // Конец )


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

По мотивам недавней статьи «Расстановка полей и отступов в CSS». Предлагаю дополнения по данному вопросу. Предполагается, что читатель в курсе что есть margin, и что такое Margin collapsing.

Часть 1 » Часть 2 » Часть 3 » Часть 4 » Часть 5 » Часть 6 » Часть 7 // Конец )


Сегодня займёмся тем, что увеличим длину тела змеи и создадим систему управления её перемещением.

Часть 1 » Часть 2 » Часть 3 » Часть 4 » Часть 5 » Часть 6 » Часть 7 // Конец )


Сегодня разберёмся с системой координат, которая применяется в Cocos2d-JS и поговорим о том, как перемещать игровые объекты на экране.

Часть 1 » Часть 2 » Часть 3 » Часть 4 » Часть 5 » Часть 6 » Часть 7 // Конец )


Сегодня поговорим об архитектуре игры Snake, построенной на платформе Cocos2d-JS и приступим к её созданию. Пожалуйста, читайте этот материал, заглядывая в документацию по Cocos2d-JS и загрузите набор игровых ресурсов. Их мы будем использовать при разработке.

Часть 1 » Часть 2 » Часть 3 » Часть 4 » Часть 5 » Часть 6 » Часть 7 // Конец )


Продолжаем серию материалов по Intel XDK (первая часть была тут). Сегодня поговорим о движке Cocos2d-JS и о его внутреннем устройстве.

Часть 1 » Часть 2 » Часть 3 » Часть 4 » Часть 5 » Часть 6 » Часть 7 // Конец )


Хотите создать собственную кросс-платформенную игру на HTML5? Перед вами – первая часть руководства, которое посвящено разработке в среде Intel XDK. Здесь мы будем делать игру про голодную змейку, вариант всем известной Snake.



Для того, чтобы претворить планы в жизнь, воспользуемся игровым движком Cocos2d-JS. Предполагается, что вы, приступая к чтению, знаете, что такое HTML5 и JavaScript. Предварительного знакомства с Cocos2d-JS и XDK не требуется. Предлагаем начать с рабочей среды – с Intel XDK.

К сожалению, не у всех есть браузер/устройство, поддерживающие flexbox. Это руководство в виде шпаргалки, в котором предлагаются альтернативы обратной совместимости для свойств flexbox.

Хотя некоторый CSS-код в этом руководстве, возможно, покажется очевидным, я собираюсь бросить вызов flexbox, а также предложить простые решения проблем, которые возникали, пока он не обрёл популярность.

В этой статье я хотел бы рассказать, как правильно расставлять поля (padding) и отступы (margin) в CSS.

Рисунок используемый для parallax эффекта. Автор Patryk Zabielski

Привет друзья, я покажу вам как создать простою многослойную иллюстрацию с глубиной, которая переходит к контенту. Мы будем использовать метод, в котором необходим только css и чистый JS(coffeescript) (Никаких jQuery!).

Этот урок для начинающих, с начальным знанием JS и CSS, так что я буду объяснять большинство вещей и ссылаться на внешние источники.

→ Финальное демо

AMP — наверняка, вы уже слышали об этой технологии, продвигаемой Google. Казалось бы, еще одна модная технология для хипстеров, о которой скоро все забудут. Однако, в реальности эта фича уже работает в продакшне значительного числа новостных сайтов, среди которых такие гиганты, как the Guardian, Times, Washington Post, и прочая, прочая, прочая. Краткий рассказ о плюшках AMP уже был на страницах “Хабра”, а я хотел бы чуть более подробно сфокусироваться на том, как внедрять это в проект, и какой профит в действительности можно получить.