Pull to refresh
51
0
Пестов Илья Сергеевич @ilusha_sergeevich

Аналитик из Groks.

Send message

Значение красоты

Reading time2 min
Views26K

Красота — это самое главное, к чему нужно стремиться во всем, что Вы создаете.


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

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


Ничто не может быть слишком маленьким или незначительным, чтобы не быть сделанным красиво.

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

Стив Джобс

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

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

Не создавайте себе проблем. Одну детальку будет сложно исправить, когда вы уже перешли к другому. Боритесь за красоту с самого начала.
Читать дальше →

Mojo Share — все социальные кнопки на CSS3 с иконочным шрифтом в одном месте

Reading time10 min
Views21K
Доброго времени суток уважаемые хабравчане. Начну издалека… Share кнопки — это очень важно. Большинство из нас с Вами использует либо стандартные кнопки определенной социальной сети, либо один из этих сервисов: Блок «Поделиться» от Яндекса, AddThis, ShareThis и новоиспеченный Pluso. Если рассматривать все эти способы с точки зрения кастомизации и дизайна, то достойнее всего, на мой взгляд, это реализовали в Pluso. Все остальное почти ничем не отличается друг от друга. Рассматривая основной функционал (непосредственно шаринг), отличается баганутостью только Pluso, где можно легко накрутить счетчики, нажимая кнопки помногу раз. Я не буду сравнивать качество сбора статистики этих сервисов хотя Pluso явно не фаварит, поскольку не компетентен в этом вопросе. Вернемся к кастомизации кнопок. Как таковой, во всяком случае удобной, ее нет. А если говорить про дизайн, то кнопки не адаптированы под Retina дисплеи, что сразу бросается в глаза. Поэтому я решил создать проект на GitHub, который состоит из иконочного шрифта MojoSocial и файла стилей MojoShare.

image

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

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

Mojo Ribbon — идеальная лента или тригонометрия в LESS

Reading time3 min
Views4.4K
Доброго времени суток уважаемые хабражители. Недавно в одном проекте мне потребовалось сделать ленточку для блоков. Для примера: очень часто сверху делают ленту с надписью «Fork me on GitHub» или же над каждым элементом в портфолио присутствует лента с датой публикации работы. Лучше покажу пример с официального сайта LESS, так как речь идет о такой маленькой детальке, на которую некоторые могли вообще не обратить внимание.

image

Данный Ribbon — это изображение внутри ссылки с абсолютным позиционированием. Чем меня не устраивает данный вариант? Во-первых: я очень люблю современные стандарты CSS, с помощью которых можно создать приятный дизайн, используя минимум изображений, а в данном случае лентой может быть обычный блок с transform rotate. Во-вторых: с недавнего времени я смотрю на веб сквозь Retina дисплей и неоптимизированные img сразу же бросаются в глаза, но и разработчикам обращать внимание на какую то ленточку, оптимизировать ее отображение с media queries, мне кажеться, даже немного смешно.

Создадим блок длинной 500px, высотой 50px, с абсолютным позиционированием, сверху, слева. Получится то, что мы видим на изображении ниже в левой части. Далее, повернем блок на -45 градусов, чтобы у нас получилось что-то похожее на Ribbon с LESS. Результат показан в правой части изображения. Наш элемент вращается от своего центра, вследствие чего получается отступ слева, а часть будущей ленты выезжает за рабочую область.

image

С помощью инспектора мы можем подобрать нужные нам значения для top и -left. Чем меня не устраивает данный вариант? Во-первых — перфекционизм: я хочу, чтобы максимальное количество указанных пикселей (в данном случае 500) отображалось в рабочей области и не выезжало за нее. Во-вторых — лень: я не хочу при изменении позиции (top, right, bottom, left) и градуса наклона вручную подбирать значения, чтобы спрятать все углы.

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

Voyeur.js — маленькая и привлекательная библиотека для работы с DOM

Reading time1 min
Views14K
Доброго времени суток уважаемые хабражители. Сегодня увидел один интересный проект на GitHub. Эта маленькая библиотека (Voyeur.min.js — 1.2kb) очень привлекает своим синтаксисом и неплохим функционалом.

image

Даже не переводя документацию с официального сайта, код можно понять интуитивно. По традиции приведу несколько примеров:

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

Justify Grid — новое слово в разметке

Reading time2 min
Views35K

