Уровень подготовки веб-мастера: средний/высокий

Нам нравится работать с данными. Мы уделяем много времени изучению аналитической информации о наших веб-сайтах. Любой веб-разработчик, которому это тоже интересно, наверняка заметил, насколько увеличился в последнее время объем трафика с мобильных устройств. За последний год значительно вырос процент просмотров страниц наших основных сайтов со смартфонов и планшетных ПК. Это значит, что все больше посетителей используют устройства с современными браузерами, поддерживающими последние версии HTML, CSS и JavaScript. Однако ширина экранов таких устройств обычно ограничена 320 пикселями.

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

1. четкое отображение страниц на экране с любым разрешением;
2. возможность просмотра группы контента на любом устройстве;
3. отсутствие горизонтальной полосы прокрутки независимо от размера окна.

Для многих из нас, разработчиков, WebKit — черный ящик. Мы бросаем в него HTML, CSS, JS и кучу изображений, и WebKit, как-то… магически, выдает нам веб-страницу, которая выглядит и работает хорошо.
Но на самом деле, как говорит мой коллега Илья Григорик:

Веб-кит не является черным ящиком. Это — белый ящик. И не просто белый, но и открытый ящик.

Предупрежу заранее, что я совершенно не считаю себя экспертом HTML/CSS/JS. Но, как архитектору, мне всегда была интересна организация и систематизация кода в самых разных его проявлениях, в том числе и представленных в виде CSS. Особенно сильно этот интерес был подогрет БЭМом, при первом знакомстве с которым подсознание отреагировало когнитивным дискомфортом. А поскольку БЭМ-стиль в проектах у меня стал появляться все чаще, я почувствовал острую необходимость осмыслить, наконец, свое отношение к организации стилей. Таким образом и появился данный топик-размышление, топик-дискуссия. Я понимаю, что взялся за пограничную задачу, поскольку далеко не всем верстальщикам знакомы тонкости объектно-ориентированного дизайна, а большинство архитекторов не написали ни одного CSS-стиля. И, как результат, мне пришлось неуклюже балансировать, чтобы было понятно всем. Но 'этот риск еще больше подогрел мой интерес к теме :)

Update: Часть сведений в данной статье устарели. Рекомендую свежие материалы на css-live.ru.

Введение

Модуль CSS3 Grid Layout — это один из самых интересных, на мой взгляд, модулей в семействе CSS3. Официальная история модуля в виде черновика спецификации насчитывает сегодня чуть менее года. О предварительном анонсе еще с названием CSS Grid Alignment на TPAC 2010 Владимир Юнев писал еще в декабре 2010. Надо также отметить, что с чуть другим названием и несколько отличным синтаксисом, но с той же сутью, он был заявлен в качестве WD еще в 2007г. Сегодня работы по доводке модуля идут полным ходом, предварительная реализация уже есть в Internet Explorer 10 и есть надежда, что поддержка новых возможностей также появится в будущих версиях других популярных браузеров.

Зачем нужен Grid Layout?

Задача, которую решает модель CSS3 Grid Layout, очень проста и понятна любому веб-верстальщику (да и не только ему): предоставить удобный механизм расположения контента по виртуальной сетке.

В отличие от старых табличных подходов, основанных на использовании table, здесь не замусоривается семантика документа и представление четко отделено от содержания. В отличие от различных вариаций блочной верстки со становящимися при сколь-нибудь сложной структуре безумными и многоэтажными float'ами в сочетании с вручную просчитанными отступами, здесь описание стилей становится тривиально простым и прозрачным. В отличии от абсолютного позиционирования с привязкой к координатам, здесь сохраняется гибкость. В отличие от популярных сегодня css/js-библиотек для разметки по сетке путем указания соответствующих классов (взять хоть те же bootstrap или yui css grids), здесь не замусоривается привязка классов.

Сплошное удовольствие! Осталось только дождаться широкой поддержки :) Впрочем, если вы планируете делать приложения в стиле Metro для Windows 8 на html/js, ключевые возможности, описываемые в модуле CSS3 Grid Layout, уже работают — и можно двигаться вперед, используя удобные и практичные механизмы.

Для перемещения элемента по экрану есть два основных способа:

• CSS 2D-преобразования и translate();
• position:absolute и изменение top/left.

Крис Койер недавно писал, почему лучше и логичнее использовать translate (это быстрее, и свойство position имеет большее отношение к вёрстке, а не к визуальным эффектам и анимации, в отличие от translate).

Я хочу расширить его ответ и привести несколько хороших примеров. Я записал скринкаст, в котором помощью Chrome DevTools timline рассматриваю различия между этими подходами с точки зрения производительности, особенностей рендеринга и композитинга на GPU.



Если вам нужна сокращённая текстовая версия — продолжайте читать.

Давно хотел попробовать Haml, но всё не было времени. Но вот недавно обнаружил новый шаблонизатор, который мне сразу понравился. По словам создателей, он взял лучшее от Jade и Haml. Основная задача — сократить объем кода, при этом не делая его страшным и непонятным.

Вот так выглядит шаблон с использованием Slim:

