Всем привет!



Многие из вас, наверняка, в курсе активностей сообщества "Веб-стандарты" и уже знают, что конференция Web Standards Day после двухлетнего перерыва снова возвращается в Москву и состоится уже менее чем через две недели — 13 декабря.

Мы же спешим рассказать о двух вещах:

1. Регистрация очень скоро закроется. На самом деле, если вы поторопитесь, то уже сегодня.
2. На сайте опубликована программа с девятью докладами и одним мастер-классом от экспертов и разработчиков из Avito, EPAM Systems, Opera, Acronis, Hackraft, Microsoft и Яндекса.

Урок по реализации круглой кнопки загрузки (далее progress button) by Colin Garven. Будем использовать, описанную by Jake Archibald, технику анимации SVG линий для того, чтобы анимировать progress button и показать пользователю состояния «success and fail».

Недавно я решил отправить свой проект, над которым работал в свободное время последние несколько лет, на конкурс в одну компанию. Я сел и стал думать, нет ли каких-то нюансов, которые я не учёл, и которые могут испортить впечатление и уменьшить шансы на успех. И первое, что мне пришло в голову — проект не работает под IE ниже 9 версии. То есть совсем, там стояла блокировка. После логина появлялось окошко с красивым предупреждением, что браузер не поддерживается, и пользователя опять перебрасывало на форму входа. Довольно изящно — но неприятно. Что, если у человека стоит Windows XP, а сторонних браузеров нет? Незадача.

И вот я решил потратить столько времени, сколько будет нужно, но при этом добиться стабильной безошибочной работы системы как минимум в IE 8. Я готов был убрать часть функций, если будет необходимо — но всё должно было выглядеть аккуратно и работать без сбоев. Предвкушая долгие и тяжёлые мучения (уже был несколько раз подобный опыт), я взялся за дело. Если вам интересно узнать, с какими сложностями я столкнулся, и какие изменения пришлось внести в разные компоненты — добро пожаловать под кат.

Довольно часто наши любимые дизайнеры делают в макетах кнопки разных размеров и величин, некоторые из которых повторяются, некоторые нет. Неплохо было бы организовать систему для быстрого добавления и редактирования этих самых кнопок, в чем на могут помочь sass @extend's. Приведу небольшую иллюстрацию кнопок в типичном проекте.

Не так давно узнал о новом для себя инструменте построения сайтов на Bootstrap — Blocs. На хабре не нашел о нем информацию, поэтому позволю себе немного маркетинговых заметок, так как этот инструмент облегчил мне работу.

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

Blocs позиционирует себя как конструктор, который позволяет генерировать код, чистота и качество которого не уступает работе профессионального верстальщика.

Blocs работает как десктопное приложение под операционной системой Mac OS X, и не ограничивает вас количеством создаваемых сайтов, как это делают онлайн-конструкторы.

Blocs на лету делает верстку адаптивной (не всегда, правда, качественно, но так как код читабельный и чистый, легко поправить), также он поддерживает Retina.

Больше о Blocs на официальном сайте. Доступен триал 5 дней.
Программа простая, поэтому этого триала достаточно.

Московское метро меняется. Желающий представить себе схему, скажем, 1945 года без проблем соберёт данные из открытых источников; остаётся вопрос с представлением результата, — не на круговой диаграмме же его показывать. В статье я расскажу об основных шагах в создании proof-of-concept сервиса, позволяющего показать схему метро, например, на 1 мая 74 года (слева) или станции с глубиной заложения больше 30 метров (справа).

Вы несколько лет писали свой проект и теперь хотите привлечь пользователей? У меня есть простой, как холостяцкая яичница с беконом, рецепт специально для вас.

Для приготовления простого сайта вам понадобится:

• репозиторий на GitHub — 1 штука
• готовый html шаблон, для придания приятного вида — 1 штука
• кусочек свежего компилирущегося C++ кода — минимум 1 строка кода
• готовые javascript соусы из магазина — ~500Kb
• картинки и анимашки по вкусу

Меняйте любые компоненты, экспериментируйте и готовьте свои сайты для любимого языка!

Кто я

Я — Александр Кашеверов. По образованию — магистр радиофизики. По профессии — веб-разработчик, работаю в компании DataArt с 2011 года, с 2009 увлекаюсь IT и веб-технологиями.

О чем статья, коротко

Рассмотрим, что такое веб-компоненты и polymer. Немного поразмышляем на тему развития веба. Посмотрим на технические детали, примеры, поддержку браузерами, тестирование. Коротко, понятно, по делу. С картинками.

