HTML *

Главным драйвером роста веба на рубеже тысячелетий было потребление контента. Сайты создавались для предоставления своим посетителям какой-либо полезной информации или развлекательного содержимого. Но в последние годы резко выросло значение веб-ресурсов, предоставляющих пользователям сервисы генерации контента (текстовые и графические редакторы, электронные таблицы, мессенджеры и т.п.). Это вызвало трансформацию сайтов в одностраничные приложения и миграцию в веб сложных интерфейсов, которые ранее были прерогативой прикладных программ.

Доброго времени суток, уважаемые хабравчане. Недавно Hugo Giraudel, он же CSS гоблин, SASS хакер и Margin псих опубликовал в своем блоге очень интересную CSS задачку на смышленость.



Сможете заверстать подобное учитывая следующие правила?

• Круг в центре должен быть прозрачным, чтобы был виден background
• Расстояние между левыми и правыми блоками, как между верхними и нижними должно быть одинаковое
• При наличии потомков в блоке, содержимое должно отображаться
• DOM должен выглядеть следующим образом: ul > li > section > header + footer
• Нельзя использовать JavaScript и изображения
• Дополню еще от себя: нельзя использовать CSS Shape и Clip Path

Чтобы не было очень лень — каркас уже есть.

Сделали?

Всё больше полезных программ удаётся портировать на открытые веб-технологии. До сих пор среди них не было редактора шрифтов. Теперь есть: Glyphr.



Профессиональный софт для проектирования шрифтов — это сложные и дорогие программы. В отличие от них, интерфейс Glyphr вполне доступен для каждого желающего, а само приложение совершенно бесплатно.

Часто ли ты вставлял <blink> в <marquee> тег? Это сейчас Pixar получает все награды, а тогда в 90-х именно этот метод был наивысшим искусством в анимации. Ты был новатором, если совмещал эти теги; личностью, создающей инновацию; человеком, которому все подражали.

Ты был разработчиком в 1990-х.

Но с таким статусом ты понимал, что делал полную хрень, поскольку распространял ужасные стандарты по всему интернету, к которым мы не возвращались с тех самых пор.

Отложим jQuery в сторону, отвлечемся от нереляционных баз данных… У нас есть более важные вещи, о которых и пойдет разговор.

Divine Elemente

Один из самых потрясающих проектов, которые я встречал за последнее время. Плагин Divine Elemente дает возможность дизайнерам создавать WordPress темы без каких либо навыков фронт/бэк-енда. К сожалению у меня не было возможности поработать с ним. Он доступен только для Windows. Для того что бы все работало необходимо создавать макет в соответствии со встроенным blueprint — это некий Bootstrap, Boilerplate или даже набор инструкций по наименовании слоев и групп. Разработчики обещают множество всего хорошего, в том числе: SEO friendly, валидную и семантичную верстку, читаемый код. Впечатляет!

Один славный малый Matt West c туманного альбиона, промышляющий фрилансом и предпринимательством, предложил нашему вниманию пост: «Как использовать секционные элементы HTML5».
Ниже приводится его перевод.

---

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


Добрый день, союзники!

Мне, как верстальщику, приходится ежедневно сталкиваться с различными CSS3 свойствами, которые, хочется мне или нет, приходится использовать так, чтобы они корректно отображались во всех современных и несовременных браузерах. Само собой, у меня собралась некая библиотека, которую я использую при верстке различных проектов. Собирал я свою коллекцию, из различных ресурсов и форумов, на безграничных просторах сети Интернет, так что неудивительно, если кто-то уже сталкивался с чем-то в отдельности.

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

«Не надо, я сам»
Хромой Итальянец

Постановка задачи

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

Сразу дали понять, что партнёры, хоть и партнёры, но размещать у себя что-либо сложное не будут, то есть про jQuery забыли. Стандартное решение – iframe с минимальной функцией resize на голом JavaScript.

На данный момент на хабре около 350 хабов. Функционал сайта позволяет сортировать их по имени и по индексу. А по другим параметрам — например по количеству постов — нет, а хотелось бы.

Меня вдохновила статья рейтинг постов хаба, и я решил сделать похожую, но составить уже рейтинг самих хабов.

В первой половине статьи я представлю вам рейтинги хабов и компаний, а также небольшой их анализ. А во второй — подробно распишу, как я на Java с помощью библиотеки JSoup парсил HTML страницы хабры, с какими интересными явлениями и проблемами столкнулся. И в конце статьи выложу полный исходный код программы.

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

Торнадо началось не с логотипа. Не с моделей… Торнадо началось с вектора движения. С идеи и горящих глаз. Проект, призванный облегчить жизнь не узкому кругу лиц, а всем, кому сможем.
Началось все с простого… Таблица, поля ввода…

Введение

Уважаемый читатель, эта статья является второй частью цикла статей, посвященных вёрстке.

В первой части мы верстали шаблон Corporate Blue от студии Pcklaboratory с помощью стандартных средств на чистом HTML и CSS. В данной статье мы попробуем сверстать этот же шаблон, но с помощью CSS фреймворка Bootstrap 3.

Друзья, просто небольшой опрос, чтобы понять — имеет ли смысл рассказывать об этой теме, и на каком уровне рассказывать.
Если у вас есть опыт использования Веб Компонентов или только Пользовательских Элементов — пожалуйста, расскажите об этом в комментариях.
Буду очень благодарен ответам.

