Обновить
98.97

HTML *

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

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

Несколько интересностей и полезностей для веб-разработчика #14

Время на прочтение3 мин
Охват и читатели33K
Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

FastClick.js


Nota Bene. Практически всегда страница в браузере на вашем тач устройстве реагирует недостаточно быстро. Все из-за задержки в 300ms, чтобы убедиться, что это не double tap. FastClick.js — это полифил, который избавляет пользователей вашего сайта от этой задержки.

Кстати, это репозиторий от разработчиков известнейшего Financial Times и у них же есть еще один полезный проект на GitHub — ftscroller, с помощью которого легко создать адаптивный скроллинг и мульти-скроллинг для любого эленмента.

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

Управление JavaScript UI-потоком с помощью планировщика WinJS

Время на прочтение15 мин
Охват и читатели3.7K
От переводчика: в статье рассказывается о новом планировщике задач в библиотеке WinJS 2.0, обновившейся вместе с выходом Windows 8.1. Для понимания части материала крайне желательно понимание работы с отложенными результатами (Promise). См. раздел MSDN, посвященный асинхронному программированию на JavaScript.

Не считая рабочих веб-процессов (web workers) и фоновых задач, которые также выполняются как отдельные веб-процессы, весь JavaScript-код в приложениях для Windows Store выполняется в общем так называемом UI-потоке. Этот код может делать асинхронные вызовы WinRT API, которые выполняют свои операции в отдельных потоках, но есть один важный момент, о котором нужно помнить: результаты из этих не-UI-потоков возвращаются назад для обработки в UI-поток. Это означает, что запуск серии асинхронных вызовов WinRT (например, HTTP-запросов), — всех сразу, — может потенциально перегрузить UI-поток, если результаты от них придут примерно в одно и то же время. Более того, если вы (или WinJS) добавляете элементы в DOM или изменяете стили, которые требуют обновления компоновки страницы в UI-потоке, это создает еще больше задач, конкурирующих за ресурсы CPU. Как результат ваше приложение становится «тормозящим» и неотзывчивым.

В Windows 8 приложение может предпринять ряд шагов для снижения таких эффектов, например, запускать асинхронные операции в рамках временных блоков, чтобы управлять частотой возвратов в UI-поток, или объединять вместе задачи, требующие цикла обновления страницы, чтобы за один проход выполнялось больше операций. Начиная с Windows 8.1, появилась возможность асинхронно расставлять приоритеты разным задачам непосредственно в UI-потоке.

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

Отзывчивый дизайн. Реакция на уровень освещенности

Время на прочтение2 мин
Охват и читатели27K
Media Queries

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

Теперь эта возможность потихоньку перебирается и в движки мобильных браузеров.

В статье будет рассмотрен пример реагирования веб-старницы в браузере на окружающую освещенность.
Читать дальше →

Добавляем кириллицу в шрифт Source Sans Pro для Bootstrap-темы Lumen

Время на прочтение4 мин
Охват и читатели32K
В каталоге бесплатных тем для Bootstrap есть симпатичная тема Lumen, в ней используется шрифт Source Sans Pro, в котором «из коробки» отсутствует кириллица. Эту проблему можно частично решить самостоятельно, скомпилировав шрифт из исходников. Почему частично — см. заключение.

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

Несколько интересностей и полезностей для веб-разработчика #13

Время на прочтение4 мин
Охват и читатели46K
Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

Colour Schemes


image
Репозиторий уже набрал более 4000 старов на GitHub. Автор проекта — Dayle Rees — один из участников команды Laravel PHP, где люди убеждены, что «код должен приносить удовольствие разработчикам, а не только пользователям, принимающим вашу трудную работу». Сolour Schemes на сегодняшний день это 56 различных тем для: Sublime Text (2 & 3), Sublime Text UI (2 & 3), Textmate, Coda 2, VIM, Jetbrains Editors (inc. PHPStorm), Google Code Prettify, Highlight.js и Xcode.

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

Google отказывается от подчеркнутых ссылок

Время на прочтение1 мин
Охват и читатели52K
С 13 марта Google отказывается от использования подчеркивания в ссылках (в результатах поиска). Стоит напомнить, что с 1990-ых годов «кликабельные» элементы выделялись подчеркиванием.

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


Новый и старый вид

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

Инкапсуляция CSS-стилей — Часть 1. Проблема

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

Магический круг: CSS головоломка

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

image

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

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

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

Сделали?

А тремя способами?

Бесплатный редактор шрифтов на HTML5

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



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

Только разработчики 90-х помнят это

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

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

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

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

Лучшие бесплатные Photoshop плагины для веб-дизайнеров

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

Divine Elemente


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

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

Как использовать секционные элементы HTML5

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




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

Набор кроссбраузерных CSS3 свойств

Время на прочтение5 мин
Охват и читатели53K
Добрый день, союзники!

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

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

В любом случае, добро пожаловать!

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

Bootstrap Modal Iframe Костыль

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

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

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


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

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

Подробности, пример, код

Рейтинг хабов и компаний по постам/подписчикам

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

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

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


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

Начало проекта глазами разработчика

Время на прочтение6 мин
Охват и читатели6.9K
В этом посте я, как новичок в деле веб-дизайна, программирования и верстки, хотел бы рассказать о сложностях, с которыми столкнулся.
Вступление
Подошел к концу третий месяц нашего сотрудничества с шефом… В общем-то, раньше я его иначе как знакомого не воспринимал… Но надо по порядку.
Я живу в двух городах. Уфе и Москве. Это трудно… Особенно в плане работы. Почему так сложилось — история другая. Я начинающий фрилансер.… И тут мне пишет друг. На тот момент мы были не особо-то близкими друзьями… Он предлагает сделать сайт. В отсутствии денег в кармане, я хватаюсь за нитку большого проекта, даже не понимая, во что он выливается для меня как для новичка.
С первых дней стало понятно, что намерения у друга серьезные. Являясь типичным примером ленивого кодера, я прилагал немного усилий, понимая что это надолго.
Вот тут-то и начинается наша история. Она началась с ТЗ.
Периодически я беру заказы на различные небольшие работы. Разработать дизайн, собрать его, сделать пару модулей, модифицировать что-то… В общем-то, по мелочи. И сейчас, уже обладая опытом общения, я могу радостно заявить, что мой шеф — редкий случай заказчика, умеющего конкретизировать свои мысли, расставить точки над “i” и войти, по-моему, в любое положение исполнителя.

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

Как сверстать веб-страницу. Часть 2 — Bootstrap

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

Введение


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

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

Используете ли вы Веб Компоненты?

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

Web Components — это единственное светлое будущее веба. Смиритесь

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

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

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

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

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

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

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

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

Время на прочтение4 мин
Охват и читатели13K
MediaElement language learning plugins

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

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

Подробности в продолжении