Вступление

Веб постоянно развивается. Технологии были придуманы и внедрены, исходя из потребностей, актуальных на момент создания. Десять лет назад невозможно было сделать то, что мы реализуем сейчас, и сложно представить, что будет еще через 10 лет.

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

Для уменьшения головной боли хорошо бы, если в контексте веб:

• CSS не пересекался.
• Области видимости JS не пересекались.
• HTML был понятным и читаемым, никаких лишних элементов.

Предлагаю вашему вниманию свое решение по генерации html на PHP. Задача вроде бы тривиальная, но хотелось бы, чтобы это было расширяемо, кратко, но в тоже время с хорошим функционалом. Получилось вроде не плохо.

Сразу скажу( как многие считают в комментариях), что задача ставилось не написать шаблонизатор (которых и так много) и не заменить шаблонизатор JavaScript. Я прекрасно знаю, что true way это разделять html и данные. Но мне понадобилось писать html в классах, для создания компонентов фреймворка, на подобие CGridView в yii, стоит ли в таких местах выносить html в отдельные файлы решать вам.

Основная цель, избавится от html в классах и функциях.

Простой пример, обычная кнопка:

CHtml::create()
    ->p()
        ->a(array('href' => 'http://habrahabr.ru', 'class' => 'btn'))
            ->text('Перейти')
    ->render();

Результат:

<p><a href="http://habrahabr.ru" class="btn">Перейти</a></p>

Ничего хитрого, можно было бы этим и ограничется, но захотелось циклы:

$arr = array('1' => 'Первый', '2' => 'Второй');

CHtml::create()
	 ->select($options)
		->each(CHtml::plainArray($arr, 'value', 'text'))
			->option('array("value" => $data->value)')
				 ->text('$data->text')
		->end()
	->endEach()

Тут понадобилось вызвать функцию plainArray() которая превращает массив в виде:

$arr = array(
    array('value' => '1', 'text' =>'Первый'), 
    array('value' => '2', 'text' => 'Второй')
);

Теги внутри цикла могут содержать функции или строки с eval выражениями, вложенность любая, пример с таблицей:

$columns = array(
    array('id' => 'NAME', 'label' => 'Имя'),
    array('id' => 'AGE', 'label' => 'Возраст')
);

$data = array(
    array('NAME' => 'Петр', 'AGE' => 29),
    array('NAME' => 'Василий', 'AGE' => 32)
);

CHtml::create()
	->table()
		->thead()
			 ->tr()
			->each($columns)
				 ->th()
					->text(function($column){
						 return $column['label'];
					})
                                 ->end()
			->endEach()
 			->end()
		->end()
			->tbody()
			->each($data)
				->tr()
				->each($columns)
					->td()
						->text(function($row, $column) {
	                                              return $row[$column['id']];
						})
					->end()
				->endEach()
				->end()
			->endEach()
->render();

Какими CSS обладает особенностями, которые приносят боль на больших проектах?

• глобальное пространство имен
• разрешение зависимостей
• поиск «мертвого» кода
• отсутствие констант
• неоднозначный результат (каскад)

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

Возьмем простой пример: кнопка и ее состояния.

Впервые я узнал о БЭМ лет 5 назад. В то время все ненавидели IE6, ждали возможности полноценно использовать CSS2 и благополучно забывали табличную верстку. В то время казалось, что когда исчезнет IE6, жизнь верстальщика станет увлекательной и беззаботной. Именно IE6 был основной причиной костылей в верстке. Кто бы мог подумать, что во времена HTML5 и CSS3, когда нет особых проблем с развитием популярных браузеров, ситуация станет еще хуже.

Недавно я обнаружил, что многие существующие проекты уже внедрили БЭМ, а некоторые новые проекты требуют от верстальщика обязательной разработки по БЭМ. То есть профессиональные разработчики уже ставятся перед фактом и не имеют выбора. Раз ситуация складывается таким образом, давайте попробуем разложить все по полочкам без рекламы и приукрашивания.

Прошло полгода с последней новости о TARS на хабре.