Вчера вышла [весьма достойная статья про Web Components, и я понял, что не могу не поделиться тем опытом, что я накопил за последние восемь месяцев. Я не буду рассказывать о том, как работать с Веб Компонентами, я расскажу, почему. Поэтому тем, кто не знает об этом стеке технологий, стоит прочитать статью по ссылке выше.
Дело в том, что в июне вышла первая стабильная версия моей библиотеки CornerJS. Начавшись как автономная реализация директив из AngularJS, она постепенно превратилась в более простой — как в использовании, так и в реализации — аналог (неточный, да, я знаю) Пользовательских Элементов из спецификации Веба Компонентов.

Я прошел через большое количество узких мест, а сейчас эта библиотека используется в нескольких больших и не очень проектах в реальных условиях.

Это замечательная, на мой взгляд, в реализации библиотека — я действительно считал ее основным инструментом в разработке, и в последнем проекте (видеопортале) она оказалась важнее jQuery: от него я мог бы отказаться, а от нее нет.

Но я, как человек, внедривший ее в нашу команду, и отказываюсь от нее — мы переходим на Mozilla X-tags для IE9+ сайтов и Polymer для IE10+ сайтов. К счастью, на моей памяти у нас был всего один или два проекта IE8+.

И в этом посте я расскажу, почему веб-компоненты — это не просто будущее веба. А единственное будущее веба.

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

За эталон, к которому я стремился при разработке, был взят проигрыватель http://www.yabla.com (не буду скрывать, изначально планировалось склонировать ресурс целиком, но проект не завёлся). Этот проигрыватель обладает следующими особенностями:

1. навигация по таймлайну осуществляется не с точностью до секунды, а с точностью до предложения. Человеку, изучающему язык по видеороликам, часто приходится проматывать видео назад, чтобы несколько раз переслушать неразборчивую фразу и гораздо удобнее одним кликом переместиться к началу фразы, а не искать её начало несколькими кликами.
2. Каждая фраза может быть зациклена, чтобы прослушать её многократно.
3. Разбивка таймлайна на фразы не требует от редактора какой-то особой подготовки: данные о таймингах выбираются из стандартного srt-файла с титрами.
4. Титры на всех доступных языках выводятся под видеороликом (при желании могут быть скрыты). Эта особенность позволяет, например, показывать пользователю титры на языке оригинала видео и на родном языке пользователя. Клик по слову в титрах ставит видео на паузу и показывает пользователю перевод слова, по которому сделан щелчок.
5. Таймер показывает не только время от начала видеоролика, но также номер фразы и общее число фраз в ролике.
6. Скорость проигрывания ролика может быть замедлена или ускорена.
7. Переход между фразами возможен не только кликом по таймлайну, но и при помощи хоткеев Ctrl + стрелки влево/вправо. Другие горячие клавиши: пробел — зациклить фразу/снять зацикливание, Ctrl + стрелки вверх/вниз — изменение скорости ролика.

Спустя какое время стало ясно, что основная идея Prototype вошла в противоречие с миром. Создатели браузеров ответили на возрождение Javascript добавлением новых API, многие из которых конфликтовали с реализацией Prototype.

— Sam Stephenson, создатель Prototype.js, You Are Not Your Code

Создатели браузеров поступают гармонично. Решение о новых API принимают с учётом текущих трендов в opensource сообществах. Так prototype.js способствовал появлению Array.prototype.forEach(), map() и т.д., jquery вдохновил разработчиков на HTMLElement.prototype.querySelector() и querySelectorAll().

Код на стороне клиента становится сложнее и объёмнее. Появляются многочисленные фреймворки, которые помогают держать этот хаос под контролем. Backbone, ember, angular и другие создали, чтобы помочь писать чистый, модульный код. Фреймворки уровня приложения — это тренд. Его дух присутствует в JS среде уже какое-то время. Не удивительно, что создатели браузеров решили обратить на него внимание.

Здравствуйте Уважаемые хабра-пользователи!

Во-первых, всех с уже наступившем Новым Годом. Желаю Вам добра и развития в Вашей области деятельности!

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

Добрый времени суток.

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

Веб сегодня все больше и больше семантический. Но что означает «семантический»? Почему это важно?

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

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

Ок, итак семантическая разметка — это хорошо, но как ее использовать. Лучше всего начать с замены обычных тегов на более выразительные. Давайте посмотрим восемь элементов, которые позволят вам войти в эту игру.

Вроде закончилась неделя 30 строк кода и взамен ей видимо пришла неделя "БЭМ". Причем прослеживается достаточно забавная очередность топиков:

• Верстаем веб-страничку за 15 мин.
• На БЭМ'е было бы лучше!
• Сами вы ешьте свой бем, у меня препроцессоры!

И самое интересное, как всегда, в комментариях — чистой воды холивар. Но из-за чего? Почему одни свято верят в методологию БЭМ'а, другие презирают её как узурпатора семантичности? Я попробую изложить свою точку зрения на суть всего холивара и прояснить в первую очередь для себя положение БЭМ'а в собственном мироздании.

Я хотел написать комментарий к статье о том куда отправляются хорошие верстальщики, но мне стало лень. А потом опять стало не лень, но мыслей накопилось уже на целый пост.

Возьмем самый первый попавшийся пример из приведенной статьи. Там в макете, в самом верху, есть полоска на всю ширину окна:



Автор принимает решение сверстать эту полоску с помощью тега

---

, вот так:

<body class="whitesquare">
  <hr/>
  <!-- вся остальная страница -->
</body>

.whitesquare hr {
  /* стили для полоски  */
}

Это просто супер пример несоблюдения моего правила.