Обновить
106.61

HTML *

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

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

Разработка 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 мин
Количество просмотров163K
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 уже был на страницах “Хабра”, а я хотел бы чуть более подробно сфокусироваться на том, как внедрять это в проект, и какой профит в действительности можно получить.
Читать дальше →

Советы, библиотеки и дополнительные материалы по CSS-анимации

Время на прочтение25 мин
Количество просмотров68K
Советы, библиотеки и дополнительные материалы по CSS-анимации

Введение


Была глубокая ночь. В темную комнату через деревянные окна проникал лунный свет. Он недостаточно освещал мой деревянный стол с ноутбуком, блокнотом и синей ручкой. Поэтому я протянул свою руку к настольной лампе и включил её.

На компьютере был открыт текстовой файл со списком статей и библиотек про веб-разработку. Он постоянно пополнялся новыми данными.

Свернув его, я пошел на улицу в поисках кинотеатра с Deadpool'ом запустил браузер и стал блуждать по окрестностям интернета. Во время прогулки я наткнулся на интересную js-библиотеку по созданию css-анимации, которую добавил в открытый до этого текстовой документ… Как оказалось, по этой теме у меня уже набралось больше 40 ссылок на материалы и библиотеки.
Читать дальше →

Интерактивное видео и с чем его едят

Время на прочтение8 мин
Количество просмотров16K
Полгода назад за чашечкой кофе программист, режиссер и геймдизайнер вели дружескую беседу на тему того, что кинематограф становится скучным. «Да, спецэффекты становятся круче, количество D становится больше, но этим сейчас малого кого можно удивить. Людей цепляет сюжет. А теперь представьте, что когда-нибудь мы будем смотреть смотреть фильмы, которыми можно управлять?»
— Я бы убил Джона Коннора.
— А я бы не выбросил бузинную палочку и стал плохим волшебником.
— А я бы на месте Поттера воспользовался маховиком времени, чтобы спасти его родителей, а не клювокрыла.



И, как говорится, понеслось…

На прошлой неделе мы спросили Хабражителей интересно ли узнать о технических аспектах создания игры. Сейчас мы готовы представить плоды нашей работы и рассказать с какими трудностями столкнулись, как с ними боролись и какие результаты получили.
Читать дальше →

Парсим HTML на C++ и Gumbo

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

Gumbo — это парсер HTML5 на Си. Пока что Gumbo предоставляет только дерево, но никаких удобных функций для работы с ним. Поэтому написал парочку вспомогательных классов:
  • STL совместимый итератор обхода дерева в глубину;
  • компараторы для поиска по тегу, атрибуту;
  • пара фасадов.

Под катом будет пример разбора страницы habrahabr.ru/all/
Читать дальше →

Пунктирное подчеркивание ссылок с нормальным расстоянием между текстом и линией

Время на прочтение1 мин
Количество просмотров8.9K
К сожалению, стиль text-decoration: dotted пока не поддерживается большинством браузеров, а желание сделать что-то подобное — присутствует.
Читать дальше →

REM vs EM – Великий спор

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


Представляю вашему вниманию перевод достаточно большой и объемной статьи по поводу вечного спора, какие же единицы измерения использовать при верстке: em'ы или rem'ы. В каких случаях стоит использовать одни единицы, а в каких другие. Вас ожидает много кода, примеров и их объяснений.

Добро пожаловать в мир типографики и относительных единиц измерения =)
Читать дальше →

BEM с человеческим лицом

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

Звучная аббревиатура BEM пришла к нам из лабораторий Яндекса. Там, как и в случае с XSLT, применение BEM решили возвести в абсолют: под BEM'ом в Яндексе понимают целое семейство утилит и подходов, объединенных единой идеологией блочной архитектуры веб-приложений. Как любая тоталитарная система, BEM требует соблюдения строгих правил при разработке, не редко вступающих в конфликт со здравым смыслом небольших проектов, не сравнимых по ресурсам с Яндексом. И да, то самое чувство, когда читаешь официальные доки по BEM.