Напомню, что TARS — это сборщик html-верстки, основанный на gulp, в помощь любому frontend-разработчику (или даже целой команде), для создания проектов любой сложности. За последние шесть месяцев было закрыто 88 issue, выпущено 7 версий, появился CLI, так вышло, что с yeoman’ом отношения не сложились, поэтому появилась своя версия. TARS переехал в свой новый дом на github, обзавелся командой из 4 разработчиков + небольшой армией фанатов. Кстати, огромное вам спасибо за мгновенные фидбеки после релизов и не только. TARS был внедрен в нескольких вебстудиях России и за рубежом. Сборщик научил компонентному подходу не один десяток разработчиков, привлек в ряды frontend’еров тех, кто боялся всей рутины верстки. В общем, появилось много всего нового, и об этом хотелось бы рассказать.

Привет, представляю твоему вниманию перевод статьи Моники Динкулеску '<input> I ♡ you, but you're bringing me down'. Художественный перевод с английского не является моей основной специализацией, поэтому в тексте возможны неточности. Правки призываю отправлять личным сообщением, а если есть что сказать, велкам в комментарии. Отдельное спасибо @Kt за редакторские правки. Приятного чтения.


Некоторые люди делают мебель. Некоторые люди вяжут. Некоторые люди имеют хобби, которые никак не пересекаются с HTML спецификациям из 90-х. Но я не из таких. И, вот история о том, как <input> стал той хренью, которой он является, и почему его надо сжечь

Ранние годы

1995 был клевым годом. Друзья, Скорая Помощь, Зена по телеку. TLC занимали верхушки чартов с хитом "Waterfalls". С браузерами было нормуль, потому что HTML было все очень нормуль. У нас были Mosaic, Netscape и IE1, а при утверждении спеков HTML 2, наконец, выкроили время для стандартизации форм. Девяносто пятый был годом рождения <input>, и теперь, когда он достаточно взрослый, чтобы покупать в магазине алкоголь, нам нужно поговорить.

Маленький рассказ о том, как наша команда решила организовать иконки в грядущем проекте. Чуть-чуть исторического экскурса, взгляды по сторонам (на PNG и векторные шрифты) и рассказ о том, как мы всё-таки обустроились в итоге.

За последние несколько месяцев мы внесли множество улучшений в движок рендеринга Microsoft Edge (EdgeHTML), делая особый акцент на совместимости с современными браузерами и соответствии новым и грядущим стандартам. Помимо того, что EdgeHTML лежит в основе браузера Microsoft Edge, он также доступен для приложений на Universal Windows Platform (UWP) через элемент управления WebView. Сегодня мы хотим рассказать, как можно использовать WebView для создания своего браузера в Windows 10.

Используя стандартные веб-технологии, включая JavaScript, HTML и CSS, мы создали простое UWP-приложение, которое содержит внутри WebView и реализует базовую функциональность: навигацию и работу с избранным. Подобные приемы могут быть использованы в любом UWP-приложении для прозрачной интеграции веб-контента.

Недавно полез я на сайт auto.ru, в поисках авто. И в друг увидел очень интересный виджет галереи который я уже где-то видел, выглядит он примерно так:



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

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

Вычеркиваем

После непродолжительного подбора различных способов реализации, сразу были исключены варианты:

• с gif-анимацией (из-за низкого качества изображения);
• с Flash (по договоренности, Flash-технологии решили в проекте не использовать);
• с анимацией с помощью JQuery посредством функции $().animate (по причине ее прожорливости).

CANVAS в помощь!

Итак, остановились мы на использовании Canvas и JavaScript, посчитав этот вариант оптимальным для реализации нашей задачи.

В блоге Печкина на Хабре мы много пишем об интересных техниках работы с email-рассылками. Ранее мы рассматривали распространенные ошибки при создании форм в почтовых письмах, а сегодня представляем вашему внимани адаптированный перевод заметки итальянского дизайнера Массимо Кассандро, который решил выяснить, стоит ли вообще применять этот инструмент в верстке email-cообщений.

Большинство fronted-разработчиков, используют ОС Windows или OS X в связи с отсутствием полноценного Photoshop. Но как быть тем, кто неравнодушен к Nix системам? Сейчас и попробуем выяснить, интересующихся прошу под кат.

В нашем блоге мы неоднократно затрагивали тему создания адаптивных почтовых рассылок. В наши дни почти половина всех писем просматривается со смартфонов и планшетов, а значит, необходимо позаботиться о том, чтобы письмо хорошо выглядело на устройствах с разным форм-фактором. Именно для этого в вёрстке и начали использовать медиазапросов (media queries). Однако существует целый ряд препятствий для широкого применения технологии. Сегодня мы по-дробнее взглянем на проблемы при использовании media queries и их возможные решения.