Обновить
113.03

HTML *

Стандартный язык разметки web-страниц

Сначала показывать
Порог рейтинга
Уровень сложности

Meteor + MVVM = ❤

Время на прочтение2 мин
Количество просмотров15K

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


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

Читать дальше →

Как вы можете использовать отзывчивые веб-компоненты сегодня

Время на прочтение7 мин
Количество просмотров20K

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

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

Интерполяция: рисуем плавные графики с помощью кривых Безье

Время на прочтение4 мин
Количество просмотров44K
Доброго времени суток, харбачитатель.

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

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



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

Краткая история Всемирной паутины по версии веб-разработчиков

Время на прочтение1 мин
Количество просмотров25K

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


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


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

Читать дальше →

Основы разработки 3D-игр в Intel XDK на BabylonJS

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

Читать дальше →

Низкий FPS при прокрутке страницы. Решение проблемы background-attachment: fixed

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

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


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

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


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

Я начал свое расследование…
Читать дальше →

JS Загрузчик + шаблонизатор или история очередного велика

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

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


Читать дальше →

Доступны записи Microsoft Edge Web Summit 2016 — Часть 1

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


Looking back: One year of Microsoft Edge

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

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


Доклады конференции

Разработка HTML5-игр в Intel XDK. Часть 7. Оформление игры

Время на прочтение7 мин
Количество просмотров14K

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


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

Читать дальше →

Разработка HTML5-игр в Intel XDK. Часть 6. Угощение для змеи и обработка столкновений

Время на прочтение7 мин
Количество просмотров8.2K

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


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

Читать дальше →

Вертикальные отступы или ещё раз про margin

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

Вертикальные отступы или ещё раз про margin
Читать дальше →

Разработка HTML5-игр в Intel XDK. Часть 5. Увеличиваем длину змеи и управляем ей

Время на прочтение6 мин
Количество просмотров15K

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


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

Читать дальше →

Разработка HTML5-игр в Intel XDK. Часть 4. Система координат и перемещение объектов

Время на прочтение5 мин
Количество просмотров11K

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


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


Читать дальше →

Ближайшие события

Разработка HTML5-игр в Intel XDK. Часть 3. Знакомство со змейкой

Время на прочтение6 мин
Количество просмотров14K

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


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

Читать дальше →

Разработка HTML5-игр в Intel XDK. Часть 2. Cocos2d-JS

Время на прочтение7 мин
Количество просмотров19K

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


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


Читать дальше →

Разработка HTML5-игр в Intel XDK. Часть 1. Знакомство с XDK

Время на прочтение5 мин
Количество просмотров33K

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


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

image

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

Почти полное руководство по flexbox (без самих flexbox)

Время на прочтение3 мин
Количество просмотров63K
image

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

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

Читать всю статью

Расстановка полей и отступов в CSS

Время на прочтение4 мин
Количество просмотров162K
Box Model

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

Читать дальше →

Как сделать многослойную Parallax иллюстрацию на CSS & JavaScript

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

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

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

Финальное демо
Читать дальше →

Как мы разогнали мобильную Lenta.ru до скорости света

Время на прочтение9 мин
Количество просмотров42K
image

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