Однако, как часто бывает в процессе эволюции больших систем, под давлением интеллекта и безлимитных сроков рождается технологический алмаз, настолько же маленький и самостоятельный, насколько и ценный, который огранят уже другие. Да, BEM с его спасительной строгостью — это явное откровение. Каждый, кто на моих глазах причащался, мгновенно становился счастливым. Однако, после первой волны наслаждения приходит осознание, что второй подход к этому снаряду может порвать ментальные связки по всему объему мозга. И вот уже слышны жалобы на слишком большую сложность освоения, на чрезмерную многословность, на (внимание!) увеличение количества мегабайт в HTML и CSS, и кто знает на что еще, не относящееся к делу.


Соглашусь, трудно взять и начать писать BEM без разбега: и нотация глаз колет, и старые трюки не проходят, и думать приходится системно. И вообще, писали как-то годами без BEM'а и писать будем! А ведь для легкого и непринужденного преодоления порога вхождения нужно сделать всего два движения. Во-первых, понизить сам порог, смягчив BEM. И во-вторых, немного подтянуться самим. Тогда переход будет ровненьким и мы мягко вкатимся в эру читабельного и поддерживаемого CSS.

Как мы дошли до жизни такой?

Меньше 2 месяцев, GoPro, крутая идея и команда — всё, что нужно, чтобы сделать игру от первого лица

Время на прочтение2 мин
Количество просмотров10K
Полгода назад за чашечкой кофе программист, режиссер и геймдизайнер вели дружескую беседу на тему того, что кинематограф становится скучным.
Да, спецэффекты становятся круче, количество D становится больше, но этим малого кого сейчас можно удивить. Людей цепляет сюжет. А теперь представьте, что когда-нибудь мы будем смотреть смотреть фильмы, которыми можно управлять?
— Я бы убил Джона Коннора
— А я бы не выбросил бузинную палочку и стал плохим волшебником
— А я бы на месте Поттера воспользовался маховиком времени, чтобы спасти его родителей, а не Клювокрыла

И, как говорится, понеслось…

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

Релиз Webix 3.2. Новые виджеты для работы с данными и прочие фичи

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


Следуя традиции выпускать новые версии библиотеки с завидным постоянством, разработчики Webix сообщили о выходе регулярного весеннего релиза, на этот раз за номером 3.2. Среди нововведений в этой версии были замечены два новых виджета: SpreadSheet, который, как видно из названия, служит для создания экселеподобных таблиц, а также RangeChart, позволяющий выбрать для отображения определенный участок большого графика. Помимо этого, были добавлены новые возможности, позволяющие расширить функционал уже имеющихся компонентов.

Но обо всем по порядку.
Читать дальше →

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

Что делает программное обеспечение качественным?

Время на прочтение21 мин
Количество просмотров19K
image
КДПВ

Кто-то создает программное обеспечение с открытым исходным кодом, а я провожу много времени размышляя над тем, как сделать программное обеспечение лучше. Бесконечный поток просьб о помощи на форумах Stack Overflow, GitHub, Slack, в электронных письмах и личных сообщениях неизбежен. К счастью, в итоге вы знаете многих людей, которые добились определенного успеха и сделали фантастические вещи, и знание о том, что вы приняли в этом участие благодаря вам и вашей помощи, является хорошей мотивацией для новых достижений.

У вас возникает вопрос: какие качества программного обеспечения приводят разработчика к успеху или к неудаче? Как я могу улучшить свой софт и помочь бо́льшему количеству людей стать успешным? Я могу ясно сформулировать некоторые основные принципы или полагаюсь на интуицию в зависимости от конкретного случая? (Рождение и воплощение одной мысли это два совершенно разных действия).

Возможно это что-то вроде принципов Дитера Рамса, способствующих качественному дизайну программного обеспечения?

  • Хороший проект является инновационным.
  • Хороший проект делает продукт полезным.
  • Хороший проект эстетичен.
  • Хороший проект делает продукт понятным.
  • Хороший проект ненавязчив.
  • Хороший проект честен.
  • Хороший проект длителен.
  • Хороший проект продуман до мельчайших деталей.
  • Хороший проект безвреден для окружающей среды.
  • В хорошем проекте дизайна настолько мало, насколько это возможно.