Доброго времени суток уважаемые хабражители. На сегодняшний день создание разметки для страницы грубо говоря не автоматизировано. Разметку мы выполняем с помощью float или inline-block (подробнее). Поэтому я хочу поделиться с вами замечательной идей — Justify Grid Framefork.

Проблема


Если говорить о верстке на float, то мы сталкиваемся с проблемой центрирования элемента и нам приходиться скурпулезно указывать все значения ширины и отступов. Эту проблему безусловно решают существующие Grid фреймворки (к примеру 960.gs). Но получается симантически не верная разметка и разработчикам постоянно приходиться использовать .clearfix. Плюс ко всему проблемы могут возникнуть из за дробных пикселей. Если говорить об inline-block, то неудобства появляются из за того, что элементы с этим значением выравниваются по базовой линии, а не по верхнему краю. А если на странице несколько inline-block'ов, каждый из которых расположен с новой строки, то между ними будут некоторые промежутки. Любой пробел повлияет на Ваш layout. Решение есть — CSS Grid Layout или Flexible Box Layout, но эти решения не поддерживаются на большинстве браузеров.
Читать дальше →

Accordion меню на чистом CSS

Reading time4 min
Views66K
Доброго времени суток уважаемые хабражители. На сегодняшний день большинство техник создания меню-гармошки включают в себя использование псевдо-класса :target. Проблема использования :target заключается в невозможности закрыть какой либо блок в нашем меню, работать будет только «рыскрытие» гармошки.



Пример 1: раскрывающийся список (checkbox)

Пример 2: схлопывающийся список (radio)


Поэтому хочется показать Вам пример реализации Accordion меню на чистом CSS с помощью псевдо-класса :checked. С помощью этого метода у Вас появиться возможность контролировать открытие/закрытие блоков. Меню будет двух типов: полностью раскрывающееся и отображение одного блока при схлопывании других. Использовать будет checkbox и radio соответственно.

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

В Canon выпустили очки со смешанной системой реальности

Reading time1 min
Views64K
image

Компания Canon 21 февраля на презентации в Нью-Йорке в Manhattan's Classic Car Club представила широкой публике «умные» очки Canon MREAL. Пользователь, закрепивший устройство на голове, может увидеть элементы из настоящего мира, которые совмещены с виртуальными. Очки отображают видео, совмещающее в себе запись окружающего мира с помощью двух камер расположенных на уровне глаз и сгенерированный виртуальный мир с помощью ПО платформы MP-100.

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

Подборка PSD: дизайн устройств Apple

Reading time1 min
Views32K
Доброго времени суток уважаемые хабражители. В веб-дизайне существует некий тренд на различные iдевайсы. На сайтах многих популярных сервисов или дизайн студий разработчики привыкли демонстрировать пользователям адаптивный дизайн с помощью гаджетов от Apple. В этом нет ничего удивительного, это компания всегда славилась своим потрясающим дизайном и это их доминантный признак.

iMac


PSD документ iMac + PSD Mac OS X внутри.
Netcribe: Apple iMac PSD
Ссылка для скачивания

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

Все самые знаменитые видеоматериалы со Стивом Джобсом на русском языке

Reading time3 min
Views40K
Привет, Хабр! 24 февраля 2013 года Стиву Джобсу исполнилось бы 58 лет, и все поклонники помнят об этом. По случаю дня рождения этого легендарного человека я решил сделать подборку видеоматериал с его участием — это интересно, для многих познавательно, а некоторые смогут еще чему-то обучиться. Возможно, некоторые материалы уже встречались на хабре, но я считаю в этом топике собраны все самые знаменитые видео и все они на русском языке.

A Tribute to Steve Jobs


Наследие, которое Стив Джобс подарил нашему миру. Потрясающее видео, содержащие в себе нарезку из презентаций всех инновационных продуктов компании Apple. Последняя минута для меня самая впечатлительная — реакция публики на первый Mac. Такое ощущение, что Стив показал людям будущее. Овации не заканчиваются…

Это видео нельзя встроить, поэтому при желании посмотреть придется перейти по ссылке

23 минуты 1980 года со Стивом Джобсом


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


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

NASA объявили конкурс на лучшее iPad-приложение для космонавтов

Reading time1 min
Views4.5K

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

