Согласно поговорке, программисты — это устройства, преобразующие кофеин в код.

Если спросить первого попавшегося программиста, когда он наиболее продуктивен, — скорее всего, он назовёт ночь. Кто-то пораньше, кто-то попозже. Популярен вариант встать в 4 утра и сделать работу до начала дневной суматохи. А некоторые предпочитают ложиться в 4 утра.

Цель всего этого — избавиться от отвлекающих факторов. Но можно было бы просто закрыть дверь… Что же такого особенного в ночи?

Я думаю, что всё сводится к трём вещам: расписанию творца, сонному мозгу, и яркому экрану компьютера.

Предисловие

Несколько недель назад в просторах интернета я увидел очень заинтересовавшую меня вещь — iOS иконки на CSS3 полностью без картинок. Первое что подумал — «Я тоже так могу»! А спустя еще 5 минут для себя четко решил — «challenge accepted». Но чтоб не повторяться я решил немножко усложнить задачу — сделать не только иконки, но и сам девайс.

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

Итак, в тот-же день я решил сделать iPhone4 на CSS3 абсолютно без картинок, base64, canvas или SVG и добавить еще некоторую изюминку — интерактивные возможности:
— включение/выключение;
— блокировка при включении и разблокировка как в реальном iPhone;
— анимация «slide to unlock» текста на экране блокировки;

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


Пример удачной регистрации на сайте Tumblr.

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

Школа программирования Codecademy, как и обещала, увеличивает количество доступных предметов. К трём курсам по JavaScript теперь добавился jQuery. Выбор логичен: jQuery — это одна из самых популярных JavaScript- библиотек, которая широко используется для создания современных интерактивных сайтов.

Вводный курс The Document Object Model & jQuery состоит из двух уроков и 13 упражнений. Как и раньше, занятия проходят в интерактивном стиле, для первых уроков регистрация не нужна.



Кроме новых уроков, улучшен также интерфейс Codecademy: разработчики прикрутили «блокнот» (Scratch Pad), где можно во время урока экспериментировать с произвольным кодом.

Сделанный за две недели проект Codecademy в августе запустился, в октябре привлёк $2,5 млн венчурного финансирования, количество пользователей недавно превысило 800 тыс.

Разработчики браузера Firefox, который сейчас испытывает сильнейшую конкуренцию с Google Chrome, в марте следующего года планируют к выпуску новую 11-ю версию своего обозревателя. В ней появится ряд новых инструментов, призванных облегчить труд разработчиков.

Среди новых инструментов появится Style Editor: инструмент, предназначенный для более комфортной работы со стилями HTML-страницы. По сути, инструмент представляет из себя двух-панельное окно, одна из панелей которого предназначена для отображения списков имен стилей, а вторая — собственно, CSS-кода. Разработчики смогут создавать новые стили «на лету», импортировать их из файла, включать и выключать отдельные стили, получая возможность оценить как выглядит страница, причем выполняемые изменения тут же отображаются. Если разработчик хочет изучить CSS-код другого сайта, который часто минимизируют с целью уменьшения скорости загрузки, то Style Editor сможет определить «оптимизированные» места в CSS и отобразить их в удобном виде.

Как выглядит будущий инструмент можно оценить на скриншоте ниже:



Более эффектным визуально выглядит другое усовершенствование для разработчиков — отображение структуры web-страницы в виде 3D (функционал, который ранее был реализован в расширении Tilt)

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

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

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

Иллюстраций: 34, символов: 51 609.

Так получилось (и прошу считать это удачным совпадением), именно сегодня на Хабре опубликован топик про практическое применение теней из CSS3 для создания интересных эффектов, а мы в свою очередь подготовили топик про основы для этого творчества.

Мы попробуем разобраться в том, как работают тени в новых модулях CSS3. С практической точки зрения, мы рассмотрим два правила: box-shadow и text-shadow, определенные соответственно в модулях CSS3 Backgrounds and Borders и CSS3 Text.

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

Первая часть посвещена работе с box-shadow, во второй мы пройдемся по теням для текста.

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

Пожалуйста, обратите внимание, что эти примеры будут корректно работать только в современных браузерах, которые поддерживают свойства CSS3.

С каждым днем новые стандарты css3 и html5 всё более глубоко входят в жизнь верстальщиков и web-разработчиков, а браузеры с каждым днем становятся все более совместимыми с этими стандартами.



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

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

В данной статье я хочу поделиться с вами некоторыми экспериментами по созданию анимированных кнопок при помощи CSS3. Идея заключается в создании анимированных ссылок с разными стилями, hover-эффектами и пр.

В данных примерах используются иконки с webiconset.com, а также шрифт от Just Be Nice.

Мы рассмотрим каждый пример и разберем как выглядит их HTML-структура и стили для разных состояний кнопок.

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

Чтобы не захламлять код в уроке я не буду использовать префиксы для различных браузеров. Их вы сможете увидеть в архиве с примерами.

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

Цель топика (и сразу же дисклеймер) — помочь начинающим не впадать в кататонический ступор при виде чего-то вроде

user[(os[((user.microsoft_adept ? microsoft : apple).system || "linux")].install_carma <= user.carma) ? "install" : "cant_install"](os[((user.microsoft_adept ? microsoft : apple).system || "linux")].name);

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