Читать дальше →

Парсеров всем! Анализируем и тестируем существующие HTML парсеры

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


Всем привет!

После публикации предыдущей статьи на почту прилетело не мало писем с просьбой показать и доказать, чем же одно решение лучше другого.
Я, воодушевленно принялся сравнивать, но всё, как обычно, немного сложнее, чем кажется с первого взгляда.

Да, в этой статье я предлагаю выложить все парсеры на стол и измерить!

Приступим!

Яндекс убивает бизнес, или будьте осторожны с блоком #main

Время на прочтение3 мин
Количество просмотров67K
UPD 16.03.2016: Новая версия аддона больше не убивает!

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

Суть в том, что пару месяцев назад нам стали поступать запросы от пользователей, с жалобой, что они не могут разместить объявление на сайте, потому что футер наезжает на кнопку «добавить», со скриншотами, типа таких:



Казалось бы, просто поехала верстка, футер стал наезжать на контент, при чем тут Яндекс?
При чем же здесь Яндекс?

Кризис ожирения сайтов

Время на прочтение30 мин
Количество просмотров123K
Примечание переводчика: визит под кат этого поста означает большие объёмы потреблённого трафика. И это иронично, если учесть поднятую тему. Но всё сразу встаёт на свои места, если помнить, что в оригинале это было выступление в прошлом ноябре в Сиднее длиной почти в час. Чтение поста занимает куда меньше времени. В форме видеозаписи (1280×720) речь занимает два гигабайта. Пост же занимает всего лишь 12 МиБ. Рекомендуется просмотр на широких мониторах.



Перед началом тирады я хотел бы обратить внимание на то, что прекрасные сайты бывают любых форм и размеров. И я здесь не собираюсь кого-то пристыживать за количество использованных бит, объём использованных ресурсов и так далее. Я люблю большие сочные галереи изображений, мне нравятся огромные эксперименты на JavaScript, я смотрю онлайн-видео в высоком разрешении, как и все вы. Я считаю, что подобное замечательно.

Выступление совсем не об этом. Я хотел бы поговорить об этом общественном кризисе здоровья, этом ожирении сайтов. Отличные дизайнеры, которые задумываются о вебе как я или даже больше, почему-то делают страницы, которые становятся больше. Речь пойдёт о текстовых в своей основе сайтах, которые по каким-то непостижимым причинам с каждым годом становятся всё больше и больше.
Читать дальше →

Подборка материалов для начинающего разработчика игр на JavaScript

Время на прочтение2 мин
Количество просмотров10K
Предоставленные ниже материалы затрагивают лишь основы, то самое начало, с которого можно стартовать человеку, решившему создать игру но не знающему с чего начать. Хорошим вариантом будет изучение соответствующей литературы, статей или же рассмотрения примеров уже готовых игр, а так же просмотр исходников разных программ и решений.

Данные материалы не претендуют на то, чтобы показать «как надо делать», они лишь помогут наглядно понять, что и как работает, а вот как правильно это сделать — решит только сам разработчик. Однако, кого-то эти материалы могут замотивировать на дальнейшую работу, так как они достаточно наглядны и объясняют простоту создания игр на JavaScript.
Читать дальше →

Туториал по Jade для начинающих

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


Jade — это препроцессор HTML и шаблонизатор, который был написан на JavaScript для Node.js. Проще говоря, Jade — это именно то средство, которое предоставляет вам возможность написания разметки совершенно по новому, с целым рядом преимуществ по сравнению с обычным HTML.
Читать дальше →

Знакомимся с веб-стандартами. Работа с аудио. — Видео и история создания

Время на прочтение3 мин
Количество просмотров10K
Всем привет! Специально для тех, кто только знакомится с веб-технологиями и новыми веб-стандартами мы подготовили вводный 15-минутный ролик, рассказывающий про работу с аудио в вебе (HTML Audio и Web Audio).



Когда мы начали показывать ролик экспертам с рынка, один из первых же вопросов был про то, как такой ролик создавался, сколько времени затратили и что использовали.

Под катом дробности создания ролика