NASA объявили конкурс «Food Intake Tracker» (FIT) на разработку такого приложения. Призовой фонд составляет 30 000 долларов. Задача приложения идентифицировать пользователей, отслеживать потребление пищи и обеспечивать лучшие диетические рекомендации, что в целом позволит снизить отрицательные физиологические эффекты космического полета.



Источник: TopCoder

В помощь малому бизнесу правительство Москвы открывает коворкинг-центр

Reading time2 min
Views29K
image

Доброго времени суток уважаемые хабравчане. Хочу поделиться потрясающей новостью для любителей работать вне офиса и стартаперов – в понедельник 28 января в тестовом режиме запустился новый московский коворкинг-центр. Курирует эту площадку ГБУ «Малый бизнес Москвы». Проект полностью является их личной инициативой, и в дальнейшем планируется создание подобных центров (возможно, меньших по площади) в каждом округе. Располагается коворкинг-центр недалеко от станции метро «Первомайская», на улице Средняя Первомайская, на третьем этаже дома № 3 (БЦ «Майский»).

Воспользоваться услугами центра смогут все абсолютно бесплатно! Но, к сожалению, только до конца февраля. В марте организаторы определяться с ценами, перечнем всех услуг и начнут взимать плату за использование пространства центра. Скорее всего будут стандартные для подобных заведений тарифные планы: на день, неделю, месяц + стоимость услуг может варьироваться в зависимости от пакета используемых услуг. Правительственное софинансирование проекта вселяет надежду на более демократичную ценовую политику в отличии от частных коворкингов.

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

Палка о двух концах. Страдаете ли вы перфекционизмом?

Reading time4 min
Views42K

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

Предисловие


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

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

Проблема


Перфект должен быть во всем

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

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

Google намерен продать часть активов Motorola

Reading time1 min
Views9.5K
image

Речь идет о подразделении Motorola Home, занимающемся производством ТВ-приставок для подключения кабельного телевидения. Оно в случае одобрения регуляторов перейдет в собственность Arris Group Inc., передает Reuters.

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

Создаем адаптивную страницу портфолио с фильтрами

Reading time8 min
Views31K
Доброго времени суток уважаемые хабражители. На сегодняшний день уже многие знакомы с понятием адаптивный дизайн и я хочу поделиться интересной реализацией страницы портфолио с фильтрами.

Netcribe
ДЕМО

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

Инфографика: история HTML5

Reading time1 min
Views32K
Привет, Хабр! Хочу поделиться с вами интересной инфографикой об истории HTML5.

Все началось с создания рабочей группы WHATWG в 2004 году. Ее участники совместно с представителями компаний Apple, Mozilla Foundation и Opera Software начинают разработку HTML5. А уже в скором 2013 ожидается, что принятие HTML5 станет настоящим бумом в 1 миллиард использований.


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

Простая техника Parallax Scrolling

Reading time2 min
Views126K
Доброго времени суток уважаемые хабраюзеры. На сегодняшний день Parallax Scrolling является неким трендом и я хочу рассказать о простой реализации данного эффекта. Техника основана на скорости изменения свойства background-position. Эффект Parallax Scrolling заключается в том, что фон движется медленнее чем содержимое

HTML разметка


Создаем два блока с атрибутами "data-type" и "data-speed":
<section id="home" data-type="background" data-speed="10" class="pages">
         <article>Простая техника Parallax Scrolling</article>
</section>
<section id="about" data-type="background" data-speed="10" class="pages">
         <article>Простая техника Parallax Scrolling</article>
</section>

Для управления значениями скорости и позиции в JavaScript, data-type используются как ключевые атрибуты при передачи необходимых параметров.

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

Кроссбраузерная реверсивная анимация фона на CSS3

Reading time4 min
Views28K
Доброго времени суток уважаемые читатели Хабра. Существуют замечательные CSS свойства с помощью которых можно задать реверсивное движение анимации — animation-direction: alternate и animation-direction: alternate-reverse (не путать со свойством animation-direction: reverse, которое задает реверсивное направление), но на сегодняшний день их не поддерживает большинство современных браузеров. Я хочу рассказать о том как сделать кроссбраузерную реверсивную анимацию фона.

netcribe

Пример на Jsfiddle

Читать дальше →
12 ...
8

Information

Rating
Does not participate
Location
Москва, Москва и Московская обл., Россия
Date of birth
Registered
Activity