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

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

Быстрое изменение состояния посреди анимации

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

@keyframes toggleOpacity {
  50% { opacity: 1; } /* Turn off */
  50.001% { opacity: 0.4; }

  /* Keep off state for a short period */

  52.999% { opacity: 0.4; } /* Turn back on */
  53% { opacity: 1; }
}

Вот как я использовал этот приём для имитации мигающей неоновой вывески с помощью прозрачности и свойства text-shadow:

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

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

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

Ratchet — так называется HTML5-фреймворк для быстрого прототипирования мобильных приложений, который 1,5 года назад создали те же парни, которые когда-то выпустили Bootstrap.

Инструмент позволяет быстро создать красивый интерфейс мобильного приложения — и дает вам красивые стили и замечательные иконки, согласованные с гайдлайном в зависимости от платформы. Можно сделать прототип, а можно завернуть в PhoneGap и без особых усилий получить сравнимый с нативным интерфейс приложения в продакшене.
Фреймворк очень прост в использовании и прекрасно документирован.

Я являюсь поклонником Ratchet с момента выхода первой версии. Тогда он был доступен только под iOS.
Не так давно вышла вторая версия, которая наряду с iOS поддерживает Android. Ура-ура!
(правда, обратной совместимости с первой версией нет)

Кому интересно про новые возможности Ratchet 2.0 — прошу под кат!

Пол Хаммонд (Paul Hammond) написал большую статью под названием «Ускорь свой сайт с применением отложенной загрузки контента» (Speed Up Your Site with Delayed Content). В своем материале он изложил технику для погрузки части содержимого, такого как изображения аватаров профилей пользователя в комментариях, после первоначальной загрузки страницы, что дает хороший прирост производительности при загрузке страницы.

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

Привет, Хабр! Относительно недавно я опубликовал "Лучшие бесплатные Photoshop плагины для веб-дизайнеров". В подборке я попытался собрать все известные мне инструменты, которые значительно помогают в работе. Кстати, по возможности я ее обновляю и несколько дней назад добавил Velositey для построения лэйаутов. Таким образом мне хочется сделать «конкретное местечко» где будут храниться удобные для работы с фотошопом штуки. Аналогично не только поста ради, мне хочется собрать и платные инструменты, которые реально окупятся через «несколько» человеко часов. Некоторыми из них я пользуюсь сам.

PNG HAT $39.99

Сей замечательный плагин от достаточно известной компании Source «символизирует» лучший способ того, как должна происходить нарезка слоев. Принцип «в один клик», которые значительно сокращает потраченное время на экспорт слоев наглядно продемонстрирован в видео выше. Что еще есть внутри: мощная оптимизация с помощью PNG Crush, PNG quant и opti PNG, которая по заявлению разработчиков в разы эффективнее стандартного способа; Base64 encoding; код на изображение копируется в буффер для HTML, CSS или Obj C; масштабирование, что очень удобно в связи с необходимостью разработки дизайна под Retina дисплеи; и даже облако объемом 1GB для хранения изображений.

Говоря про «нарезку» также стоит упомянуть Zeick $19.99, который экспортирует все векторные шейпы в SVG и Glifo $19, который экспортирует эти же шейпы в иконочные шрифты.

Mozilla анонсировала новый проект mozjpeg по созданию качественного кодера JPEG, который улучшит сжатие изображений при сохранении совместимости с существующими декодерами.

На каждом сайте постоянно увеличивается и количество файлов JPEG, и их размер. Поскольку HTML, JS, и CSS относительно невелики, то при загрузке веб-страницы основной трафик зачастую приходится именно на JPEG. Так что уменьшение размера фотографий — вполне очевидная цель для оптимизации, считает Mozilla.

Существующие кодеры JPEG зачастую работают не очень эффективно. Логично перейти на более современные алгоритмы (например, JPEG2000 с вейвлет-преобразованием или свободный WebP), и такая тема неоднократно обсуждалась. Но разработчики Mozilla говорят, что популярность JPEG слишком велика. Созданный в 1992 году этот стандарт сжатия с потерями стал общепризнанным. Переход на новый формат займёт много лет, поскольку он не совместим с имеющимся программным обеспечением. «Мы (в Mozilla) не сомневаемся, что алгоритмические улучшения когда-нибудь подтолкнут к такому переходу, возможно, скоро. Но даже в этом случае JPEG ещё долго будет с нами».

Рады представить первый выпуск «Самого интересного из мира веб-дизайна». Мы постараемся делать такие выпуски регулярно. В сегодняшнем выпуске мы поговорим про дизайн как таковой: 1) Что должен знать дизайнер об отступах в заголовках; 2) Как иконка прелоадера влияет на наше отношение к сервису; 3) Азы адаптивного дизайна; 4) Использование «Photoshop Generator» для создания прототипов; 5) Руководство по стилю от Yelp. Расскажем о новых интересных и красивых сервисах: 1) Генератор случайных пользователей; 2) Сервис Peek. Видео-отзыв о сайте от реального человека; 3) Recordit.co. Сервис для записи скринкастов; 4) Peekcalendar. Карманный календарь. Покажем, что нового, у всем известных ребят: 1) Iconfinder. Версия 5.0; 2) Новый Ted.com 2.0

