Обновить
61.31

HTML *

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

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

Как я использую SVG-спрайты

Время на прочтение6 мин
Охват и читатели66K
Привет, разработчик!
При верстке макета из PSD часто иконки вставлены в формате SVG. А если нет — прошу их у дизайнера. Ранее я использовал иконочные шрифты, но недавно увидел преимущества спрайтов и решил попробовать с ними поиграться внедрить их в процесс разработки. Мне нравятся иконочные шрифты, но они имеют ряд недостатков(на эту тему почитайте CSSTricks). Эксперимент удался, и вот как я организовал систему.
Читать дальше →

Codecha — программистская капча, или как не надо проектировать API

Время на прочтение17 мин
Охват и читатели7.2K
На своем сайте я использую Codecha — программистскую капчу. Это уникальная капча, для решения которой требуется написать тело функции, решающей поставленную задачу, на одном из выбранных языков программирования.

КДПВ —  виджет этой самой капчи

Она не обеспечивает столь же надежной защиты от ботов, как, например, Google reCAPTCHA (набор заданий ограничен и их довольно быстро можно прорешать, а затем отдавать готовые ответы), но зато помогает против не-программистов (для определенной категории форумов толпы студентов, просящих выполнить их лабораторную работу — настоящая проблема, хуже спам-ботов). Но заметка не об этом.

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

Создание десктопного приложения с помощью Electron и веб-технологий

Время на прочтение4 мин
Охват и читатели68K
Знакомство с Electron

Официальная страница проекта Electron.

Изначально Electron был разработан для редактора Atom компанией GitHub.

Electron (ранее известный как Atom Shell) позволяет нам создавать кроссплатформенные приложения, используя HTML, CSS и JavaScript. Что является большим плюсом для команд, которые занимаются веб-разработкой. Отпадает надобность искать новых разработчиков для создания десктопных версий уже существующих проектов.

Electron являет собой прекомпилированый бинарник и библиотеки, нужные для работы приложения и доступа к native API операционной системы. Он включает в себя Node.js, направленный на работу в десктопной среде, и минимальную версию браузера Chromium, контролируемого JavaScript.
Читать дальше →

Приглашаем на Web Standards Day в Москве, 13 декабря

Время на прочтение1 мин
Охват и читатели2.7K
Всем привет!

Web Standards Day, 13 декабря, Москва
Иконки
Иконка кремля — Kremlin by parkjisun from the Noun Project
Логотипы WSD — github.com/web-standards-ru

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

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

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

Как создать круглую Progress Button

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

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

Прогулка с динозаврами: как я адаптировал веб-приложение под IE 7

Время на прочтение10 мин
Охват и читатели13K
image

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

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

Организация кнопок на сайте с помощью Sass

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


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

Минификация проекта, созданного в Blocs 1.5.2, с помощью Gulp

Время на прочтение5 мин
Охват и читатели12K


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

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

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

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

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

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

Создаём интерактивную векторную схему московского метро

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


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

Онлайн-компиляция на статическом сайте, рецепт для начинающих

Время на прочтение6 мин
Охват и читатели29K

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

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

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

Понятно и просто про веб-компоненты и Polymer

Время на прочтение9 мин
Охват и читатели49K


Кто я

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

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

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

Вступление

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

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

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

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

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

Генерация html на PHP

Время на прочтение2 мин
Охват и читатели24K
Предлагаю вашему вниманию свое решение по генерации 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-модули

Время на прочтение3 мин
Охват и читатели72K
Какими CSS обладает особенностями, которые приносят боль на больших проектах?

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

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

Возьмем простой пример: кнопка и ее состояния.
Читать дальше →

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

БЭМ — методология развешивания костылей

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

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

Продолжаем бороться с frontend-рутиной

Время на прочтение7 мин
Охват и читатели37K
image

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

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

<input> Я ♥ тебя, но ты меня обламываешь

Время на прочтение5 мин
Охват и читатели54K

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


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


Ранние годы



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

SVG-иконки – много и со стилем

Время на прочтение14 мин
Охват и читатели51K

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

Как создать свой собственный браузер для Windows 10 на HTML и JavaScript

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

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


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

Детективная история — Что общего между auto.ru и brazzers?

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

image

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

Рецепт вращения планет в космосе на HTML5 + JavaScript

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

Вычеркиваем


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


CANVAS в помощь!


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