1 Вступление

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

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

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

Итак, задача: реализовать реакцию на события прокрутки мышиного колеса над определённым блоком, то есть не трогая «родной» скролл окна браузера. Реализация должна быть кроссбраузерной и не использовать какие-либо фреймворки.

Забегая вперёд, скажу, что этот экперимент удался вполне, а итоговый результат работает во всех десктопных браузерах, начиная с IE7 (по идее, должно работать и в шестом, но сейчас нет возможности это проверить). Также, хочу выразить благодарность поисковой системе Гугл. Без неё жизнь была бы соткана из уныния и отчаяния.

Зачем нам вообще нужны спрайты?

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

• Во-первых, используя спрайты, мы ускоряем загрузку страницы; в случае использования иконок, можно создать универсальное средство для применения в проектах;
• Во-вторых, не все устройства с высоким ppi (например, Windows Phone 7.5-7.8, Android до 4 версии на стоковом браузере) поддерживают использование webfonts.
• Легкая интеграция, используя специальные сервисы генерации спрайтов

Постановка проблемы или чтобы жизнь малиной не казалась

Используя css-спрайты со множеством элементов встает проблема о создании css-свойств с background-position; Их нужно писать много, иногда очень много. Конечно, нам помогают многие сервисы по генерации спрайтов — они выдают вместе со спрайтом еще и css/less/sass — файл с координатами. Но практически всегда все жестко завязано на пикселях:

• Изменяя размер (например, для retina-экранов) исходного файла-спрайта все «едет»;
• Мы не можем изменять размер элемента-контейнера, куда хотим вставить, допустим, иконку, чтобы эта иконка смасштабировалась: свойства background-size: cover/contain/100% не работают по понятным причинам;

Используя спрайты, подготовленные для 72ppi, на телефонах, планшетах и новых retina-ноутбуках вызывает размытие изображений, и выглядят некрасиво...

Бен Кэменс обнаружил, что в выпадающем списке Shop by Department на сайте «Амазон» ховер-эффект происходит очень быстро, абсолютно без какой-либо задержки. Тем самым происходит нарушение старого, выработанного ещё в 90-х годах прошлого века правила: перед отображением пункта подменю необходим так называемый гистерезис, запаздывание.



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

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

Суть метода сводится к использованию псевдокласса nth-of-type: количество и ширина колонок меняется на экранах разных размеров (Демонстрация).

Недостатки использования классов для первого и последнего элементов

Применять классы .first и .last для колонок в каждой строке для корректного отображения очень утомительно, к тому же возникают проблемы при верстке адаптивно:

“Atmadm” 
Раньше наша работа была кошмаром из нагромождения букв.
“chkntfs”
“dir”



Тогда, в 1984, адаптировав Ксерокс ПАРК ВИМП, Эпл забросила нас вперед на целый галактический прыжок вдаль от этих ужасных командных строк ДОСа, в мир графических пользовательских интерфейсов [ПИ].


Эпл Лиза

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

7 июня EA Games запустили новую версию своего сайта. Интерфейс устроен неплохо, однако веб-шрифты выглядят такиииииими уродскими.

И, кажется, я нашёл решение, позволяющее сгладить шрифт при помощи CSS3-свойства text-shadow. Оно превосходно работает на Windows XP (отображаются ли шрифты ClearType или стандартным методом) и в более старых операционных системах, если браузер современный.



Посмотреть этот фокус.

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

Поддержку новых функций браузерами можно проверить на сайте caniuse.com:

Хотя CSS3 ещё не является стандартом W3C, последние версии браузеров имеют его частичную поддержку. Можно встретить примеры реализующие те или иные свойства CSS3. Но вместе с восторгом многих не покидает также чувство опасения. Связано это в первую очередь с тем, что нет чёткого понимания в поведении браузера при обработке этих свойств. Под катом собрана таблица в которой сравниваются поддерживаемые CSS3 свойства во всех основных браузерах. Кроме этого указывается версия браузера и префикс для кодирования. Шпаргалка в форме изображения, поэтому её удобно скачать к себе на компьютер или мобильное устройство для дальнейшего использования.

Примечание: ниже перевод статьи «Boost Your Hyperlink Power». В ней освещается использование атрибутов rel и rev, а также некоторые микроформаты.

Часть HTML-тегов и атрибуты мы используем каждый день в свой работе. Заголовки, параграфы, списки и картинки являются основой разметки каждого веб-разработчика. Но наиболее распространенным элементом, наверное, будет ссылка — простой тег, который связывает воедино все страницы, создавая ту самую беспорядочную структуру, которую мы называем Всемирная Сеть Интернет (WWW).

Ссылка как она есть

Весь потенциал ссылок заключается в атрибуте href, сокращение от hypertext reference. Он создает одностороннюю связь текущей страницы с другим ресурсом, обычно другой такой же страницей в интернете:

   <a href="http://allinthehead.com/">

Атрибут href находится в открывающем теге a, между открывающим и закрывающим тегами находится текст для описания ссылки:

   <a href="http://allinthehead.com/">Drew McLellan</a>