---

Что должен знать дизайнер об отступах в заголовках

В своей статье Артём Гобунов раскрывает простое «правило внутреннего и внешнего», которое является частным случаем теории близости. На конкретном примере демонстрируется, как нужно рассчитывать вертикальные расстояния между заголовком и подзаголовком, а также между ними и контентом страницы, чтобы все элементы не «смешивались в кашу».

http://artgorbunov.ru/bb/soviet/20140224/

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

---

50$. Basecamp

Простая и удобная система управления проектами от команды 37signals. Это основной инструмент взаимодействия как внутри студии, так и с заказчиками. Все задачи заводятся в виде простых списков и легко меняются местами друг с другом простым перетаскиванием. Каждая задача выглядит как публикация с комментариями. Любой может указывать, кто из команды получит уведомление на email о его комментарии. Можно ограничивать видимость некоторых задач для клиента.

Статья написана в рамках конкурса среди студентов Технопарка Mail.ru.

Думаю, JavaSript-библиотека jQuery в представлении не нуждается, но на всякий случай напомню, что jQuery призвана ускорить разработку, предоставить синтаксический “сахар” для нативного js и избавить разработчиков от проблем, связанных с кроссплатформенностью.
Прежде чем говорить о том, как устроена обработка событий в jQuery, нельзя не упомянуть об истории обработки событий в браузере.

У нас, как и у всех, изначально в разработке использовались стандарты написания кода, но на деле они ограничивались примерно таким:

— В кэмелкейсе пишем?
— Да, как обычно, в кэмелкейсе
… прошло две недели…
— Мы ж в кэмелкейсе договаривались!!!

В нашем случае не было разве, что последней фразы.
Уже давно хотелось как-то это систематизировать, но никак не доходили руки до выбора между стилями от jQuery, Google, ideomatic.js и Crockford.

Когда месяц с небольшим назад в trending гитхаба попало руководство от AirBnB, оно тут же попалось нам на глаза…
А неделю назад мы его перевели, в первую очередь для собственных нужд, но не поделиться с сообществом не могли.

• Оригинал: https://github.com/airbnb/javascript
• Перевод: https://github.com/uprock/javascript

Прочитать крайне советую как минимум всем начинающим js-разработчикам.

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

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

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

В прошлом году я был одним из тех, кто поступил в Школу разработки интерфейсов Яндекса и закончил её, и сегодня хочу рассказать вам о том, каким я увидел учебный процесс в ШРИ, как это бывает и что даёт.

Честно признаюсь, что поводом для поста стал второй набор в Школу разработчиков интерфейсов Яндекса, который проходит сейчас. В этом году занятия Школы будут проходить не только в Москве, но и в Екатеринбурге. Программы курсов немного отличаются, но везде есть как теоретические, так практические занятия. Вести их будут ведущие фронтенд-разработчики Яндекса, которые работают над интефейсами Поиска, Почты, Карт, Маркета и других сервисов.

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



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

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

В заметке собраны сайты с обучающими материалами для веб-дизайнеров и веб-разработчиков. Старался не повторяться с постом 27+ ресурсов для онлайн-обучения хабраюзера nicolausYes.

Academic Earth

Множество бесплатных лекций, в том числе от известных университетов (Гарвард, MIT, Стенфорд и др.).

Новые полезные инструменты, сервисы, статьи, бесплатности для веб-дизайнеров за июль 2013. Остальные подборки доступны по тегу "новое для веб-дизайнера".

Сервисы

I Want To Use — на сайте можно выбрать CSS-фичи, которые хотите использовать, и будет показан процент пользователей, которые смогут их использовать.

Сегодня вышла предварительная версия Internet Explorer 11 для Windows 7. Ранее он был доступен только пользователям Windows 8.1. Новый браузер обеспечит высокую производительность, большую скорость загрузки страниц, и поддержку последних стандартов, необходимых для работы нового поколения веб-сайтов. Кроме того, разработчики смогут воспользоваться полностью переработанными инструментами F12.



Скачать и попробовать IE11 Developer Preview можно уже сегодня.

С IE11 разработчики могут использовать на сайтах видео в профессиональном качестве, аппаратно-ускоренные 2D и 3D веб-технологии, включая WebGL.

С сегодняшнего дня все преимущества IE11 доступны более чем 700 миллионам пользователей Windows 7. Кроме того, сегодня мы представляем обновленный инструмент для разработчиков — www.modern.ie с бесплатными виртуальными машинами и сервисом онлайн-тестирования сайтов на всех платформах.

7. Карта ума.

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

Для создания карты ума (её чаще называют английским термином «Mind map»), мы можем использовать специальное ПО, я рекомендую Xmind.

Еще в 2009 году, Сергей Чикуёнок опубликовал статью, в которой представил новый способ написания HTML и CSS кода. Этот революционный плагин, назывался Zen Coding, он помогал многим разработчикам на протяжении многих лет и в настоящее время вышлел на новый уровень.

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

Для тех, кто предпочитает смотреть, а не читать, вот видео любимых трюков автора.