doctype html
html
  head
    title Slim Examples
    meta name="keywords" content="template language"

  body
    h1 Markup examples
    #content.example1
      p Nest by indentation

    = yield

    - unless items.empty?
      table
        - for item in items do
          tr
            td = item.name
            td = item.price
    - else
      p No items found

    #footer
      | Copyright © 2010 Andrew Stone

    = render 'tracking_code'

    script
      | $(content).do_something();

Редко в московском офисе Яндекса в 10 утра бывает столько разработчиков, сколько их было утром субботы 24 ноября. И это был не очередной Я.Субботник, как вы могли подумать, а встреча Web Standards Days. В этот раз её совместными усилиями организовали Яндекс и объединение разработчиков «Веб-стандарты» при поддержке W3C.

Мы поговорили с организаторами WSD и некоторыми докладчиками, в том числе представляющими W3C. Они рассказали о том, как появилось мероприятие, какие задачи оно призвано решать и над чем они сами сейчас работают.



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

Это первая часть перевода статьи What Every Programmer Absolutely, Positively Needs To Know About Encodings And Character Sets To Work With Text

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

Эта статья о кодировках и наборах символов.

Подборка простых jQuery-сниппетов и плагинов, которые помогут адаптировать сайт для отображения на iPad. Некоторые подойдут и для других тач-устройств.

Уважаемые читатели!
Как психолог я чувствую необходимость и считаю своим долгом вселить веру в IT-специалистов и поделиться своим видением назревших проблем. В начале XXI столетия без ваших способностей и ваших идей сложно будет обойтись. Очевидно, что виртуальная информационная сеть растет и совершенствуется с огромной скоростью по всему миру, расширяет возможности развития и существования общества в целом, но и накладывает все новые и новые поведенческие шаблоны. Развитие компьютерных технологий – хороший бизнес, как за рубежом, так и в Украине. Одно только смущает: где же во всем этом процессе человек? Да-да, обычный программист, а есть ли среди них «обычные»? А дальше о главном и коротко.

За годы работы мы в Storelab Data Recovery собрали небольшую коллекцию мифов об утере и восстановлении данных. Некоторые из них активно тиражируются на различных компьютерных и не очень форумах — поэтому, надеемся, эта статья будет полезна тем, кто ищет помощи, когда сломался диск или потеряны данные. Итак, пост о том, как не сделать трудную ситуацию ещё хуже.


На фото — результат «охлаждения» жёсткого диска

На написание этого поста меня вдохновил вот этот вот пост.

В своем же посте я хочу чуть рассказать об обучении в США и параллельно показать свою точку зрения на то, как это делать лучше. Все ниже сказанное относится более к компьютерным наукам (Computer Science), хотя есть некоторые общие утверждения.

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

UICloud — это база бесплатных пользовательских интерфейсов с поисковой системой, рейтингом и каталогизатором в которой собрано все от исходников в формате PSD, до готовых решений на HTML, CSS или jQuery: формы, слайдеры, кнопки, календари, элементы и полноценные интерфейсы для мобильных и веб приложений. В проекте уже сейчас можно найти практически все что нужно для облегчения процесса разработки дизайнерам и разработчикам.

На данный момент в базе 23586 элементов и почти тысяча UI-сэтов включающие в себя готовые решения в едином стиле. Проект создан Британской студией Double-J Design целью проекта является создание самой обширной UI базы.

Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.

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


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

Пару месяцев назад я случайно наткнулся на массу положительных отзывов о текстовом редакторе Sublime Text 2. Попробовав его в деле, я не разочаровался. Теперь это мой основной рабочий инструмент.

Sublime Text 2 — это платный текстовый редактор, написанный на C++, который:

• Работает в Linux, OS X и Windows
• Обладает приличной скоростью работы
• Приятным интерфейсом (включая всевозможные анимации)
• Гибко настраиваем (правда, не в GUI, а в json-конфигах)
• Имеет множество плагинов, число которых растёт как на дрожжах
• Поддерживает VIM-режим
• Использует fuzzy-поиск

Доброго всем дня, вечера, здравствуйте, коллеги.

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

Я бы хотел рассказать об особенностях freelance-занятости для людей, которые никогда этим не занимались, но хотели бы иметь набор полезных советов, когда захотят попробовать. Приступать к какому-либо делу подготовленным — всегда хорошая идея.

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

Вопрос только в том, действительно ли такая программа помогает защитить учетную запись пользователя? Этот аспект интернет-безопасности, конечно, не настолько важен, как некоторые другие, например:

• предотвращение взлома веб-страниц за счёт нарастающей задержки или использования CAPTCHA;
• предотвращение офлайн-взлома путем применения достаточно медленной хеш-функции с индивидуализированной на уровне пользователя «солью»;
• защита хешей паролей.

Страница результатов поиска — одна из самых популярных страниц Яндекса. Её загружают около 130 миллионов раз в день. Это при среднем размере страницы в 25КБ дает нам 3ТБ трафика в сутки.

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

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



Сегодня мы начинаем эксперимент с новой страницей результатов поиска. И для этого мы выбрали нашу площадку для тестирования поиска по мировому интернету — yandex.com.