«Ну и что», — скажите вы. — «Это я все и так знаю», — и будете абсолютно правы! Но у ссылки есть еще кое-что, кроме атрибута href.

Нашей компании уже 6 лет. Она была основана на принципах agile и росла на них. Мы использовали Extreme Programming с самого первого дня, добавили немного Scrum позже и в конце концов переключились на Kanban. Хочется поделиться бесценным опытом и рассказать об изменениях нашего процесса разработки за последние 4 года.

На презентации Adobe CS6 в Самаре я делал доклад о том как мы в компании Parcsis используем Adobe Illustrator для создания веб- и мобильных интерфейсов. Хочу поделиться этим докладом с вами в виде слайдов с комментариями.



Когда показываешь свои работы, зачастую начинающие дизайнеры задают вопрос «А в чем это нарисовано?» Опытные дизайнеры спрашивают такое реже, так как понимают, что одно и тоже можно сделать с помощью разных графических редакторов. Тем не менее, расскажу свою историю…

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



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

Главное отличие AppStori от коллег это совместная работа. По словам со-основателя AppStori Арье Абекассиса, это выгодно отличает сервис для мобильных разработчиков от других многоцелевых крауд-фандинговых платформ, типа Kickstarter или Indiegogo.

От переводчика

С удовольствием ознакомился с этими рекомендациями и теперь предлагаю вам перевод.

Введение

Это руководство описывает правила для оформления и форматирования HTML и CSS кода. Его цель — повысить качество кода и облегчить совместную работу и поддержку инфраструктуры.

Это относится к рабочим версиям файлов использующих HTML, CSS и GSS

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

Мы любим смартфоны и приложения для них, поэтому любовь эта иногда выливается в текст. Этот текст написан креативный директором REDMADROBOT Максом Десятых и призван помочь начинающим и продолжающим дизайнерам интерфейсов мобильных приложений задуматься над важными вещами. Далее — прямая речь.

Readability for iPhone

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

Знаете, я ж могу нажать её.
Не просто нажать, я могу нажать в самый неподходящий момент. Я могу нажать её в середине процесса копирования большого файла, сразу после того, как запустится второй поток.

UPD. Для краткого введения в адаптивный дизайн рекомендую прочитать статью «Как сделать один сайт для всех устройств (Responsive Web Design)».

Перевод крайне ценной статьи «Responsive Web Design Techniques, Tools and Design Strategies» популярного интернет-издания для разработчиков Smashing Magazine.

Еще в январе мы опубликовали статью об адаптивном дизайне «Responsive Web Design: What It Is and How To Use It» (Адаптивный веб-дизайн: Что это такое и как им пользоваться). Адаптивный веб-дизайн продолжает привлекать к себе много внимания, но, учитывая, насколько он отличается от традиционных методов разработки сайтов, он может показаться заоблачно сложным для тех дизайнеров и разработчиков, которые его не пробовали.

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

Техники Responsive web design

1. CSS Transitions and Media Queries
CSS Transitions и Media Queries

Elliot Jay Stocks подробно рассказывает о методе сочетания CSS Media Queries и CSS transitions. Основная идея в следующем: разрабатывая адаптивный сайт с помощью Media Queries, вы постоянно изменяете ширину вашего браузера, чтобы посмотреть, как сайт ведет себя при этом. Но каждый раз, когда отрабатывает один из ваших Media Queries, виден жесткий переход между стилями (первый, например, для десктопов, второй — для планшетов). Почему бы не использовать CSS transitions для сглаживания этих жестких переходов с помощью анимации?

По традиции собирательный пост со всеми найденным на просторах Интернета сайтами и первоапрельскими нововведениями на них. Пополняемый.

Для начала те ресурсы, что обнаружил лично:

• форум студгородка НГТУ hostel.nstu.ru отображается верх тормашками: картинка;
• компьютерный магазин DNS известил о приеме на работу знаменитого в рунете китайца: картинка;
• QIP поддержал переворот Хостела: картинка;
• Яндекс-Почта так и манит зажечь бикфордов шнур, который приводит к взрыву: картинка;
• Из новостей на Кинопоиске стало известно, что Сталлоне теперь Сталлоун, а ДиКаприо устроит революцию в России: картинка;
• NoNaMe-Club теперь называется… А, впрочем, сами прочитайте: картинка;
• Связной предлагает «вспомнить товары из прошлого и взглянуть на технику будущего»: картинка;
• Баш заполонили котики и картинки других животных: картинка;
• Рутрекер будет брать деньги со своих посетителей: картинка;
• на crazys.info выложен рецепт собачатины по-студенчески: картинка;
• АвтоВАЗ выпустит суперкар Gorizont: картинка;
• Нигма теряет буквы в строке поиска. Они буквально валятся оттуда: картинка;
• Советы сменились на вредные: картинка (ОСТОРОЖНО, мат!)
• Логотип и пункты меню Шортиков теперь на иврите: картинка.

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